{"_id":"@material/drawer","_rev":"1808-39b146d0ffd5c92bd95f537b717da7af","name":"@material/drawer","description":"The Material Components Web drawer component","dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"versions":{"0.1.0":{"name":"@material/drawer","version":"0.1.0","license":"Apache-2.0","_id":"@material/drawer@0.1.0","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db88172391c133ab9b3202f7b7912cc587f61aac","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.1.0.tgz","integrity":"sha512-3vb0bNHAWQY7CcjnfvHj2BSmkWuTmmFB+7SiMd8W1vUr/qMrIEOGEo2+ekIYPgSDLzSqDtKStLJP01xYqWpJgA==","signatures":[{"sig":"MEUCIQCYG2mKJ+svAnifq8t4c8orZ9dIaaKJjsZCDOXLGlEFkQIgS6TcBs+Hakhce29sT45tcd1vqGfA6LM6zDZS0QgNIZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"db88172391c133ab9b3202f7b7912cc587f61aac","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"7.1.0","dependencies":{"@material/rtl":"^0.1.0","@material/base":"^0.1.0","@material/theme":"^0.1.0","@material/animation":"^0.1.0","@material/elevation":"^0.1.0","@material/typography":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.1.0.tgz_1481824481826_0.2909771597478539","host":"packages-18-east.internal.npmjs.com"}},"0.1.1":{"name":"@material/drawer","version":"0.1.1","license":"Apache-2.0","_id":"@material/drawer@0.1.1","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c9e9fa079626e2eb777f43b7e07d2d8fe3cb74c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.1.1.tgz","integrity":"sha512-5JuIcZBhmqeKdAtB1kngLiNBybiFzk11dH6Nj0FB28q4VlfO39Nj/XF3p2kvnwN/ilyK1uXbjoXtFEfdhCUJyQ==","signatures":[{"sig":"MEQCIESHzqq7IMJGfb/of0XT8QtW/aavrsgxwfhN80SyNYF6AiAc0ya1VKRf+L8qy3DEbErcfOzvcBy1uSIIeYeNv7GfyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"3c9e9fa079626e2eb777f43b7e07d2d8fe3cb74c","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.0","@material/base":"^0.1.0","@material/theme":"^0.1.0","@material/animation":"^0.1.1","@material/elevation":"^0.1.1","@material/typography":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.1.1.tgz_1483977434659_0.0369219311978668","host":"packages-12-west.internal.npmjs.com"}},"0.1.2":{"name":"@material/drawer","version":"0.1.2","license":"Apache-2.0","_id":"@material/drawer@0.1.2","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c256c301ba060b8a30b0a26536206561170829c6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.1.2.tgz","integrity":"sha512-Hwc9xLkGISHMK+R42zhxTXiPy/AkquVYumlmizOZvr7ls5ieJS8AO5tUEZujbfdFtobBOfAh/vjGXx2M40nLUw==","signatures":[{"sig":"MEUCIHCLq9NhWnec8ytMyAfrKq5oqIFyfBnmbSKURHuP6F1wAiEAyFkKk0dsUTpaV97kb8MLbzd+mInVne6uHpjBPxicv+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"c256c301ba060b8a30b0a26536206561170829c6","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.1","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.1","@material/base":"^0.1.1","@material/theme":"^0.1.1","@material/animation":"^0.1.3","@material/elevation":"^0.1.2","@material/typography":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.1.2.tgz_1485190173943_0.894479013979435","host":"packages-18-east.internal.npmjs.com"}},"0.1.3":{"name":"@material/drawer","version":"0.1.3","license":"Apache-2.0","_id":"@material/drawer@0.1.3","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b675d3381d5a768950c3b39233651a551ca66fe0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.1.3.tgz","integrity":"sha512-lXhtug1XMYvd7zux7vAMnfXePaRb8dbMbEka9c8tY7lg6GZbf1ZomgHkKFXTEbVgmO0F/vBRRyV6BdulbihDXw==","signatures":[{"sig":"MEUCICm8k5wTcrxYGeSMsqvgRE7PHBXL6Zr3KltJWzjpruqCAiEAoTHjnrghhqtx4Pml+JqoRVfSSTayyw8KGVTOeMy0QLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"b675d3381d5a768950c3b39233651a551ca66fe0","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.1","@material/base":"^0.1.1","@material/theme":"^0.1.1","@material/animation":"^0.1.3","@material/elevation":"^0.1.2","@material/typography":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.1.3.tgz_1486407882249_0.9541161865927279","host":"packages-12-west.internal.npmjs.com"}},"0.1.4":{"name":"@material/drawer","version":"0.1.4","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.1.4","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93811ddf30899c9ac358e9b48e61442fc9c1968e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.1.4.tgz","integrity":"sha512-ys7U15kQmi9K3M158DUH9gQmjgJjOufCxIDVMoWiOTgKV6Tgqyfzc+4UnBxuCgMisUQcwgo2DgWvbtrDaDeWow==","signatures":[{"sig":"MEYCIQDoJjYSxsGUKUNE8ecMsESO1SfWhjw5L8Yd99HFjzHiqgIhAItHeMQ35XGofvN3ps8oiAYINxbl+jLDbrvdBp5ECN03","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"93811ddf30899c9ac358e9b48e61442fc9c1968e","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.2","@material/base":"^0.1.2","@material/theme":"^0.1.2","@material/animation":"^0.1.4","@material/elevation":"^0.1.3","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.1.4.tgz_1487698051836_0.4595264596864581","host":"packages-12-west.internal.npmjs.com"}},"0.2.0":{"name":"@material/drawer","version":"0.2.0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.2.0","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0f141f554eecf1486a9692cb5840ed165e85735","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.2.0.tgz","integrity":"sha512-n2m7O0D3NBCeMQz9vn7Y4x0eL/HyWjUtk0rH76r/0rCwodN90/eggmvpgb6XyFImXg8S4gkWE0F1tWulXxb7GQ==","signatures":[{"sig":"MEQCIAZ467xoDeNGPApBy/1FpIxRTe1vBdtklyMCRUIozTLpAiBEXETu1vKj/LaTB+iRQ4UhlGfN11xmjy5CTL7hNSGW8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"e0f141f554eecf1486a9692cb5840ed165e85735","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/rtl":"^0.1.2","@material/base":"^0.1.2","@material/theme":"^0.1.3","@material/animation":"^0.1.4","@material/elevation":"^0.1.3","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.2.0.tgz_1491233280586_0.5679266355000436","host":"packages-12-west.internal.npmjs.com"}},"0.3.0":{"name":"@material/drawer","version":"0.3.0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.3.0","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c52ac83bee547e38f4db54d20894d9b0963a44ba","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.3.0.tgz","integrity":"sha512-lNasNEX7BqkLQBOw1oJQTiTiWWN+3/qWdurgxikPyOrfEAiA69aUnUhY2VBY1MRJFbCG96kR1c5pYZP5kRVJ5w==","signatures":[{"sig":"MEYCIQDtDaU1R6ZC4swgRwvKPpWcuwcPu04twyczpJqGYEUGuwIhALksy6c0Z74ndnYzKc9jDusacZWq35+9PDk+Rkp1KXnu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"c52ac83bee547e38f4db54d20894d9b0963a44ba","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/rtl":"^0.1.2","@material/base":"^0.1.2","@material/theme":"^0.1.3","@material/animation":"^0.1.4","@material/elevation":"^0.1.3","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.3.0.tgz_1492443784491_0.3966922899708152","host":"packages-12-west.internal.npmjs.com"}},"0.3.1":{"name":"@material/drawer","version":"0.3.1","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.3.1","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae3137e34ecf87f7d8a58e2bc11e88d06e667e80","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.3.1.tgz","integrity":"sha512-E9jLtpt30UNRf+wa+GMlHoV4dEtxEyaIxk26AV3DK35o5m0dzTRWgNZWxojsbGU9V+JC+lVSoMe+fPYjVYM1tQ==","signatures":[{"sig":"MEUCIQDI8TccPjEu/aYY83N1n1ROYNPC70T/H6hXd3TMxs2hrwIgJqM2bHEcOE8VQt5rc9KCjt8d6RpNYmwOoRGWvb/6IUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"ae3137e34ecf87f7d8a58e2bc11e88d06e667e80","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/rtl":"^0.1.3","@material/base":"^0.1.2","@material/theme":"^0.1.4","@material/animation":"^0.1.5","@material/elevation":"^0.1.4","@material/typography":"^0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.3.1.tgz_1492527076375_0.9172206646762788","host":"packages-18-east.internal.npmjs.com"}},"0.4.0":{"name":"@material/drawer","version":"0.4.0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.4.0","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5825e3704887916216cb463f116bc4579ce40f8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.4.0.tgz","integrity":"sha512-T4BcYEg0EzEfMbux9YS3pHTcBCLHGxQ1u2eJGTkCitvB53rwBPSInzdRUfx1Ahvwo4um5tYlljFinOsgOzHIAQ==","signatures":[{"sig":"MEUCIDSAdJCxS80FusUyfT2nH6T9KXR4KIhMZHnwzQxXGuYAAiEA+JQueckJV4I3EiYm2HTDGsfi6W7JfnIV4bx5cO7TLlM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"d5825e3704887916216cb463f116bc4579ce40f8","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.3","@material/base":"^0.1.2","@material/theme":"^0.1.4","@material/animation":"^0.2.0","@material/elevation":"^0.1.5","@material/typography":"^0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.4.0.tgz_1493653384309_0.11078392574563622","host":"packages-18-east.internal.npmjs.com"}},"0.4.1":{"name":"@material/drawer","version":"0.4.1","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.4.1","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07d7fd6edf5b6a16d97d0ec49462d2613a915ec1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.4.1.tgz","integrity":"sha512-TK1m+Hnit5tspq5n2PGZYsy28vwwHd0iuab6p0e5saWmm+Btkti6VbXsrlAZS0PrD3xxjbXvwOOUL/ths4ox6Q==","signatures":[{"sig":"MEUCIQD6UUxTVnRSkzyOaql9BmsQFgthKfyX/TM174KwpxfWxQIgLzcybG0dbYl39RqjlesSzyi3E2Ri6dhzSUvnt8ZiIXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"07d7fd6edf5b6a16d97d0ec49462d2613a915ec1","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.4","@material/base":"^0.1.3","@material/theme":"^0.1.5","@material/animation":"^0.2.1","@material/elevation":"^0.1.6","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.4.1.tgz_1494865560847_0.06843589711934328","host":"packages-12-west.internal.npmjs.com"}},"0.4.2":{"name":"@material/drawer","version":"0.4.2","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.4.2","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba211a91102b89c93c7768da7b81917124b52442","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.4.2.tgz","integrity":"sha512-UoXpzmALdnR0o2H3ITkreNBLTHowY1SNsaOuJPGzKRzr2NFwevpeb5b9zJp1kk5DGsBKnl8KWRbyRSwW/GFqoQ==","signatures":[{"sig":"MEUCICtco1mC9j29O7qMErWHeBCGYltqvOFTrV9aiki+fsaMAiEA97f8OMlnIp2FXIQbfSziGSKw8q1hgEeLM6ev+Yii+L8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"ba211a91102b89c93c7768da7b81917124b52442","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/rtl":"^0.1.4","@material/base":"^0.1.3","@material/theme":"^0.1.5","@material/animation":"^0.2.2","@material/elevation":"^0.1.7","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.4.2.tgz_1495031298812_0.39245314383879304","host":"packages-18-east.internal.npmjs.com"}},"0.4.3":{"name":"@material/drawer","version":"0.4.3","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.4.3","maintainers":[{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e342a18ab902f5f41cacb5cb7522ab25059a6c7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.4.3.tgz","integrity":"sha512-QzCjIq4traSRpRzAgvTsslSLCD/8BrHn304XQG/0yr0+VlyVY1C6pTwbb1HZCVKsydVlr0Fc4KAWKFmDIAbANA==","signatures":[{"sig":"MEUCIDJ22bcUe+GBCNjgO/rs32pfjC6yjsXJc0qXM24uUwtuAiEAxcAcJpPHf4SlRJSAj1EfclqfcbFHFVkRfop1mMLtTmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"2e342a18ab902f5f41cacb5cb7522ab25059a6c7","scripts":{},"_npmUser":{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"7.8.0","dependencies":{"@material/rtl":"^0.1.4","@material/base":"^0.2.0","@material/theme":"^0.1.5","@material/animation":"^0.2.3","@material/elevation":"^0.1.8","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.4.3.tgz_1496171074495_0.9212201647460461","host":"s3://npm-registry-packages"}},"0.5.0":{"name":"@material/drawer","version":"0.5.0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.5.0","maintainers":[{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1aea6d15e9d2bc9a7cdda97cccede1a0ef9fbed8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.5.0.tgz","integrity":"sha512-z1NsNWN9dZak7z8EGBGmfkhYOamZWUk/0hP9KpqHRFfVzRlqm9F72XkQmzCplFwgW4MbnlqynlWydIhm55mkSg==","signatures":[{"sig":"MEYCIQDjVCrWeGLBeFpSx2ZyIDw6mhm1FZ2YQig9BHW44MZMjwIhAOfb+PfN6NwnPtDE401XN2ttoSwr+PVH3pdlTUOTmO6C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.0.3","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"8.0.0","dependencies":{"@material/rtl":"^0.1.5","@material/base":"^0.2.0","@material/theme":"^0.1.5","@material/animation":"^0.2.3","@material/elevation":"^0.1.8","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.5.0.tgz_1497282797472_0.36365049378946424","host":"s3://npm-registry-packages"}},"0.5.1":{"name":"@material/drawer","version":"0.5.1","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.5.1","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74938b89783f9d82d06c1d102a5e143241d09d98","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.5.1.tgz","integrity":"sha512-XbtRRS/tpYo2Uhv/+pGTbG/hdKEA/T5rQTMDlQG8Mt9Jjlp5WPsZXHNK2hd6w41ZZ6MbH5uPA2Rp6eJIpKkKSw==","signatures":[{"sig":"MEUCIQCsXLUkSWxAtBpdvFbNhI3t/gaaFf/xBUdfuhsopoumaAIgOwuiaqDsxZOtjPHZxcwuvBBA/VyKTknR9w6QT+1reNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"74938b89783f9d82d06c1d102a5e143241d09d98","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.6","@material/base":"^0.2.1","@material/theme":"^0.1.5","@material/animation":"^0.2.3","@material/elevation":"^0.1.9","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.5.1.tgz_1498493451180_0.6540108094923198","host":"s3://npm-registry-packages"}},"0.5.2":{"name":"@material/drawer","version":"0.5.2","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.5.2","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c7878f5b2f4fa3b286c9e3d089e3251b15501bd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.5.2.tgz","integrity":"sha512-RHwUCN4Vb9IBhMA89aecw7QvZ+LSVEmNugSSHaEw9Pv0zvz1On/x/hF+3TXUfoUNuuDHXotjRkpY0luKZd26Wg==","signatures":[{"sig":"MEUCIEe5luyZ/n4kZXncpsR+QZ21kLcL/kILmqps0Xi0avzbAiEAn8496n/VgBGajmlKnmsDp5egM3f2LDRb6xIlEm1WlvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"3c7878f5b2f4fa3b286c9e3d089e3251b15501bd","scripts":{},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/rtl":"^0.1.6","@material/base":"^0.2.2","@material/theme":"^0.1.5","@material/animation":"^0.2.3","@material/elevation":"^0.1.9","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.5.2.tgz_1499702330677_0.8024576648604125","host":"s3://npm-registry-packages"}},"0.5.3":{"name":"@material/drawer","version":"0.5.3","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.5.3","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a404f784e9ec8b1f2c64b9c1d1298e2c6e3b5c8e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.5.3.tgz","integrity":"sha512-rlQTcc0LE6tMLBZ7pwq8MF312XA5EAdzEr+4sxFg+Xqt4T8rUuWuzorIfcOyJsO5OVwNXgBJG1tDUD9dFxIL+w==","signatures":[{"sig":"MEQCIEHCDCmA6kla69kblAXJ024oJGx7apfYyOwsvRdqQ9wKAiByVDddW83UajJZ/FUMEAVqozcsLsX6iVIKDOuyblNlqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"a404f784e9ec8b1f2c64b9c1d1298e2c6e3b5c8e","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.3","@material/theme":"^0.1.6","@material/animation":"^0.3.0","@material/elevation":"^0.1.10","@material/typography":"^0.2.3"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.5.3.tgz_1500911354074_0.26555975363589823","host":"s3://npm-registry-packages"}},"0.5.4":{"name":"@material/drawer","version":"0.5.4","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.5.4","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04b6a78e9ea3ee55f1a98ec7eb172dc62341b0d7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.5.4.tgz","integrity":"sha512-9isWCm3MnnPiwvnfRJDi8lHPC05TSnRgrhz7fSpQ6lOoXGxFPFmChktG7qMk38VzdxjSpDNmVnljvfgyVOp1Uw==","signatures":[{"sig":"MEYCIQCvsFLqECw/AY1bASFI0HW5tdBvaa2a68PoU3OheO0qZAIhAPzGgGGPxR4Kofog3Ea1Yjo3kOrB8wsmbzYf8SnrgR0r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"04b6a78e9ea3ee55f1a98ec7eb172dc62341b0d7","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.3","@material/theme":"^0.1.7","@material/animation":"^0.3.1","@material/elevation":"^0.1.11","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.5.4.tgz_1502138906224_0.3181556025519967","host":"s3://npm-registry-packages"}},"0.5.5":{"name":"@material/drawer","version":"0.5.5","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.5.5","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dea40b69aa7005e2ab2d46d44f2bf70e17118d3a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.5.5.tgz","integrity":"sha512-lVL/1BoGROz/rZFZIuP+H6L95GJ/3YHuEznbdrisU4wd/i79ZbPgQYveQEwtp4B1I40UDLQXGnigDpEKs+Pk4Q==","signatures":[{"sig":"MEUCICWdjmHhN7bfBM/fJh2300H9QiCnZAXRFCg/0id/chNyAiEA3rs1X5CfM0OKOGAPtKo6xRo+R9PGFlo1GZJFzLxFu5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.4","@material/theme":"^0.2.0","@material/animation":"^0.3.1","@material/elevation":"^0.1.11","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.5.5.tgz_1503336468916_0.5551969900261611","host":"s3://npm-registry-packages"}},"0.5.6":{"name":"@material/drawer","version":"0.5.6","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.5.6","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58df5f41d086e4ed14214466f054d62c09809035","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.5.6.tgz","integrity":"sha512-/Pptn9uSR9XcAlKDFno/XOT+TNXIhG81hpMORmMVXP898VIzd47BCJXHDLU4JXlpyNGAacfNMeP+dsS4gUWN1Q==","signatures":[{"sig":"MEUCIQDY7WIpkjXfXovTX9YXsAJRYUfLvvSr3osqdufjunvhGgIgJ9R/o9xTecheM+rP/hXRP7ruKLOTq6+qnFdiu2BH+W4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.5","@material/theme":"^0.2.0","@material/animation":"^0.3.1","@material/elevation":"^0.1.11","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.5.6.tgz_1503586002842_0.02860179264098406","host":"s3://npm-registry-packages"}},"0.5.7":{"name":"@material/drawer","version":"0.5.7","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.5.7","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d916dca7d776ba03e95fac243d9b12e3d0f192f0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.5.7.tgz","integrity":"sha512-qDalZe0cL6+6e7XO5Adc7/aLtuaCFcZdgpSv9J7r3KvnARPjmAwcPidxGo1oyYTt7UkdgdPYvKJ31qFnUI/CQg==","signatures":[{"sig":"MEUCIHuZwbIg+NFx3acruNVFqXU6xm29V5+wEpOZUDU9VjexAiEA/xNGyf5VJXRelQSAga/BKdznsY0MqtSTF/bDbp55ZDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"d916dca7d776ba03e95fac243d9b12e3d0f192f0","scripts":{},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.5","@material/theme":"^0.3.0","@material/animation":"^0.3.1","@material/elevation":"^0.1.11","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.5.7.tgz_1504642567482_0.3451046880800277","host":"s3://npm-registry-packages"}},"0.5.8":{"name":"@material/drawer","version":"0.5.8","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.5.8","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8014778c5c5bdab4b26bd3b6b1299785af9167e7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.5.8.tgz","integrity":"sha512-ihjGsNRYjKvoveVB7wzEDD8cI7FcC7STVmSzVeZj3LR7Mpi6B+aNR4rXgNcmojd3K/tHk59EXHaiU1ySj+p0WQ==","signatures":[{"sig":"MEQCIDkB1lCE+1T84qwGahkrCQoxTnDn8ih80TtUEnCirc/sAiA6dfX2VpwxRgqYdL8mKVGgb/PQmKfBcGXTDmk93/d+Eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.2.5","@material/theme":"^0.3.1","@material/animation":"^0.4.0","@material/elevation":"^0.1.12","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.5.8.tgz_1505759738098_0.01567386696115136","host":"s3://npm-registry-packages"}},"0.5.9":{"name":"@material/drawer","version":"0.5.9","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.5.9","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81b81df5c8d95e8297ae052cffa66dc997011dbd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.5.9.tgz","integrity":"sha512-FI9UAm2wixY1zmpZnfQF5JwRZZmtLfGe+HDqC/t2Gxain1HgBYgI18xFg4Uowm9MTDXn/5JhIIo6yNPkgXkXow==","signatures":[{"sig":"MEUCIQCFohNqP7//SVMq1HFPvnDEE3ZScXqzamm5D2MWg6qBDgIgeFE6GgEWKDEFkka0hHpaDui0RbG2j7tXLqeyAb0M7EY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"81b81df5c8d95e8297ae052cffa66dc997011dbd","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.2.6","@material/theme":"^0.4.0","@material/animation":"^0.4.1","@material/elevation":"^0.1.13","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.5.9.tgz_1506978701969_0.5506260727997869","host":"s3://npm-registry-packages"}},"0.24.0":{"name":"@material/drawer","version":"0.24.0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.24.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"746d16ff4ce87779ef203fed363554ae81de3301","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.24.0.tgz","integrity":"sha512-ZqLO7iO7DSVkfmmnoH25qRquUNzJT6tKxmlrWDuDRm43kIouuBg9JsQH9GhinG3yy+pPfeMGtNoj8+cJHiU0+w==","signatures":[{"sig":"MEUCIDGOXlrhra6rLdWkHFpB35GRNgW+c16eJifioUR9NWJCAiEAsBljIWbUHd+qfM/pp3JZLjkHVPVf8vVhtcYsQA8T25o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"8.4.0","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.24.0","@material/animation":"^0.4.1","@material/elevation":"^0.1.13","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.24.0.tgz_1509390681469_0.47361714113503695","host":"s3://npm-registry-packages"}},"0.25.0":{"name":"@material/drawer","version":"0.25.0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.25.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb672a5a54b7cfa7dfe345ec01be9cd6a3920603","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.25.0.tgz","integrity":"sha512-P7GFL8ifizTeFaHvEnK625d6gzzyNTGYHKzw38EittGwkeGU93TdbGqc9qrb3mO/rge+xmy7Y0tc+GtqQ5gTMg==","signatures":[{"sig":"MEUCIQDT+Wip7RnvUq6eKmEyJus2GjnpFqlHkVniDCQS/K+y0QIgA39zjTnb2O3+etgSzFGhgobbtQ9ANAYeB5JqTlLJvOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.25.0","@material/animation":"^0.25.0","@material/elevation":"^0.25.0","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.25.0.tgz_1510603343437_0.47195457806810737","host":"s3://npm-registry-packages"}},"0.26.0":{"name":"@material/drawer","version":"0.26.0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.26.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e52b1ed46871dafcf011d90979b9c2e261443bb5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.26.0.tgz","integrity":"sha512-h+vlos6RJNpnAPxtZ75yFjpMY7ek2gg4C6bLbevrLjGRNRKe7AU/WZN859Eb21BG10XgY2t67O4zf5mqwm1Ykg==","signatures":[{"sig":"MEUCIG1mZa39zIdONtZCSGDuzkqpxMGY/SqeIyoeOTpiFkZ6AiEAvKH1EUd+ZMkRF/GzYK0UMtFCWKwEBatP3LkfO5wsM5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.25.0","@material/animation":"^0.25.0","@material/elevation":"^0.25.0","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.26.0.tgz_1511821586513_0.6225761082023382","host":"s3://npm-registry-packages"}},"0.27.0":{"name":"@material/drawer","version":"0.27.0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.27.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23fe6b676407b7e31aa706a58eb82099f479ac76","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.27.0.tgz","integrity":"sha512-glg3IG7G9Autc9Yjf7qUm8cuT1T/Z/oeg3WHESvRAvX/lLgX95ZKVmkKhS0Odsk+F2iC7zksFJWoyZdzgLqlJg==","signatures":[{"sig":"MEUCIG1secHj4+wgnuTzx7P9X0/JxMe/hNPpeLVjqySP4cxbAiEApNAr9Ve1ABNSAL7UOqzPocGLwyUDHbo4BwamBVTtpvw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"8.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.27.0","@material/animation":"^0.25.0","@material/elevation":"^0.25.0","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.27.0.tgz_1513020931863_0.2951031883712858","host":"s3://npm-registry-packages"}},"0.28.0":{"name":"@material/drawer","version":"0.28.0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.28.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d0bf8d61c4ac54a666f1603cd9dc9530c838fc6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.28.0.tgz","integrity":"sha512-g9u0GbAVfa6D8d0PUN4FsJPAzHaqpizm7gBSB8wDupeqfhyPfu/s/LHc6YkjJiymQq07+aExOSJh5EPzPP5R3Q==","signatures":[{"sig":"MEUCIA/MLIAMEIOybQMSkWlR0jfcgYG1q/4tr/JQDgmqVsKUAiEAm7WpQz+yRS2YQ9lJGaV4Hgq/xHS38QpTrlB1ulfRSgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.28.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.28.0.tgz_1515437711160_0.7734372692648321","host":"s3://npm-registry-packages"}},"0.29.0":{"name":"@material/drawer","version":"0.29.0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.29.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f0f0b1b69160be0123cb0643b84c0af1cd61aeb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.29.0.tgz","integrity":"sha512-aBbsbqZ1K50R5f915z7+O4InKDLQ/u7jNDNGdsLugRuwbDda20K54tAMmjU8ELpd1Y22CDvuk1OJHb6WggjiJQ==","signatures":[{"sig":"MEUCIQDJc342w2T3pZKSYVX+Ra+mQGcMRVOiSD/IBgKlUqKajQIgcgBjUcB5sHzwkoomZf9rP4HRJqs4Qf6qoz/4LskyFWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.29.0","@material/base":"^0.29.0","@material/theme":"^0.29.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.29.0.tgz_1516645855899_0.39600340626202524","host":"s3://npm-registry-packages"}},"0.30.0":{"name":"@material/drawer","version":"0.30.0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.30.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61a4cc9c26e25ad25893646cfeacb2f8a64001bd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.30.0.tgz","integrity":"sha512-NZyp6jVd6cDucBPUl391cTuIkR5Vy5OdrdNQxvH+pTjvb7R2yQJKVv2a7PxuR1uKjGM1vRudFOdXpviwbplr9A==","signatures":[{"sig":"MEUCIGeWvxZmc8ouM7aDesSTf/2ygr8xCCpwruTti30E9SJCAiEAzPRm7JIwU5cqMYWbuzBcbRsDEhwCh1cJVaB2Xsrkxtw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.30.0","@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/drawer-0.30.0.tgz_1517868165377_0.5193136048037559","host":"s3://npm-registry-packages"}},"0.33.0":{"name":"@material/drawer","version":"0.33.0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.33.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6deccc7b86cb2822449608cb66df05ab584f4426","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.33.0.tgz","fileCount":26,"integrity":"sha512-iRe+DVhmVUTw8LDebPdrB2Mn5T9oiGKhZiEp6APycWAb2MkPElog60iomT1LkD0nrUXCqIk0l6/TFdvTzxRHmA==","signatures":[{"sig":"MEUCIQCY9fOYhJfZ/ZkkS/PnIp3xnWML3IM5O0WcJt1R2TLvUgIgRT7vP3ceZzb8yNbCdaya6CZulshUF2QMQ0jUACSBsEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194869},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.33.0","@material/base":"^0.29.0","@material/theme":"^0.33.0","@material/animation":"^0.25.0","@material/elevation":"^0.28.0","@material/typography":"^0.28.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.33.0_1521477599342_0.15562783431225413","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/drawer","version":"0.34.0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.34.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b462099898d934cb252b4eb31d29c1635f1e2271","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.34.0.tgz","fileCount":26,"integrity":"sha512-RqbitYUdV+8Io9w+ojekqUzr8C1z+8+GUQtDfbb30ObHr57k0iOtMENwAa+nQaY/JPxgoqmNOy8+p8lhHl2dRw==","signatures":[{"sig":"MEUCIF5qboqPgWtFa5Tp7l3tXfRJgDznBsfAERZj3pjMFU6WAiEA8110O6TbQdf4xKHNJpzZWwrDEQLplRMMbhUgHWMV6lE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194841},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/rtl":"^0.34.0","@material/base":"^0.34.0","@material/theme":"^0.34.0","@material/animation":"^0.34.0","@material/elevation":"^0.34.0","@material/typography":"^0.34.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.34.0_1522705913622_0.8004174789525362","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/drawer","version":"0.35.0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da3964f14667618978c3ca397bab3a5d0465a45b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.35.0.tgz","fileCount":26,"integrity":"sha512-GxY+48CV0gpy34ESqwU5D0cG4rUDvI0k98/rgWbxCaLGVXkbzZyboBCgDsjTKL56nQVZsnGw0Wm53uBGjwoKkQ==","signatures":[{"sig":"MEYCIQDdqOLXbBOg5AUcEkjcr4+Cf1UIhdlfl837BvmnYIBqrQIhAO22yeB4QVx8C+R73qyc1rkL79/JKS8V2C5+LzA6LDg5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDMCRA9TVsSAnZWagAAmysQAJri/98PeSI+kfMyWlz6\nBvRaoVl3vdQtOrxhGc/GttLfsVzO58b0x5+EVxy+SZuUGVcN/TdXiuE5Mgiu\ndaLAZeTXfpyn6Eh1fPA4IFGOQMtmkkGN+wgwklv5umW7JKCSVClTf4YPVlWM\nCE4DrHLpiWhnANar8Pbjxv1nTzsW3FCyXjJGyPgPtUfNw69m7KKkIFTF2FNV\n0lR5tfzp1RUrbt0F6H4Ljzbi1+Zl9bdjSW8t5B5IEXeIHVHZs5K4VpPw73xW\nKa0sfNE2ncwC1DMJgSG2Os6HmP/PLIUKtTn8Wk4Nohy0HX4P3qNUbGNNKN8h\nKpdhWMgUACliHOcF0F77dTTP0iSSCPbxBN+S7+YudzE1AZK5/6lWGlTa3r1B\ny+jViO1PVqA/C4zB1x9gMNkKl2U4OXzIPMhftXMFy1VQAiH4AgQQZBYGhpcT\ns5D+OosB+IF5mFPOcEEVfkRWZbcoWtbWVzp5kWJTakKTlueWa9uxUgbCjjr3\niplifhtB/2nY4xvzWIGgP4XYKuY/KplDGTokr/UfHo47qlKdpf1o/+nwykr8\nKO8iuFW9qDNdRMMbhk5wFEY/Ok3Od9CoGyFvovSV2FpdwJByhoJfTkn6+DEU\ntQxeJV/kyYddEi5pFMCm8w3X6CfNoTWDtalGxK/9jFltO9mYa8Sd87SDFGvx\nRrus\r\n=gpN9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"\n\n# Drawers\n\nThe MDC Drawer component is a spec-aligned drawer component adhering to the\n[Material Design navigation drawer pattern](https://material.io/guidelines/patterns/navigation-drawer.html).\nIt implements permanent, persistent, and temporary drawers. Permanent drawers are CSS-only and require no JavaScript, whereas persistent and temporary drawers require JavaScript to function, in order to respond to\nuser interaction.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n## Permanent drawer usage\n\nA permanent drawer is always open, sitting to the side of the content. It is appropriate for any display size larger\nthan mobile.\n\n> TODO(sgomes): Give advice on how to hide permanent drawer in mobile.\n\n```html\n\n
\n Toolbar and page content go inside here.\n
\n```\n\nIn the example above, we've set the drawer above the toolbar, and are using a toolbar spacer to ensure that it is\npresented correctly, with the correct amount of space to match the toolbar height. Note that you can place content\ninside the toolbar spacer.\n\nPermanent drawers can also be set below the toolbar:\n\n```html\n
Toolbar goes here
\n\n
\n \n
\n Page content goes here.\n
\n
\n```\n\nCSS classes:\n\n| Class | Description |\n| -------------------------------------- | -------------------------------------------------------------------------- |\n| `mdc-drawer` | Mandatory. Needs to be set on the root element of the component. |\n| `mdc-drawer--permanent` | Mandatory. Needs to be set on the root element of the component. |\n| `mdc-drawer__toolbar-spacer` | Optional. Add to node to provide the matching amount of space for toolbar. |\n\n## Persistent drawer usage\n\nPersistent drawers can be toggled open or closed. The drawer sits on the same surface elevation as the content. It is closed by default. When the drawer is outside of the page grid and opens, the drawer forces other content to change size and adapt to the smaller viewport. Persistent drawers stay open until closed by the user.\n\nPersistent drawers are acceptable for all sizes larger than mobile.\n\n```html\n\n```\n\n```js\nlet drawer = new mdc.drawer.MDCPersistentDrawer(document.querySelector('.mdc-drawer--persistent'));\ndocument.querySelector('.menu').addEventListener('click', () => drawer.open = true);\n```\n\nCSS classes:\n\n| Class | Description |\n| --------------------------------------- | -------------------------------------------------------------------------- |\n| `mdc-drawer` | Mandatory. Needs to be set on the root element of the component. |\n| `mdc-drawer--persistent` | Mandatory. Needs to be set on the root element of the component. |\n| `mdc-drawer__drawer` | Mandatory. Needs to be set on the container node for the drawer content. |\n\n### Sass Mixins\n\nTo customize the fill color, the ink color, or scrim color (transparent mask found in the temporary drawer), you can use the following mixins.\n\n#### `mdc-drawer-fill-color($color)`\n\nThis mixin customizes the fill (background) color of the drawer.\n\n#### `mdc-drawer-ink-color($color)`\n\nThis mixin customizes the ink color (font / copy color) of the drawer.\n\n#### `mdc-drawer-fill-color-accessible($color)`\n\nThis mixin customizes the fill color of the drawer. It also sets the ink color to an accessible complement of the fill.\n\n#### `mdc-drawer-scrim-color($color, $opacity)`\n\nThis mixin customizes the color and opacity of the scrim. (temporary drawer only)\n\n### Using the JS Component\n\nMDC Persistent Drawer ships with a Component / Foundation combo which allows for frameworks to richly integrate the\ncorrect drawer behaviors into idiomatic components.\n\n#### Including in code\n\n##### ES2015\n\n```javascript\nimport {MDCPersistentDrawer, MDCPersistentDrawerFoundation, util} from '@material/drawer';\n```\n\n##### CommonJS\n\n```javascript\nconst mdcDrawer = require('mdc-drawer');\nconst MDCPersistentDrawer = mdcDrawer.MDCPersistentDrawer;\nconst MDCPersistentDrawerFoundation = mdcDrawer.MDCPersistentDrawerFoundation;\nconst util = mdcDrawer.util;\n```\n\n##### AMD\n\n```javascript\nrequire(['path/to/mdc-drawer'], mdcDrawer => {\n const MDCPersistentDrawer = mdcDrawer.MDCPersistentDrawer;\n const MDCPersistentDrawerFoundation = mdcDrawer.MDCPersistentDrawerFoundation;\n const util = mdcDrawer.util;\n});\n```\n\n##### Global\n\n```javascript\nconst MDCPersistentDrawer = mdc.drawer.MDCPersistentDrawer;\nconst MDCPersistentDrawerFoundation = mdc.drawer.MDCPersistentDrawerFoundation;\nconst util = mdc.drawer.util;\n```\n\n#### Automatic Instantiation\n\nIf you do not care about retaining the component instance for the persistent drawer, simply call `attachTo()`\nand pass it a DOM element.\n\n```javascript\nmdc.drawer.MDCPersistentDrawer.attachTo(document.querySelector('.mdc-drawer--persistent'));\n```\n\n#### Manual Instantiation\n\nPersistent drawers can easily be initialized using their default constructors as well, similar to `attachTo`.\n\n```javascript\nimport {MDCPersistentDrawer} from '@material/drawer';\n\nconst drawer = new MDCPersistentDrawer(document.querySelector('.mdc-drawer--persistent'));\n```\n\n#### Handling events\n\nWhen the drawer is opened or closed, the component will emit a\n`MDCPersistentDrawer:open` or `MDCPersistentDrawer:close` custom event with no data attached.\nEvents get emitted only when the drawer toggles its opened state, i.e. multiple consecutive\n`drawer.open = true` calls will result in only one `MDCPersistentDrawer:open`.\n\n### Using the Foundation Class\n\nMDC Persistent Drawer ships with an `MDCPersistentDrawerFoundation` class that external frameworks and libraries can\nuse to integrate the component. As with all foundation classes, an adapter object must be provided.\nThe adapter for persistent drawers must provide the following functions, with correct signatures:\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `hasClass(className: string) => boolean` | Returns boolean indicating whether element has a given class. |\n| `hasNecessaryDom() => boolean` | Returns boolean indicating whether the necessary DOM is present (namely, the `mdc-drawer__drawer` drawer container). |\n| `registerInteractionHandler(evt: string, handler: EventListener) => void` | Adds an event listener to the root element, for the specified event name. |\n| `deregisterInteractionHandler(evt: string, handler: EventListener) => void` | Removes an event listener from the root element, for the specified event name. |\n| `registerDrawerInteractionHandler(evt: string, handler: EventListener) => void` | Adds an event listener to the drawer container sub-element, for the specified event name. |\n| `deregisterDrawerInteractionHandler(evt: string, handler: EventListener) => void` | Removes an event listener from drawer container sub-element, for the specified event name. |\n| `registerTransitionEndHandler(handler: EventListener) => void` | Registers an event handler to be called when a `transitionend` event is triggered on the drawer container sub-element element. |\n| `deregisterTransitionEndHandler(handler: EventListener) => void` | Deregisters an event handler from a `transitionend` event listener. This will only be called with handlers that have previously been passed to `registerTransitionEndHandler` calls. |\n| `registerDocumentKeydownHandler(handler: EventListener) => void` | Registers an event handler on the `document` object for a `keydown` event. |\n| `deregisterDocumentKeydownHandler(handler: EventListener) => void` | Deregisters an event handler on the `document` object for a `keydown` event. |\n| `getDrawerWidth() => number` | Returns the current drawer width, in pixels. |\n| `setTranslateX(value: number) => void` | Sets the current position for the drawer, in pixels from the border. |\n| `getFocusableElements() => NodeList` | Returns the node list of focusable elements inside the drawer. |\n| `saveElementTabState(el: Element) => void` | Saves the current tab index for the element in a data property. |\n| `restoreElementTabState(el: Element) => void` | Restores the saved tab index (if any) for an element. |\n| `makeElementUntabbable(el: Element) => void` | Makes an element untabbable. |\n| `notifyOpen() => void` | Dispatches an event notifying listeners that the drawer has been opened. |\n| `notifyClose() => void` | Dispatches an event notifying listeners that the drawer has been closed. |\n| `isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL. |\n| `isDrawer(el: Element) => boolean` | Returns boolean indicating whether the provided element is the drawer container sub-element. |\n\n## Temporary drawer usage\n\nA temporary drawer is usually closed, sliding out at a higher elevation than the content when opened. It is appropriate\nfor any display size.\n\n```html\n\n```\n\n```js\nlet drawer = new mdc.drawer.MDCTemporaryDrawer(document.querySelector('.mdc-drawer--temporary'));\ndocument.querySelector('.menu').addEventListener('click', () => drawer.open = true);\n```\n\n### Headers and toolbar spacers\n\nTemporary drawers can use toolbar spacers, headers, or neither.\n\nA toolbar spacer adds to the drawer the same amount of space that the toolbar takes up in your application. This is\nvery useful for visual alignment and consistency. Note that you can place content inside the toolbar spacer.\n\n```html\n\n```\n\nA header, on the other hand, is a large rectangular area that maintains a 16:9 ratio. It's often used for user account\nselection.\nIt uses an outer `mdc-drawer__header` for positioning, with an inner `mdc-drawer__header-content`\nfor placing the actual content, which will be bottom-aligned.\n\n```html\n\n```\n\nCSS classes:\n\n| Class | Description |\n| -------------------------------------- | -------------------------------------------------------------------------- |\n| `mdc-drawer` | Mandatory. Needs to be set on the root element of the component. |\n| `mdc-drawer--temporary` | Mandatory. Needs to be set on the root element of the component. |\n| `mdc-drawer__drawer` | Mandatory. Needs to be set on the container node for the drawer content. |\n| `mdc-drawer__content` | Optional. Should be set on the list of items inside the drawer. |\n| `mdc-drawer__toolbar-spacer` | Optional. Add to node to provide the matching amount of space for toolbar. |\n| `mdc-drawer__header` | Optional. Add to container node to create a 16:9 drawer header. |\n| `mdc-drawer__header-content` | Optional. Add to content node inside `mdc-temporary-drawer__header`. |\n\n### Using the JS Component\n\nMDC Temporary Drawer ships with a Component / Foundation combo which allows for frameworks to richly integrate the\ncorrect drawer behaviors into idiomatic components.\n\n#### Including in code\n\n##### ES2015\n\n```javascript\nimport {MDCTemporaryDrawer, MDCTemporaryDrawerFoundation, util} from '@material/drawer';\n```\n\n##### CommonJS\n\n```javascript\nconst mdcDrawer = require('mdc-drawer--temporary');\nconst MDCTemporaryDrawer = mdcDrawer.MDCTemporaryDrawer;\nconst MDCTemporaryDrawerFoundation = mdcDrawer.MDCTemporaryDrawerFoundation;\nconst util = mdcDrawer.util;\n```\n\n##### AMD\n\n```javascript\nrequire(['path/to/mdc-drawer'], mdcDrawer => {\n const MDCTemporaryDrawer = mdcDrawer.MDCTemporaryDrawer;\n const MDCTemporaryDrawerFoundation = mdcDrawer.MDCTemporaryDrawerFoundation;\n const util = mdcDrawer.util;\n});\n```\n\n##### Global\n\n```javascript\nconst MDCTemporaryDrawer = mdc.drawer.MDCTemporaryDrawer;\nconst MDCTemporaryDrawerFoundation = mdc.drawer.MDCTemporaryDrawerFoundation;\nconst util = mdc.drawer.util;\n```\n\n#### Automatic Instantiation\n\nIf you do not care about retaining the component instance for the temporary drawer, simply call `attachTo()`\nand pass it a DOM element.\n\n```javascript\nmdc.drawer.MDCTemporaryDrawer.attachTo(document.querySelector('.mdc-drawer--temporary'));\n```\n\n#### Manual Instantiation\n\nTemporary drawers can easily be initialized using their default constructors as well, similar to `attachTo`.\n\n```javascript\nimport {MDCTemporaryDrawer} from '@material/drawer';\n\nconst drawer = new MDCTemporaryDrawer(document.querySelector('.mdc-drawer--temporary'));\n```\n\n#### Handling events\n\nWhen the drawer is opened or closed, the component will emit a\n`MDCTemporaryDrawer:open` or `MDCTemporaryDrawer:close` custom event with no data attached.\nEvents get emitted only when the drawer toggles its opened state, i.e. multiple consecutive\n`drawer.open = true` calls will result in only one `MDCTemporaryDrawer:open`.\n\n### Using the Foundation Class\n\nMDC Temporary Drawer ships with an `MDCTemporaryDrawerFoundation` class that external frameworks and libraries can\nuse to integrate the component. As with all foundation classes, an adapter object must be provided.\nThe adapter for temporary drawers must provide the following functions, with correct signatures:\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `hasClass(className: string) => boolean` | Returns boolean indicating whether element has a given class. |\n| `eventTargetHasClass(target: EventTarget, className: string) => boolean` | Returns true if target has className, false otherwise. |\n| `addBodyClass(className: string) => void` | Adds a class to the body. |\n| `removeBodyClass(className: string) => void` | Removes a class from the body. |\n| `hasNecessaryDom() => boolean` | Returns boolean indicating whether the necessary DOM is present (namely, the `mdc-drawer__drawer` drawer container). |\n| `registerInteractionHandler(evt: string, handler: EventListener) => void` | Adds an event listener to the root element, for the specified event name. |\n| `deregisterInteractionHandler(evt: string, handler: EventListener) => void` | Removes an event listener from the root element, for the specified event name. |\n| `registerDrawerInteractionHandler(evt: string, handler: EventListener) => void` | Adds an event listener to the drawer container sub-element, for the specified event name. |\n| `deregisterDrawerInteractionHandler(evt: string, handler: EventListener) => void` | Removes an event listener from drawer container sub-element, for the specified event name. |\n| `registerTransitionEndHandler(handler: EventListener) => void` | Registers an event handler to be called when a `transitionend` event is triggered on the drawer container sub-element element. |\n| `deregisterTransitionEndHandler(handler: EventListener) => void` | Deregisters an event handler from a `transitionend` event listener. This will only be called with handlers that have previously been passed to `registerTransitionEndHandler` calls. |\n| `registerDocumentKeydownHandler(handler: EventListener) => void` | Registers an event handler on the `document` object for a `keydown` event. |\n| `deregisterDocumentKeydownHandler(handler: EventListener) => void` | Deregisters an event handler on the `document` object for a `keydown` event. |\n| `getDrawerWidth() => number` | Returns the current drawer width, in pixels. |\n| `setTranslateX(value: number) => void` | Sets the current position for the drawer, in pixels from the border. |\n| `updateCssVariable(value: string) => void` | Sets a CSS custom property, for controlling the current background opacity when manually dragging the drawer. |\n| `getFocusableElements() => NodeList` | Returns the node list of focusable elements inside the drawer. |\n| `saveElementTabState(el: Element) => void` | Saves the current tab index for the element in a data property. |\n| `restoreElementTabState(el: Element) => void` | Restores the saved tab index (if any) for an element. |\n| `makeElementUntabbable(el: Element) => void` | Makes an element untabbable. |\n| `notifyOpen() => void` | Dispatches an event notifying listeners that the drawer has been opened. |\n| `notifyClose() => void` | Dispatches an event notifying listeners that the drawer has been closed. |\n| `isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL. |\n| `isDrawer(el: Element) => boolean` | Returns boolean indicating whether the provided element is the drawer container sub-element. |\n\n### The util API\nExternal frameworks and libraries can use the following utility methods when integrating a component.\n\n#### util.remapEvent(eventName, globalObj = window) => String\n\nRemap touch events to pointer events, if the browser doesn't support touch events.\n\n#### util.getTransformPropertyName(globalObj = window, forceRefresh = false) => String\n\nChoose the correct transform property to use on the current browser.\n\n#### util.supportsCssCustomProperties(globalObj = window) => Boolean\n\nDetermine whether the current browser supports CSS properties.\n\n#### util.applyPassive(globalObj = window, forceRefresh = false) => object\n\nDetermine whether the current browser supports passive event listeners, and if so, use them.\n\n#### util.saveElementTabState(el) => void\n\nSave the tab state for an element.\n\n#### util.restoreElementTabState(el) => void\n\nRestore the tab state for an element, if it was saved.\n","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.35.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0","@material/elevation":"^0.35.0","@material/typography":"^0.35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_0.35.0_1524523210604_0.3902450345954107","host":"s3://npm-registry-packages"}},"0.36.0":{"name":"@material/drawer","version":"0.36.0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.36.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f5d735f4a80fd16d1eea64ceeda05d42764610b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.36.0.tgz","fileCount":26,"integrity":"sha512-Io6iKhVP6Ms+cYMdcM4iExUkslm9Q1X+EB56S8HQh+Gdo0U4LpfrbzmqWmbrxLgymNH6EKHyMlJepgHjtBEUpA==","signatures":[{"sig":"MEYCIQDYo+fgejNSt7I/wvykyVT/9tco4bEedKioUozl28dJPwIhAKN/cWDQJZK54ALzYE2/yiJG0XSGtwI7kemuEqa90xaY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFVzJCRA9TVsSAnZWagAA6fAP/148gKp0OX6mjpG8Oulg\nKrqljtjJJPOHf/MjHRNJcUqrEsx7qbg/iIRxnF+UU5Qz2gH3iR7VHCr9YnSe\nmYX+69q98Eo59Xe5c4nEgvmS1VTmpj/RCT7mf+gGZ6UoBEqnOC5A07TFuOTo\nAST8sX0cJWvVY4o9djb40OjpgwKXm7e+BCQyn9Ufq2w5XvAireImFDb56/zq\n6Rzxu4ussOhXr78OiCLsyA+7fspuoHkBO5TixpXvNfnHNbUK2+DWEfS41fcc\nDnx/fDUtrG5vnTFg0SX72lqgWGR8hsf8aIJwaPxp3Hl+Zvzz84hnrQqjhP20\npJ87jbLrrh7QB1B/OAy34fcbnjwSwplA/TisMJj6u66ifn3dAPllaqGgjGMF\nZ/gSqEU2RaCGUrc/d8UcvY5iR0itdozDeWh8ZiZYbJhLP9G0vVPOBh9H4qh2\n4cq6GCw4t51dWVUqEwaiKgsZiek21PEyGjFp/4l4LiclYNXwfe8jwXVmPLte\nEXeIJ81smJLWWWZ/orMg7vhGHzA4SohqsEXv0VtcPK9yp4XZvHnr2FMPo7q5\n2Le5zbC/wXPspJjmK9WbSbBPvvLQ3muO7NhPJqDJdeRdvkAXiNHfgkJlO1xb\ntONfP5BMMaVtSqds+fiUaQbMVCED55GAJ+xSXV/RG9vD75/sDogqGaqfRYw2\ng665\r\n=HqCi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0","@material/elevation":"^0.35.0","@material/typography":"^0.35.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.36.0_1528126663232_0.8992419909610969","host":"s3://npm-registry-packages"}},"0.36.1":{"name":"@material/drawer","version":"0.36.1","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.36.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"493d0fb5de719ef83d4f6c69edc483c7f72ecd45","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.36.1.tgz","fileCount":26,"integrity":"sha512-Y9vCu3M4RTAGiCstksMr7PyBs0TeM8w0bfulkqJkr49V5gJOCRTyf2lzmBNq3BhsB14LZ5f7MpI242VW/04cgg==","signatures":[{"sig":"MEUCIQDMJbtbH2RVkCiye/yQ9AQEorjaXDfAAQpKPEqzZoncFgIgBMQt7rwAFUGep3VIAs+WncnO55XsPP9PsebrpaeMe9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbJ9JuCRA9TVsSAnZWagAAOOMP/jxhnK7+aylvgndVmZmB\nIes43Mz3CNlwEz2plRrgzz9/m9czKej+XarwNdA8hcjXKn4de7vd9Nzw2lgo\nMpUFmVyM7Jtljix4L3y9ZyW4tYkCg5I1PCFaHBwhKUc9y1d0w72DrfCo2+JR\nNlWw+8X90S5Xjt4VHOSe9kADWDQsAdsb4esCiKdltU43UH2aHKPMAq1vekXe\nOmqQ/iaarjU3fcGhKmq0xAHSQBCP9U42cEsq9EmDb2E0AmmK/ifDajUC3lpC\nhRf7IZ1n2FGwWHeqVIuWyECQ7qM7aFCKEIaS37o6v6DESgx7LfQqVU+Azihd\nOEoVftynv/jLE2duA2YIFWOd8VhLEFRv4lLqeYoFRpHA42CZSOp9XY6gpVAF\nBVHm3h2yYlfXfxxxfk3Jzo39nacUeCM7tlpWT32jb9Ng/ipJrPDRwwIRj36p\nEDZjA0eoCE+UibxH4O3Bp6RDYipY+iMERGUHHJTl/XLVfdoLIqHgE/b0znk0\nVRjDk7jlqTLaU+RFpAF3xl9qohSHrkrQbc+xdvB1RtxEveru9FYmVOLOp2CO\nEO3SgN1n3d0X6gvWylAwYoKRIhLj12+UPzVw2uboUiZSBGleHLX8Fet/zu7U\na+Zxti3WKLXXWNw3vC6tTmaAABj0KckIfkAJle1hbdz6CIYI81M2526y6eCI\nsHLB\r\n=WTQO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0","@material/elevation":"^0.36.1","@material/typography":"^0.35.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.36.1_1529336428393_0.969618546543991","host":"s3://npm-registry-packages"}},"0.37.1":{"name":"@material/drawer","version":"0.37.1","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.37.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e498b1116b77c9a28ede2e935c532c7f7e70afe","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.37.1.tgz","fileCount":26,"integrity":"sha512-JZSDEbECK/grxnK/G8Mbwd5eETTMLrW9f6NfaId5eNvfWhqKEeVRBpuxscuuuli/z/ciHDb+Okrga6bHCQWEEQ==","signatures":[{"sig":"MEUCIQDN51m9YZHnNsCysbIGzO/ZRFXC4gw05UeGagiQyFE7IAIgbCmMuCn/tg9CpNfTljvtqNOBz8xQVQAQ22qRB6MBv1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTQvOCRA9TVsSAnZWagAAZ+8P/3Ce2FFg7385gn2jyu1d\nh0LDdiqQZ65u7KD0zfJraksVp7ECJRqWsfFdp/i3FkMy54yg4QBlrjSn9G97\nRx0o/C8GCeJGmisz8ZduuRFo8evjK36DTT0aXNgXR+ljewbci2zj7IZRFudu\nbvSo7HWS3zxTtgmQFCJWcTfw8MWqgH/3z2jl16vSh/W6xugktyh0eVB4K2SJ\ncmHhYM8kXKLATgUQ+DZtuB0CS1ZlMitJWRpPf5nsdEvOAzj1jGzX8narQ7q3\nuGkQcKaCwquabQcs1R5PLP470ir+LK84aAzw6DvO0ebQ3ps1191MxGm7oK8J\nkGqnRnOev/MZ0TRo8JwMgid25kwPPxbmdTuobgZGPh3Y94Igm9t/kuJAlvBI\n52OkB71dEti6kPk7Gh6jfiUFZ1iG/tsD4pxcx7/4bWwTZDhSNaAWXlOCG6xk\nheydNvMUwDjWyZ1HF3EvO8HNGCOM0RZBVyE5tBqkfiqLq4LQhAr9kGTe9x6p\naWulGgIZoBELip8BH6L/EawbzXCYk/Apf0JvP/Kw1nYLYZ7KgrSQIjYavO2g\nQWvic0Fk9CDnqEQvoxhY2+yfNFc1Cmqo0/qK+sJZWC1uO8senu6pEGJgj6Tq\nVDrwz3cDfHzp9ztQx9w+UKgsAZhGz4r//3R/kQ5mvHykfV5dl0eP6SzEpuoV\n0Oxv\r\n=NBqR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"10.3.0","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0","@material/elevation":"^0.36.1","@material/typography":"^0.37.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.37.1_1531775950816_0.7501407255587416","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/drawer","version":"0.38.0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06ba72afc92215d8a743b5fe554465ae12695ca2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.38.0.tgz","fileCount":26,"integrity":"sha512-fs+AVly2IUuuwjJWU/luXp/g1zacunLYz5635DWlomK8NkyBjPVnbjUhpdyF1sfDq+Rl1PT933jVPLWOi7VFXg==","signatures":[{"sig":"MEQCIFrKngS2rlAU5j4Tdsfy39CL8nlPPtslVLQGPXM2XjLOAiBypXSS2pfoZXb7ravCW5MEZC3bYLnuh2MBPKH1lEnTOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0WxCRA9TVsSAnZWagAAOhEQAJZS+9+tBNH3DtaPWTxs\nlN1mMVYKoInKtlyZd5pmp9130atjW8qHC43xPV7wxxjS5D0cvkvQTUZFbxU4\nP8+R9Ru1hfnKbdYIsoo5uRZC9Jl8B8ibKRtURzXze3SiD8GgfB1lVFKjeOWH\nRj2NEII+ek4isL1i92ghW1EOIvTnUdz49WKtL3MesHLm+RL1ff5SuVBFN3xb\nrF0OR7SzwPYWa679wdyHj2Jnn4pzkTCqiFYpa3L3Q3XOQTpEr6rOQXe4DFOw\nFunZeNrZRDldo3jc06deYe4iMupau04mH/v95OS1/VJ+nL4eFW6IBwBmUXvG\nqcRUOmojeCa3LJtpCOY5JmhYyjDbUzEtPlfbVqWU2FbzyuSqVbJ32iZHV0iA\nZ5txluuMapfrx4+/m09/H8LkXKaMWuGdeUp4/w9WjHEcwfU8WSCLQOF6gfoF\n2d0SC57U7IpE7/ngVsz9N4PS3evAqt+m3c39yzwnkp43gvzPNorKWbD1VQNF\nHwBJyNF+BVTzFCJEudpuDI1rmiMzNzHwvGVEgX8Toe/XqfyAzNJF9alf3Nk7\n2263byXVKn/r/WGQPXs6vv/JAabgdO8T8R8MjI6ywymh16dCIQtu3p6pXqh7\n+3Hiq/l4oOmUnlT1GUOVnZcDsmTppsj2AK0J8cBUSYtOnI9pXAUzqSKYSQ1U\nuBCF\r\n=zYcn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/animation":"^0.34.0","@material/elevation":"^0.38.0","@material/typography":"^0.38.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.38.0_1532970417510_0.7649938416920727","host":"s3://npm-registry-packages"}},"0.39.0-0":{"name":"@material/drawer","version":"0.39.0-0","keywords":["material components","material design","navigation","drawer"],"license":"Apache-2.0","_id":"@material/drawer@0.39.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf9b3d9a008355fc026fa2a7fec22bd7b3e30ba9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.39.0-0.tgz","fileCount":26,"integrity":"sha512-S7dTFTi1BTWqBvVHXVuVDnjqRnrc90otDDCtT5G4chxXz4EGlAz9+khCx+RWt49A4+1IHFN218kDnCMDkGc5KQ==","signatures":[{"sig":"MEUCIQCsINJ3atauiv3cQae9V0Uo5Cu2dIcp7Jq0+5LeMxgvbQIgHp2wa+UPCLSHkc6llfWo3kthxUCOpyZGZro9lZ4cUj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZUtCRA9TVsSAnZWagAADa4P/1U9uo0X7q9a0+QNEDKL\nytkEX+x98S7TVSjYI7VjgJZBB8/DLYOWUMumG/+FR3E/uh1+Or6eMgk4I6s+\nozITmdn2Kjupx6LoX8COYTcby+YPw0yL/0UpSBtcEh3zNjkHUAovjGjJrojy\nzA9RtJFkzNellypQcULUBq8N2bk820D0LdiUquYxW53pHqARHUjL5GJ8ZoDN\nGoAXbrvstY/inLK8kOGZzsCv/DLK5eUd6yf76XTaXJgkcK7THWgEsZZS4VAU\n9AiHhooRUZ7WBdH9LgwTPlM3AQP362RHtr31e1r0oLFXOOFcAXJRiynQZMkv\n8tF/T0PvSyAZNLusI+nRum3n9Ws5Dbj1orTq4YilA110/v/YC59XFlfrt51M\nDr2cKtSPOxG5hWz44VNNqUTAfC+iB67F/jLvGmCCYllXSwH/zGKVL5sRiFVk\nKbeS6MC8YneQ6BYjynQuMcjukLOQyV88gJh4P7Q7k9mJqk8XdC7TWO7QWBa7\niLq9Zs1JkubS9HRoymkus0RsfqQFu6nHJ2fjEVqDz0HnligXcGbsjmwu44ZT\nnh3Nd8SZ0EESJKSyvB2iZodeReck9odG3uA/k7K/flCHwyGqgzSCnlkPAhRk\nJ9BMH3DC+guNDJBW0Wz63UQglAj4w5zJXPoDZ7vzMXBvTh88QFTkMR+QBn4t\nTXYN\r\n=z7QW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"\n\n# Drawers\n\nThe MDC Drawer component is a spec-aligned drawer component adhering to the\n[Material Design navigation drawer pattern](https://material.io/go/design-navigation-drawer).\nIt implements permanent, persistent, and temporary drawers. Permanent drawers are CSS-only and require no JavaScript, whereas persistent and temporary drawers require JavaScript to function, in order to respond to\nuser interaction.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n## Permanent drawer usage\n\nA permanent drawer is always open, sitting to the side of the content. It is appropriate for any display size larger\nthan mobile.\n\n> TODO(sgomes): Give advice on how to hide permanent drawer in mobile.\n\n```html\n\n
\n Toolbar and page content go inside here.\n
\n```\n\nIn the example above, we've set the drawer above the toolbar, and are using a toolbar spacer to ensure that it is\npresented correctly, with the correct amount of space to match the toolbar height. Note that you can place content\ninside the toolbar spacer.\n\nPermanent drawers can also be set below the toolbar:\n\n```html\n
Toolbar goes here
\n\n
\n \n
\n Page content goes here.\n
\n
\n```\n\nCSS classes:\n\n| Class | Description |\n| -------------------------------------- | -------------------------------------------------------------------------- |\n| `mdc-drawer` | Mandatory. Needs to be set on the root element of the component. |\n| `mdc-drawer--permanent` | Mandatory. Needs to be set on the root element of the component. |\n| `mdc-drawer__toolbar-spacer` | Optional. Add to node to provide the matching amount of space for toolbar. |\n\n## Persistent drawer usage\n\nPersistent drawers can be toggled open or closed. The drawer sits on the same surface elevation as the content. It is closed by default. When the drawer is outside of the page grid and opens, the drawer forces other content to change size and adapt to the smaller viewport. Persistent drawers stay open until closed by the user.\n\nPersistent drawers are acceptable for all sizes larger than mobile.\n\n```html\n\n```\n\n```js\nlet drawer = new mdc.drawer.MDCPersistentDrawer(document.querySelector('.mdc-drawer--persistent'));\ndocument.querySelector('.menu').addEventListener('click', () => drawer.open = true);\n```\n\nCSS classes:\n\n| Class | Description |\n| --------------------------------------- | -------------------------------------------------------------------------- |\n| `mdc-drawer` | Mandatory. Needs to be set on the root element of the component. |\n| `mdc-drawer--persistent` | Mandatory. Needs to be set on the root element of the component. |\n| `mdc-drawer__drawer` | Mandatory. Needs to be set on the container node for the drawer content. |\n\n### Sass Mixins\n\nTo customize the fill color, the ink color, or scrim color (transparent mask found in the temporary drawer), you can use the following mixins.\n\n#### `mdc-drawer-fill-color($color)`\n\nThis mixin customizes the fill (background) color of the drawer.\n\n#### `mdc-drawer-ink-color($color)`\n\nThis mixin customizes the ink color (font / copy color) of the drawer.\n\n#### `mdc-drawer-fill-color-accessible($color)`\n\nThis mixin customizes the fill color of the drawer. It also sets the ink color to an accessible complement of the fill.\n\n#### `mdc-drawer-scrim-color($color, $opacity)`\n\nThis mixin customizes the color and opacity of the scrim. (temporary drawer only)\n\n### Using the JS Component\n\nMDC Persistent Drawer ships with a Component / Foundation combo which allows for frameworks to richly integrate the\ncorrect drawer behaviors into idiomatic components.\n\n#### Including in code\n\n##### ES2015\n\n```javascript\nimport {MDCPersistentDrawer, MDCPersistentDrawerFoundation, util} from '@material/drawer';\n```\n\n##### CommonJS\n\n```javascript\nconst mdcDrawer = require('mdc-drawer');\nconst MDCPersistentDrawer = mdcDrawer.MDCPersistentDrawer;\nconst MDCPersistentDrawerFoundation = mdcDrawer.MDCPersistentDrawerFoundation;\nconst util = mdcDrawer.util;\n```\n\n##### AMD\n\n```javascript\nrequire(['path/to/mdc-drawer'], mdcDrawer => {\n const MDCPersistentDrawer = mdcDrawer.MDCPersistentDrawer;\n const MDCPersistentDrawerFoundation = mdcDrawer.MDCPersistentDrawerFoundation;\n const util = mdcDrawer.util;\n});\n```\n\n##### Global\n\n```javascript\nconst MDCPersistentDrawer = mdc.drawer.MDCPersistentDrawer;\nconst MDCPersistentDrawerFoundation = mdc.drawer.MDCPersistentDrawerFoundation;\nconst util = mdc.drawer.util;\n```\n\n#### Automatic Instantiation\n\nIf you do not care about retaining the component instance for the persistent drawer, simply call `attachTo()`\nand pass it a DOM element.\n\n```javascript\nmdc.drawer.MDCPersistentDrawer.attachTo(document.querySelector('.mdc-drawer--persistent'));\n```\n\n#### Manual Instantiation\n\nPersistent drawers can easily be initialized using their default constructors as well, similar to `attachTo`.\n\n```javascript\nimport {MDCPersistentDrawer} from '@material/drawer';\n\nconst drawer = new MDCPersistentDrawer(document.querySelector('.mdc-drawer--persistent'));\n```\n\n#### Handling events\n\nWhen the drawer is opened or closed, the component will emit a\n`MDCPersistentDrawer:open` or `MDCPersistentDrawer:close` custom event with no data attached.\nEvents get emitted only when the drawer toggles its opened state, i.e. multiple consecutive\n`drawer.open = true` calls will result in only one `MDCPersistentDrawer:open`.\n\n### Using the Foundation Class\n\nMDC Persistent Drawer ships with an `MDCPersistentDrawerFoundation` class that external frameworks and libraries can\nuse to integrate the component. As with all foundation classes, an adapter object must be provided.\nThe adapter for persistent drawers must provide the following functions, with correct signatures:\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `hasClass(className: string) => boolean` | Returns boolean indicating whether element has a given class. |\n| `hasNecessaryDom() => boolean` | Returns boolean indicating whether the necessary DOM is present (namely, the `mdc-drawer__drawer` drawer container). |\n| `registerInteractionHandler(evt: string, handler: EventListener) => void` | Adds an event listener to the root element, for the specified event name. |\n| `deregisterInteractionHandler(evt: string, handler: EventListener) => void` | Removes an event listener from the root element, for the specified event name. |\n| `registerDrawerInteractionHandler(evt: string, handler: EventListener) => void` | Adds an event listener to the drawer container sub-element, for the specified event name. |\n| `deregisterDrawerInteractionHandler(evt: string, handler: EventListener) => void` | Removes an event listener from drawer container sub-element, for the specified event name. |\n| `registerTransitionEndHandler(handler: EventListener) => void` | Registers an event handler to be called when a `transitionend` event is triggered on the drawer container sub-element element. |\n| `deregisterTransitionEndHandler(handler: EventListener) => void` | Deregisters an event handler from a `transitionend` event listener. This will only be called with handlers that have previously been passed to `registerTransitionEndHandler` calls. |\n| `registerDocumentKeydownHandler(handler: EventListener) => void` | Registers an event handler on the `document` object for a `keydown` event. |\n| `deregisterDocumentKeydownHandler(handler: EventListener) => void` | Deregisters an event handler on the `document` object for a `keydown` event. |\n| `getDrawerWidth() => number` | Returns the current drawer width, in pixels. |\n| `setTranslateX(value: number) => void` | Sets the current position for the drawer, in pixels from the border. |\n| `getFocusableElements() => NodeList` | Returns the node list of focusable elements inside the drawer. |\n| `saveElementTabState(el: Element) => void` | Saves the current tab index for the element in a data property. |\n| `restoreElementTabState(el: Element) => void` | Restores the saved tab index (if any) for an element. |\n| `makeElementUntabbable(el: Element) => void` | Makes an element untabbable. |\n| `notifyOpen() => void` | Dispatches an event notifying listeners that the drawer has been opened. |\n| `notifyClose() => void` | Dispatches an event notifying listeners that the drawer has been closed. |\n| `isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL. |\n| `isDrawer(el: Element) => boolean` | Returns boolean indicating whether the provided element is the drawer container sub-element. |\n\n## Temporary drawer usage\n\nA temporary drawer is usually closed, sliding out at a higher elevation than the content when opened. It is appropriate\nfor any display size.\n\n```html\n\n```\n\n```js\nlet drawer = new mdc.drawer.MDCTemporaryDrawer(document.querySelector('.mdc-drawer--temporary'));\ndocument.querySelector('.menu').addEventListener('click', () => drawer.open = true);\n```\n\n### Headers and toolbar spacers\n\nTemporary drawers can use toolbar spacers, headers, or neither.\n\nA toolbar spacer adds to the drawer the same amount of space that the toolbar takes up in your application. This is\nvery useful for visual alignment and consistency. Note that you can place content inside the toolbar spacer.\n\n```html\n\n```\n\nA header, on the other hand, is a large rectangular area that maintains a 16:9 ratio. It's often used for user account\nselection.\nIt uses an outer `mdc-drawer__header` for positioning, with an inner `mdc-drawer__header-content`\nfor placing the actual content, which will be bottom-aligned.\n\n```html\n\n```\n\nCSS classes:\n\n| Class | Description |\n| -------------------------------------- | -------------------------------------------------------------------------- |\n| `mdc-drawer` | Mandatory. Needs to be set on the root element of the component. |\n| `mdc-drawer--temporary` | Mandatory. Needs to be set on the root element of the component. |\n| `mdc-drawer__drawer` | Mandatory. Needs to be set on the container node for the drawer content. |\n| `mdc-drawer__content` | Optional. Should be set on the list of items inside the drawer. |\n| `mdc-drawer__toolbar-spacer` | Optional. Add to node to provide the matching amount of space for toolbar. |\n| `mdc-drawer__header` | Optional. Add to container node to create a 16:9 drawer header. |\n| `mdc-drawer__header-content` | Optional. Add to content node inside `mdc-temporary-drawer__header`. |\n\n### Using the JS Component\n\nMDC Temporary Drawer ships with a Component / Foundation combo which allows for frameworks to richly integrate the\ncorrect drawer behaviors into idiomatic components.\n\n#### Including in code\n\n##### ES2015\n\n```javascript\nimport {MDCTemporaryDrawer, MDCTemporaryDrawerFoundation, util} from '@material/drawer';\n```\n\n##### CommonJS\n\n```javascript\nconst mdcDrawer = require('mdc-drawer--temporary');\nconst MDCTemporaryDrawer = mdcDrawer.MDCTemporaryDrawer;\nconst MDCTemporaryDrawerFoundation = mdcDrawer.MDCTemporaryDrawerFoundation;\nconst util = mdcDrawer.util;\n```\n\n##### AMD\n\n```javascript\nrequire(['path/to/mdc-drawer'], mdcDrawer => {\n const MDCTemporaryDrawer = mdcDrawer.MDCTemporaryDrawer;\n const MDCTemporaryDrawerFoundation = mdcDrawer.MDCTemporaryDrawerFoundation;\n const util = mdcDrawer.util;\n});\n```\n\n##### Global\n\n```javascript\nconst MDCTemporaryDrawer = mdc.drawer.MDCTemporaryDrawer;\nconst MDCTemporaryDrawerFoundation = mdc.drawer.MDCTemporaryDrawerFoundation;\nconst util = mdc.drawer.util;\n```\n\n#### Automatic Instantiation\n\nIf you do not care about retaining the component instance for the temporary drawer, simply call `attachTo()`\nand pass it a DOM element.\n\n```javascript\nmdc.drawer.MDCTemporaryDrawer.attachTo(document.querySelector('.mdc-drawer--temporary'));\n```\n\n#### Manual Instantiation\n\nTemporary drawers can easily be initialized using their default constructors as well, similar to `attachTo`.\n\n```javascript\nimport {MDCTemporaryDrawer} from '@material/drawer';\n\nconst drawer = new MDCTemporaryDrawer(document.querySelector('.mdc-drawer--temporary'));\n```\n\n#### Handling events\n\nWhen the drawer is opened or closed, the component will emit a\n`MDCTemporaryDrawer:open` or `MDCTemporaryDrawer:close` custom event with no data attached.\nEvents get emitted only when the drawer toggles its opened state, i.e. multiple consecutive\n`drawer.open = true` calls will result in only one `MDCTemporaryDrawer:open`.\n\n### Using the Foundation Class\n\nMDC Temporary Drawer ships with an `MDCTemporaryDrawerFoundation` class that external frameworks and libraries can\nuse to integrate the component. As with all foundation classes, an adapter object must be provided.\nThe adapter for temporary drawers must provide the following functions, with correct signatures:\n\n| Method Signature | Description |\n| --- | --- |\n| `addClass(className: string) => void` | Adds a class to the root element. |\n| `removeClass(className: string) => void` | Removes a class from the root element. |\n| `hasClass(className: string) => boolean` | Returns boolean indicating whether element has a given class. |\n| `eventTargetHasClass(target: EventTarget, className: string) => boolean` | Returns true if target has className, false otherwise. |\n| `addBodyClass(className: string) => void` | Adds a class to the body. |\n| `removeBodyClass(className: string) => void` | Removes a class from the body. |\n| `hasNecessaryDom() => boolean` | Returns boolean indicating whether the necessary DOM is present (namely, the `mdc-drawer__drawer` drawer container). |\n| `registerInteractionHandler(evt: string, handler: EventListener) => void` | Adds an event listener to the root element, for the specified event name. |\n| `deregisterInteractionHandler(evt: string, handler: EventListener) => void` | Removes an event listener from the root element, for the specified event name. |\n| `registerDrawerInteractionHandler(evt: string, handler: EventListener) => void` | Adds an event listener to the drawer container sub-element, for the specified event name. |\n| `deregisterDrawerInteractionHandler(evt: string, handler: EventListener) => void` | Removes an event listener from drawer container sub-element, for the specified event name. |\n| `registerTransitionEndHandler(handler: EventListener) => void` | Registers an event handler to be called when a `transitionend` event is triggered on the drawer container sub-element element. |\n| `deregisterTransitionEndHandler(handler: EventListener) => void` | Deregisters an event handler from a `transitionend` event listener. This will only be called with handlers that have previously been passed to `registerTransitionEndHandler` calls. |\n| `registerDocumentKeydownHandler(handler: EventListener) => void` | Registers an event handler on the `document` object for a `keydown` event. |\n| `deregisterDocumentKeydownHandler(handler: EventListener) => void` | Deregisters an event handler on the `document` object for a `keydown` event. |\n| `getDrawerWidth() => number` | Returns the current drawer width, in pixels. |\n| `setTranslateX(value: number) => void` | Sets the current position for the drawer, in pixels from the border. |\n| `updateCssVariable(value: string) => void` | Sets a CSS custom property, for controlling the current background opacity when manually dragging the drawer. |\n| `getFocusableElements() => NodeList` | Returns the node list of focusable elements inside the drawer. |\n| `saveElementTabState(el: Element) => void` | Saves the current tab index for the element in a data property. |\n| `restoreElementTabState(el: Element) => void` | Restores the saved tab index (if any) for an element. |\n| `makeElementUntabbable(el: Element) => void` | Makes an element untabbable. |\n| `notifyOpen() => void` | Dispatches an event notifying listeners that the drawer has been opened. |\n| `notifyClose() => void` | Dispatches an event notifying listeners that the drawer has been closed. |\n| `isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL. |\n| `isDrawer(el: Element) => boolean` | Returns boolean indicating whether the provided element is the drawer container sub-element. |\n\n### The util API\nExternal frameworks and libraries can use the following utility methods when integrating a component.\n\n#### util.remapEvent(eventName, globalObj = window) => String\n\nRemap touch events to pointer events, if the browser doesn't support touch events.\n\n#### util.getTransformPropertyName(globalObj = window, forceRefresh = false) => String\n\nChoose the correct transform property to use on the current browser.\n\n#### util.supportsCssCustomProperties(globalObj = window) => Boolean\n\nDetermine whether the current browser supports CSS properties.\n\n#### util.applyPassive(globalObj = window, forceRefresh = false) => object\n\nDetermine whether the current browser supports passive event listeners, and if so, use them.\n\n#### util.saveElementTabState(el) => void\n\nSave the tab state for an element.\n\n#### util.restoreElementTabState(el) => void\n\nRestore the tab state for an element, if it was saved.\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/animation":"^0.34.0","@material/elevation":"^0.38.0","@material/typography":"^0.39.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_0.39.0-0_1534432556858_0.12658768695403544","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/drawer","version":"0.39.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@0.39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ac0ab8620280606341dd36f0dce8ae865b96fe7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.39.0.tgz","fileCount":18,"integrity":"sha512-ez/jxZUhqMQPMyo3KrsXDYFDtPoYnuvfdLpUXgLQO3N633XL1HbgQc03nwpZHEwg7bJaEXRM0ykAhqwXm9tDyQ==","signatures":[{"sig":"MEUCIF/kgYiDxFIovYmZady7cjIMOEI2vrGKOsKob6a7pGc0AiEAo+TIjh5LALwVNmrbatFua3QgdiJs4tl40TTbb1YbiWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDe0CRA9TVsSAnZWagAAwLQP/2cpPPm3UnJUIEJWW6ns\n39GsFENDaWdBDeWz07kQ6V+7PaY40oRG9TW11LEUz9ScWiW3V7o4W99Tlm76\nXzwZV7e4ZWH1iTUNVzjHKU7qm8N8/KNmrtmo3dPoshXpMLXCC0zogDtLztnV\n9H/RoVPZ3u/MNZDNo2Xko0RVRyCqCDljOZnw4HucVqN2RN6t8KodqSCUnlXt\naVU/8vL97aEQzSf+Gxs3fRjp2sVj+8oHg52scoAnP07Tll3xHXnpPMqWGQLe\nEnboJIbtzHaKntbErj7A0NDkwC4hw9BHxYLw1JCJAz5S26sJWYhn1vqfbPel\neLpDcM2nIRQKEgXZ3/gEG94xV4BkycTY/VhYNu5emik/5+ZhAWWiqAIfh6PT\n3Wdy9DBqKgmEQJy209KSwRYoBSpgB3i94CvFp4gOaDwrTB8C2jVqORCOq3lX\n1jqUcEuvVFnjqAlnICUD3sMK8+arM+mTXf6EYhiEexm5y+n0faPK1wnldM4r\n2KpQjV1dtCvNwJ44vG0Zlc7hxhKMWZaWtCHVghrg165VzP4lSbpdQJRVmKAH\ndgLVoEbcRQopSPTbT3sx0uh1UKBKIa+jEK7DpBXjMfDr8hNeikULfE4CbZgG\nmORFOCWAbRehyVaqa8l/iS5JtuolYZXBAo50GlDSKZDT0gVBdsv6VYccRdw9\nOFGK\r\n=0iNb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"focus-trap":"^3.0.0","@material/rtl":"^0.39.0","@material/base":"^0.39.0","@material/list":"^0.39.0","@material/theme":"^0.39.0","@material/animation":"^0.39.0","@material/elevation":"^0.39.0","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.39.0_1535391667617_0.7823815499759432","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/drawer","version":"0.39.1","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@0.39.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12628ec1ecfc99a7fb43b41631740e1553332e6a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.39.1.tgz","fileCount":18,"integrity":"sha512-DQ5BnkVFqivkp2y9uKPLBb8WyG8C9CkqthtTDXwsWww7Go7+MQmZu8HEjLF8HM6FKIWAiboqJ6S5atJVR1OJGQ==","signatures":[{"sig":"MEUCIQDNaL2JYevxkTrLnLkmllh9MC+A0dAT3aZcPqSNNgibKwIgXNqLj8G2aaorFjqCtinmKX3yvQVhuAPxQrVmsbsI8o0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibT2CRA9TVsSAnZWagAAhq0P/2E1jhA4BjppFhI1CXTc\nmp0iB2IdFTTc4caF4hqJ+AMIfUlimL4WchafI9neiPCyLTNX8GZe0SSEn5dy\nlbcU47H2B4HRE6cMZTRlSULysozkAvdbStbLJyVT0lf5JHmU9ki0bxg3yfgY\nybGFPnvYGtop5dkuzKSw38igHNyOsEiCaX7nJiCrtUeHpmalM+7a/tHcy9I3\nNdA0ywxjMgaKM0giaIT7xdQDFlQkpym4rgo8deNRtCqZtnLLMyAQEE+aP7eH\nR73/o7v0kd31AmmdsXPFudWYfdy6Ea+r09lQAZNvzo/NqzlEh+T9zR2HJUEs\nSj6fGnYSy6VKA15to9e4tyJgtu7i2WYVPw3z0ci24MbddT2SJUAeSyvUSmxt\n6PibtQf8OhOyQ5O0dvQHSIlFJdXPGFb6hhYshdn2J8JnzzFJ3DdA12nP3Gqd\nvfEGOIYx0JYzOLfiRGEx71+wDGXNs3+I6EfWnOF5z4NVaisVrY69hl5SROH/\nEmwYJRobjeK6yK2IHB1TiD1IEiFHxTGB/WqeBjskvnQv6q6SPV9i0iPBqyqk\n+JQuaiVMEeIMdKtQu2I+TFpKdw+eRjjCB7dsj4X9YMRhW5jElFk5jEiLhhAR\nYbVjuH1uZbn/bMGlzTIIHbKUtHDI64a7lzX5KnuyBvoyMqpdWKxXa+7WdQxB\nuOGh\r\n=3pj2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"focus-trap":"^3.0.0","@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/list":"^0.39.1","@material/theme":"^0.39.1","@material/animation":"^0.39.0","@material/elevation":"^0.39.1","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.39.1_1535751413944_0.45996612316908303","host":"s3://npm-registry-packages"}},"0.39.2":{"name":"@material/drawer","version":"0.39.2","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@0.39.2","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ece95f9bc806210021c492020ffdb958daf61ff","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.39.2.tgz","fileCount":18,"integrity":"sha512-sGmqVdz8CdvSZVqb+wfJBF8GyZT7HaFiaGHG/Cej/JZmQLVF5Abfv7J17AGQHmitNoh+GbebFWCQBcQcPeN1xA==","signatures":[{"sig":"MEUCIQCpZYIVTd5UUx/uwvWegNom6cpKfyhMnT1sg1Kl+8lMDAIgXiI43fVb18hPdrQqzqMWHkwFbNTLUDuxZxHI/UC/oIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/OCCRA9TVsSAnZWagAAGJUP/3nD060OtGgEszJ43+Hv\nCx+cHVY5aE+qU+Q5dJgnbQBA9GwGLJJA/6r4PsfYBM4WmBMMqJY/bB2Ukyd0\nPI5PbLdkWXmurI9w0rB8sWbUf21oqBqjLeySczn5bHVwUyOUJyQPi52rAXVS\nzZEkZGZQLhSTqiGO9aq9JK4rAU3jsrFkHyR4MX+5I/i19hnbXfbvYex4bLdw\n7CHwI4a597DtXNJ8z6Z8tyDL7O36JSB3swgRx8aS24J8wHKG3mxLP8mytphA\n55RSGf9PGlnzHorR15389l8HutAtlwbkns/CDeSYJBaJxhJVGRfAgByuKhgB\naRjryVVqHX4eHOmg0hn14WaMZWi8N9cX9FFGOu6cNNnZTs/tksZk2lG+RECg\njK4TSNH8S1R4TG9qCRPhcss8Vm0jshIgw4BrnSYi4HGBzTz/yRypj+Lwe8mx\n/AjXRMz2/Pg97roQ1kXpZVDX35DfPh+yIMs5cf8/PNYXzIe9+avlswZcK9DF\n3v74Id+WAqT5wUwAhi8n+3sYfw9Cr6WWjAbI8wt7Np5nzuaf4ZOVOBMSr9A2\nRWuPfDsbdREnwBxE6mUersL9hmZI2bJmOW0gZW9EUXXyEvB4q8uP3u0qQ90b\nTncPzo6R9N6ag8hk3088ref1otJLC3R9shNG/rbV9QPSU5gO+VsI1umHd7Hk\n4EjX\r\n=Th64\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"focus-trap":"^3.0.0","@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/list":"^0.39.2","@material/theme":"^0.39.1","@material/animation":"^0.39.0","@material/elevation":"^0.39.1","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.39.2_1536684929372_0.36467735484082153","host":"s3://npm-registry-packages"}},"0.39.3":{"name":"@material/drawer","version":"0.39.3","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@0.39.3","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5370585b35c43ee260cd11796d4d8574ae012d9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.39.3.tgz","fileCount":18,"integrity":"sha512-1fHj7AIxviPc2L4o3NWPvRLGReiBul8jcRkhkkVDVvtUhDaijAKVotanTkXuaOuIDfINXO2gUtxp7ec8KYEzTw==","signatures":[{"sig":"MEUCIE3ViyaG/HhbYThk+AB+URNBnY1rJU2yW6M+Rh5r7z3VAiEA1m11CgzGuQs9pQb57Omzjj84lmzDFwgQkloFCzC+YA0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/keCRA9TVsSAnZWagAAlgsP/2p3q5HyAaVkYe9rkvvu\nuJ330c3Q7zpkkvp67V2dgaXMQj1PBDACi3aUQYTtl8oE8OruakTmEfPbuRYn\nDssh3Xz/2HUA04cVOERbvGeATa+wuSCdGnYU8vB8R2ErnxxI7wrgYJG1Q8iI\nQLYAuTZOmP4hKibMn+58N7MJOXTLjiBJWIea9FdKGqYOhqcrFaxoBfapsbvc\n8NKhKGkgopocbLQpEPsZTsyLasi2aTfWFjCtwI+xIAYeOYwH/4h/4asGsFh6\nIfJmD5DwxA55mhyiUK8NFurcQIcUtRAhTa5N5f67aVhfy/SaACeN81sljxFO\nKJOV4rFCohkxs36u4jR5jPo15Z+9aX/RxEWgxDISr0CQ0+vY5PucHwNhWO+M\nVgnku15zhHOXZv5Ab0ECcG2V4xxQBg4JEYSqDc2VTAfzZg/L/6KuoWUNecr8\nvfrSkVga82rJn4UaqIIDxnt26GW+oI/QIP9vLV2Qmh6DpGuIEeXmWIYnloZV\nUqh8F2pMFa3J1/PH49gW5yxu1hOMAtDnfrPuZhAo0MRjUVv4XtklWcF2xuA8\n02tMJYNE8TpyN9Ez28RwjnasVItKE3FXSdsNTjvOfvtThXl9BRiS4sbptkcd\ntnAy9YmA8o+OI553ijH0SQ+w4IM6/V41yPEAIjCd0Oghnwl/KHtaMXkWgiV/\nAlSk\r\n=XJXy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"focus-trap":"^3.0.0","@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/list":"^0.39.3","@material/theme":"^0.39.1","@material/animation":"^0.39.0","@material/elevation":"^0.39.1","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.39.3_1536686365874_0.4523769450882411","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/drawer","version":"0.40.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@0.40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b356a1624e436ce2d6665fc3d3583014973573ba","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.40.0.tgz","fileCount":18,"integrity":"sha512-KY/mDWkCMwB/5g8qqcBhGR72yT4/u8eJ4BY+/LtiFG47SrL7SZHwhqBgjfGgdRckwX8D8WF/6BQqeZQlbTmIjw==","signatures":[{"sig":"MEUCIBZmzBcsY5s+4DN9BUIAhV82F+cufs0qzA8GIO4lAqCcAiEA+uiSf0zcxx3x3QimUmpZPxRJBxYK73NHJpcHQo921/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":204019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqULFCRA9TVsSAnZWagAAFxMP/2AG7f2cTxcigCYDqyrL\nHTef4L4DuSnPUfy4+sV7ZMdgBNa0iH7ty57MwOR5sqEQigVjldXvs9MK/X49\nrUmZ+4XgskgfBQqfA/avqj3JelPCwW3LvKOzYC+wznT/el4a3eou4vVG6hzN\ngCP2GlvOd5GVrAhPuqGS2epU7vKkCh+7yBFHGhhgxOWO8n388txW1Kt+rwKq\nevhoj+Q/6GIYDf6uOgC+2QA6mvX74pBHWSCGtXeNtCUQaHjZw6yywxSx6NWB\n4umygMOa5DxeM8/a4/HkWdFPZ8Azkfog5iDRuBqRuDv/megpia9DJpPgmzCY\nsYIa0ys6BH45QVvaHz9txuV8gL6yQZDELt+rpboiH2RzxoS/j7uGf4Ryd/Uv\nc+s0M1NC8CZA4rqe2/YUIczwkV9v85e21MSNqb8epy9Oh1hGNgYlBml+GTjY\nkNRRb6aV5z8afJseHHj9VctpUXMY5vbyMaLeIOGMdEI5L6R7d7yj/pzfWJaR\ngfh2nfFBdFcVVwPfHvnudNLqf37SHthSb00pCfL/qNSQVgABjm3TtU/kE4vF\nJF8HN+dMvkSwfq8phT6/J4EjCtJMKTV9X1+J11MHIdP/4vgn5llSCOaEis1V\nRkGd2nSZJDTBvf2jR5IqmXDp8OfKoMmUOk19FPM2ncbVBUPbIdFF6KFwbdp/\nxz0G\r\n=f59C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"focus-trap":"^3.0.0","@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/list":"^0.40.0","@material/shape":"^0.40.0","@material/theme":"^0.40.0","@material/ripple":"^0.40.0","@material/animation":"^0.39.0","@material/elevation":"^0.40.0","@material/typography":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.40.0_1537819333010_0.8176313262620605","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/drawer","version":"0.40.1","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@0.40.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5eeb09d270f305daa71407b37437f353814526b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.40.1.tgz","fileCount":18,"integrity":"sha512-kBZNIqtAH4XAfR35GF5C7XavaHEXlWI9Ed2R3AUunTkOPocDRVZPaidb4pbagVHs4t2+8Zu3PwyjVEr2dgutNA==","signatures":[{"sig":"MEYCIQCPuQn7ZrKquElGHfdES6Jtm7V5KFn3LmvSoCPFLSN2mQIhAPskmDNmC4VevcySpTiL24G83Mfzs5oQTTobQiUFRtU1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":206651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8cDCRA9TVsSAnZWagAAD+oP/Rz2inIEolRgOqC2LYZy\nfc3H1J8k6a/0RDzhpLs9XozIC7h32s6PyjzQ9v6BEBiDKjoly/seFMn2mIvR\nwmLy5atEMJgYyvHvbBVGRdHNGST8XFEUWJCx8D5SS34xI0adwAQ0XMR92hwZ\nJaVB6ruXmJ5bA2+itsDq6/ik8WT3pX+M0LpktmjFfqMh80cfF1RxabLKLy3G\nYeZy45MBZ9TF5RW49hqgaZ1Dgq+byKl1SuniDToMlsnnKurMBgeK64yIgWvG\na1rZNbqyihvsa4kJv4kH3h8pNHyVgnEY7jg9sA/iLTFustSBYoz3y8zv67e+\n5kgt2kaqqns9l4Ck5iwPLH/1KS7q7xMRW+f54RYBHXP1/hnO2pksEHMO6381\nb9JfN90Z4vsZpuJfPODs37f5hhy/lDUMSWWy0rUG1aW1Vf3gqtD+qMPs+9T4\nA6nTt2hxl0zMiQzZzpxUSvkjm3Rjp6i2YNT1pVGNCGAq3W93bTwhZSHz3JnN\nr0NIgQOQ3bdSmNeiETo8jVa/B0hCj1u1cyp1GAJql59u7zqwlZ5g59tYDaNN\n96XI6270zGSkLYA55uMAto+tVDnYhIm7I02BpjSUyhKP6LB3qP1yrM0iZW8D\n+CC7qPCe7FfeH1/xoVfXVY+pPvUbxX5Ar1dce6cPn2SVXSXY79z3BUEbADUA\nLXiE\r\n=raLp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"focus-trap":"^3.0.0","@material/rtl":"^0.40.1","@material/base":"^0.40.1","@material/list":"^0.40.1","@material/shape":"^0.40.1","@material/theme":"^0.40.1","@material/ripple":"^0.40.1","@material/animation":"^0.40.1","@material/elevation":"^0.40.1","@material/typography":"^0.40.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.40.1_1539032834669_0.9258438374658202","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/drawer","version":"0.41.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@0.41.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"732bfb33ffed2739b536f83d52bc97564007a0e4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.41.0.tgz","fileCount":18,"integrity":"sha512-XMKrr9Ci7z69xwYsT1P/JH/BRccwB+HL9UiYzym8SAfZG/4XtP0b5qw+vYMrIZ/NeF0nOEaE8pNHq2XrUz0csA==","signatures":[{"sig":"MEUCIAjVA0O8Mnf3vErKu5lDFyvWBc6u4aPs9bOm8aH7yTKXAiEA4fyhTlkY/mYz+xscjO2l5B4t1Aj0T1ZOK7+RBDbWDmo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":206105,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12wDCRA9TVsSAnZWagAAYFwP/2xIzrvM5QsE2tCTMwZ8\nw9XLOCrLZHUif2xkIIVgjMdPs41dE/Zbmf3KwyTf+R25vJIM+pty0GOQdfA1\n7dnIuVq/eS9GUblKz3LVL8NR71dQvedSK7UdVEE/svhO56Gg0Ity7oiWm91u\nOHDkNJNQz2dpiNNRhmyGJ9MUODwJ3NDDbJ9Rh00MrvVOl4d3A5AJ3yMHMsjm\nK2K1VoTYtgwwgxy97ugWQC42cwcrKacPxJ77ySngsTCK6u17kK+W20I9HSSx\nFYE7vPRpFG6A/QNB3pokHxvKq49uPEtfck04miMT31oQriUfJV9MYa7xinAZ\n6dS130uyaRO3eZcpibM5+EZLtEN1EX7lE8GPa9Ajv+MmypMgjfKDYIWi8s88\nYlbu8GOalBmbAhEwYFfKmKP14Z2UaSGGgGtb6zCYpAUogLaXgmkgNDHump7P\ntT2hP3NTNEKcX4lF7jOMa2ECJdaghUW/hHGrrmoMsgvSeohr33wc4I07D5G9\nSukD/lhxKy7568eVQZlVU46MFfhDdqd/qPim6nGmlwadqf1J7qXLiRTJcjwd\nzpX3VMYGlbCpql2gJevurp8yOVbMJ44G+rmibAaTAIznezKj8gAiJoL6eKY8\n1Z/bU0muFwl/WDGCJdfL94cXgLu2bzT0HtlRBfLA2AFrVqousin5mJftRJf8\nsmtE\r\n=4yyK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"focus-trap":"^3.0.0","@material/rtl":"^0.40.1","@material/base":"^0.41.0","@material/list":"^0.41.0","@material/shape":"^0.41.0","@material/theme":"^0.41.0","@material/ripple":"^0.41.0","@material/animation":"^0.41.0","@material/elevation":"^0.41.0","@material/typography":"^0.41.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.41.0_1540844546281_0.9693602703653597","host":"s3://npm-registry-packages"}},"0.41.1":{"name":"@material/drawer","version":"0.41.1","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@0.41.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abd860424c139a59e0dbd363ff2c16fcd435c55b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.41.1.tgz","fileCount":18,"integrity":"sha512-4t9ARGaIg8jpXIqD8hy4kcZ0hsF7y25gk2jNQAYG8ukQuDgbenjydlNFnC+I/eWBVIKqnVBlens+4ZUns+n3hg==","signatures":[{"sig":"MEUCIQDgP9JbHba75Y9p5NYNOvJjll2JRxDruDkqXof99NadxgIgchTiOsG7f87rf2lLR+EYrzCiUqcg3Q0hXrubw3+L6jE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7HedCRA9TVsSAnZWagAADtUP/jXX61mWSlj9ZCA5wHjq\nDZ5NA3pxV30agJx1wCt7db1bN/aw7nJdBmMTbBfySukETiKMt2xFwLLJC8LS\nc2dAjRX5XnI65IA4K/rVOMIpNPHVbW+CpnPZ0ihuD/0ESp4Y69MduieaT1Xn\nFNG1WpAFPK+M6LRgRgNAtsLhLqiiTDYdWnrjDKYvMU78TpX9zAkLC9CvI3K/\n2WsIOoxyzFTa3nLaKbE3ftpvUfWSimer3N+rEaam6/Ei604UWYVdzSx1ZwjD\nWg/oW5ZoIZbd1llUkoWuDAJMvNm7OsTyrWBvEQj8nwU1Zl/PDJfHSuev+C4G\nkh+wQnQSMzIoXxaB3OT7W6a64l3RU15PoPhBUnGy/vDGDDTijWZMBjtGU+UM\n4ot1LJWkotnC8xzcPo0GweupD2vZKtk+BX+P5zVb8N92gRQ3cnptAYR+3m56\nMn9/BtnTV1yuMHMDaPkp3dReAdSTNvZOZKluPHh9E3ShJ7vHgVj/8VuDibl1\nMO8KZ0AXwjhwJ7Fu6RUCp87eU8ThB29A+R6yx+7Qlhm33gwy3og1pJBD7FqX\nPsY5Ks6995j2j1mhwbWmxznPQmE7eBr99zJlyLdu9gcnBy45sgA+ssmYTvl3\ncR2HcKGdSBpplcIX/KE6xXogqFm41GhlrxiCaqvYGyw3hkd1edjIskPSj1UD\n225e\r\n=iDA+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"focus-trap":"^3.0.0","@material/rtl":"^0.40.1","@material/base":"^0.41.0","@material/list":"^0.41.0","@material/shape":"^0.41.0","@material/theme":"^0.41.0","@material/ripple":"^0.41.0","@material/animation":"^0.41.0","@material/elevation":"^0.41.0","@material/typography":"^0.41.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.41.1_1542223772620_0.4065229053428545","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/drawer","version":"0.42.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@0.42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59c1e877cd0013f9acbdf4da15c63d8eb7bca06e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.42.0.tgz","fileCount":18,"integrity":"sha512-9+PPpF7eeSYIYDlqHQJEl0n8JYgxyWcZYBVoymqDLXjcD/YJZ0zFT06U61/dz/7Zxx6bZ7xP/p+IGGJQHvaSYA==","signatures":[{"sig":"MEUCIQDV6mLlGq++cvBOBRcgJtdWCEk51pB4ZtneNUF5VX5TqwIgNXUpnQ/IU52GAMmFZd665x0kLLidsHCiQF4nN53mlA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":214382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwXPCRA9TVsSAnZWagAA0RQP/0ygIMrt0FvvgQCaaVBu\nP90gaOtUfy6nJjVdsrborVMbeI5+HxH5vgJPw45+pvRJXVoUOdesjsMSdSMw\nks5ITGiwxniUez86Z0r+nrLKW7iU52yEbBZGnwVMAsT6zLManStXP42bu60d\n805xfGHgdDSCNt1oes69Ckisxt+MtdyYjxtiWYQEkz3+ygrbHQebx9PCqNMx\nyWt5ibCZOZa3/6UyPzlELQPLk6cdtLsbjdbjQmwUaFJdCrrulVP4fVzI/baZ\n+RKOlaAwih3mkyTubEo47pxs+6qbIjuI1x9yni6s7LEVsKkOzDFYqciZDdTj\ntKFMnnNjh9XBJ0PLD1a/Myo6imH5Xw0A3z0+GljpW5fxFJU5QlqoSl9RZ+ok\nBFGA5XkLpX19hD7dstAfFL0ZpA4+vrTzhrrLpF+E9Yq2bHNKcQCViTnXvBXH\n26EaKOHQSG+nK/bc9es9KG29ZgBZ5xgt2HLC+M0z0FG4vGPDEMSnkxoVAnr0\nLD6pA+c/DVPhcpvVF0OiA5t9MjwlkqT8nXo329GR9gJQUs/Qomqx2UhWf4UM\nLsca2XWtOogLz1txvpXu8R1/dstnwtycZquXQ7OYfBUZkDq5pNLOyWO7VROg\nslHigwT3FV/itrdLTJwg7uKuGEsC74dmhCFhNsdZg/Uvn0PDlxJpdvhCUZyq\ntaED\r\n=ihb/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"focus-trap":"^3.0.0","@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/list":"^0.42.0","@material/shape":"^0.42.0","@material/theme":"^0.41.0","@material/ripple":"^0.42.0","@material/animation":"^0.41.0","@material/elevation":"^0.41.0","@material/typography":"^0.42.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.42.0_1543964110882_0.48277647797238465","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/drawer","version":"0.43.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@0.43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bee38b688d2685fd8bb01732ab3e7a1d703baffd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.43.0.tgz","fileCount":22,"integrity":"sha512-TAhUzRFJcO0VVSliLlSBbfDGPceeCHLRr6drMdHdNfz8HDT09gjzrBRZWKdluSn/ubC9VCyykj2lW2OmV7fgBA==","signatures":[{"sig":"MEUCIHdy2rnukEGB9zT/f9O6XZNNlwK3MOwKaFuCkD69xVSNAiEAtyBxCy3NR0/ZBdvER6j0BRmp2nuJIGxxxscBDbchgW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":659308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM61PCRA9TVsSAnZWagAAzcwP/3i/bdt7jjV1nxiZJZy8\nUmA/qJhoWFTxHj0sZPQke/TQncMUlFTZnXd22UtqZfw+LekGnfsADC4K1Qju\nx7eVVSKl5FUiIXZAsA3DfSL9LPtTXolSwaESW8ZnrHBo/yaw+s+hplP+Zkk+\nqkVo+uQR1bcWQKTO1m7cOhW5yeieC0zLLOKU30deolVlJD2G7pAqSgcc5oAX\n2IRWUfeSGUcdQwe5lO/2+Ft7ybxQgB3UtI5OFX4kvk9bxvzFUj8HDMv+zghA\nw5FkfPbCGyN3nF2gqpn9ol3+4AHYMskvZiQ35cMIXpbEDZ00GdKlZLaxcIVE\nzH0aTpy+Reo23BGSMcQi4Ur50dor8Lei5ExTat56CAyDBLklL37iayyW2rp7\n19GM56UfZ6p6CjlSqAOR457jeELFdBAAKSh7CM5YX5/7qOIHCHz0WWvDddrw\nQ2v+wq8ytj8VunDXBM1aC9kOv5hBf+uuGBzAgnzO6mIT2Y4V7KKeHemVJsGF\ndcTVsOThSM3SiG9hKcGWI+uC+CVS5qoxhKNoRzG8wCt1LcWGTOiZ4Njwyoh4\nDhfJCg6+RNMmHAjCKVdpRI2cwDMie6H9pz+PxT3zyT0OyoIF6uncMXcpzNwa\ncaJbDRZKL6IKxqFGDX589AIL77pktt9nhrTndnrGj6/MBzNwPmyfCrUR66rS\nKpRz\r\n=I53g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"focus-trap":"^4.0.2","@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/list":"^0.43.0","@material/shape":"^0.43.0","@material/theme":"^0.43.0","@material/ripple":"^0.43.0","@material/animation":"^0.41.0","@material/elevation":"^0.43.0","@material/typography":"^0.43.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.43.0_1546890574671_0.5384874349078363","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/drawer","version":"0.44.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@0.44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74b3ddfb741bffc72331c7a73cf62716fd3f0ab3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.44.0.tgz","fileCount":22,"integrity":"sha512-AYwFe0jgqqSmJd1bny8JJTA2SScF86Wfbk99lXXEwd/acS8IbnnuH6zfAg6MyJX12FDb8dE8Z/Ok1IwLiVa9sQ==","signatures":[{"sig":"MEQCIGo/xEGt5IyZGZurtFKxEtqL8YozfiwlTVJzmvkAECgoAiAFUGZPdmUpLakjNn/fQV4zBw+7+P1Th+i+Uaj/l09Phw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWINfCRA9TVsSAnZWagAApaUQAIohL5y87g0zsxdrvWte\n6NLNpc2rokWFRzgZPu82/fiZC0R2xm107bU2oDHMTWcKbqcA4FchHsC3TiWF\ncX4vU8gt9tgWWEeQgQxAawGT4ZmpFLF4iR86np8h0kEf3iG9ukZpxPAqc/Eb\nDv4m8TVTvMlcFQHKJsMHJOgtNmjwSioqBo4kanfNp8J4xr3Ij4oRLeP3Q2LD\netBkbp3eXDUTPVYXh29itwCc/RA46Ojx6aznfeqmDvUGND5EejcmAKtwqtbS\n0YWgdgTQoBzxXj90IABelv+3ztTTFEPVHKUq8r0YZznTOq1nCY06ve4KN684\nZsMGM0osNwLfHe8taFZsdlF7w2ox3GoOSspY6buYT6QORuiznkkbDsMqzsw8\nuRc3JxTqrQNqZ5dxkxDJYfSBhZhysUwhXErMsT+kCeScBiyFlHM7ceCxUX4B\nJZGOVpxKLkiLD5EabgOS+KRaUu0+ulKG/eJ2avwppqBdeCSs+ZDdBHLCtaoz\nBNg38W/cQ5AAYF+FWTCep9CusCEVZMfRkL9S/ugTjVlr9oyv1WarekhyvZr6\nE7SQHHs1qgj1Nv/26WynWGr+D3ThUYte2qbZYFelkM5GINiJh25uUNdZ1B2S\nO7HR486JANzLJSSN3a1avVBc3de8frGo2IROAOWWUqhxi+MnYBZK05cO9jiM\nldl0\r\n=dqZw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"focus-trap":"^4.0.2","@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/list":"^0.44.0","@material/shape":"^0.43.0","@material/theme":"^0.43.0","@material/ripple":"^0.44.0","@material/animation":"^0.41.0","@material/elevation":"^0.44.0","@material/typography":"^0.44.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.44.0_1549304670079_0.038648174057907436","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/drawer","version":"0.44.1","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@0.44.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a225afe8f7fce21244add2206b4b5028e7241c2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-0.44.1.tgz","fileCount":22,"integrity":"sha512-MPPKFVUC5gFeIKAbbU0fb2wcPXBXt85MGkMkv1utyH5iq2dFwYUnk2OliBtDO/5Ds+diymfp1iD+Lz416A36fA==","signatures":[{"sig":"MEUCICxSp1lQ15KVZRAEpdB/S2v2M5B4Xb/aaY9+QQEAGRAAAiEAj6fV591lwpfb3CVVeQl3VMYLltTimfRK+DKttB/foKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIsyCRA9TVsSAnZWagAApqYP/1nidFlYyuCkn8H4JOxc\nGTjRuH4kLrrk30zuWy3NMb+uXB/QeujfQmYVnePaSZwBX/qVAxIZLvs0kBUY\nQhWCzIYaPpVeReH16Qk1tKC9edf0ANzgJ1tkbfiYdCmcDCRwP7kw5rZVS+n0\nv6GmP4L+Nw7e5D3m5YQpe0EM+xg4EMkAFiTRtrQ31XPMONNG+c/XST2V0i4e\n2kwAb6T5bk5ciDDO2ve5AE7ZEbqImJawg3MAovQbGvKhJpsBlngAgcW6VNXU\nTpCYAieVuyyY05kYfodd/YPYIpnjuBWuXjAkB+Amj1nt4ocPeXaeFpR+hrmC\nqaIqZ3eGTo9zqT/05+a9xwNjON5nl9FRgsh4sNYsNN9Swid2lhoVG7byfkVn\nEZBoJf9IofBuHKXtm8YdXLD4Fl0+Fp5vOI9E9OvTbvaSX7vY5cxdwQAUh7yY\nbP3klbsgOGiqru7Ao9l4nMyrVDV/JyPlHCbW2zrxiLxWZXorHRnWTZDZVocH\nW7Wf7ELrUrhIiPUQLMn24ywC/LmpXlclmgu25IHWvJyurd5QJJStKshcThGa\nwLijB3xLfQm6evGqg3BcbyeOO8NqCYAZm/ckYpB/Gqj1SA9UFPxhpoGMMA+G\n+j1tmj14FfVvKAcV6o32ZAW+mRcgcoDWRX8Ca5uAEq3M8jbDApiyYLUAZ6VO\nc+fm\r\n=U6Kk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components Web drawer component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"focus-trap":"^4.0.2","@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/list":"^0.44.1","@material/shape":"^0.44.1","@material/theme":"^0.43.0","@material/ripple":"^0.44.1","@material/animation":"^0.41.0","@material/elevation":"^0.44.1","@material/typography":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_0.44.1_1550617393829_0.34065099251773434","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/drawer","version":"1.0.0-0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@1.0.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6cacf4b8e7f6ee9c104ff75d1b7a272a9d5cb08","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-1.0.0-0.tgz","fileCount":38,"integrity":"sha512-NiRLFtY67olFS+vPqLXxYBSgMYw4MVgZBfCfFjt0hpcy5lH0pI78QG8D1zMCCQai+abVaH2bx/7ev8yndl0Kng==","signatures":[{"sig":"MEQCIHJ3m3MS7cuE4i0BlNbPDn3rdbeQZKrJzrUboVg5tgH+AiAa8hKBdOhdjKVPc07Rvsz96mqT5xhAm+XI42hPi6G4sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":823031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdySFCRA9TVsSAnZWagAAnigP/RHKr++kI6XzzaA2dJdB\nGH/foCZbpwQLKOGQE74paQcde4poGQRBL4FxLGy6qqO/HQ7Hvh1Qa5IFkzr8\nGsT5fEJJVMzXzmqeDYTvAldkRPItfGp+Q5q0FozWNJH5WYPlQSWP/uT9BD26\nmIVucPaacYnj5SJdLM65GZRswjg7V9OlAYIaIAcy95b+DWZ5BLXUdj1wIZHy\niJm3RWoaDwQ9XZhcwY5o7RZrdPn+G9jFYrDlZ9+t568C1FaZAKrC0FRYL6Cm\nQLc9QlcIq9t3LlpTJHGi7F5tR8gIDpcQ3z6A5bXoTginlBlzl0JfawtwvNGZ\n10Pub6EzaGW3yZW5W4RSf+HlyErHK/E1mpmXYAY9hk2d84+bCcn09qrOsBrH\nzDqjF0XsXx8I63ejm9YamoKN/RtfULQ6hIhhMTXE+RY/5Z1nbkm1j74A1am8\nFdWlz9WaEeF2HwqNzXDfaTwGwCCZ1Zb1VzvTxN0ItbCx9BtSPEP2wIsx73NA\nzInwKZOesK8OlZeWgv4GJW0/vZoi2qW5zNkGoRF8xQMUAfEXGtwCvA4HqbeT\npFtxcSYyEx1oRxLiMl8TiOWoWkHdKTcli0lMsRBm6wqvLw+SKW70uijeQ0Np\nZ1xZupThY0W71Po+e+gD6RI7WqHjb1QvqWIwB+Mbl4tKNwYYWh3alNPOcOks\nP1De\r\n=KqkQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## `MDCDrawer` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | Boolean | Proxies to the foundation's `open`/`close` methods. Also returns true if drawer is in the open position.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCDrawer:opened` | None | Emits when the navigation drawer has opened.\n`MDCDrawer:closed` | None | Emits when the navigation drawer has closed.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Navigation Drawer for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`hasClass(className: string) => boolean` | Returns true if the root element contains the given `className`.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`elementHasClass(element: !Element, className: string) => boolean` | Returns true if the an element contains the given class.\n`saveFocus() => void` | Saves the focus of currently active element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`notifyClose() => void` | Emits the `MDCDrawer:closed` event.\n`notifyOpen() => void` | Emits the `MDCDrawer:opened` event.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n\n### Foundations\n\n#### `MDCDismissibleDrawerFoundation`\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the drawer from the closed state.\n`close() => void` | Closes the drawer from the open state.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`handleKeyDown(evt: Event) => void` | Handles the keydown event.\n`handleTransitionEnd(evt: Event) => void` | Handles the transitionend event when the drawer finishes opening/closing.\n`opened() => void` | Only called internally. Extension point for when drawer finishes open animation.\n`closed() => void` | Only called internally. Extension point for when drawer finishes close animation.\n\n#### `MDCModalDrawerFoundation` (extends `MDCDismissibleDrawerFoundation`)\n\nMethod Signature | Description\n--- | ---\n`handleScrimClick() => void` | Handles click event on scrim.\n","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","focus-trap":"^4.0.2","@material/rtl":"^0.42.0","@material/base":"^1.0.0-0","@material/list":"^1.0.0-0","@material/shape":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/ripple":"^1.0.0-0","@material/animation":"^1.0.0-0","@material/elevation":"^1.0.0-0","@material/typography":"^1.0.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_1.0.0-0_1551312004703_0.6656819948745218","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/drawer","version":"1.0.0-1","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@1.0.0-1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15340f70416607da25c73468372f83d17f131eb8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-1.0.0-1.tgz","fileCount":38,"integrity":"sha512-H9NNvenvnnZGUyvRqV0y0c8XaR5zBh9rOkmTeP332ubTlvxDJk5+9wv/oKDbpaYxa+vlMhPiV5aeYCHgVopD5g==","signatures":[{"sig":"MEQCICvOKBOEGpj7hpS6oZG5yO31TqDYPm1jyiXbtY1vPYFCAiAkslO1pjPjkl7We4RTdhcu6Dal6dwzNdeMAeiEIF+1oQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":823121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXfCRA9TVsSAnZWagAALc0QAJsbR+uZs+IpyPa0r5FS\nZyrUi2NhouQ36QdyLy9TNCjnDpfU+YqGnYjl4c88QLzwIZ2rzZ0w4PcJRu/O\ncLV4tNMyNMDnpuWcMV/sRrNnlEkU6taHhr6ViGCgW8X24YpdJBzteceoav+J\nx8rWCbs5afbkebvtee8KRm/YTrl2S53067+X716Bv4E88u+KrHbxg0jlKkdC\n2bap6xrDiY+BR+R6u0X82teLKqH0tfy21JcnU2rLoJAup8CeTiMXIndhTAFT\nzALrChEgwTqFN/DEI7YBx1hAo/INesCJnclc6UyfUUKzzV/+1ze02g8vQ2mR\nhQpWll6AyUeA9LjH209ZAASc2qLRBmGFOcK+e0NCo+oLFIBGXNadHwB4AH2g\nXy3sQIhE2Be1vNY70MrnjLLV5zWf+XT/fS5zkOBGSZLYrZ1JID9DDdVwVsxD\nVGpBwgcJQj5KaExozfxKr7nqzVY3b7NQgySOjEUCSxHztdp6O+3HOTEqum4A\n+VoWPwmOt2vvwQd8HJiw4xoLJHpYl/1OqQBD2aAGmR/kIuNXhfzu8Z4qs3Zp\nD/+bSB8UP+C5syLRFbhUQUB/fIR+YvGHduL+1JcS3ixTw07FpoaxtdZqS9rk\nEusCIu7Shbu9BeCFQI4qLvybN0jmHrYzrv4zsKlvJVOpgdpUWp56NddYQJmH\nCQAI\r\n=SR6t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## `MDCDrawer` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | Boolean | Proxies to the foundation's `open`/`close` methods. Also returns true if drawer is in the open position.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCDrawer:opened` | None | Emits when the navigation drawer has opened.\n`MDCDrawer:closed` | None | Emits when the navigation drawer has closed.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Navigation Drawer for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`hasClass(className: string) => boolean` | Returns true if the root element contains the given `className`.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`elementHasClass(element: !Element, className: string) => boolean` | Returns true if the an element contains the given class.\n`saveFocus() => void` | Saves the focus of currently active element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`notifyClose() => void` | Emits the `MDCDrawer:closed` event.\n`notifyOpen() => void` | Emits the `MDCDrawer:opened` event.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n\n### Foundations\n\n#### `MDCDismissibleDrawerFoundation`\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the drawer from the closed state.\n`close() => void` | Closes the drawer from the open state.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`handleKeyDown(evt: Event) => void` | Handles the keydown event.\n`handleTransitionEnd(evt: Event) => void` | Handles the transitionend event when the drawer finishes opening/closing.\n`opened() => void` | Only called internally. Extension point for when drawer finishes open animation.\n`closed() => void` | Only called internally. Extension point for when drawer finishes close animation.\n\n#### `MDCModalDrawerFoundation` (extends `MDCDismissibleDrawerFoundation`)\n\nMethod Signature | Description\n--- | ---\n`handleScrimClick() => void` | Handles click event on scrim.\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^4.0.2","@material/rtl":"^0.42.0","@material/base":"^1.0.0-1","@material/list":"^1.0.0-1","@material/shape":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/ripple":"^1.0.0-1","@material/animation":"^1.0.0-1","@material/elevation":"^1.0.0-1","@material/typography":"^1.0.0-1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_1.0.0-1_1551742430516_0.8963958884375132","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/drawer","version":"1.0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@1.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b82643270b085773f473a414d1edaa98356fdf88","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-1.0.0.tgz","fileCount":38,"integrity":"sha512-QCNEjNGGhmLq27kXTOVQrgPDv8Yu3F8cdWdQ3d8d8sBpibhcI+ci29h7KBpddC8/ndzubePpSz4elltopfEUOw==","signatures":[{"sig":"MEUCIBRCwgPNKuVxMoXwu3pb0lO+MJHtK+mWpcWICU37pyuVAiEAj23TJACRgGbnsRyl1bWvUpIWkW7Zbk/+2V6JwRdhuD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":821331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDbaCRA9TVsSAnZWagAAuTUQAJHZ75UBD4YSLhCiSyXr\n64DoI4yyWwVsL10saA+HhiDm6h19PoP/iOCQrNDi3n80wIgujZam2FFSlpU3\nlx9KahDise42g6by8PobNo9h+dSl6/7V5JzItcndxe9j8zL174YyfrL5hdbn\nEUvSAFa91wfp2HplnoiFzmQb41iIEZTgtXFy3Aslu+iB421FOlvadNWI0UKB\n8/h4qDMLYhn4xeCXvVF8FWbOGa/fH3taNhN23fBhLthzjQ6aCuLGhFGtTJDU\nZaWEQTltDbTo9c0EwxyrbEPLnS+OFLxiAKhmWb1W7B6tAJWLkYAYYRAAvVl0\nXPu1QDHJ7nTgUNzKabsABV3QmDGupFtxW/eB86RbTKM8Nb4iaxsj0537TjyX\nVi14NtGp+SBeGjwkLoR8GXF3x7idhcKwPB4SJ1qEs9IYONGtrH5RkkC7kh0b\n/zJmnn9bvK23SBxksTOEE8uNUTGAoNgXPS3Cic/4PgjXyMwuQS4O/AgeGvXi\nCMIFC7Iwt2iBAMRRL9nDwITqOOykfheu09NrEX3uiiTzEBe0xSizbWG4mlR4\nLxD8KE08zVhY3UTrovEi0cY7dJ4P1D5ViKTqk1jskiRPv8aPBq+prcceiAZk\niinA510mniVJhJHWZkR5LxlVeCFFGJW8qdDZmEVH8CTcHf7RW0jUPHjbZuCw\nxAHG\r\n=qPn9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^4.0.2","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^1.0.0","@material/shape":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.0","@material/animation":"^1.0.0","@material/elevation":"^1.0.0","@material/typography":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_1.0.0_1551906521102_0.7165666400452662","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@material/drawer","version":"1.0.1","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@1.0.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3c179b59df590a83be57188f737a511f3b1e999","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-1.0.1.tgz","fileCount":38,"integrity":"sha512-xgpWg2MZVFWU0MX+H4MmWA0XQO0cxF1XFA0KdyV+7W0bdzpI1x8itM8Xh0suyzqyqDc+GMHG/OxP8KYUv40jeg==","signatures":[{"sig":"MEUCIEDzpdcRdw01GTRXdaHmxpSmUVpDGcmetiDdy3DEcBrLAiEApTHG7oRTforekj6mE523wqg2ZvjONzdyPWXdmj3sk1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":673192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtw8CRA9TVsSAnZWagAALJwP/AslT07MUXQrkdPP+HwG\nIt5xGy6rdohSmIN28SU7OXPcno0wEfd75m4roSVC2FqVyiOtFajejdd7ZMFE\nfcd1/scyDvOZmt3djQDsfIL8AiQdowY+L9V8uxv07AUjPcoTpFMh6W1Fh2qw\nVCYtxVyR+YNTtS7+U0XzGRLCZ5jsFbR0pV1hSic67OKz19RP3LNqBDoUVZ8Z\n/Rqxe6OZ8rRzdXPotFlzh1bICd364ydOvCv+/nt+zhjhYqpsh7lbosOgumwt\n+SIszjs6k0rl1tA45oZnNU+o3mYMMTuPoidWxJM/w5I+yJgTiQ+tZz8XGL6Z\nug2cuZRPZ+ggwIT+4CoVmFm9Ple46xsO8LPFUwCJ8jKsepeBik7RXjBrfYDx\nDbLCkryHme+OIG09k42dPwpxxYQLoX4pAHj66UZmVrgNwWggCdirAbIApkaM\n4SZkbaQ7LG5jbUiR533UJPuwlhELeDcpmL8irZ5Iww+YA8hjLZzuYVH8mpZ1\ndTiUcer/SQBFvkfuv4h/d02c4VE8NgmcQVDM3M26Xxz3Oo6WDvyxvO2JRzmp\namn1zG+gj58JgxZEZwzXDFmzg0pqxjCShv0eDkAS4qR9t4SnfZJWBETeANiV\nCobmuMpUmWWD9doUe97kXLKCAxTtqtKfeUcSuYRP2NMWP6K0Fdorb8ODE2wp\nJkMW\r\n=8Bta\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","focus-trap":"^4.0.2","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^1.0.1","@material/shape":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.1","@material/animation":"^1.0.0","@material/elevation":"^1.0.0","@material/typography":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_1.0.1_1552342075234_0.7730982922566478","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/drawer","version":"1.1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@1.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"624cc794ac94f09a08551d6b0030163d1dc2b4fb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-1.1.0.tgz","fileCount":38,"integrity":"sha512-IKQejVv9oSf1sUoAZ7BdV8fhTVDfMfZXfAOQBpw6QyfQujGkNVZatOsvbRcOFPu3naNZFS7brbHRiBH2ArgMQQ==","signatures":[{"sig":"MEQCIH92N7uqk+vhFhS9yYgyzimU0otCCqO2aVCWvo4Fv1mnAiAWd5rbZ17rUUHD00LdxKNMpj94+OuPQLXNu+aO2+mEBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnzhCRA9TVsSAnZWagAAfFIQAKOyGNyE3fJryEwS590Z\nJXTpSwdMYvxuhZ4iMFxbfSg7bOJHRJFImYwC3ThjTjXPB+PbRuO6P9WgFAUs\nhGkB8FOz5WA4OO0QaCMMdhUcqgiWcXh9nSGXATgrqsrZb1Cw0ZaZziosTWXr\nMz/Sh97EIjFZKC5Hh/k7Zr+qNjFv5PkrdCAMNX6spg5sYNf2K3Pzb2LYD30C\nO7FHbfNxVvFtLuyYdTBNvT85h+qOYQpIW3dJnAL5/Ih2pQ2xkJhd4OLV/my6\nVUiny99FQNY47uBdDSBxSLDSnleaaPmJEArk5ba25Zs8XlvI0p7DGdFO9v/O\nIN6CjMk9oASEnYg6W4PzHUqcC9zzwfMMih3P2bISD7ScFGUK2yakBjpshkpG\nWyHC4lzq8atNtOptI45Oar3SuGMqDUBmMuz4j9UKgFfyAvV/DeUARwDqnnvf\nNknDzLXjGY32eqyQaxKiUsv68MjDbaYwgDqYn0y9ZRAgNq2fnJTqfnI5IH7z\nnUmkZtuoQbwrT5hqn0xRxMiq2gBEtr/9F7ruICcmwwa6QSzRod68ETdjakwg\nvAGP42kwcQvoTbKvHdQ8J2Lv+Ywjk5W/EEPbbYrAWQ6e7OU3Fa5norcz9tvH\nP2ksFGs5P8j5y1w/IqJE8kbzZ9lmgfP4RmG/w51ekfeEd7AtWptlmmC1k2kM\nYz/X\r\n=SCYs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","focus-trap":"^4.0.2","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^1.1.0","@material/shape":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^1.1.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_1.1.0_1553628384840_0.30334069188796486","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@material/drawer","version":"1.1.1","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@1.1.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80bc169f3ca8ee9fed4d463944cd201d9c5ca76f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-1.1.1.tgz","fileCount":38,"integrity":"sha512-QCncn5ej0FR+Tyi1lTSWhpTVK24puf5wGc24ZuhFpom5bsectC7UqT/QnEdOiG6YvJdN5Cw1DeJ9CI3jm+1HDw==","signatures":[{"sig":"MEUCIQCgG1lNnsxZ+CTpw3lXaTPMsfg5yGG1eygFWN8OLP0bhwIgVNy8FSu5Gd88A/LEBXpzZdVX5eO6VEeLGgv9FIypkAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":684600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq6uaCRA9TVsSAnZWagAA/ZwQAIzTE0LhTg/tP6oM7eb1\ni74pqra1O+07ey5tFU8AldAfqzxB4AWcuYY7l4JQzddR8qRkUUJOonlIumuo\nfZ656xO2p0eYdzY9lWjg5Iu9EORvzcKm/NoGW6jd2cwdnjjN3KQ6TtGMKXvi\ns3jpSovuaLgJFB0Vz/DzqO1lbn/Pjf7S2yAb3shMoculZ8FM7O8Z+KAcjxC6\nuuDEsaobHOCY1IyrWOfWf4iLYJ+ZjhjZPZnl7EyLT49rLKKTxySHbbv2V+Gb\nGRb5dDOmIt/uLPOzuYdHizlWs7CdCIAQCn11GTBwwCT3lQdguk7uzEDbW+B7\nZGTjVvYzdY58GJvuYJeh8XVmeDmQzUGgX93mYFZsu4AtaHBn5kBQmNzP1jUT\nT+DOS8mXvgpo2cQpDBgkJB+X9f/gvE9UUlgpI+7a9fJ4lV77y7Qz9yN0Gd/7\nuCEK2+XCRtecO2PIp+GeThh6YhQ5r4mJmpwFrAhctEDoYgN7AaEDdBS2bIPL\nylP3RI41UimtybmhYOBT3E9tAUjYvo9+wzMmd9oZqmp3TmTloz7eIP+3nIrm\nlI9b4sE9+YF6vkNMyYobCU4CAZAb5k2aFWmVk3ncADWGol7gHlo3HZUDUVwl\n3XNRsraxsndYKsrPhEMBv8VTyMEQVyda7/3bEBfl5Oa+OVE+w3bJigtPstTw\nZyz/\r\n=ECtv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^4.0.2","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^1.1.1","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^1.1.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_1.1.1_1554754457718_0.8791475073689383","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@material/drawer","version":"2.0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@2.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"874f50565a48b2af3e97aea6327a05e55b8ae5b1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-2.0.0.tgz","fileCount":38,"integrity":"sha512-1ZJFKYtxsB5ZLr5w3Q0joTz6Q9LM89fIiVl4ciMU3sdUN2UL2+T77wPekKFxycE7ll2n2JNzBKlmZHHI2NIA0g==","signatures":[{"sig":"MEUCIQCYws0v2wArXfvcv8P9OEN/kFxBem/REb6Yn6osl3b9ygIgdwQSYkJ6Z4sDWOyWDHXvGSYsvOgLKCDYhIkTHekno4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":769091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxzcLCRA9TVsSAnZWagAAtxcP/2fjyDQBLe3CXRcNWxEf\n8a4AUB1jprsDLSV/ji9Bw4ub0xXxiRVJNZ9w00hJ5C/srKSGAT8yMIa1Dddo\nstbm8j6Hv09DmrFMCPtEVNVbo3KX9CZlbF5tSdEb1f3/l5er6fadxiRdBdcY\nE3521EGaRg3Mpba717o6IemwUDcmYT3/LV3eykuU+wn7I0OPGl4UmA//PjKq\niKWjD05FIFraIhKHgucpnI9LZBLg+4lIlmnXQrbRIcL8I+qE3722upHHCye8\nRXPGNz7FYjBesWy0EsUyF/Kd+bQcEtaym66uXS8D5ZvY9SBNOjM0cblb7Y9H\nYpk4VZYdEwUyfdvevU345dZ6JniOa0Xg4meG3x66bXzFGy6gq4Hz7En9usaS\nmDy6pBeTJSBi6Y28IXoYquQ3WUQCZc0kZWoRuMIEZqAl5NV/+wwlvfjQ6GAF\nIqSGKjpjBmAFbY0d/DleeAO4eIzeliNg25qsjcxYQvR70DS/0WawjvsDaoRH\njfOr+zJiJ5hcJUigwGeB5vRwxKvtAXgOcyVADoqYTTkyF1K2yoC5qOkid7uq\nS0H1vbg+nD8bFyVb6DaqwZr3NExKKH6drgbALzKNvkuqOxccXzT44bcp4kXq\nXr9Kmk7KyXO0N8RcrUEMbWc3GInWzWWginwccQgeWp0hdO5KutjJ+P07erSH\nUhcX\r\n=16c6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^2.0.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^2.0.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_2.0.0_1556559627133_0.02009085753830897","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@material/drawer","version":"2.1.1","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@2.1.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccdc3404bba60f3f72b153d04f9a8967c06a7df6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-2.1.1.tgz","fileCount":38,"integrity":"sha512-z0q2Kwb79ZMng4Kb7u2UgIxQJPNLcTq/Bj/J7EJlTlUPSMXe4N/geAhSFHyGBG/iXQupdQw5E2Wu7Fo2sfx7sg==","signatures":[{"sig":"MEQCIFXTd2rkUZhRRjA+fPxPJpKqYiiZzrptGHCgmNFq+3r1AiAMflCTJYIDCo8Xd95owcVAtR7yiJJBWcwAmQXixDNtpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":769091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1bQVCRA9TVsSAnZWagAArlEQAIi9IJSWWfu9v3P+xDo1\n34Z3m71BMfrdec57afg0OkeXIIl2vrlPyqsbyADwhBbQSyVYkNMGdET1sp/b\ndwwlb2q9VmAdFG/aXSBmLirLEhK8/EWauAZEFuL2+kyYia8hMYDV5O2j5iZr\nEBcloHVme1Hq/g1Fa6ZyOBj3fkURRA7VIvCv0V/OBagjwpVkUEV/jh3wBdOO\nx6SzaGIyqboVmByycGBfJ1sRjQqX/d+gKD68VxO+QHgEV+Nd0pd5uqH5kqD1\n2e7iDGyFkFkNaiMOilx2KjeaDAEGB72orBBKGphYmmqsio1DVKb35yPzB94K\nSFM54AsYh4I3BuuByZzs2VHUSrQ+3Op04Bj6nYQK8kai/KdRx8OOBwH/Yqa4\nsOrfB1kFuc8k1WQ3y2nvdatwL0x2CVfWdc1YbAdTEg2A49H3jcntZ4yOsny9\n5z0OjIiD5vLuiv0Y0yKomdMauPTqkPdLDwwsPqhTn/BHNDYziUbVBjP9M+qu\nErXRa1wakXPDL+EDACF7VXXOcwFKfYpqSjOa6LjUvxmBhF0aD8QbJiWlaTKB\npXyzg7mdGyv9GvoWx3fIjJoTzJfo0ceIGQa+13AK6sIakbaa/NiKRjGUlnlw\naBZ39xZlFVFnt5QsoQalj+o9CiotdfRsm07tUdu9z5SyFNsFzOBVAK7NLl8J\nSNU5\r\n=v4GR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^2.1.1","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^2.1.1","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_2.1.1_1557509140173_0.3857498590448083","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/drawer","version":"2.3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@2.3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be81ef24d21f77b2d716dbd8240c02c9dccce2c9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-2.3.0.tgz","fileCount":38,"integrity":"sha512-BIrRLkqUO2SLkSRPWtXNwF4ZFmP1NOYynNelPZOdHZOIa6HcgmXzCL5p7hInJ5MDar/xMTA84CSO6Vf1byQwHA==","signatures":[{"sig":"MEUCIQDEMSg5HqrEClkN/e22Ke1CCetZqtXJLzpIDtzjJtr+/AIgEfbv/rgd/mKrrN2KdI95IwbkHVm0wLzXJEhnPfqPwMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":771168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7ab/CRA9TVsSAnZWagAAdWEP/3UPm41lLnTowFKp0uNP\nejrexnQi74P15pOzlHoKvliKccc/D/RloSHJvMs7DqH7sGdrImTsb2ywZ0bz\n8YjSHJ/uFV34LYo6gFPLBFmUOYJxM+4DxwavTqvKIlFJc/O3OsU/VriV2NMD\n6MV6RjsCE5ezz/8Wto8mQVOKej4fRZUqmm1iQOVzRn6LlOf2GmhtWb0n4ikw\nXlkg5mB9kvK60uAHLJh7t069jpSDVGNP6Z8SZXR/oRSOIqHrjmaAykXUXf6P\nROkg9DEmwdhd/O+tKyQ6+DSshpi71V7GixExDL6gJzyiRLbEvCd1V+gQFigX\n5CLgfvaqhBL/wKAo2B7vsnxEI4B0KTd7hoBHTBF2hyOvjUblqBSBOvGhEGj3\nKcW4l3g3oc2vZuxOjY61WIL+sNY51WMvy+UkpOc6fLIGEtzh1OYAqBtCsQdg\n+DmoK9bwbyKmceXaZghAvVj6DRTC1byDWyb0knBRKY+z3kX1Y1hG/OdrSlDI\ni9EhtaGSPky4WnKqjJpDALXTo1osByn8YEBRWTuu/Vu4kaqVltY1KY3OA/q/\nVoKxD53AFLsB+Wc3LxdB4daq/vQpErXqmiNXICNl0gAygw8Sr4W/Zsmr8Uyf\nNepC2lYcZM4TVD4zmL8AFaakdcwlL7lLUl+RpZ2k6mLHg3Hppn3FwFSYhX+j\n/YBV\r\n=zrSP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^2.3.0","@material/shape":"^1.1.1","@material/theme":"^1.1.0","@material/ripple":"^2.3.0","@material/animation":"^1.0.0","@material/elevation":"^1.1.0","@material/typography":"^2.3.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_2.3.0_1559078654267_0.882253246423852","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/drawer","version":"3.0.0-alpha.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@3.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0deed36d01c168ac1995c2cdc560f7c9c2aa3b3d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-3.0.0-alpha.0.tgz","fileCount":39,"integrity":"sha512-Sf/nIctVBYMx2jFwpytCbHYa7wHhETvnBYXJtEkiVBfJIFT4jsltpQQiKFbB6vNWiwcoyO3Ar+/1XJhJ3uBArQ==","signatures":[{"sig":"MEYCIQD5KKpixVGabq3STQ7unwb5wTryx6D8ssV21sEld/z11AIhAJMJasMwVC89vCi6LMp0/C8vWIpYQe2D0jFomtTm0TbY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHp1CRA9TVsSAnZWagAAMJMP/A2CXhaVc9lQvP5w3GEz\n6BbnKjUh+DTBvba3RUJtVrjWiV6Qm0923L9QcGs4mUOreSVEJLBa1KRUu2d4\n3ezpwxqesj6jTQpL3vr3Z2IhqoQyOHN/6kCAnGhJoz1MuqgfdJrcJIkKA6hy\ndGyPySd0gM4diVBy6OWbc3sxWJdrOijMlKBG4VHyn5Uq9+gjTKZG5louvO0B\nmh4CP3EIJFLLPNfduXNT3U4y8nV1BNWaII4B9tNDnKwbYAJ2oe//EL3FR3P8\nRiyNQnXwdih2BvvXlTxZIunDBCwxglKstxmFdGNRyzQbNUkr7P7d3rrx81R+\neUdvgW/TXATXIUynm25Z/DcrhxY/jVCWhN78QqJwrvesYRLDnKGfiWQerJLd\n7Wlv02F4S5mrbLZWmyV6t/UOFS4LoHUv8pxZ6Q7MKSXgl7YNAzznqQj5bEUZ\nRseBlm5IUvc+HzZBGrp6G+jtY/3t6mpPgHClfeksHj90jE6YL2VUDstxEMZJ\nQTK5Z9q3gKer6+Gmxk7h622Jxskpb6aST1YjqrPVK1GecVLmkkqu2Nm2l1Ka\nn1RHdTZtRpg4Jntah8G/kgXQ35yWRGc0vADY8X2gkb4RlIcYF5PQ3QUF7SM/\nAkB14Er+WyeuCWK0SfoGrnwoMcy5/COVpJSkVjMsvwTO4xuv5f2cdBu7KT4q\nGvHq\r\n=Gj65\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## `MDCDrawer` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | Boolean | Proxies to the foundation's `open`/`close` methods. Also returns true if drawer is in the open position.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCDrawer:opened` | None | Emits when the navigation drawer has opened.\n`MDCDrawer:closed` | None | Emits when the navigation drawer has closed.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Navigation Drawer for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`hasClass(className: string) => boolean` | Returns true if the root element contains the given `className`.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`elementHasClass(element: !Element, className: string) => boolean` | Returns true if the an element contains the given class.\n`saveFocus() => void` | Saves the focus of currently active element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`notifyClose() => void` | Emits the `MDCDrawer:closed` event.\n`notifyOpen() => void` | Emits the `MDCDrawer:opened` event.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n\n### Foundations\n\n#### `MDCDismissibleDrawerFoundation`\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the drawer from the closed state.\n`close() => void` | Closes the drawer from the open state.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`handleKeydown(evt: Event) => void` | Handles the `keydown` event.\n`handleTransitionEnd(evt: Event) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n\n#### `MDCModalDrawerFoundation` (extends `MDCDismissibleDrawerFoundation`)\n\nMethod Signature | Description\n--- | ---\n`handleScrimClick() => void` | Handles click event on scrim.\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^3.0.0-alpha.0","@material/shape":"^3.0.0-alpha.0","@material/theme":"^3.0.0-alpha.0","@material/ripple":"^3.0.0-alpha.0","@material/animation":"^1.0.0","@material/elevation":"^3.0.0-alpha.0","@material/typography":"^3.0.0-alpha.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_3.0.0-alpha.0_1560312437141_0.18155903570513598","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/drawer","version":"3.0.0-alpha.1","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@3.0.0-alpha.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbe41d83aede6f1579b98de915e35dc720c6510f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-3.0.0-alpha.1.tgz","fileCount":39,"integrity":"sha512-QvnUe9i7Vc2wxEumhmf2EU8/msTlGX8gh4bVePJmDikyS/8BZzwcrbfpUnkZw+JG7bU0DHuaV/+Ut4CAbWzxgw==","signatures":[{"sig":"MEUCIQDZv4Z3ip0poF0ChfD/4xn7MYLYFsVdzGXm9YK/kQB2aAIgWURqkJCya6+COZ/an4I/eULxeGRR31zP4SihZC+rQYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":772213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUxKCRA9TVsSAnZWagAA5yIP/0kChrUUS+G7mOQ+kkYu\nh6MF2dO+BssM0vAqQJAclB+vSHrq7FPwyQSBxrFZT1C7lfKv7CqDUmlEUJPf\nFpcLC0xCyEqWGULRDj8oCuq8SUXl//NfIGiCadWENEKuy9XZhJiHa6E0vz6H\nU258WE4/oA3DhVx14VEBnH4Ps7dIqnIV6xXq97jUOtfN6egeoujxE6wF2JOc\nHFT0G8WGdssyqoV8iZr4ALothZsJexAYkkSWt+hMlzPAtsUL6IPJWhxdI9iy\n4jhETljuuLO6Tl1P1F9ozrskfiUJf2IeYP3dDQTaAjrLIYcsrKvePx6XEdxd\nMUkNuvZhnLAtKEBY/8dTrHkWudEpsp8H2tsnGIqH468CDc4NsVQX4Ty4UCms\nGHrqyTktN3gGvzqY9mxX1EyrKuafxm1hmxO1VMJ0I7GdqbOuVWf0CqpsSeVm\nLZ3f+LRmJQ46Nj0RblWLgloAgSgMgbvt7kxtG7ho3JONUwpGu4wzoJea+4jP\nXMZX8mkhx12tsbCThTzTO3eklru0JI1BQdLaiXLgclxwfD+aOsqkfge5pAMf\ndqvx3SjkQI4NK6tLNwmJLO09Fp5PecUIdU57Jfffx5OXj3/RmuTTi+NsB+Ht\n/zaBZd4F5tUB1HG+s2L9Ge/owRK64pOhzf0Cg1BS5rp7L33usLcI1T/rtFhw\n0yh0\r\n=7IGe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## `MDCDrawer` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | Boolean | Proxies to the foundation's `open`/`close` methods. Also returns true if drawer is in the open position.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCDrawer:opened` | None | Emits when the navigation drawer has opened.\n`MDCDrawer:closed` | None | Emits when the navigation drawer has closed.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Navigation Drawer for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`hasClass(className: string) => boolean` | Returns true if the root element contains the given `className`.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`elementHasClass(element: !Element, className: string) => boolean` | Returns true if the an element contains the given class.\n`saveFocus() => void` | Saves the focus of currently active element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`notifyClose() => void` | Emits the `MDCDrawer:closed` event.\n`notifyOpen() => void` | Emits the `MDCDrawer:opened` event.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n\n### Foundations\n\n#### `MDCDismissibleDrawerFoundation`\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the drawer from the closed state.\n`close() => void` | Closes the drawer from the open state.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`handleKeydown(evt: Event) => void` | Handles the `keydown` event.\n`handleTransitionEnd(evt: Event) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n\n#### `MDCModalDrawerFoundation` (extends `MDCDismissibleDrawerFoundation`)\n\nMethod Signature | Description\n--- | ---\n`handleScrimClick() => void` | Handles click event on scrim.\n","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/list":"^3.0.0-alpha.1","@material/shape":"^3.0.0-alpha.1","@material/theme":"^3.0.0-alpha.1","@material/ripple":"^3.0.0-alpha.1","@material/animation":"^1.0.0","@material/elevation":"^3.0.0-alpha.1","@material/typography":"^3.0.0-alpha.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_3.0.0-alpha.1_1560366154130_0.20175098606143216","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/drawer","version":"3.0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@3.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6b822311d2dde287a776fa8ca92beb2dc8ed218","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-3.0.0.tgz","fileCount":40,"integrity":"sha512-1bsfH9VG0uvF8bgveudggR2437r7hX0mMXB+gyYoJvsNRAc3xfh5RVjeI/+cd/pVciO9dIwfhzI8aCOx1iFyfw==","signatures":[{"sig":"MEQCIDR7N2P03qA5+bNJPL+VSMY981oIA2SCscaXSSnF3DC8AiBh60U42m3nT6iHnLM0j/lPjN5PZwhJMLv0zeO1iz+sLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":773293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/0CRA9TVsSAnZWagAACbQQAJsoleYbtTUu5BVfe4uz\n7ExEVesqzph4W86qfMYoT9mLyR5B6E7Gz7kZQXzn6UrE1Hb+OTeno0wMzNo7\nnUByHLuQz+4OAh5NReYM7diCpOrbpC74APg2+QxmaucW7sQpWdf1ZCgLSpT2\nzWB/meQQAMLBPjRslvjJ3PsHds0eQeiNzB6AN/z0Hu2ifJRGo9K5ubYjas7i\nGXteJHK6lb1lht8vvVeeCd7pjYhQOE4zPM2bNH33ce6S0Da8EfZZ0rt/wlbs\nYwC2pvTpHjz06/NuSh/QiKFVdRVB08Cicu9S3d6xLyU6dNLTNf6ACeaW6UsN\njl4zdcqMnhqphBAgY0aZErwCFoh8h+ujAj0wXp/1ZMMy+T0Ye7D1Fgmg4Bhy\nvi7NUj/LoMIQHo90tg5opoDMQJH/lToyR24HtCrZC8Q9cOVIVC6TkwxsNG70\nKk5b1K/3ui+LRax1ItJQTyvC8xhAQW3/UN04FtJXpoKk478G8oNsu0/0Jt/B\nzps18hFWy7hSSDG7b1XU2OqdB26C6bmuz2kCUo2a6wb/lnfrk1UfZLE0zzNl\nU8E2ICd2qfNnx55lchLkuyu8DGibO8J0AUvIjHu07Kl5n32ipqzt6l0V3CB0\nj7lXD4wjM4YKZN4S9LznfJ3hNVOttCXZzqh77B3M/iFxbnYZVqu2P2gHaBaC\nx7jq\r\n=EN31\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/list":"^3.0.0","@material/shape":"^3.0.0","@material/theme":"^3.0.0","@material/ripple":"^3.0.0","@material/animation":"^3.0.0","@material/elevation":"^3.0.0","@material/typography":"^3.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_3.0.0_1561501683537_0.14620306452886878","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/drawer","version":"3.1.0-alpha.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@3.1.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d352bf11f938026f305f0317061b012fdc82705","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-3.1.0-alpha.0.tgz","fileCount":39,"integrity":"sha512-ZRB5v+FhKnvCh8yFT7hXk0colzOTxVMXShDRpAt/9O4EGD7LZ1d0qhnGle6CGEj6VsKeTT4A92ziSEJu1W5IPA==","signatures":[{"sig":"MEUCIH0GFOgJpT7N5SQLFp9SYw3cI6y9RNmyjahoTU1lskOpAiEAzGTNTIROdecpb24eDSiZoBeaWdEI0+IAWjdQ1pdh4kY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":466909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdE6CRA9TVsSAnZWagAAL3sP+QGDn8JZyPshRzG3nIIq\nF5uyg+FuULiTHEe6nOOakUgtI0EOfSCnPZkH6+n4TE6+JdVz4Ft29k82sHLx\nlfxD1dhe6XAUYsX3TpSfJ/CJ2MTe0lOqfHf0ak4AtgukLDUAfAZVqjQhFiof\nMh8mbg2KIrUE2EPFVvyDZbXIW8oNcRZMYaHRDRSpKslegKTqdswk59Gs67ul\njg8mZAzPLq/1kdwWaiRb4Ywg00oNQN2IzMczinP4bHXvQ8xsDB55BK8lJYGS\nCH0eJ/XnkT9T9yFCWcx9pKRun3zfKnRDoIUuYRzHlJ00sL80J05Sh4tkht34\nd+7n2tULxC7fhmLT8wcMWDTZ+pMG9NRSJqdFxcFnRRTQUsK3ZHOiPALtyD3O\nplrT7es65IcUaTzNIAkin6/Q90n2wM1hIhX10TdcP0iEAGy6xtk4mRB0KENQ\nPEGsViYsDf8HGN6UUHrbT0EqvGY0GMWAamAHV/wiuNFb654wrRKRzMO8FeB0\nLf43IGKnW1F3jPvyPNXHD1jb96Gjmz5HM1h1Wr/GGH6Cg0pAm/Gd5yi0IRiE\n/4UpRMVAvr7ynh3AjIm6xvjK2jAjzZ62NMr4p1JUi0WT2ybM/Luu10txyqqg\nIEU2+umBZElC/0YDRA2CKxfUYaRH+Lu2jOlOWCMJk19km0LM6P+M5HwEnUgC\ntY9L\r\n=io9p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## `MDCDrawer` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`open` | Boolean | Proxies to the foundation's `open`/`close` methods. Also returns true if drawer is in the open position.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCDrawer:opened` | None | Emits when the navigation drawer has opened.\n`MDCDrawer:closed` | None | Emits when the navigation drawer has closed.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Navigation Drawer for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`hasClass(className: string) => boolean` | Returns true if the root element contains the given `className`.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`elementHasClass(element: !Element, className: string) => boolean` | Returns true if the an element contains the given class.\n`saveFocus() => void` | Saves the focus of currently active element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`notifyClose() => void` | Emits the `MDCDrawer:closed` event.\n`notifyOpen() => void` | Emits the `MDCDrawer:opened` event.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n\n### Foundations\n\n#### `MDCDismissibleDrawerFoundation`\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the drawer from the closed state.\n`close() => void` | Closes the drawer from the open state.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`handleKeydown(evt: Event) => void` | Handles the `keydown` event.\n`handleTransitionEnd(evt: Event) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n\n#### `MDCModalDrawerFoundation` (extends `MDCDismissibleDrawerFoundation`)\n\nMethod Signature | Description\n--- | ---\n`handleScrimClick() => void` | Handles click event on scrim.\n","gitHead":"42b485550d87a4c3328a07847b4070d15f09af8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/list":"^3.1.0-alpha.0","@material/shape":"^3.0.0","@material/theme":"^3.1.0-alpha.0","@material/ripple":"^3.1.0-alpha.0","@material/animation":"^3.0.0","@material/elevation":"^3.1.0-alpha.0","@material/typography":"^3.0.0","@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_3.1.0-alpha.0_1563283769593_0.6670788611963392","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/drawer","version":"3.1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@3.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88ead67a8336f79e24d2d67f6f85c1334b8fe6e6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-3.1.0.tgz","fileCount":39,"integrity":"sha512-CfM64bsjkQu3qw3MMkf+Kg1sbWMzinHH25y17kO4rlQQFpHCKZ/7yoLtM6ecuS5AKxN1EyHCW73xBN8HoBV3FA==","signatures":[{"sig":"MEUCIQCKDBh+60iLoQl4gdcLjSSxoUAUj9LyJXlJn4E1QOI9/wIgAQEeiUqKpql/CcRtgOOE/lcemcgLuJAmYOzpoFBhexM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":467265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjKSCRA9TVsSAnZWagAAPxkQAJfMhhc5lUiz3tlENl9O\nBR+7p38qIk5Y2IEBMHMnmHtEaR+lWky4OpCzQfQDfEobMgE30K+uloT6JwDM\n69hzoo+NDZiBKaHE1J6o6bL00x2G9iAcIH0qPYz455AN4+NdybmoirKaWmFZ\nlqOXQiYnFi8Mr5VI3KskEWQOC+xeAIbGFpi2UVj7OQbPzazThWz1s3CfrmTI\njCFRsO5bMqkBkUODgRZbF7ARzE3D+xtUPtLOFfxHdrpnbl5+AQxwPnA/u8l0\nZokQFZIAmTYHRxtiZ/JOlyaOCVlHAUX2bwroIeIq3bNdkyTHVmQj3Guh4qoq\n+SiZ49FXiLVUo8eGPCVnIPfWz8+6QwQEsTCJC3C2MqScYJ1Y/wY5v0EOuPh/\nArD0G8OwQeJAJF6LSWGAq8vz1hR0vkS5EtirtOn4Kw+FBJQdjuX5KZD2ZchG\n/ZK4bqL8l3eFgOVpldSbJq53470Ph8p/IT04YWqeVMDcJZZofYLPA0qfSG2o\nmBe6VuXrhc4ookcjjwZOqOUHS26djHILx++cmFCBW3xV3VfwIsAK5lQeFsuW\nHO+4UGWq0SDl9qfV0tEKch8hRwnunGL+hAlcxgpl7Rux2wizdzN1DWvRh3Zx\n+w6z8QD6+uDrVxsj/gCUugOkgxToO8IE1uIi5iwlmDuxvG8gLzUw6DyS7iFl\n/37N\r\n=wvYQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^3.1.0","@material/base":"^3.1.0","@material/list":"^3.1.0","@material/shape":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.1.0","@material/animation":"^3.1.0","@material/elevation":"^3.1.0","@material/typography":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_3.1.0_1563832977420_0.10725451860825475","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/drawer","version":"4.0.0-alpha.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e12181132d999ea2983da2066f64e2ea0c600b25","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-alpha.0.tgz","fileCount":39,"integrity":"sha512-iuYnRuEiuWmn0zG23hP9aujkspTC+NObiIFfargweTQYkBCV1cqBBrbSUpaOyFYDE1kG3T+Qtp8irXFhg3DdTQ==","signatures":[{"sig":"MEUCIDMG0iRNaoK3jx+m+r/UDTlIAbQgh4RdWoEl+QOVmEwhAiEA3tsGRB0SvZ+q0mH3M3HxPBmUAtGTt2YHvE6C1pHGV20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4oCRA9TVsSAnZWagAAx8UQAJqvSOu6R9cfK3vKLhb4\nLWLs3rlkF0NsAxmxtiDeo5NntRF++C4WHWfvCHUss7BD6Yk8zE8q4phRizYc\n5gUN4bxHDkxA35zHlxrT/zaDLqk4Pr0TZ92CVIirToJVBC3PwEuXi4Xyl+gd\n4mCoLVvfRQpafvoV8TjGl+5QQJ9NzR3FqxTT5HLsgm+a+E05KnwehdnimoVK\nQ4mnfTzKggSmZ9Q8+aEH9n/+8doO8dfckta/JjKhYpGOnq/nzmzQ2ox32nUA\nTCnHN+RISnsBFBu9IkXw6RSUMHeAr/oalLXWZ5S2MHkxjFSnrSzpbOhZMjzf\nWsBRQsBSKmy7iaTNzkL2d8s94OIDTKCXY+N21lUGvQVgOXSa0rmjGzKsntJP\n9zilSFEG5A4YKBz5RL3c77+W38yaWOq5+wGzOvUg/AqD1Re7EpnJR7ZZSDhG\nrXLzau877wACuTepO73Mr1K/n5+V73GEWYBAoehcZi33czDOBY3LojQvZr/h\nGfgj7aDEAzrAs5fsJB2FoEnsRBZH3Uvnbv6IuogQp5Omm+0QkVtyRCMdVd7Z\n+TfU7+gevD3gtTK0QBWKAJrcyzar3nB0o6NHEinE5a9qfUBiiW/ZsfmlTDeA\nKOLZHw2SjqrBp+dnU8oez1QQgtMdtaKBqLZno05TklDl91YhZasvJI4iyF3O\npJ3M\r\n=4EDX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^4.0.0-alpha.0","@material/base":"^4.0.0-alpha.0","@material/list":"^4.0.0-alpha.0","@material/shape":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/ripple":"^4.0.0-alpha.0","@material/animation":"^4.0.0-alpha.0","@material/elevation":"^4.0.0-alpha.0","@material/typography":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-alpha.0_1565212199493_0.8384092040703419","host":"s3://npm-registry-packages"}},"3.1.1":{"name":"@material/drawer","version":"3.1.1","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@3.1.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.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":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d7c2247cb51858aa240aa2d7718ce4b4c602ccc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-3.1.1.tgz","fileCount":39,"integrity":"sha512-OQeQdqo/eE9VbKpgD5YJQTQ7upGTmZONN4WAOuNXg3QV2fZ9y7Ca5+j/i+DSbXKoaYVd0flAxNlW41rP7gnCRw==","signatures":[{"sig":"MEUCIQDcLuHxioH8MnkbG1wUsU5YHJrpMb7DZUb50Jh/2JK/hQIgG3yJpXkLw4VTJtgVa+2iWejS8QwxMiqMUBLy9eCzQWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdU1tcCRA9TVsSAnZWagAAjRQP/0Pb7RW+SoinzWPbac+6\nAx9ju/yM+4SYEk1/qRLbG5JPy36QEtNbcpIoVk1GLvJ4oq+ahXp2Jim3lVE6\nuRD9di7o162Lwzm+9Kxdqo8xZeVM9FJjM0usAn/1XaX6BnR+D7EeNjn/RwMi\naFzM6Pr5BYQkBeG2b/n6I/WETQr+iUznPF4Q5ChDYhNG1Q4VzNQ8H3f1PML/\nz0Kt+hvi08a6G+r0IkORTGKqTBuYuC9jb1nnc0HdMXkr5QaQL+oBdVWn7Z/s\n+t8R08VdzRXZYzN12cD2RGMdl287fEim4Wc8SKMzdTECllS9rzKmXnSupyXC\nnhkt7QXzqB2H+eNNKIDUELYjnY4M2sdqkrKppg6OrxYIGvx07GHEBJqB0MA5\nM82tZkXlLVJZ1C3P5yLH9hn47irVTijbRg9rgre/KR4A/fVFHBXhfUUk7UZr\ngG8Pfzc4Uw3v4o4J1DWbywP/pjpcdK0nODzFXkxmaqFqfWvz2LVyJMFa2KQJ\nuYgb5V6HTEpencK6ogVPbrO70J9V0udpducJAsK3Ng7b3nH7LLu2oa8L9B0E\n7ZfmPqRPPfTq8bAT0nSjIXkmH90SZFiW/Ww2xXlcVcqzZqikPanc/VnYK5nX\n3yINGOf3MJh6zhnZ/Pv8XJLHSj7m2OS1kyrQ8bLkICqwICCxllJ6pgNI08/1\n5DMQ\r\n=J+ei\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","gitHead":"4a7d0aa41afb294e54c4aeae56558b1793416074","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^3.1.0","@material/base":"^3.1.0","@material/list":"^3.1.0","@material/shape":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.1.0","@material/animation":"^3.1.0","@material/elevation":"^3.1.0","@material/typography":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_3.1.1_1565743963916_0.3041620250257733","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/drawer","version":"4.0.0-canary.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bb175c6f429cfb0d0a4b632ceb9d3546f17c4ed","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.0.tgz","fileCount":39,"integrity":"sha512-KnRRQ0qjmBYi0mmygRHyQypVyChhdeULSgHxT+fnZZMtNJ6mZhvVWL8cufGUJqOP0gAYNOln7iau6pZPBPh3VQ==","signatures":[{"sig":"MEYCIQC2dj0GIUpARVLLAB3SPGfANUSAVyCjAwONWj2v66OWKAIhAMEeZgTdA+GAvjEKkm019CPgeh3s0DdDfOsBYTOtzNl/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJE3CRA9TVsSAnZWagAA+XwP/1zWKmbOi0Rw1glxsOjy\neReTingJrspZd4DuGE247GC9sf5THt53tOXiw5LVKQamSkIYxiYMK12mRcNz\njReOJ+DzztqO/4SsEIIgn85I0HfLwDsZP5tk2oOgNB2ws/ZN3HcAtEOy4T6M\nCduKOIlNgYuTCWSXPuzrsbyRsgLAr8dimM+CEu63sSkZ5bcka9IH+uX8GXQS\naolxSuZPDTJj9cgvewMDMxhspXFmiyewiBH8124T5W6FH0zxZ56SLH6Dmti1\nWm364RrIAwe2d6LVUT/oNq/gtG3X1c3cBeZtwF+eUFsr4VreAF2KzGXaZ/Ug\nXQBuBxAfN4XpqSzSOMEJcwAondAv10QSI0O0Kk/cxDufKWTCubIfMg6b5cZZ\nvwlkgrRGdzOzWa7Ho9i5bnpFHTJzXkXwUcfpOZ021uUf1rMEZ8BcrBWtQOHr\nPYXV/NGtqwU9dh2/lNmRso83wvCuUbVuuW9aB0Y85C2nUrSHrnVQzRT2ske8\nfkWL2athvMmIyTnbha4fD+wMhwWU7Y/pUulmmzWsBsuNLbTl3QGK9RtSD133\n9PZews93gll3+S1/O0Gnpj0R4BGnr2+GGLavekSlGiAb7BWbFKqseIiNkHNT\nK6rPoMhZESifnJxBdS5Nq/2dG+rK2STEs1jbBpLtWUEPNAoyPf7yPwPPH69x\ne/d6\r\n=ep0x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^4.0.0-canary.0","@material/base":"^4.0.0-canary.0","@material/list":"^4.0.0-canary.0","@material/shape":"^4.0.0-canary.0","@material/theme":"^4.0.0-canary.0","@material/ripple":"^4.0.0-canary.0","@material/animation":"^4.0.0-canary.0","@material/elevation":"^4.0.0-canary.0","@material/typography":"^4.0.0-canary.0","@material/feature-targeting":"^4.0.0-canary.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.0_1567658294502_0.31735476463054546","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/drawer","version":"4.0.0-canary.1","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.1","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6de823b87d93c8a7ac7c0a11d12dfd0b2e23c2a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.1.tgz","fileCount":39,"integrity":"sha512-KLE7JCITXMeXwahzLXYK9FCjQIYRubK7py6VhIugbCTltP1MzikVyu5gNIee+Whh8UW/ddxdkJvPhpTyoirlTw==","signatures":[{"sig":"MEQCIFnHPfAK5osUzGYs+kfiYkkUfi5afdTrNx8iTUWiX+nzAiBCHf0LvKcFJ0TvQw1HpFP0WxFOIppYC3i1o3vUkvsMsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":475773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQ0CRA9TVsSAnZWagAAtiUQAIAPPjYdURExSxd2MVkJ\n4ND14oiw4uHvLWE6wZ86rN+HcQGV91FX4ZoD+9T3T+ypt4nLq/NhqAGBugBS\nQbyg90t9ziJu2n3fvNegBmofK++mndsQDqGkOdG/wDbjT6FtMq3h2i2HseLh\n380qfdHAE0R0sfpSQ3IzLUaQAP9fPLTIAgBThsaDjfnAVlccHT2N35TfDJNd\n5vTEwwAcjrJAoU1MuvIv1kC9yTtBg/HdgIkHGmHGjhGTFiJKSHlQJ53Eu/wb\n4h8x03iVEnuKHoUnxWh4JJjTatIGvMH226cTqowvjPWD4o4lSdPnn5zyQRHd\n+AbkD0JxpFAmToAqOjjoPGVBh+1aMpz9D1rqdAodXFnMhf0Z/Hf/AjWi5JI3\n1tN+wAb3+xNaJYbvw8QXWoqKP1Jp56iWe3QUUvuzbofrBc7+Qx+oJc9aZ5YP\npbtJdp0L8YhUGUy3FUKwBWJ3/BOf6ohAjGuQU0mxN4WBdKNmlo93CNAGkrTv\nDUp51XflFiD5zuGsUHra6hvEAibNN/L6Ey9TCXpde+mWmJWQumSpgDana9IJ\n1INzK8Ay8uCJcgO0xtBmak7CYDXcl/ao08cJmUIbYMq51Fmno0gDss9JCkf5\n6ePaZTwnJNfoyVTbvnYPbSu3uTxQmg4biaZwpHY5QFQM1cld9/2rNKLDW//o\nFPoK\r\n=iSd3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^4.0.0-canary.1","@material/base":"^4.0.0-canary.1","@material/list":"^4.0.0-canary.1","@material/shape":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/ripple":"^4.0.0-canary.1","@material/animation":"^4.0.0-canary.1","@material/elevation":"^4.0.0-canary.1","@material/typography":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.1_1568060467560_0.8636416523397759","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/drawer","version":"3.2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@3.2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e810c182be7bedaf92c35586df9fb18eb0316057","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-3.2.0.tgz","fileCount":39,"integrity":"sha512-bhcnosiJfHRYy4oeMspE/HY2+Wt7HDtsyk47Tc4h14cc8ZgcKd0C96wuL7GJDrZX/zLPnxboQOg+ctXIpskO4w==","signatures":[{"sig":"MEQCIFfMYR69BjR7Zc/IAnDh8ZOdt/ny3uLSj4NcoYrcLYBfAiBv+XpJ76HZj7eitOa/Tp2Ua/G9QKoXAOjnJU6MqcLCRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder51CRA9TVsSAnZWagAAhhIQAKPzyeqj7o1M0qD2DFPk\nhYy95ihRVGdn1Kt4vpWawI8K7vjG4HOJ31xe+i+yAAuf8UnIYxRXmCcaz8X8\nXWwWmtKOTre9xlBhWGa0btnOWCly+OXptxvACVaWieYylsz99s2E3IR8niqk\ng718fA2KybaKDunn8hbdG31sSNJkJBsy6FADcXFnjiu4w6t37jM5X1oQTo2k\nB79v6CjQsAsegsomKubdPmle6yJKYThSGPYzk6crFRGxTn6a98hADSydEy4x\npt+xudNn3TV6W0BxEiYUCLIvQ0pIlxGgVpUVXncNwZU1zXciXq2807mA4l9u\n9ZgqE7XGM9ziUDrA1vGsnCT8xZzSBbKOuH9dIeR9gJXV47YqAUpkSVKpT2zu\nOHObrhU7VAgLMAjeVAHxUa+c72lf/MNLyOfRCIM9i+82Gw4oPYTsheOHCOow\nkIUcKs6H2xRm9H9gweY8auGkQcM5gjotneO3fF69pVjj1A0q1/GkWPMf6uuU\nFgywKsvbYScb+JWxBdE9fwWpPpjDaun8YrmCc13aVebKBBO33WeDRtgy9Pw6\n53VcHyIXTfY+flEN+oIt3QM6DHA0j1tzsuIo541v7cHEvlyrchPu1yxtqmb8\nPNLFmZf+GIoDC0/tBfaR7MGDeAYLMnv30tI6JRgJiY34IC8TpgZwkzw5YwFu\nXdGd\r\n=YFVI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^3.2.0","@material/base":"^3.1.0","@material/list":"^3.2.0","@material/shape":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.2.0","@material/animation":"^3.1.0","@material/elevation":"^3.1.0","@material/typography":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_3.2.0_1568325236365_0.32899715194994084","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/drawer","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.79d881baf.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"181414a56eaea4d1b197ddeee2e83df9a1011121","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.79d881baf.0.tgz","fileCount":39,"integrity":"sha512-0R5vFTKvT3KjHxHA9krAXoiK1yVe5DWgkQf5IWWKaZVCT1dbzB7QzFdCd/MrjzWy63jxb7vJ6ZqPdIoOMr+IZw==","signatures":[{"sig":"MEYCIQCDOEMvszBo9o1R/V2OlpioPr1Mb+FNjraWYhAF/mhF8gIhANCvX667BHFaATAyGSsd9+FFnE7lnecGgiZO+o/NQ/c+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev1CCRA9TVsSAnZWagAA9LQP/0RfCwDR57Z06rism0N8\nThfHnIKuNQcGxFOm1ZuzwT2ahyn/o+KAZYTBiJbZKZBr9y+mclmg1Yd0BXLl\n7+LYCq2RxDcT19+KMVdrbQA24NLjKuLri1IhBT63N8/hTbrpo8mEOVEAn/qX\nxMby/P5oPeBcvffHplCoXqDhlTBLnuFYfKOlMUEN7rAuY6CDPFIpTE8fvqan\nEyhYAwYmTvEtWIvtEIEr/ZeVSGrBhypOfdsqIvxGds56OmZK9RjGoZ3pexT0\nHKOAA8noh0jFPxM1A6ddhFaypYIdRxc0/pc7CzP+Yd/nFKW2Uky1IZrzQjbv\nFi2B4RBY4/B++J/NW0o2jM5VPI13KEgOdg4HCWtXeAC6z+ahBr38zn1AhqhK\nt0jci3pqLURhXS7LjWSMS7sfKu1zCvJpE+UtigQoncLDgRmiffX38Yq+uJU9\nFXI73l6PB0rTnsfBWJ6T2X5d2dIeYEmLHozgB6RwFfWOPSLk7w4T71XvM4+Y\nmNaa4W3Toq67ZwrC/jjrsHiw3gkg2fG9676WqJgvan6tl+VO9F/HYkkXRTrH\nCBn+kLGVGSzMerwREvQEJs60mOjvtQzgEunxTJuI8AfY1ifOp6XGlLcPw1En\nq1ptppnfae36raZA51HX80nd283YIIxySi2dsD4nz3OQpHSpkZY+9TA6vGaY\nML1e\r\n=dj/X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^4.0.0-canary.79d881baf.0","@material/base":"^4.0.0-canary.79d881baf.0","@material/list":"^4.0.0-canary.79d881baf.0","@material/shape":"^4.0.0-canary.79d881baf.0","@material/theme":"^4.0.0-canary.79d881baf.0","@material/ripple":"^4.0.0-canary.79d881baf.0","@material/animation":"^4.0.0-canary.79d881baf.0","@material/elevation":"^4.0.0-canary.79d881baf.0","@material/typography":"^4.0.0-canary.79d881baf.0","@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.79d881baf.0_1568341314199_0.6283478804061138","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/drawer","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.e851d4f40.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b248a4edf89a6286f857cf3fc067789724fed1f6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.e851d4f40.0.tgz","fileCount":39,"integrity":"sha512-7xkYvwdAgwlzBuNuaPEPTnVEHwkTOm0uWkiRHEhXK15MvPngS+Udwc2bpkOQpnPpEdSEiMipNyK8pQcBlBux9g==","signatures":[{"sig":"MEQCIAWuikJW9erlCTHCR+vXDje10FLSK2t1KTwKosxFXKjRAiAgswaflU/7GbRgP5GOyI6rKuswR8LTToUS+NZJ1xd0dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexYQCRA9TVsSAnZWagAASlkQAKBggBHs3cy+t+zljDAT\nksCk/M0Jb3kFTeC48KtTdqCXd7OF0ccltVF4MEBsvdFLLEiA2zCVDoQk9BiR\n0ltAnhe4/r9T+tjTWJ2yGK5lYX5djYT8HK/+q7EWOUWeXTDKfeHVuukOnUSO\nJpYAKRF1zK6gj1LoPtRyrU+DTCD17hcZY6VjSqjuGmPqft8a0Og5o57wyIxM\n+a3DcFETVLUfFO87C3/fgeyj+ErGNC5gnYWAH6WcKxEAgbqrvdJSx0VusNw4\nJBhEy1wxF9RhTa+sQH6mv/URICrO6ZcZugU5rIv8WOcb/4HPoVpZ5iUq5g2q\nKOw8u+m+5vRTBCpu1sm+zIWPkUoDN1fqb3L5G3GsSD4ani5g0dXXiFYSapeT\n09Gd/Osi3vxpLCWonunGaNhbJcVG7PUm/mrKuxWR73xNnhsCKNOKtF93NtgS\n/YFAMQZlg2OkcnM68GiagnruufJxDPiwUtLkGzFwsGLLkRS69PjAReWVok1x\nH0ZKW1LPT1OxbMfqbL/JAYXnPydSxYiA+MW2S/d8sTvuRUSvYSRsvAhRkoxC\nwIXcaKddPPYX1Z3CniX43GHjR7zTX0toC5CBSW1oJyC8pLVTo1FWYSlzGLYi\npQK9DVfxyBvDoWUfNcpGyI4AnDGF90XKn2KxTBT1ryP0XRojsOW3EUTKCDFO\n3nmx\r\n=7JOh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^4.0.0-canary.e851d4f40.0","@material/base":"^4.0.0-canary.e851d4f40.0","@material/list":"^4.0.0-canary.e851d4f40.0","@material/shape":"^4.0.0-canary.e851d4f40.0","@material/theme":"^4.0.0-canary.e851d4f40.0","@material/ripple":"^4.0.0-canary.e851d4f40.0","@material/animation":"^4.0.0-canary.e851d4f40.0","@material/elevation":"^4.0.0-canary.e851d4f40.0","@material/typography":"^4.0.0-canary.e851d4f40.0","@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.e851d4f40.0_1568347663549_0.5712627042591323","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/drawer","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.905884690.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3587c16202582ffa341df075705daef7cb8e6e9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.905884690.0.tgz","fileCount":39,"integrity":"sha512-KXd/AreUQZ8Y9VSTYZAR40M7ITdAjBHhcsPgLMKzAiFMSlCW6j/S8ktetcU6KMmiaNQF0XWAJrIQTb43mvfwHA==","signatures":[{"sig":"MEUCIFelrLBxJKkIdV3J4LVXNyj7/DHK21BNRHxEQv+jLF0zAiEA1MQUfmp2vVYOdV0naM5p2KFLNFKwIce9usauX8NONeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB9SCRA9TVsSAnZWagAAunsP/3HNHqRPxWE+PVwaacPv\nq+1+qhbuD48doKu4hBQc5Wb2/tJQxv9nGWbrT14+LyEJU4MJETF+4YTyphjy\n1Qa3lZ6zMF9Blvioygw3tjanYYhNPquCSH4bzgf97mhaVp1WO/WhMj7Q031P\nWjGyS175j4pAZJF4lfqYeg3e1qY8HCo9T8tF2765XsVzLpg2ISPtbjFuN9hi\nA0vCGg0OBCYCg2dFNiVb2oxEu8nIzOMMHHwyh71UQEngZbGK2hnHMgB0vlNB\nir7ojlek3+EFa8vxJIxZnuKH5zjcTze8JDUCJYYOnQ8S5H2n8tFRldJbONyp\njds6GYJf1UKU47/vu0YcFCupTRk0ummAgUqmlWyMHH+dHdg2K2x2tTEKEaCl\niWe6VeyypZ+aazOt8jnCnRy60Tx+QN9Zjtu6SoIZtIyV6h8TAVcpNhKnB7zW\nU/4Pkr+ObAfLdRzaJU3YOvbv8kPuOHmGayVWbNH2EPZ6eM5at7UkKKy3PBKh\nZ6lii6cEPZwWyS/Rk2L2eJPXlRiQftqu6DipTaP9OpuDA+xwWuIiHSz/LAXf\nqR+xDy7PIIBNE6kGlrJpSdDoXvQMGAQwFjT20fniBC6aGzPxlQxkj/Thn6FM\nvL++lIa3N5+SicGzsEy0hxU0wqIJ2bSFwdnOsvQAB7tzoOjoHieKEihKQTZw\nMtGJ\r\n=pGk4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^4.0.0-canary.905884690.0","@material/base":"^4.0.0-canary.905884690.0","@material/list":"^4.0.0-canary.905884690.0","@material/shape":"^4.0.0-canary.905884690.0","@material/theme":"^4.0.0-canary.905884690.0","@material/ripple":"^4.0.0-canary.905884690.0","@material/animation":"^4.0.0-canary.905884690.0","@material/elevation":"^4.0.0-canary.905884690.0","@material/typography":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.905884690.0_1568677713878_0.5107513442319125","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/drawer","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.199534d61.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99b9bfd9e96f0571150eab70c5d71433bb560ef5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.199534d61.0.tgz","fileCount":39,"integrity":"sha512-0PXeT6m/e+GgyDdWfqbjHZUFevxyaOCZN+idXyR4ovJgDXvUYSBwUgFVQJp6f/5hbYXbo95eN6Bm2jC5CuDifQ==","signatures":[{"sig":"MEUCIE6MokdV0BrFmKV15VsTjfdMmrS6W9+479As817TV9KvAiEAi+510AEPU/vEjH9PxFCFZQdRAhfa7WJB+zO+X0/GDlo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlvNCRA9TVsSAnZWagAAtLkP/Rhx86SNDgfN1/0P5K2g\n7p/ZXwChfDU9hOFQdauvrytrDJ6K6Hu4n5A0r6y5I5xVfkfqLHgG9iazIP81\nAqYBTCc5e26Hna3PIgmY9F/mb3+O1CYsKVYO48tKsbTeZO+5q3HRNS7Mrl8E\nrtPt279N7rq++XUl5Bx8hTeWQ2Cz0MpRqMoGmRDdlYkCohWwP5uwvk6Lt5kF\nUjn3+fDwUxxjaf4pkkrDZMnKvfie2VTG9A5pmwLKDP0zcXtI22VhE5lahbQf\nbwsIYPM1SYumQkYi9EPmHS5adVqojGZuG6dHd/wa+jEymtpTBa1PEdNnGxhN\nVHGhR1DPjTEjYZuKgJ1bwiObTPXxL/g1IcdHfDnSP0fnSOdZky7QaXGK8KzN\nclV0qmq0Zc41Cpvpetox9hKSNGYKCXeTyarfGfulXAk1ornlznx3rw7iz79n\nbxmcFU+erHZIpzGrzeH96wFsMYsaqwEdN6JXVehX74HkmcpzgpSjOEuHT/H3\nqFSPWDzURU9OJY0ONKqyOcxkq5o2kZEzm8n9ULuhNDjPk/Xx6fpNWugRU1yy\nLBdVXEtkAm947tDyY1Y9J0DzRXXzzuHEAa5D4YkH0sYkF5VVs8/hTEiM74TT\nyEgV1EHB7xmnwkKUeYJ09OTSTIrchkmmKbvtHpunmiebwb0PpjziDShZ7Xa3\nMFYe\r\n=Be/W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^4.0.0-canary.199534d61.0","@material/base":"^4.0.0-canary.199534d61.0","@material/list":"^4.0.0-canary.199534d61.0","@material/shape":"^4.0.0-canary.199534d61.0","@material/theme":"^4.0.0-canary.199534d61.0","@material/ripple":"^4.0.0-canary.199534d61.0","@material/animation":"^4.0.0-canary.199534d61.0","@material/elevation":"^4.0.0-canary.199534d61.0","@material/typography":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.199534d61.0_1569610700826_0.40710061393148966","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/drawer","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.22d7ad2fb.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"916d58370cc60c7170e37571d3e0f122924533a6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":39,"integrity":"sha512-DCpgv1Lw/wiHOJSnqqVgSpyXEAarcbthgyxR+dep2H2pij4wglPbXUTw3/Y7o9dnDIkSOFvpUmigApvs/JXmpA==","signatures":[{"sig":"MEUCIQCeLRuTRfE19J9g3Yl2Vl8OBWrEi3BG2TdR7xPYTwshHwIgPrax8z0ydkbHM/43HAk+2w1U54Vee2my715b6VV32cE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphahCRA9TVsSAnZWagAAbPoQAJhbsoWiDrQDZJgTh2c4\n1BtT28CMOFTO0nGtxmP3Z3bx33Ksg4oFQ2KkOe65QpR8y1+nXODYSVDN+Ska\nEGVXp4neHzZm05c61XF73Ccm1jdNJ/RiswmViLSPs5mCSfY24ru2QcNHP5cC\nrulvMAjmWt4VVuyUlrGza9sH8Y7By5QKvxl6fQPgKsa3HW0JqXB+jcF47yyA\nEAGv3wDhVEu1NXuIlUU/YHN4nkLI+zuquApd9uan+VWJ6vZr3ziyU+vWSaMX\nf5nMmNo7x9xVBtLbxGzCENCALRapU9TbGz0EqTCSIsWF8h3eTF1+4ofD9st9\nJ0xP/M8k26cP2/Hn11WkkHw6ZYdxDlMTVpQL0LtopEyoZ7oUe/yPj9yJ5xEO\nO1kq0EPz6MmG9pRCUuZDaZUEFpQaF+8AW8UIXBGJ+rneRTFQfivfXJS934Bm\nJkxB2jjxCAxYPFvu3l++YMYi2bUJBqI0le1nNsfDPC9Ary5kzFDxEdigv/iO\nz1Zyb6GWU6XFT2++WNDvpcWNjcau2j8LZ/izgHGPfSczeUlKJw6Qz/fupbSM\n/mYiYCqqmC1oKz7+Nx3gxyKP/gofopDe7MvRjYxRq1cWyh+KfgK0AfIHPbmE\nW6p69WVqY/TDW6riQxa3yrVE2FCqu72JKemp28UYz5UWmQB/qjdjbCqGQYCI\nMI+I\r\n=yMWI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^4.0.0-canary.22d7ad2fb.0","@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/list":"^4.0.0-canary.22d7ad2fb.0","@material/shape":"^4.0.0-canary.22d7ad2fb.0","@material/theme":"^4.0.0-canary.22d7ad2fb.0","@material/ripple":"^4.0.0-canary.22d7ad2fb.0","@material/animation":"^4.0.0-canary.22d7ad2fb.0","@material/elevation":"^4.0.0-canary.22d7ad2fb.0","@material/typography":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.22d7ad2fb.0_1571165856952_0.2110179734580806","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/drawer","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.735147131.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6143dcf3e66f98fec9b570e170f5b6839913a9b4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.735147131.0.tgz","fileCount":39,"integrity":"sha512-1NSHDwIN1h7q+WbXQV+Gd/c1pX+F5bWk3mRbaK4zwfYUL85LSEq/VA4pd2qxItlRIwoeuUHG4RA9VnfrHbcUIQ==","signatures":[{"sig":"MEQCIHS87wB5DgkDvgg3dk2GCE+9m863eIAF2bU2fTqxD9RxAiBUmKkqkhm2PYU4eQk5BDrB7lI5g3xOJBzwMK4ybkdV9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":489822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEvCRA9TVsSAnZWagAAhiwQAJDxv8SmbxiDQrHfCt79\nG36gsD8CXDpRIVGQJjRmBLujHSyGv6e7sJH4A6vB9vmhey//sj9E8yjBGCKq\nq0nYtTJKQv3wlxChO+wJHhqjfZ+vGrS7/3e3ckSNUgI4rv0sFCpg/Ny0SBe9\nDBftp2YLmgH3H/VFrxbmtheSAlgQbwYiUdr9m2dGE92cgOJlW2yjuQj2Qb/T\nJgSbL9wtRqPSv4dxE6IAvf99fazWBCIHd/jXRItoc/2upmHuA5sdn7sVkLmC\nRHspPINHOPb482WBydX4+wlfHHNMIQDiGVVd1st99VnBo4dMvOYFgKFWF4ga\nlIpmAWrGdnfG8Dd5QX3j5nu26uiLANDSBsIG4FTjbFIQLdHi/5kOMtXPqx5W\nRIrLeLQK2RxMK6ZiLWXzGVHWjoOmOTdvQq/buv1fNc9y0rCndRVwdqAhQRqJ\n240PA3DYHbQNphiA/RG6A1CirJa81z7CTWUBUNLmzMoLUsVsa+7Y/oF9aDYI\nz6PkSQ3KXK6kQtXWIaDesncDQ9+yCeKAVfj1bdkkUpj/n2Xn2MhevRXcWaU+\n/sWIiddfynXU8WbZqk5fwXg4IoWwWKjSK7Qb5mFmOMoUsDyZEv7aICd/Wm6u\noX3PBBhU96NhWByLrQKpqe0JJU2UwjiOZLy9Pk/+nsaP86/bbxpSVmwdFEiT\nDi3l\r\n=K0MY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"4.0.0-canary.735147131.0","@material/base":"4.0.0-canary.735147131.0","@material/list":"4.0.0-canary.735147131.0","@material/shape":"4.0.0-canary.735147131.0","@material/theme":"4.0.0-canary.735147131.0","@material/ripple":"4.0.0-canary.735147131.0","@material/animation":"4.0.0-canary.735147131.0","@material/elevation":"4.0.0-canary.735147131.0","@material/typography":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.735147131.0_1571189038716_0.6928153774057169","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/drawer","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.062ade5c0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"209c13f257604741f8c1abfa59bb4e5b2f21907c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.062ade5c0.0.tgz","fileCount":39,"integrity":"sha512-jOk5i3BYTJHdEkqyWggN+JNCSDdbniq0iC+FvKhrNTclRnA4u+/RLPmkvZaNajcMbJ1D9808PRLIlK9ul/FQPg==","signatures":[{"sig":"MEUCIQDcbitwSb52f4W8nve9jbBfpeIX6jjhq6RfvfBnof59hQIgEnf/o6LVCx4Dtnt6gKa5Ntnb2GoKczuNcKZCfeIsX/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp72GCRA9TVsSAnZWagAAWy0QAJ5I20/vpWA+cD/fKx/Z\nfg6bySORT3NRGmyf0G28t6rAW+MmBmRAHE0m7hhp6z0fd2TuEXJj6pgoX4IH\nEnr70RyN4idD3QyKqiTPvMW4cvbbs4YDAuMcYYMKz60yjNm9M4own+IOXXpy\nPpq8RG9U9SO1lAOFOF3EYfEnFbNcVfiIYz3CnJ+kGy7V0/yGF7sbqxY9nRHf\ngA4NDz1OW/DnQK8BMrG3JN+Q+8Yoz3acuXr9R40RXZmrHOQnFu2wZ7UFOTyb\nXZ6yBINwkLSkauUMHMfZRlshpz5Sb1/YZe2Ai4rmFcb+bakUaqYB3QHFGTSq\nnABhpUcMCZDnRwyyUfzJgRv03ulHlVkfr0ix3Wb7uIBCKQ4kPDvQxruLgTRt\nTiQDtik0WwbEgALMSeHRLuG00QXfqjf4wRYnE2me0tEmUFef4z+AQuWpvEJX\nSd4Xz1tYC5eoXLnO9ULmA3R5Lw5VnqeBZWLhqLkAh4iSoU+7a+dW7T38SdqX\nuFKElSxwi1QuVbeFnxP7oIK3xDhmT/e9f2KKrkfQ01NbsHSpO85B0SHFbN09\n9ZEgyNE93Jkpff5aUxPr8mN6SNT6nwgT9c0HPUbzmC9llMbQiArXUvHYUjOd\nleA2ql4G3JOKpl9BpuX2+PMRk+lR1IhWimYr2zH8AavP7UnJ8Sd4XjqfnEek\nb5/j\r\n=SUDH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"4.0.0-canary.062ade5c0.0","@material/base":"4.0.0-canary.062ade5c0.0","@material/list":"4.0.0-canary.062ade5c0.0","@material/shape":"4.0.0-canary.062ade5c0.0","@material/theme":"4.0.0-canary.062ade5c0.0","@material/ripple":"4.0.0-canary.062ade5c0.0","@material/animation":"4.0.0-canary.062ade5c0.0","@material/elevation":"4.0.0-canary.062ade5c0.0","@material/typography":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.062ade5c0.0_1571274117931_0.7539034543503178","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/drawer","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.774ad4f8.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b62b216f4851d21bc752b5a245dccdb68a543972","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.774ad4f8.0.tgz","fileCount":39,"integrity":"sha512-AOmthLMZK8bH+drVfnkRR/pIhLpJdPGVZG/2rJB7+cSADkT/JbByaDOCZE+/jl+rA/Vlud4ST+L3cKXrBCRuZQ==","signatures":[{"sig":"MEUCIBFkIP3DxCq/Xzbzec8lVtreYuWOUbPteivbgjUSq0DlAiEA0hTn7yiFcLs6BBjPenykj5jQu9bXX4B2VKDiomoc13Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+h8CRA9TVsSAnZWagAAoroP/Ragmcb/Pd93cW0tVOkV\nhCiax7mU1+aT9fMGJ9RVsLsQra+rYLNH8/QdOYRXRZbx/7HqaGdps7y32H+Z\nCzzTMbstA1/q/dT1sWqivNBtSoGwG83UtedvQumSfXu2ezOX33HLSj8sEnRc\nis21jtuxEpDf0dCfeP0fhnHKnjbSYKZajZqhmcu2aRPfdaAP3lIAZsImoOKA\nz2oUszV2aOh/gBOw11Po3kKblS7agiOuGysOM9Ofe04NrznWDUoj/Kdk2kH4\noOSLofIwdfR0O/DYcmQbMvIymdFvJ7nsnfsIwDugheHGJFSEFWhW/MW9wLUd\nYYfWCO/KRQ5eFF6nErxImaafNUvyXCyYjJF1JWyTrhq4vIu0O067P1PkubB3\ni8ATE8vP7SYZF6Gudb17o4dAEXkMOFLRL+7tvZI8k0l89/Whn7r37btSDT3P\n1v0EqxaOvK5y4+CwU0Sxpz+3UZHc0mdFJInG68TGmtpypt3vEW6ObymPN8Aq\nOtKqqaWXuROuIa/vP6ovJvE3qljjw3IezQXAAr+27kxFUQVZV1g7zqOBAx2N\n9u19TUWXEow8SuTlcPaRNqVh/1cZVaR212fGEXISvBoepeSKgWkWikn46084\nxTIaa/VYdpwJtSpCqToo3h1NzS41b8o11ZlAgH6j/zfnuz76UHhEv3lUquj4\nAr3a\r\n=yu2X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"4.0.0-canary.774ad4f8.0","@material/base":"4.0.0-canary.774ad4f8.0","@material/list":"4.0.0-canary.774ad4f8.0","@material/shape":"4.0.0-canary.774ad4f8.0","@material/theme":"4.0.0-canary.774ad4f8.0","@material/ripple":"4.0.0-canary.774ad4f8.0","@material/animation":"4.0.0-canary.774ad4f8.0","@material/elevation":"4.0.0-canary.774ad4f8.0","@material/typography":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.774ad4f8.0_1571285116151_0.28513963209784965","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/drawer","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.5916d18c.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7657803bc745569f12518a15b6bb72b777d70b6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.5916d18c.0.tgz","fileCount":39,"integrity":"sha512-IEcWBhVL/M0fJ/bCD7zUxETnBifFRuheGDuZfZSaZ1I0w6TVgr40Rc6X8Myvd8TZtA+jDYeU7v6Vps1t1uY1WQ==","signatures":[{"sig":"MEUCIQDV7qO2rXR2uEN1uCM0zgBELX4freIJ7+tGcv4OgtAZMQIgD4wb9y3P7ga+T3rL1Ey7CBZix+oP95wuLYkMvfIzElg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvwCRA9TVsSAnZWagAA0k4P/1pKBnyaS/irIXZwphky\nC98F39oNvI+mBl6DeHHOfE1DnAtZe/57yPv1JoAij9p0o/aa9i8t87OUa84T\nWmyNPUGdAnlPSLJBVQB8TmLGUHhQA72lAcrw3IbTDEGlIHmAQ+2xRc4OS9bk\nSK6V+rl5EfWgDE1fg/h5aN+QazbvT6gX5X7l6sBewmpr9W196hsFoXCC09zm\n/mhFZgIL33A7PILAVd8GOv6fjPv1HS31MhMyrd2R3R6mqkm1t9Oj8ys6la63\njNQ3siL17mcxJw3T7IkdQdfpBCZAWDn+yAewrw2hrRzKNoeiQ5ahHM4c5+fC\nRwnaTG9r7g674m6Jr0lDYraJW8A0nFMy1CgGsHr2sYZ0/bmlubHbi3968iM/\nSqQeBLWYfFoRBHMA0NlWwHeAFMlLExZNIku+5yCnq0v3zMkxAoGjhVnS7lyJ\nEKzBE9ZdW4LmLZxl8UmXMHvpBKxCs2U6Bf50eDKg+yN5zW61GrXG0e1glr3a\neMgT+5I6w6vHUIheVilwNSWPgRxWfaz85ApmoFHKIYkjsh6Fr+bWBWZkhpEV\nkm951b/TQ/iHzi5D4ZJRl2Bg43IamP3m67+1rYkrO2IbZta3L1876Bg4RTTs\nlCoSE8igef7kylypP+KjOiqfVqbIJQ16w5zjksqULLgm+/acfXQqhoL7PtRW\nqMlo\r\n=IDLa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"4.0.0-canary.5916d18c.0","@material/base":"4.0.0-canary.5916d18c.0","@material/list":"4.0.0-canary.5916d18c.0","@material/shape":"4.0.0-canary.5916d18c.0","@material/theme":"4.0.0-canary.5916d18c.0","@material/ripple":"4.0.0-canary.5916d18c.0","@material/animation":"4.0.0-canary.5916d18c.0","@material/elevation":"4.0.0-canary.5916d18c.0","@material/typography":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.5916d18c.0_1571429360085_0.6036581750132739","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/drawer","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.d4141c95.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b9156125b5348258ff5cd694d8520d6704529a9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.d4141c95.0.tgz","fileCount":39,"integrity":"sha512-Xs48AmK6J5x5aQ2oQy76dmUcNVNQN9YUvoRQ4UO8nuq3r6ICd1SQJvTCl+Svpe3Hw1DbNdxs5fx2qhMstSL63A==","signatures":[{"sig":"MEYCIQCaDQclTyghuj051t1JXlKfmCSKVVEiZrELg18wNv4FFgIhAIRY1xHlJE2Vp3+8Lo9jRQwjYxHjpcrd623RIcjL0baq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCwCRA9TVsSAnZWagAAdCgP/jnBP1aWHV2epJZZF569\nbi3zmtWPzCdtHqul+Lwj+v/xDub8AW6UHgXzUbQhgrLOYxq9y7ZVdTjW4uFl\n9KlCSAm9k4eiTW4BPYXG8gDJT1/wcrKf3ggCXQpUfVybI/5i9daSiRZvhQZ2\nVJlX1oZ0X6H/R0Zbeul37/CVIgvARyMHKFrdgsPnp7mEIS00wq/470vDqGle\ngbsekZ/0jExibWuL1hIG/rsfIDdqpc0oXMrM4hqibfca0TPCukWRamm9yrWk\n3GWwrIbGEd/NohENJMbzUQcN4LFK65Jrr+wh7oDBdkdsRP0hkgsaDuSRNEb5\np/bRK7GJfh8vOdkPr0SXzN4fN0h7gwwmLOMdR0yBq53W3DJSQVzsv/vpRnlB\nuwK2Sl+FetCsPH3Sx1HtE1xsQl1jzCLW3iRfFQbUDJHnPgsJzKo+WIdzqaf2\njx24T8nPA5nAdmozy5dWQ9gYJhuvaIpFdwyNwnPiG4SI64BOqxaeU3nCIzzr\nh2YJct88oyl9jfbf5DUCmNSrm4z4qHQDu5+MtAF5dvQP9YVbJMrivG8gcZKe\n6ut3rkOOa99B8ojsqf11gAPV03E0q0T2hDD2p4c+ybKWvskYIDBaYq5P9syk\nJeQZnpQUeq6Vf6mXhgYxVkNL3MTZNz4T9PcTVFqs/4UaaI89T7G1sSVJTxbI\nTg/U\r\n=JZ8y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"4.0.0-canary.d4141c95.0","@material/base":"4.0.0-canary.d4141c95.0","@material/list":"4.0.0-canary.d4141c95.0","@material/shape":"4.0.0-canary.d4141c95.0","@material/theme":"4.0.0-canary.d4141c95.0","@material/ripple":"4.0.0-canary.d4141c95.0","@material/animation":"4.0.0-canary.d4141c95.0","@material/elevation":"4.0.0-canary.d4141c95.0","@material/typography":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.d4141c95.0_1571881136141_0.3039141260229101","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/drawer","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.2b878b3e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f0c7d665300f58f19bc542fa3a892aa010ccbf1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.2b878b3e.0.tgz","fileCount":39,"integrity":"sha512-38wWNF+xKITVkc/rZCMjWymHfCQNW8Xng3j8hrnEELE9vqeusPxAyPtfS7sd8P9U6DlKhYRNv8mmITikYOqRDg==","signatures":[{"sig":"MEYCIQC8lYRAg9XBP5T4NSCspbDPe3SKQGXOhrQamSpQgNf1HgIhAInX9PIuqyAzgHhJnCHs9uiDrCn6FLdMFubIE55fmDqg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslnUCRA9TVsSAnZWagAARF8QAIkvhsIjxQBU0lWrmfoO\noMoO9eVIpcQXdGk4fD3orf/KlwbWZ/Ss0RXAsqPlVX1/JliF0XnvW7whyQ4l\nxkgjIj5DIBUeEkuQTm1tUTeUCJyO6EBkDmsdtkqJ6SJbj9t5fNmNoVedY11B\n0RFIKWDK+TRj5MA2+C+jJHHrUDr8diG7WbYaN8sg2bKlPYBX0Hq/wGKbwEIW\navuF4Kxb79aLawB3pevEjjWPNYWk5G+/Xrl82LfkHDeql+XJfTro3yPtF9ed\nyA6cvIDI50FZYReCy3NTg+Xl0G9oi6UAkKW0Qxic8bYWqO4VtrDedvmNO+bI\nNJBPRsnm/Fq9fuJlGbjHwJZj/2+9ShoTvNy7zyvMOR6y0U4yoUQt1Lh64zih\ny3uEZ4vgTdRn85ArQ6ZZB9EYG9Z7VDV80TsGEXd/F6h9b9Ifk9Xmh6VLjsvL\nU4/jbhCPse3LuCO7jcRVoOWhOk1jLsspKg8t1JXJMAl1AQVezqxuq2Eij5gC\n1nm51KuwsMrn2ZB7eR/2XO4+pQKLL30bYg3fjmE1Qx1pXVWGUetJ6p87w6GV\nP8tkJHEAs6fbl3luviSaZlojGW1buFsXvdKkI1m9hZG3URKynXIZcarGBZ8h\nh94zRilVxGvEQqE/yIjhsktv2HDx76CVHc1eYMaRbe8wPjpRAID6S/yOGSx8\n4TGB\r\n=/Aiv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"4.0.0-canary.2b878b3e.0","@material/base":"4.0.0-canary.2b878b3e.0","@material/list":"4.0.0-canary.2b878b3e.0","@material/shape":"4.0.0-canary.2b878b3e.0","@material/theme":"4.0.0-canary.2b878b3e.0","@material/ripple":"4.0.0-canary.2b878b3e.0","@material/animation":"4.0.0-canary.2b878b3e.0","@material/elevation":"4.0.0-canary.2b878b3e.0","@material/typography":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.2b878b3e.0_1571969492267_0.3484099566749388","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/drawer","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.b06c0efe.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1c0ae664c368926a4dcf83525fb0d1b8e1025f8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.b06c0efe.0.tgz","fileCount":39,"integrity":"sha512-M3FLA5wdlfWbDji0uYqh/5VD+fRhhmC0ygtd+xDxEb7lP8G3+oXk8ZmR3SMSw3NHpdz2LkrEcpKTe3WiFEmmFQ==","signatures":[{"sig":"MEUCIQDNDmNxRXE38pKNfIJMyNPd9uvuh3BzdHMH513zFbx4KAIgZg7n/xGx/TMyjrwNDcPlkesB6tTLlQKaObYpSHF7Xzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LyCRA9TVsSAnZWagAAc+oP/19lPOa/Uu1dvgY7yWPF\nhNdPGrSzKdjutotJk/S/rqySsrT003a4J18crBk424FsMzt/EpExsySArQLv\nl1zFomGarYIHWmbCsfxU8lkR3ATkYP7GGKl874jF6vruOfcdYT0jT2ITTcQY\njqSLawXHsJF1wLu21NLy/iyikiQKIuJLG6tC5IiZJKP4ELlzQa2fTU14jkU4\njUID1squigPUtOi9P6CfYnMNcdktzLERxogx6O9lD7Irj6jtM/kyI4VQuai3\nR9cLtwUxZoHygZ6mlqKkuMa4wbAshz3psXm8WxiC+w9DLzlCdw2HbMFAs5aw\nusUkejFfbN/sZyJ2Sp3Rmo0LIqn6HmE0NrDWDl6itobvuo9gZ1jm1sexVcrR\npUw0mhVw2+e/W517KTlHXsDykjXTXQOZzU1nW2xeEcAkNCVGi+bjq73vHzbl\nZ97hB+mzNC0NoGaYTxBDhvQiNqExdsbjOW0u73fBFdyMJmLZsbLULhw9IDLG\nn9WRdtQuI1GTfvh93SdHopDWarp5UCaZwbA/fXN34c3D85D3ZKPUgWyTawK3\nkBzlJJVzy1snMaLpmoETjhF+rxs4nzhgT2anhuPoai+ojwiieZ/XeGugRCjf\nCeWPheqYthQO+lypLUSGK3pxe/YrWZddbe0gTyKoT9u2lb61NC/7+/WEMZT9\ncfYm\r\n=9mb3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"4.0.0-canary.b06c0efe.0","@material/base":"4.0.0-canary.b06c0efe.0","@material/list":"4.0.0-canary.b06c0efe.0","@material/shape":"4.0.0-canary.b06c0efe.0","@material/theme":"4.0.0-canary.b06c0efe.0","@material/ripple":"4.0.0-canary.b06c0efe.0","@material/animation":"4.0.0-canary.b06c0efe.0","@material/elevation":"4.0.0-canary.b06c0efe.0","@material/typography":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.b06c0efe.0_1572053745952_0.05389287411396815","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/drawer","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.01628efa.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c14f1c0acce64038ab97ac447ada4e262ae04e5b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.01628efa.0.tgz","fileCount":39,"integrity":"sha512-n7DrUmaNCQkojD/v9jAHVzTKTD17Wn5IyFk5lcuvk/4di44dWUXD4apUFSdKx971iHgfGYC/lIqPJg3x1meFsw==","signatures":[{"sig":"MEUCIFwszra+VAnlfHKwfmr5FPsd/MueIKIxe9mHS9gxRgkfAiEA9hzVvN16WAC9NqY/kGgMu+LUd3DkMEOILI8wCvTAyFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4HgCRA9TVsSAnZWagAAlZ0P/2KowLozWOuMV67Gi0Rt\nkSfQuDTm8Pc5e1e11PFt1rqU6sSdMGxLpsY0D8QnLA8Lw9ypm+WtM6Ey1n4t\nzWxK5TzAGNM8VHwlg2ucMO/C1GONhtd8l+0V51JrNQtNbU2zjGhotuNR35GH\ncOgrQrLN95K64Jng/Koc3mCPZd4FhafP6MMW+hlzm5ddqcji/g947oeXdXqR\ndUuuakL7Ku+dSDrl5bShW4kIcTFDkImy/yeE05npb6V9h67ESySeuCIWc7AV\nYOTjIIuiSQJ+sOjMrZVV7Ujc7yaNYehj1BYCgWSemvXmnczBYHmpVnSuIJ5X\nG7etbtH/4sdtDm80nxXnejLTMtw+y/+FJ0wIGcDTrSoZfT/hu06nE0iNKCQ3\nAeW8g1zN/cbufbEF/ZG6tDR6eroJOSrgqzHsDULqb/g3xHeS0Vcb5aUcR8L5\nqlS3RftbA1gvakoWAUmJeuZjHVc194umLm8XkStsm2/z1vR/rfshyBlcL9Jm\nvxn/9C3Hr1Vn/aO88Z38CmG+1JBg1LYwE8cWnZvdfygzA52BfDwuE0jJypDQ\n6la6UHclgjLSc8GrWrfuoO3GsPnd0wyUfq/oO5ZHFD23ggTHhHpZiUIzYl+c\nXYLbdfpl6g5NB8KRxoeVPziS6blACjtp7rsRkhDA9KO9gCYBc7PkyoX8SMDV\nSioX\r\n=zRH6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"4.0.0-canary.01628efa.0","@material/base":"4.0.0-canary.01628efa.0","@material/list":"4.0.0-canary.01628efa.0","@material/shape":"4.0.0-canary.01628efa.0","@material/theme":"4.0.0-canary.01628efa.0","@material/ripple":"4.0.0-canary.01628efa.0","@material/animation":"4.0.0-canary.01628efa.0","@material/elevation":"4.0.0-canary.01628efa.0","@material/typography":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.01628efa.0_1572307424406_0.6698036103191998","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/drawer","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.b5c6d66b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c17c43750f85eebcc69f0421b74fd055295cacf","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.b5c6d66b.0.tgz","fileCount":39,"integrity":"sha512-3vyNCCjkATcdWQIcQkJhNg6XgVeAepegee6cDDAyI3JqzM9RVAjSFxjREjtstsaowlasp8CY2VUPZ7PbWOjKgw==","signatures":[{"sig":"MEYCIQCenc9nOWrRJDGjoY1yWMG3aBBSA5t5mvfYAMMHfilOsAIhAI4maVkCvjvJgv/tZzCqpeZLBPCjp9OgGIZ0wc2mxVYb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH2QCRA9TVsSAnZWagAAA5cP+wTbu72ovx7/3qn/Zras\n+oJUeqG5g/+nMN+g0fzThAJwswczXhYq9Cbs7shmndKhvYwdrHImft+C+ncr\nsfDgSXutZC44zIUtsXfMmJtLrXgw9wPmq33r065K6cV/e0SKDl2/TpVFdK0U\n1ce3fDXQmEV70QsUzIiuFxqLRuCIlB3zq/3lzh+gla4battvlyS23JgErMme\nbizQdz85tIL+FT55yuL/BolpqUAYV+czofv1V/dPnd+GHdYQ6VPApaFBUOKo\nzTo9bM2IjI7SlWNWO3B/nra4v4YmZjFMJKnnOZ36gkgPhWzvHJtcEYX7jVb1\n5ZBZ0B22sA4fiu2T6rLc4uLxn5UogXSKh2ayxvyLibLvvkRaeCSgRFPWSFU2\nUMyJ6oMeEnKHf5xecTI2FV5Qxrq15fcz8kQw+Oj5Ayae1ExrNgYM13cKVcRx\nSGYati9UNhQdXThznmVSw59iuizyKbeAlvDlPmEJ227bq5tS1WZx4JsddV9u\n+hJscCbIdGCt8Mzz7ChM0HcM12/MNqqXUAxXihI9tOfHqwzxfayaXUGEEFyD\nAqcF0oXU9XNubfsmShlrwKNyyjTJpg6Ib9PsI9IvrfkycNzFNTfwtwg0i+ZJ\n4/wo2ZlI1B+U6vkrvrvhzYKZiY8IOJdY0ErWOsw6n4oZN7b9/it7ydB+VhL7\nYMcT\r\n=t8jJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"4.0.0-canary.b5c6d66b.0","@material/base":"4.0.0-canary.b5c6d66b.0","@material/list":"4.0.0-canary.b5c6d66b.0","@material/shape":"4.0.0-canary.b5c6d66b.0","@material/theme":"4.0.0-canary.b5c6d66b.0","@material/ripple":"4.0.0-canary.b5c6d66b.0","@material/animation":"4.0.0-canary.b5c6d66b.0","@material/elevation":"4.0.0-canary.b5c6d66b.0","@material/typography":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.b5c6d66b.0_1572371855590_0.5537181069466539","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/drawer","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.cdf858ea.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"050693bd9c3005dbc37ccce668f5b350d4f4cf12","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.cdf858ea.0.tgz","fileCount":39,"integrity":"sha512-xtg+DJzGuBb1d5XLZ7lJfxy4zKrklVAqhV8posSKDzw5tYl4LrBtAHWcoHlfLkva9ilx/zz1FGdKkUQZxFkawA==","signatures":[{"sig":"MEYCIQDuMs21SQ7KVZHeGW4cToUlhsut715QqusZhUCXnex2hQIhAJe7CPxMhV6qSipcqsO/vk1J19/qLBNr9ui0faP7Ybs5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHKFCRA9TVsSAnZWagAAKuQP/1YREAMo10b1MFiUsHs9\nfe3kd87UMqH/8SrWTWJ1H8wD4d0aHT76pyMKHYNaWvD6QmGfvkz5R2M3Glfm\nX/VWt86+VvH2pOxsbXsaExardraC//FwWxvFcy10IEnU1otV7yCEPUYlgam6\n6l+HCv5kR4vF1Zb/4RhSLJwpfOG2n8SclsxTKJtmmmR5cQlgWcTk6gsR3P7d\nbRpAO9z3UFqb9BMj19gf4nrrMbIWQan6MG5vS03yBdiYju6AKZfSseZ6zRH6\nN7p7xfDaKNs0g/KV1P6RRQqarhvJibzFmfQa0+F4NIW8X5g7DSQfcLe+ehcG\no6PEEaAHiMyXz60+24073xRMWAN5YoIwnSBCiqa1BrjaT+qSgfaa2iGiaisI\ndGjk27PMGn7tQgbnIgfSy9zhZ60yxfeVeTfoOkActgOMGrgHtPRR2wiz0UVB\nf35T0xX0KKdbrl7tD8wX2Qc+RWjHpwOyBY+29ULBVRr+BkQjz0zwcnipCsg1\nlh9XbVMIbnMxH4UodHRcjUEhoPTE2srIM/W1Ur9JpPovfxtkkb7N3e9H+8hS\npN0uEO8U4GJvFGLLEVj4X2aEPnUCTutqhq3gkLw0/sDihK/Zq1Fw5WgTk1Qs\nS28qBU2OiHc4QdEh7UfBJp8cH3teJ7A8/2+sCuLWJFh+llx84v+LcBBIFDM+\nckJG\r\n=7xEe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"4.0.0-canary.cdf858ea.0","@material/base":"4.0.0-canary.cdf858ea.0","@material/list":"4.0.0-canary.cdf858ea.0","@material/shape":"4.0.0-canary.cdf858ea.0","@material/theme":"4.0.0-canary.cdf858ea.0","@material/ripple":"4.0.0-canary.cdf858ea.0","@material/animation":"4.0.0-canary.cdf858ea.0","@material/elevation":"4.0.0-canary.cdf858ea.0","@material/typography":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.cdf858ea.0_1572631173402_0.240812939190024","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/drawer","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.719b57e1.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31ccabab1a3bf9e676f8af517eb9e66fc354d5c5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.719b57e1.0.tgz","fileCount":39,"integrity":"sha512-ZGDD1sXmYgj1XKjuErskzmPzQnSnQzrCsEGnXvnHKtvuea+Z0Qjuvp4sDBerj66cxUoxPYyo12p6DD8hQfOhZg==","signatures":[{"sig":"MEQCIDfIRVQIZX0lKMqEkx+WS9SCuwNAnJdQisCcGv45QeLqAiBh1e0Gr0tAM89PDzd8jIzwmkcr5DhtcQ4ci46H9HLfng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI9JCRA9TVsSAnZWagAAWiUQAImzO++5krdG96pT8Kr5\nTZQvlHMSNvNcqH+TG1aPM+jRSyEgNrULPfmksypxFj4xTCB/rOgVJOs6Xnjk\nISpwm5VwEq45APRunwQikkBA4fPlTErcWTDlSiGqWpdsNaYLrkR3dNQKLwns\n8QXBRHe+8WHvRPvrB+sjiP7/Lf8yDfBheVhlzHNBDTqwaVrr54NOM36Ez7pu\nQPR+zWyMvY3yl4PHGviEF1w4vuIoaqK6mD36KCK4lzFD02+QcdTjZ7WGdS3+\nWx9rpwDiHDCc8j5iFtZ3RpUSyWehaJj9fQVzec/UyKJuweLiZj+M3ZXqn7BO\n5jbANm2JK0DbzqbdnOeL/OAhn/APaJhAL1XmyiKo8k8w/I1nTX4W1+80jISw\neXysudlhVK27FvIdhKi98KXlSLTy6Gi3A+ApGX3qUOLLL3ETt8kyMHKDb3Ge\nQHMAYh83sp6bFzZDnBNJEvKC+r3D9fhQD1TlAurTvKR8I4ZmbbifX+866mGZ\n3YFBz//RGWdjd5xM3ZYh/YKN0Z0Pp0S1h8myqCySeDMnmhEcyKoZkBvBDppF\nloWkPu1bY9q5V+R8hxUJjYnSWeQb96yZrLnHMeloM3ptUwLU5gdf2V/UfvJv\nUAzqJWj05JA5efXiELqsos3ZDKLt6cdDX2sq1g7KaCnwVFgr7XtrQt3bm9CL\nkyKz\r\n=oHrY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"4.0.0-canary.719b57e1.0","@material/base":"4.0.0-canary.719b57e1.0","@material/list":"4.0.0-canary.719b57e1.0","@material/shape":"4.0.0-canary.719b57e1.0","@material/theme":"4.0.0-canary.719b57e1.0","@material/ripple":"4.0.0-canary.719b57e1.0","@material/animation":"4.0.0-canary.719b57e1.0","@material/elevation":"4.0.0-canary.719b57e1.0","@material/typography":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.719b57e1.0_1572638537139_0.19327895245930993","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/drawer","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.97cbbdc2.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9cbd8daca4a0e90ef212daf5fc7cf8d315aec8d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.97cbbdc2.0.tgz","fileCount":39,"integrity":"sha512-utVmcupT5C6lj70C7cLEK2K9/4DJtaomKukqgnWQMpwiwM2kvOUeblvIvH1yTbzfDFLQ/iWU+U0dUcbtYS9gwQ==","signatures":[{"sig":"MEUCID+2pmYgSfCLaOlj1OFTZvFFL7Z7k87oP2+eoyG5s8pVAiEAyieXR61LElKttVByImhn9Wwx5v07ckPXLntqmbCO0eM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJXECRA9TVsSAnZWagAAzsIP/RszNbm2HKsfUyv+VWdn\nHLHINaGLgP+hbt6CGid/BRO0luKxWvI/K3++qcTIKyCe7HeVI5oN0YBdYkUN\nH31L4VxpHqay2MauaEuU6ZXXnccrFuJcVHlVwnnsxyCVQbLR9ec/Z1lCrX/7\nsMugjQsZEwkQzT1HM7DrCzfLPLXeLQX8OMOCeVsThlI+TZNeUPl/SoaJvaEW\noYAVH9OvZT9166v4JpvQq01wmh+Su76BceP0XPkYbE9Z+lECfwgoK3niY8Wn\nmn/UmuKXhAu4C/sUyRup5j0B13T08z9RQOkK9AQ0tMIMP52kMWghvoNEn+Sq\nlM/1V/YWnXQJrcnyInGEONh6omH0gYYpKgPP6+qxMmepSmcol0nqABa2r/H3\ndiLJ02jPQDSVGvf1QSOFD8RBP3nnnGOOC9HMUJL9Ew+O4GQYv6vHrtGB1MIB\nD8JMVTzJhvz8hdT/v+fqC1+kOiFtnojRJa0TPaA+Hl67z63uX6lNiu4VRU87\n8NhitMBu0F9Onqw3GWs3I8N/yVpRVOOnijmNx4NnONXygzRMygjoZlCkNLzz\ne5pN9BimsOdWSQT/RZlM7uqEzGV+zyXcaL7SE97HMqaZY4YGvP7VnVT8T18o\nsu8IKy/aXT1GHgafIvEkF7bwNtb9Uz5HLaMAJ73Az3SlO+1z6cDuaKd5ES49\nECy+\r\n=vUqB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"4.0.0-canary.97cbbdc2.0","@material/base":"4.0.0-canary.97cbbdc2.0","@material/list":"4.0.0-canary.97cbbdc2.0","@material/shape":"4.0.0-canary.97cbbdc2.0","@material/theme":"4.0.0-canary.97cbbdc2.0","@material/ripple":"4.0.0-canary.97cbbdc2.0","@material/animation":"4.0.0-canary.97cbbdc2.0","@material/elevation":"4.0.0-canary.97cbbdc2.0","@material/typography":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.97cbbdc2.0_1572640195757_0.7619676668902291","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/drawer","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.8e36b3b7.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a680d67f947b20771bb31e4a3e6903061d9063e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.8e36b3b7.0.tgz","fileCount":39,"integrity":"sha512-3MzxqnxwEq2itwK82r4XkaERzQI3pNc0wp9hpBPQqXXdJzcTvGauvPRxsiZ2ZUPNW9PyJOtbpK3/kdQODPTZaA==","signatures":[{"sig":"MEUCIDvFQoMdx5+xZJ2demZw45dx0S7NnljBpb8IIOVnX2ogAiEA8KfzjFCA5cOheUjCIgiDvYLp8KBM6tegxaioDV9ud7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ1VCRA9TVsSAnZWagAAH2UQAIjOHXVEPyztsZrsg3Vl\n/ShO42Ds5RNcg0SKPI9AiyTe2SvgLUjX9no621Cmv0N0KjIvWLwteKIq0gy6\nF6CFpvYiSi7S5bSKX1axqH/ZjK1GrgoK/bZnaLj6yDl+KOifgYmpOx6dkE7p\ny15b+8YMrV3B7AxDzPp553nt8qju+900Wwp5BwC+jvSWIAgJbxocG6xOdxMH\nPvBnwEhrtRZqUBzlIOGLlnd4rjAGK5f02owyd8M07oHT1db3tOAZTjwQMfv3\naEsyeNbvFYFZKIIiWclae/Bh7iccpPC6RrEP2EBlqtTZKtfn6RUIqADUEVzv\nTsKqGmrOd3sJDAa9GjTU2/CxfaJn+HW+QNmHze0Voy25wuok7GiplzYLFFz5\ndvNDymJ+vy+fxJpBRWawx7dnejpNYAUdg3Ej55eSoGOIzRztI0fB6CUJG+C2\nMtyX7tC89m5U0bmFO8zQUgDG/4w7prHmcMrYU8j3Zr53SQIZ8UczVQYq6ZdJ\nF7b1lyTpzP7W7N+tfV+sH+42i/zIXU4WlU8vMuQ4tOEtarBgn7a7L3Ka7gCy\n70bDdHxWBVYXkqyJUhMj5EqBE4qdQMBI5dpnFJv7rVlIKmpU4KHRJkb6ncQc\nHoJ/CO/JEjQHXyWiQra0LJTtE497OqBvWQMq8At5x9/oTfJlApK+BeYDRe1N\np3ju\r\n=lfFP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"4.0.0-canary.8e36b3b7.0","@material/base":"4.0.0-canary.8e36b3b7.0","@material/list":"4.0.0-canary.8e36b3b7.0","@material/shape":"4.0.0-canary.8e36b3b7.0","@material/theme":"4.0.0-canary.8e36b3b7.0","@material/ripple":"4.0.0-canary.8e36b3b7.0","@material/animation":"4.0.0-canary.8e36b3b7.0","@material/elevation":"4.0.0-canary.8e36b3b7.0","@material/typography":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.8e36b3b7.0_1572642132963_0.19324271645756408","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/drawer","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0-canary.62d3a09b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"768a72a68f86f5430f866c23818897e1f66a6957","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0-canary.62d3a09b.0.tgz","fileCount":39,"integrity":"sha512-PKEyNDmqrZ5yLk+ZdPJLmrRO3bJLKrT5lTsXXofAdJ/MbxJnPGde9oOwdm8HkLVvs3SL+UyyTwE0iMdwsXnbYg==","signatures":[{"sig":"MEUCIQCoz7BBJzL29HnTwqFySlomwdSIOG1HuYRNlcA9QGfQrwIgVDEqVjWI2xa1nIPxS+0P0q+PQdVV1yPqU1/iEHmeVDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ+GCRA9TVsSAnZWagAArhQQAJd6OrameywJkDlGBTC0\nm0M8n2Ig9sV523hOX7bRqcCBoMsiIswsRjYCpW1uzg6cHR2Xg+MQmrGpl3Ep\nJGWF60QR8q/MVwqGWw8AxYXKtWY8Lh4V4XSx7FRQh+Hq2Ak1vqHY9MNoKbDE\nhz5weWs7EXfEDKEjsRImYQqRjgC4vOJyabXeLDB9pV6u+Bew7mJwLElxuISV\n9z/nJsC8g7lpDJGFeDsfpwlJq01Maa9vzKSn2flEgg3ppK0dQI7WuPgUoO7X\nuo15QnK1I3YbPALCnxDA/NXKPWxjtxrJcy6pDB/olTn1VcEdr35v4StzkeY4\nnuN0ljA2PsUH97H5TBsi/0lW8ZdvWM303cn+nznv3sDEEoNW08nopJE162ex\nhu23HHJCXtXyB+N/RL0kxeJEvrY/N+no4mILREL8u0g4KdsOlc/wGfPnVcTA\nke+2qxkgXAbeKQ81wK+J0LK7R1dS62n/23gMOPTFrHrze83RAf7qexMWAULT\nX/HaJ3azuSPoJh9NM4ydMiHU3Z8DrVcgo6EcOdO3Y8N3HgPJeXXcB/c1Iyr6\neiOIdMwXqVueBm0ckp/IwdLok0zFlUN6dS2qd5hPvu+WqsA+Alofn3/1NezA\nCemJgltem7HXDs8qkmrYJkngVjT9GBTR2/yrX514PDWVr3MtusrAZF6ZVwVR\nk+1r\r\n=R9Sp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"4.0.0-canary.62d3a09b.0","@material/base":"4.0.0-canary.62d3a09b.0","@material/list":"4.0.0-canary.62d3a09b.0","@material/shape":"4.0.0-canary.62d3a09b.0","@material/theme":"4.0.0-canary.62d3a09b.0","@material/ripple":"4.0.0-canary.62d3a09b.0","@material/animation":"4.0.0-canary.62d3a09b.0","@material/elevation":"4.0.0-canary.62d3a09b.0","@material/typography":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0-canary.62d3a09b.0_1572642694180_0.04211677392579816","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/drawer","version":"4.0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@4.0.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07d66e4170f6b802ef902248dbddb1693ead55f2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-4.0.0.tgz","fileCount":39,"integrity":"sha512-HjhE4KnP+bGC56AdD8H1FqMT5PjEuz0RvvEzsMrQC86CERsE9eu35+JdSHFsLT2qi8m8c8v9NicOVIP1QHNH+Q==","signatures":[{"sig":"MEQCIGTutIJJwZwvZFKT8C8jDsMTXGiKifiRi2Q0yNLaIomwAiBdn6+wpSBurXg/F3Cnhgka/7yGPVghhr5JAYi9oqw3jQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":490929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcb4CRA9TVsSAnZWagAAOz0P/26G9BiWUJt/la2oA9BR\nbHoyYNtA+3laurKAvOg5XbA19a7Tup5b8tO+sWRwbY7Mtfxdve9o7YqEoph8\nkYYALmcumRJ6t9KVt+xGnxk1O7NHDmWaX3jC/jUyz5qh4YD0x5VCzzLEKU++\nbqKeH+72HzHIldYpMUROMJ6DGOPMD8gJySygylFrBgWfDvTvWL+hgfOkl96Q\nW9n+pw02bVzVZ74eXtAl1skXU2G9kWFDW0Qy4e2A/Ig4xIPkmtZZ9uHOcWUy\nzRVRSEh5LcV9maKh8dzN0MJN1YaJYKXSV703zJ4uOwgZwoyN2EJnu7sQti6n\nfFowEFdNrhP2YtviaA6aLicIhtSDLrT5KsAXlh5czKAYjzJQEse3oBfjjonY\n+NsKEtdp82JxKCpUq7nx7uOD3o7S3iWyGDRnP+WMc39t8keemCX1JcthVPo/\nxAv+uryfaW31/sxIpGMjFrWAESnpYGgEzuSteGAJHFW7j0gH1TFi+fFZbWOH\n9JhJiHwDIKBnrp6vK4Tl0ntaskDb9ZCSGK4nYC2GR+zB0A4doamvkTqh3z1n\nmICpzG6zGZfzK1Km0E1mI67pLiBgS8vzs9tZCcQshdxmF9pcDIQCUYQs6uGU\nqvAFoS+S7/RcnKNcIuCBDK0FTsYA1B2XLbCpGAXJgZYcdIfx5dkgKry5zIxN\nOPaR\r\n=2YCW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"^4.0.0","@material/base":"^4.0.0","@material/list":"^4.0.0","@material/shape":"^4.0.0","@material/theme":"^4.0.0","@material/ripple":"^4.0.0","@material/animation":"^4.0.0","@material/elevation":"^4.0.0","@material/typography":"^4.0.0","@material/feature-targeting":"^4.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_4.0.0_1572718327525_0.5950327545036276","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/drawer","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.b5eb51e94.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8aab004cb88e4e68d5c155513ca2cb1095bdcee","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.b5eb51e94.0.tgz","fileCount":39,"integrity":"sha512-M2Hl+KsAjJP8Tdb7waCq30ZfPqx4Gb0L2NVgfkjYGJmTkAaeu5zYbcgmCBhcnTRy+/iifWGmpg0x2QgVTv6O+g==","signatures":[{"sig":"MEUCIQCgvOSWk1aIaQ+VIghwQjxJwSXb8jthxznLGxZJ3v9kHQIgUCNic3jlVsKwmiV2I+z2zS3oTLoRAnGX3veyyH+2jgY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGOyCRA9TVsSAnZWagAA7k8P/1HCOuP47cHyBegLrS56\nhV27FFR7GfyCCWrHjsi27Bc4yQAHz7XWmyZZMKIsIX3KCvQ0NECSEqCcL8HK\nQfElvA+6uYCrNNo/kCWVlyoQWnhP9BEe2uCrXF4wOVYSlYhhJ6VBrNwigtGc\npaLOPBI78pihAheFmqAzvW99tRFjDZjXJj3eJFD8N3EHcuyz3Z7tdkVAejVS\nApRRbPkqjmPHq/WocSN7CmCkcZN0J4f1rSsLADnMk6TAnyXMKBnO4tcEi2Yw\nV1aQ3AdCsGX5HdnvJSGul6NVR1ZyiDXMA4b8aGAZG+lNKh3mTK5srCoWr0yl\na77+1+KKsVMRl3yuIZaK0W3jkIa/hqOl3UcZ5oi1foF6IjUqOmK3oq00mmyk\n+2nhEAToK2138CdxpUhrzaUmsWDcl4uzKAOSNB2K7XCBONZ+//9E5pHZybsJ\nWLBka4A7JFh+ZYTNUOozjZEzvH6b1ovGIgg5PPmNrw6ptd+xgXwefx2El/bd\n7VR/GM8e5io5o9sjgd+Kepo2sEN3kqXIP0fQXKgwHNz8T8Lz55METOL7f8mv\ncQOCbFNHUStPEwLkMsaVr/yFXsmGKkIk6TcZcznDqjq2NEMClpOMtuKDNiqQ\nm1Bq4TV/MsXPBGEzmI/9TaINkgqnyE+m3PJvLcM/eN0DwB9rk2x4Lx+013KH\nxzpf\r\n=GWnK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.b5eb51e94.0","@material/base":"5.0.0-canary.b5eb51e94.0","@material/list":"5.0.0-canary.b5eb51e94.0","@material/shape":"5.0.0-canary.b5eb51e94.0","@material/theme":"5.0.0-canary.b5eb51e94.0","@material/ripple":"5.0.0-canary.b5eb51e94.0","@material/animation":"5.0.0-canary.b5eb51e94.0","@material/elevation":"5.0.0-canary.b5eb51e94.0","@material/typography":"5.0.0-canary.b5eb51e94.0","@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.b5eb51e94.0_1573151666271_0.6855813052904236","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/drawer","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.58500806e.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"439aa75357afe9b014849b210022b10f487926a5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.58500806e.0.tgz","fileCount":39,"integrity":"sha512-sH94PJfDgv5z7qm2MJHVOGDtbscIlmXVRuePTYMG7sFlYgeWwaAUWTz2MogsdJxuIndydeCUmoA7mMatLl9ccg==","signatures":[{"sig":"MEYCIQDGsL+u8A1qw9QanWttqxyfj7i/nGNbolPUihzW2p7TTAIhAL3lcK+kUkVBiLL9iKJgbn49/wdDWA+QHbNp+D2PGBDS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYt7CRA9TVsSAnZWagAAhzYP/Ak4Udz9llaigIevyCk1\nwnipTePK9ZjeKKvOOwAckydNWDZyXBWqjV724ETuDXjl9V98U/DYDNlQdWTo\nIoKxtfwiNUQhrdLlpKQEW9kwueaHWUhYr1rEfTNzc94IIEtWa8XYqUV0N0r+\nQYBjo3UHCOoC/E0P99BUUmcB9KlYE5hD0Q4O2+f5SS4QUshPs0joxAAfpdYI\nYzDluMA8OR6Tkei4aTJZ9l/o2bCdzDA66ARa1pZPFVnRmxrn8pzNSkXvtH0/\naubnSnT6irUGgwVeP6uwVmgUjznZ1v7tm/SamOa/TDqWNNLABM+BMT5soIFf\npDC2uc26p6RxkQ/CNEWYhiA2x0azkl7euc7U4R0kWOmJ58Xy/TduGTkb2icH\nW9GTFyyIGNaz0We6F+3HBxWzH2PZCKQvnHaUFNN95/NdYgKtrIY2De+ZHTj6\nksTlA4lsiBjtpTaux0NBaucMvuxXG2bAp4OEuzPjbRrxb0NibKgDIQMd5zWo\nlil6ZmzWTeN3tzlVPyZLtbxMgqCqSOarzUc2EVUYl2yOZNLIRobtUtbM0KV8\n5KxeqtvCObUO8Bg9tvlhY+PmFIYEEXtQ91j5DZttJzH4+oD3LkBqAHVrIJ8S\n3eBbzJWVKp7w6CbNuvDxwm7D2yZ4+QR78fh6D4k1OuyKMXkh4tzsaXvy9cw1\ntGw3\r\n=jJbA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.58500806e.0","@material/base":"5.0.0-canary.58500806e.0","@material/list":"5.0.0-canary.58500806e.0","@material/shape":"5.0.0-canary.58500806e.0","@material/theme":"5.0.0-canary.58500806e.0","@material/ripple":"5.0.0-canary.58500806e.0","@material/animation":"5.0.0-canary.58500806e.0","@material/elevation":"5.0.0-canary.58500806e.0","@material/typography":"5.0.0-canary.58500806e.0","@material/feature-targeting":"5.0.0-canary.58500806e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.58500806e.0_1573227386519_0.3221188702939348","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/drawer","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.66299b646.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b76b48149d462bd565a6e5a1662256ac4890e4f4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.66299b646.0.tgz","fileCount":39,"integrity":"sha512-Ipn9yKOGlUurTegtnR7PALoP/jzAgzJyQqyx4+fjA9GmPQk24Y4OLrOqs8D0VOqnOfsjLRa8wfDctl5JHUky9g==","signatures":[{"sig":"MEUCIQDJ9FcVhxn3heTVHHbHeWfsFuIywPDO30gZsprHjEW+0gIgFmZYSK0xpsSXWim0B2rqlV5yCopruZ32ayUeeR3hw8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdFNCRA9TVsSAnZWagAAL04P/R61Uh6NcUod0Y373ZyR\nh3RCHbvuMS/cujacbi6yOgqoUAjfbBQZ2huUEgGCebD7ykCXCM5VUWNIKQvM\nrVhMu0OdCyv5OiXggkWUWHqwMEiGi6/F3BN+7ODa4FK1jpQztv55DtZT7i2H\nenn6UYoe/OsFcAtJsFBj9RyhRckZPgByTO+WAQXZAVncPOERoeRZY0WLqMMq\nFvNZzZSqGvS7jFJRCou+uivYjF2oIlydZhXXbKHcndT5TbiWQYWV3gEmcFsB\nZ5TV/VHBisnnXEbboiZ/xa69N/BmRqnI/z9lOapGrGYjaUioK1Z/oVJHP5oY\n2hSI5SMSEYjNBQVId7TOq4uPMahtSwUvmW22IDg2TakH0nIAArzZa+ZQ+5e1\nZOZLKFB/FSNPOKvc/DJa/waH5m5AKqJ6i3c3LInz1m9kUw1Hn7bvKtJRhxYl\ns48/WL2yUQmSR2X3C0JOcDEZcjytlzMAPVXz5DNrgVvlwNdOe9onjpnoN8Hn\nkhu381DIfZ5SONe3DywGOPpqXAuoVm+8+trACmeI/EKbAzYCdIQqWqlruCDQ\n+N1kCTOD44SiISrHPcWqlZ4r86Qnv1aZG5kDa0CfNuddt/imeL+HEQM0dZYr\nEIuKR4mJWU7o5c3Myxc2OyMIyUPPCbrss5O94lQdU4v/lISkz1pD0HvTFrKh\nJJ+N\r\n=EXZp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.66299b646.0","@material/base":"5.0.0-canary.66299b646.0","@material/list":"5.0.0-canary.66299b646.0","@material/shape":"5.0.0-canary.66299b646.0","@material/theme":"5.0.0-canary.66299b646.0","@material/ripple":"5.0.0-canary.66299b646.0","@material/animation":"5.0.0-canary.66299b646.0","@material/elevation":"5.0.0-canary.66299b646.0","@material/typography":"5.0.0-canary.66299b646.0","@material/feature-targeting":"5.0.0-canary.66299b646.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.66299b646.0_1573245261271_0.1065844407407801","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/drawer","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.821871e04.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fb06ee218a94839f7fee25be069e1e6112450cf","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.821871e04.0.tgz","fileCount":39,"integrity":"sha512-ye8zIF4fsE6K5S+zc92Xx8HIc09malUzHj6mqBpF2MSqMakoVvu34ZrTWeVKiSDMmS0eij1rwb6CHZ2QpgfawA==","signatures":[{"sig":"MEQCIB1pWvJ1JALXq/tLDkJh0P6KFvZbEui/As6p9JB08HeYAiBAebI6dj0C/aQTmxD79EzzhiP0YqydeXfoaFph935aZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd4VCRA9TVsSAnZWagAALFsP/3v2rdnnKn3imUF/Kjn+\naitbEzA21ROC/XSenI2bKXsGpy95Tp4Z8fOd+nS3IioG5o6oBexvvcY/30z8\nOgktNotP3+sffw5Y3ESY8DlLQOTy27APgHEsADhTiSWcPffxS8kZmnA6JT3H\nN5w+wsSHtjLp6PuXyg4qZklE99c/3iv6ROQ2q4F+IGxPJ/ArcepMQpMDxmOz\nd0fVvpg7hjaNbZ6X9ZSqlfvIU3xQrlLsm1FUUM3AWSmBhCa5bSasWqcMYJen\npfcPvdfwwmyI0IEmPvay0WY4xCCfVWqpWlw6vBH4wkQ7eGdhOW7d5NZa254F\nXyMS6rYRCl9p3TKtFwJS/xEznLGVOLywp0IvOt9dnug/+z91XkqeU1ikgbfJ\n+L7GC4dENpZ3Qsy83Yqc73yF7QTML/aGoenF64zbihF37HJgXiDT2zGt9Nys\ngfb7MGYsY7usojNkWpIVmUTM0bF2Ug34Ib2T2OokG1LCXNOpHjPnglBCjCvx\n6jybxS6p4lce1C3bbqWEUUWw07wh7JL6V3AWGorRqZaPGDgS4e4Ek9cfihPP\nGmrI1595GaOCBmb2Cm/0/L2qTcdh8deokBVwCv6UF9amgfjCviXXa8OiAJY6\nSd3lUIf29aetCkvTYJiskTIE4d5SMAn9Rd3L9HemPmhhEb6PpJUURHfRFvgb\nO9Sh\r\n=67ev\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.821871e04.0","@material/base":"5.0.0-canary.821871e04.0","@material/list":"5.0.0-canary.821871e04.0","@material/shape":"5.0.0-canary.821871e04.0","@material/theme":"5.0.0-canary.821871e04.0","@material/ripple":"5.0.0-canary.821871e04.0","@material/animation":"5.0.0-canary.821871e04.0","@material/elevation":"5.0.0-canary.821871e04.0","@material/typography":"5.0.0-canary.821871e04.0","@material/feature-targeting":"5.0.0-canary.821871e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.821871e04.0_1573248532897_0.67518395792095","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/drawer","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.491fddc31.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1363e1b1b6a490fac30b1231feb57ff85fd2bf7d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.491fddc31.0.tgz","fileCount":39,"integrity":"sha512-MTurZ9tgr0v8NdRCXrX+IuHGZxGmGUHzKtivne95oplQ2SQu7J0nJjYQw7HejUfeaMOs9LejB7W7IjSlr1KNqg==","signatures":[{"sig":"MEUCIQCmI8rsD3vTMb1DyIlBxBZCBxfI+YNp89mbXDJnkQ7D3QIgAzlUD4f1qz5ySUbX9gr2lz/E3ZKomPOquQrRaPCSjdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxec9CRA9TVsSAnZWagAAqPcP/2Tu3HIWhu0vi743PwRh\n1G6Jc0JkiQbUMhhtV9CFJ/KWGHSnFcYwiKva6NMc51WwvnSEwL5LZRmqROOl\nBg/DnHFWD5H1uX5MbAjnCC/mpd/lM8YkxV3GHg5yUE1Z3XO610Lhe+DoHo3H\nf30LMg1sINxn3DIuoQFtthsYu2PJ6gTmQRI5O/Xv14xdeUvVAiFBWxq+fAfg\nMr2Iji2kWBhnRwMQvtl6nJD3i0q9jR+jehWkyysrvDjl1fGnEBkmtNBkwkwn\nQ1DjvlYx16uHpvT57jhlS9CMtY/iPbKVTHby/h8VAHsb3MerqPLtNpgirazD\nLs15r84uJFBfBYO6+rmd7E1pzywK3hu5k5KLjW4tFkUhwlbXwoObFc59da2m\nN9nb1BLdItRYf8VlSyJXcC1j3yVNuUN59Pllw+DqAc8VlTL0QJYs+/2V1swa\nQA5/QpgwgYLqkbJMdng7bAdvqHntXf1/G9E+uBnvwQrxVVH1YeyG5mniB9vD\nhGirxLOVmp9VmfV3ImCnHrzPysooFz0I/UISLm6AHT1rp5G2N21NTsfRZD6c\nDPqwu3eNFix+4J3/HBZD8K5DtpZiU4iWCclfHu4akhg4sbVSTrEcoR8fpnKs\nMlyV4vPWbJQL7N95VW6GL+x4+xOfjNvWku0AWF+nvE8zs8xQYs9FbuNYwk1b\nrO5U\r\n=enRw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.491fddc31.0","@material/base":"5.0.0-canary.491fddc31.0","@material/list":"5.0.0-canary.491fddc31.0","@material/shape":"5.0.0-canary.491fddc31.0","@material/theme":"5.0.0-canary.491fddc31.0","@material/ripple":"5.0.0-canary.491fddc31.0","@material/animation":"5.0.0-canary.491fddc31.0","@material/elevation":"5.0.0-canary.491fddc31.0","@material/typography":"5.0.0-canary.491fddc31.0","@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.491fddc31.0_1573250877350_0.06048346934104698","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/drawer","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.b0cecf145.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d99b2e3e075669bf6fab4b255ab2a6f14ff3551d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.b0cecf145.0.tgz","fileCount":39,"integrity":"sha512-1lR445w5d7s0U7Ew0Ads1eGGBXkgRECu3aMvd8AsjgsbKj5ocPi2h6ateG4SGB5EhqwvNFdL+kSAK0vqniX+9A==","signatures":[{"sig":"MEYCIQCCPIemJDZykorbDQoiQwpgBZmPPIRHlvaejHXoObOP8QIhAPq8XiEaY1Cq4u32cIOlXFZ4FPsGB4P51Mx61mb1I9Db","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwi0CRA9TVsSAnZWagAAc9MQAJ+8ueCh382KTHXhjehV\n+fdzU+qwg+ndzyw6ZoNThRD1hHRqeKwGcGBb8VkwGRxwJchm9jd70TWQCI4G\n/X9yOmKYrHADII1GvwJvfZFRsRoC2dLOzAiIxi3sJRcgyxF8+fP0FiESqDsk\njbIjih2zZhO5uI4R7BIUWf2840s9H5c9YoyuaRcDC8Mtxdok04fRgiAN0iq9\nW2dqGnyR74BfruXOXc6BVJL3i9Xov5t4WAtMXqCoLj/l5tSmY5I5FHtpWSrs\nv/1ewbnISttCVo07vPHCVXtz9KB8Qv1FVWd5MNp8oquNtiNq7AA6aI3IRYza\nUIVJBvj5gzu/c3BLrpm6Z1ipba8NNGut6e+gIYWUTrSdN2bazEImB7Gs23nr\nYf5KznTY4uZupA1HlXdNgy3M3zVJDj/EDPksUlqGXnk7xb0OQxqXLvGaHFjT\nwOXUE2bbRzdIMef2tr8MIUuON2bzVv+8pRVtE97mj55IjpcHw6OuUOh4woUz\nASXGIapqpncw4fpivqj7OE44XnleBYReMGOa/oZ0VjRyhHE/6njPHY9Q+gk9\nXwAE0api//7+Tc6u8WuIVgGyV3aAqIiUw89ChrPWJEgMU4EuQxvMuENdwbIj\niWiZanyfxNKHbF1XjG+j4mSiTvBpeDDxeH0Kn5T89EoSSpbjK6sc+oMqYPZU\nGevO\r\n=9CcA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.b0cecf145.0","@material/base":"5.0.0-canary.b0cecf145.0","@material/list":"5.0.0-canary.b0cecf145.0","@material/shape":"5.0.0-canary.b0cecf145.0","@material/theme":"5.0.0-canary.b0cecf145.0","@material/ripple":"5.0.0-canary.b0cecf145.0","@material/animation":"5.0.0-canary.b0cecf145.0","@material/elevation":"5.0.0-canary.b0cecf145.0","@material/typography":"5.0.0-canary.b0cecf145.0","@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.b0cecf145.0_1573324980229_0.5868011462952294","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/drawer","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.afe0dd1bc.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89c65820dffc1b0ac263b488820d77333dfe8c1b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":39,"integrity":"sha512-CLSDNRYIR3sbD7wcxAdHn48j5Ta9bz/pS2hmSNObRLFwjW9d3mLc3FHdbkI7O6knowtsxF4L5JAFBt7cgPVDcg==","signatures":[{"sig":"MEYCIQDv4cigfGTpeZZN1UviLk9hk9x3MQrUl04+NmpKmwV/pAIhALFd/cNksttc9GZPeVk4xOaIYVoo1mccNTFgXwKBrG8I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYByCRA9TVsSAnZWagAAmF4P/26RhuQEbzg8dv7MlZIO\njKGoHRtuTGP0yr1go/vc2xEi5lo/gGZC7KLWdkEU8d+iDruzDl4QSHlgtZkG\njiyR28kwdIhRAkzZD4Tx0y0MDF4pCTFTUFI5CmQ2/6jAJx1v20lFJfmvcrER\nGPSuGIEuejCpoFxK0Ce20brVzZALmf0iEEUesYSDWzd8tJ1NdL2ohJY11PZB\nGoWyJ1UGg/t58p47x9/fXayuXo+G0gPQA9wA+STxF0rx6UHxHx8hVNGHGAQd\nM1QMxEjsf3+q1pcV9vmNygp+d0DPKA26mSlFMm1e29b7ZvA/jvxJZozMnPnt\nI00ZuRhu7oFjvdRZktXtHqHU22Mh7PO7vYl2bnip4PjxcsaFccwRAOTqeIdO\nIoOg819MK9AeIFijK0T3KhvLhHe/lxhpWQzwAM/uHTz3cNmxPlD4aOQR6aUi\nFA3HZLDYlCoTfqwNl4TehB3am0i9Tb7QUHyKWxaXfh6Dvrz00RH2jp7xW3km\nrfR79xnxZ7VUX1MHK3aydh18NHejMcNg8Z3DVSyAK+Ri/LFBmrxg8iGSJeXl\nBHc2CidTXmiJCoVgTLNV79kHB2h0xprFIFq+fOdt10KnueIoheab3nqIvfAJ\nBdjIKZ791U2d8Ex0hkwabnGw/yNb9Gszt6l86PpUF94GHIGNRkbPi2pMxfKQ\ndzz+\r\n=vW+X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.afe0dd1bc.0","@material/base":"5.0.0-canary.afe0dd1bc.0","@material/list":"5.0.0-canary.afe0dd1bc.0","@material/shape":"5.0.0-canary.afe0dd1bc.0","@material/theme":"5.0.0-canary.afe0dd1bc.0","@material/ripple":"5.0.0-canary.afe0dd1bc.0","@material/animation":"5.0.0-canary.afe0dd1bc.0","@material/elevation":"5.0.0-canary.afe0dd1bc.0","@material/typography":"5.0.0-canary.afe0dd1bc.0","@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.afe0dd1bc.0_1573486706055_0.41009514555232696","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/drawer","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.b4cfdc40b.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0921adaeb0fe34a0953076ce59899587c2efb42","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":39,"integrity":"sha512-TFPuPd9AxR9f5M2kHqfbzZs584lP05Rw8bDHEmMdNvvCtWQVR2yI11vIFVmrurrTJzBLrdTBMHDfj3bzWQgRxA==","signatures":[{"sig":"MEUCIQCwF6791/lN2KkFmrZ/lJqkjrpbd/T/yrAt9IBXqVJQbwIgQYSak5IGz1jspjR65omBZdvfXgXh7eZOJIJs54dCTn8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXnjCRA9TVsSAnZWagAAcZ0P/03SqvCQD2ospNcAbs3E\nrV54h3gA/1Tiab49XK3kYRWRuzinRYFmOKpC4u+rzz7ImriotVK7rECIFwdX\nagdqTi/tozUnUJE/gbStZteOGrTQvStupBHWv/aZXKgEtmv4KUFxNfwuI1+/\nVz3MT2Qz1e6idw2VwOnJVG8WSSe615WCbalI5+yHkSaWBvQ/tF44MLzRVvrP\n3I9tirK3WbpLu1bV3Evi7XYg8B58WLR9CL9FpZjOovteCGm4ZcHiLjrbCw2q\nuX/5J6W26pjFeDwS1Mah5ogb5ibl05IYwazQ0bGn3kUNQXyQdwv1Qu7T9HTd\nrgvsvBFq79Zy4KZmiSwEzuwSEqZTjDHF2ldogYI9iF0lGUwEa3jBC9EsOKTD\nKwraEMcx/3cGjMZ07otLTAdB+TQ8Ky5i9Z6x3vHsh5zAvg6DfvhgLpnKKEQG\n4MvDxH884vm2OCVbWCbdCq2iEBUWe6wNCbEcqD16+7QOkgpwvfwwGjXgEU6v\nxvzcbSgnLJb9KSoc5P9wsTD+f/dkjXfdPEcVF2+fcFc+/oUIjz3uKBaoplYb\nUTQoxl9ypbfIJhG4VGZtQZVTLFemxlB4/sOM0tLI4Cz08iUdQU2t04lQLcvN\nY/Crijfo582goyDna42T8luYforIn0uGy98O4cIZUUFbe3C4RAGMt0vmsrTd\n1o1a\r\n=QEuq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.b4cfdc40b.0","@material/base":"5.0.0-canary.b4cfdc40b.0","@material/list":"5.0.0-canary.b4cfdc40b.0","@material/shape":"5.0.0-canary.b4cfdc40b.0","@material/theme":"5.0.0-canary.b4cfdc40b.0","@material/ripple":"5.0.0-canary.b4cfdc40b.0","@material/animation":"5.0.0-canary.b4cfdc40b.0","@material/elevation":"5.0.0-canary.b4cfdc40b.0","@material/typography":"5.0.0-canary.b4cfdc40b.0","@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.b4cfdc40b.0_1573747170729_0.4254615786582867","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/drawer","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.525989b5d.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ade28d9c6558f6e9d3c8e400f3f7e185622912bd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.525989b5d.0.tgz","fileCount":39,"integrity":"sha512-HUdCIfGBNtGkCy6stiQoJhkvQpOLA6OXOhfheS8kK/2nSFJN3/TazTDnIOHxrcmoAUwLOeH8pPAytBUVjQ26SA==","signatures":[{"sig":"MEQCIHMn5fhNC9TqIqcyPCibeNlufZcRSuREwVy5pMbTsc0JAiApaAr0Br+NEIbv6yCMhpp6vpaAYrc9MRV3DdXxzxnohw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzePUCRA9TVsSAnZWagAA5dkP/3ZGRDC3CVud/YBt7mhw\nSP4vTQ6l2bPLdTUeJy1xB4IwhB52gm8uFK1C/icLGv952PynGAVN/3Cp2Tha\nyxvJvL4e5hdm8dpZkA7su7H3uwmu+39nfp9eW16MSWO/P5/112J9awW6/hLT\nt7oikApNfuxz9Tn96f2PG4fpRlNqGsXQ6ZAyuj09ck5B8E9Q25UaYz6Q8Sqm\nuBGbTVawADMT3ulr6inNUIQg2SzJsuFotbaPSEpKd0uTQ9fn6Um/3t/H/Xp+\nJD/UnCgVL0Ey/HxwUq/ChbhCAIGZ3mkj2rrl6uiKq5vtw7m+RAx4ArQlyrAO\nbQ9vrPtvkEnWZKFeOIcCVfHkJXsIuUg/GRc4RpHifO/vEBWB8/mGyIK9qsD3\nSK4k+nyKS6T82U0m3PSAX+FHPQZUkQdS8CiH+DQFi62FTiTalIcOvH3VoeAJ\neN4qH+sGE4HDbIkLNlL4EuJMaB9S5Lj72qvZ5IO3ZCp2KCB4aOjnMT9QUjAB\nWK7tIOKH4vPudI4zY8K510z5T6PjUA2JpZf8cPZDXRyjSG0ssoODs8hi2wrN\nspfkVKz2VQgGicoqpoTZUQc/OzxGgp3f98GkDop41RDYrfItUGlxQgt4HgL0\n5zL1qT8qhuSDQV2q2859aoPzca5846xjYcgDDYfFzOES+Xtr7PMi2T+2CGtu\nqAuQ\r\n=osAa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.525989b5d.0","@material/base":"5.0.0-canary.525989b5d.0","@material/list":"5.0.0-canary.525989b5d.0","@material/shape":"5.0.0-canary.525989b5d.0","@material/theme":"5.0.0-canary.525989b5d.0","@material/ripple":"5.0.0-canary.525989b5d.0","@material/animation":"5.0.0-canary.525989b5d.0","@material/elevation":"5.0.0-canary.525989b5d.0","@material/typography":"5.0.0-canary.525989b5d.0","@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.525989b5d.0_1573774292105_0.795012373599217","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/drawer","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.7084b403a.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df622ae6fe97c6b5ffe0d6f71d6643eab45b21fb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.7084b403a.0.tgz","fileCount":39,"integrity":"sha512-v03a97gLXZlHAmitna99A9rAUU05VvzZmtjaanpf0pWY8I3y6rOH9CY6wCKsHN43Or7P8DcrF688tCxcQK9udg==","signatures":[{"sig":"MEUCIQChCmuUKAfUW5UE7wwQozdvINE/kJU2ocL6UyJdAOVx6wIgOBSETT8LR6/CIdjwsy29AV1wquMjU6MtcD4wAST+k3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfouCRA9TVsSAnZWagAA2x4P/0IfPM3qmUzPJrWDoNbx\n8AlNR9BHOx2JyeWlE9do5in6McjdvBToPuJaEhknnXHvjJtfS+58MJxs0fSm\nBsnZTOG8FuN7rlVWRoZGm1Bq0sPEFhw+CbTJX8jIhYavPNmHZ2guehV9WXFc\nt3XbFfty2OQWqeAV2+zGaY3faTwwV5SkR034zyhQSMurqlFLTHkPFQ3CCGws\nOVdkuECTwPC8QAQ05tjWYB1N14YcTWbH/JzswUifxLB9LbdgDi6piuNf4kJL\nSXcOe3lCFMXiUBfCztxFVu4ytn5vso04i6qldm47UVegf1oEwkHRBGHXnU7D\nIZnutiCDP0JcIqZmCIiTGwF3A/N6TZh+qx2w323y04HpedbJ5aqpzz1zNz/a\ns72pReG0zApZZ3LWokfynKushbBFSKXDw46W4D1HWkW4rMADtVfmD4WoV1PY\nQEso0pk4/KycV7tpb74gHmNOCnjcfJ3ybWU3fsMKaFF2duVrqOPRd5OAJPua\n7PAoBzcgc7m1EyWLMbStUioVSpcid+QdPUePZwmd0r2UAgZEn+7pZzpNkyGj\nI2YtCXUEZTGpwnXFzq2SHU0OVbIijkKcYri2Amkha6uPv6EEBTDJqLKMRGDR\nD5+XgvBUwaow0gIoAQfmha0pGFW98qTiKezq5F3niDDXt5p4PXwxSxyjt+vV\nnzTN\r\n=0kny\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.7084b403a.0","@material/base":"5.0.0-canary.7084b403a.0","@material/list":"5.0.0-canary.7084b403a.0","@material/shape":"5.0.0-canary.7084b403a.0","@material/theme":"5.0.0-canary.7084b403a.0","@material/ripple":"5.0.0-canary.7084b403a.0","@material/animation":"5.0.0-canary.7084b403a.0","@material/elevation":"5.0.0-canary.7084b403a.0","@material/typography":"5.0.0-canary.7084b403a.0","@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.7084b403a.0_1573780014362_0.39884097937608387","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/drawer","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.3cbee6dac.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"675b480e511d09c41ef4d6c81597724f91500cb2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.3cbee6dac.0.tgz","fileCount":39,"integrity":"sha512-7spuh46q5skuUCnhpu022tdiqLIJZ0gLz4TSJWLCm2C4SRI07WyPXcZtLwXLm3JPX5F9KwoGidxjhdQ12VkqcA==","signatures":[{"sig":"MEUCIQC8VKFMmYB0drJYc9Y5R6VPhgC1euEJFLZb72F8h6hmwgIgFc5GdLFttLR82tcpoqdGbo8CTIi2/xqlKGVXpyqFwhM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzye9CRA9TVsSAnZWagAALO4QAI0YbmtHlx+q/RTySewt\nNl++YiSwIocnYuRTQlr11PRrF4CTTJrOpii4sz+0y82G4ew5HJSQ6PizAhh1\nTUBxJS/K7z7YXIwwna02Apk0yztdyrZJ74kV6j8iSZGa+uOaNI0YTPahVDtE\n8A2/NHagp6DcJWfyZyOICOk2UfTCbnPMYbdIGjYVyO/3j/Ibg9dlCT4lc9II\nxN5Fjx4A40KNVMYrGw5AVS6Hy79oTFG2WfLoewhKgU3flDrB1odHC6OuttC9\n4oWiN+6bAYQ+BT0RFpaFjdRB1uE7NdIDnvYQjXtIYmfGdliokTV0NIuNsHEa\nzhaRZV2ECGoba13kzzxJssCUWdPGCNDjTBc2SJgDjhLT//Xg8XCVbUDG05wT\nw/7atHQIsZ/+WFK4CcMwuFzDNIukazPRyETmuR+3QT8b7ZLoTo4WzH127qQT\nzMPkBLEGFFIp6QTG5VpW3m387Mbtq45swoBnuoe+YgGei2d15OwW0eCMB/4c\nHw+GwpPBQhcMTMTMOtIe2z67bb9McWwmHfOOczYm029GtAF9H26qv0tuddKb\nHboXkT0C0/4APsIIxzFmjBS59JKVTURYAVbaBLJZKbFirMNaT4fK2ESL/t8T\nJDgCCsGw7MRfoWva8y96eXouUfq4FtJb9ozrt+8tltOCKKSbD2TD5gASyzr7\nQo83\r\n=iJRQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.3cbee6dac.0","@material/base":"5.0.0-canary.3cbee6dac.0","@material/list":"5.0.0-canary.3cbee6dac.0","@material/shape":"5.0.0-canary.3cbee6dac.0","@material/theme":"5.0.0-canary.3cbee6dac.0","@material/ripple":"5.0.0-canary.3cbee6dac.0","@material/animation":"5.0.0-canary.3cbee6dac.0","@material/elevation":"5.0.0-canary.3cbee6dac.0","@material/typography":"5.0.0-canary.3cbee6dac.0","@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.3cbee6dac.0_1573857212703_0.7006277602595803","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/drawer","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.591a6ad44.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78dd508d68ff021c8d8158a0cfecb192bd1f28cb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.591a6ad44.0.tgz","fileCount":39,"integrity":"sha512-J+Z41CoYclJSZThzft9WKMMl478GtAyS7zUeEMx60qn1D9A3T9Zv9GucOccZkapI0zIGohVzu0Xnhmfek24BSg==","signatures":[{"sig":"MEUCIC2gF3zAv3EbziHeSsloC2TScH761TaD0ynFXWR910wqAiEA3xcq0GBcrx7ZhJDeL66AmRTDV4tIXa6gs/9Y4kUbzbo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y37CRA9TVsSAnZWagAA40wQAILkKeB/k+UJYucekONj\nVghOs++K1paHjEFLUTqP85+YjQhnwmA/X+1c5tikCly7VYaJcW3PhRbwDml5\nx+nyarHqa0IZ29QLINwu4VLCOMGgH/5qmHQbBY+DppAg80fpLwZmzECd24cg\nCIdHN1wWwYE2M6ccymHiJA0qRtRN6+NZIcEzjTz3IMR8fA5enMQnu/VP52Fq\natVmzmZYaskdzs50bJ8shTuWIZpaMKH1LJhWbEehBRw8VzqRP2JHa32FCU5U\nstooQoGjjqGzokvt8+zhNEVKl+ApDrzDKF8tFuVCXZMEYqLGPKZNADhJS0iY\nyXC9SN4nJIXgrD3T2pQwumyO0DtNzQwehS2yb/9Rdo+/48hTQif7DoWH2rhs\n1qLri6p0wkXi8p8omEWVMrZOmkKwcTMAN1bU38OLRnlvG8/FjRIgHXrL/KfK\nuwyuvQHtxlhGWsKivFxT9Lt6zdY+fA6jd6lozdHQdb0atJ9Tvmf3dLYu71wB\n68bN2wd3SacsU7Y5XCd5SWZUJ4kdKSRHyt72DxrEg2YArD87XiU0MfdSZzou\n4boT/BRL3aSICrhH0hmBiBnBstbKrYg0jN2yKs5BLL0ROvOXS0GHS+ygBSkX\nVsoGk7qXGjuU06R6hOpIV5fi1qT0mnZ0JYYACxOJ8wKFiiHv+WPI4zWNm6lv\n+nv+\r\n=y41y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.591a6ad44.0","@material/base":"5.0.0-canary.591a6ad44.0","@material/list":"5.0.0-canary.591a6ad44.0","@material/shape":"5.0.0-canary.591a6ad44.0","@material/theme":"5.0.0-canary.591a6ad44.0","@material/ripple":"5.0.0-canary.591a6ad44.0","@material/animation":"5.0.0-canary.591a6ad44.0","@material/elevation":"5.0.0-canary.591a6ad44.0","@material/typography":"5.0.0-canary.591a6ad44.0","@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.591a6ad44.0_1574120955253_0.3124065183524254","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/drawer","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.5729943ba.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aaa638de5144ddc9bbf601dcf5693c42ebfb755a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.5729943ba.0.tgz","fileCount":39,"integrity":"sha512-MuJhGcjXUgXCSfzLssEYpNnzvNAiYzt56PJIcpnvZ0zcNQe8M5cbxmO8HYYf40fzlrM3fGeDRkCqNe+GTbfIvQ==","signatures":[{"sig":"MEUCIC/ELqfczURz55ExQ5oiq9rbOdKo3HajXyTastVJQj6OAiEA3tttSdXBAcAp94nqHzV0wWfka3a/7HN2NEvmhDt/J20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1M0GCRA9TVsSAnZWagAAlYIP/24jOrcvRpO1jev/wd5g\nafi/NRFgy3J/OVLrz7g/Rn1WHs7slZ741jK9z9XtGeJuS7e25KmDNQTkQNEB\nlQE506BZQ548t0IAKknDQHzF/eEVsus8GKar0bzzykLgj9IT0zd+Q9oqASYN\nh7paYK3U7aT8/lMYaqGXPY1C0N/cqjAR5U5AMZe8Xga1/RwXc3Jhc2V9FsJk\nXkBGS2ipnS9Qw3Ci2vOFDD/TEZWTLxGyJsLL8YBESaB4XNYzpyaJqupuwlul\nPqL89UBtcYPd/lPxF9rAfPmNAsu5EDb63iG81gc1Ip0JrTahtv7g/XXDnJxo\nuvJm4o/SHlS22XVrJ/QrqLMNM1c0PGXbsSMJ+WrzWodOPIWPUZ65pLKLQgZh\nGaxKgHMXoPif2Cet7mtgeTBKli2O5CZhqm4XyMxWYUD9QFcOsCvyIZckLTzm\n5QgJJYft/Tu/xzE/MtP51jhYCGDoERb5peMDnzBVlQUf4LfYNe7iXLCVcyDe\nKtafUaJFzqdWSlek1VZCjq2uS0tq9lIN3Eirp44a+MZxcxK1XwyDS0zHKqK4\n3yRntI/F8uFDbCRmYMoyKJtZcQcQIZqFg4s64yhNuSQNMsB0RoKOxbPJB20i\nSRX7yeFWwojHvsz7dakrMBqlRUXprvPrM4eILFCmKMjHYK3vSDDiAESXIxOa\nvfCV\r\n=1ZNk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n menu\n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n","gitHead":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.5729943ba.0","@material/base":"5.0.0-canary.5729943ba.0","@material/list":"5.0.0-canary.5729943ba.0","@material/shape":"5.0.0-canary.5729943ba.0","@material/theme":"5.0.0-canary.5729943ba.0","@material/ripple":"5.0.0-canary.5729943ba.0","@material/animation":"5.0.0-canary.5729943ba.0","@material/elevation":"5.0.0-canary.5729943ba.0","@material/typography":"5.0.0-canary.5729943ba.0","@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.5729943ba.0_1574227206007_0.1669418831243623","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/drawer","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.e89750dc7.0","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":"asyncliz","email":"asyncliz@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98fc9d406ea11cbdfa4e1078475b462e41a91f7b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.e89750dc7.0.tgz","fileCount":39,"integrity":"sha512-aL6vlbfjrBN1J7dOFTQxaqLuNoRn/EH3ODj4RwnIYQJGZTyq4OLVrpc47b28TBH0w85qsG64gFnaosETEb2Xag==","signatures":[{"sig":"MEUCIGMAF441rI0GY9OpgaYfJ26T+y7zHSwJMczrh/t+0HNUAiEA9/AY1HGonV3g8mrCDAYiRkn924slduShFGEPN+oYxIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dseCRA9TVsSAnZWagAAXJYP/iCivPxYHu7NKc8HPkNQ\n7iOqhhav63MKXs8H70oSaFWuuz/TEWsebx++YybpAbp2uF33hgx4imBHeCVe\nOsUhECD6rG+MTZn+Rw03q5ADf3OIQpYioBi5/YbpoGQtaokZdhGs7tW4JmUj\nF9yt7MV4RR2L54C/O/fGIQUNrpftjZpM8INvYkAaKxpjmGNnXKbn/0BT5HLy\nbIJza89ChmVPd39VuwdSmdelXXOve/aVQFFD9nKkKgVI2bPQC3alHyOxOlDK\nN9GEQT7URD4cGB5zrmV36wAF13IV4CZU0kWwcF0askI4FIIqHCIumhGRBGLv\nijKgl0heYIvWDGLmlh0V+pv8RUtoA0HLub0P4GAAoZZwCUepj+644TY84/nn\nJKkEPvcvKwjzEQVb8mL/HdkTHF1Xf3rcabVSujfR95773VdxzntpQCZg0Nek\nsYzUReIFvGGdrracuF5hiHu172ddx1bznyzlCXBaLreBWwRDhfrgbQdumus2\nZYl+YejnSaoG7aW8x2iEKfSPSkemxbCdJPDKSIlo+ciyrSeZoxl3ORrTjCHs\ns0ct0XKpVuF13cmBV+kCM/KSwoCg9Dj7WiZx9heN1kA3sCuulzlq9+lcx+Hh\nBI5WQ7AglKJzzkM+WmB+J8D9Q46Kuc0PkCgnBVzjADWnz0mTjdVyi7P+oyHU\nQ1w4\r\n=4169\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.e89750dc7.0","@material/base":"5.0.0-canary.e89750dc7.0","@material/list":"5.0.0-canary.e89750dc7.0","@material/shape":"5.0.0-canary.e89750dc7.0","@material/theme":"5.0.0-canary.e89750dc7.0","@material/ripple":"5.0.0-canary.e89750dc7.0","@material/animation":"5.0.0-canary.e89750dc7.0","@material/elevation":"5.0.0-canary.e89750dc7.0","@material/typography":"5.0.0-canary.e89750dc7.0","@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.e89750dc7.0_1574820637786_0.7557376373307554","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/drawer","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.3e560b33a.0","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":"asyncliz","email":"asyncliz@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5a53b37b515e3d0469c4c8865d2c895d9339ebd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.3e560b33a.0.tgz","fileCount":39,"integrity":"sha512-Bc2BNNniQC+M9QcfhzBBTfn32XTWw9XkOkyTm0QnWsvT5H1tE9FHX/dZjJhgpOP84A756XgtTEzxr0ZR9KhdcA==","signatures":[{"sig":"MEUCIF9vX5wSt3YZTkzzW4VcSM9J2IdRaiFX8B34cVjuIH9WAiEAtsKKe48+KuVEGG0vScXLo8S0RHoDq2Y95aHMpIuCmRE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtICRA9TVsSAnZWagAAa/oQAI6NZQ9QrPVVfQ8PcZaZ\ngjKaTj4cLmQbmd74RXjZbNawde97GmNEoDhyhH2ogWnMzkL6ZFcBkhlHKJMS\nG/NbASkKZIhv1o4WI2VzxQVrG2Y2DdLs6uY8KP3HqWE5bU8BrISozFp9/Lna\nNScyxcZ4Caw00XN/Cfz9w9tn/WxG/PV4hycz0U+dxOkc8F4e7wBmcvj9B6Wd\nzoNcMvfp2pxCbarSp4phCwT/mkC4rilGaEVzMrZRMDlEVENXmXqdecRgaiAG\nuTgLc140g+m38AjHUOJ30AwgCSk9mNI5/e8pEVDJ96EfCq/F+MYuofz84O4I\nb17NyC17dPA6sSG6EDP/AKVYvbTY0TD4P7r2hzzcd5SCzWGGZ/KgwLtBLJkw\n9cOHWXgTISDMZt8IYiR8uNteG0D8DZEl8PeQrUcMaHeVDDNZBaYRr3bMLelu\nY9XN6Enq5DmIzWX6T1nDVtoqwVU3uNIK8+c7DDAfxe3YZynGt82IHGnWg9jI\nUzLfAiQmaygnD8NhtRugAHkSHQfNFrSA6F5NdaJY0gVbsqDr0iDxq2dfTuCq\n438WqNk08Sp82W9etlXazt86+oNsmlfLLWo2zIInG+Ugy+4GzgHj0ZbV+8qN\nNVUPgQXFyrGUXQkUGf/gPdNL6/3IzWjqj09QXt7omLRF7BFHQDfXvP4t9lhY\nGBmy\r\n=Z9Jk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.3e560b33a.0","@material/base":"5.0.0-canary.3e560b33a.0","@material/list":"5.0.0-canary.3e560b33a.0","@material/shape":"5.0.0-canary.3e560b33a.0","@material/theme":"5.0.0-canary.3e560b33a.0","@material/ripple":"5.0.0-canary.3e560b33a.0","@material/animation":"5.0.0-canary.3e560b33a.0","@material/elevation":"5.0.0-canary.3e560b33a.0","@material/typography":"5.0.0-canary.3e560b33a.0","@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.3e560b33a.0_1574820679772_0.7310024306065632","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/drawer","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.7fd17ce5e.0","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":"asyncliz","email":"asyncliz@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c9a41ff1449e8966448efae59285a3cf5b1ac95","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":39,"integrity":"sha512-nQd7lEfXk6yghr7Isa9ha6oqxiWxqeCAsmcKK63JygjCRM8zuEoyHnhkMUAXomUWm2rD9bA/4f4F1qsPE/RL1Q==","signatures":[{"sig":"MEUCIQC/G4L8/w6mPVWDgp937IGvrVzqU1rTFS/oxuhWXQWI1QIgCdVhThQAxgdlayve8UZDSeMOP9nccX8KVMAo3CoTSvc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtfCRA9TVsSAnZWagAAYrgP/2kJYdODctsSUGCi4zSQ\nE/yABTeAgTadaO/2l9kfK5MhtBB4SwwH0RCW8T3OaP5mpAgoEikTtSC24oda\noGHZPizh3hgrJYueI0aW77t/wcCA4nxSmLpVM9CkI9jhUvtR4Gzti5mXq16f\nk1U/6m2rbgIQwB4bCWfR4Q3jlm8hyUu2p6koamwroDBAjbl9/rdWB2Sm7IC6\nxXQBGQRUttubQZ55IBlnr4hmXH2Gi3OeRaoUUsB9fBnHKqdKpZ40eaKIn2O8\njXY89qDXAlsQi2kyW25pCLtrPkuIziYujhcveHvdn/j8wUVSDnjlL/MCiwiS\nm0COVuPuK7R8Pc43kd8jk4JNQ5e5NPJwPPyOvB9NEyhWnYBmfk2yTocZr6Oa\nK2hFA8pI5A8hccRdGIKKsv7HwWMzM73xnCVZ59O/UwkdN46vE9UdrQSfVr1r\n3zOord7J8XCoVCX3A4G7mqLdBx8NxKbIw4N+suimR9rpUXRPDgstIoggCC+8\nCL59q4fDqI1FnVbBPzaLyN3IM/Z3tBFdvppkgIT/+8q+Y45cgwtdRlH1VsKE\nbZxKGgs//OmskM5v0Gd4k18MsyzwwVK8G+pWNqUY8JlQ1hvF6Llts7iHwXVA\nb7iSQjItTptb+niVHGbmPjQsjhLEHMHkxt/PyrCg24GqqPPNJUUSIjQQXAnx\nNatW\r\n=2bDi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.7fd17ce5e.0","@material/base":"5.0.0-canary.7fd17ce5e.0","@material/list":"5.0.0-canary.7fd17ce5e.0","@material/shape":"5.0.0-canary.7fd17ce5e.0","@material/theme":"5.0.0-canary.7fd17ce5e.0","@material/ripple":"5.0.0-canary.7fd17ce5e.0","@material/animation":"5.0.0-canary.7fd17ce5e.0","@material/elevation":"5.0.0-canary.7fd17ce5e.0","@material/typography":"5.0.0-canary.7fd17ce5e.0","@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.7fd17ce5e.0_1574820702739_0.8278032759113425","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/drawer","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.ec729683b.0","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":"asyncliz","email":"asyncliz@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"585496c17900394abe69e78bbd2b36c2a5d93780","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.ec729683b.0.tgz","fileCount":39,"integrity":"sha512-w+Ig/dxSc2TB2maCrCr8cqqxSl40vdg+chdvUG00DwsGwR0L1PyAZxF3wHMjIyIWAvS5OrTmhgqxi2R3ncPijQ==","signatures":[{"sig":"MEUCIQDJp+UZyFIzsaHi1gDxYOxSTldCapyi6I+SNupRwvjfNQIgKMy5ZSc/tobseA/WfhjaVd4vyqkDHkJ6l+CxN37Z+h4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pyPCRA9TVsSAnZWagAAWXUP/jC0tNL6/RiteLwmQMU7\nrvFyen2pk4PDlVKQlFwCPfagpMJOElLsvazknxoB7xUye1RhKMcgWfIJf2go\nQGdI9BAltfZ0J4BVQ7AdUJncK883gdVPjeFOEl4y40xNR8lGoP1zDjwRP52Q\nCXAPMT9kHUiQ2T02M4hkAWaVxm5yh5yCtez7vGdcRWyFrbfuQJdUsBwJugHO\nD2XnJxxps0sNM4ZMxlQaBbMBK9526VhKDMQBizQIMaRtT5OmcokXknAd76ar\nRK8c5GSHpNayTQmXccaK04jwh9Ta86DmwS4n9DOAHVrCK0i8+9DCs0VMp9xt\n99Y+8JOIpZL0H2tyN1j5s6kma+nstxib6HZYTPNXP2QUTxqAkyfKiL8ppsLv\nlj2GyzWR2x/sDxcGxzq63x6bZ7vrOywKu9/QSpiFtrwE1CFW8YgKsObc29rP\ncTYV9PorfezueyoYiMHLkLukLMRiwI1IlsjBsQWZz+/YqnTHs4l9vUd8lovw\nHCFUTX0HSlXc07b6dfqLYY2wh3yHcIe7opfhbP/5AkdYFsAZk08KuFt8oH+x\nsj/dLW1yyRRsrvTu03SsaHTbmHOQH0fGRAAoMpe1aCq5cyQeTt05r356fX7F\nEX9++NQ9Ai2cwv0ZNoXAWrNwXoErQbyFrqpWe246IWY1fr2HPE73qHc7i2kf\nMkXE\r\n=kSBV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.ec729683b.0","@material/base":"5.0.0-canary.ec729683b.0","@material/list":"5.0.0-canary.ec729683b.0","@material/shape":"5.0.0-canary.ec729683b.0","@material/theme":"5.0.0-canary.ec729683b.0","@material/ripple":"5.0.0-canary.ec729683b.0","@material/animation":"5.0.0-canary.ec729683b.0","@material/elevation":"5.0.0-canary.ec729683b.0","@material/typography":"5.0.0-canary.ec729683b.0","@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.ec729683b.0_1574870159068_0.9161152067041052","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/drawer","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.b8bc4a26e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"450363c07dcdb8f8675f783c5261b2a9b5b9424d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":39,"integrity":"sha512-qW6rudUeqD5e/9TyhacqI05W2t55x8QN7hK3WIvtUdfeWf1twKFd9qYKO8ePlaRnivKNZuviVyN0ajo8WQK0Aw==","signatures":[{"sig":"MEYCIQD5+lgkmSHOG3RsRXCC3AtJpr0+MiN+OJP9aPmQWg2EvAIhAKzPcZfXcFf8ausmj/txEpVkl8jKVYS3J/Bx3cf3X9Sf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3svICRA9TVsSAnZWagAAFqEP/0MHVeuQ2ZSqnykwGiWW\nslCA1OKyB74xLWc6R3RfPsYnApu6i6234HuK46BT9qjwE5GsvdQ7Ogl/drvD\nMZjDq7hDi0T6vi96asf4yFEI1IO4sI2bMevrHDvLzQ9Wh0bIiYQ5qgENtjvZ\nSesxxFWTWMgYBNEho5aEVQ+m5Bq/bp9ujw3FHLcOgw5xUFtuhF2zzbtj43bc\nMEoCOeXwQKBNqCep9pmUq9nDsa1a+ee4eV/m1exw+t1tIHpz54uX1JLEyHq8\n4+HuBJNlrJbgRlHmiCSzwuRDzSNyYiWVa6CvLBVtIYelqgQVMEh4wEDOPFb0\nxsE000Eork/QvwkRdKwm8BUoWpLKoKWLNKytZtrUyNhIsU3k7BdbHsrsILjp\nakangn7NJL5sd2IETcAf9KVcFCQQaiXMTKmmCKBqtUWxMO9UNuJ/ebpAvHFf\nh2TIzfBiZRLPJAeHh813UQz0XEMNr8oMzl/UXDr+hYpoenrxKjRSAex2ALd7\n4ew3ZrY9jVfop2862RrWS1qBz4yF3GL1uPJ0Pr5XWz9AZ45XzAJmJG8+Ypi1\nTiu8hpkeLuAy12ImlKLgQ4gljT5R6A6yBTtQslMXV78JTC+uDr1XGlwKZwLa\nQwH0GhOjFGK+vAmqVH9jCaa8iQJIC9gC2JKfgab+Ir5qu2F+LxHD+DebwsyK\nezL9\r\n=IbUG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.b8bc4a26e.0","@material/base":"5.0.0-canary.b8bc4a26e.0","@material/list":"5.0.0-canary.b8bc4a26e.0","@material/shape":"5.0.0-canary.b8bc4a26e.0","@material/theme":"5.0.0-canary.b8bc4a26e.0","@material/ripple":"5.0.0-canary.b8bc4a26e.0","@material/animation":"5.0.0-canary.b8bc4a26e.0","@material/elevation":"5.0.0-canary.b8bc4a26e.0","@material/typography":"5.0.0-canary.b8bc4a26e.0","@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.b8bc4a26e.0_1574882248300_0.35918902843245015","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/drawer","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.f978109c3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc15dd8aa837bd10888acb0dd4f3a56dd77fd61f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.f978109c3.0.tgz","fileCount":39,"integrity":"sha512-eV3GfvyT3lWCs9GWLHpS1nxPRGBoeMugkOm9PG/Sem0tarnq+AMGN7AHGjtK6sukYGXaSgXkshO3TJUmWlgaEA==","signatures":[{"sig":"MEUCIQC2ix2riNspMmi7wsWrvf5a/TrLxh+CpjMcwuClxCCUtwIgJhW/F2am7VVusItHMGeJXnMuPekpwUk7dMGcSdmufFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UT+CRA9TVsSAnZWagAAjJ0QAJPhxsuMCpBSgdm7o2jc\nNCmQlq9PlvKMCRzzlpAHjvu2Y3XUpN5iUQcvHodSVHVh19UrY/ROOKSFvgRg\nZVqKzS8nzRauUEZHdUaa7n1wdF0Pr5HtAgeZc7HDfmzlljUf0qLtZhQ4jvJX\n3Wuaf/GVlkK+ZQG7wuQxHP3bXbkY3eRvqNuayW6hJ2iw5taTrhxkbiBLfelK\nU1nZSHPjTG2iqyxH+Cd1G0qb9KDMO/8LdO2fTfDfkYhi81ES0wUY7hBE6iw5\ntvo89ljueZfvskYb5i16VxMlBEGV29JuQhRp6mVLGmjVjhUQHU4F4Mhg4inx\naNNR3qCc+th739t69X0WNH4LwCRJgUVKiT/f6unjbWu41Vczo0yP+bshBvxi\nN5gxR69YJqUfZ/cpRZkGJ/bQhrC6qov/pNqzOdVp/di3S59Dw2HlPFDEOSE4\nrSG1ssGw3hI0WkTdKjSpBNFdPXlHS2j+BZjQNkn9j5RZ4LCWC4QSbuGHFfNu\nHKsqM8lj4w8qML4zW0eZecjc23NyvclcXjtYWudzHxuPA1jJsLV9TiH9QCCw\n8nCOHmRD8UanbrdfzvI7NsM5Jx1rvcIkqWgHW5Kqpl9/+ydDTir44OLcaDWP\nDiff28HGjPR2bkWJrttXaGVR/Kt+A9KP7oynG9h4vMZfCPfF3sbkNkAxHW69\nyphQ\r\n=RjG7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.f978109c3.0","@material/base":"5.0.0-canary.f978109c3.0","@material/list":"5.0.0-canary.f978109c3.0","@material/shape":"5.0.0-canary.f978109c3.0","@material/theme":"5.0.0-canary.f978109c3.0","@material/ripple":"5.0.0-canary.f978109c3.0","@material/animation":"5.0.0-canary.f978109c3.0","@material/elevation":"5.0.0-canary.f978109c3.0","@material/typography":"5.0.0-canary.f978109c3.0","@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.f978109c3.0_1575306493795_0.682809611010015","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/drawer","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.ad9dfe706.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f066c9778dcd5d91221cb479e0d17b2756e51a51","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.ad9dfe706.0.tgz","fileCount":39,"integrity":"sha512-jIRXhfZ2qsLs0lmButD4s+8C1rraJYQzzHZa14+ey8QeqyDMOuJC/orP5ljo6iAnw50+PJtXYJclbUISuAbxFA==","signatures":[{"sig":"MEUCIHrKY84T1ppeRlwqEFjGoTZ8sr0Hfbe+a9Q58asovQH5AiEA3/LEWX4OS3ejBWq4tLzMEqzJW3uHv8c8gfz5sQqF8Ds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1eCRA9TVsSAnZWagAAwHcP/0TySDhfwbLH5sZ8a5GA\nw8dr/zhgTUpNCUu7wEbosL6uZRwKmtRDfcPZByNrO5kD6KpTVmj0mv/n4lvO\nwVhLBKJq3dawexzw05irtzrkXg4fZLjsRf4XFQuymhsbZ8CnVDlB7sNxhhyS\nsCG21UhGHrRhBoB2JK4FIV9Ix3cUwDRwaBN3MpxhGPs0cK5o4srRNmDfgGU4\nPQQnhkU8KzjVXbi9D7rAaa4Bvx0yXg1vOLRDCivOR0SjJpUiIjEVnj1cy/et\nhbxEH2U7Sp9feCjwJGiTjB88GJbTmr2MwiHHx1MOvFKvNRCXIg/GMolBrMgR\nF9WOh4htkyE/QZdftObJbYSwBMdzBsM75J0m9B0lg0NGpRqhMHeMriRhZ7cR\n3PxwVoclmIEt6vY1N+G7qmJ9p0mFPl0ljbJ0Jtjhz6hDSPo/NqxTJX1NUE5m\nMPn7mRLCI6o7BqzvMs/t/x9m16K4sf4oZaIOKoQMT/7xLA56V+8mHo1hWPBe\nTtLxA7lDIq6msIJZ8vyDx2PpeqNO0R0DPoCAnibShK2B7LOoFtbbPrMXtN/B\ncmD/H4YHYu/bUpBPLZXYcYvGXlxdS4DUpQ6AJZwOX0Mj38Em9th60e5sA7Vp\nTT4X3ZnQ3jg+W62uHqnxY3IVN5ZATq9/wlwg2/oKp5aFdThxoPUvKDb4jzN4\nVR2O\r\n=c+mQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.ad9dfe706.0","@material/base":"5.0.0-canary.ad9dfe706.0","@material/list":"5.0.0-canary.ad9dfe706.0","@material/shape":"5.0.0-canary.ad9dfe706.0","@material/theme":"5.0.0-canary.ad9dfe706.0","@material/ripple":"5.0.0-canary.ad9dfe706.0","@material/animation":"5.0.0-canary.ad9dfe706.0","@material/elevation":"5.0.0-canary.ad9dfe706.0","@material/typography":"5.0.0-canary.ad9dfe706.0","@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.ad9dfe706.0_1575415134210_0.6248273870109902","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/drawer","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.5e45d77f3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0263e6b4a5e23073208163a91989ded5715422c2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.5e45d77f3.0.tgz","fileCount":39,"integrity":"sha512-+vct6PeJPvZU2+ddIS+lJr4LBZ/qysnTIcSAn2sqrfUQWKw+EGugmNcE4Vq3J8FDDZfSDiLPPidyBY5mBLb8Iw==","signatures":[{"sig":"MEUCIEICkzxMq104GRu8lLLP4m7iog/yI6hQAGILAwQlAMtdAiEAkUhNxbMDNkoPKklWw+yxuNFPKqw2Rs48Qys1a9GHHJQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3NCRA9TVsSAnZWagAA4GUP/jxTEXxLheL49lRL9zLt\n7iWhmVcL9ovSj35sHR4PnMRSoTkladaKtBrmhVYpiKBWjM496WmsvjX6Xuqk\nWEk+N3DEQhAFlxDLrnssmPrIKXosQP2MlCUDJPFgQYRHfSZrpgJEOJwIDZnc\nCLOP9ezAzFmzMFQfAv6kwf/+PcotySZOYHyMJcfNWNm2YTNLRp4ZFMSGu7zi\nj/zIHDfJKLIVa2TOb7foqEF4EgSgVqShKdse6Xt3HPnl6aRQh8AMmH8Pn4xQ\noef4lmOo8zrDlHElg78XumEd2UbNn6AyE5LPy49xUGZPHn/1gTtC0p21RYfU\nQSn0c93Rcvou85vCT/MpSJh2JT6jQLZsvEy2KafmQhXbNRyl9NfgJpqIN3U4\nhusjGzYUfqCa3ES1X26DZ2dE8rS9EIVWeJKgi0/SDNFk+L6aOEAongWgeceA\nwyA6pH1C0YO9gPKStOzo6ARjWvDyXxrvR2svXS2R/3KyYjQPornuSxyaFy6C\nzPjKA0uy0m1MX7oEs3H0Z9BCn5uvqQMTDVMyAmDF+i42rSMwQvi4vbTOf62Q\nlnjk0oPXyPi3SbtZJjKuOISuw40pEjKDB/9iZ4c42IIFDhvsLrmdhZWXNA1B\nebXxdAit57cOZnWg1IXCrrQH5v14bfA+E7mnWbqTOnPaQVle4JRDPk679L0L\nV6t7\r\n=ryPP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.5e45d77f3.0","@material/base":"5.0.0-canary.5e45d77f3.0","@material/list":"5.0.0-canary.5e45d77f3.0","@material/shape":"5.0.0-canary.5e45d77f3.0","@material/theme":"5.0.0-canary.5e45d77f3.0","@material/ripple":"5.0.0-canary.5e45d77f3.0","@material/animation":"5.0.0-canary.5e45d77f3.0","@material/elevation":"5.0.0-canary.5e45d77f3.0","@material/typography":"5.0.0-canary.5e45d77f3.0","@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.5e45d77f3.0_1575415244826_0.8924755301989848","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/drawer","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.d10e8cdf3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e05ac4198d97ac8acdb860564437c1aba0581325","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":39,"integrity":"sha512-KWEsgnYVOn34UJ76SLu/LthSSzaTvxLHtLGgrCkAoHqDeUdF5ILzy4Fn1zb4JY8/BNPeYzZ0bD5Cmh7jONL0FA==","signatures":[{"sig":"MEUCICgLTzC5u7Ft/m3Azsj40duuIcyeZ0qAgA5s5ROk9rN2AiEA5OhpuLUKvT1Ik5AET0LSEhhEfhb9max4KmFoJo3urNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3oCRA9TVsSAnZWagAAU9UP/RYX1zfrUm0VRicmOOJO\nmguDBmWq8JPX+6oF+Rwf5WiotYxBFLH6m+syVKc+FVLG+Im+nQoTgLpP3AlW\nbJvgLkkw5daC+0z/RxCZuFE+JT5BvYWNNBi9E/ku+ebBBMZZshXmCC2J0gQN\niH4kDgZocZtq6Vq3rSRTJUApNWC48CxpkhsNLETKvpNlss11LcGciemS5J10\npZbiuRXrTIAa7FG5OPiw6J0lzTTL9EFGcdolFJvPMOZw9HriyO5fFwOLgfqA\nW6yAASC5iMV4ql/mmr0JyW5zWNBORLImBKMCFoWurgFOqPNWvKNMUTKP3cel\n4y2QMnAmpasoCdPbNaHfveh8nryfGBkF1zlpTs0n79zQLf/QExpT+77jhGgY\nsQNBoEfEt7f/VjbJx3ochIlalChAuBt5T0Oqhtqa3nfLgqCFcxnVlLG0jbnt\n5QtKPYvvTzgLkcSsaKLCiE5b4+U02s1ohbY2NZRt9ZbiysIZuegc0hfoAvdO\nPFzkLGdB8dB7oaWvakj+qYCy5UEBc+yh/anOAZ9g/V4MncRUdKn23xpPnj8Q\nkltCZc52R5NmVwWgxPQAq+W6i8zcKJFofl4XOg4OEDzmTHQWe4jvLGSVNP0j\nj8FoS5nWuTdXV4fIXDfgXZ7sgqMBg7MLSiWzSOIRsSi0PFlX8G57RMkHjtTS\npNI0\r\n=FBZl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.d10e8cdf3.0","@material/base":"5.0.0-canary.d10e8cdf3.0","@material/list":"5.0.0-canary.d10e8cdf3.0","@material/shape":"5.0.0-canary.d10e8cdf3.0","@material/theme":"5.0.0-canary.d10e8cdf3.0","@material/ripple":"5.0.0-canary.d10e8cdf3.0","@material/animation":"5.0.0-canary.d10e8cdf3.0","@material/elevation":"5.0.0-canary.d10e8cdf3.0","@material/typography":"5.0.0-canary.d10e8cdf3.0","@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.d10e8cdf3.0_1575415272078_0.6354931932307817","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/drawer","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.a5dbd8a2a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba7185c447039ac21ae11589ac756af77eb1dd5e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":39,"integrity":"sha512-jOUkyAFdYD0JXIcwKESIENokQEi3wyobmU3O+6J5TLDZohPwsHPwgrJ4AagxNq3lLRMyAeQORAqFamxTCYuD2w==","signatures":[{"sig":"MEQCIFUF+hzKHDoAttZgfuEjGCbTNJ2LqibwjI82oiJpRHBkAiBF96TCQcgtUJw/P7y7yHt96u9oeSvQgleQ3ThYO8k4sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vYCCRA9TVsSAnZWagAAG/MP/032hergYBLSl1OuQixK\nbkJgArwaFk3aaDuFUuEu9RUd5F3G+PKTE5Ytv19yd7Z3WHTDi4lkJ4dHNCiR\no8b51kvt/71nQPtnU9HgZVXPC+UZ1s29wbi0iOC/GhYRtMdJZg4AwWpP4h4G\nVM6rLmDgDpE+YdOBW6pQiiIqy2x/dUEoVoiJJoiAg4r229ZP2qPt3/9MKR04\nWFCPwzZWRdOJGo5rDgUdk92ASAw7yS3WEOU2fuuZel3POjkEikobazLTixIv\nOPd6c1Izb2BqvJts87Mo6ivAT9ZZDJKy7/dmgnYhYc+yBhUYFJRv2rlhFLLD\nYdp4jy9wun6JbfvETBOryM5kCjNnaKyipBYMuQ37IyvxpvS7xm+hr5CSV5Xz\nSfZG+MwKAuGHtotlKiX5xLo/h2fIuLd+p/9+ce1K/w6YPUHxVZPeIMOOSe1j\n4uAbSQ4nWHTeNz/LhWjvddoRtoOU0Pxnh5L1otCCI/oL333SMVTlAv1MuBs7\nzEvDSrARW8TR2acs/07ZFM3zVq+MX+xrLjy2honXsoBIv5JOlb/zJXFlo6wX\nrZvJGhIlzpVf6fOe6q/+8R1KmStxdWWZ8tL3mIX9WrKPKfSnVo8N++L8G3Sk\nqXVfqTQvS4vHCHi6rMJnwdKw/e0EuGCMksl2dvVJ2u+SOYngMkeAttSwTvbJ\nceSq\r\n=vd2d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.a5dbd8a2a.0","@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/list":"5.0.0-canary.a5dbd8a2a.0","@material/shape":"5.0.0-canary.a5dbd8a2a.0","@material/theme":"5.0.0-canary.a5dbd8a2a.0","@material/ripple":"5.0.0-canary.a5dbd8a2a.0","@material/animation":"5.0.0-canary.a5dbd8a2a.0","@material/elevation":"5.0.0-canary.a5dbd8a2a.0","@material/typography":"5.0.0-canary.a5dbd8a2a.0","@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.a5dbd8a2a.0_1575417345718_0.36890439041886114","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/drawer","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.ba879b68b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ade526fe4f8a43f7d7ca1c4272917e2c4bc14b64","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.ba879b68b.0.tgz","fileCount":39,"integrity":"sha512-n+c0Mmon5u1y6gRywdOHxNdT5B4FJL+TvgP7WpmD3ky6sW0gTqwgBIZlua8j1GgTaWFHF5AzQ7wiVnoKfPiIXQ==","signatures":[{"sig":"MEQCIB5Q1l/toYPJCyCOelJrq/B4rQVXqiRK33mGUrP3LSbVAiBRYoLS81jZDyY2w4CjcZ4ZFjF2w2AUsUtCJqMrW/VH8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BXACRA9TVsSAnZWagAA3R8P/11kCmoxoVg164TIWHaa\nubvPtOUnrd+b3+5G5tFVoqJPfvaSms8hPmraKk0YMDAlUtRF98zFB9fTrT6T\npqVRH2HuYpCTBZJ+cdPtjVzsZDPXC3/w9pw/ZfY8UoEhkNYrsekigvQJ1RiL\ncj6cpMXKMJTHkIInhIZUAWfM0MAFjxxkJJtkAXw69F/Z0P1S2F257eKwZqtu\npQOIBMfXAHFmvSlekOJH2mNAyTa9i5uxUWYebWGmYqBA5F9OZW9v1zC8f5g/\nrE5idzc9j4e3lgUQxHJyXEWcT2c44VjoRZ896VqUe4g/IQ6wND3yPYyIVMxM\nMibhDUaZuD4qOdjHJnTDQ6+CcmKC+COka/uHUgPpk2Ja9DDSE2MLDmAK+wMc\npYZCPa8MzY8oU5ZsVPXkCptmKaVOGQx2YwdgtseiKFXmhteL4xp0megZt7ca\nWbLIi/Se3adNcfa5xBIiGGElGqyI8nb0CXPbAYvpSdQvnLdyHNT+9COBIK1o\n/0QBJiVaWSGA4Ei0ihB4UTbpGOsE8MCUDXyzF6g2rgxK0kv6f5NPEl+jLUGi\nxvRIJvRWkbia2M3se/vqdnuPw9aN+M21rlfnrtNxfahIhFjhdKZcPJBL0xX3\ngY0kCyMgdxX76BbDChbpIy9cgUTnk9dbj7siYwyXEK12KlJjWVN2hr/QeIxX\nA0H1\r\n=0I7D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.ba879b68b.0","@material/base":"5.0.0-canary.ba879b68b.0","@material/list":"5.0.0-canary.ba879b68b.0","@material/shape":"5.0.0-canary.ba879b68b.0","@material/theme":"5.0.0-canary.ba879b68b.0","@material/ripple":"5.0.0-canary.ba879b68b.0","@material/animation":"5.0.0-canary.ba879b68b.0","@material/elevation":"5.0.0-canary.ba879b68b.0","@material/typography":"5.0.0-canary.ba879b68b.0","@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.ba879b68b.0_1575491007664_0.8085818011974422","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/drawer","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.aa0eba489.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0efec1861d588ec783c67d489ecc0c5afec80d5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.aa0eba489.0.tgz","fileCount":39,"integrity":"sha512-W4bRiUHWZvm8G4BWPQQZLwM6kLPx3oH7YfLawA8ImaJGiyC+8dRF7CMpXTR9FdRee55k2QBDtoeXUiBj6syjQQ==","signatures":[{"sig":"MEUCIQDhXo51lEzSAC5hFu9OpghFrv/1wST7GF5+jyggigebfAIgehfigyNsNFkx+HSZTGWfvbuz+UuOKta+yHmt4p7wZyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bYXCRA9TVsSAnZWagAA/DEP/2UhyveGBF08O6BsYIft\nv0MyQ+rp8L29By21Y4HfLhr3Lky6o3Vof6QOx+99kDm7ODKPKJVn2Ih82u20\nccl9FO+LIlyit/b/chztXC6Rv8TrAUP8RlpowlKzxpCyrrH8UyEGgSd5TUP2\nOrbAbYxP7BUeRGE31XscD2GMion5p/ES8kOa2GxE83DHBgmsNSbpElDSnrTU\n1jbFNMO+rtBYbPINw0rk81cqYnIJpF+UtM1ZzX2WgQUwZXbe+O2kTqp2mNjS\n5Pf2An409vynGorclV0n08CoW4a/jX7x8xNWheQES+/ZYdm72yHdvN2vEy7k\niVopSAsDKzlDd+8oP5R6bVTtGKDjdZIngWcvnTVbRV+XsmE6B2wRpu/PLY5g\nF3SuLQ/EJ7y8u6fiU1ziw7O2MBglq0LE71Af8qgH9oCBvzIJ2KjF6pCxtHrP\ngazmjIInJ/vQmZ/TuhJoiP3MVEhQRl1PA9hz4Am8rhlkXUs3woc2D8TCQVuk\nYNkTH74dbaS1/Q8+DhLeOxx89Ff0KGjtpOK+0F0SAEqF9j6OGeV4fDix/YIg\nIiR0u0RCwtkEqI+5HSpSHW6n5HST4QgIPJUtH/K0Z1VmFl4zx5ZMtzEWhUmA\nDF9qdBvrP9WicaDUaYPM4ADyVtUJdim9eppDeNQ0WyjXd8eW1Kkl3Xun9Gho\nwtft\r\n=R4ST\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.aa0eba489.0","@material/base":"5.0.0-canary.aa0eba489.0","@material/list":"5.0.0-canary.aa0eba489.0","@material/shape":"5.0.0-canary.aa0eba489.0","@material/theme":"5.0.0-canary.aa0eba489.0","@material/ripple":"5.0.0-canary.aa0eba489.0","@material/animation":"5.0.0-canary.aa0eba489.0","@material/elevation":"5.0.0-canary.aa0eba489.0","@material/typography":"5.0.0-canary.aa0eba489.0","@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.aa0eba489.0_1575597590757_0.05765457472709179","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/drawer","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.cb7b71a86.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"056ae65830dad07df678f11c5779f329c282bf85","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.cb7b71a86.0.tgz","fileCount":39,"integrity":"sha512-g5PswttrFq9EacBhyguqxeFM4c2tgamvPyV3eWZyowW9JRF3MeG8EqO4Bj8AJw80O2mFbcfpcW+C5N4gYLBgcQ==","signatures":[{"sig":"MEQCIA+jJZurtA1lqwxcsvY9pyFaGKuUw6qzOuP2hHEj8rXrAiBvvRkaWOPATRmGaeHwMhkumHIyZqDjKoYRbVaNq9W+eA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uq+CRA9TVsSAnZWagAAIQQP/2BSFBjy8Y4C1UYCpIuU\nSChwn8JCOzhdX7EZcvujlsmPbds947pqwepbyhVSlztQe63rNyMNKgVBlwbU\nXbXQINGrWrdZDQ/bcRoW5INb9VT2sRUxWToXQ1i7MEhac43wABpkIIQ1P3pl\n9Iq4d6FA5pq39hBFsrXJoj3qXC4TiVoTtoUAFDuIhxe4wQAM+zOrf9tQGebh\nu/6XaLXt/4M/PeyWDjApsN1oXfwH4TlmvBZtiCMUfNy+9UB5Cd+Osc0g6yDb\nGvQTxynxptLsqMwq9dzk3QBeJ7ZhpI0lbt1y9tzvssK5ZGZMg49sLNtPMJqg\nWB3BkQ3m9Td2oxBlHGOQ4ij15gF0DVQXQKtiiO066oxJiFxc0e6LdhuvGM9l\nroe5MFh4T2HNRRSyaPqWbkLYOEWsOQCBcxvvAxN+n/V+WqvAHWR22NHtFlvV\nf92Tfu1DJDbQ4yXn+23ryZjnWJWDJY77sxECo7WkbZEm1B2uoA56o/TCNw9f\nqvfJo0bAzuDR/vjFpBJBevrFzBtroPGmyaNq7IIHZTnj3ziVmnCRe1yfXzFp\n5bjHrgRRvYll0tp6vrEEN3H+Vy9vzoGkszyh9h5Oh6Yxb/uRPO/9joArgBUv\nsn052QNEwqBc5TESYnhbdH8PG+R2jInY1E6NVa3zsTlAyshs6YRYgOEBjpjZ\nNfFv\r\n=hBUm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.cb7b71a86.0","@material/base":"5.0.0-canary.cb7b71a86.0","@material/list":"5.0.0-canary.cb7b71a86.0","@material/shape":"5.0.0-canary.cb7b71a86.0","@material/theme":"5.0.0-canary.cb7b71a86.0","@material/ripple":"5.0.0-canary.cb7b71a86.0","@material/animation":"5.0.0-canary.cb7b71a86.0","@material/elevation":"5.0.0-canary.cb7b71a86.0","@material/typography":"5.0.0-canary.cb7b71a86.0","@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.cb7b71a86.0_1575676605871_0.6899571250750425","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/drawer","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.50f110a6c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44125ca24d72d1d16c6d1de6626b2d8108e44297","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.50f110a6c.0.tgz","fileCount":39,"integrity":"sha512-nAX4PzXUR1kk6vjdL7WNXBQltXyOQe/Zvo4MhCkA7QuSY9NCAbPeVK8C/fLVAJEkqXalYqtGI9udeKtx1u+MMA==","signatures":[{"sig":"MEUCIQCj4CcByR9Af0a3bEXiY1DkeKB62fsfPrhlfOZ5fZrNSAIgQHLTBXpioufaJ8BhkWTfwUh2YaLx/YZR+Ut8Pa7sn9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd788xCRA9TVsSAnZWagAA5ZsP/iRAY4n16PHPZvCaSLV8\nvZVQMXmSeRaR60q5xskuw6YAntLb//XeDbG96Zl6ssA5agDCzMrBsaP0xbM5\n2Kx+beIt1AI/GA+qEtoVxDVqBRO+wkpW6ASwj2G6cd4xtVH0RCm1GyEn29z/\nnr+7Zmq9+9eEZCr56lGx7mz0IDRlzigdlqRfWLBnHdl7rS7Un9rH0VgGrsAM\nrocwUExOVY0xswfyQJ6oJ9IITEKO+e80YRx5R+w+8g4FxM6jveafFG69oExt\nI23QDI9KcI1YX358w9sLGMSWNlUSErUEfH9NO8lkZDIOjbbkHCOHRVCR/Z1Q\nvFDUZgY+4WbEIF0bt1JRSBaxAKVLy8+paYewD+gG98iOCodrncwgC2CDGuG9\nvhYkvq4BIjwkGJbwR8xemIpoLvVvemVa4mL3ykOt8s20EGSbH2F04cbKpLDz\n5AvlMdPLVeRReYLlvB/eJO874w27pFWe7bvldm64ZoSPPq64rBv8sBlXMPEB\nLAbxAxhO1RV6QTasbbAcdjRW4Y8Xs13t2+a1XhdnNX3un7qCZB84AH3Puban\nGKnrbkIAaW1G1Yk3ycG5apxtLxnCr+sxpzwFG7Y5xNbqu3E/YkRFHjKE0z5n\nhfV5kiVMPgvziHs7QrflFl4xm8OeQPB7KtzOgb4jfWm9nDnU+Bt9+XfNN8Tc\n3ZDX\r\n=d0Bs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.50f110a6c.0","@material/base":"5.0.0-canary.50f110a6c.0","@material/list":"5.0.0-canary.50f110a6c.0","@material/shape":"5.0.0-canary.50f110a6c.0","@material/theme":"5.0.0-canary.50f110a6c.0","@material/ripple":"5.0.0-canary.50f110a6c.0","@material/animation":"5.0.0-canary.50f110a6c.0","@material/elevation":"5.0.0-canary.50f110a6c.0","@material/typography":"5.0.0-canary.50f110a6c.0","@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.50f110a6c.0_1575997233528_0.024178215239221812","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/drawer","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.878a08b7c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15ca1df34abb14eafd09915542b0c3d27bc10878","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.878a08b7c.0.tgz","fileCount":39,"integrity":"sha512-aoit9WoNVeNUhHQi9HM16GxhsThBYVFowS67jMO+qt7Rlljom+LGhGXDMRBZ3fg3+kLuXs3C0Tb3ZfV+EeUL4Q==","signatures":[{"sig":"MEUCIQDo/z5UmEabSlKFm0A27wSkK65j34pSIck387vtRXH+CwIgex7z/CzLatw2JdfVijDDK+7RZzpnWwBQScMJC8MxCAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U7MCRA9TVsSAnZWagAAzjMP/R2ghRbk9DG0Nc4L7fvT\nxl2CMiHSkksRQ31fv+xJqP/xNwQSyj3XV/A2gUIlD0HtIVc5++ziqQ0A85wT\nztUDyCN/L3hJmPB8rpYPv9gZxUz6kMvDeQJVTo8VRE/WW31RZWcmaHzGyD7M\nTDg9QVrWutf1v6nHb44I5FzZ20PJ++3scl/mtF4Hx5Up3Zzj/YD8HB2yfEBN\nnBfRY9dPMD4nMmqyE0d+6YDHL4r3+s/9ipXRMRiBefN+YA3uU37dCQga49oz\n4wiE+VsSUbIsez+nnl23PKsujSWSziey6S9i/Ipi25yVuTXVMOjp4ljsk2U4\nEKwK+7ymfwB77THukOj5GAN65PLWXYk94gOCj5oIJgbCavfNlYdoViCOOJAS\nafhZ/rK0WXW78ZLdDUhRztJ6Yhk9Ynvup33sMASAGaatC8paGS6QL7eCt3vT\nFF81TukLCPRHl8m340QjJVS6d80uA8KzttgZP/yup3cIdOO3tnAT59WtlnRv\nxMXYWEuGXDfCb8qiWFG7egNpctESm6oaIFzzFo0iKoM2Gn/pSjbx76L6D4G7\nq77bplHOjDaoTCSnR7MGEiGdZGSBQcZXxW8xzBHqwk+Roj8aDlNaGj14ZxIz\nJ9p7Z2CzFJxlvVweQEQwGW6hLnaQXM0kIHgY70nRjBn3CBf8lcXLfSUnLzZr\nsf+8\r\n=odP6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.878a08b7c.0","@material/base":"5.0.0-canary.878a08b7c.0","@material/list":"5.0.0-canary.878a08b7c.0","@material/shape":"5.0.0-canary.878a08b7c.0","@material/theme":"5.0.0-canary.878a08b7c.0","@material/ripple":"5.0.0-canary.878a08b7c.0","@material/animation":"5.0.0-canary.878a08b7c.0","@material/elevation":"5.0.0-canary.878a08b7c.0","@material/typography":"5.0.0-canary.878a08b7c.0","@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.878a08b7c.0_1576095435415_0.5343545923648669","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/drawer","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.397905b4e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66f3df2e0ff48704c4b8b90d14c5d6af4045fdab","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.397905b4e.0.tgz","fileCount":39,"integrity":"sha512-2/Qvfa/pQHW59ddPMYkJo+UiS4AAuQBGiIFi6gCanVtDXgn/LMWweDshEeDcz4sXu3A5/msiZdyYxtkTjtHzCA==","signatures":[{"sig":"MEUCIDL3wwYI0sIoQmYCODJ5fWKVusCW+2I/Lk78ZcfGQWukAiEA1a9lZ8uRZ4QuXpt4pHpmBkWh4u6SJ1svgNOiKZwrfHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8apjCRA9TVsSAnZWagAAbt4QAKNbxfOjC2U0+Y47ds3J\n/SyNd5zvsPRaRiO1iKsz1LbnY6nK1y1+wUw+qZho0w6BuFV7SC79yyBe3jkN\nUR8LO71dAntlpY3lyhEmStNfzNdK1KI6YYwdWXKz2WohhrepUG6iDeccpl/g\nHzWpuNMKewe+Hu9JP+JVvHq5pY8XmkYnVazrsIg4SsIrr4nV4kCt9DqOXXvA\nqzvv2mOLUDeFMu63/U/8IBl7FR/8Ct4SumvtwISCgloZAlMMBGPm0/hd0ZlW\n3fU8Q/K2s7C5e0OiDGaoyMiTUZViq2FlCm7HsChHoCyfRPN+g0I+ASCCRWIz\n9Wj0zqhdR6Z/bjKtxqMm0g+RatlWICp0g4j30SFOFU9KYCWwYrzXDyyBW2mp\na3zbtQtJpfp+nvhi+Y7/C55v3WKTWC1mjM+gBID3qBYDuURoNziNQfHlSRg8\n59E/OxceFpReGM7EiXa3K7tki6CKv8PCp+0uJcqS1Ykw7ASHuLwB9PAUCnET\no8okMPs0Y4qxBc2+NzuTBQHSrAoVqbBtbFDnK0Ugb6rl6hy3/o/nAEh0r/m3\noY/GmrIXTaPUcDe2oB9brE6BMxWcvSCWXwWkCwHxi3Ee3t3HvjW25br27yR2\n3KJPdwrsL4w3dlW2Cr35UDTOYrMd2QnDXFwStPDUYNTL7i+FMTuaCYrG6aWb\n6gFc\r\n=yd1e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.397905b4e.0","@material/base":"5.0.0-canary.397905b4e.0","@material/list":"5.0.0-canary.397905b4e.0","@material/shape":"5.0.0-canary.397905b4e.0","@material/theme":"5.0.0-canary.397905b4e.0","@material/ripple":"5.0.0-canary.397905b4e.0","@material/animation":"5.0.0-canary.397905b4e.0","@material/elevation":"5.0.0-canary.397905b4e.0","@material/typography":"5.0.0-canary.397905b4e.0","@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.397905b4e.0_1576118882819_0.32936150172199463","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/drawer","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.1fbf5bd1d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ea010e48d0290713f6c61b29f0a7fe17e55a92c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":39,"integrity":"sha512-SCXpQMJb0VKbto1cg0lx5MYpZnjMmLwf4ieuY4ul31gOBXjnLyQwf/23vwj2DS8URKuwkW8kqo4tFac2g8pI4A==","signatures":[{"sig":"MEUCIQC/zkR+m/K+/WH5i7fnvYM19B1BG7MgZj6NTe4fy4Ej/wIgJlE1BdElVFFKnNwo/zbHJPJRifABqHnMFBbrMhEvV4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o4yCRA9TVsSAnZWagAA0g8P/2e6kmOC1q3VXfopAYz6\njc/E/461YVlVliiVXY/rbqDT8u3fL2QK91Smw/oRycuqESpvf9YYk07/7/de\ng5N3lt8v0V7UDwIW8ymjmL6C/YLkg9YmWxb6Iygw/jmxh6M8CW/ibcH2mWS/\nYYZRnW120BMp6Pswf2YkexrNmmResdpee61kP3KcBlNcGMepiz0V4UOYsy5k\nybrR4pO72UahCBG8jX+zF82XFR64/HauBLBvcgJFjWJTyvfosqA+G82iSQrZ\nmpJTtq5iWki5p9/PnnnGf575hfQpTJvfeTU9q5lovPuxnFnVgiVCptdcqTYM\n7ftuRksvjXl5XjGbMVyxJiO6qHdnrBbQpp3i3brGYRd2fB4Jx+6h4WGoRCLn\n+orK01hN0rgMmpufWQeiTGJuN70c4IM/Uwk6nOOjZ4+pallKRHzsS/QPiSF+\nynbKfys7L0e/OHcp50tcTkyOARz7nvSFjaRH5PiCDWa3ZL63QNMGG/+AzOHx\nb8QCMa2/wjuJI/tpGXVZ/eQpgM1fGRUUN6CaqLNF3fhT3qK8358meaL4jIiI\nIifH6N00Hwflg1Whlg9OGpvOaQXysZsqokKpgDHdEnqpWhqigU4lYlbjwFZ8\ntFz8koofW1QSEhh7k0JuKNINnxEdEMToMR01o8NxQChGIZJgiRFdwBptphL8\np70Z\r\n=JnDf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.1fbf5bd1d.0","@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/list":"5.0.0-canary.1fbf5bd1d.0","@material/shape":"5.0.0-canary.1fbf5bd1d.0","@material/theme":"5.0.0-canary.1fbf5bd1d.0","@material/ripple":"5.0.0-canary.1fbf5bd1d.0","@material/animation":"5.0.0-canary.1fbf5bd1d.0","@material/elevation":"5.0.0-canary.1fbf5bd1d.0","@material/typography":"5.0.0-canary.1fbf5bd1d.0","@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.1fbf5bd1d.0_1576177202108_0.8311306096587621","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/drawer","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.b723dfa78.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"254cb0eda8fba341d2f14644d00c8a23f590c414","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.b723dfa78.0.tgz","fileCount":39,"integrity":"sha512-G7McFkdpjzLOPYUdP5eovvaLcIGqYKeeSOIY5EGGGsHRPQGB8eXgdx3WnNeVUtwlqf9j/YjxJ2PXgLVSTvbjSQ==","signatures":[{"sig":"MEQCIHLvIYPbWa57r1zFjhS1fIsdOglECvD0egE0GU8N+zSnAiAldH8M4AmT3v7/AU3+DP8pOi3n0v62yQ+lcNstVXqGmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p7QCRA9TVsSAnZWagAAjxQP/jK+r0BCtD+BF7CNmidN\nJT8pkkKK9aWOVvZgOQWi/jmzrPRHuSaV1ouN3zkrSUqdYhL6OGcsV3lImop0\n90uers6dCOtbJmE4xxHLoUoqfRe0UiFrQl4DJfnuBycHhF2bzeV/oT03zR5j\nqdRm1CtAQekfahXBfGEiajIyEn7umKDd83b6V9jDNijHpSShw2M5q7Gf0FYS\nLQ4i50nwSZBc46Kqbsi58ihdLkgZrv7EFdZGnuMa8XOdC1emF5IH6hKonM7/\ntjn+hfa3vEZxdygS26GhI3vRnzwLEydznE4uJnNBkeLEQEPLLUb4XE2Uq/VK\nww/PGs/VhvHndkkQh1iGDfvgqYy0n0j8h0TsUhfJTpYwWb2wM4LmFyAC++NY\nsFTdn0IBuSp71FL7VX/aH1KQcR8BUtL5KVzjQKVx5ajQLsIxvfZuGIo3ga0x\nfMm2p94uDaZba5NexZ1nl8A//1VySl1bKKQtOThHJ/5+EPpSiUJRqwI02PPG\n9VRny7rKPu77pWdLg0XwXMs0d2996PltFCh48mdcGRHO3VCh19IbncsHu8Fh\ngRfj48pT3Xsk6l09jdt0UVWdoLgRySEKdy/g9cRuzLPDhdeUjedy3bBXaTgu\nmJBH0zxvml4zgmn6gSPYt6Qo2RksEbvZ2TEnJIGPHoJtWK34fecdWyh9buHW\nNABv\r\n=aoP7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.b723dfa78.0","@material/base":"5.0.0-canary.b723dfa78.0","@material/list":"5.0.0-canary.b723dfa78.0","@material/shape":"5.0.0-canary.b723dfa78.0","@material/theme":"5.0.0-canary.b723dfa78.0","@material/ripple":"5.0.0-canary.b723dfa78.0","@material/animation":"5.0.0-canary.b723dfa78.0","@material/elevation":"5.0.0-canary.b723dfa78.0","@material/typography":"5.0.0-canary.b723dfa78.0","@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.b723dfa78.0_1576181456172_0.9503006922181103","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/drawer","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.1c494e567.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d52350f696a0d586c8ccc587f0c33675e8ab22a0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.1c494e567.0.tgz","fileCount":39,"integrity":"sha512-b7Xo3hgf6C56dom6tpmHxFihnup+2xXJRInpWrW/kNGsoqP7pIB//S0585ql0Wb/WqEk0U6rvbzVgzhMOwt8lg==","signatures":[{"sig":"MEYCIQC4+LsOBw0AFo4DGOsJgqd/Tp4q3PAmWkUEPCvI2fPxCAIhAIxCSAyzUg7PvyJf6FnrQWBrFBqr2DwMifThj8niI8+W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s9PCRA9TVsSAnZWagAAIvQQAJXOig3HVTyw/wrSUzV3\nDJdPX0OPkU3ovtAv+tnSD3ZmkCuxWXTwVqspXXU4rNxqYbXq1eifQiJM5AWe\nT2VCragYpIX1ab7hUxsz09+PdPpKF+Wq/YIXGbFCdwlQ1mfuP5VgXEpJri/I\n2rRMiGe2JekB9TnX41RlW+hO8YJ+cIwkyK4IozSmN5zOxVedzlsuexCkccwZ\n0aHrDGqzUhbZfy6W8TuQaXq6jGwhi0lozYi7abAc5IhY8d64FOnBUX3+frfP\n7I/gNWLeXzG5b94YK6PN7/Oy1VS8hIz72y86/8owfxaQovS90Y6NAPN/rsdC\n4bmVMjIawuc4MEWH4BOFNl4yTxXDdauAajtusMjAmSzad2VjxDxGWQq2Q4+E\n+RdXQW4CgRkpAlFswVYeVwrOVZY1CNfQ5DrQ4b+uKj6BxVH5EErsIs8ST3al\nJ46CDsYUax2pUyFFWV8S5599MhPEbNW2S655YFN7VuqiauOya+fdk6JIEaAG\nS4ZGIVZHEc5JKUWvgZun2taHag/aOefqg69xy1Meg9ysi21QJxLvPeMDqdlj\n2H/WJb2OCxFybqfZyPCJZDbyVi9BuQu0FdpMF4dWRnFMVD3SC329XBos4GmO\nnbqyQ8kvLS5h69YeT0IbnMG51/byLsRkG3N8hDC82MML322Kq6eHLDCsvD3Q\nALxE\r\n=GyPI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.1c494e567.0","@material/base":"5.0.0-canary.1c494e567.0","@material/list":"5.0.0-canary.1c494e567.0","@material/shape":"5.0.0-canary.1c494e567.0","@material/theme":"5.0.0-canary.1c494e567.0","@material/ripple":"5.0.0-canary.1c494e567.0","@material/animation":"5.0.0-canary.1c494e567.0","@material/elevation":"5.0.0-canary.1c494e567.0","@material/typography":"5.0.0-canary.1c494e567.0","@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.1c494e567.0_1576193871454_0.06543167911671732","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/drawer","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.c9e98a125.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcbc89fcdfc48224f8b1e5fc660f24efe31494be","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.c9e98a125.0.tgz","fileCount":39,"integrity":"sha512-qGHsEDaZLPC3bd3TKRRjz0V7uxYtVWPfgyXLoi4xtOCX4zUHHZNP+yzfAhXK2YAImqbheJILNFqoIE66D3R98Q==","signatures":[{"sig":"MEYCIQDa53zzXhTgkUCJbwK01cgZrg8qmzFbLZ6AzS22yDwWLgIhAJR9hyARq8c9VSWIDCdcg2LvK6RlYhYJoc8W2Z1UGN6o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RovCRA9TVsSAnZWagAAmEkP/RN+2EHA+Tvfi3aDbcAe\nIYj7F1jAuoX2EyxvZX6puIus2o32Dx1iXgROWFm5QuR1dB31VDvwJy8Z2Eaw\n9qgBGmQJBX0eLQO6EGsrnZ1LytLVN7vJisnoRwWrrqHxu73t9ea6m9UbxfqU\nuzxU0GZLEarsloH6s2wXP2X3+q9dqBfgle9akqfoBelO/ayW6VL1gNDDPj4s\nPtEFR92ZQ9NIwuRJyEq3MM2rFo+H2mOB951ut86V95Er6qtx1UQDurbt8N5a\nVTtdgI+90FFghePLbLXlmnrqWpWcCOGbGlEdsmY6LoqBYkAGRzdH3v/jbksX\nfCYYdwHATGzg2RxovhIJTIFXks4kMky7y596CR9jSlDCJAHrb+7rtY9bT4Sj\nQTMaDNcGsd7G9xAtPNg85A/DMn0hUiwqf6XU2OkJ3a0TkxxV3YWG0fOQ8wAb\nVPGBRn7G6y3iQ1r05NQLu7SUoYu+ZD+EGjqJEbiFWGLiSd0LRf2zp1nI8ky7\nHBfxBy6DCLM6furR5esHpe9czvVWwM5RYztcvcdvb2CGRkcr5S2FgkakMont\nvsWl/z6zmMX+ixkEFjDQkkfJGV63wZ2+IkXCbW1qoDul0VSSHKPemjbzxCbe\nUHJ0MmedvJYfHrzvYOL17TwmDvb6QbQuZ5U1YP3hgY/CJnuT0MJQZEr7nPf9\nhV31\r\n=mWzE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.c9e98a125.0","@material/base":"5.0.0-canary.c9e98a125.0","@material/list":"5.0.0-canary.c9e98a125.0","@material/shape":"5.0.0-canary.c9e98a125.0","@material/theme":"5.0.0-canary.c9e98a125.0","@material/ripple":"5.0.0-canary.c9e98a125.0","@material/animation":"5.0.0-canary.c9e98a125.0","@material/elevation":"5.0.0-canary.c9e98a125.0","@material/typography":"5.0.0-canary.c9e98a125.0","@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.c9e98a125.0_1576606254703_0.25815394313716356","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/drawer","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.5ffe8f7e3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df7e226c3859b0199ac2a13b45c284f511841b6a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":39,"integrity":"sha512-Xbt2WkB+O/n3u+dQiv4tr2sPhLzyAYVcI7BmZ0QsYjGB42nHgbMHMkYvJ9zDRnzMjygdWR/i8sZBuIahQdzgtA==","signatures":[{"sig":"MEUCIQDV4n63GBDSbriX6F/KpjtSe/XYK2hN9Z7WKBT4k5nKjAIgFgsQmw1TV9cNQwHkPX4Cd3AWtW7AczDfuFim7WXMgFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VfqCRA9TVsSAnZWagAAxgIP/1YfUX1w3Ty92NNgyO2X\nbxEK3YEUc+eugBtV9s2/v02RFXRqRuNARC3NydwLZ6cETTjd/OVS8t+zp4zk\nF94muSBljUpBVA3xjupVmdteujZpElH4ILZjSzTKE02kc6qwUlXpZoW0iQFK\n5QLFUAiMeFySy2uM6KyqxmA/11jn4+ZAuwXY6bOEHdUdBWPtpp6+cz1PUzJI\nEXn+3npkOZKrGpysgkdAzIWb9KViDpt/MIARYU2LhJzZbfNzDqvQwySOdcAx\nlKqRwCLedsHumSjvV/xOaMrnQzCjQ7UzqEXSu/zsz4Zki98qVtTYUX6kd3gM\nQfHiJaPqEItljQu+abd4rPTTOvcQ1Mj8YdP6PhwgMbua7PTP5qNu/vHtK/vK\nwwJ6Y0fEaPSLA5Fqv9W7g3w9E6KRUMeEVcIvDRmyGVkoMUi1cHqok72JhFlq\nm2fdqPexeAA9JtxJ1eiirN9BSiWyYxQzxkG30AiieRchv5hOVOjOHW0PKyE2\nlnkEZMC+wpJ4zBQyvufx3Ce7xIO7NUSVUzP2Qr0V7vEp8fmFbY+AQ67xSKcN\nn3dyovFBu0s0/cb417mrNUd6Ap1R041KOoNoCb3UtySL6+LbZ5K7usix/y7r\nnbLPrS7aPnktE3na0JWTfbAjRsKOKEopJmGAMUHKAQOtHN6oe1RgQ9ij0leQ\n2Oe+\r\n=tEaw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.5ffe8f7e3.0","@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/list":"5.0.0-canary.5ffe8f7e3.0","@material/shape":"5.0.0-canary.5ffe8f7e3.0","@material/theme":"5.0.0-canary.5ffe8f7e3.0","@material/ripple":"5.0.0-canary.5ffe8f7e3.0","@material/animation":"5.0.0-canary.5ffe8f7e3.0","@material/elevation":"5.0.0-canary.5ffe8f7e3.0","@material/typography":"5.0.0-canary.5ffe8f7e3.0","@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.5ffe8f7e3.0_1576622057571_0.49018694974299226","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/drawer","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.47949b08e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a424729e6103de7e40a8f4c2bfb645a1368e1c91","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.47949b08e.0.tgz","fileCount":39,"integrity":"sha512-hCGbD1RyeStzujKuCVMJShZfDo1cXctFsZdpKZ+AY0h7VPgtTwhLZY3WjazGQHiIxzNOz9xwCpI5aEWjKVhhNg==","signatures":[{"sig":"MEYCIQDzA+0D5eTv8DHzQxsr3utRPcwF/x1fJPUz11HxermVdQIhAPBQBg5ta3QakHeSO6d4LcV8Bsjid0l4zGl0yXKhvsxT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mTBCRA9TVsSAnZWagAAPSAQAKAsepmfa21+m1NFj1Bz\ntyVT+26aLCJ7y1JpAhT4b3ZcaxpvppCEJtwzaNS607s3aY3cb7iH+CPou7A0\n2kmT+FSgkJc1Q8jPIuDzAJNrFFXUlFzgLE2Vu8mJPP5S9Syc2zb2e2T/ftND\nFezmLTRCOEWt8Ms2milgakOQCS2Hm4UN2c7imBuH1g8fACDAy3YB1nNdJ5Tj\nD7JZG3KUmzaKtudL8+LDXGbvacANcDD95IXzg5yINRtjhCj6/H4YtX3tOgZ/\nzNjAJAgGbMKvXDdjlmR0wtSmfEfjhyqnrtsuDTWxdxn3ABQCDkN2t1KxDrZN\n6d0bByXpV9FjrhZCHdOutYFVKO6sz1Ht+Ws8tL5VSXEIXxpK3kotVu7BTk3m\ntf7vbvrRKCj5X9pEqBlL/EQDaDVPPahxcXDfOKPK/mtcwEMR/HGCNk96N8y+\npDd2+Z2cnF5aUEQA5bVY9iFP7u9nHnZQmClnnZtz5JX8Uk32tOYkm/cg2LN1\nB8e3cS4HnlxgpLFXH/UrcPkqNrLEx68Hc+TpZQQqAQ1SdWGU+6ggzWNYghtf\n+mOA4QZKL6/t9X5saqtfUbobqTeJyUCaDBiDwIrM6ntBhrcbxEn3HIn8ZL5F\nOrx65FOW17FCNeBS5Rv6REsGnyVmrkXuOHqO5Gl/AYbQqCu0lCKFBspopoWk\n75vP\r\n=8Y0Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.47949b08e.0","@material/base":"5.0.0-canary.47949b08e.0","@material/list":"5.0.0-canary.47949b08e.0","@material/shape":"5.0.0-canary.47949b08e.0","@material/theme":"5.0.0-canary.47949b08e.0","@material/ripple":"5.0.0-canary.47949b08e.0","@material/animation":"5.0.0-canary.47949b08e.0","@material/elevation":"5.0.0-canary.47949b08e.0","@material/typography":"5.0.0-canary.47949b08e.0","@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.47949b08e.0_1576690880707_0.9849757160516295","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/drawer","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.b240bcc1b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a75c46037088b297a52612c4a0675728aa5bb16b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.b240bcc1b.0.tgz","fileCount":39,"integrity":"sha512-AI2WSOzZO+3GM9soEPAU61tPNxTCSFLdmOKAjc8zDoGvxaw87/AdtxQs7+MM9W/ADS4i7gJUWfMLRDXiVY1Bcg==","signatures":[{"sig":"MEQCIHXWc3pxzTVYTltfxBUp3Fr0Wrq3cEapU3b9WxHSmQt9AiAWixeamXyhM5vHUWLbe5LKxRtBB1XPrPd6ErU9MhZT3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntZCRA9TVsSAnZWagAAjsQQAJOND9SlIpBx8NSyJhMm\nx9JUz9wkTMmRR/GWNFjBeaQvjOOS3PdFszlhcXj8e+Mk6oCoyG3B8/dqg3id\nMjVAAeU1IVBu77gDF7rPR2Y8kxWxBR47dF0XQxa2DsxpdedsxBOpoW56Wbsu\nPDALPN7TdCUjH/eiNx6+vzW/Bv+ruWz0F2X/WM0OhOfWJaDxEYyusEJDi65z\n8AFaiqDFOS05V5Sv/3oePCvHyULJRsU3ZEarV1CoiGd+6+ZPs+AVMwGCmM78\n4tnBXBhRIo+WG0l6CQ9jpSJ900pAKz9Fb51OxINVMxR9UBRjQtfBVXlnKAk0\nnWzOg3Q9N6rG3GOXFRoQRp+5zMpP2nkIR2kglZZG71rvfUaHFKSILw5vS1FK\nE1wSaGaa0Uv309Ap68m5bTgWWaGwLWry36Z7ktC6BS12tWyJx8Ky9wVrFMXP\nd3vKHcbmoUXTwL8nVIOwcZqb757+sg1VwKl1v5wbHqQQh4AVndY3RmoeGCfp\nexVsTFBo5xuMhEiiyV3o5NHGE5io7OQVicSgEjuFKZ1lsMxYBtVRy8RtmaCZ\nySwCO9AE5l6IjSe0EcgCdxUc7dWY+t9r9/3cNKZciwyY82bHTZUpi84zrK2d\n4jMUK3CgfcFcxAwD3C+zjg/7mSCTbbjX83kGHnB/SFK16hCa7fyjaFMHlhow\nJ6uM\r\n=E1fE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.b240bcc1b.0","@material/base":"5.0.0-canary.b240bcc1b.0","@material/list":"5.0.0-canary.b240bcc1b.0","@material/shape":"5.0.0-canary.b240bcc1b.0","@material/theme":"5.0.0-canary.b240bcc1b.0","@material/ripple":"5.0.0-canary.b240bcc1b.0","@material/animation":"5.0.0-canary.b240bcc1b.0","@material/elevation":"5.0.0-canary.b240bcc1b.0","@material/typography":"5.0.0-canary.b240bcc1b.0","@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.b240bcc1b.0_1576696665293_0.7204308895063782","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/drawer","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.391674a26.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5924cebfba6053811ccca1299e2c283cadcae850","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.391674a26.0.tgz","fileCount":39,"integrity":"sha512-2SfBTgOn/EUN2HLXiSCs41hSlf98adi/vi0EW4j4xwiQF0tI0/MbT6h5pWPZTJh+HwfxhMfX7rpDGziAr8yPVw==","signatures":[{"sig":"MEQCIDv2/GNNOyY9JXxqDcSXMx86UejMtjr4BovyUsG8MbThAiBrQk0JKPAgEf6IUc2IDZv/VpXj9aHTAv8a2n1rrthyHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntyCRA9TVsSAnZWagAAPgUP/0eq25Im+MTczcn4ejmt\nzWS85Nvy9mKYQTiikZkBKivaTiPcbabWLKRX2DlR1PswoRQxP+iIhxqUNKaq\nw0qkalr870ciCoqBQ5+J8qZ7YX1Z/JqdsAG6bvsmeeocyWgC87bkAVPtMEEJ\n1X/S/whHrUZ8xuCjkV0NQBRhsHuIgx+QjrO0VS06YIuDkXBMphOQNELceaH/\nUIArJKrBEE+QNjOd4knnDgCNUOxikRRuk7Wy+v9egKf6VZqmkKWynPefaegA\nROxIBPFpa+BtCXHbD5+j89e0KS9hXA8YVJt7bSAyJ9FrQgbpjYPHiu37X+65\nPBbwjEXoV0VnPl2lm8tDe+xsP4t1fMCWXSj/ez+zvkgWhQFW6qsrvjDwFKqD\nACrGcCBxtx/TMTwcDHy9JWd+MQf1clpyz6ERXLWUdaa+Zo/WwkrRCIhHhwKV\nM7jeLG1ovzcZRIedfa+Zj1LUaRGXsKJCKGf6h3HWtlhuYGw2EoTW+zVfnHka\n4Gtp+HXlVoQz+s/X/NruKG6D8BG935vyPZWaqrbuUE8Qoj/387uYQaXEdGPN\nWnB2iFXiaGgoVtCrlq6WFG0i/T7ldIGo/L8zJpdE10k3OussSoCl/y4p9u6F\nnlDmgAzpgjD+2asYmB74908oAmOdkknNh+PPpT0Lb9yOLwoNCaLXbnKX4ib5\nIenD\r\n=x1N6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.391674a26.0","@material/base":"5.0.0-canary.391674a26.0","@material/list":"5.0.0-canary.391674a26.0","@material/shape":"5.0.0-canary.391674a26.0","@material/theme":"5.0.0-canary.391674a26.0","@material/ripple":"5.0.0-canary.391674a26.0","@material/animation":"5.0.0-canary.391674a26.0","@material/elevation":"5.0.0-canary.391674a26.0","@material/typography":"5.0.0-canary.391674a26.0","@material/feature-targeting":"5.0.0-canary.391674a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.391674a26.0_1576696690400_0.05905721786628915","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/drawer","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.c4837746c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb4110a7e0210bd950e43f8edef1936dcb40a1ec","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.c4837746c.0.tgz","fileCount":39,"integrity":"sha512-rhEXn2oDilzgI3TjNpzjKX265OpkUajMGm8XrVzwMKxjyYKyKDP4SoEK+s/ZqilGiPnOPKuWyg87u0P/DdunrQ==","signatures":[{"sig":"MEYCIQDe5xohjnC/lCje0KQzDHZMR/YTOlnfIgWw4B4a+6xoNQIhAKupAclpLM8gqmNxcAd0fpwVIR1q+5xvjQnHRPjW/dvs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n+ZCRA9TVsSAnZWagAA6FkP/2QoPk71qC1I2TI7eb/i\njuHUPID4+sYrwOxGfpkqRrTthfwCnnVdzdoxdy5fFMTAwT+/gNq3Wsq5/wNy\nofxt3G4NMybDpwfe3OdaUGH/53jWEcQoPnqlFRVfEKza9O5FZXSsfF0ALdcU\nr3ilhhKSY+KT3jhArO/QX2mvtLy+3GVhezxhVppU8+6Uu+bc0AbanHmz9ICX\nngqjj9DMZNUZvwxrYRf14lh52Prc/JMB9kWsm6UqYW7+uJCSBvK8KglXpQCP\n+RRvphYLOzr3lHLYTrGbtdyiFAi272yGl1SAJj86pNIh65+SQEIC91cJ45Df\n9lCnZFz4ftJrw2KVAMXwOmomwd/s1+CcQtIitbK+rHg9Y70tGD3LA52dxFMA\nOe3Q3cJTtZ/yPojG9lJcQjZaWW5+rnJRphzYtrVf9I1RE24u4Imvz6LdaT62\ni5YTDTyjto35pW9BhdorHOb90gl63rZFnf5QqyITlsC5HE0befHf13Ovedrz\n+kgD2adyltofs4oa28Hx30YCatyo4gKSSAxVdsx5nmwBAlRK+FAk5HyI8FXl\nNV0wL9VyHlYHwP+uiWexvwVyzgLiP8MgpqibsB2J6rTe5PoQS1hnYG1a312y\noyRyiHKwokqiq6IJ5feqWPnmKVzDvhHdSjsz4q+OZZET1985/dIo9YHT1xKs\nnsKk\r\n=HfmZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.c4837746c.0","@material/base":"5.0.0-canary.c4837746c.0","@material/list":"5.0.0-canary.c4837746c.0","@material/shape":"5.0.0-canary.c4837746c.0","@material/theme":"5.0.0-canary.c4837746c.0","@material/ripple":"5.0.0-canary.c4837746c.0","@material/animation":"5.0.0-canary.c4837746c.0","@material/elevation":"5.0.0-canary.c4837746c.0","@material/typography":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.c4837746c.0_1576697753518_0.12691694364888062","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/drawer","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.e41a70425.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77f94ae0cbc1b4f22330386d77b0caf05ba6cacd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.e41a70425.0.tgz","fileCount":39,"integrity":"sha512-QyCVBw8nHbobqytvnYklwKk8XBWcGLe/fw/HrWjoWQXGv666SAjsVAypAtd3oeq6bx+A6MIrFpIqxumcRq8JKQ==","signatures":[{"sig":"MEUCIQDIDpwIgV8pmhXRmsw8sU73V3T3ZOm/zq9HZ8O1ymse9wIgYJen3gXbWG5AZ+dhYMFNegbOUvIx3US65oOjcNxWX+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rRkCRA9TVsSAnZWagAAMO8QAJ2aDP4hpndRuCH7Q2/y\nNbSnWmkzpCsbh3IFtqCwHigYuAFRXQGxAv+XRxVuRJ0YBvSppxHniUpHJRs4\n7fMUEboWQyV/FauEIZVM388KqgTMBYHjl9iMl/aLqB0nrWl5wz95VWKyY8n9\nsdnz3yU2Rlc6/sqVYtdZwmVHKvHv33uBQOfeGPSoRDSpR69cTI95cxQatGOQ\nn7DIhz+fv0p/Xw3Pqz9nWHl2wRPRsrQhyuvcIUnKrzsFwuJ4SJWhRMzXNSmJ\nuBSBXSgYfOitbBUAoQYVeJs1ERD5oaiqs8+Rm7GG0WdnGJyxRJz4XdE+MGcf\nWZpS36LJMGRN9/hOrTsGOWMBeiE8ySm01fi1aIQ1cLZwywe+vIm0vT7PAOoZ\n2I1wFAOB0ZCuNlVJ7DsaYj+eV5SNM20eicpu9vEM8LCdGqoA6OWBKcKFuiNn\nSs/ESn92fW76vYGdyhgvm0GD7jvC3q+3XUJ34bQwhaqrAoG5VC9BsM07NTQ/\n32TkUpXQdbMh0U8j/X4ciFaO0jAZ0tp64BqfD4KtrXEHfnq33Ep6x080FbRk\nzIyPQqtjYV8gNX6XHl92t04tP+l7wPodH8MrzdUPHPwaeJbVSNesAbyXTUtl\nUj/YRAecRMREZGuaRRL6r8V7kA1XHGDnTRkibDDun4gjpb2nxUyS+k623mAV\n+vRD\r\n=oR0Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.e41a70425.0","@material/base":"5.0.0-canary.e41a70425.0","@material/list":"5.0.0-canary.e41a70425.0","@material/shape":"5.0.0-canary.e41a70425.0","@material/theme":"5.0.0-canary.e41a70425.0","@material/ripple":"5.0.0-canary.e41a70425.0","@material/animation":"5.0.0-canary.e41a70425.0","@material/elevation":"5.0.0-canary.e41a70425.0","@material/typography":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.e41a70425.0_1576711267700_0.6615600150643735","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/drawer","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.bac43eb43.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83d7f96c2f4cc703b7f7130698af93f6febee0c7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.bac43eb43.0.tgz","fileCount":39,"integrity":"sha512-HzfzkGgnuUvqnFTlS97apyoQCOI1vWY4IdiIW5zK/kjFkqsxXYQoq3O+FxvrJEzi+NCOB0EJHUzrJ6UNqculhA==","signatures":[{"sig":"MEUCIFbe9vYid8sJNZ9jp5YvWDbNd40xsHJUpWOznVIqsbKEAiEAwp+avC4fPjqBdCkcPB6l2OZ/WC3PabkPRPWGZVvAR88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rVNCRA9TVsSAnZWagAAbX0P/2via0C0crKjw/YKVJ1Q\ncZ+0c6zbWMxN4GF69HeF5g5Rpj4xvsNvsOITVY3TxhJdqFE698nSrhJ00S1i\nr5211cwo0sH1SFzx6yCL21yiC4dqbO5/gnIvnatYYpt93fey+102TuDl38x7\nN3Zsr8qQnWtMmi1hH0XviB5jRNxDG450PfZ5uuEj4BAGzA4ZMVJrNy0OhnPQ\nAsGQNqdAwb97Nyk7x0Ev4vtwHqmQba3yBywg5EE1QtSXprnwx8MkyXMYtS2K\nqjoCn1rZlIbleld5AmiuooWD4V3JOxt1gIM1vR6YNHq9hhoIg+RZnsM4eg00\nEbImL98CNgkbwDq4LyTGtP1Zy8SzxArMe9Hi97cMdJ8cGzqtwCpQWoXTsK3J\n/MZzlkw8Gcd4tnCyr//6pyDMcSHgQeivmiJTknGp3xtiLzNr4MoDivuW19lr\nJa5br6B74nphmioDYa+fQ2ZQJYjZUhWO54mS0PL1Eo1y6lTrKHnbrcjsPc8w\n+/JmFh4QWMWLeBOHRsu+fmu4KGqJ3F1t27xKsDfgpJeNwUOdIJpidIvhcZ/U\n9OWeH/qFuLCX4j//5B2Q1B+NfJly8K5X6yy9dfFraxWrDXA61bdTeccnGq8Q\nSYOevJicDOB6XADpqJgrn7E/+6UUeU5b3b6KO962cnyin7hF9tFc49NC1NtW\nLs6K\r\n=XDGV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.bac43eb43.0","@material/base":"5.0.0-canary.bac43eb43.0","@material/list":"5.0.0-canary.bac43eb43.0","@material/shape":"5.0.0-canary.bac43eb43.0","@material/theme":"5.0.0-canary.bac43eb43.0","@material/ripple":"5.0.0-canary.bac43eb43.0","@material/animation":"5.0.0-canary.bac43eb43.0","@material/elevation":"5.0.0-canary.bac43eb43.0","@material/typography":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.bac43eb43.0_1576711500906_0.46411822408309367","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/drawer","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.2e491de55.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ddc42c076c2648eb9dde23a73f2131fea7735d4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.2e491de55.0.tgz","fileCount":39,"integrity":"sha512-oVjkrpOhoAc38vkxr+py1BMvh7u6EImIodo2FaYbQY4M4KDoO/ImrLjFevY5kAozre4i7ZrOE1qgI5tG+EZpbA==","signatures":[{"sig":"MEUCIQCM7Ls16zjR2pgYmBDyRnllxvQc0O/cQKo2hb5ZlvDCqQIgSQIgh4QrhHWp6l2slGF8hDEfTq2BWo3skOI5o5nxUfg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1YRCRA9TVsSAnZWagAAY9oP/jZmf24vo1jz8d8rkfnU\nQtoL7Rsr1YV8BqnVpdB/N6xvRMTZcYxuqZ3/GK6a2ZoZTOpAvyw2kCk9HXyL\nm8Ct1Z25rpJSvCzUC0WZtWlMf3aTdNKkXkDYzqS7zUolMuWcfrlojLG8BfPI\nd//MzmQdpWBv0t8nS0fhXHmp0/hYo8/xeeCp/YPu/3xbG/B6jylV4DgXWQaH\ncW9ovsUufiKQiqT3HV0Dx8oxP/fV6uItW6+k9qQeJLX1OJ+NBFZC0AE4NXmj\nCdmhBbIdLxVXBGk4p9rnKsQsjDLXk6nd/r2Xnd+DB7hJeZxD8CQUTSh61PNC\n7ZuPYy0ikZ4WWfFB9DKSMrKnMxQMwcBH/MOO7Pi7eYnwYTgeQturyFFqXPy9\nyRn0pS46M0DfeteWpEI0bKJAAqJN3xLjO2htn9JouIaAUA6SCIh+qXvQi7kx\nJqkYILbStg9QgbE5Maa57sChvBe6DK/fxAjUjuOJPJg+qMSFtFQFHv6ah9wV\nOQitX8A4PTOdml2t0bSV9YNiHG+3yW6rqYWSz7YMw/NZh+4nTnljGU/Qy2Uc\nUOW9khswESu2m8xY4GIHwgILUIbg2LshZ2h5WtEcxb4Xrae4uG90livFU1bX\nKqCDHInnVkdj6KBOpuD+gvM8QRs7dTnRHZ6fjKGLQZj7cc/ITowNNwq/2c6v\nCYeZ\r\n=Ttjo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.2e491de55.0","@material/base":"5.0.0-canary.2e491de55.0","@material/list":"5.0.0-canary.2e491de55.0","@material/shape":"5.0.0-canary.2e491de55.0","@material/theme":"5.0.0-canary.2e491de55.0","@material/ripple":"5.0.0-canary.2e491de55.0","@material/animation":"5.0.0-canary.2e491de55.0","@material/elevation":"5.0.0-canary.2e491de55.0","@material/typography":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.2e491de55.0_1576752656679_0.8843442415386769","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/drawer","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.ae101c144.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d39e915bfae5b95462393a7cc0d043a77e74262","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.ae101c144.0.tgz","fileCount":39,"integrity":"sha512-N6EabJGZjlcVebOc2hPhwx6x29JDWa4avlQXuRRIuUxIKVUY3o3P0exPtVG4OUfEcS9YPiVQTvqSXv7hyPhKMg==","signatures":[{"sig":"MEYCIQD0SvCDcBiRwtNyPlOUS8tKjkzSixUFsCSExxyrC3L92QIhAMP3BHg8h/uD0ACr6sIfYoMUKqxluxA+8MHrf6xJ3fnq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6STCRA9TVsSAnZWagAAENMP/i0UpjtWYM15b6DxYMKC\nZ0Otay/TMmSFTbkr3VRQlzKMDtPKP5xI3B2jrL1CUwVTeF7Psn4XkHNeykB5\nBT/MoKbn6pjzsYp1tF2kV8Z1BBBLjATpTAGqP/8MSZDguwCrXgFq3RJS5h+3\naLnR5IJQQkOnYzUp1zatLqhraC5qXWCCHpaIGgpB3WTDcclcfRA75GW69b9c\nTbOIayw8T5PEpxaxOgH6qiRcVcANYJUUlTfYA32/OCMoa8PSGjVX+E/sjfNZ\n4m5oaeKQLeEHhip00KRNkvEbg4fJC4Tg1HJ60Kiv6rYlhtBbx22XDl6XWZ2N\nqd4+WAVKDrm7s7P174T9KWkce/d0HTCYI7IYcPXLg4Hp41QMCgC17l/PVO0+\nHM9MyTE7CkzJT1CfaQ2OGnb/ZJS+Yh3R7e4OpfitAxE1MwaWv0rreCOkUFGq\n/zNzSlN/0KNr2ULnaTGJlnpE1SOlYP6+1BkfDy1eKoVW7ri94AaNTB8U/acS\nhcwtD9XfIl63IlNvQUQB9wjtkc7G7kvYb22dX57d4Dx81zYbCk7/2o1ysGJr\np0Ty9Dz/QLgRFSEWzQcT1cqvcEugMGeFfSvL63JBLqo+lyqQmfQZqddMyGlA\nQ812YCk0lsCcMP2TFp1Oh+8wHl5wbVSqEYM053icwIvFqKwlW4J60k7SY4ml\nfrP2\r\n=zGY6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.ae101c144.0","@material/base":"5.0.0-canary.ae101c144.0","@material/list":"5.0.0-canary.ae101c144.0","@material/shape":"5.0.0-canary.ae101c144.0","@material/theme":"5.0.0-canary.ae101c144.0","@material/ripple":"5.0.0-canary.ae101c144.0","@material/animation":"5.0.0-canary.ae101c144.0","@material/elevation":"5.0.0-canary.ae101c144.0","@material/typography":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.ae101c144.0_1576772755055_0.8184632782306804","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/drawer","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.a51c31f26.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f355acb2212c4097d9410fbdfa0094fea2fa15d9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.a51c31f26.0.tgz","fileCount":39,"integrity":"sha512-/4faznzr5vbk/5czecpm15uJuT2vLJkxAg9dm/YlkTVOqt4j+T0M4C+jwCZSbj99u94kdNQ+fxaJB6ioR+igXw==","signatures":[{"sig":"MEQCIEVBSSBqnmzC3n7jTX8/Qvqr/e9dNV15ydmlwnlzIpELAiBlpmaf5pparaar+fz5zbk+DMvMhjOfJj5S2fNQKKB41w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+7AlCRA9TVsSAnZWagAA/eYQAI784DCQidKvMDQUAly4\nQEjK5EOtN+GXKNdwk+g9d2AobaXJFAN3+8gmzj9FBnjUL3VicUaJlNa9VMEF\nuWrD9VpdmgNsHCjPdYp29E+/+t+Ogmga1CM0GngOFWHO5fwbYomhkd6/E8ys\nztbTmgD2IOEP2/CduraMi2SS3g5GmZb9QkMKTQUlPfuZr9NOx5iGh9enFFj8\n1f/EcdQWf+rr+TkUV97eK58N5843+GwYpf4kD8iMewCS2tCfOwR2NoLhe2v7\nWpCKyaFml7Jbz+GJEaUKbMgGdgfq/5tnWk2Ty1HdAdwAmJ/zwpsI9hWH11pP\nZ5nytYdSuSoXN1aAORh3QOG6Jf7hN2cSE1zIrTpNHQ4LYOXB+Z1XorfVn9SO\nuPfsEwwSgAmFKgQvKN6dKvg54hHx+IamNIerPE1sZ2HStzZKqdgbFcQsmVXc\ndwWOUi1auT0+JQkQmA1mT2Sevbl7WN80ppvI0LYxZGTRABnL5UCGXe7bBYaD\nX7HairYpGWLd0zdO993tIzOo2AkbrOLQzgKjngTUr0y1pcElIz1QE+P1LkjS\nZ6daNuoCX4VyWWgrV2VcOKXcfZ/FNDhRi2BY+05QXFGSh60u5MY7Ga2Q1opE\nLk67GGY24Qx8dML03eTBfdR3C0K1vovKLKMOMJgmmdZ8Tw3/cwJQsjbR4Tid\nwei6\r\n=nJ41\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.a51c31f26.0","@material/base":"5.0.0-canary.a51c31f26.0","@material/list":"5.0.0-canary.a51c31f26.0","@material/shape":"5.0.0-canary.a51c31f26.0","@material/theme":"5.0.0-canary.a51c31f26.0","@material/ripple":"5.0.0-canary.a51c31f26.0","@material/animation":"5.0.0-canary.a51c31f26.0","@material/elevation":"5.0.0-canary.a51c31f26.0","@material/typography":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.a51c31f26.0_1576775716758_0.020573809527854037","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/drawer","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.21fc4e13b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd5127a6b99a6e6b05cced5ca7a347925103e0bd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.21fc4e13b.0.tgz","fileCount":39,"integrity":"sha512-UJKOPz3ItcqfiefzoFCeS/MSFka/nQfOwqSc6A5BY9vKlnnyGdKxYrwPZNNnt9tOchea08/hc2YM0tDyRzJx/g==","signatures":[{"sig":"MEUCIEJLBoNXXZlGsJE7Zy8pLy1112JtxbJVU0DOKZR9D3yHAiEAuGsSqKGfx6qCJJ/XpD3OunKO5NqqbZnbByzKHYfOEC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++taCRA9TVsSAnZWagAAZsMP/2JoP4+VsYg3vmUGEO5d\nCz/XC79azK6geJxwnoGQJLpptwIl1VBg1whZOg3dKQGH1uHrzQFzoSiYXbO2\niu5TNj+H2GXthhxvDr3OtYgSiEvg0p5DADu2XoJ+1sw/lYqMlGfrAnCuubdc\nYyTsAPbdy3T1KvBMezHSBVXEStQkeaQh+L6o0yk2h+4v6W78jWOmaIPI2HRG\noSmNO8ucNog/932gpYJd6Egn8QzA1D9M12jtD4dgZBobCq4+957v+SEWS604\nuBehdwRNV0ko34Jqp1kL09b1nfhHK93uRIgWqrRb6g6L4tIyLaGQ4+r+5oOZ\nkOXBiqhNFIc//48UZtV/kmkbXwnQXQ8wCKpXFzkPVup5n7DCHSrnCWv6TRdI\nWkT6ZEHcE5YM1HnfXHVg/GyoLbS6nA4600eCjk0ydHwWewkEtkAqXU/SUFmz\nTdk4gywyqUmfoqa4lKTeaUg3zwIb2ef0+LHvOew+t8Smslav0dlU1PIwJjWB\nE1izOZUCc7yMkzOZBGBHDRNO6hPDyN54lgFQZS7/ARNxDeKX9fnX4YOCFxM8\nF4XqXcdcstrAz3FWBeQEEOxUDZH316RgljA3FPX7bz4ei9IKBmYcFZGGzLiH\nUE3DS2rbQiJEdbPi4KdYL1fLSWkBoncZ3UPNmY46PswRKki31wKzAqQATpoY\nt4Al\r\n=KK+q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.21fc4e13b.0","@material/base":"5.0.0-canary.21fc4e13b.0","@material/list":"5.0.0-canary.21fc4e13b.0","@material/shape":"5.0.0-canary.21fc4e13b.0","@material/theme":"5.0.0-canary.21fc4e13b.0","@material/ripple":"5.0.0-canary.21fc4e13b.0","@material/animation":"5.0.0-canary.21fc4e13b.0","@material/elevation":"5.0.0-canary.21fc4e13b.0","@material/typography":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.21fc4e13b.0_1576790874404_0.8168116967397467","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/drawer","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.d2ae6e17d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5e86b2738d260b914fdf57bc6ec588bcba1dd75","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":39,"integrity":"sha512-D9mk6cMtHQjva3MXVePK8Qt8OqCsflOlXgjTNVfd5ePVM1mH62zVE/kzauLyJrpep/5lgF7EVyip+IxbHhE2uw==","signatures":[{"sig":"MEUCIQCaj1CwGDZUCU63G4lRCWSCsQHNbahPbMwgDrVBZatQJQIgLIzFHcmksiG03J7t8Dw9O370MHMmKhN6di/o3GcK7qs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/i5CRA9TVsSAnZWagAA410P/3jNJe0aXkgakHTXHwcQ\nThwVOy5lvabGAJRKIK+R3eY5WtzsXYIivierWZtSxOcBEmOenrDEvQJqO6PV\ncKc+419kVf3DAXw4ps9aOXk3QMMeUzipybJGZmkKPKfuXrWL6oEEMdYFyAcO\nykDeE+aHC69hU8uIxMktVh9RecWbr70kZ0+VenGPx1wVBCpwRrTCALc8iXFH\nJSFGJjsLS4Y4FUoSfPF4XwwkyNbkqRO30ZgK0NNsp24Nh+95HdHk8f4a5SoF\nK2alYYqGzL5A/W0RIB6gIrH0kDZkihvFDWdalMHJ9rLy5xnu5DMYT4MA5gv7\n1WjHHglt3FQRtUuVErO6n0Xjz63z7t4N0CXS0BKYnWfHrLkju4kcH8FlE/At\n7/7VDginOXe18MkzerLQQycF4vtYoFHvkbqNC8qs3Dnc7D5idYKHCM0DXaOL\nlc/WA6/Voz1TX6XIsaJoTqvEfy5sXwfjIBgpcgHYeR0TYaJ7kjPBj2z1p6fX\niIhqZNKTmsUkjW1yJ30q2k/JAi8j+tiz1FUFQRej6GUA7u9+MVCogUEMIzyb\n6o+E2I5nfcHg2h3pJ8nz4fW8BgTvXH3kcSkpZ4mw3JmeMfSHObcqg/ojmdzS\nWQJg0q7iti9pCySgT8tfKqMWEpt2BIeE7HpZj+g7iazakTfJGoTE3JaiiJNa\nR/et\r\n=x9e6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.d2ae6e17d.0","@material/base":"5.0.0-canary.d2ae6e17d.0","@material/list":"5.0.0-canary.d2ae6e17d.0","@material/shape":"5.0.0-canary.d2ae6e17d.0","@material/theme":"5.0.0-canary.d2ae6e17d.0","@material/ripple":"5.0.0-canary.d2ae6e17d.0","@material/animation":"5.0.0-canary.d2ae6e17d.0","@material/elevation":"5.0.0-canary.d2ae6e17d.0","@material/typography":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.d2ae6e17d.0_1576794296569_0.4702861308794366","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/drawer","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.ba30399ad.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44758ba023e5438783f7dc7da96bc43d21a3b013","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.ba30399ad.0.tgz","fileCount":39,"integrity":"sha512-Najm0v8lfWm2zM5Ank44KgJ9NQN187roOtzNsJqV37yoL6fGjI6YA4QXFfs1ki72CUe4xqxdFoona+oxCXzf7w==","signatures":[{"sig":"MEUCIQC1u0RplWyVZEANFfon1eSCGFQ28MtgQmopqKz3W6+8rAIgc5YfbvvgWOyGPG0b1S+aXahNaueXUnSsyFecURErjms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B+TCRA9TVsSAnZWagAAntwP/2P4ulE48dAg3rGItsHi\nlsHu6ZbkzsiLnVLuPll0lJTxKmnwdzhRHc7MNvoa0EoMsvf3vCetW0Uz6K9s\nFw9C6fSDn+zMafikxlnGlE74Am0q6ocnXj3mpVNxcHiXY+bEum8YaLYaOVyj\nknpYTkDAU3pLfk9JVh2OeOiK2dLefN1Wss3+Pn7sRNMTVxyhTeb9Ynf9nWgF\n9ZyQkJY+I3L0h9NKwNd9AAjuXttIIa9XRyhzKaeyBCgJgqeXc1Af8UyfOVVp\n+HQ/KrQ/jtcfBKfAxz+/I76YrQR7nS1UdjLbU03gHJTNv9u4pKC1f9ryd6iL\nWxcPDf9jQSdBZvqg+4evQJEDeHlKrSAPNRLXlbIvnUj4EoEDU1gdZs9I5vQM\n5xzmj5kNSzKFWAk/bYl4QFM+HqSGVMkJXEf+zy+jeyaPpNMoj+aq9v7s3u0I\nFURNC1/v9q3UHmFK2tkM++xJsf42jZZkjDkxFa5yAyG75NVoWdVjdoFsDTtE\nSV3hbn1x5wBv4QrbREmiffh0r9Q2Nefhh0Z5lUfM6rPcGPXASU2BMQwH6mKu\nwi3zILA1XrZOJiRH4jc3+ep93eAgs+4ZS3b/RHMhuoi6sKfSsea7flR7ZRCO\nTh4ETFom2gY7PxTKNm4zvdEVdx8FtDP1423jNLchWATtqv6LO2jWD5q3U+3E\nm8x7\r\n=eXAc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.ba30399ad.0","@material/base":"5.0.0-canary.ba30399ad.0","@material/list":"5.0.0-canary.ba30399ad.0","@material/shape":"5.0.0-canary.ba30399ad.0","@material/theme":"5.0.0-canary.ba30399ad.0","@material/ripple":"5.0.0-canary.ba30399ad.0","@material/animation":"5.0.0-canary.ba30399ad.0","@material/elevation":"5.0.0-canary.ba30399ad.0","@material/typography":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.ba30399ad.0_1576804243405_0.2999520040579009","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/drawer","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.a08ccec35.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eeab03616a91bdecab33365f7f8faa306ad75cec","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.a08ccec35.0.tgz","fileCount":39,"integrity":"sha512-r28cWVKi0e4ZfP5skV2WVArTZYaLj3u89b/bYg3OrW3GvcvzsFkU3yn4VpdPHgC5b2oueFw4e6lFGT3PAaxBNA==","signatures":[{"sig":"MEYCIQCxgKSAnBhwqpFd2Nrpd2+uuYq0jKw9R5xlHMC+Bw6RrgIhALvFbJ/vjFfI7iQLKtNeJRIDKpn0zeVP4X9wz4rJJBd6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/Vj5CRA9TVsSAnZWagAAVbkP/0XAN8Shbx00VX8QQTLw\njOJbZS7WZuvyb9W+hszHW8fOISGdclg/gpviDrscKRJqwOwRP0lSrK+uv5xb\nWLEsLcGBW9jEtBQ2vpCPNUjjnWs6RQHKlNPhtJA6zxmqwJmA2Taclr1dAoSR\nVdH1wvZcXOyrjOIqET4le6VdSlCV+9Osl5La/q6pXoAg3fH5+dSzcFDWgyIB\n6dfeJpI8dqGqOPwaA0DsHxPaQZWn9PWhja2XEL+m4tu36WXA5IRmltFuhiBw\n+FmWNozmjgNS4sdX1fmZrtcqXviGsq1RES3trOmxNPX47UEEKstypaZ3uPtu\nXdM5QtZyleWe0nEgsNGw0lX+D1ZutN0nGdj1fPjALo3fpOzzQMWbWcs4jZ+s\nzZv8UjY0Qh7u16a7q+1nqxHuuNp7wsyeJJHboBJwr1j2EehL0KGuz4XX0lcR\n4Pg5xoYxZ6drI3NrieujwSG6LVyOLdVdfMJ/iVWvoG+AdY6msHDHZbyti6pG\nF4+cJxCCACmO/ilcr5SCWffnhJh4dTHZyyyIBaisOeSgoxbQPktWBHRaAMXd\ntgBiE5YxMadAUGl+VaTinf2Y6KyWhe9aw0Jg2zXNeC2SRf3DmuDF3f6hrl8D\ngNCPki3b2RKxFzl0y0YAKJHkLy85Eb73WSKnZ6+ao97NOK/MNywwx4okZbmJ\n3uGg\r\n=ckqo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.a08ccec35.0","@material/base":"5.0.0-canary.a08ccec35.0","@material/list":"5.0.0-canary.a08ccec35.0","@material/shape":"5.0.0-canary.a08ccec35.0","@material/theme":"5.0.0-canary.a08ccec35.0","@material/ripple":"5.0.0-canary.a08ccec35.0","@material/animation":"5.0.0-canary.a08ccec35.0","@material/elevation":"5.0.0-canary.a08ccec35.0","@material/typography":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.a08ccec35.0_1576884472584_0.36597448710708824","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/drawer","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.a2f75105e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97a35e985bf5e338a15285349edb19cc26c94238","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.a2f75105e.0.tgz","fileCount":39,"integrity":"sha512-cOJDodappJBiIS22eWePCNTmibdIV9DZkd+WdcZtmcbiQRQCOGFFJW3xOihq51Xa6hVPRyQJn5cuR9CleqvUdQ==","signatures":[{"sig":"MEYCIQCVb5YeTe/Ly57eLeJuwxAgodxuf+G05sG5hjenVzQJtAIhALdobB3ELXNOCJUVW5VKdiBvv8BqGAK3RDVJTjNytfkp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARoSCRA9TVsSAnZWagAA1IsP/RtrXhvgDJhPOOC485XK\n7y9djGZDRtAEoLABNRoXMMtHvYcDpYRpoI5lE0sqb1JwXVbqfMuJcIxzDV0l\nNVjPCWoCyvttQU29LpNAfnejxIh31RgLzppN2cYmgX3YBeh921LkD8RZdO71\nkWG7CUA0/axOcrRdidjNDjPPqsQ8E5qpHqaisTgPHOOPYbSYRTHlUo2+O50c\nv/z0KJ0sicia7DjFBeASBg9QKzmXiKS5pyClN/krCHzzeJnNYGOakb4ym4OT\nubEdoHVZFBzJkCLnPkrs83yyCR0pPPnRTbzc/OC65vW1f0yx7cT/3U1R3HkD\nkT3ztdjXbH48XV0l2XNzI4ujtogfL88o8tn30mAH5FuwT9WlofPbU7VP4QpZ\nNRk4tUPOkKVQW4Lp3todqTAaA3LqCxd+bbPy/si9o+eGrmYOX0ADQ5vQxKFV\n0pOEvjCHB6gQ7bRrHK19MIVcvIt8iy/sgitRLqKMz1Qyq4UjhO69hiLF/2re\nYHRph139nXdLQMmk6ei7DjgcWBUD+FpBONfa+F+cyGY/xRIdoCGs6zb1g+dz\n63fkH/DSr6Gz3rSUzbeAD9bxYfG4ZsH5PrqQLyFMX7Jydnr7GRuzaMjqpHLV\nZ8kiwVkVWBTbsvu2/uFGcJiuEGh0p7BzPmygwzyh5Vr4lgcCyPyrpiKYw7Bm\nCJTw\r\n=SKim\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.a2f75105e.0","@material/base":"5.0.0-canary.a2f75105e.0","@material/list":"5.0.0-canary.a2f75105e.0","@material/shape":"5.0.0-canary.a2f75105e.0","@material/theme":"5.0.0-canary.a2f75105e.0","@material/ripple":"5.0.0-canary.a2f75105e.0","@material/animation":"5.0.0-canary.a2f75105e.0","@material/elevation":"5.0.0-canary.a2f75105e.0","@material/typography":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.a2f75105e.0_1577130514157_0.4109648422480696","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/drawer","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.c054a24c7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef58e19fceab413899b124b5f61bf6b75cf17a1e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.c054a24c7.0.tgz","fileCount":39,"integrity":"sha512-lwAUrBngqOJBW5yV0psi4ubD9kfbPe6k+Sm7CMgQ/k9zjeuG6+Z1rUab0mWc+gvr2FseA2RSX8ij5hP4eUK+XA==","signatures":[{"sig":"MEYCIQC6Q3EfvQbSu+U4DQyQsdnZ+SbJduJ1IoCN209p1hlEjQIhAPHLxvbXd0048ChVMqyrPvs1GtEBi/7liTGrKgaB0eti","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATbACRA9TVsSAnZWagAAeXQP/R0r+/ity18LJItZMfS0\nLFvVn50Mr3x20hS/d6rjSu3reLT2TGDvVDGTBRAgBZmvIV9o/wUVcIxJA0zV\nfqlQ3RQVAnELcxh/9CebfcPm5OHkd0X/femFRiOLkPBhX6d+YtghbDOTc26L\nlQzXfspm/QfldRkVZ6tfDqO4gy5mLcdsbnQR80jzrnDSHSPBY46whdYzZ2Oy\nm46pyT1IbSqdKUQ2ofcv7DZE5mtDHsVx5WgYyUKYOIbRgkRzYgb83UEdnpKB\nFgQky/j0GLcl1F2ZrLN4c8sBt7GTgmKPqWcaPhdr0H8qd5YSRT2TrLo1cckC\ntGkpGxqiztdFGOrt83LctqWwEuJ/7rk/P2zHQcpgMLL/A3Ce86l+hLiyAaYz\nBmrsepUVvcEq1hqW14JHbYD7Q9K63F+CZLLurapvG8IaS14HMsaoQD5/M80o\nOPey9Pw5yeMtMNN02uQv6vGQMLW1oarn3YHmsGEVCryVp5G0Lc3dN05b1QaT\n9wNVXZqW72A2+uiKuEzaFC1xNYe3VZgNV0L/hsi1htUQU1o1LNCiTccp0aXg\n8Kz4vxsQrz6A+d3NK+QB8lr9S6AlGWnpJVgGIuhJJ0DjSHZm71d2/b6vy91z\n8brNT3fXCv0y4jpTTAGwxZwwA9CQPjeP/CLcWSDZLRPqV6Mb8uOykY/aWCzt\n1M4Z\r\n=fNeX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.c054a24c7.0","@material/base":"5.0.0-canary.c054a24c7.0","@material/list":"5.0.0-canary.c054a24c7.0","@material/shape":"5.0.0-canary.c054a24c7.0","@material/theme":"5.0.0-canary.c054a24c7.0","@material/ripple":"5.0.0-canary.c054a24c7.0","@material/animation":"5.0.0-canary.c054a24c7.0","@material/elevation":"5.0.0-canary.c054a24c7.0","@material/typography":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.c054a24c7.0_1577137855609_0.571022264221928","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/drawer","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.c6808c51c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7caa58d63c8aa78f69f84fefc3f1807680e79572","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.c6808c51c.0.tgz","fileCount":39,"integrity":"sha512-rHCBDRR/KgHFFXfhK2BvlzMs3KdUM5i7jOxeEuRbllRPBb0YNMxizIc8cspTIx55ZoZ/naTaCFigA20xLwne8g==","signatures":[{"sig":"MEUCIGUW9zIOoIcIwUiok8T7qQVlbjADrHOrAClUo10iyIpkAiEArzGSaOO/kE6okUYXFGujKuJlhYeBlgSTLTGAoElzKWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATfMCRA9TVsSAnZWagAAaacP/0Tgi1k8dZZ0NhRbwD/N\nk66vXjFUvNqJcsdYdcBMeE6reerBQfbaR2aHQwZutnKFS6k+2H/X1EJqBqtN\nFpn3Qk9h6o8hewAOy99xgjq2rGjN4sp2gFDyfnF1Owj3p2jFK3aJ39kvWf9u\ntcfIDaD7XNmcv1FcP7FFdK6OZiEfUAnhaM3NnSp+LcT7CDCNajhbhTaq5Yjz\ng3As288adcc8jA28mBJf7lbNTWPW0gZvLANV/b92jbkun0pskNgDdTMVZVn8\nde7CrlnCIKV40YOTzkSrNBZznznn+R6qD2sSqm+glxvuQ07jC6SRXVAUPDvq\nttWNMR1MJJ4EFDB8Z8++nQ3E3il/ng8/CBRkRYyhgbmKuvPBt27zgAvzVdn0\nW6fECJhu4Joilxurn3bwmThyibrQe2VPMh+G1mOI98iNh0xrGlcI5TwwAR6u\nf2NBqduwswp6epmXcveGW22FImxEMNDzB5i1Q2RlBDLeboDakUDBLUPL4bxO\nihTKL6eZRwg7oloHEinGMv2gOYv5aISS3WKbq6KLfw5JJByedSgs8AsVdCHf\n/uAl4ji72JnuyHLoQASgFOhaVyCV1o400iNgMILRgisE3ET280Zso9XTJvIB\no/+6k3m208EqTvRxaaBxnLaRVfwJTD8pMxQEb8bO23PNOXYs8u1LcONxbKq+\nQSVU\r\n=dhhP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.c6808c51c.0","@material/base":"5.0.0-canary.c6808c51c.0","@material/list":"5.0.0-canary.c6808c51c.0","@material/shape":"5.0.0-canary.c6808c51c.0","@material/theme":"5.0.0-canary.c6808c51c.0","@material/ripple":"5.0.0-canary.c6808c51c.0","@material/animation":"5.0.0-canary.c6808c51c.0","@material/elevation":"5.0.0-canary.c6808c51c.0","@material/typography":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.c6808c51c.0_1577138123592_0.7013019270382337","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/drawer","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.7bce9cf77.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3fa308c9953529e53c3190d50f3bb842c254cae","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.7bce9cf77.0.tgz","fileCount":39,"integrity":"sha512-8xsyfo5GcdAGVHfo6lbs6PUTeCEeNSjYAFx0yjGu0V6IRHEs2RL7casuBJnVp/c0xJ1yPPLYHnb2V9HRsvOZBQ==","signatures":[{"sig":"MEYCIQDa6M4dhBFZqueZ7zXPnqh8AaXQbPFzLvBZPC4xofstwQIhAOBPOii88Fb2jXbzkby9Yz59OLip5FlHuDYgA7DWjEFE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBQAACRA9TVsSAnZWagAAbjMP/jK/XgSO7uoVOujXzyZE\nx91zuBWmVcWsUU0Em9pabCTbFFvydq+XO7MHavcdlZClecmapGCYByXGL8aI\n2OvzZRqRdj9YBBoKGiJ72SeGIQB6fdj0kaioS8hyeeRf5o0/jf+IDMhnNruK\ngaIj7FNgTdwHRQh1rsq8OURg7ayn4ruKdB/m2Wwh2rlvsXnaHeRRNJ2gvpu7\nsy5bLWLv1b6iIvkgLCP/Q31NtT/2A3GWegJlJDZQjXp/WeVdGKP9T8aSSJ6X\n8s1HTjL8h9cGeIKHReAL1jhDt9GucQsA9DQPAa73wXBsBawr9nWY724wEv9N\nonNZzuiWur8CELtBmHPFY+BeLI46BdICrNWvlpNoB9vneOw258HvkPwiydu1\nCX/NbmCDoMDQPbNC+TIyntiZiFgtbEPgv5MlkdH7YW5qbpEjsIOvSZ6/FvjF\nxsBsCx5xrC4kG+HbsPygpsyE56q2E3OicIjX5BaM0i2D+BhPgdqVCfxuvm+s\nZzoiZz2QPmF4ZHTJqa5Bd6q9q9P+za5j8iW1qNY+Ca68/pwuyK1ibKLkF23I\npuxGjFyD15VY4cbYbURGV/6RqVjTs+E6HRidun+WaXB1h3ouwCUUhd5fVyhE\nIjkhPkhs8bUQmyY+BJWl7nUuLY6QLS5k/ZAHHmv/AkwfBUitsxra1mzh+NeS\n6Fbt\r\n=29rC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.7bce9cf77.0","@material/base":"5.0.0-canary.7bce9cf77.0","@material/list":"5.0.0-canary.7bce9cf77.0","@material/shape":"5.0.0-canary.7bce9cf77.0","@material/theme":"5.0.0-canary.7bce9cf77.0","@material/ripple":"5.0.0-canary.7bce9cf77.0","@material/animation":"5.0.0-canary.7bce9cf77.0","@material/elevation":"5.0.0-canary.7bce9cf77.0","@material/typography":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.7bce9cf77.0_1577385984021_0.23299961404129155","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/drawer","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.c92f038c3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b8b65d1f75234e71bffa2311c77fdc037ee6f29","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.c92f038c3.0.tgz","fileCount":39,"integrity":"sha512-ALv9DKCVKCjWa17wC+G7fKRODIgQ1hl8/HQaegKqeGqahazrmP/E5SlA379qZOonfjss3aD6Zgg/m/ch94TWJw==","signatures":[{"sig":"MEYCIQCuv3xIZacygJjBPzFYSY+EzC5ceEqa/iEEma0ObOBmiwIhAMLZ3taWR/xdIIM85ZHi5Vvtvhnw+qo1hedYelih9W4P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnRRCRA9TVsSAnZWagAABN8P+wUIURdZ7jRj9wQU/me8\nG293FGS2sKPd2LdxM1UAb7TcyakUbTBlXftdAX3FqJNSz1bC0pNJM7AY9/uC\n4+MAWgXFM/RhYmmfxVuSZAry/95lwP+iVabzvxkwP5UpAujA91jXmXfxerMc\nOPPmS3gfaEEeJWV+5zGnswVK/6WrBhoCxoiTisagWfCdo/rDtZgXomtdPOa2\nPgnE1ps7Gj6XVRE1ZpaGOROTtdpXr1wR7C9ueVfMPKA9Bd+jXeXtyCaZgCZB\n4X4BH1vKpRlgL+L4yWta1VT9dbpwRU1CamuTRPapTzaDPhRd6bbGX4gPbO+x\nNNJsyRsPiq2kuDIf3P/zZIxXhgUL/071jcYXrxxc0mvd9j9Z8A+KM0yKMxtw\nTEP/mPdVeiHI0/VlmCRitRA3EnPLO4+FsUbLZCvZDmyS/aNCd8rGNNWJP3Q/\n5hkcY/p4A1oTKzCCqc1WKbSdB53J5XffrmQfLUyMnTPksBLkzDXJD9lsP9u2\nDXnKNTdpz5xRyAwKsN53YVaNQgKRCLn8xjbYlnKUGmqwsqBKV1h6BS7LCAcQ\nkI9m7wSR5WM54FLmxjKaPscpxgz0jt+vj3yfzTEOQP98Gx9VXDuh65NOWfB6\n5eL6of9eFxvkkKsEdlh4/Kjg1/8uVhCVv/XA41vpLO7GDr7WfarJIDe6Mnla\nz5rG\r\n=ZVVe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.c92f038c3.0","@material/base":"5.0.0-canary.c92f038c3.0","@material/list":"5.0.0-canary.c92f038c3.0","@material/shape":"5.0.0-canary.c92f038c3.0","@material/theme":"5.0.0-canary.c92f038c3.0","@material/ripple":"5.0.0-canary.c92f038c3.0","@material/animation":"5.0.0-canary.c92f038c3.0","@material/elevation":"5.0.0-canary.c92f038c3.0","@material/typography":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.c92f038c3.0_1577743440029_0.6482914018043318","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/drawer","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.1f1ac7558.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed0efb505556f37ba2e5e623bd04f8c61f931c16","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.1f1ac7558.0.tgz","fileCount":39,"integrity":"sha512-HaVcdbf/FMAyCK61/4Y+tUJJod5XM0dOOGcwSlFyvrWdYGCNyW0LRCxPjr6kL795yoYxjc5ao7CTQWFsDoueeg==","signatures":[{"sig":"MEUCIQClgRC74TnW7cgbjuek55Hp2vohJJW13i8aqgOeZgHYnwIgJbDa1lEHgm39uoAkE0YNAzf1uVRiNA56opeTuu0rt78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlibCRA9TVsSAnZWagAAaEoQAIORDxNl2CdskAKTkmca\ncBK09MEmB0FU+nG9Cn+xHLNlXdUiUoWS1nuJd8Ex/xP6X73HvGxH8SqsYn2/\nl4azZd++1QFE3owgK7bh3/pWtLSoxito/tahat8GlCLp/74xq1up6UIMKQD2\nwNWZpgZ1Q0yKgxPZHWTTqdsLQpEWI/vWICFozJrQTo239XI3MlaM8GYLW88f\nPNEryP+qENd8F32wo9hu/JX9URrhw0aDKtUjLXOv6H+yELTZHgBUqk/7HCnz\nCzvkbhAOqQW59/pIDRaaSEEMJnERM0GKohPVvGYxRCVI2yW/kpQyGyirh6u8\n6GwxRKz/NZqdkSmP4zFrDa3WhlviuqmFLNsOBHUOBzJqBLEIewqrJL6WGuzL\nqkQv3tu4rdK+0U48bMUsqB4pO8oVu1R6m6zrSQSGt09r3KY7nuGRmWCaEVvg\nL03KjbDkC8zP+Hg2V7CXvBk+LUPlM+jbQmVI9ILePBWjfxcQSKozOBofR7qI\nyQk2luvUX7zYAyqQn0/Eu6Ey5+iOI+Bfur6fPHbv0++ufJ5V6c86q9hC7AKC\nG/kF6z9Tjj2Dkc9x+obSi8Wq0sUr16PFcvEYUpzyjkk+3eAMmaUk2lyLvA3G\nOQ2VhEsrO7kLzzs8I0ZXQZeO+E/V4C5Zkcp+dnMcWHs0saUtO0jHrqQj7ngG\nV2c6\r\n=xR9c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.1f1ac7558.0","@material/base":"5.0.0-canary.1f1ac7558.0","@material/list":"5.0.0-canary.1f1ac7558.0","@material/shape":"5.0.0-canary.1f1ac7558.0","@material/theme":"5.0.0-canary.1f1ac7558.0","@material/ripple":"5.0.0-canary.1f1ac7558.0","@material/animation":"5.0.0-canary.1f1ac7558.0","@material/elevation":"5.0.0-canary.1f1ac7558.0","@material/typography":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.1f1ac7558.0_1577998490496_0.8848090770919155","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/drawer","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.ec26e799c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6e7930abf0c216393517aa88ac9f6c89175e897","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.ec26e799c.0.tgz","fileCount":39,"integrity":"sha512-wmjky677gVpPvmEtC2XGuUPsUiPwAg1jfn0Yyc80I6Wyanx5EmrtCf3i15nSceYCLAkBg8qpbUebEcHRsZxf8A==","signatures":[{"sig":"MEQCIEeWzpK5fD6teyqURPzsS1UIq+d+/ZluoxKdx5jWE3gdAiALpNRMmboCR/uDyMuQ0e5FoqlvQ1VgH9eNwI1EZ8VQ0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPmCRA9TVsSAnZWagAAeQIP/2G7hvkmVGV2k6Yb6ATQ\nbDb1Bf1cLRePkGtILACXaShq42V0JHKwCwK+FHUK/Cu1edHe6DHL3vZiRZGk\n2Vh+tcKYoC3g9h06V5MYuwJzixNrRR32H4eL4uw2M84lVUoM5Dw6SNgYRwdK\nOl9gaPP0A7hJHAhluIz3RDl1gYQN0Z9mhTmNpD6kPBMiNUtchkBHULEAHr45\n0E1xDX65IYZeZqbJjQLkfPnNQ/ygYvPo+oQ0XBQrau//xDx3obMaAgXJj1EP\nvz4CDPprnexbpc4A9Qtw/VgJ+cLFHVO718xdi2ldRejdjTs2RscbdtoAyCF2\ni8wXvqMR3WBOh2fI0eimVMIbcFkDKRBs4KtzyQNX1EpNkMVGaORgOpLds9xO\nGJFdjGNwNiVN89umPYNGV988WW7RgyMT4ooC/VbDjpxrqxu6ihD2vG24s2A+\nl4Z3yZQtDeNbAxP/k4Ehm8HXf+XDxVn6eftBDLjYmXUQ40rJySfQqL7ETyP+\n/0jCZe/y0Wono38AyGXKKnqGG6yWnDefhFaGzF1peND6he9tqwY9kHzvgMZ4\noi9VsckvfRXKMfrH1uWTXVRXUApOdazPUSMzMLWjOgF0H/mcW2yIi7IGspnx\nagjXjoPpSc/hgaLz2tYZzt7Bk8To0Ki5I6AQLD675eXyAqnIjbvHE2EqqOiJ\nddZ2\r\n=lxWr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.ec26e799c.0","@material/base":"5.0.0-canary.ec26e799c.0","@material/list":"5.0.0-canary.ec26e799c.0","@material/shape":"5.0.0-canary.ec26e799c.0","@material/theme":"5.0.0-canary.ec26e799c.0","@material/ripple":"5.0.0-canary.ec26e799c.0","@material/animation":"5.0.0-canary.ec26e799c.0","@material/elevation":"5.0.0-canary.ec26e799c.0","@material/typography":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.ec26e799c.0_1578001381903_0.10826917845196293","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/drawer","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.0a40ced40.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c63917f075f0ef696a635ba909727f50d81957e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.0a40ced40.0.tgz","fileCount":39,"integrity":"sha512-kigkmc/iJcTUiT67GsO6AHltc08jx3DXgPM2YX6u6RJk+qkJVnrnuokvjtJlY+C8yM7JYvRU4yoRMEhfVm+a/Q==","signatures":[{"sig":"MEUCIBJ71S8FgLG9cOisS3NNBjNuRzk7AHkNvfcfxEwfoPlVAiEAhWHe7bHHQWVNNU8A0TKqVwa9a3nGbEaPCWnOLY1oyMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3WTCRA9TVsSAnZWagAAuOIP/39m7K5eGIq2x/WXsN5+\nkZ7nTEwgdtIfLVLtrQf6dz2SVx6+yGbuWE2epurOXdTt2i4iVc3jDz2EthMV\n8PBUqyqKB22jcv9X48KWw0sHicZ3azs2Oj9Wtn6MqloVkFMoJFWIKFUlES7o\njTdDh8ZFQCB505OMCHOI3s3PDsJkszZ/BKp1PTMf1d38vzsygggY2gA47si/\nz9LHKrSdBrbfEhLJmdUGoLPyoeM0IxXV5vjF5vaOeXCbY4dW0vVpbJCSv9Om\nzhEpUng63NrPjzLSSwWXTnlCNUBMKtOEqHfccPo6RvJyUDJIoZJ+BdHByDEi\n56YFAbSA9JhC2H30zvbjPwpIkOBfbxpZ7ynFQh27ESUpNtX+iH8r5MSw/yAU\nTtMH0ZeZw4m1np9CpVOefYWva0uXBaN3a1itN7G9BcLFCIlHNA801vwzOtZo\n5M9cNm+s2n7Wh8xttmzeIiJ0blGcWS3xq4Hvg/QIj142F2Mwl7J1FcUOT3hV\n5lRJAicR+GK68EWV9GHHMi7FhF9/Xa5kSU+Iu17GMF7P+S23vt1fLT3dsIVq\nbNFlpxtwUnGIdU/mUIvFbsD4qshpAti0oZ0ydgU+iHdUSsXQ8Pv7SpCeDjRR\nxlOuENoh+I45lgsT+IXU3A5Z7otggzdF8T9oOaVxW3r6jfVfbMXwlCNzBrL0\nGxUp\r\n=YLyK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.0a40ced40.0","@material/base":"5.0.0-canary.0a40ced40.0","@material/list":"5.0.0-canary.0a40ced40.0","@material/shape":"5.0.0-canary.0a40ced40.0","@material/theme":"5.0.0-canary.0a40ced40.0","@material/ripple":"5.0.0-canary.0a40ced40.0","@material/animation":"5.0.0-canary.0a40ced40.0","@material/elevation":"5.0.0-canary.0a40ced40.0","@material/typography":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.0a40ced40.0_1578071442860_0.9930720775955935","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/drawer","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.3adf84899.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1d7a4afc7aca6c45c78090e0dae181beb74a420","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.3adf84899.0.tgz","fileCount":39,"integrity":"sha512-p7XlpLS/NSmhQn7ETiWhdzoSK7srcSaaLx68vg9jViRa9q56HJ8MBf8sBAnc94vuy9eojFW5g9HcZ/mRQuvwhA==","signatures":[{"sig":"MEQCIFfnwsnX/l9I/lbDk2uGvkSiFtV/H+balQVL0fhILTWEAiBPAUYrh5tiYTmXwaN1OHMwGxe6/xesVDE4Uo4ahwaZVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4aNCRA9TVsSAnZWagAAINYP/i4f5J5O2J3eLuxMvvKG\n0w+/G0FSA4pMGELnIzhAiIkVQQAR5nXQplqWF5+k5gwzmPk6dNxpPzqvNyd5\neG1pQ1E02tCYGzlzfGCLn9ZW4LRig2ABRBNg5EEfNw7XCx3nZUakfZfkl3kd\nUynkUvwEKRs0VNtfawiT/QxutJ21EC+qgJtpOwCDV4hT3rxdo6i8vJzLdyTu\nak/oC8JSkW2Zk466F0zvkGNfyb9gm/BERzPFfFbQUPQG4n4v36tpg/C+YBpj\nCIY22U8YNpJL24LJJo5KGAz6/yKL0uPGRxLPCI0Hfs8zfrer6VGCsVagKaba\nwZe+jhDnWRv2XnsrpDAyFDaVkozDoO4/BCbTicJbCBo26ZXa8dgh0hrwuzmf\nB5A2Dhw6xbPoNYwIi8f1zQtlffRR0gHz7UXiABy1HGqFn7PNWf8CUBOa0SsI\nq9j2G8Fcl7/j+XV/RV3Qvod+4vj7QOAh3k3pK1VSPPQIRHZ6zBzeAiqGcZqK\nOyEAh1o5KbR2G52Df1lOX2AteXawUmAdYE6KA6UzyZfpO8uKCfZjeptw5Muc\nnrpIwqK8p27EVeFmM9u/V+bSOqAtgPANwpc+9NeptGSgwEQsHvEpq2J8wAUk\nSDQvPHkxtGtPmSME9nzFnl0pkbLXgx9lAoojVIuryVWZkLgOwj8zyXNtpJ03\nuzmW\r\n=YMcb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.3adf84899.0","@material/base":"5.0.0-canary.3adf84899.0","@material/list":"5.0.0-canary.3adf84899.0","@material/shape":"5.0.0-canary.3adf84899.0","@material/theme":"5.0.0-canary.3adf84899.0","@material/ripple":"5.0.0-canary.3adf84899.0","@material/animation":"5.0.0-canary.3adf84899.0","@material/elevation":"5.0.0-canary.3adf84899.0","@material/typography":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.3adf84899.0_1578075789303_0.1644694467088761","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/drawer","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.0d42ee650.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb41bbee435507baeb65e0a6484843becd53fd73","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.0d42ee650.0.tgz","fileCount":39,"integrity":"sha512-hxtxd6YQZfFmYeYrjIdBM7aLcqAeSAKGH/g1eh3A/WicKrvULbkwDjE1+JzYLGBhKzAjuKbZ4jPJWK83Tafu1Q==","signatures":[{"sig":"MEUCIQCg80enPpFFZgdcgpmPXSF/zuX5Fso68MHSuUhdqitX8AIgLgs1KsrFIsXLd6DGqd5NhAGLRyp9H1jMuHt6+PpKJf8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7QqCRA9TVsSAnZWagAANXoP+wRSg38Yvo13v5R/EmIA\nMeKtkbHHg28oPwviTVFFEFwEf6tz3n3Ln4CUzrDeZuGa9zfUWZqdp4Jag7tC\nv5I1XkqtsDIXVRZM7hB5Ub6Rn3k/jJUz2nrfw/+y089lYGVkhv20e3u+cW3o\nq/0rjg+rkmhfPK2RWD1cebm4ZDmeCEF1OSMP1ubC+fm79IhcgU94wO6S7gBG\n4vLXVWY5d+oU2UHTuWJaG8+IBrOkR/XTOfAjxG1g7r/6Pdmm4G2WqAZPtRKQ\nJQbbSqtgMrPO3IH6gFy/1nnoKVGMeI6PtFxPXe7sDRLaNmQa+vGzTXE4cgnT\nNXsivdC+MwAzomIiIwV0nS/MNTBABy0SA7KnAITuVaVKjbxRz8dVy288R0DU\n12sATwb70CwRcRCHzQ6yeeWqh3apSBAZC4vT56zVqKiWRG+YcWkpA/O7lsAt\nT9ofBfG7q7XE9ChWjC+tCcfxyHSUzrc/0JmsGXsbLgMx84JlXuxj2XVi0JFC\nTHJaX+H+QZowmv8sK+eMwqN7d5xy2iAfHrKiHcsu3vVvIrNhF/RvKmADBYNI\n23qFXNL93s73FSXyUysFtn5rzYvdknTor2tEsWDmMoXSqOjn+IRKq/H/9Ndw\n3qGUP52bZ0IR8R+k1wFg/gHHGxu+vQHfXlu2ni3Z7cahGO9pVvmcFdduwpDd\nJVxQ\r\n=SvJy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.0d42ee650.0","@material/base":"5.0.0-canary.0d42ee650.0","@material/list":"5.0.0-canary.0d42ee650.0","@material/shape":"5.0.0-canary.0d42ee650.0","@material/theme":"5.0.0-canary.0d42ee650.0","@material/ripple":"5.0.0-canary.0d42ee650.0","@material/animation":"5.0.0-canary.0d42ee650.0","@material/elevation":"5.0.0-canary.0d42ee650.0","@material/typography":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.0d42ee650.0_1578087465606_0.8235110870255176","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/drawer","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.847dd1ada.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2583c686a2d18da19fd57b9688b0547cf6108ba","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.847dd1ada.0.tgz","fileCount":39,"integrity":"sha512-7aLcICtcp+QaNoIALgrHjkVdcZli+7XOpMkvE9aCq/0/ygkqVuY/CWXh0mb9gwcVOyM6uPnEaLJOLySBbmoG5Q==","signatures":[{"sig":"MEQCIDsGqeq9lvxELuk2wFGEAZPsnVLj7DsH13ale4ze7zK9AiAZH94BphUTwTylEU5kzqSGyBcdlCZlq/qCfv13xf1QWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4oTCRA9TVsSAnZWagAAUZMP/1GupBKckeyFyyrzvrLi\nYUBCbk+h4mn8g7mPTrEdtcNDDIe3NO43OUWsV4TCw8YEfoaih1s/bXjw1A9N\n6db3/D0YHd5FHCu0zmV5wEM0tfwT4QB0X8lHtkBxYYZ2b8lDnpccJJrza2Mv\nZAfblvcA8i2ypEb/WYfFbQKD6wq+qB89xET6naX6iXpq33zFbjlWtIq/o72F\nKCqBVd1OQdMaijdigM8QP/8ZoxuIO/yfJQ2yZ6y5wCJ5kNXcQfoy+UdTJgCZ\nZrU40bmvlWsvGnct3BVL5FdLEiVsz2QnsB+gSqhcEphbDp8gNz6pVVG76E7o\nvQCTHqhFjbHBd3C/L3qR+5cmLBOcnGTmQMuZzQXaLw09Vh9cmbiMmm5rndFU\nUvCRCcgc1EqbF2DXGGHG/7ivWqcttaeiZUFqaYEUbHkHJk8N0t531ri4x7kG\n06UDhTAmMTQNmhsmXiI8Vt47XahiKbCNYt/m4scpoYj0ZY6qmU1TPA//9bBl\ndgBj59Fue7Gk63Ox4TIaMeCP/zeQO5V0bB/HqTYU2nMaBN7exDmXpVKLr9iz\nLMNssfO1SE6OiVqLm3NSnRujxsX62xjJ7fp0rjwEOSjIEC6s5ZL9y3kyGTWT\n1werYnzA3/Fq/OyeLAFceGUurRUG7herzghN3/JkjXPfG+keRiDgpYuODVnC\nE0sL\r\n=toKo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.847dd1ada.0","@material/base":"5.0.0-canary.847dd1ada.0","@material/list":"5.0.0-canary.847dd1ada.0","@material/shape":"5.0.0-canary.847dd1ada.0","@material/theme":"5.0.0-canary.847dd1ada.0","@material/ripple":"5.0.0-canary.847dd1ada.0","@material/animation":"5.0.0-canary.847dd1ada.0","@material/elevation":"5.0.0-canary.847dd1ada.0","@material/typography":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.847dd1ada.0_1578338834958_0.5913565667712639","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/drawer","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.39df7e5df.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c80a4e47eb2a1b825ddf01c030ceafe9a2812d04","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.39df7e5df.0.tgz","fileCount":39,"integrity":"sha512-Dmw8MCXLZ8URxHHm7U+jq4F1/Y0NvvH8h8ToIbkeTgXOihk7XsPyruW/CV8a+2h5iHiIb+4lQVqgZBrRwDHZDw==","signatures":[{"sig":"MEQCIAI7AJDoJ+Hil3v3XaXfkj/5sigfgWvRY9eqFh/6el81AiBkguWYVAwup5M5X9dreeHVIY0B/PhqZKSA2HTuGn9pQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9cxCRA9TVsSAnZWagAAGMIP/3aaf3l36UCVGIOee94y\nF0rFWGIum5xggd7kYCCklU4MFoRwJFvpIIQDnhKOyMkX+e7J4c84aqFtXhWJ\n1qm/2187wCt5os+HOwcK31Xfrk7PQMc4TlScRPrLZ/j67K51FCi6D2X0rxJm\n54chRDfdc0BzCdP+qkznKwW9XlcqHc8zkNyjJV3ZIKFwoqsMaqo17f/BZV8h\nSY+bWPfxVW/jBD5k8obVBIa1YYxj+7kkOKcbBYu5sxi+a+SQLtMD/wBZ72F9\nvB9utoUhfPCDvInrV60F7lPsJkamq8HqROzpr4Y2hMFOsk8ZIERYl8CsDKuX\nroTakiu2GM/BUk4fqwiW5WtLa4fzMQ6+bScF99eqAyf8RV8MQ3PUNl/M/Wha\nCy4TjBHoRvdb71TdXcJ3wIuxkP1eporxudXZ73f4JUrXGgsfLSAgviUCHRLA\n7Sjfd+brghG9io89arG1Q602YAUH1vMOg3sD3VKE1Ep/ntS25S+QwywCT1qM\nLDFDpYJtpzlXJ+ev9OHGS/uEX+0XPLoPBAIs2degD1I8SI5pvzYFKkOyzm0y\nCCdGkDg9ud8tBexJN+18AWqS8YmByCIfZm7ha26nNe2JciznBlfTy6GKZTAw\nK3CPiTlUDnJXQPdzLR3PChnZI9tRJcmPmzlji7kdt5UqR9YNOOrkfMOGV4KH\nec3d\r\n=vuOr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.39df7e5df.0","@material/base":"5.0.0-canary.39df7e5df.0","@material/list":"5.0.0-canary.39df7e5df.0","@material/shape":"5.0.0-canary.39df7e5df.0","@material/theme":"5.0.0-canary.39df7e5df.0","@material/ripple":"5.0.0-canary.39df7e5df.0","@material/animation":"5.0.0-canary.39df7e5df.0","@material/elevation":"5.0.0-canary.39df7e5df.0","@material/typography":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.39df7e5df.0_1578358576922_0.27134147758767213","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/drawer","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.f1a2581ab.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab9f25fbd10df22534b93fc7a0ad48b431cadc3b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.f1a2581ab.0.tgz","fileCount":39,"integrity":"sha512-NZAr6ZrbcxfEkwl7nobGLuicHtFNkKl1Grm0bC66LseSKxrayumP1dKmFxhMpIBKzgWJJJcDCm+uRj9H1ZCblQ==","signatures":[{"sig":"MEUCIQDRjzxjznCX6GUoaJEdrIRsqaemLbD7WhPL9BPZvo6/FgIgUuZLO5ZSRuvtR7pym5/ERVpXTPaYmH2tz3RV4zigif4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJ0ZCRA9TVsSAnZWagAAFVYP+waDi6iGybzbp4CYq1IM\nu+5iAJcBhQnU5FPPXMyk6ykCOSyEYxDHJgfYtohcffToqM8LZHEcQU+1c/ZQ\nL+G6DudyyHop8SiPNQvHiHTlB2xDeLYUB9XIw0ssaOGsNtzBtsZeQhGeRiEg\nQpN1fvEK69PsIlXl28KlpzEkaf3dZIa/Ccs2lNjTf1UzvfUhUK8ZBObIM4Nq\nk76vAz586sbUt47sPE+5l+W1cbFg2zSMPSzuecfm8cAMm2LiTGaOjhMprxF2\n2AMfdV9oDFKGfRP6ArLzhCL4c0pHBw0Q+787k7SJUglPfwUkh/bA4QS3sUJA\ngQe3da08B7rse/d1mMdOHclbvdzi8/MSeH3XzBccO2pxzcSmxV5fuVcqHNo0\nzTsbeFNU9H3HrbOXlsvYs9dUHITrArjk+pBTAwdzMJ8tJaScJt7+VMgXzqWV\nltpmU3Sff+FqhY+X6uyys8M2SdOLsXUnWl2z4Nl/sIFv0Z7qDHDrWcEm0tTd\n2wQ0JURG9qBc+Epao5ZKNao1b/0UT9Fib3YVQKvQcmS+RkQ00mKr76FnRpQc\nx/MM+Yeq2FPCLqrl24fBvspgTjc+3qYZWDjEWsN9HlZKF5FxvSOmU7wjhK+V\njvthwct0viImtNHSnBPNG7mIEmZIFjYjsBoPru/4UX1hnyPClkcLNVjMiGM0\n27T0\r\n=OAHB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.f1a2581ab.0","@material/base":"5.0.0-canary.f1a2581ab.0","@material/list":"5.0.0-canary.f1a2581ab.0","@material/shape":"5.0.0-canary.f1a2581ab.0","@material/theme":"5.0.0-canary.f1a2581ab.0","@material/ripple":"5.0.0-canary.f1a2581ab.0","@material/animation":"5.0.0-canary.f1a2581ab.0","@material/elevation":"5.0.0-canary.f1a2581ab.0","@material/typography":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.f1a2581ab.0_1578409240499_0.5610652243265368","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/drawer","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.7c7ddf347.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48c458a6020a2f9c7fd658a337d66137cf086ee9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.7c7ddf347.0.tgz","fileCount":39,"integrity":"sha512-p86SQQ1dTWqFgvBVUzLhIl4hjL9DvyrRdaFa/IRQzresHSGL8HpKsn989oBVEHJvIV7M80Cw+alaMFgM6Z4cXA==","signatures":[{"sig":"MEQCIDSumSpw75w4Xw+ihtlbTFZf/7oJGJgYjAbNLCqWat6gAiAqZ4QNzX6srXlhM8qfc515E4XWJtz0xcfe7JP0ooVayg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKEKCRA9TVsSAnZWagAAXu4P/3nTIsO8m7YSnVdf30MU\nI8ipS5K99rOtbG8gZUGG3NCvU8eKfHl+VHEqGlZD56MrDYaclGzXVVuQP3S3\nCtLhhQWFGDzpn6WDHnQb3IEN5wUudHzxboRQfUeDOhJlDzYxjJkuFg6g/vNl\neQTad9FDgSB410/G7q0MCBOf74Nlw91vLbIwjxJkJZ3w3Ca8Cd6HZMnHnOW0\n4wuzbVycQ6X4R2BSUV7tHqB6vGp8OJ5/shWMtcGWr1LkY2mKE8Qegp5YCi6B\nfmaxon4PoVFqTEhA1n6KtjW9jcc1O550/9W1Kck6aVtYt/KWHZQd8GBCj9OP\nYaZ9ledhnpZD63YZ+DPNSNQ8fmn6/ZkWSl4ztOKblXC6rcy+IDmBRwnAIqLZ\nthPDzcqbYZbez8Qdt/LNGk1j5ZKugE7pY8LpKt97TDQRwzSkj5tnQIG1wII/\n/u+i28ZZFvo7rYnx2JAXgmOzAzBorPIOh1OV3uqdVXc+0FnUVO3vUdKNGoJx\n2zLvZKK2wP2ABlQuW+xy/Tj7o6YZ3+TWskZTPQ8vkYvAsgcthIJqiG5H1z2V\np7xn0YFnYVjWokpP6iuY4FGWqIDOmMRLD8hAqY6ksRzwD3xpo93eYCMgw77Y\n1IeWjv0P/RYn50LXF4RjZ/vk/EIfpC5xvucA+twg3i8qx6NHogKQSL77b5gs\nEedG\r\n=HgCz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.7c7ddf347.0","@material/base":"5.0.0-canary.7c7ddf347.0","@material/list":"5.0.0-canary.7c7ddf347.0","@material/shape":"5.0.0-canary.7c7ddf347.0","@material/theme":"5.0.0-canary.7c7ddf347.0","@material/ripple":"5.0.0-canary.7c7ddf347.0","@material/animation":"5.0.0-canary.7c7ddf347.0","@material/elevation":"5.0.0-canary.7c7ddf347.0","@material/typography":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.7c7ddf347.0_1578410250390_0.5098255989835283","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/drawer","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.a1c84d4b5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3cc5e1a91877e6abe6a1f2cace959d6a8b340cc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":39,"integrity":"sha512-uyEK7W3/FE9xJUGDF22gn1vll7MCi/zThxgFjVgJrfTast0ph7JRU7Ns6ZUQHNdeg3uw8YrrRHzbcOX3xdPpvw==","signatures":[{"sig":"MEQCIBCRRuRwNL276V54F4CHTOSKZ907MP+w9cn/M5J7NCYdAiBm4RDg754uTXMFRira/s60PMUREjAvnjyU5l/3bNSwJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMnECRA9TVsSAnZWagAA35AP/0Xd0N/+1PxUmbI/zWZT\nFa12Jy+aRTAEiJyjgLeMZ7qgP7VC2cY39vNND8/bvW6dHSstWG9E0BANYUns\nM3sYIKTJPz/8WzuBmA8IT3uI1vqmfh4wHHmZJMPJ9x5bKvdLBAzrzES3pG1Y\neLyzvlyWLy2LYYxaHSXiL/XGecvSxqru+5Njdbh/wgxIUwMX/t7uXP9Co/T9\nclq0NYcUcN3vmXf+cmNXo7TEJZa3u4Maw1nJfGfBb6PMcUI+bFs0IY8iTXek\n+bNAUlpNlDu87RYhuMn07td97/X1zLkEPf4aoC7siwHGhdO4FJhITZ38LWp6\nKmBauOsKxSPuy19ascXJRICSic4WsSJV6lwsPYuCckuU7s/gbPV7+KFsirwe\ndc0YCV3JjwGG2j9yAjUIfn5ckzDGq1WyLhxxASfOtvIfk36Gt7aMhMO6d05V\n1zAjSrQQCZMr3v3febw62yzXKl+UTZycUvJL0XBHNkAUtCW3KNh5cmqb4dFh\nfNAfLNixxTwvWHLRqtBRFWr9UW5W3zlTdkO0O+LdWDW1dlikqb7mtrPXtSb5\n9DNJguARAD/2VdOOCJ/HPaRQ1jvuJRCwJhRHrF+2Z6zVZE5fRZamccWMGRTz\nU2/m/orcgWyitpDSxUTVzKY9KV7BtrAcZsOTBPpR6mqF+WDdxIgglsjo0HSn\nQUtS\r\n=TQaF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.a1c84d4b5.0","@material/base":"5.0.0-canary.a1c84d4b5.0","@material/list":"5.0.0-canary.a1c84d4b5.0","@material/shape":"5.0.0-canary.a1c84d4b5.0","@material/theme":"5.0.0-canary.a1c84d4b5.0","@material/ripple":"5.0.0-canary.a1c84d4b5.0","@material/animation":"5.0.0-canary.a1c84d4b5.0","@material/elevation":"5.0.0-canary.a1c84d4b5.0","@material/typography":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.a1c84d4b5.0_1578420676001_0.8292849063231271","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/drawer","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.ec9f16578.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bff21a4afbbb62d28d94495fd1171aa6b954e5da","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.ec9f16578.0.tgz","fileCount":39,"integrity":"sha512-lh/zQB5pmpv5zglUc/UemORwzoC68Bw40kj4wCgFkAMXxyBo21pnNYOlthcU9qdrIx6kCBttX6YG5OvfHiR8SQ==","signatures":[{"sig":"MEQCIHPYTiONM2MhSC7j/lifTqdowqVRGE8CvGuFogqzNH4rAiBhShMpHsztVDHGc2r4cAEb2qAAOWuT+fku2HhL+BdjTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN6eCRA9TVsSAnZWagAATJgQAJKZoKJ/JD2cYNVpDu98\npMQ9MJZ/6ko8s0g0pO6NOq8OYMu8qIKigmvZjisLaihwxSyZHN0pP3b6HUmB\ntOpZXHLwnZXU/m2hKvIlqFWeG3YrztNAskXXLQkDZ7ecXs7pnOaUk3h5koS3\noqYfKIi/gRg2mzdWM/S9MYQfjwclzCANsufe+xPovnN7wHxuVVR7FFZTL8xW\nKrRlWtbmiEPCAZ/h9axiDZjt2m8c6fErf66v90tdr1e2QW+64Q1wOY90vz/7\nhaGv2mBcUHCITer4U1kWexjBPt3DENScZnSqB2vnA1AspvpaEQj3jJLxIaMM\nNM7UnSEfbK9r+hi4JFwK9X83D/XQtdlgsFGNLf5f85LRFOTm3KKHHeBOq1YI\nwweLD4UEboOeNFRsSpAiV2qhdi722WEHYwcFn9A1kjmQb5lW3Eoni0Vl2Yqg\nzrDbVifivlaLJbthjaZn9CYvMnUuwXYEyWTieSWKtiMmb6lai/A4SktG1pBj\n4iHllpypgSSfB0afgYlysrjrviywpjhlwOnw8+c2r3M3uz98l2lMzZfLVOvf\nRQgmi2ZN4Kf3ZJxxtCoCDCWJQgQVRDOEijCWrQilPTA9m1CPyVeAB0uzKKD1\nckMlH2JkZihWnVyes4PGhG40nsEaeFw5UdM69N7IYC3IHUEbhQroqZSPCjiH\n2ZYi\r\n=6Ki1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.ec9f16578.0","@material/base":"5.0.0-canary.ec9f16578.0","@material/list":"5.0.0-canary.ec9f16578.0","@material/shape":"5.0.0-canary.ec9f16578.0","@material/theme":"5.0.0-canary.ec9f16578.0","@material/ripple":"5.0.0-canary.ec9f16578.0","@material/animation":"5.0.0-canary.ec9f16578.0","@material/elevation":"5.0.0-canary.ec9f16578.0","@material/typography":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.ec9f16578.0_1578426014142_0.5198474173013548","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/drawer","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.b602226ce.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"269fe5d1bcab35274f19b2030c76dd67525df429","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.b602226ce.0.tgz","fileCount":39,"integrity":"sha512-kk9iIOKVik35v118XKCZvDSAWXI5Mw1SKIT9cAFHbUgFPFtbE8rUdnozVAeBawH0vT3KnrTiNR5zwAoksVbopg==","signatures":[{"sig":"MEUCIDgEN2SqqN+TuU4YVaT8LcdgDQEn0hqT2NN6+GEpJDzbAiEAkCqru+6qkJ9o3oEC55NAwYQtjGeXR36+omBau6vmCs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFOcACRA9TVsSAnZWagAAu2gP/RTRfGn59pRSz4lK49Gc\nVPjcJ+TIrDqgQBgqdp3bMrlzLDQfDHy9yCs1T5rtCcMz9L49NyeKhTAiHszG\nlEnK8aM2DRG0yhfmeBxmjukBYlppAo+lORejoyMymxegUnfvBItvmRhHZlB2\nk6naJfTaGs5P7aD1ZZuB+nJLM9s31BpYB686U4IQ9/DZ4FFB+YqvN7DqCaO3\nYOkLpJYb5/mWICeYbz+LWsxA6DG7KrxQ+YCNChTEDO+PQf7xZ2SwTdCj+1c3\nm+dOHULwFWYlG3mLtlZqkFJE73A0EmZqWBNAWUNUO23cl/HVS55LleVGPPVR\nduATJXqr2hbJnwc6ys6e96NKtIGIOWXrdVrXTKF8Re/uZ1EzdoZUbmN2BZpK\nOX7SOrYoWDmkjMksc91muWtokOkoEf5kw7asNsy+sAEuzcnOVAmQQyMFGiMt\neelbTJs+kAZEnmgHhlGkwEeuH/QutUj80lYXnEHY1i0kCec04KWr42/UFKpY\nNKKQvzAq0P8wEM7ONZ8Hf7MZla7KRx9qqT3CAAx/pzNYP26RntulQddNajC5\n5OVjtqcXdQtO36H3NEZI1gOPVfubHdL1Vi1J9IMwkSeQHRtApAQOYslFzEku\nZFtMoSi1hhiS5cKm+xzcyF7QmKBKJ++WSum9AKn9fqa/3E2Yi+Akb80HCdie\n20Or\r\n=hF66\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.b602226ce.0","@material/base":"5.0.0-canary.b602226ce.0","@material/list":"5.0.0-canary.b602226ce.0","@material/shape":"5.0.0-canary.b602226ce.0","@material/theme":"5.0.0-canary.b602226ce.0","@material/ripple":"5.0.0-canary.b602226ce.0","@material/animation":"5.0.0-canary.b602226ce.0","@material/elevation":"5.0.0-canary.b602226ce.0","@material/typography":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.b602226ce.0_1578428160032_0.7300676892914635","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/drawer","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.b2d2dc08c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fbaaad32620691e70bfcc9a6da2cf27db27348d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":39,"integrity":"sha512-mmULgE8pA9OxfH6Ebh0LZrfZsxawHC0rgd530e7D5zd1aORNGqcpFNd7YIeyWNGgNg3He/ultUePt71fiZgOSQ==","signatures":[{"sig":"MEQCIDsmZtqoiVbn8ZEgQISl84IzWAGLwlbu3x0c1BC29xZEAiAlUZ2QKJp5rJYcu03FH6fyj/iG+9ygvbExznmXAQX/0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPebCRA9TVsSAnZWagAArm4P/1k6w6k7yRNW42wW3Y45\niBptyrVkkVawdMxZ1B89ybk1HC/L2Rzsbd5ue3NJ77pEJQfhj+r9h3NT7/Dr\nPl92o8+oWZcdtP+oB2OzLrIKz5qYgm+Ws4cxyoBlpOOeRehgldE0nZ0IAAk4\n+6C35oRQKG+G+3uKBS8914PwbR0v1vBKHwPpR3yI90OaB8LMwtrLcqtqd+b+\ngap6XRvfwkLf5zNGGQZLZa2JDvQrcuF8rvFwF3VhTlBWYjcKZ6vsHPu/TnSF\n+3Rt+CWRveeQw4dEqm4OK6oCsnIquWyk5iYIEYKDVv9o8RZn7TSYc4j2rwx3\nftbdPQdrIDV1QIqat8+zQFxpuFVLACf7sXMbOBduJuMigL9L2zx9I3T4PG04\n9m1L1xxhXQSYURDLxhUD/8+swkUphuNY/z6ffziwluqO0rOXMPqOSmXFlJZn\n+U2pfSTfMyMXOSO9SQRB8BcrF1gayUYXd/eXKsIdXaiYSSD4GWzWiDXVNIhj\n8cmrgwJiwhzVbVhoBsyXbV3JLbJPCQWxWWngIF9EzLO90JWd6ayM/GZ3/UWm\nDiYZOIKK+m5x/32WB7lIMEVhRocuOaNDqAySl9/Myti10bWOVYlqESqS3naV\nyMyxJiEkwBmg0BOWY7xBoe9pKTDhOzUy7sgyCessBAK3gdv7m4f2xu5E9OsI\nZyKI\r\n=B6B1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.b2d2dc08c.0","@material/base":"5.0.0-canary.b2d2dc08c.0","@material/list":"5.0.0-canary.b2d2dc08c.0","@material/shape":"5.0.0-canary.b2d2dc08c.0","@material/theme":"5.0.0-canary.b2d2dc08c.0","@material/ripple":"5.0.0-canary.b2d2dc08c.0","@material/animation":"5.0.0-canary.b2d2dc08c.0","@material/elevation":"5.0.0-canary.b2d2dc08c.0","@material/typography":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.b2d2dc08c.0_1578432411133_0.787119890959562","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/drawer","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.61f2d7580.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55dac68e89b754bf7b34a6bb806c0d463a7bbe53","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.61f2d7580.0.tgz","fileCount":39,"integrity":"sha512-+tzYa9TiJVXWAJRXX8JsgZiff+b8L+r2K9vyK4n7uBkHFRwPL3D+Ima6w1fEEHOFu70j48qNNzGrnjKu9T8CHQ==","signatures":[{"sig":"MEYCIQCf1UYzIUV3KA8PuNS6xlLQufZ+reUumLWS3iv+1ey1lQIhAJb+b0qWgDZ7P7jN764GaN8It8ZfXXCJOxsWF4gmc4H8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPrTCRA9TVsSAnZWagAA2P8P/3cTRbS8b+vQLWbvI/U6\n7A1bmmnK9dWmmk1kDweFZAzK3uCTDweTPw3wAXEteboMJbyQxKtmPbPV4bz8\njP1++fYhYjw9fFDHUnmByleDCKD3ePNiTNujTtDCU4k3PX+FYfeWxm+4VVRP\nz9RD+NYQggNMCFID2KIsG3u6HQ5rfCpJsqzM2+lbB/Cus7QvuHf3yGJmVEnm\ncfUI1CMz7mPwj3JR2qyDNKg25TW9TbXZroqW8G1vBXopjMd0da3qO+XJ7ngt\nSXL4cnh0vuD2WZRkBXmfhFrLCoF53bb6MSg4G0Z1Wjr8OFctpvO86DY4SB03\nlbKiJC6cp52ApbImD5Lm//Mgv6CbE/0tcHp/gyNaHwldRIOt5oYhCey5l8sE\nGcxiWSO8h3RGwSZvRBhBJN1eqDhoVY431wyDyMJEWRYIs20WyD35gBRYSuk7\nN+L3Le9mFeCzNrFjTtCztdS4wUEMwCsi3fl3I5NjA36bcg2aRt2qEwelQdfv\nCuBPX57Uj8jS2OXz8TK/zlPma83uVc+j1sXgKMzTH0HL5812mtzPueG7ruqe\nWQFhFQ6vQX7Qe5pLDLi2hVzc60QCtFEHvMm9WNwfyKbIv0Q2FIswKALpsso7\n/60F6dA1knBwWVVQujQW0Hor7Dx4YjG3pRk+WezLOXzdAE2oZMy+QZqtoZKp\nrAAy\r\n=704Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.61f2d7580.0","@material/base":"5.0.0-canary.61f2d7580.0","@material/list":"5.0.0-canary.61f2d7580.0","@material/shape":"5.0.0-canary.61f2d7580.0","@material/theme":"5.0.0-canary.61f2d7580.0","@material/ripple":"5.0.0-canary.61f2d7580.0","@material/animation":"5.0.0-canary.61f2d7580.0","@material/elevation":"5.0.0-canary.61f2d7580.0","@material/typography":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.61f2d7580.0_1578433234902_0.0021749216389521653","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/drawer","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.d1be53a2e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dda66714e4cbb30424f30aae5bd80e97e07a02d8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.d1be53a2e.0.tgz","fileCount":39,"integrity":"sha512-sL5AeRjWmmqNJYipPV7OjV4KbqHcvCvWiJqwvrQMSOj+6DDAU9xjSq/KYd3QME0Qm1UHtukGebsUTbrlDcvA4A==","signatures":[{"sig":"MEUCIQCpKXx/DKT4ERv1kOf8AT3hgxExuXwLRlue4QueU0FeAwIgQhlatLxUcU2Im2pmBQP3LG/HXFo4C2Lpvz0EtNaB1o8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQOZCRA9TVsSAnZWagAAiWsP/3hlJNJorM58REhyv4sR\n5dEVAZg+x+xYbRrDTzb6NHYEwzrqTsRtpPEipqK6CsleWUxIGyl5vy5voCWv\nviBvx6v6SkcQdvXT+ueXGhoDB5Pv2bFtIGb4Jv6J4rJnqP4/dtT7Q+HXFO4n\naPTjwsVXnb6v4FJzYMPkJfkcC2O4fKn3HyGHHQXjmCAHiE5zyagKg2b1umuE\n6P8Nlf+d9vruVDcy9Y44GtAcynBoNafday3JotfPxZGx80yeU7qokQfU55Ch\n/dlUYZfUfJmlan1KEMJBRTPcS4VrcCxQpL0t5v3Sndu787oXPxltYflI74v1\nEhrEKPl3DRLnbV4qxJtxQDu6g1NLU0DOlTN/1C3Jdu7lpWjCbcXBLCUwAaKB\n67jrLDMUdDAzD11JPoY4ZqmzGY2vPr66lfn4ZQ74Y73BNWQ+zuaHBV4h1UkC\nLF1H6JYdoxWU44Kcf23Rogsb/+L+kc3KPFmE/ikgLY70C9oEaSpHGrWWGwE2\ncokQPajNVwfAN8kIHGJP+r8k6S9ScyIf4+PcFErVw9aBzfI2YsTzLQRGKhD4\nEtZZj2igPkLnl18rPMYvt3wa7t+dunBQ1mhlddTliJPyaq5Zdob6jdWIaLnX\n+w1Rw+KKit+dFIzeUY0ItFV0HJhekNagbAb2ZtGKbJW53KQo9MiV3d/DaQbF\nrJVX\r\n=L+an\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.d1be53a2e.0","@material/base":"5.0.0-canary.d1be53a2e.0","@material/list":"5.0.0-canary.d1be53a2e.0","@material/shape":"5.0.0-canary.d1be53a2e.0","@material/theme":"5.0.0-canary.d1be53a2e.0","@material/ripple":"5.0.0-canary.d1be53a2e.0","@material/animation":"5.0.0-canary.d1be53a2e.0","@material/elevation":"5.0.0-canary.d1be53a2e.0","@material/typography":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.d1be53a2e.0_1578435481262_0.6281832579409681","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/drawer","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.9b0d06e32.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20de567294bb00ef4a59555e30ea5a5c6a5f353e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.9b0d06e32.0.tgz","fileCount":39,"integrity":"sha512-LKmDed11nIF8taDh/qxoBFBP/zLyajw9fAuHRgHPdHz5igJK7rvsM4rKJWuFcZybJFo1Yx6S/Cp8EfZHNrTvrA==","signatures":[{"sig":"MEUCIBaa3NsYnSIqcYcCbJ/Elf5M6djX+nv7vxBY8P4HjFHUAiEA+9A8DcPAug/DypOxq9c9358t0mpR5PoZoT2UNoB0oEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQQUCRA9TVsSAnZWagAAPHkP/iEshHXue5Ep+r1+l9Rb\niu+8Iy8VlU3+KitTrRLTxyvpzIcgGp4bhtTohD8FNasPFFqVTEuixQmxQzI0\netZa8HzaBIQCTqNar4catncMd1voAIctg8RX56om9qZoYEireVflgejOOCqf\nyVUMk2xrZs71YBtSx5/wbWKaPeTRrbWuBJ99IK6cydMGeYwvh5A1jqxOHfRP\nvgyEiT375RsR5qBODoA27XokAMvBV7AjCSkP0Tsq7lt9uzcEKol8NM0FXKC3\ngUMje0SEIlpTdI57U9rKeQpRrrb2ZZTUNn37HwQAKcNAFwe4TBBW2smoQqXV\nRhvuVqbZgtvJuRnkCoiLFAZW8qH0uDFmKGijG7mwukZ+P6Y0EGbwFv/29L9n\ntCG41NRhCkMZqpSmT6t41wf4vnpCFlVckNYkISTi38AnSQF3lhkLCm0eNSJS\nRQutcrk29b1w2nzyCaK2y9HSvi8lQV9vezIS/i0An7Lhc5V4Fm+50cj7g2b0\nVXJtoXFdcwRLBtFBH9OHfdny8mSy6qCuXG8Qsy9TpS20ekLwjISyPzJOdQeE\nsvi4ljqu3wlKqAj8vgOjdLdAzlVIaHzK4x5xKm22G2MUdLEQHVSoZ/3sVY/q\ns9cFMfmDRgJ1ps9jFJfkIFkQo78I/gsYYeeeLdCINlA1VIn3VW7VHbqPUDyo\n7MTt\r\n=Ilvn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.9b0d06e32.0","@material/base":"5.0.0-canary.9b0d06e32.0","@material/list":"5.0.0-canary.9b0d06e32.0","@material/shape":"5.0.0-canary.9b0d06e32.0","@material/theme":"5.0.0-canary.9b0d06e32.0","@material/ripple":"5.0.0-canary.9b0d06e32.0","@material/animation":"5.0.0-canary.9b0d06e32.0","@material/elevation":"5.0.0-canary.9b0d06e32.0","@material/typography":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.9b0d06e32.0_1578435604252_0.7861756258402877","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/drawer","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.730c807a0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f66184abe5c727f56fdf1dbd4ceff4dc834eb71","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.730c807a0.0.tgz","fileCount":39,"integrity":"sha512-/d1pFdiFQeyPJiz9TgZL/5e+RZdJqdlrpECVJWXmcvVBDrPq3oIxE22cw3lmx/h6RnprZz6MQPV2ntsLWDHsyQ==","signatures":[{"sig":"MEUCIEpOV+89jLCMCP28ou/J0T3Tj/ZwOBRupxm1wXDJWrdNAiEAjABc260uIktN28wNV0n0uypX0qcnlW37hZwvqGKRYlg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRxCRA9TVsSAnZWagAAUOIP/0mJxtlUKn5OeXniR6fY\nJbpumc3x95g0zuwkyy0oE3gwMouYDgqudZBiqf6dMQvQAquch3l5kuOWv2p2\nsl+yydQhfAwWlInEO5QEE1yiCzEQPpRQoT+NjF0BXCaHbE6WPTBdaZXT+bx9\nSZo1g1aMwRExhbZFVv5FqTw2RwX9zc6LPCVzQsvAogZnzM1gPK7mNAGcIuwZ\nXYEwe+XgpLu+CsrUtHwlaOcWgtuzMYIyr38vtkvOhVJjb32IJqmVdeVIDq8Y\nQIWejTtzaFdoxnPLUACm72/7CZcDNPpQtK437zC00muLNi1Iatv7nk3SCTCY\nMYmuRzWATX+NpYOueOGmLo5TK1QUFH6f+fbEj4RgfhYgvAfk3uqKl2emGENI\nXTFOpxUFvHhAokfX44vicBQ8uzVdHGLfECpP0k723ayfBMGhpoj1oaXZczNe\nKScNGJG0RuaAbMbWW0vi6KEeiMANw7ggVHf6k0idKAFlNgmvFol6UWJavT9w\nTcFxHo/t3l6xEM+h2BdubqapxRy9qm4x5S60lVDOJq7lkzI2JFkLE4K3g/n4\nzP4G64VqYAnzQ7qcjfJhe+qoL6bkbrZuck9/R1Eu0sYj0Kn1HJ9lDvI8yvKk\nd12PUsw28rrCMcFLUdL+kQLWXaKsRonkRLFXf/apyUd6lbeIzvRIh28ukFxg\nTxPv\r\n=14DP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.730c807a0.0","@material/base":"5.0.0-canary.730c807a0.0","@material/list":"5.0.0-canary.730c807a0.0","@material/shape":"5.0.0-canary.730c807a0.0","@material/theme":"5.0.0-canary.730c807a0.0","@material/ripple":"5.0.0-canary.730c807a0.0","@material/animation":"5.0.0-canary.730c807a0.0","@material/elevation":"5.0.0-canary.730c807a0.0","@material/typography":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.730c807a0.0_1578435696869_0.08433475501971932","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/drawer","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.2213152cd.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"242b861d05a531bfb7902a607b7049b629682347","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.2213152cd.0.tgz","fileCount":39,"integrity":"sha512-uL+9hpPiA9ArJtIks5EfUbjjXgzkgh25z62j/2EC7qZSQ7t7o3LcDSAvRVvBqLJEt/JDC0qCJ08uGZv/j3aPCQ==","signatures":[{"sig":"MEUCIQD6SYQQWfUApL4tRU7w9pZCNBQjP3dlj9iXAXuOLgsdKgIga+8w/f/fwB8dzhHt7jaZ40eY3LCoLGYJ83MnOavgUyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/xCRA9TVsSAnZWagAA4REP/1aXyGi+UyUwzHkcqmkq\nNjkQGsuvo+JCBPVLHms4Z/dL5K4t06mIzn8SgMV7JXbG4YuffsU8StC9Wt7x\nVkAuNg+xiEAppkMkDFnNWa7m19x2GlU1EtmK5baomN9rupobH7gDWDRStYBL\n1PJwBXZZX4rrit+TK0v8Q6+I3FVklwcKuS5aUHIzj0R5BH8AvNu2NLWW1UDT\nmzHWpsEE+FWLRan9xU5aYRDO9kf2U49iThG717MTGwceyTIOH9HjijXo2IXd\nGVZUxLb6MhFcFHnI1s2tDcqNr9uUK2cPlfK0DaEUi2XWfKqvtnAg71/ESBAJ\nn1MARENMhSLYW4yv4cVSq+VUDgu3ZYknDQFI3wZpeegcFneuO3JrrOkuenB3\n06wvg8q/adwTkO6YHgCHm6YlRVQZYVmx13e5VeNoM+S5F1Rws4NTwih7Y9x/\ngUCWHA3n7EpZDNlhfZA5edj4DtMm7nHipEpmaJn3qN0EDB3sQN3X/MaYhXtL\nz1mc/ggoEXehQc6nFWXdL9QplvR3tRfLVWCYUbHEwyrRU13DfXRdKV9XIrMu\nem3Irs3/c+7NbqHy5Xv3OA7BcNQgkK38cfxMl95wDcnUkndvM51yJ3Mc0nJt\nUxwVnNFW0cUitecjDEF7WKE7UFq+tD9RGgwuaZYwJPfWGyvXeKUjz0Rrhdl4\ndSru\r\n=p9CG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.2213152cd.0","@material/base":"5.0.0-canary.2213152cd.0","@material/list":"5.0.0-canary.2213152cd.0","@material/shape":"5.0.0-canary.2213152cd.0","@material/theme":"5.0.0-canary.2213152cd.0","@material/ripple":"5.0.0-canary.2213152cd.0","@material/animation":"5.0.0-canary.2213152cd.0","@material/elevation":"5.0.0-canary.2213152cd.0","@material/typography":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.2213152cd.0_1578504177060_0.6905761120421061","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/drawer","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.5750f7169.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85bf0a71a3e74dd66d615c38c539680729fe535d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.5750f7169.0.tgz","fileCount":39,"integrity":"sha512-liIse/cOGQAdspK1v381tbgZXTcq53u9PgZX+X9JljNnDbp+f0xo98aeC2dnk7bySlabpa2S1ZVvdLCcombyAw==","signatures":[{"sig":"MEUCIQCIt56iKdXE1G6GDmK2JB8VDGfHM7HuWYH9DkEfhEC4tgIgcmK7CbbxMZI3OEXFAByHGsgRf3pNyXw7vo0KowRc6uE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhgcCRA9TVsSAnZWagAAyX4P/1ATXlEE7rOUijL53Pbn\nWEUm3S6tXvbOEv9rgpa48wb8r7cXhZNfstDa6Y9acuEXTfWTnTXguyC3LSzi\nUp94Ub8qHtb1ftiEwb0yT0kwteK1m8D60+NmDMezuvxahhCr9elosyzKay5N\n+QYyxYgrOLGqYhZDAdDYa8vOW0QgM3hXiTquwgmP5BLugZQ87hRmeN4UtFHw\n69z9e4rdnoWnQOpR1k+aNnrw9MJLnB44sOiyLGnHDKG565YnSV1BCw+wnYZn\nMvdzz1ohDknMvIkmRaITXZijyN5GTo8A6sK1PZX3yE8iD5CPIsHsxLnOK1KG\nI16os8YR5yIwZctpkql84rNs6/0L+LZzvcZAuhPbBnW96XHqkxQjqQvukvO3\n+gB9OmC5/syCeInRWR6tOAJm0enHlpvF5Y0KLFKSs2laoLCIhXPysUpSnui/\nZwVmcR/w1sZaVsOReVDVQsKOZq3Du4rXs/qzm4OM7nCjLv+Q8tGfx4DqDbK3\na1APAtbxF7n7rvJG8BxDtXxwFkBb5dDPCDsQFxt5wqwZiQ08PnTsav9eNWC/\nen98BtJvse7+Lcqvtejsuo9WCGZ65KCD3QVJjk77CdcKGyfbNhYva8XQPrRx\nNWr/1OAxXEb+cod0gGVy1UBHeuX3AuiUFcesNk40r5VNqGdbI3difXrI+foz\nZHXC\r\n=sZ0t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.5750f7169.0","@material/base":"5.0.0-canary.5750f7169.0","@material/list":"5.0.0-canary.5750f7169.0","@material/shape":"5.0.0-canary.5750f7169.0","@material/theme":"5.0.0-canary.5750f7169.0","@material/ripple":"5.0.0-canary.5750f7169.0","@material/animation":"5.0.0-canary.5750f7169.0","@material/elevation":"5.0.0-canary.5750f7169.0","@material/typography":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.5750f7169.0_1578506267770_0.280557428292705","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/drawer","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.f7abc7a43.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3882aa2ab64d80ad17f899d9de5fa10e4483055","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.f7abc7a43.0.tgz","fileCount":39,"integrity":"sha512-wa60zMhlqh0Ow0n6wly5nKBLy/EqWh9rmu2jkhmLNMR1c5ZpdDcf6fDpwEb+Q5pNZsrSxKbG73FT6S7DEVh51w==","signatures":[{"sig":"MEUCIQCVf6k0r9ATiv4lwvOCAnRqF0C2FQzFnbUZeMM/NpvQfQIgV8I0F8zyilgiIQv77iLTlIYX1VrozqJSFmoMAGraAgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh9aCRA9TVsSAnZWagAApeQP+gO8FWSt2oA3e8sJObkC\n11UwQW9jrEVzjPnlx4/8Nwjc+2AC/VGOMugPWkvCPBdTwtnKuvcJpcTSVbU0\n2jaL4TK1VXSaFvzAwkXfkwl4afm+wwRT/lMbt5fJ6up6J5TsYbpcPbSIuDzT\n6mtOQ3S8//ONkT43DygKcRk06K16734SKVsBqNPi4ISb4bcxk5DbffKCz4/y\nQvBjgQa7AmfOGUhBCDbZzwEyxndG0p3kja+AiUlx7kdHlXoIPIPGEHZRi0OR\nzbLdD94ncvVU6KiyDqiHi01KsN23pMtXc4OhCFUNLoJSOXA+uVoKAU3/dDAE\nD3yfNMi3rOJckoKz0t8BjgJGV2Ic+At5MeoIFp9kDQT97VRYSNqfb3DviODV\nMVUh4R7Pp1pC9yZBkNlbfroTEdhBphlz+Va466MjTs6XAC/+5zH6uTmFGi16\nQ0m1yI4uE+GGTbszkFqNVIc0Lt7uuirK/8Nk/ukNpAE9cwZjk+sgTOh1iyni\n6/M2j/x8mGEBhDatrayrEp0hNDLoY2+qHxqpUcSPNhp4sP8b1nUyZrQmMi5s\nxmOtM1M8uSUOYl5ijuhawHa9JQMJpWYCJ8HiHXvpnvjrYge9JRC6tjkhBle2\nwaH8hFT8VPPzLWFTv1oGAYiZ9NtO2pyk1ZxJftdHZFvMfucXDysrnMzgAXG8\nFYAA\r\n=bMiK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.f7abc7a43.0","@material/base":"5.0.0-canary.f7abc7a43.0","@material/list":"5.0.0-canary.f7abc7a43.0","@material/shape":"5.0.0-canary.f7abc7a43.0","@material/theme":"5.0.0-canary.f7abc7a43.0","@material/ripple":"5.0.0-canary.f7abc7a43.0","@material/animation":"5.0.0-canary.f7abc7a43.0","@material/elevation":"5.0.0-canary.f7abc7a43.0","@material/typography":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.f7abc7a43.0_1578508121918_0.35348757529297603","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/drawer","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.bf7b4a061.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05fdb2bf963feb3ea1ef1d339f19da08b7bc20ea","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.bf7b4a061.0.tgz","fileCount":39,"integrity":"sha512-TBpcVJ9wPcNGDqjY91Ye12Jl7Y6Ox5RvlBdmN7GX7/OupgxJI5uF5Vwr7DdEGUnDrlb2vlklgVDMiDLyyOIEPQ==","signatures":[{"sig":"MEUCIFacjPcStij7gNP5uBDaaj7kc7Jst0SfBMgwe/dg4WxPAiEAkj9r9goiY1bgNI8c68dKnbXoNuCy3lfpD6QQmpRP0LY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiKOCRA9TVsSAnZWagAAAdIP+gJf3v/4bSBnkUp5GtsS\ngs7q0EoxAhHBM6uc9iMOgECAU8jbTaydJ/qkLJbMG//jROGYQGDPOhoW96k7\nv816fnClYhmtH8KelFGTRatBC4F8dOs3HfLg3MvLNLjjp+LTZCPgfkk+RG3h\nzapTBXh8LWoUaqcwxxy3YZm6O3JrrhlktacsVqBDB0Zg8Sn3WU4/jqWjYIif\naBMtWOpjqb2v/vjK/fMr4jQ0u7ltQWgQsdui6dprl3RUBD26joMRwU7t3xcX\nuxkGzLhI3Igasrqmy0fGB/zc67VT2PmkOmaOI6phxpyIgIG83FcfXrcEJ/5e\nKdaq+r9rHClcF2XjzRsHdQcPcPfZvdshzTtbIyfV6dFv8fH0etOG4V1MXQG3\n/OQglCH2Zzt1G7EOYoyH/flCelQuhjUo2ob3lx8/6iSrqAXRlc9/iMjte/7C\nQXMvKnfhmJ7o9awOP1KGDXzc1FRC3zdgqeJcjTnOYzgAs6obwQTchbEUq5gC\nxeiU+GXsKILG2Lyke6u/d6KzqWg1kP7EwKhP2Tvm0Vfp99O8kcA3TS3g+7A9\nJWcSggY/O9Cow2YH3qBbOHVPsr95Ktcs25v3F5aB89o6kAHlxkVX31rAiHIR\niLxc0NYZ29m5Ul0J21OTTumLdOK8wvGCFxRclXKHowL8yA1Z365c0QGid72V\nifHU\r\n=d2vN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.bf7b4a061.0","@material/base":"5.0.0-canary.bf7b4a061.0","@material/list":"5.0.0-canary.bf7b4a061.0","@material/shape":"5.0.0-canary.bf7b4a061.0","@material/theme":"5.0.0-canary.bf7b4a061.0","@material/ripple":"5.0.0-canary.bf7b4a061.0","@material/animation":"5.0.0-canary.bf7b4a061.0","@material/elevation":"5.0.0-canary.bf7b4a061.0","@material/typography":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.bf7b4a061.0_1578508941946_0.8372357153044869","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/drawer","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.784fa7903.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40e6d9f56271271ce2e362204db8bfdc7ffcfd2a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.784fa7903.0.tgz","fileCount":39,"integrity":"sha512-CXFkIhNJimTClQKV07PZHAJLiTS82GRdj74Lpt6SuYJz53iUAkPkjKzJLY4I1dP+xdkfHDRmqJKJRPWQBrDQOQ==","signatures":[{"sig":"MEUCIAr5jxOn9z/R1GtMB3XOqd/rrTPJTizQIjr3MfDbmRaIAiEApX+d4jjR0H1bdLsxO272cjVQAbCilwnh2fIiCw8qtWY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFilWCRA9TVsSAnZWagAAFPYP/0vsEAniukOMPoxJeaRV\nn7/0Ix9gDXxFJ23Tkic0hbpytH34mKIc/ui0k/mxmYOcZeAjPNXbXAOM1jDf\nPzbPpJguiM6kY1csj698LTLZkXZatO5jHrbA9H/nHqx3Y1geP8wa1mqvFICy\nprko3jEWNAQcMo3tqvsPK5r5zlxlCa8457mehqY5DCttKFSWwUBLbHwAXqpe\n8pyu7694UYgUBe2m+33BVknDeCz+L/Nc17VsDY7/tCZuq3FNQE+p3SJxRgzP\ncdlm0Bz6106Kw50sNTkBiGm5WzkF4ln0a5xmTjrASQYkaqksFKdiGEHH8zgB\nwQ3Das9MPrQocBVLvwg5ATcx8bfM5zhY5hDOBg3q0MDtJd8BwpkUvhsDK9fM\nQHM4F3bzW+UR1oySaL52t0Ccr0YzKOoUC2lsg4eLAccuyLf/59YHjUNutBMp\nG+9STHCVKLU+yZxKyBPnLIfJ4+u9yRpwZEMFpbKaxwacTFTCF2pgiM/EDyp7\nmKR35I/yfgT3l7wk5tESB2W1U9piDPPKp4KkIuEB3meIgZST2EYOIVcVBu4Q\nEh1BXHaY2G1ql+drXQ7cH04VRTEvAMbx4iQ0SdTHeKCVxqV/bAE+69hWuWKA\nYtwNFYIUb3670UwwxmscO9aRUz/TIPTiyKd7qG9JdrphrgQFYLTSw1CVrCeG\n594a\r\n=izd1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.784fa7903.0","@material/base":"5.0.0-canary.784fa7903.0","@material/list":"5.0.0-canary.784fa7903.0","@material/shape":"5.0.0-canary.784fa7903.0","@material/theme":"5.0.0-canary.784fa7903.0","@material/ripple":"5.0.0-canary.784fa7903.0","@material/animation":"5.0.0-canary.784fa7903.0","@material/elevation":"5.0.0-canary.784fa7903.0","@material/typography":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.784fa7903.0_1578510677249_0.3834682269487504","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/drawer","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.823c050ba.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d65cb045fd603b93fd5c13c87b54e8126b059a4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.823c050ba.0.tgz","fileCount":39,"integrity":"sha512-fzLvJbL9m+4RbPwYTO5QRMCWUdXG6HmyHzK+17jWZElNl18fNn3wbPuXyjWiM5Nf9s6BJ9YL4BFwKux+wYRCcA==","signatures":[{"sig":"MEUCIGqkkb/ZI8wGvyIXzLbDTRdRdAI9Toe8K07ShVPHE2TbAiEA9LfeFwAPoOjX36YHYunSY8VrFbi46g28SK6OttFaJEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjd7CRA9TVsSAnZWagAAIroQAKQWHDMAfK+IYbIj6noc\naBxfr8SUPGjXFXsasHuhP10yUAx5MknDyhdDT4GNlAOHRT5Nor2sx9rMAPix\nd6a3cwqv73KZWoqqyJkARnplx6uLxlYGo0FU7A40ed4eRrC7zrsKt/F1wLUg\nidcpeWsUXvimqGrschz6inWDN5BCKDiV1jRT7J4mgWLzl+7K7cIeXkGEKLES\nvasuRVJi1yxgOhU7mwVg/7KvaNk8nq7co+Xoe/Ma4DT48YGK9EtOBuheq3vC\nZzG0SE6QN0Iw/2qAW4IafgeZwfauDm1stjQnoYuXeiubOOpitHnxf3Gcnaza\nM5pDTSRlBlbKO2Spyr4kExvSH0+f+Py1yjk9feNefY4KP7yhzlXX3/t0BR+/\nl6Lx5Ykn0ssfSamC1FX3uXLuhRBQqwLuBqZ6fug5x2s7Je4V4xHh/slwbMIV\nz1sLxGB1KhjPH+4h62+D7h9UgTDXYt5XOwwo3KxLlZFfPgMJYURifyowpUZ7\nk/kNikpg2z2gkpJcdEzD+n3zv1BqQQmeijQTDgoiiOWfGb5QolAM3/wNboZD\nfeOwI8Dngqmz51bAV2Y3PeQDFlPypwp4gG0nAeY46C93tgrA1JOXCIGcwIoO\nl3Ab9t5vZeNFOKAVr0zOd60F5MjbpETIaICb0tVpgvvPzyWXnzHwEa2qZ7C7\nW1UV\r\n=EqU2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.823c050ba.0","@material/base":"5.0.0-canary.823c050ba.0","@material/list":"5.0.0-canary.823c050ba.0","@material/shape":"5.0.0-canary.823c050ba.0","@material/theme":"5.0.0-canary.823c050ba.0","@material/ripple":"5.0.0-canary.823c050ba.0","@material/animation":"5.0.0-canary.823c050ba.0","@material/elevation":"5.0.0-canary.823c050ba.0","@material/typography":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.823c050ba.0_1578514298835_0.7503073490813745","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/drawer","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.70c708dee.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a8ad36453183cd8fce1cc5dcc61f03cf2036335","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.70c708dee.0.tgz","fileCount":39,"integrity":"sha512-/pqXKIsaUL+j2w45ws5LiN07LBfEP+ikcj9h7qbWpZHBeHoNZ8xvva+HOyRtvHu4dO6J5KOI0j5t6q6OwySBzA==","signatures":[{"sig":"MEQCIAXytMBpjVKtoAhm6YvKxkRCxeNRlEXwK6ZwP9Ydm+ztAiA6I5JPioCZFBks8FiQVtgcaUKkyuqiKl+l/StOK0LUng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjooCRA9TVsSAnZWagAA6qcP/3S09uPdejQBfFxnvc4H\ntQhJk2W7W3Hkzddneaw4n1Ju4fCVCRwfDwTkL9JnoEHHRsNiUnKHTLA9Bm2F\nQbcuk9/E5/ehLSiL69w6TOxtzeZCF+gx0xDHtoDYyYKjakpuCeE5CWrfAZrK\nQeXGT0it6Oo7nxPNg+om/3UPt/kg7QwTfg8giBNYubZABHMA+ukwvSG/YG6y\nEKg3skktXGS79CZzUXu9z+jv3FiDBtmXNsreBvNG1FA7JQ+01XPE6/9kGLao\nD+v4hr1qQrdX4Lwt3nhJlgfaYBM7mBJbEwxTaansFc+1YgM4yecacPrfRuAu\nZO/dagSZLpNy1OB8CInc9tyeGsdse1N6Ff2MphVFjrokB7S2xgVI9hQ7fBfM\nMriZAxi2BBpIeDZaRu/vxJ1fvKW9oTScd/sh5Ra0HXGLHuFHxvLLYmNNPE7d\n3+y7yIv+lZi3QsX9qC8Coci/FURyG3OhhCt0N9R4q+zyp7YinGJUghdhLnt5\nH/uZ7nxTtW9Exv6PTtbVLJSQC94i2T12rIV6cTlXzGg6Z+xIqindpna9XC/X\nFc+6wWrPLWREuA7l23WW4ubSkm5DgWmDN8AwmERKA+cIeG30wmB6WB1BdrXt\nEVKukB7AtkF8/PDWKyGOLUV3s3tas9JtzX/hWkl3rQAHXiG7YdLIXu0SicX9\nLcxq\r\n=JdSr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.70c708dee.0","@material/base":"5.0.0-canary.70c708dee.0","@material/list":"5.0.0-canary.70c708dee.0","@material/shape":"5.0.0-canary.70c708dee.0","@material/theme":"5.0.0-canary.70c708dee.0","@material/ripple":"5.0.0-canary.70c708dee.0","@material/animation":"5.0.0-canary.70c708dee.0","@material/elevation":"5.0.0-canary.70c708dee.0","@material/typography":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.70c708dee.0_1578514984155_0.9077802085478603","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/drawer","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.5ed9d13d0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"072a61def2770a80e8a079e88ed7e6fa41362c02","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":39,"integrity":"sha512-6N9nO+ICHWCUOYZYMqulHCEdtzRXhlQoNB8zPT72pu/Q1gUpJ6RP233mSm1zsiyMCJx2fqfL5LiTi7GkoWQ0RQ==","signatures":[{"sig":"MEUCIQCcrGur2JxmpkCTWZmwi7uY/Q/bhEkbIt73M9ObuSHjEQIgahvacSLliM40LdGxNVLS9Yh09bcZRRAC3mUlW4s3AEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkz6CRA9TVsSAnZWagAAdFIP/j9/71fbkMa0j19grq1V\n0ZajNDvhs2ad9/0T9ffmjUW4aa+tHMsUOFDPAKIuo8jl1CjpPW9q1LGZ8Lcp\nrND250BKW7hYnDlF5ReJykqtmeGA1vXRAgEu2Xcx0rnxz/adcpJxyyYlV29j\n9+pqWu4FdtcI9LugogpmYvonyKFR4FiYZLWn2dGB+Jhn9QPokTPNFj/YOE/e\n9FVzhtOJGR3necJUj1PmarDbaTWMjWJw9A2EhTAipaaEbRrw8a6UvW8+GYNA\njG2yICVNPOrzyec6RY0jU5ax0Rbb8RrB43TlP1zo5fgc5rg1dBaeN8gZgBRO\nOJI+2KRRqjqf4g9uXsi9lXRQEDfxPvaLSQYQP+AmYHRj/SNNEWTfZank4nq6\nzl22K+Gys/uzHFXJP1f9p/DrJV67jHFB0ifIzkrzIou/YzXq9xwfFTRTN9Ji\nPQBPcuMLj8pBaWDpIKFPtic1Qy9jGch/ET8kE46zZ70h6IliPF9K0Qx8pcp/\nKyWYhjZu7QFYI67j8DiXzkQIbrT0yRvfvHwjlpIbmAV79VMR4HD8h7L1na/k\nokGmFTGvRHW4AGFyb9YTrROhQRCMyZkJXXBavNCj4GOZS3UIq+SYW/ZgbDZO\n+snrzHN2/Bb9MWeiwzOvIYbEyh3keufnHvCDQMk8OwdJibvP1En0NNt4XEMS\nwvld\r\n=xJZy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.5ed9d13d0.0","@material/base":"5.0.0-canary.5ed9d13d0.0","@material/list":"5.0.0-canary.5ed9d13d0.0","@material/shape":"5.0.0-canary.5ed9d13d0.0","@material/theme":"5.0.0-canary.5ed9d13d0.0","@material/ripple":"5.0.0-canary.5ed9d13d0.0","@material/animation":"5.0.0-canary.5ed9d13d0.0","@material/elevation":"5.0.0-canary.5ed9d13d0.0","@material/typography":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.5ed9d13d0.0_1578519802365_0.37501913983514656","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/drawer","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.4819cc7e5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1408e1df44481dc5ee521057a7224c02c75b774f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.4819cc7e5.0.tgz","fileCount":39,"integrity":"sha512-pv+JEK1DDw338zhKi5tiF3SsaCPGKZ0sFiexeqLjFqNpDkxngHwjfNi9R+qqkPpUnlTKbfSx+o289InKhrwRLQ==","signatures":[{"sig":"MEQCIEpDHeG2dp4coSgi4n/kQwjf4slC+ve8RuJEczuzArarAiB/UKpmneSaIb4mYWFtcwQlhsuaW+UOc6UoMWDl8UNwRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlCrCRA9TVsSAnZWagAAJKwP/1oDGA8qUR8FwG8P+3eK\nBmR1laZ6btND/yML5dMPrtGDDpYxRlJhUpHnjNellqa8aYu9bKrsinp3d8Ot\nJ0KDtXotv4UrZi3wL1C5LfodBYM7smYpXQKB9xXTZMNWar2gAJr2tNhUJQhv\nLs670YV0rVKW1bBqbYwefj2qjUZGlqciqN9h4J0AhsiP/A3njqXC6fcnbxw7\nw7b9QEAAmRXzKpUfx71cgyyj9bqjgEKMuPBAakhRTHHiWo07sEVLWQOa9T0Q\nM1WyJmxvM7E6jzgndxh05BTnmgG4RVmYZSqLz1XuX1vwmMfvF0Z8UWTRBVt7\nS1gSU10eLpZTmSjCvvh/SEIG5Kb3rljbAocjZ0WncYN5pkVnQF/L6P2DWM92\nANhjJL1n1UJyhi4wG7Iu5IGi8ARQeKQa1TpH8083LkNOMl5xWu5KChCN+fGF\nLIr04wAh+qX84MU4Jp9QyRv2I2jA6QbUVrAebwU2/hOrJIRCO/0r1IwPaj2V\ndmJBH4bLcLNwz6dOraty1Uyi4jVrtcbjbbWesjUal10aEY8jT6UiVwAB9gB4\njaPzQJm+3eeda8GBunw435w7cIvkuxtbGdR27PpT1JoqzWlnoz6el3qe8feO\nZSYCG+U3D3MuOWHZHdXTL96mO9kOJARjhcJ01IGPgCD4wzSV5zxWiZrtp93y\nLp7h\r\n=tL6v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.4819cc7e5.0","@material/base":"5.0.0-canary.4819cc7e5.0","@material/list":"5.0.0-canary.4819cc7e5.0","@material/shape":"5.0.0-canary.4819cc7e5.0","@material/theme":"5.0.0-canary.4819cc7e5.0","@material/ripple":"5.0.0-canary.4819cc7e5.0","@material/animation":"5.0.0-canary.4819cc7e5.0","@material/elevation":"5.0.0-canary.4819cc7e5.0","@material/typography":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.4819cc7e5.0_1578520746929_0.3126622002361048","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/drawer","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.fe3ffd2c3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c8b3ecd76eb8f3fc11699421f59f562fd5c6ca8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":39,"integrity":"sha512-dbNrojQEr8EjSQih18+niBU1zAHJNhDTk/+40iYUPmon185mvOSm0L0RU72zI2mY8Drgx/WGW7CW6FEjF9nBDw==","signatures":[{"sig":"MEYCIQDL7xq1J0vLxQE55E99yAztccQwqevkZn0kRC2lk4gd5QIhAIECeF3RbwcgMzJRRdKwKJ06YEW7cYQVQsQ0PY7jnbny","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlToCRA9TVsSAnZWagAABkAP/2Q+fjp3gHzZAMhBpXBE\nROkWNX38EsuIa2392XNQu8MpTPQhCh5w5MzoxFheKAT7w/v68Qy7z0MrkWg1\nmj4rYHwQxUqzw9YN4bcVwNFK5Y0JPJgxQ7s42qqwmJBPKN2BIVagm/vKUJFP\ndPqaJAy8v7APKmeEHwHUJFZ0MqhXaRRB29Qhe+UnqWm11PLoMkgrYwgDPyef\nvdAJV6Ee+0fex+8Z0sALrpywlrrbNz/MFjIBw90HlTljcIuUuS/tavXdZZ0g\nKuo32tWevUxL/DZ6Yv/fl4O1R/9AA00qrpXdNkEb8mf6XV5IAcBzjPiwe6yl\nh96Oh+fFXLXFQ7kyWPwUAOfLBplFHqvCcDtFjniIHi78rQWewGLYQDkKLNfE\nDegn+V4y5BiXzkWof993IK1s14ikuMLQkk+86sAwiXwz5b3bw/v4YX7e6JsQ\nScrr9A/lwpf7DlpNT1CAnLZ6bF2XL1nSPE2LAWviInFo0Z2SFY2nYaUZEvtm\n+qI0jwAQDEmctb1YLIGDU6OfzzwVdMz0PTe2L7fGOJo6yFWj+TcgzdffBbl0\nkF1sKbqPO8zL4m+iPwz5XiRKgf4Wm/C/uMEwSluSIdQ5QhvSuSpnrz9H1qsK\nxqlS86ljELlpjwiH3Fk+LSRSUH96m066ArtfMmV2wrnhUl9LgpKzafW1eN7U\n3+GV\r\n=RLns\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.fe3ffd2c3.0","@material/base":"5.0.0-canary.fe3ffd2c3.0","@material/list":"5.0.0-canary.fe3ffd2c3.0","@material/shape":"5.0.0-canary.fe3ffd2c3.0","@material/theme":"5.0.0-canary.fe3ffd2c3.0","@material/ripple":"5.0.0-canary.fe3ffd2c3.0","@material/animation":"5.0.0-canary.fe3ffd2c3.0","@material/elevation":"5.0.0-canary.fe3ffd2c3.0","@material/typography":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.fe3ffd2c3.0_1578521831888_0.8104625688348219","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/drawer","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.c0e850090.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58276c4f7f669eae2381afbfde8b4fa006723fd9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.c0e850090.0.tgz","fileCount":39,"integrity":"sha512-NMODb4roaJGd/yDjV4o7PgWRVABT8BWjrSFfbjhni3EnP62IOH3WwJIpP+JmpcslWIvgmw++PvRBAyDMiTdp/A==","signatures":[{"sig":"MEQCIGwIZ8L/EsYQdmVUZmSHmJFH/SnyPl2kt7/KmC3+9I1aAiBmVTY2EQM9GmMRvUpxBpnM6Xg33kCt9tdGo507z2mYCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZ3CRA9TVsSAnZWagAAQ+QQAKAGVTOCZinR60OGO1yl\npmf/AIThjO6WBnqg5saKqlPq344OmdsqAuuDt7YPyaxVeqCv6Fagmv6Wi46f\nG2cKIPDLQQ3llMDYKz3OyUbai+o+MBOKkOSefSTCn/1z+xsQ8R+V8c3qbypX\nCBRDUQcdvepWF/CEZb1uy987Zc5jGAd0KRTC2N+vvz+Bfif+qvljUK8n1nVW\nL/eBgK0QoqO4YGA564B4tnqf2nQK9sI4FZ4YfCuL2O4jxSWzZ9c18iWMF/0D\ntDzc4RfKHpO2qVgB5jizZPgSsURd3b+LOlEd5lfipVTDZSOFBdW2VDAp15Xb\nL8GTaoLZBeNqHEgcCl2jS0en0J0WVfeTL4fpq73F7Xrn8HVFnCVBUASVRWQA\nBoKBA6OT3sbU/Sf0+ZBBcdBiFHQQr1s5jU6gPdiDdTT8+APzjbNCXXZnJgSa\nijeYUjwtAgtrVvF+zEth8vyPCp88x7Tf6BLrEo9ei6zvRgWjflSMMn/7BbCL\nGaEdw20exbjtUtAvt0bR3I8GWNtpPygsuCJyH9DgaYItejc2hg8/daNGsJFF\nZF1ULCHLyCY59w22rDMf7Gyu3gGlLstij/iY8hw6OiBV6txl38wt8tVibZV7\nwqgGYD+F8l95IQRdwRjmW6hJ9udZkjWTsnDG/n5nWOOtqkjq5AHtHhfmKaAR\nccnU\r\n=6hCO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.c0e850090.0","@material/base":"5.0.0-canary.c0e850090.0","@material/list":"5.0.0-canary.c0e850090.0","@material/shape":"5.0.0-canary.c0e850090.0","@material/theme":"5.0.0-canary.c0e850090.0","@material/ripple":"5.0.0-canary.c0e850090.0","@material/animation":"5.0.0-canary.c0e850090.0","@material/elevation":"5.0.0-canary.c0e850090.0","@material/typography":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.c0e850090.0_1578522230924_0.2856379142260683","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/drawer","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.615f86f38.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d5817aacff319cd8ddfe33a39f07e4f783b1dd6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.615f86f38.0.tgz","fileCount":39,"integrity":"sha512-m4zSl9D5N/gglQhcyqMBKt6TRis8zcPRTo+9B6hjXtjNcFDLSOxMbTjWqUkjkcK77i7AW+qrxBv3tHXIh/iUOA==","signatures":[{"sig":"MEYCIQDTG0hXblBWzNFuNUuwz7TgAHA8QP1dLyXZHJFa6AUgegIhAO3hKaFeWvwT3ruVQAw3xWjaf4/coajRj0AiFNBUH2Uw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlqCCRA9TVsSAnZWagAAweQP/1zpARPkg7sVMY+DeTyk\nysKPE4OTlQ531/2xaCaSOReKLKpM1THguBffXqpBC2paAHX5fNV0LeiQYMbp\necX4a091hO98lTbmWntnU131uiSX3A2Sm8qJrRO4eZjkkKmdxU5x98WZdy/v\nOroQsjgPf5CQgih6OWTKDN5pi7KE8dzvYf5R4rqCH0233cUQ/+5j/kmyNP4O\nCMialq7m+G3uptkL+3ZffuF5WTSTQSIFiO9/OvYZaj7ckUXycYV64E8++yAd\nDdXHwPvMaqb7k+Vn41L7tm5tDVJEV8iGT1V3eMpPs7PTQJZ1XQf9g7UjEVIc\nxQhc7Bg6bSNryyV29OK3SlrhEbjpgo3VfkMgnoDas75zNiQ1lckcwCZWYLuS\nzJIlBgOW5uwVg5DeQ4ifQFrbUYtZ9I5OVpIibvoq5F12v2e9O4z6BCxrXeUi\nxlCsNbWtB/yymsjRmDVMAc632rlSZg1XSldMbDpab2gtSZNaKJpUeT2/saVV\nX94nTc0kR0/5C/tv3raxsl45wng7n9zJUx0gd3SCdATB5CZqnvD7uOlwT7Mv\nzpx0yLTQSwUORHLjy0tI5fKxRLTFiM8xDnZvK6OXlB3EHI8CRG8OibkzCyhB\nxpG1Kbwqzdv1pPGGJyrW6cyoHH+pyRPp9mi5a/lob9i+f4P67PIC/24MLLm7\n5Zw9\r\n=43bI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.615f86f38.0","@material/base":"5.0.0-canary.615f86f38.0","@material/list":"5.0.0-canary.615f86f38.0","@material/shape":"5.0.0-canary.615f86f38.0","@material/theme":"5.0.0-canary.615f86f38.0","@material/ripple":"5.0.0-canary.615f86f38.0","@material/animation":"5.0.0-canary.615f86f38.0","@material/elevation":"5.0.0-canary.615f86f38.0","@material/typography":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.615f86f38.0_1578523265082_0.5759943168082862","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/drawer","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.1eb032637.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08dcac684ffdae121f7191e28a34ad88b5978595","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.1eb032637.0.tgz","fileCount":39,"integrity":"sha512-AxEWi27unF/j1ja0XWx5q4DvpQgbO1/Vv6hHj8XFXmPpu6OkuYSyrucrWCtqw170yLNAcey2FM9AIhaZDJ2MTw==","signatures":[{"sig":"MEUCIEFxrzd082Toe4BrUaMX3xXI8/vfwmcRzt/4a0v5iJUqAiEA2QwNbt+MoQ3aBFE+NyOu7xcMfXf/XeCdCdudvrlmSC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8mCRA9TVsSAnZWagAAmD0P/AmeBP8X+ws1zczRiwtj\neI0/i6l3fV8/m6eI+DOUfeJhnQV0nqz6REgl9sbMdEuLFQcZ/BwtXywLl/zf\nO0mcs3omOAVPKtJd6nT4WJHUY9x1ZJDk9Fy/iT+DpA51NpRS6xbo7Zt423+U\nsT/KPdHPoClvKAOWwtXZ9gN+wp4xDu3smPhz/jobZJNaKlL82NrI6YFWh5F3\ndP1QHRA7q3ueKO9wXQwttSc0v0xKJpvjCj6YcK2GZ51WG/WRYs1PkkQGcLZ3\n7dEkmb0jGOE5bQ9BBq6LPCVjPQ+G7wyT8E/1V1IfmgXRNIFLWtRrcm75NcXW\nZqj5EEui3oyLCDjLmzkeALF5IgXRuK5LO+esqT9nUbsP4im+puml6VKE7wAi\na4BPQXAg725QNj7uf7qhDpaMV1+MsfNBiEiqwsUN4cxUEGuv81QbU85snfaY\nAV+HF7+spHJ0qPMvzw6udLrH6oD266hfN5nTxnPnMQruiftwIvNXhqexZce5\niDo1kR6mN6KiUsNK+Vrkbwm3YbXs0BpcGvriY0w00pcyHMFzkAg7ZyRK5x3c\nLNmXzVRt5NeyXgjSsTuN1RQRktLIBeimiL+PU9cKP9PzxklQ7/e636eXBJjc\n6Fc5lVU01+PamSfI3rS2rwNgTNecRO0eAR8aB57amn8J68opxYAULNY5QqKw\nyIWc\r\n=t0jA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.1eb032637.0","@material/base":"5.0.0-canary.1eb032637.0","@material/list":"5.0.0-canary.1eb032637.0","@material/shape":"5.0.0-canary.1eb032637.0","@material/theme":"5.0.0-canary.1eb032637.0","@material/ripple":"5.0.0-canary.1eb032637.0","@material/animation":"5.0.0-canary.1eb032637.0","@material/elevation":"5.0.0-canary.1eb032637.0","@material/typography":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.1eb032637.0_1578524454104_0.7572516780990219","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/drawer","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.5bc5ebfea.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00174fffbcd8c6410c2b905699e4807f16f0ddf4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":39,"integrity":"sha512-1Ew2TUEkmUNDlBfa4ZZwXidwLplCWUXgyGFvqbaQeHtrtbmMl3Lo6RzTqpnI8wSjkkopWMxo2v5DDBUVKBj9QQ==","signatures":[{"sig":"MEQCIBTbnJPeqlA2I7nI3oHFx4Bl3f/sgLk2qFNuT24AOWeNAiAIDX15z1O6DMvG1sHoCgKw6uAjqEZYQvJkqhmrQuRqUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl9RCRA9TVsSAnZWagAAUnwP/jIOhc1ef4xwCfD6qn5d\n7JLxknxLzFkE6cAyMTqOYCmA+Pr7N4e3eEzEreu49GJdnWb+kX3hg7lwsGIL\nCao6AZA/KKqX8d5EwgwU+O+53ZKTrw+7kU/Kcesourvdh61hR4hU0EVaC5nc\nxgdKbocCDE6RNbn4tehkpYyyaMhG9+auw0KaOISAQE2U7VqNngYNVSTFb+f0\n1axvpDIj4twc7CcjMY4v2r29m0K6lzk529ElubIBJn2dj36qp0DHAXFjMfUE\nfxjf5t2elf7eHcQYsVfXvsmi/lqH6HFPhIb+ySNn1ObJh+Cxa/OQVbL7IqxD\npxB8RUhedMYhiGLJeIlIV6Ba6+L/syJIX2MTFdDct7SSZfTxOQ+BT+pXLsLU\nPQZyvhUyGtcaScw3a769rMQZUO9mUooR+Z3UoATOrU610dKr5ZCyhSwbXV/A\nEtljZxXZOIkqCtgpd7gNZ7cOo2yczo16lUf64M+QhlRr9cus90dXzXEvQD0/\n5yIb68hZNtp2oQTIG4UCJaSOeYThqNOSFohv916DBRGwrFA6AQJb0guQg9lH\nUaunhygtHGyW3bLva+x+MHookJVQFR3pjJGYKOwMc8qvULBkyCqSQJwebCIj\nU/c8ij0gLnXPkGsPfrxhsHoVjZlVKzqjiIW7si3S5cIHpr77zx7S09Z7lZ+R\n+f1m\r\n=V8hd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.5bc5ebfea.0","@material/base":"5.0.0-canary.5bc5ebfea.0","@material/list":"5.0.0-canary.5bc5ebfea.0","@material/shape":"5.0.0-canary.5bc5ebfea.0","@material/theme":"5.0.0-canary.5bc5ebfea.0","@material/ripple":"5.0.0-canary.5bc5ebfea.0","@material/animation":"5.0.0-canary.5bc5ebfea.0","@material/elevation":"5.0.0-canary.5bc5ebfea.0","@material/typography":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.5bc5ebfea.0_1578524496785_0.2375156428503511","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/drawer","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.1112b8def.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4da0a19cdf7bead94b6cfc58782975beadd0f90","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.1112b8def.0.tgz","fileCount":39,"integrity":"sha512-mSNB25T+NYtUdKZC0dmL9dSF3OZu6w8KOaml/Ojrkzypu9aVXbFm3vVepYuKzFEzBrBH/ti3zeMd6PVOsRiAXg==","signatures":[{"sig":"MEQCIFJdX7PxBzMHNo2iJjBPNWvv4E8XfD6jw1f+gZ1kOws1AiAy6P8eymY0PWnhIVRKF57w37+PBS2HnG3j5ove29oi6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6T2CRA9TVsSAnZWagAAyzYQAKHuXsZ7wbdEL14j40TS\n5YuuVucdMuhMguZtbSjR3QzRj5l0tl9cv9VaJRbQCPCiYSaFvAAvP3uv2jyk\nsF/rVIuSe7TUZ4WWxgI4WBpfjZjXGnJWRM1ysiBBNh0UsLTYc504fDZ3A9Hw\nU5l2zV705+XMawt+WqZTcRDcwjuL2tonUE517EBqZNDez2jt65UMCnPZR+hB\nNurG2Qtq0O2ZrkxRP5CX3vMkylDvQmiS/YCgE2vTa06WIofWq9app0Q+cXge\ngkM4aQV+sh60c9bOra6VI+Qtw4F1J50paD3c7ajfBWICj+dm03obzI5ioT/O\nTLManpVsQ7qH53c6o86VsvuH+qc7a6vlbFzEYcc5xS2tN5YqlxCVjI8ZTNgo\nAgwAJztGKBJZlTtFHNPpv6knM8DqwCB4y2tTGVDKQKH8kbdG18LuCD3nKCHk\nTgqXDuh43FjDAhRTmC8STjKErbg+IaMxhZjMYIjGwDycYrRXP7bJZT7ZVKzn\nK8ulMKiheKb/nEDLAz8w/xwSjkTATfXmRIHMhqza3Yb+tdZeuLLNheFkvhpm\n3qpd6PpIfAen1d4oAJvPxd55hxgHf3nExUsJhWeCJAC4kYKlpFTOsRiARMWf\nocN3BE0G/Zt4DJO7xcAnfnXiH9Z05pXsLjOtVDlNqL01rwQXLKSs62ZNf//4\ni59B\r\n=x0wk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.1112b8def.0","@material/base":"5.0.0-canary.1112b8def.0","@material/list":"5.0.0-canary.1112b8def.0","@material/shape":"5.0.0-canary.1112b8def.0","@material/theme":"5.0.0-canary.1112b8def.0","@material/ripple":"5.0.0-canary.1112b8def.0","@material/animation":"5.0.0-canary.1112b8def.0","@material/elevation":"5.0.0-canary.1112b8def.0","@material/typography":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.1112b8def.0_1578607861838_0.09310329839303089","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/drawer","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.aab102017.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f12a2fb0134b0c4b092ff76a6e618ce1a62c98a4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.aab102017.0.tgz","fileCount":39,"integrity":"sha512-zzsXnPytO3FtoUbBq35z5MspkmlXB3mX7kosKECmI63CHlf3fggnJSPAqa0fovPhDc0ZDY8AMAl5O9LyBfgrSw==","signatures":[{"sig":"MEYCIQCgwDf0Lgir5/C8tMlF+3/HtG5WSFm2ADjakSgE/Bif8AIhAK0W5PPqgCNsei+24lvsFpg3ng7esQc0/stfX7WUwB3z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8GPCRA9TVsSAnZWagAAymUP/j6KPbmQTokNF41k45gA\n4xaAWlGhV0Wz0Q7HpKPeRfPPizW9Di4eb9WpjRD19peRpEs+FNt4czIIntO/\n4W7wWY9ebh5jAunSjpUd1V5Xfi5sIDXmdjOsRzUBpIbdHFCvJb/c+YKyueKV\npHCtNe5xJc7R9+q1gqbwLKugKfBJOJM21o4eqVzfXplLgBECuHHLuh/QCJfC\nB/2AkJajNW3gSN3kdxyB2+vxAN3SX1J0iYvm4x0fZK/w0GJ+njJzVnoaI/9v\nf8e7ixMcosDLeLmHUJzy82GD4fUXAehyzsmmcnn9OMW6vjwzTo2pfu13dUoD\n+AcpVdJZ+Qx0gRsoj+psJWY9rn4DytRTgZ7XO4ooVD5G+M2i6VDF3ernArWM\ndwOaiXwo5gBY7WSZJ8qbRL4GYosQmfXXMMfLOxjQcI2TE1Iu/JDHCF3ZiuwP\neKsfShX/fAxjO8qnZLdNGCiVYd0k0m/TEYiu/0gu+XY5LT+nk96GXri3tfht\n3SQmmMNrvyFIV8VbRlz7Q0o1vVfXGfNm94T5vQ0CagvfwyJj77YM4diD+DfR\nB+6d5+xD0I/ICh7e9J77h719ng6NDVuoFuaE9S5stVusB5XxdilrQJUz/zAb\nIOIcA/zDrloudlSxB5krtuU8q7uMRMSe3hVYg4HAPiVLQ3P17FCdQ9qCadh8\nyFsS\r\n=rn1C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.aab102017.0","@material/base":"5.0.0-canary.aab102017.0","@material/list":"5.0.0-canary.aab102017.0","@material/shape":"5.0.0-canary.aab102017.0","@material/theme":"5.0.0-canary.aab102017.0","@material/ripple":"5.0.0-canary.aab102017.0","@material/animation":"5.0.0-canary.aab102017.0","@material/elevation":"5.0.0-canary.aab102017.0","@material/typography":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.aab102017.0_1578615183127_0.3451845091969947","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/drawer","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.426913342.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d53681021e9b53b0b714f09ee486421a8fc83a58","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.426913342.0.tgz","fileCount":39,"integrity":"sha512-Zfg655nofSuPGhrxp+lc7uhTPES8jwjJVWTW9PR1n4rCqAFPoTKSwgY4LJ6ErVdbNB8mIN1dbKAQSVjlNI5O5A==","signatures":[{"sig":"MEQCIG5OjV/ukECb5WeEXWj7SSBmQU36EBH4aN0ptcxYO4baAiBnbhb8pQmlLHEb7R0sgaGmoKX7TDncIsYS2xROdGYB2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9cgCRA9TVsSAnZWagAAO6gP/2WLqZlZVeFOmGf1CATP\nb9SmbNsqT9APa6tkjeGwMwrE8D7LtllE19BlyZadC9eoanVPdxiOJsXZecMR\nafHH9z3XV8dqMPhxlv1n9ZcYF9Z4jq4N+LH0ZPAN9CPQD5CHVOTkIDfLsGEI\nWlOqC+FropkumG+yegGdy28xJRi04wJ/yY8t5Byy3YV/rzyzsbY9PnMM0NEt\nVaQCiIXiEMquQDehjQzqAK3c0RrUCfvsxDW9/hNDR2HTIjLOyT/AJ3c2kGBp\nwgZ0BdvgqhPPoAEO1bC117PQ9WTeKVC0tol2NypvWrgeYX72XBqWgQ1sUSCM\nxvUTMlU7Rid6SgMas6r3aWWveRsu2Lh/k23aCSxH1m3eZQ1OJkcU9Ou4cUn8\nxOLwgWN3BWLEOXJsrAVImBOOE5sbtUFfo6qwioSNwbk5DJrLreJEJ3TdSuyi\nzfLhgXHArfkC4RPKMTH4cUZveWThdShuaUi1IC75eXZ6i91WA0PY+rEVReUy\nth7z1bRlk5tsI4dIJpya1qhIbtl6qtcxWJtFyTM/0ylx2K3MtGtnd+krw4R1\na48Vnptf/B/QrR+JytV5RxuRvSzovGmnOsbEvDvHadMVtwPY0YB+zoauzTtG\nBm+wF+dQQ0mQqfMKIpA2f92svz/FLtOrmHbYMYqMhz+0rwWWK/5SL6luPfVZ\nTZdv\r\n=/E6T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.426913342.0","@material/base":"5.0.0-canary.426913342.0","@material/list":"5.0.0-canary.426913342.0","@material/shape":"5.0.0-canary.426913342.0","@material/theme":"5.0.0-canary.426913342.0","@material/ripple":"5.0.0-canary.426913342.0","@material/animation":"5.0.0-canary.426913342.0","@material/elevation":"5.0.0-canary.426913342.0","@material/typography":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.426913342.0_1578620703580_0.9830201907260403","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/drawer","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.d4ea9a706.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c2c91fe72aad178893836f72245940114284e09","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.d4ea9a706.0.tgz","fileCount":39,"integrity":"sha512-5XyrNmpYkQe27hofg/y05JnLXyYW0KayPYewtPMFDgEzzTOkHe5wolz4h9VBpmBw0KvMonDMYuqc3AOZoWjjxw==","signatures":[{"sig":"MEUCIFMa8LqbSK4AgSxlj3P4c8pOnOy/+nGPH3uXfg48nMFnAiEAnjrfe4WOJOd/3IX56ZwYCMV49cfOR/DpcHA9wYJ5nUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLOxCRA9TVsSAnZWagAAXZUP/A2Y+1sURlIwf9VeDmsN\npKvKGZ568ncEX9a6bURdoDW5GG6YkcNvsRL0nuAAOov/7gKDMy3huiR0iLIg\nPiivple8CLhSdm2hxb6N98G9hN8SCbc66vh79VcxRHNS4gVNK6cB2KLlsYq+\nugNQNW6j8haGdOCaOgEtWbzkVwgbfQopdj2Up0P4dqmm31uL8ma+BlXyMOBt\nw6hbxLuP7c5FABxPCVL4OgVVnQ4IbYIaKUZXdEP8TWmtRltcL+r1/1DUFZR5\n7dlXW4QJzMa13CvEB8mN723VaDimOuLkHbUWqSoQa4qdG+DU7HPKfERgSwsw\nz4MRSE/mM9luH8aWxxIS8TNzSKkCF/1zvAlvG8f6IjvixdbGSH9vvtRGcTu9\ng9AC1ztCBhmEc4JeLOiaYt/KzLO+CaNRRjs5ehZqPi8NK8of39stSvgqEnPA\nWnXHyeHsWJapmfh5sIPI3sK6kXVSv1zXFMRoOWJBvrNtwfZz6n2iukjKZEBY\njN99en6lcL169yCGJtmoVS2eI7Qp0nbgk6D2HK7b6O7W/hLNUp4uWTNbMx1o\nMfzlhjqFVeSKbS7U3m01qeRmkpu6zsUykn3GeGt39yXbhPNZnyJxnlYYv4JX\ntiSOllXoH+pQn0vMgqp/UppICCheRZOr0dfSJz2ltFx305Pe/TT4fNEZfRNG\nxcXV\r\n=YPb/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.d4ea9a706.0","@material/base":"5.0.0-canary.d4ea9a706.0","@material/list":"5.0.0-canary.d4ea9a706.0","@material/shape":"5.0.0-canary.d4ea9a706.0","@material/theme":"5.0.0-canary.d4ea9a706.0","@material/ripple":"5.0.0-canary.d4ea9a706.0","@material/animation":"5.0.0-canary.d4ea9a706.0","@material/elevation":"5.0.0-canary.d4ea9a706.0","@material/typography":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.d4ea9a706.0_1578677169327_0.9095222127998253","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/drawer","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.7d4ee2996.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4856eb57749ea8aaa39118989ab162d3c8021e25","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.7d4ee2996.0.tgz","fileCount":39,"integrity":"sha512-3ID3spcnUUNqt7R8t0G03Gs0MKPSaffaahrMhf568isb8i2BakD8ylO1AiRubK5FPSzyDMlH/cOZEi1jcsEpJQ==","signatures":[{"sig":"MEUCIGiVDPQ5NQFGIfDfxyuD9wy9NTEBYN4SFUNzrht+6jEqAiEA1yIW73FigaVkJkRJ195uig9dz6U0t/AVwg9xBHTk4iU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":484407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLsSCRA9TVsSAnZWagAA9oUQAIXd0Ql/SPGWZTJ/2Rxn\ncKxcHmvPG1+MrrK1ArG6tDp5Zg3aKT083Ad3CeCevHaHttudALKsUP2q6oKr\natyoBiBLRWt/PVnjsRmW8SEkLoBYExympV0OGoFbDJWLMtAcUgYm5LT2pUNQ\nfCJX0AxchKKJapcgvhqT2plkmXRzwgIipGvoDvLHiq3i/N2BOvN2AXB9ONqq\n6NMI8EDKqZf6+WoXhKltHC6jv3/FpaqlZzxzbpBz5mbKl8uxWFmHUFgFxxGW\n2h8oYjEYmBfnTjo4/pQ4tKk2PMAuXlZBuo2SR7rEj/NfJZn3JQynDGuwGHCj\nyhw7SQBgAUxyxVYjZGBG3vLXKPvSKH2y3DrkrVzvmhwnYeiTQg+z4CHMuNK8\nlx1sIr9WtX+0Af9mcNRFLmQjNPK2nTyhOrtBQ/qnZQjWn6985dAK40pmnbNr\nlNGjic2g1j4rIfSjS5j0ph+aFDf4LRfpd/Z2OHxvVNeAcQ7tdCln5cjpK7z+\nTqOTTmwPRw8YjdNJPYK2bfcu6oD0wGQGSNZAvqsldBJA1XQv8kyOwe4b4lyE\n1FGl5bIHopEHgamTHeY03Hm8EI6DV82xUxU6ENWU6pJgxI5IZGQR621SEFXk\nt32iDNaqw56QfEzDnuVJojWgYC3gRw6Gp2uCCyypJsKEQHyHoIcckmlkZ4DB\nZ/A+\r\n=geMj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.7d4ee2996.0","@material/base":"5.0.0-canary.7d4ee2996.0","@material/list":"5.0.0-canary.7d4ee2996.0","@material/shape":"5.0.0-canary.7d4ee2996.0","@material/theme":"5.0.0-canary.7d4ee2996.0","@material/ripple":"5.0.0-canary.7d4ee2996.0","@material/animation":"5.0.0-canary.7d4ee2996.0","@material/elevation":"5.0.0-canary.7d4ee2996.0","@material/typography":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.7d4ee2996.0_1578679058389_0.2629305587108628","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/drawer","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.981ec9b6f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8bc7ae0e54c8c1c9239cf44e9699ebf9f7123d1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.981ec9b6f.0.tgz","fileCount":39,"integrity":"sha512-DuYsxJI8jPkyWdAye4CHRkh6XSdls0Gpuy+KJSeynKKMpHsNij/nKbOM64IJ8aY6WIqz3PesIpoWdaheDhRbxA==","signatures":[{"sig":"MEUCIQCRmirVj+IHlKAtPcg3ZEHS6ydiDj1vDOHBxelSphOAfwIgW5DPBz2tcLxJYJFPo6AKJWvyyhbKPk/KKNRrkC0q0EQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGNBHCRA9TVsSAnZWagAAgm4P/2XFWEjy8uA6f65N+tLd\n21PI/aQZL9WVMlCt9bENxf7+4GueU/sLWe9zmUXqms8pPRB8Dq6HZRU4FNt5\nUQ7+/QeDdAH5vlO+ij4OAwARjGi2nuC3O36magIceL5+7HAyoJpoZAvrZmdT\n4Dt55fTmpasjGLLUGh2gM4KKmt4RxaZdcweF58/eqgb92NQHDpiVhz8vibSV\nvOp2b6cuxfAJl/3gVmBVaQEvYwh8bwNAgOhfwb/KXjfsYSfDQGVC+NJNkgqS\nPl5dBpM6fLESSoPZ78feSFISC7erpxxp1kwv/t22BKslnz9o9xh4hHR2Ovbs\nQ1WMvZ1L2fx+fpWBnjTI4Hyu3MMdihD7El8pQElRx8UNiCeFIRX/x0ee+BX+\nDP5MpGfFGz9TQ61+612ip0ive3OcyOUEKCSZPtJGMX7eZomKttIOTuDDsMWV\nBbWIGz8S4ld0d14MiiSk/AK2EqkJp7K1FkOHkDwvF5Gh0z2CYWYCpg9/n4y7\nKgju5KIaDDMto4zcbYZgUOELBelBXRDi5ZazN6wZgd9HUyyWnaUgFiiCU+hz\nS5HTC5Z+Ji2Upgb6LspD3325EcUMZAo0NGtUY3E29kConM+Jl3n78jXbLIyq\nWovrqixPt3sJrc1bOCFxED5F9r4hfHqyZW+Gs2bZYSJpIJt7UzYXnMsq7XyY\nPbjH\r\n=zBeG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.981ec9b6f.0","@material/base":"5.0.0-canary.981ec9b6f.0","@material/list":"5.0.0-canary.981ec9b6f.0","@material/shape":"5.0.0-canary.981ec9b6f.0","@material/theme":"5.0.0-canary.981ec9b6f.0","@material/ripple":"5.0.0-canary.981ec9b6f.0","@material/animation":"5.0.0-canary.981ec9b6f.0","@material/elevation":"5.0.0-canary.981ec9b6f.0","@material/typography":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.981ec9b6f.0_1578684486440_0.17765669674515316","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/drawer","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.737da83fc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"977bfba231bef0a68636f102a0e33d91cecf0134","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.737da83fc.0.tgz","fileCount":39,"integrity":"sha512-40ATKV/i5r8gtdXc04uO/v+r0Lvei5ZVgiZMgAQLvywPyBGLBq1/sDrbIhBJHcx5rHaqCFlMHMidJZn1P77Szw==","signatures":[{"sig":"MEMCH1fGEILBPYjK4JEYShmpekhbUdbkQVT0JzLosrh4J04CIGAOSeJwD77eWcB54UcD7nz3x7fWytOHBseA+5LSdDEJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOpoCRA9TVsSAnZWagAA1OkP/2kLmoOD/RikLSROpYdH\nEzfyN8pqcWieggw61iyIy3ovdak9riBa8cr0HuE80rT8e5YU1xp6zh9tb8Mn\naHtU7pM8xceLQu3bs+sepjBiq233VkSRbEFFa5zuD5vueq6R/6xPpXEk1bar\ni2Ea+sLZQ5EhU0BZ/dyFFADM/jXe4X8rjxzC0GRzVikrXJA3sxhrDc+LLUk0\n63Z12tS0j0EqA+RGbTw38CoGzJl8O2T5JeVdkGGT9IRxiXTwFqD0b22GTVEP\n0P4Wm2jt/uWqDL6SqIG4/XboHUeBLa+Tkv2GIcj9p7O+lJst9pv+q9ITd8b5\nBKXX7/hZE62CYGkH3K6NSYZQzzOot4PIPj3qB4FaXod32mj5iTaPGji9Y1ej\nD7m3fVuMBgtFW1V/jYDgllQ54W4O2xFPQkFeg9AWYWSgahloJL/rXrZvfwaZ\n8Es+cAjE0gorfBHfvxjXq3RHia0I2KAgwxIoIuauKTZ3Kxgu6IrOVdbGWFtK\nPU9stvn8ArWXLpsc/NgGLpTG6eXhi0XdmY2Q6Xx9/ofgBhr/QrAJQ5yPjjNE\nlSuRI2GMGa7BtGyMt4S2FRnUyvpNu04+TjZaPKNBBw5VFC5hTAki7sRc18Ex\nUcCRsRMCI5RfpVm2avMwVoVN7lp/B2/NMkR3RUu0U9bBKlS70AmGrk/KYp/G\nEwCV\r\n=s8D4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.737da83fc.0","@material/base":"5.0.0-canary.737da83fc.0","@material/list":"5.0.0-canary.737da83fc.0","@material/shape":"5.0.0-canary.737da83fc.0","@material/theme":"5.0.0-canary.737da83fc.0","@material/ripple":"5.0.0-canary.737da83fc.0","@material/animation":"5.0.0-canary.737da83fc.0","@material/elevation":"5.0.0-canary.737da83fc.0","@material/typography":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.737da83fc.0_1578691175813_0.4019562417618969","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/drawer","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.aca8e6c18.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a87f324612ff44a5859c35854082d13a4337958d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.aca8e6c18.0.tgz","fileCount":39,"integrity":"sha512-4+5LI/5C+drm4iVI/DsVO47iRfcegPJ0axj00ymBhI2r791nbwuWjy8n07fmZ8VbGkeXpSBWaWnhz7NyCpQBvQ==","signatures":[{"sig":"MEUCIHLetKbs/9h1nvvJGZnRJooJ2772QdPm/wV9DjM7SkkHAiEArH1h+88AMn42uRthkM6ljePVXbdDNw8CxZ4n8gRtgT4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMYCCRA9TVsSAnZWagAAycAP/Rj4R56/ZWARz+aPE6pK\nEY1FtkvUg1wTlE283Ni4rAb241MMhVdVw3v4v4gnNROADabBaSQL4hmFn2mV\n/mNix+VqlRgKO/SNWhdkqvWkuqxdmbe+dRWaBoGYTwTnYI1h3yBMd5CAbma6\ndbK1ABP/jcDSq+0Etqd1rP+w6YrD5wtWHM9Rnued6gj+Mn3xV0LQSROkLmvo\nYO0Efy4mYYarGVEcFEibEyyrNjhSXsIGSX8VLPY8UKlE61pBpiMY1xnn6MnA\n6EVdX8lYOLvGChLXwZ+6hBnZNoYzeaPEhmh5h+mudaA+4/ASQMxeG+qytgKq\nYkvaMDb//YFdw3bv2md7p2sU1wR9+jZjx0wVeIElUgiDbOW2j9nN+aWxlPSm\nBF+xaHUqgpyil5Rb3YoS6XEGCCFlqS7SOA/fHL5hxKsukij9JeP0GDtf6RWy\n/nyzB28S5lLt40wXahnt2GMggd19yJkTcE82zKdzanNIOGjbWhVrgWe6V1bi\nTTqJtWEPB4yHE58CArucdzfAAoKh2jN0xVME56lN5IqpM1+mvyOQWNExBqqg\nk81oX3j2iY0ShmO2lKBhB+jQzpfC0vUFlFhfsKZfZ1/x0XXdPSb3l4Yyb+72\nkB0nUwlMxz2HJJhTe1OgD5mwNJ7eK1Nznv5zi0m1U/ykEutAp6ScgNrEzFOJ\njY2t\r\n=/LGJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.aca8e6c18.0","@material/base":"5.0.0-canary.aca8e6c18.0","@material/list":"5.0.0-canary.aca8e6c18.0","@material/shape":"5.0.0-canary.aca8e6c18.0","@material/theme":"5.0.0-canary.aca8e6c18.0","@material/ripple":"5.0.0-canary.aca8e6c18.0","@material/animation":"5.0.0-canary.aca8e6c18.0","@material/elevation":"5.0.0-canary.aca8e6c18.0","@material/typography":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.aca8e6c18.0_1578944002353_0.7882344310974871","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/drawer","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.c38d84e21.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a08ec1e79bfcc0af6c7fabd818fb906a20156b1c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.c38d84e21.0.tgz","fileCount":39,"integrity":"sha512-ajrqBQSpCC7UGs6DR68G46A3X6Ze8iX9Tw1miXUjBNutx/CB5ZNKAiZC+l4unAGTD0VGnCMEth1nvURpQv0F9g==","signatures":[{"sig":"MEYCIQCTdZVoHh5N+q1xcE5cKz4/muQn6jw1JFoUmKBPFlY0WgIhAPvKtbYUkgCqLQfezEFe3CdXPqh9mw43Z/ub9XFHmLOO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOvHCRA9TVsSAnZWagAAR48P/jWD88RSrJzKhSoqCqOH\nvQaZ0dgwIm90phqFFXLYFvFabgMZVxIo7v69LzHtSJpe4ihomozZFbks2Lq7\np26mvXCjd4APe8l8Ffb/dcEl0IX71OrspuTNguYN2Hn3KK4CZGudJe+x/rsj\nYbAVxSHyNSJv0CtBAXgiBc2eVl3rMJoui/wiirTFx5E6NnvqeWJ4NjdEY5Om\nPaw8xmq/z2sB9Ht8P59EtWNgwTid3BDB3WxN3ujX/EwpCbx/9fZrLdAvIeb/\nT60LJoKsWnXFP0OmEIR6SHJtu1IimSaimueNY4opVTnNVM+NKXnJHWTPYK+5\n9JD6GQrXVR5qxerstZpLeA7/7G1LUfZkCtvA2GXyb/yEptI5k1Bs3Psz9SEY\nBox3p8RHTu/rfiJFzP38jMAjz8VoWcuuCzohwpbFXQ9OZfFwsjaMyC2/4O9T\nsCLwvluwxl88N6mawWpq4WVcUuEj+GEHsHfbLczBA5QssbzKb0hkahafLsN5\nI1JjeRgFk+kXxjHWwpZX50pStkWIMzyikRa4sNlJhXN+/Ig08oCwR3DyVpgA\nFZV1bnEzs+JWfb3ZahE2q+zp3Wl1rXQ4jCLUHM28gGZt5NBnNg9OU/5ETdp9\ncm7YDEt2leRui2396d1P1rg7YoE4EnxYInA8Jp1CIzkVNii1jgtoghChLwuk\n74Tn\r\n=ZKb2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.c38d84e21.0","@material/base":"5.0.0-canary.c38d84e21.0","@material/list":"5.0.0-canary.c38d84e21.0","@material/shape":"5.0.0-canary.c38d84e21.0","@material/theme":"5.0.0-canary.c38d84e21.0","@material/ripple":"5.0.0-canary.c38d84e21.0","@material/animation":"5.0.0-canary.c38d84e21.0","@material/elevation":"5.0.0-canary.c38d84e21.0","@material/typography":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.c38d84e21.0_1578953671283_0.6449561850791703","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/drawer","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.a4db5fbad.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b42d988dd4174f65b07e55e21b3c623f82545c3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.a4db5fbad.0.tgz","fileCount":39,"integrity":"sha512-YjAUi1tebhInja5rLemPi4Dqcje+iM+Wn7JczA3Fj8ysruAG9wyRtgVqakFDigGQSjLpyRRvM+kRIPidkunqFw==","signatures":[{"sig":"MEYCIQCmd5Qvij/TYsuoBUBtFwtjRuW/Myp+3U3CArrHJB63TQIhAIXIefFzdq1TD6xeRQmf28Ibhi5ZTiI2a8F98Dj4obm/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":487596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSRlCRA9TVsSAnZWagAA4iEP/RuIyebeSU5NQyQg5bLl\n/XjpA1Oi/0Am6Gx6+lQpJ4IP1xxXt8EWAN94yD/tCtPmfnsTlSgg2cK9eAJ9\nPXWn5bIGWYyz9IA90HhjK+EJfJjLiOUMiDjvMtBUSBvuiHCMS68iWHdqAlhE\nk8OlV7v4XgGJMvAVclnPIWd9/zizNcnqRhOl4e6FxK3cYelTXXOEhwgEhnTq\ntm/oN0Hq4UpAYZ4ZRTjBHkVHsQHh/mjojaRjqDOOmdcdoamw5f5VWHD8TZWx\nDjU85uq83ERT81Di5zzfbR+121tGJFCvEo12iqZ96AtlOpu6uOvohmSyz4AE\nmOAEvk9kzYN7LVmEDA5Wfu+OpcsMD12hKSaOL5K3NWoT4xEiWKqABM5NRW17\nmgSobYs2W1nAd+OCrLA16DqWPawJkVofxGVADpYxJX4bwsomXLeWYydujq0f\nY4R5XHGuCa/T3HTFwP+CQuKJ5jFjooa7y6/xWVGyz7WiduwECsfKVK7/g+lK\nQlqz/8T1iY2JwFgRXKPUqdPjBuobs9S0kQDITvFAalBAtFA6LkozSSY12RkD\naRXh20ymeKI6ZhTcrvuw7YDA/7wA4FtkWsN6lISnVOGZuO3UXL85YOs1UYjl\nj5jovZU3sQzm62qr4EKM7CyF1xqNWDGoc6nH+xjkdRCO6qYAvXGf6XswzW5u\nYEs5\r\n=g/Sg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.a4db5fbad.0","@material/base":"5.0.0-canary.a4db5fbad.0","@material/list":"5.0.0-canary.a4db5fbad.0","@material/shape":"5.0.0-canary.a4db5fbad.0","@material/theme":"5.0.0-canary.a4db5fbad.0","@material/ripple":"5.0.0-canary.a4db5fbad.0","@material/animation":"5.0.0-canary.a4db5fbad.0","@material/elevation":"5.0.0-canary.a4db5fbad.0","@material/typography":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.a4db5fbad.0_1578968164501_0.050444025273975734","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/drawer","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.faa9af310.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3c67060d56ab9c900959d153a55eb14ef1bc6d3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.faa9af310.0.tgz","fileCount":45,"integrity":"sha512-eCPHbbCqj8F9a9JeOluNnmDQgjMEh8h3ZthRypyaTdOqoUB6neNRzRKjU1DChWdGltvI8kTqKDjbIFpfBUsecw==","signatures":[{"sig":"MEUCIQDLOM4FQ25iRcZ5o0XVFLabhgwss9UT9TGSwLJdFssLJQIgfXo/JsTqgtnAkW980hpsKw+6iNijnZeLcnqTcv9IOcE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfIvCRA9TVsSAnZWagAApmEP/2eHPYxQ+7JzTWo1hDPD\nn2No0SkdcmeOBNSjL6GlNLXz62qa7WnicW0q16FbtJUUAFc44edScf/sGxpO\nQfVfHAsoGICrzTHXmHGAfwSiPSviYbjzmmv59U+2L0RvmJ8NSsWyeTw8zzK1\njLSYRXaWwrkAD7CWi95XXewdjbvPaQPiM3UHpX9I88/CPnKDuMfVG/xwJnwh\n0+25N6UOTgc1mBCVMOBunE+9rCiLXec7+PpGOG72F64WALE0+tvBYARrAIN0\n+iygZ0wQQHJTLfFK81KxhF5JWMMc/yHmF92pEkiZoe0ZlO2gw/QRebFTHw2k\nXBsEItZK+Co3il2cYzf4BvZYtkSkXBoR84kdm8KTOJNAIvcib6QPVgLFgwqH\n3CPbimRafLRax55pJgpNzI+debFbT6q0pOAJ+87aujGjjjk4kWTN8zcmtwYq\nJpbsqZHEVYD2FvN65Ohpd/2KHtKyFkA2C8I1P7OYU02sUpybItTQeDn0PfFL\nuuoyDr0ISRaEt22Hg4qCEwXpR9JPe4Ai/7lkkDCdFHh31pkN2i4pePYVz4KA\nt2noS3mWgSSAXGz1oJVtRMpDWv4vCgcM/x+o0IvfCSdrKx2PrGg482gKzcaX\nO2gENdXzrf8DPnx284SzUv+lLsANLzB/XLGNGMHLrp/ku1gJwhmRVX+yQkL/\nu2zE\r\n=Ugc+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.faa9af310.0","@material/base":"5.0.0-canary.faa9af310.0","@material/list":"5.0.0-canary.faa9af310.0","@material/shape":"5.0.0-canary.faa9af310.0","@material/theme":"5.0.0-canary.faa9af310.0","@material/ripple":"5.0.0-canary.faa9af310.0","@material/animation":"5.0.0-canary.faa9af310.0","@material/elevation":"5.0.0-canary.faa9af310.0","@material/typography":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.faa9af310.0_1579020847570_0.11993567384062054","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/drawer","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.60354c577.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7cc01e49d5d9e2e8170a8bad8dee41fe6bc92a9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.60354c577.0.tgz","fileCount":45,"integrity":"sha512-DNkmafkI+T8pN9QouWpVI1+GhkUa4l+//WImeTzNbDnUysm7V7suqBkCHKCRu39ZnzKA6DpmzkVx607aiLNVqQ==","signatures":[{"sig":"MEUCIC2vAl2rIny9p4/rre+cPD3lAbkY8KBJsIk+fttpaYXBAiEAwCtHOCoOdsVsxTJkR+3iNofna72E6ZfvT3VJlZS4EjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkTiCRA9TVsSAnZWagAA/R8P/3BN99FzC7aQYPzKD0QV\nA19i8k9c+MEQHyhlCJ/OiTmYNKjQUxTxlt5BhzVSCbDaGRjkGrLf7FczCYA8\nVGIq9HQL/wmfhXkco0UX6qYYihx3XZQlU5gO0ZR8lMuGsnJMf0F/6gsj8qn0\nyDpTUN02Au905OA9mob8otxFAo2P7NrXCMVSFgW4jQrVplPfU5NnbTbeoYee\nA1ZBt9oKYm561ypSNcKY01KXEUydu0QTGf1JnoMlLdlt/Au3IJmr2+9EkXGw\nLJoFReaLNXDYrZhf+66PfhhBH/dKdDDY8C6lVR4sUBgIGom2rFrk2ssg9Umb\n5V+NeryBBKbXLh5eYIS40VUAD5VeH/n8As26UvjBaWI+1d3B3NwRrc788Gyt\noMWICEWrLzwKoNhA60PLkQnVgxHYrgKsLLkN1MkzX+P31iZ2HPUHhAUlSwXL\naztL6frLsnesuWZsZ+HTuq43dFhNeVWLWj5BMPlzkrgCIOIvYZ004PcLTLDi\nUUn3X5osnVZ1PDCRUPPZ7XL0pmFTsEvvaiUY5DlnMj8T9Xe0Kl8g2ljhUy6I\nEnIw2ooAJzsdoBZUQBo9zJWWHkzRJEmkxsTl7SAzJhUXnv46/3PjosSk3NDS\nViQ4x2mzkXieAbq2iaZz8nNr/FO8KlmzByXLXKuRS+srpgTbsiwEMH6ofGWf\nkL3g\r\n=Hoye\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.60354c577.0","@material/base":"5.0.0-canary.60354c577.0","@material/list":"5.0.0-canary.60354c577.0","@material/shape":"5.0.0-canary.60354c577.0","@material/theme":"5.0.0-canary.60354c577.0","@material/ripple":"5.0.0-canary.60354c577.0","@material/animation":"5.0.0-canary.60354c577.0","@material/elevation":"5.0.0-canary.60354c577.0","@material/typography":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.60354c577.0_1579042017591_0.6361143465036745","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/drawer","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.d07c78daa.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79ed8a35f6894e7d1b5b7a15a6b086d06ba1fccf","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.d07c78daa.0.tgz","fileCount":45,"integrity":"sha512-E1x0M55zx+durCzvyEi6W+FhOh0fiDGZCi21WIYzcRSb8TRdtj+lrYsVTBtscBSmAkviZ30WbLptlSmr41sNxw==","signatures":[{"sig":"MEUCIQDLEgrnoI2XTJyMQErPFVyB+b57UOtJ0bOzJy8ip9OgdQIgPquQ7SCbIfFD7uULGpGJ7fRn9n7ENsFQrvcnvZz9clI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlE4CRA9TVsSAnZWagAAg+QQAJuObhbLf2pJ/d3g0wBC\nyTLsI87+NApsRyT4ATjiXz5pzILp85sXUgB6oF36Ht3c3FdDxY3+PXZybEU5\nfdWkEErhqkVLeP8m0PupnbEbqeahLdXkUO7OVHTzK584DoiVg3vlNzFQVZS8\ngi26g2J5+2cVsuNAPsphs/DZXHcyFZm6evPSnkQrEVWeUuGV/k79rbRihKq1\nwLk4xPR+2qAs7kQJrNbafGni7bpzLb1zr8bUfH4cPYiHRiLczFnQyP090jnl\n5rPw8cF0OpvENLeoLf0Zu0iV/Ez5fKb1ym9QpROuOuLlKdZYUQ3ui2cqlQbA\nDskJg3hNshgYwZ3D2VkQI4XTSY6qqZa/Zm+xwxAPvy5gnm1yiIyLY1MOwTtE\nEuc5uTmB3gstFIyhfLQV97D1oL5wlVg2ghHoBFQvtAaK2mNiuK3k267gvzlB\njyW2iVMsqkhAVuvzLEE7BSVp/Daftu6PRzDReo8H04j4LeFRKJAMV618PIPc\nwQ7UfV4MHmr9rCy7rkv+DHhsXYnwd56TQGXv5nvFHUGjxc4gW1y1DKgS5ByF\nf2oJw1s8JdkapGzx2s3lLYPbIRTh8rtPeZzoqxw7GeO6olsF1Te7rEn9OhO7\nLphFXzgMCRWfQNV2yN1mUFWSCxxJknsOoJFP95oezTTn+8AS7sKK0yzEY/FN\ngu7c\r\n=JHvb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.d07c78daa.0","@material/base":"5.0.0-canary.d07c78daa.0","@material/list":"5.0.0-canary.d07c78daa.0","@material/shape":"5.0.0-canary.d07c78daa.0","@material/theme":"5.0.0-canary.d07c78daa.0","@material/ripple":"5.0.0-canary.d07c78daa.0","@material/animation":"5.0.0-canary.d07c78daa.0","@material/elevation":"5.0.0-canary.d07c78daa.0","@material/typography":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.d07c78daa.0_1579045175898_0.40887780766668036","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/drawer","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.8ddd5c6dc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d60c598d48cc13a9684220291ddeba4eadbdd88d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":45,"integrity":"sha512-QQPx8y3P0Cyw6Pttj4V1EayS1X7kW7otS21IirEvZD4HloUm+Nz2LZ7jk+ExvDAdF9QWaMPo6jrC8ebhVCrYZQ==","signatures":[{"sig":"MEQCIGtx4cHYTU8oFOPXKjkvx9+3EOh1IBpklJvAGM1FxL2WAiBFEft8G1UVTsAF3Qp/07BfQjwFmwZ8OizKMsSwctGOOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm5YCRA9TVsSAnZWagAAYGIP/jdCWUcZZ1lMNo5OkZ0j\nUCc1FFPHIT3qzhS1iVxSTfPCvVvNmNMxD3oZLFHtn3CaOGrhzWwIENRcTm6i\nrwoQYRjSVXd5KfkrhCT8zk2dMYP1DsPCpD6OzLjo6FuK2AHYSy2AgP1oWFWJ\nEU/XaiUYovap3ifK6q982vlCL9/HbKYg6crNMDgGT90Ljad0xitPFWPKIRZ7\nG5Q4h1tn7v4+S/a4dzp8rQU3RfNXDu5E5scZSWQ2nDxs8rAXws70a3133Rlw\nvArpuZNvccaDvpe2NeqOrS7eTXZyCbg3TO++v0SI+nHwhvIAK4d148K6p0Ze\nAcdJnE2JqtGci/1jeNRewgVjGw3wZqRTNrPQwiZW7Bbh62mwS9ChLi0tUDI8\n9O4Fg0tBtnngVT9TGpfp+polfBBDevdYUQRlE+G3osw2xefJ1iQpzovs30Ka\nE5CBN3fu/p8qMmDQMob1m3rceREgi4vyZSB49FCDC9qDPXtQcctymRE3YiWt\nQ6iT8LqqVNcP4gao40njbnHPZZWx2nHC0f7Q5mAUVmXbYHRxqCRGb9TlV5K5\nSST9H1Lop8ZRifOGYkDMFX6hScUvy/MiIGtXstBNC/lbP8V0mWK1Z7QqCT8r\n/qmRPZ4zQuL/IMrgj9332HQTdldNiMbW3Qns9qkHrPtoK2UgXKM4kKm078IJ\nAXEb\r\n=v/mm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.8ddd5c6dc.0","@material/base":"5.0.0-canary.8ddd5c6dc.0","@material/list":"5.0.0-canary.8ddd5c6dc.0","@material/shape":"5.0.0-canary.8ddd5c6dc.0","@material/theme":"5.0.0-canary.8ddd5c6dc.0","@material/ripple":"5.0.0-canary.8ddd5c6dc.0","@material/animation":"5.0.0-canary.8ddd5c6dc.0","@material/elevation":"5.0.0-canary.8ddd5c6dc.0","@material/typography":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.8ddd5c6dc.0_1579052631983_0.2824729397149466","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/drawer","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.a9511d870.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51ef4d5b0a07d23bc90b70412294b764a5034bd3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.a9511d870.0.tgz","fileCount":45,"integrity":"sha512-v8GQr9O2uBxs2aKH/7UYdxnwSiZ0dpYYCoBdCmGWxBL9Czw5j7pmxdDgXtXLCvqI6bXYoy+7wrA5+G/HnJEfGQ==","signatures":[{"sig":"MEYCIQCgtcRhXSYQ6tj1n4RYi/JwT9NH60HGg0++6d9LAGN42AIhALx/cMW7bMn5H15MM4ek39BSuftz67EqzxmYQma2Ah6y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2PLCRA9TVsSAnZWagAABA4P/R30HMf/JM8bLpWqZZ90\n7QsdR01DOppxeROIypRoN/jOoU8jpuXMXvilOy3IsBzyFmoaqBqIPZ/GXeoq\nNFD8Fuzxh1aq8PwJwFzFRplnSVpnGoawXDHmG6QUXZ2DX+CUxZAPpwsT3rLB\n9UWnkrk7LM8dGCuxoYNWIo2sBO24hJJnAfLfOJI+pJGpXnoTrvp2/YSmVvEi\nSWI4mQseA4jgAl0o09T/rDADuhmLafQDd88nA/A2RBBnayLWalDtx+ausD43\nDAtwq5jN7ZIB0RG4Fanw9rZNZweVeWSgV5Pw92kOm/f+ztXUrdMg/IJw+2FO\nk9j0Jm1pkmsglY9xyQBf7nusi7ujtefsBytZOLpEgp/p4me+nf5ft/CWZviA\nRjTDxXwAA3g5NxPpYrPCU7tm6SxwzDLfvQqHE1sT4gUmMNyns2gclbuYtz+X\nWqNd5KbE91YEfXQSChKREiYE4f5udD27i629ok13Ioe0/EDN3gdzbW2GY/1Z\nznstif4Wi8SSSr7b/XE9kRHB3xwydh1uEqeK1O3qJF6NMSaaZWhx9ra0Ty9l\nkpkdkaApq573Q/WjEdrWvRYtEg44JPMm87lGCj6AmTXLL7J2xOjEUWT5pkYg\ndP0NHAOsAQsl5Vw2nfhQxj7BX4l25xnJTevXNLaYXBK95ijckF8QjH6oGGXb\nRxdO\r\n=C6ye\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.a9511d870.0","@material/base":"5.0.0-canary.a9511d870.0","@material/list":"5.0.0-canary.a9511d870.0","@material/shape":"5.0.0-canary.a9511d870.0","@material/theme":"5.0.0-canary.a9511d870.0","@material/ripple":"5.0.0-canary.a9511d870.0","@material/animation":"5.0.0-canary.a9511d870.0","@material/elevation":"5.0.0-canary.a9511d870.0","@material/typography":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.a9511d870.0_1579115467309_0.5053371224472165","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/drawer","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.7c8583c4c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c28ab3cdac776a5e498636a6e086959469b3c57","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.7c8583c4c.0.tgz","fileCount":45,"integrity":"sha512-1SvJdbf9YoJ/2zvjKZS0apMGagq4hSe53C5uOZBzVa7Te5IxMApGwc3Is2fkVfznc95//m9NPSchxIOCr1qu/w==","signatures":[{"sig":"MEYCIQDpu0vc5ydqHEmAWmwGRH9rUlNYhTfb/MJdFbIMbxP6YQIhALfPi372R+MY9KtV8aZt1G7AZZsH2L3dqiCG4fwKo1ZN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5bWCRA9TVsSAnZWagAAgFEP/3I10gkKldVlQH6nwoYJ\nrb+FJUETj9VKt0DkFimuGjgy2U080dGsBnTY+C/P+VIxTais/XQE8ImOdiSc\n5esahisOgdX3ImCCedWQE7PzksaPmzF1SjK4AFpOndv7HJXc6R9hB2Wj/0Gl\nKnNGXsmwqho/nDCqI/VDWDAYSC6cUvYtsu5kr6qPLVjLFQVUe+nevIF2NUEm\nRj0Fxdn5fNuiAYHprChqEYEoQUG2EkIippV0LNjn9XALtKOV/vkzRRSkUw5z\neBgC+RAIBQzX7MmQ+/NeU8KoQ5nqMfyqS2/sdlPRGF3Upk8rkgOELEAFLnm4\nsSSWLMCqKfPp1vIpRa9tJhSUaVBZcMEPCejw+EDkXSls68hUf5xWsSkZ9tBi\nwsDR96KAEx2DJdMtUirjJrMLc8BdReNbiQelsE+WZ9auy2/1WsBvv0+AlTHY\nASg5/5ms4fsSk6ttq6xI6a6uMPCIIeYriHvQh2UVBNkQ6pdHpWIHjJqnasJT\nFjh67Y/VlZZVNaoQnNWmi1Lzl2u1X+Jir15lGKkrAti1ofpG9Uv4YwqoXquW\na9A8IIcfb+vYSGKuVHrIH1hq2YgXNXXM8qMXIVS2BuZxbReVO3e7GnmI0DaM\naSFydeRXbmcNIfmE5lkXgxIXmvuk8nVg+d2FzIJTBcmzri2/rZIBVvguYDB+\nu4Oc\r\n=zyWI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.7c8583c4c.0","@material/base":"5.0.0-canary.7c8583c4c.0","@material/list":"5.0.0-canary.7c8583c4c.0","@material/shape":"5.0.0-canary.7c8583c4c.0","@material/theme":"5.0.0-canary.7c8583c4c.0","@material/ripple":"5.0.0-canary.7c8583c4c.0","@material/animation":"5.0.0-canary.7c8583c4c.0","@material/elevation":"5.0.0-canary.7c8583c4c.0","@material/typography":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.7c8583c4c.0_1579128533685_0.32162254013708114","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/drawer","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.5d4b82bac.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebf3273382e27cc27ddb43d1d9cf8db7f7b2c71b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.5d4b82bac.0.tgz","fileCount":45,"integrity":"sha512-Hsgegx2DYsTQk+/t/wWOZMI+BTSmq5EiD6pfnqhPJ14EY9QEHpEXwsV4eCytA5KrBK68uheIxBqYDKeMpuDphQ==","signatures":[{"sig":"MEQCIG3SJiPTv/imzoJl5Icbf85zMCVVnOGvbOfq3/KZ/415AiAA1FI3XL65AJCi5etZJT0ZnDplDjfKmU137tO5YhHciw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5boCRA9TVsSAnZWagAA12cP/i48vQDeG8IirQPwgW/0\nKQOYzKdy164guXZAjwp/JMpFJbnYL4oz79a1ML82BG3klaU3YN0s3XoTj7Xe\n9bhrYar07z71uTpthuSeHpnQGEaLzZnYoA5nrQPyQWDY4hE1dSQZy7iP3W33\nlnmG7RstZfXLrDJFXZZoEaz1IVX8fHzwrwUQMiG5d8Q4uiwf0+aw5QqH2L9T\nJAhk3Ly0e8hlyRjMRJkR4HPT3/tb3Uoln2oiVmcZ+A+awapPQe/hWuPAKznf\ndfVYW2veXwmzt9/4XugojIa8CND8fqtiXBO1NUX8Vz8vDKLhhNpWJ+eQJWhE\nQIaSGWTxzd2dpOFut0OKjWeD4XS6IpzK8F9p4ULe2UsxJU8VvHgStmMJsCwV\nwLK+jAisZVwiJCz7GHhnA7YVGWLmRhGMn80rKCik6SCiolhcq2KWMVgastw3\ni3vEiMQKrPC4+ubjk8OCDThT2OFMP2ssCzrM4WN/uEn+Stn9hbnt4aF6cni7\n21b+yNmlSxvuR3ad88+Y251sFc9Q12pEoq9DzbRKsopWzbwxHRQo9wIVyEuM\nh4k5k4+mhaLoQgruiN7Ae55sHNnXZEbP4DYTexW305LIquSHDvRw9gWUORYD\n1Hec6PGZMoRUX2CUvZnfecTlGXnWAU65F1J8KLRVvpoBRAWM/SG+o49Gfg+z\nGr6w\r\n=elQZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.5d4b82bac.0","@material/base":"5.0.0-canary.5d4b82bac.0","@material/list":"5.0.0-canary.5d4b82bac.0","@material/shape":"5.0.0-canary.5d4b82bac.0","@material/theme":"5.0.0-canary.5d4b82bac.0","@material/ripple":"5.0.0-canary.5d4b82bac.0","@material/animation":"5.0.0-canary.5d4b82bac.0","@material/elevation":"5.0.0-canary.5d4b82bac.0","@material/typography":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.5d4b82bac.0_1579128551921_0.5820743563503463","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/drawer","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.57d0186e4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68073c9591a5f536b694d5c6f80a48490a00d765","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.57d0186e4.0.tgz","fileCount":45,"integrity":"sha512-a2Pks2f4UocAo1Z4aMgpiK95+Nbumg+jqT7tmdPyHvCZcRJ9V4QRIdXLz9pdS8aHOsbrhVyzAzWA4PgMXJPQxA==","signatures":[{"sig":"MEUCIQDh5JMdDNILA9djq9m5owmRKdKqcfiN0ogHIlOrnzByjwIgX1UCuWOqTlVFtd0xxYSppTYCmrfO3TzXGAzkeW1MGws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKjnCRA9TVsSAnZWagAA/U4P/0P9MuypDOc14gEWxId+\nP61W8+Y8RK/BbuaUZ1+ON9Zjg448lXyalZKhpzKqISDAXgCmVz6CjKBfrVIL\nte0S/9eQ7tkbIaF0r1yhkmPPttguyRtpU9LdOLy0FmU0y7pWtDsHN4Uh22Lm\nLrGB6n6RQ0loEypjn8r/SEe0znxIXzD7NdwRZmC+agahwEc9avHTeK+DaLqN\n74c3S5g1kEVQdFdvb6MolVEu08UFxoFxrg7AnGKF18lBJqR4AGNn3QHunPzU\ngAzncgSXtYyBxylNcSLAxgS6VNXQ2I0aBQPzEuzcNqbFtmFFkauoZfkKPCM0\n9V1SC8g7dJtU3BZcvWs1JHoZAWoCF0aAdGMv2zoKhP/V1u5TO42ZosohMTka\n7FWp/5LSLO1ydgrD6TTCkMOIfe/QZbonwju503aEiK7TRk5EQy7DG9iBUyGK\n0I7FwM6YTeoKq2Wps33iHEGnkoLcAptOF9UbmMimW68cQLMEKMmDgeg6eonq\nbKtbqyOuVocPBTe1+yogOUk6613MCc+C7JKn/64feGCi3U/brjBV5XjJOohD\nvl4WOeYZmprsF19/Toib81zDkd6o+Ua88siNHkWXDLFBtxuHY/IcbLHj8HoW\nsAzeOwDYk3JELJFsMcihAJg4RZBcavVG7wKJ9yCNO5zBKUmztPqw5FJxhbDT\nJSh1\r\n=Qhrv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.57d0186e4.0","@material/base":"5.0.0-canary.57d0186e4.0","@material/list":"5.0.0-canary.57d0186e4.0","@material/shape":"5.0.0-canary.57d0186e4.0","@material/theme":"5.0.0-canary.57d0186e4.0","@material/ripple":"5.0.0-canary.57d0186e4.0","@material/animation":"5.0.0-canary.57d0186e4.0","@material/elevation":"5.0.0-canary.57d0186e4.0","@material/typography":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.57d0186e4.0_1579198695044_0.09714863982244726","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/drawer","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.071a6ab70.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"557b6abcd3066991944f0a85e660887e7dade042","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.071a6ab70.0.tgz","fileCount":45,"integrity":"sha512-GmsHAJFTbf4lU1Tm/I8bdMBKokGApAL2AtBn0Mud1wAlMhuyMpTwV1G4RcuLxMKkVthPkYtqIpu/xvl3ZP0v7Q==","signatures":[{"sig":"MEUCIHz+EyrNWyZ7IxyoieL+sunJXaLHDzFyQARXJzknzT6hAiEAxVPZpE0dXamnuf03MOp6HLIbOS9ftO5T7tHytjlVDXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKpzCRA9TVsSAnZWagAAKsYQAITwAVFzVFlhXMnmCPNX\nsdFXjMhCXtbs6B9WkI8Xd0G6TvEMuVSe3etlnKuqaQ+5Q/MwMRfH6f4xc3LW\nUnwyFrBd9vR7/rfAptg4uMs/ecoAWl6CvHJRfUCxMZnb4yGei8eNirjpQKxI\nrFw35oxT6+IyfbkDFZDHeW33AV1U3TH5qz9Q3YG0MGLB6tGRR0ztrf0KRcHO\nt4jyEfKQsO/0OVOC/TT8qSF8TTUYawwcM9lVdkCaSXGIl8kDsMDVeQJYkRAq\neeKS/bTv/YSMvicTKwaPPqqdLvG1GY0HIacsfKut0LbhpjZ1RbPmPCpVFF7j\nOUU8+TYnNX/tKHhaqDuPTQIWJtLusoOpc+TbVmdH3vOPLyFD55XQXOvpX6rv\n5y97RF3xGLCYCq8tmhYndVZ352OffE4Bhn4LlN980lwRiYw7S8oKYBGAbAKs\n/nGsZ/PlWsfxkKhBGnx6CtiN9GVAvlTQusaMeroxSJsow6+qV2OCp9JfwYjw\nKn6nhgZg4cVZZeX471wTT7QmAejEFJh4ydR8BoqBoV9RXS10GZheKDJfnc/d\nGkXeTi5eebgVb5XDYD5LAEHY/LCHgM7Vylt8Nl35FNKcvMIYfwzbeVcFu18R\nyY34W5rbmenWw+WvfOTHutJj5vIGj4UPDrFN7nqw5pid+hN9QKHlm+6pqgHt\nGeYo\r\n=cP5e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.071a6ab70.0","@material/base":"5.0.0-canary.071a6ab70.0","@material/list":"5.0.0-canary.071a6ab70.0","@material/shape":"5.0.0-canary.071a6ab70.0","@material/theme":"5.0.0-canary.071a6ab70.0","@material/ripple":"5.0.0-canary.071a6ab70.0","@material/animation":"5.0.0-canary.071a6ab70.0","@material/elevation":"5.0.0-canary.071a6ab70.0","@material/typography":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.071a6ab70.0_1579199091251_0.5841809114847962","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/drawer","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.22e0cb618.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1601e28ada9b2cfff754b28fa93d7a963bf3ecbe","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.22e0cb618.0.tgz","fileCount":45,"integrity":"sha512-GZLDLv3iOvR5MZffCHwgAgtX+hgAaFY9MjpRgfDf3/zI2GKxDtQhaPgKWHeFvbYXRrrirBDu7w1NCMBdpRWH4g==","signatures":[{"sig":"MEYCIQCimHQHPOfIFIWelQUP/LfbBZCH/3x8zi/8KLNgOOQRBgIhANQ20nCqWgBsc8lpHPwuo3UOlhobsArXrYtRuhAxaYrl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK/TCRA9TVsSAnZWagAA3n8P/1pk+3mDHcZWZaTbsW69\nPfksbHe53u4C2e5+RF59E/baIbqzHXQ7KKju9c23eSQ7UQ7eZO9Zs8IHPJb0\nC0HV4k9simJsRFJ0neRwhbdeiYaZLRLEmOiuiShfo6Ps8yFPyoeZ8WfwqMe9\nPbIN7CGZmoR8ehhNrWuRo+8IS12S/VclT9FQiwhmJP8eXyQy1Qb8gXQiQOmc\nKLQw0A8jCyCiDtNySUQt9tP7NFtJtVOT+pOiOir+txzUgZF5zBHUFGwsgkpi\nlBHkhEsuisypUcAc6IqeU2kuiBkYyOZdL40dE+jxLzawSptJv1pVVTk/7IGJ\nYcPtSCy59BE0P3eVQoQZx3fQUDhM6cHLwUuLerDhjOg9mQI43bkp59zokVGF\nSt7MEWHj7DaSklZgk82mE+TBj9+9l00hpdTncHCZRybrzWsJl5MUq3xJzuo8\nXO1VbKHbqKz76XNv2uzBZbF8Xt8RlbIaCfW9fQCHWb3ACwYmqt4/sSCu1scm\nu9Yi/jPNAClWruGhE/LkFltmjlHGhitFvs1dBiv+Bd0VlWV7YYVQipZUDO7Z\nih6+wjBuqyVzhPRSFhCUQhCcr1jmpCrLMI3k9kIcYGoAxeTOqtoIlwisJp61\nfxc4UndxFX9tFkYXlhLbrL8L7oXdgAWcbrvxypnT/RZQplWbeMGzaHmmGMLX\nbUVV\r\n=PFiG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.22e0cb618.0","@material/base":"5.0.0-canary.22e0cb618.0","@material/list":"5.0.0-canary.22e0cb618.0","@material/shape":"5.0.0-canary.22e0cb618.0","@material/theme":"5.0.0-canary.22e0cb618.0","@material/ripple":"5.0.0-canary.22e0cb618.0","@material/animation":"5.0.0-canary.22e0cb618.0","@material/elevation":"5.0.0-canary.22e0cb618.0","@material/typography":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.22e0cb618.0_1579200467506_0.2783593332687653","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/drawer","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.f16f15b8f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e22635a8c8db4ec432a576c5b8ead737ffd9ac57","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.f16f15b8f.0.tgz","fileCount":45,"integrity":"sha512-VfpR9J7qePcGOaFu9yK3HhAaYEKuxUrnmoSdtI2bWG/OcS6+WhBmYt1JpFHcCgSqurNv3DqgZfGb4w1E8bzBKA==","signatures":[{"sig":"MEQCIDjO2Gz1mdDd5mlibrL1g0tgjyM+uSFrBz014sl1as0xAiBiXpfVP2GPSlH3gFWtSl6IeoiW5DC2iFImNrtH3k9qNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPrjCRA9TVsSAnZWagAAVKcP/0yLutxEDHE00WPnKzQr\nNIOosNPGCw4b74b5I3Ka3D8XoIIndI/b3QCFcH7dDdu6vXOSLJ8NDPwpRoDs\nfFecTxd1jISNSuiEeKPwXb1VPZmeFRJCLAgikjW920vgXAkbWDgUp5HA3cGH\nUbISRKmcqNHByuTou1oJz1pBO75EI80Zx9u2GK9deNztAtIqqLXlTfuIpxsO\njyWgqlZqCdYjTzuMbyEAFvPjkQoFm1npMzCSwYyLhI9NhanC7XBNMVNH9gtx\nzD2WzI5AiS7uG/XreAYNXm8x/7Nr9EdblKKdP989t6vSko7fvt/Kk3lxzzOC\nBVRRkdANxWAeTIfryFtbiEH6dX+Eu64KYTU8X6x7LiFCgFtRW3BQ+0XuqSng\npl1jfU+glk1/AzJe3reMoTMp9c6Vfj+Cy36+qLhP4jfLNuFs1Yg57qoxtkNz\ndVkJLzDVpP1OcWD1HEOBE5wzY8dLbRD9cdnBQlU5YQY+eGpyQ9Jz1KeXf3XO\naTzX2vt2CCKb1WiPPkJ3E1Uouxki0BxD3eefWB0VAeJHi/abikyk7rvu345V\neT/4huuRsDf0ZWlr0oESgC2J0GSHUOBJaRfbvk7xt9Jd+X/0CP+79/IUOiSW\nWkSNtjj336y7AtePRjCvrhlqOs7UssWd10ZOscB9vIcETjjvMNC+ceAcB5bw\nf5S4\r\n=8rfh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.f16f15b8f.0","@material/base":"5.0.0-canary.f16f15b8f.0","@material/list":"5.0.0-canary.f16f15b8f.0","@material/shape":"5.0.0-canary.f16f15b8f.0","@material/theme":"5.0.0-canary.f16f15b8f.0","@material/ripple":"5.0.0-canary.f16f15b8f.0","@material/animation":"5.0.0-canary.f16f15b8f.0","@material/elevation":"5.0.0-canary.f16f15b8f.0","@material/typography":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.f16f15b8f.0_1579219683075_0.5766104693710394","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/drawer","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.aa8e43e9a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15f41493e9212a3a62115c161ffadc778c80fcba","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":45,"integrity":"sha512-xbo3SEOC/yrlGnTFumWf6Fuw3DnYabyBJtue9TvT379WvWW+84JzpAAZswLCrTT9H/daufjCc+NFJBY8/jHHtw==","signatures":[{"sig":"MEYCIQDabBTWFzHxIv1T5VK8xaJc46X870cq+bqwkVufRcYg0gIhAOgxrYK7WgN2Ar4Y/y2QrHRCWpvtLTyXzGPmxfzp3mj+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQHMCRA9TVsSAnZWagAArAQP/j8ZQsKzkSV8wTel8E20\nSFC/hsK7BPXKPcXx+NjYfuMpsEPFFQUo90pgtQcVsDkTGJJuQKWSla7NXn94\n8D/z5qJY24zLjOojohwQbTYDTaHhsM9D76+mxuDQAFMOmr/onXmOHs1DkhYt\n4aXb8jphEJtluEjB517Bra0RbhcR97ntg6KVWcASaVXp68lAIx9LsVQ/HyFa\n+fGD48lhFegluddeRVzn08u1bVd0CxRuHyjxLazGs0uxC/JyujeBUgImtQyY\nc63rOAl9CbZNRp/cy6AZj5faad4IEfLuDPPBEQp7liEr+GPuAkULe3cfiXWy\n+zLCm5t6QrcRE/IF+Berv6f3cc+Q+JeQDMb8uWWvXwkQOiqCwPLlKMVxcgyq\n87VGrwj7r8ff+jxTUKVLMFm4/Sz3wI5Bgmd33TMTXvfwoXQOL4zXLXEzhqoy\n4a4Axy5r8G24RDh2+n93LD6BVJ2NM5T0WMmfi4xMpPVEUFhc2OKo81jDbIAW\n2amLwX5FezCOvFvJnKJTnwXBmBhfnrxPLbc9zzPKDi3W+spBx3xbdT4gsGsd\nEWMVJ+eNBb3x3Jj8VviSaIOKxd8Q3pT5qLXHvK2nDcXrMZYkhrUrDzHP6sTu\nbRRVWyHWicRte7T/6GyaJHaWFrAxRAO5HoLXQEjsx3uFrIALiwxcY8DvttLZ\nfV0l\r\n=7syh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.aa8e43e9a.0","@material/base":"5.0.0-canary.aa8e43e9a.0","@material/list":"5.0.0-canary.aa8e43e9a.0","@material/shape":"5.0.0-canary.aa8e43e9a.0","@material/theme":"5.0.0-canary.aa8e43e9a.0","@material/ripple":"5.0.0-canary.aa8e43e9a.0","@material/animation":"5.0.0-canary.aa8e43e9a.0","@material/elevation":"5.0.0-canary.aa8e43e9a.0","@material/typography":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.aa8e43e9a.0_1579221451722_0.35311772561536436","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/drawer","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.fe1f3ca07.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cadf51dafefe2ef374fffefb0261591d2a3e90d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":45,"integrity":"sha512-M5Rv4vPpj2LcyU1lJU4rGdQT62QETrXhNxOuSn9CqSiI9cAaxqLBPMp8639EJ6M+eVrVqYEVNTMkDz5/xvEoNg==","signatures":[{"sig":"MEYCIQDRfe0nF5PUje8N9R8bcIE25I8Q5Qvq8V2qkVhoIRUdEwIhAPwxKYEjFa+zXr3R5PGxk/53CQuwAC0aNOVKv4xKT7jR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQdVCRA9TVsSAnZWagAADM0P/jNxhMJYgnlwVMIibCfd\nGoRDfG8T+uvBqLtyulYFZvQUnVd0gW4NBrK4Mo7QJ320ILlzn1lFqQxqYcu9\ns8Rd0xZYRNuq51wWfvkvZ2EXuCVKPcQ/nMV8GTYYZOcobyAnlmDxYkwRWW4F\n8wLKAnNimK8d7uZJRhWa58MY511NAluATDmjolE0AcP1y6sqqqQeahE72cLO\nh3qExX4y4FAPgZUOrPARVpIBQDZBWUH4X/kAmNZZJShETrsoCUgikUTUmed0\n8wy4TeE2ARyPdYnfLPeoaCamEVgOiNvc5jbZUfyUygsxkuRpSUEmbBQTPCgo\n/gZ7mONjcqI73ZCBprX3ZzGboIa8RLuE15aPXuOPQmuC8p6xBDPKn6U/cmWS\ndEKJTeQ1fDMLceNKqhIPEaoc8sk9cvKTm7DabQlUl/UdiYiIm9d1XhwciMLw\nSnbuSbOcX1sbqSw7P5tHKC7W5GWwfNbb7DENriFr6DBZpKrFGP6Qh+ZxHHU8\nPIWn7881T9sU8XDBQ+bGRezOZZPyi261MPeZF6ISW9U6YgrMOgh33FYHjBXb\nDqvcxCrdYMmpGEB48hIvrfRe/zWQfMz0v0vjwXwxu2WWf8Bz8ErsFufmh7CW\npnUCIfjWEImsUuWcy64J04+P89w8UZU4sYLjbHGAQVOS9wR1Bucbx3CqgI7U\n8rnl\r\n=76mY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.fe1f3ca07.0","@material/base":"5.0.0-canary.fe1f3ca07.0","@material/list":"5.0.0-canary.fe1f3ca07.0","@material/shape":"5.0.0-canary.fe1f3ca07.0","@material/theme":"5.0.0-canary.fe1f3ca07.0","@material/ripple":"5.0.0-canary.fe1f3ca07.0","@material/animation":"5.0.0-canary.fe1f3ca07.0","@material/elevation":"5.0.0-canary.fe1f3ca07.0","@material/typography":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.fe1f3ca07.0_1579222868787_0.15689457315387312","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/drawer","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.d405af26b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17e1f1007c37f147bab898b8d4791672b2b71fac","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.d405af26b.0.tgz","fileCount":45,"integrity":"sha512-YfGWLCL7lUzkgvyaBLLa3yDUGWrG5fXM16dN54lf/KdjqfRtDkRscKQ/BNWG2kfsGgggXX/1J1EAinzSP8IlFQ==","signatures":[{"sig":"MEYCIQDhPQB2FMcAcotOf9BfqYcisfQN7TGsaDSPHnVQtphQMgIhAJbmVMMRMBxIjNlnbzbALTdkaeQGSBH8MBjMkvFXEZwD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfpjCRA9TVsSAnZWagAAsi4P/jmlygFTJ3WUlTq+uy++\n1KGi4HaDU/15zNN4M7DyeTHhOa0v9Gl6nsq17FwxRzy2WJexIf97frJE0Cli\nUmXwVIMKacGlLRgH29dIznSGHgRRa70HMgjlBz0ufAKo8EMbGjztd81Wds8i\n6ueOU3XTMg4xJy0BJvKFX8YXmmZnZzk4oqSW77DbsNnVH0IL3iBO1VLL1eXQ\nfjZpmQUnpA24Vo1gTlAR/74z9j7GCp2xbAmAB4yl6OG4oSpjQ1Gj93z7Xo48\nNRkf15Qqy8Mo9ajSCt42r32MguVqyommTGdCjZGFbG9EJmegb8nsN+b6mDwM\nVsiWj2diIU4gDhLNgC78nToA4askIYe427R1hCrSq+qdHDMs+BTjRu8PCxgJ\nbxg/Hgl29+Cj7hZDQHOx6CM5SPexI0BOOAds6Wu8DFnlzzGgA9oQJKP5fCZg\n+7c5944pOuYAeO1NEmDQqR0nWb0IHBkgPuH0N/HWIoCWR0HA+OT5moacot1+\ne+RnUrqZxwGZJQ/5nzC+g5PAYk4ySNW04WvqhapC6pJEBb6dFMmihPO/YyER\n1Bld5c5rllbvjGG1+MKF3jD/hYHT+fAPDAl6ZtfczIc/N0/s0Tp3m53s+dbb\nQ4duBzIPImv+SZYfo5/+5BpD9V7cuYsXs/N5dQ2plNlWx2/YCJPzCatCTG5S\nHUxC\r\n=FEJw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.d405af26b.0","@material/base":"5.0.0-canary.d405af26b.0","@material/list":"5.0.0-canary.d405af26b.0","@material/shape":"5.0.0-canary.d405af26b.0","@material/theme":"5.0.0-canary.d405af26b.0","@material/ripple":"5.0.0-canary.d405af26b.0","@material/animation":"5.0.0-canary.d405af26b.0","@material/elevation":"5.0.0-canary.d405af26b.0","@material/typography":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.d405af26b.0_1579285091206_0.6401533795145848","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/drawer","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.6e857aae2.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a12df7d6a215bbc78f648e330150798eb30899ab","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.6e857aae2.0.tgz","fileCount":45,"integrity":"sha512-QmBkBjR8Irbh4t6moEtoRFQ/MOllMn8f3of9a/ZhtkQnfJlDUZqxl7K5FJ9hL2k+WzDeLRzIPdVGIo7BioMWRQ==","signatures":[{"sig":"MEQCIEUccx17J17RZ08BJ+SK55KOXg9w5eikZkmRXpsC1q2OAiAUdEyu2/sJuQNBTfyba8DLWeq0gMaI8mo2QOG81au1fA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfsyCRA9TVsSAnZWagAA+JgP/iuh5Vo7N5HverY0kfKW\nMrT9tgPnuny4zF4aQGnt99VVJYXNH4CVQSRha964P9Ie2nuyP651K5qT5i6G\nIbcmdhTtqGJZDIU11WOm9y5u2PCipsTmK9Uk0o7jHAAbHSTZyqUmU9A3cWA8\nlcdVbg34BJRqwZ4jacYpJIpX0s/opmwl4db7noyr/hpXvauhf0K4TdgAJhKX\ngZ0PYeCEjq1CdNvuUIyCCetO/vOZMYCJj6GAQGEwYpcIGn6ksy6Vbj6nsY98\nuSs0XML4IhniVyvZyZPKZCg43ofQM495ZIajl2OYU4ZwukAmcC8iuUZ7I69y\nACGsILVdFpEbygcptt8On8nLYN8BudHkX0aiFoylv92xTQ0xAWOC4qVAAe9F\nbHnxgaalBgHhFv28hkFt5WUe2BfsHGVgcMJQRKP3crDlKv+V9UPmFBgwMelM\nMsF5tnyfSu0YUvC2rsZCU5F7UUWpJk1HtEhWuspUL5+mLDW+YwkqbLCidEZS\n8Jze8e6aGHf5Cm90zxO+hxeAYbNJfmMQ0P7c4ayxTa8srOWKYTzXkNC1aACm\npCG7eo3+oVHLX4gJkWbJuAV7oqV2kuo/SsIriuhIYPnV0OcxjutKDMNiKgup\nhttJfqUtSiOk5TnbW8qCSVx2e5TLkLOQblOmHCx+ba3oGHzXWUqOOMi6E5QV\niLPA\r\n=S+nF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.6e857aae2.0","@material/base":"5.0.0-canary.6e857aae2.0","@material/list":"5.0.0-canary.6e857aae2.0","@material/shape":"5.0.0-canary.6e857aae2.0","@material/theme":"5.0.0-canary.6e857aae2.0","@material/ripple":"5.0.0-canary.6e857aae2.0","@material/animation":"5.0.0-canary.6e857aae2.0","@material/elevation":"5.0.0-canary.6e857aae2.0","@material/typography":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.6e857aae2.0_1579285298464_0.3277856596804041","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/drawer","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.e2e764f7c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a05d87c3b1688aa8abc773d0f6cdab7a95c40efe","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.e2e764f7c.0.tgz","fileCount":45,"integrity":"sha512-X2fvyAPcMBFeExHAMeDHwZvX7aCQ57Hefh4pgtMAJMV/BG968jBaZxHjizpqsp8w1FWc4aT7jim+/UYh6H+h+w==","signatures":[{"sig":"MEUCIQDwZiam17+ZO+cfvkDBE8UOITzgzhXiQnKlAu65QCJQBAIgSCP6fOdcudHztrHRZpkqjO2lcCXpShV55ohiGMpfWsw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf7GCRA9TVsSAnZWagAAbB0P/AhUqKXn7Ry6mhzYG+vI\n8aEacNHP/FM59mZ8eAlGCdr5fLUNtmgpmDHDfyfuum4DXmZR2L3MYj0dC9HP\nmd58U+BMXhrGs5w/+Gk+P913vWSl79Cr3asNccxGLXB8BCKmMFVTCYKPUskQ\nQ/N8kyUlZDizHs0jquTLgmUPh6RsUZyP7UyzorLanrnb+FBlkgSc1A+oeirf\nawVSsYyt/9tH4coIzUC4yevFQd6ocks1mIBtTNxucRns4glbV7X37H9H7mI5\neF32tHUepJYL14GXjDZPPwuxWz40Pw8HZXEiIG7GsYajzpOdQ3IPTHILnR1G\nLOMMeCBdRkmC+EW1TJlgMeBSpT3n0g+XnVEYAqAZqDRiTiWCU/n/IqPxlP7b\n3x3WzHs5JdYbECxk0d/VFYdCtXfd3uas4oVng2soZlicg99ObXjjYb3a4uAW\n5/kQCygKy75Eu7EnhUFL5egjMFyXcX1CviBZC2uMkhc6uIXxpu5aibHwsgbq\nqVdDGG83CLuDhai9YlO04eysm1/QCXfiTBkk/7/W6SiEwVdDCJjME9f1qp0o\nE2Kv5d4g8DTu3Ddpj9mpGRQ8gHMxFNC8ILK7cHE5IL7GXuexng4edNVF406D\nm/nd9Y2+2PGuMynagVHXoJ8unIISkoryU/4+5JbjrGJAgMYmd/C1+3+8TEAM\nnbwA\r\n=mZIL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.e2e764f7c.0","@material/base":"5.0.0-canary.e2e764f7c.0","@material/list":"5.0.0-canary.e2e764f7c.0","@material/shape":"5.0.0-canary.e2e764f7c.0","@material/theme":"5.0.0-canary.e2e764f7c.0","@material/ripple":"5.0.0-canary.e2e764f7c.0","@material/animation":"5.0.0-canary.e2e764f7c.0","@material/elevation":"5.0.0-canary.e2e764f7c.0","@material/typography":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.e2e764f7c.0_1579286214268_0.7252815086814579","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/drawer","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.7ef986a87.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"460e36d233918177ce148ceb300ceced415dd561","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.7ef986a87.0.tgz","fileCount":45,"integrity":"sha512-AAxsnPhdPADOvFP/oCdLS2XDpx7eQpRT9YI7jlMrAgMXNlTlvJYu9Prt1W/7aJln6CcJUDu4kwzzA0T4AKDdSQ==","signatures":[{"sig":"MEQCIBAZPzDlZl1FfyIpjXb6yWrafw3UMYAsgbcFtMJKpahvAiAjzxPCLgXk5VTxcvnrErw3aIedAizdAkrXVKjfhr5fRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgudCRA9TVsSAnZWagAAc4EP/10H57V3uy39ONMpam1M\nuosO4Nq9mAo/e5LBCNQ0WXnTEMbobEgcY99OkzDDCnKZzsupQJZ4hBjItICV\n6WoK3CLrvbN1HShEIYGh+UnYm/5uHHfGkJUml+zi4X1KpoNGssjA/xE2SQkh\nBKk4Ga5wbvQGYrvBjMkahgVKfdbxIB02yttEVv4lZHxcYujXX7K7XhlhaGQ4\n8yzifT3NfCCC82TTJkc3zybN0ZdKaLlXwffrE+VFL/sbwWDVVp0X+adjtJNr\noSOHiPObaeYsJPLq0gISS4lgOylXz/H5r8T0otvu/pyzYaEzE6h8RO33iU/8\n1PucqWo3VC8vNKa8jDRkRH0Of8gCF6Shy384YsIG6uEYrg9wnHEXGd1HGdzu\ngKkd59kGoY3VrshgmCjodHe+xmxfW0o+yK0v1mH9CCwigosKUlJq19XJswTW\ndzwtTmckYOgro0K7JRltF/0qNAgIDmv9/my8/YBko3vGRxLvKvemJFzZWyw9\nMmVadVrSuc3l86BXIumoxOHzl2NuLnKl4rrvxqutvjdLjk+ofjs688dQzkQm\nzD0tSErE1Pt8L9Q+Zm3lcomwrC7Ai7QYm2MqgIO85j5iqa5ZwlhaLRtJ/qMw\nRQGyarrVngO0MBJXst7PSsaRoDhvy0rDe1+h6lQNI7toV+iiksr0C/ITVUul\nO0vS\r\n=0pdK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.7ef986a87.0","@material/base":"5.0.0-canary.7ef986a87.0","@material/list":"5.0.0-canary.7ef986a87.0","@material/shape":"5.0.0-canary.7ef986a87.0","@material/theme":"5.0.0-canary.7ef986a87.0","@material/ripple":"5.0.0-canary.7ef986a87.0","@material/animation":"5.0.0-canary.7ef986a87.0","@material/elevation":"5.0.0-canary.7ef986a87.0","@material/typography":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.7ef986a87.0_1579289501391_0.6759800640690721","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/drawer","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.29402e2d4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1158d8249b01a5a25a9e78e5ccec61ab12f46b81","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.29402e2d4.0.tgz","fileCount":45,"integrity":"sha512-bVHo0MYQ11+s2NDdrtZsV5ztUuRmZaZsHYoc6jkJJiDuh+LWx8URC05cQttJ6gQVM4p9hy0DrRFN4RFQkOTJvw==","signatures":[{"sig":"MEUCIByMkn/+TOANcLSU9bc7kGo8Z84BcNJ5lKNdw4a8s0pKAiEAtCoH55d4Y85fKyxZ449cDae+gr5RtOukvVHgEALsHP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhvXCRA9TVsSAnZWagAANTUP/2F3Pnqe929st95W+lRT\nzkfba4FmCd4uA7cGF3xHKmkEZsxL5hKq21LVu2CEiX3+TQIFxtuPIxvUnmkX\na4IMGiB0ooH5SwTPOwdNjSIn9XdSxltoeZIR0eJMO4O0MxMTkDcE9dgX8lOb\n90wdlnNKJysP0ewcZSPK7neOPmDN+5waTVA3WJ3xh4ZVfXe/EmK/D8tDZspT\noaxxdjLBTCkuGbNzzz82O7ieRfSxkZhKXScPfEDQX7oiyHf+Ia5SsyPPX2sj\n3SoWiGmSJ+9/FaINepeo2x1Hwo4EJoGpL62InvihVhjm+O/die6KT20BQQrA\nH07Tq+o7On021R7+LdCg9UHTlwr1cNZ+58WlD47h2J+cjfDETBA9A5tT/gqY\nffeOLGjoQqZqu6IP3c0FS7tcE3CWHB42fy7k1xckorNPJYnL7s9dZdhZXv5s\n4hZlPmdR09vMaFduXbpx+yUsLKDpFbbspZrJiKNWAcUUTDKiepxp5Li9i6ZE\nY27KS06i1TWyVqc5ED2/hChn4alA1ZR/Tj85RaETQWmHsSxJZQwLgVW/1e/9\n/hTNe6PwM3MbIwjYnhTc1WHvxZTDp4nQ09jM0roMBoawsjVpdEbml5XU7TRO\nhh8hoCJveVH4VM3OTeWnp5XjYtZhz9y++zmfolt/cZkwLNf1b2EuAe0/GZcQ\nsi5S\r\n=8zum\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.29402e2d4.0","@material/base":"5.0.0-canary.29402e2d4.0","@material/list":"5.0.0-canary.29402e2d4.0","@material/shape":"5.0.0-canary.29402e2d4.0","@material/theme":"5.0.0-canary.29402e2d4.0","@material/ripple":"5.0.0-canary.29402e2d4.0","@material/animation":"5.0.0-canary.29402e2d4.0","@material/elevation":"5.0.0-canary.29402e2d4.0","@material/typography":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.29402e2d4.0_1579293655178_0.18677488977379508","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/drawer","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.2b3ec563c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ff66e620b1a8a99d30132020ef6464b180f7402","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.2b3ec563c.0.tgz","fileCount":45,"integrity":"sha512-klegUeMAZVYRgvkIpO7WwiuVBucwCKSxI0m/e9bTzlgs9AHdb0VRZZQFGJZE+jvRpwa50zSYv6xyUlEucCXtQQ==","signatures":[{"sig":"MEQCIE0IzZNNJoarHQXfmwpLH2IzVf70yU5nosKt3zNTIl5gAiAwM1zc7QYYYpc3vrUUEcs0AXzZVlxWZaE7dgQSTMLxZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj9cCRA9TVsSAnZWagAAb04QAJzsRgzSDopmhj7cBXMy\nWjl1lw0QzYAAypOJEouL15KfPTqqphpL+Hma1QJ4Rzf3qkPjGCWMHZy1AW3u\ns+1tlS3tpYReAFtW9vLd7K4Q+I6f0NWA/t833kdqgfh6Hn5jx1lnyaaAKomE\nZmiJ4k4+HZorgjhVoMW2MvmYNxFXA6EV9Ej7G1FicQB7oUebAwIQL1hFeD3J\nEoZelC6u22peeyhrcnqswHObu98DQ641RBKlukLp0k5aJJFU2ObgtaKqYauY\nTc3HOHMZ0z3eVEh/iRCuagnXUPyrHZVvM9bHCnVigQe9rABi8E+J3HysxnXc\nj6fVoS23pOp7u0KgaYZvHO2rl+fDvUj5LwWjn+h9ULLxI3kIhDPmQbpCoTwc\nSJK0SqcdviHHmZF8us/sB1Ga/7y94s/riPwQrNvjURQNltSAACa1EJ5yXOvq\n7UGGzXSep6xeiRNa+zkRxAvZqp4idZwn2AqcmnhHkL8q31VjwKKYAeHtJaNS\nQTUMqyJ211nG4tnt+RJdmjxDpmRA2vliO+NXnOGzomD+qlxtcbcvOaXk/fzn\nA8wAPwBZCO6l9j2Z8BaNUiUMhIxxtU+e16ek9ybaUU5vGofw7A8y1oBjVvSp\njuy7S3dYDCAU3OVAfx4Im1GJY4hSmMLewJCqO9dk4MtWaew3NqeouEbx0Vd8\n3wj1\r\n=CSgM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.2b3ec563c.0","@material/base":"5.0.0-canary.2b3ec563c.0","@material/list":"5.0.0-canary.2b3ec563c.0","@material/shape":"5.0.0-canary.2b3ec563c.0","@material/theme":"5.0.0-canary.2b3ec563c.0","@material/ripple":"5.0.0-canary.2b3ec563c.0","@material/animation":"5.0.0-canary.2b3ec563c.0","@material/elevation":"5.0.0-canary.2b3ec563c.0","@material/typography":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.2b3ec563c.0_1579302747878_0.538020075255873","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/drawer","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.e8a993677.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1de2ec6eda374793bc3eddd82fd6a165a4bccae1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.e8a993677.0.tgz","fileCount":45,"integrity":"sha512-QGa2B0h8UOlGm6y3XGGS+KSFNuszogaRGyOsxEA/6rW182m5oRbHn8KEUu2jWPA4PoB9Z7TXL4acaZyzoZ4RYg==","signatures":[{"sig":"MEYCIQChGtmui/cGsz4+lef3dFIXQm9isqsKUhAMbbqnnQTU0wIhALKqmm5EfXFR+a9SFSpRfZshhoFiN9oEkBrxUQrbk4ZB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyvmCRA9TVsSAnZWagAADuEP/imEwCNO57bZwVFRLmQY\nrN2GlDDjFY2ocqUokjCdYP3F1H4xCbG25GJSCpgAS2VlyQclGTtyb9eUm8tT\nJ9EPY/P9p0BzYynmMVsRphFwWtGXIXyPRtHoqZpvMeJrgBiAXSL3rJycf6om\nCyj8s3xKb8GjRZh98zGCaKqsES+FafOcEuRNO2jLq7oYRBMDBAuELxaAKYaN\npoMIuInmbbqzt6dFiUqKwKC5dnPe8GtChfLMyEFwxtQolvY4h/2fNUrJr6Ax\nvIAB9tqiY+jqY57v+dxA1R0JP8jYS2PYT1P8U9vLdbccJ/Wld7fntL16nskr\nCs745aWx5lSnugUu2SZN0Bxg0LXaTZoyh732947+BQhVDdgv4ygkfRr2ZpMk\nX0OVi3w/LRcV5Pa8VgoSJVGLW6g8VWpIh6pcZ8gEWHAccghzVAPEGbB2hFbC\nAVb6Sza8BUAvyEebylpOPPrEMx6r8wxulfPdY+20ZWcHWB09Z69cpQ4EtRjp\nbMkbJoOJ298y9aTJEd7lWs7c+euvf5n0DK4HLCoThU6X+Mfrn+eCVUJ6uZxu\nqO+V8eXGPPfsfDtgIQyhaeJ3oI0v8qeONbrjz+dyhCC5+5wsFFE+nvLh4yha\nH+oJWPbmngbYT9XtpoSyEVQaLnVoJsolXl4aAVI/JIvKkMai6eBr8lU7GYUp\nRm1p\r\n=rToP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.e8a993677.0","@material/base":"5.0.0-canary.e8a993677.0","@material/list":"5.0.0-canary.e8a993677.0","@material/shape":"5.0.0-canary.e8a993677.0","@material/theme":"5.0.0-canary.e8a993677.0","@material/ripple":"5.0.0-canary.e8a993677.0","@material/animation":"5.0.0-canary.e8a993677.0","@material/elevation":"5.0.0-canary.e8a993677.0","@material/typography":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.e8a993677.0_1579625446535_0.1359220158045502","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/drawer","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.cd4903304.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0237cedfbeee672dc96022b89fd079972c1d130","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.cd4903304.0.tgz","fileCount":45,"integrity":"sha512-T9vqbpZ3mDtE/oq7DFHJ09hBoEPG+95OhpWDKhbMOAdR3tSjYYp7T/jpkEcnv0AeN3dTT/bhoxQaEP8gz5Cxcw==","signatures":[{"sig":"MEUCIAKq0A2m42s7NzYK2u5uQy48+myFhtrPCtmzAtwVwVNLAiEAyGQT/CRyqrvI7NvJBAN14UQiscrEDVPAIGTUW/kEkAU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28/CRA9TVsSAnZWagAA4iEQAI4w187ixGA21Znw9Wzj\nfDdxY2tSl16y7twTsvs+avV8b9GurTeDXZXuYEaAmkD7fokV3CGzvVGLHIkJ\ntrCtPm1rvoqwVmhBRgZuuuBPwe5dVSxLGCnJNhXMQ088hIPA7DemYM4mpw2z\nfu3QuZyI7u+b90+pNFxzhp0PwNsNVdIjMip/FSonifLuS8sIcmp50L6r/KKR\nvmr2O6QA5x1mTp8k3DNvnWrF6on+VlwrBRossz7K/VJPURFOgad04v0ZtN1c\nQ8ycgbNe6Mn7UjQWUXJY6r7nWKacFnp8TgxpZb3dq/ssDyz2RmTQ1fZnzAPd\nqLYJV+o8no/xMegRMMSjtGtGBRbpnpjaNWuwMQ6M93GPzfWTTRHh6aTcHFV1\nTdO0pik6QIL4l4lZa24ZV+ejqlcqeeg9lmA6IKRzh0/6ynlVcwL8oluNGRqw\nD31FcShA83q2VO49X7hjVoN6/yf08zzd99EtrCwLT8ux7c8D1TjcY+4G6OcK\nxuZsWKSRILCpXURofGIenWSKwgQVuxiWfLAVwIz+UJxIPD5L1TMjzzXqfVCg\nSM9TdHi6K5T7fzNshxi1ndDuESm8lDceNMLMKMNSSNyWilAZQhPynhIk8/LA\nmcl0gi2DHHnLJV1MLpsywjmeieelprTn2ltSCLAo5vAu9sQD2I1YIGOMpOCh\nl41q\r\n=MZyd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.cd4903304.0","@material/base":"5.0.0-canary.cd4903304.0","@material/list":"5.0.0-canary.cd4903304.0","@material/shape":"5.0.0-canary.cd4903304.0","@material/theme":"5.0.0-canary.cd4903304.0","@material/ripple":"5.0.0-canary.cd4903304.0","@material/animation":"5.0.0-canary.cd4903304.0","@material/elevation":"5.0.0-canary.cd4903304.0","@material/typography":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.cd4903304.0_1579642686835_0.6710158303533704","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/drawer","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.7e4b04b25.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc2840db35e59bc54ac4188f969491cacc062edd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.7e4b04b25.0.tgz","fileCount":45,"integrity":"sha512-cqy95p/VLE69IjxIn5yir6se6pLxFCr4Kf077ckqqSIzuIw8ZaPmpAxKzxTNAVllgK0PMej2bH2D5Swy90pknw==","signatures":[{"sig":"MEYCIQDlMnpCl+2LspIa/q+1LFJ5TgtYNuoVVRVBJIdYEE0qjwIhANO/pgv9/Pa5t9hoEz328gijp//W716jLgjKgOshZ6EI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ39uCRA9TVsSAnZWagAAp4MP/jx9rPu/MT81pdHaz766\nXReF72StnvU6il/40Ayms434MMtFdR2lzdzPUGoxpU+qTCJe/gDDt1luziJk\no41n0AM26JFgAtmxCnbPWroHJ6xPrZo5iq+JXWPmGmTCuj0faW/LnA2ricFj\nc94bzUFF+UnZM14q00uR2dPaHqRMqKCus4xYFslzqH6uvS3KR6NBwLIWS0lB\nSeMNEQVzN47pC/geS6TSIUCyZecWmoYBt4R50gp7+alA29ARzugoRmKrXyYO\nwB6O9CyKpCH/hRdeFaA6KFCq730fc7IwlxU0HjMNJRdeui8FWBGI9YLJNzdF\nH13UfPNuADggub5ROZbnrrw/CLkZmzJO1U/fWHs0S43xQddcKf+4Ym+O380Z\nuDMFTXo7duzne6VbyiNJbEG4lek3lb1LTTnlz0NmPGjIrwvngxFb3//b30xI\nv+QVtQlbkVYNuLIo4jvjFa2KsBP0InP+bMXpByovJyajUKeW8LikyOoG2YX4\nkJqvhEOB0943tkdyqUinhKHBzkPX3P9Xytj9+YpSHBhU+9JpDvcJqGH480yb\nlRFVjF94fzZG1nu3Pd9VpHTjwG5afkr0k1Vv3aH+mR7bTETjo23Saq2CrHdg\ndSqPXHAy9lpu5aU/1gFcvxWue5t504X8GAfyWoG+ee2b3mBYWjsp3FtslIZq\nztxk\r\n=x5NY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.7e4b04b25.0","@material/base":"5.0.0-canary.7e4b04b25.0","@material/list":"5.0.0-canary.7e4b04b25.0","@material/shape":"5.0.0-canary.7e4b04b25.0","@material/theme":"5.0.0-canary.7e4b04b25.0","@material/ripple":"5.0.0-canary.7e4b04b25.0","@material/animation":"5.0.0-canary.7e4b04b25.0","@material/elevation":"5.0.0-canary.7e4b04b25.0","@material/typography":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.7e4b04b25.0_1579646829764_0.01165796200833169","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/drawer","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.ebc296937.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7880052b735739c9b2820d1631f7e2da270b7a3e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.ebc296937.0.tgz","fileCount":45,"integrity":"sha512-8DkuPIeR3p7JWiaOg9xfvsVuxPom6YU0RU4hYa69VWHSjqA9qY4icIR7ruz0QvmQCMvQhLxLGumyKSjsO7kZ8w==","signatures":[{"sig":"MEQCIFo9Ra3B4m+xZPV/2PIiecIeKy57smdO4QLhh73DEtDYAiBW5wcA8gWFV983KxoMU5DBXZ3E/WQX9wom6auCSPxK8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ40rCRA9TVsSAnZWagAAJAQP/jM8et6xbfcbiqeeVqc9\nMQaOL1QqwhJVanKrfF/K10AQ5t6W3S9MZSJuG2ntvJIrfWazKCtCrSIWfLkP\ne9nf3neMKvdadOgeUGucZErxwlEOZ04rOUufLRiSPdrg+6xizRcsypQSFzPB\nezsLuiQGFVwl6mcMDpYEzIGWky9Euaswlrb0RQI2A7ObslocoMB4ZsJl07WF\nfYiP8QiFSZuIRWFLlhuXI345+0RDChcNDcUIFCDyoYJ3bJzD74kMbw/CFO/M\nENk7iDElxSUrBYYLYhy5wd+kJwREeLb5RI2Xl/zJGdaXmvS2d2Hzuuli0svs\nAbgh4xJdOPxzR+oSIkzz4eXs5w8tcw1diNRlJAsWbwmGeUtwmPZQ9GpZ+qNR\nn63JnOgXI7YlNpXO5YVoo6WRuGWk4KdU0NwlCQ9YCDi2m3k27JiCGh5mmCXN\nuSOHHWMPKy6jEvo70oHtnSCOD//r1IHlgzKnBvqilHRPA2bwVMCO5ruSgVM/\nCxDTF9C7S878PLE3si6/iUWfn5dK58h8J99Ip6t/gMtBKLcjP7sYiZsN6x1c\nR/u3sQBVSplaN7Hcf4xdlpCOzHI8EhMmunA0r04EIrxDosvm2cEt8t2gl5b6\n8v2etW13We5/89sX30rX8dcLJZoibCrDQnzJsipfVfNNk7PKZCm1QJsnqRzO\nfHji\r\n=bn9v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.ebc296937.0","@material/base":"5.0.0-canary.ebc296937.0","@material/list":"5.0.0-canary.ebc296937.0","@material/shape":"5.0.0-canary.ebc296937.0","@material/theme":"5.0.0-canary.ebc296937.0","@material/ripple":"5.0.0-canary.ebc296937.0","@material/animation":"5.0.0-canary.ebc296937.0","@material/elevation":"5.0.0-canary.ebc296937.0","@material/typography":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.ebc296937.0_1579650347236_0.08706626465615197","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/drawer","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.cf33f113d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c86e5b48fce5c3965bc7e1079e6a1575a40147e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.cf33f113d.0.tgz","fileCount":45,"integrity":"sha512-fZXL8YG2ORf4UG7fIJrubX9Q5R3ozm7V+7wrRky5cqGUuJnbY+Yrr0+kMsnIJIpB7ah8UMN8WNaXIgdn0ZTDWg==","signatures":[{"sig":"MEUCIAsiE1lHoqgJ6E5R+F/M3+fAD8UwwYi6TEkZPPwF2JKyAiEA8G3yv3GxXEUKNQwMXjEFiTc0jY/5NIOuc/Vwe602g64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6QRCRA9TVsSAnZWagAAjXcP/2JHz1lBZnaoosGItJ37\ny2gNLgQ3MmQi9ddeIExL2gYCTlROytnCLsF1k0edBuPNs91sE/afMZRVGmb2\n3lCV1Y91nUqbRada752h6I4asYQw25qKXsyMmAH9D71958C9F/ESFFruIkCd\nIAWI50AH9gS5j0+NjTULrLj/d0M26jho5kvZt5e+Q+txjP7iS6L2G8TGeS7z\naJjkqf/CHltEDs1c5E/DwUCLKx5rW5r4rxh02aPBntBHoH9CUCDNw3FlmIMP\nVlDzughb8Y2vmvPvMmkI+OQ3b1MLoKwxJrMMYwme/nVuETmABAc53N0ZCER7\nDgLy9L6FUCnTSEkwVtSe8yeZMWGieXfabMS5lPFyufb2eeGzgvOSqABzY74i\nS1xErR2enpueb8mZS7ec6sd3ZcChm7LB+BjdQsfZ0iN1TwPdz6UYUdCH+OFZ\nMHApc1AB+1obUcPLTworbcGq0Q/avN387yCQz4Se9p+Ieckm6MItmwjpJD78\nmi2SNgpKDGqWecgwIGHWitvoq/3mStwvOffdqL8MFhDm3YZY7h8WUHt1fQ//\nViQ7JTf2HJoGiDJSCQ8M4ot++6w2zfD9AU6vmNKpiDYOb+bqbaQycSGQKa46\nTSTJopfxNU4MBim6lLyBo6JQ/REGAg/u2sy6jQpK25tx05wCMALO5xXhmA5e\nNArC\r\n=ZoEn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.cf33f113d.0","@material/base":"5.0.0-canary.cf33f113d.0","@material/list":"5.0.0-canary.cf33f113d.0","@material/shape":"5.0.0-canary.cf33f113d.0","@material/theme":"5.0.0-canary.cf33f113d.0","@material/ripple":"5.0.0-canary.cf33f113d.0","@material/animation":"5.0.0-canary.cf33f113d.0","@material/elevation":"5.0.0-canary.cf33f113d.0","@material/typography":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.cf33f113d.0_1579656208697_0.4289157320975232","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/drawer","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.e1d5f1be5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96188a890e58c30118b3ad2c5728cac6c3310372","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":47,"integrity":"sha512-ZG0IRSv6jrMeA2iaDLd6j/DU8Uy+8ZfOt5+Y9L3wZHZfF2+avAN6z4PQIrpCHDC7mIA4CosYZs/rXuktuAYvTw==","signatures":[{"sig":"MEUCIQC2J7gMAPGB2OuD7gwwhNxdkCgT6PsYA+41a24e6qO5fAIgVhN7JEIUyVf/bLAUrIuF/Wi4aOqkTMGhSN1GqkVcK+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH6/CRA9TVsSAnZWagAAxkIQAKBTo/5zj9s3H6VnBwm9\nBvJ1BltdGdjDjkuJhJSQ+sl+Jb4c9O/3qtkXhO3k3LCb4peoRBqqwSl+O0/l\nxCRP1mj5IufAEmzxuZo7OFgNKT0DR1paGFa1E3I2S3sJl+DmYWHaPpyhy6Pn\n/GFMX26DrXVr2CSibxjmgU/0tsrobcdOg2NkHzIpCVnztxzW+Kxkf5uP2H//\na6ZUIJgepQoESZVSUQ1Y+TmRMy/zGSUfxLAnv7Xp8HRDdjDihZxCofx3E6f2\n0UmsYFx8STCprVKJdxff7zoY2FnFTXiz7MZcQ9OXRIotLC6n3WVbw/B5bCTy\niNkvCr209SWtjM9G2rgcLblkY6BthEs47GoGTVjmtNJLiae0C0npoD9ZiibO\nVKNouF5kMKn718V76aPD4uplwWA+OkMSlXA9ZQ6H4O6G4voo6v4UzLOMMnkW\njsRpsPEuYDo8/ELRTp37VYC2FLZB+LH/WAe0m75X9AIR2uN1EXVca4oftPY7\nloWILHikFSHN9VMRxL9nsgCPzO9Wm1lawYsfxQl/Iz+KNenNDsSiOmE9z++9\nnNTIjwFvU75i1MaO+6StD2FyYMKrH1+nRDnIO8z5M/Sk5vUH1+nbf8d27XqR\nGPaC3MgO7RjXM5VkKSrNYW6YpLhAFhV8POSf4NbvQJE2rCKZKinGoZtJQE6N\nWVY0\r\n=d90p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.e1d5f1be5.0","@material/base":"5.0.0-canary.e1d5f1be5.0","@material/list":"5.0.0-canary.e1d5f1be5.0","@material/shape":"5.0.0-canary.e1d5f1be5.0","@material/theme":"5.0.0-canary.e1d5f1be5.0","@material/ripple":"5.0.0-canary.e1d5f1be5.0","@material/animation":"5.0.0-canary.e1d5f1be5.0","@material/elevation":"5.0.0-canary.e1d5f1be5.0","@material/typography":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.e1d5f1be5.0_1579712191331_0.6910715484642767","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/drawer","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.6b6a4ff92.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db87c425c765cb5abceab08a30b269a81631248b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":47,"integrity":"sha512-k9LLJTmrOecEeA/wpFdbPVMCfKtFqfY7e83Prji9IhTV3TA9KhvDcOk5AVsEUY4LF5koRQaR1pymRn3O5+jlcw==","signatures":[{"sig":"MEUCIQCgVGSptRf6PnO7hbO0/HR34tn5EiEELwUzbDhW71EfEAIgZRKaXQQsLxoLwhkdKGf9XSSEMP+RZyUZTFcWb6aYGYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI1RCRA9TVsSAnZWagAA5t0P/Rp/aY1SMMGjdUfMyftQ\nm9icllrvzRqYesLUyYQ7rZXWpMB6JTguQ2fC/lvZm2lDa9yjcOipWviWbzV+\nGVq6EoeK1CdWFTZsfMwYY84oEiABBQGUrEbJR2VO/B+s2LJuWq2IQ//zQxEM\njD7K1VdIbQlVy7j9KRK+/6eEvTRUqu320ORFw1pPEGO4DpP+p1fuktXbP0zG\nNqGtS086heLfVPGJE+Q9ZwSOt3nXZhMjYUG2QAlR38mTzwhjP9+UbTFIQ1Ot\nilP9lEMfpM0U/FVRebwWJs1CtG48K6X29VG+mGfMTwoo1yXt3I9O2MB5CZPY\nj7NpDpZLb9K/N/Nz9kjxlC5dPsSX5oPXlu8ESYg/lbH1StG5DRcCT3u1Tlw8\nrG+1Xb+82KCRXCwa1knUzjjC90LMYfC4oA+klb1KnIHKchsLmsgdNlgEt7uU\nBuBTvEDQdq7XEKlLebKSIYU/nAcW98E3k93k7npGGZMVaql8pDazEuXD+fqR\nIfD/oatiUriGwmcrkC5TDnOTwwz3ZIbdfnx5Fzk3JsI22AQLki2vu/P0Poka\ncdyG9Ir+8qAxbgKyVbgRahGgU/+89+N7LlMx0w2xVSoaPDR/Hgd1zOUJpIHc\nv0ZZErtwoaEL593sf3LYOZbcn4B74JbbLdcMv+PL0Cb3aGKAA3eJ6cCWrydZ\nK74y\r\n=0nen\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.6b6a4ff92.0","@material/base":"5.0.0-canary.6b6a4ff92.0","@material/list":"5.0.0-canary.6b6a4ff92.0","@material/shape":"5.0.0-canary.6b6a4ff92.0","@material/theme":"5.0.0-canary.6b6a4ff92.0","@material/ripple":"5.0.0-canary.6b6a4ff92.0","@material/animation":"5.0.0-canary.6b6a4ff92.0","@material/elevation":"5.0.0-canary.6b6a4ff92.0","@material/typography":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.6b6a4ff92.0_1579715921249_0.36695697392050586","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/drawer","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.6092f71ee.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a910050bef9d2c1b349d600ce8046c812b3a07ac","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.6092f71ee.0.tgz","fileCount":46,"integrity":"sha512-XP+F3b0IJqtzbYwysSLmUm4moIaQUbYz3s8xCtvy8zmORzKh888UKFrDz9wdhWpl8ejdwm8q53+w+rZKvV9NOg==","signatures":[{"sig":"MEYCIQCTrab/URToCfWldezV9xuobaHx16JfE7+j/8xettr8rgIhAJuXvoRnCHsgAqwerxwavaOiDy5UB7laWIqgHbKxM+po","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLwECRA9TVsSAnZWagAALz8P/jsKKpQPiW+a4TyI/fGt\nOnMw/zy28gwG6cQqNPB8HVS88dnSPZYvh1rWttrvCORERxEKmO9W/crvUqo3\npZvrhw2vaVM8qchJ19v+55cyN+DsLerTBtR3QWdczfChW8cEwhQ9L1HY0tmH\nvGs4g/sNMGy3gCZuo+Ohfj3+zDEEtxVfPqNfIn5z9cD04qAcRyymsNGELDXZ\n9+kHSk4X4G4vGFAJ5WwOJi7sGdai5Sv7ahlX/zFVYB9QfTmhxFNILMvLcU8s\nM0+QN18mLWeKWl37BSy4Q1ToY9YIwkI7Z7D1Gvhz1Bz0szLbgN2T/HipG961\nAToghCb2mOsj3lokzeTY0SMjRhV9gVe9Q9xtVsHzJMI5UdFTbsfs9CarNMl4\n7ax2IdLlTkGz24xZCim+ttwp7ROJlUSC7bmSmeA+eexM4mzYQW9ZCRKc4vL4\nUnKlLiQch4gWoBQZGRyY/PI/yf+82YWqrPXhFB9aD6M4V56sfmn0ar90vItY\nP855QCuS3a6fMeiDDr5j5sF5G0OvHbHBIiSw2EUt0Il2z79w0ukz4d6xERi2\n2QQuaX6o9LEIMW/JrPy9a0bepQHrd5O75SOWa8tgwd3LfRU7CgZAtmeJTUZl\ntBlIzV4dLUAVe+NZpnsQ30hKMVHk+gFfK5av9eVy6BoIOPSdjD+oAIfJMMjE\nCtuO\r\n=J7jf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.6092f71ee.0","@material/base":"5.0.0-canary.6092f71ee.0","@material/list":"5.0.0-canary.6092f71ee.0","@material/shape":"5.0.0-canary.6092f71ee.0","@material/theme":"5.0.0-canary.6092f71ee.0","@material/ripple":"5.0.0-canary.6092f71ee.0","@material/animation":"5.0.0-canary.6092f71ee.0","@material/elevation":"5.0.0-canary.6092f71ee.0","@material/typography":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.6092f71ee.0_1579727876262_0.32600133324248537","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/drawer","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.d8d95020f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"affd2d5a12928bab0db505e934b19c8de1c7098d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.d8d95020f.0.tgz","fileCount":46,"integrity":"sha512-qXnCGBhrII9pN78JVzI/Oq3O65lmgb0YGJDOajG0pfD7KuDIox7yVOWp2F1OtuALslW4wLUt8a/WO8uWGkwvOA==","signatures":[{"sig":"MEUCIQCL/PpirLQB6UT4HyvIGMdueZke4OUdJs8qO7Tw201w8AIgLD4AqCcptiPxIE8Ba0c66SExck0XlE3v8eq2Ccp9OCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNZYCRA9TVsSAnZWagAAfP4P/2gxYpE6g5rsFWuHuXjP\nE5/8EfPzn1UwsUA+3ekzlbnjvxkjyfVY9I6huIOR06nyDjnV0s4uxozO3kSF\nKEI6UnPvlZKnw5uywXVn3mlMH+xTWPf32SQViAO7ztwoCPqzVfc6E/yWbKUF\nJQ3pTtwMWYYvsXh+PqLB4HnlRVbMwlDtVZfpfibf4L2wOfl1tjuDsLPaXlqT\nFyr5IgS4YxbOXd3E0U70VahJzcWJjwPRZzRaGnEhleHtb1LUguXj9QpMn2ik\nSoYSUPSEAhqP3BRISOWSlE6EpGTVfXTvMm7ESrLs1VwEoGjYs4uN+Kubq8OG\np63hKUhASXS4A+WDucwlZRX6ZBqZMTMxH3cHb4wINMFxB5TuXVLj+uV8Yu0T\nZXHnYyZPP32EvJGZKi26UmrdzXWO4Jr0ydC7oi7NDa1PIEhjAXRmTpQ8039e\nOEEc0U1lH6SHNsOtDyZnAck5m+YsMuowngaKtLNB0qC00sAGtGYevo8UYanA\nxMPoQ1VDbRUD4bKgQHSTNDdsFINH+cawsEoz1nssjUNdryIn8G1FOaweFMKM\nuACOydY/njjBuA00BCBH7bXnKx81P8wkeYC8Mt0FgQ3rkNCUB6mbSMxd+cH7\n6MB/+GeBPtjjpTnGw9gYu1qxH8/gX55Mv357hDID0t7w7DvKcYAatJS6Vzr4\nOpWT\r\n=HQAK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.d8d95020f.0","@material/base":"5.0.0-canary.d8d95020f.0","@material/list":"5.0.0-canary.d8d95020f.0","@material/shape":"5.0.0-canary.d8d95020f.0","@material/theme":"5.0.0-canary.d8d95020f.0","@material/ripple":"5.0.0-canary.d8d95020f.0","@material/animation":"5.0.0-canary.d8d95020f.0","@material/elevation":"5.0.0-canary.d8d95020f.0","@material/typography":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.d8d95020f.0_1579734616285_0.1857113234479142","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/drawer","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.b7facc628.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ce6b9c784080bff3340c53a0dd012bc23bcf7ed","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.b7facc628.0.tgz","fileCount":46,"integrity":"sha512-hdNewqCliaXiVZHkYybvrc+5Si9QkkCyuqGAsRmRgxyfEBdhQkxCE1TWyC95SfTiLP4QmYIcUGLkcSQzhputOA==","signatures":[{"sig":"MEQCICrmr1YYETCTxmhGxLVmMU/BjBkG/TIMoMrtRV6qCIp0AiAC0YdsRqAUkWuMOEEqRvQJZRYc8/1eTmp+Ncw9oNovfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeJJCRA9TVsSAnZWagAAjhgP/2G78v3yHmtcnQ3mZ2Be\nb9drjSc85Sf5YuxenoyZzGeLij1AUHE1L46fjMSk2Vspj5RA+vErR/kgIzaj\nTTTag2zYaRnbvZJ6MN3B4eWcP3FUXEkMOT/q7S4uCDc3jT4bZOi5LUzzieeI\nGixIUS02OPesql/hyzuKJoYia4M0eTVZiLlxX0l+LXKTrjRsBvyfWJzE6kFj\n0fS54RQvOJ32Q3wUxVaaqE6pLcYhCdEih35eds7yyItKSilnIA4qMBeFRTgH\nPUag6bTizPvsdf38NwdeKoez/CqfHo5N1LLly6ySg9v/ZkvnynC1JX2Hm1Nj\npsJChRI/1SonuTkXre85cN5JJKYGSknMC1+qsiGKglZN7w/cYhOuBTv9ibu9\nqNeUecfX8yVMmTsEg5nBYQFChC7iBPprvk3/NPSW/osnvdnIEPVNQngd/Q2f\nlIhA4k2Us+fDGB5D8p69G5GWrqt1+MKDDqXlmr/vIq8a1oDkDyfxLS8orU/g\nugUy2xnDWZeEkFdtFWOm29F8CU/TCbca1SccnVFk4BP7AVE9vbfpIV/Izy1I\n2r0JGP6eSJ+hWx7z2t7rKFpr1F83uX4b3Z02IA/K2Y6g1PltmejKFpac8ul8\npS91DscDyqKp0fDRliJuErXKwzoXZm8bLSfm3DVpGhOHR7Er620Yyftb6QoE\nglz7\r\n=dj7i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","focus-trap":"^5.0.0","@material/rtl":"5.0.0-canary.b7facc628.0","@material/base":"5.0.0-canary.b7facc628.0","@material/list":"5.0.0-canary.b7facc628.0","@material/shape":"5.0.0-canary.b7facc628.0","@material/theme":"5.0.0-canary.b7facc628.0","@material/ripple":"5.0.0-canary.b7facc628.0","@material/animation":"5.0.0-canary.b7facc628.0","@material/elevation":"5.0.0-canary.b7facc628.0","@material/typography":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.b7facc628.0_1579803209002_0.641379949769594","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/drawer","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.63f357dbf.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbcd12409741b6e38d6dfc7be699e25ff34107a7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.63f357dbf.0.tgz","fileCount":46,"integrity":"sha512-Vb8Y1aPutagf5qAbSY77ZSgmwIEBmf8lvROlfv+pSxOo1qhSoQS5qm07x4rZUgZdAhPv6giajni1602k8oH5pw==","signatures":[{"sig":"MEUCIQD5P5j3dzRMNU3WkOKQD7g6RmUSHx1bppFtdF9GYQU53AIgHpC528N+yvh2JOLwjpNsYIbrLlXn/5v+YcuGJNhcWFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhZ3CRA9TVsSAnZWagAAbCUQAKGm3lrrOC6nq4T251ea\nWJvRKs9cZY4FkkASqRaWjc+5psEVY5C47THR0UCHImhOvexnPXJiGr1BCL/p\nlGpre5jMuXr3VTSFKdR1znYlqgNofmzr2C4xsGCe2W00rPuVtoUVyBIlRg28\nOja5UeK13PHuF14PHWHy9IUA1UbP0WGq8ypQ0SrWRbrCJA8w6LB4UPpVMvMF\nSmJJZkYcOIkTe4KYTHHPbZj5eiKqr/bVN05A68f5OSJ39NOQh239SaVye9/J\nsRWX40Pg6VKHZGkQ7GMgMfcCDrk5DBVFIK+8DBCwMm4UUefXIBX/kgufDWAK\ngx1Y9WmQ1qTAEPH/Z2bJK8+Lb9mUGOVeTvA0L8wEveI0vnqS/H9zyw5RXkpu\nuGAR47QAaIm/gnaXTLuG7Hl5lQzur1MDZVVdKdEMMVFgPK8L9ScoMRMVkv+N\nAtvoXZlsBbr+VSrvLOzNMfLp8Kkh1drRmfQKP4AAA0MkcB+eteTp0JWDEYt0\nrMAtS0uNfQWMLfPFvDrLs9VCDubIkPCX/jIhiR98eZfB989nVCELOwc01Okr\nU2GPiR2N5E3qQ/s5kKfQIW6nNzqp1lSBt5xCDxCQseBxqCChxNszTAce/bfD\nq0t7xA1wQz5UAsbjPhxTEDPd1SzbKTDgiiR9AsqaNH588OPpVXEUN9de9ORK\nzrN7\r\n=3A8m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.63f357dbf.0","@material/rtl":"5.0.0-canary.63f357dbf.0","@material/base":"5.0.0-canary.63f357dbf.0","@material/list":"5.0.0-canary.63f357dbf.0","@material/shape":"5.0.0-canary.63f357dbf.0","@material/theme":"5.0.0-canary.63f357dbf.0","@material/ripple":"5.0.0-canary.63f357dbf.0","@material/animation":"5.0.0-canary.63f357dbf.0","@material/elevation":"5.0.0-canary.63f357dbf.0","@material/typography":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.63f357dbf.0_1579816567049_0.5388546053019798","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/drawer","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.f2426d26e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"648f2d3a3dcecfd672d63793f0a6b095113b3817","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.f2426d26e.0.tgz","fileCount":46,"integrity":"sha512-kLr1IMfMiSKI5jm+Ge/HBw223z9YaiJxU4O0+sy27spYFECRBBrl9AzqD4Y5at6qKbs7kpXuNZwtP+fxDRNZUw==","signatures":[{"sig":"MEYCIQC7xHPh2goiZO7flkURDmyMQbOu2VXWFdfT/ZidgCdG1AIhAM2s8JUagfFaSwUPurJkr5zLYMmzBwiIaLyboqYDSIxy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjKLCRA9TVsSAnZWagAAn90P/iPpPYiBdGg4uGE+ZVdI\nRmsx7c+7S8Qb8ijuynuz9f+dTJX2zCq+g/tyQUFcHAFL7i5IcLwj7+LPYYMf\nNFRZOySaBaUkTmrOKqGJJ32S07WwnLeRfbxVGxftyWAI6z06Whnmofvs98ZG\nu1HoPvtAgXcyMaNWj5lDSztoBGlz91I6SpdQnOoZNq50MCoL6G25MPpcrT8f\ny0dy6M0tLQV61hZylBzEGDoyw9ZQeR+h2tKeV8XOIQwAhisLNFHswdyAV/Nl\nYVYEc5JE7OSgs9pCV1c0wVcsEwn33RwUv1P3vqEk4pV/dgyDDNZG38xuQlXs\nahnjHC9+bNv3eIYjNXakQ8M2L6XAvsgycQ9G1UW96eXL3EhmBLKpT8WIVuUu\nmnKkjuhK+dJR+6zWbrkQvowWmVLKZgxE+oPfOaZaLmqCSo9G/vaK7j88HtcJ\nCsJyZ/AabFy07k7Pu3qSAbjNUyYOCmHdswSFL6TB/weU2ojvjl099numqWrH\nRmAl1AfNxLqeaWzEi9HjN80AU62LG8+ePAJluymR6FdZgdnPz2jQSaiAYi9k\n1WJ3s18QqNdNszpsS+unEY4tUUkQKY+3qwdpjzhlzkAyFTHpOLcWXacBqRoZ\n1FVu9UKnao1wTjr7wP9FNB1cLVdqXHDZvk8wM0VwBRKVenZEqL4Dc+bP6dnx\nwfaJ\r\n=Hzb0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f2426d26e.0","@material/rtl":"5.0.0-canary.f2426d26e.0","@material/base":"5.0.0-canary.f2426d26e.0","@material/list":"5.0.0-canary.f2426d26e.0","@material/shape":"5.0.0-canary.f2426d26e.0","@material/theme":"5.0.0-canary.f2426d26e.0","@material/ripple":"5.0.0-canary.f2426d26e.0","@material/animation":"5.0.0-canary.f2426d26e.0","@material/elevation":"5.0.0-canary.f2426d26e.0","@material/typography":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.f2426d26e.0_1579823755037_0.3445702521014107","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/drawer","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.7f5e0c23f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e00298dbdd77975644f6088ce93550c484d5510","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":46,"integrity":"sha512-UQUILw9VX6jmWlaXwmbdWnINaDRc4KYa0Icq79jVqVuEMYvqzuNzYKIkLwXjr35TvPDurZG5j8Bt10PGMOphiA==","signatures":[{"sig":"MEUCIQCy471Ppcc0bRi50zzzbeevuNEjhWGsWq29QkToS5VqkQIgbBmz3TMOMOnN21++LOVEmcc300VGoIZNpSKGugtgjGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx/YCRA9TVsSAnZWagAACxoP/RhZ6dg0giizfGfmZI8T\nTiV2IeEMeXnzFrgEpMnGggwv80j6bMzNv0cqcW68rBRpVCnzwC4R7k/OhQMC\nZrDw1B08x4X1pUvVbRgV7yw6VW2yOI8dTVT13601VXurCNRzWP9z2pDsvWUO\n7hq4srXLHRkha3GsL/Ei26zWzPdneJziaj2Eyh2+2c28EkGbs9Fmd9NIjeaJ\n8RkuzchP+gE1xy2iacH0dfG5uJa3YjOu1HXRD/G4vb+2yRXEn65EAbT+gdLk\nGkHTDkfP9cWrWkP0aaVB4UTt3HJ7BDYXfJfurdp4ZHOCiNCloxGvcgTY+q4I\nCoAzrMvFtVDGZzMi6GV3CpQhtb5nipK++qGDJ1HNZ17ixFiNej+C3rTaScNN\n8UuZo6TZzwhBDZmCgEcwG8vykpVx0PBqNEqMOeFkJTXCx4KtBAGz2seTMD7p\nRdGnF61xkmJiN2hofH46H+BykMtefQiR8+R/aCJOYKpY+wn16fHVEgoPRtdg\ngFlW6dpQ5veWwKiqYfzL2Abc4clhmoDi8oj8LpNyWBQM8I/M53Fb27VT/THV\nbDDIpYPvoKUHWMA2m1iesYBAT7GsOllQcDph2e4Fn7cGVe7eT5BD25IKh60Z\nGliPnCuK1XXh5kwf+4ziqegRZvRHNiuuLKyY/1TJwRn847+LNk2ZnHA8YXjE\nloom\r\n=2f25\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7f5e0c23f.0","@material/rtl":"5.0.0-canary.7f5e0c23f.0","@material/base":"5.0.0-canary.7f5e0c23f.0","@material/list":"5.0.0-canary.7f5e0c23f.0","@material/shape":"5.0.0-canary.7f5e0c23f.0","@material/theme":"5.0.0-canary.7f5e0c23f.0","@material/ripple":"5.0.0-canary.7f5e0c23f.0","@material/animation":"5.0.0-canary.7f5e0c23f.0","@material/elevation":"5.0.0-canary.7f5e0c23f.0","@material/typography":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.7f5e0c23f.0_1579884503894_0.37778274857695027","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/drawer","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.3fc3ab520.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dde43067f5778a977df822730108e98a1e97d5d1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.3fc3ab520.0.tgz","fileCount":46,"integrity":"sha512-jddDsV6rvwPSU70ZP9xQhil10m9DdyTU8lMwc0K+MYuorN1ih8PsLjANIu1Nnq1EwfNRwqYUW1Teq+BrfJKzkg==","signatures":[{"sig":"MEUCIQDKdTtkGpF1SqVKOVK4WZdVUezCPZ+ShSysLjVl5SUOoAIgOzWc5RfDJ99nBbs4pwg2dNV2ey9uFoG33npW6TvY+oE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKye6CRA9TVsSAnZWagAA9MkP/i/dS9iZfsL/k7C2v/GD\nzYJeOVaBCEQtNwdPSpqRhzLlMbB17hWeQ15vLRK6wJF0SZC705Ytrvf7Uruv\nCL2Zc56csr5c2aOHsyf/dTO2Vx267qRNPPvOx7QaIZAu0UIokV3fPoG1fHlG\nEzriNzTxd55LQNRrNfBNxMULLtK8P+ZYH7vm/6wAEVnU32l7674el/No3DIc\nOt4jd/B8M7hBwdbTTgLJWabyQSh/WTTwXgoXTwxA3wnz9qOLR7XmmUhzrzeA\nemvxnpESW0HgSp2P2rW43QpmRkejNCXvAND2PhGRcmUY/a4Af0uMl73KdKge\nqNqsMHDGHmyTquJ9sOcJRd8678P9M0N5rBNRYzoMvo0vDNpgGck7ye9gX/I7\nIk9y/YSzNek7pR+ZO/GzvlrQLHngrvBL8tkj752MCa/WPcxeU42vEPU6DKBs\npxJAkWDLHvuvM/rNU0TGneLalBq730dncUzTkiSu8YF9k0qb9KJ0HwTe+Q7J\nRjPueKolJZdG8I9dylfABDQNpStgqNInr+vKOribkQ3oBAi5J4K5RFKLdB3Y\n9Dg6iRwg9t7eyMiGy7kjOF3pdhM+5ogJFPQSJ+ejGR8V2pa2PUJqqJkLUmLr\nsxcs5shEx67rTKu72P6gXFoQk5AhD/JeEuJ6+e8ruZFYk4oLyMNpvRTR+hGV\nIe91\r\n=3slV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3fc3ab520.0","@material/rtl":"5.0.0-canary.3fc3ab520.0","@material/base":"5.0.0-canary.3fc3ab520.0","@material/list":"5.0.0-canary.3fc3ab520.0","@material/shape":"5.0.0-canary.3fc3ab520.0","@material/theme":"5.0.0-canary.3fc3ab520.0","@material/ripple":"5.0.0-canary.3fc3ab520.0","@material/animation":"5.0.0-canary.3fc3ab520.0","@material/elevation":"5.0.0-canary.3fc3ab520.0","@material/typography":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.3fc3ab520.0_1579886522091_0.5295554772041613","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/drawer","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.80a4d326f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"044a85850098fe5d46adc0e9e88709a7def7c94f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.80a4d326f.0.tgz","fileCount":46,"integrity":"sha512-Me7Rg0HERGsTMQI6eH7QjvybaRjgwYC93oVmaCGHDLXdBXF76p/OvAt0BrDCJtZgCrPStouWTsG4gH8+zbgKuA==","signatures":[{"sig":"MEUCIFwpVY3UPNnBCbENzdkIVGTBpzCG9oi8ZEAZ9ZLgNAnyAiEA+HR0Doo47/5gJzIdNOLQdPTWbtBK185SnkRuLL7pvfA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1e2CRA9TVsSAnZWagAA6tIP/jMf++4jlU2XDjHPTZ6g\nNy6mTC3pWYQ8GFyYZGFEzEJfQF+EI/7cPqx5edIzrEwsbShuz/tu1+D4NMuX\nXR92BnAY6jPNeL3DSf3bCjWw/07VWi4me3v63CGhNzmD+B1rsTnILxCvafpx\nz8ijaX0LRcgIgZVK5tJu3S/5+iBvBBYdiDpdvthClYfBBtpg4TORhZl3sbKH\npI5lkCAjBoTNFW4xtdU9pC9KqnCOGeBkLtBB92WVSeOlQ3ARAmlLUCJrbE+8\ncqEIhQTIkcwP0ac+5pWigym8mFwRpWbCaAhkM666UE2p8jGiX6eRyxfqpDtN\nE+UhpQ54B2z/KbLZiRmJWVIHT0aOB/7es1lkyT0YjrtBAg03qQtoIV5rS0q4\nm367LJLXqHWjg1tmETmVFojJrJj5RRXfigFsS7aoHkspTgvHaxFRnKsCvK6V\naaP2NGA766dd3wHuep4ZoAEf8G2WYV0WF79GyB3i1CSuaQTjQ4lsBn6aTmck\nCcD5oli5tFH+3Nw67BAVLX7FcCnGbYCTh8boMqVbhwxW4UdG1VH10a/uvtTg\nREyQ91tHKjIdhS+7IY76LUSlc7Xz3jwpKstI3uxDZ4it/gkqyFF6Ch0YtT2W\n/1f3zmeSZPyPpOkSNq+g+siDKaq8NPLMmhzDIv8Z/RBcm9N1UBsrHSlrHj9R\nEXsO\r\n=wqGQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.80a4d326f.0","@material/rtl":"5.0.0-canary.80a4d326f.0","@material/base":"5.0.0-canary.80a4d326f.0","@material/list":"5.0.0-canary.80a4d326f.0","@material/shape":"5.0.0-canary.80a4d326f.0","@material/theme":"5.0.0-canary.80a4d326f.0","@material/ripple":"5.0.0-canary.80a4d326f.0","@material/animation":"5.0.0-canary.80a4d326f.0","@material/elevation":"5.0.0-canary.80a4d326f.0","@material/typography":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.80a4d326f.0_1579898805847_0.8997914745429756","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/drawer","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.ef7de4def.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"146d93035a4234e650a4b51d4405524067a84ba2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.ef7de4def.0.tgz","fileCount":46,"integrity":"sha512-wzDI7qmZKBIxbk1NAgYpPOb9Rvl1YMgCEnisgDTp9wKyPxKJ6xzne2vwxgm1YD0hhfxuod38FVrHz7cNGC3TgQ==","signatures":[{"sig":"MEYCIQDaYMaLzL+uA3gL0NeGbzAuXGNgpjeotVybdXR4/L+Z6wIhAIOK/biU0kql8Wjg9+rbIJH4nMeV6Iwl9pp9qq9DGuYg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2KeCRA9TVsSAnZWagAAr8MP/ibmYPcu1VLn1ohRZlXv\nq9IeMb0LIZfQBCM6W4Fp85evf4mQKyi2hgkI/KNVdz7qQ3QOSljATQ5VnHmn\nReBXqsnKbmpbP3JuwzndMkCg/TdWgvA4xPuv9qyylBsx0PB6uSEOi9W0zIt7\nKlATpiGxpNm0NFMJudJ0MvpHDAxdGzCZ69i1t24V4+CxVpeclg4H/H/r9rNQ\ngGT1VKfK5sGbeuS4GcHL1fC2uMzjrOvThawOpps5wDxDhDSFw8xaEVN/9mYK\nzyTaK7lkSm9UvD6v92Cf03uBcaZBVzESeBGdWCeWmM49DvqfbWYaObTl/u7Z\noSL8+/XEBVuT2SMoYMMVcbZUwBFsxxxN5hY8euBAs/X8ifly+PD+0m4V2P7q\nValvXk6JB7DII7/LUtpvKwKxpMGyEopJHzNp1133gXWXeOGDIMq6gBmrfxwt\n3Mm3TgH0hPtyPy5tYl8bFBkiNLk5EnMgK25QP9nm9PVoq4PiC2TrsyhGmAwd\nNA+Cv4ekejgHZbKWnIaXE/exwpgpMeKuWOXj2tuRMihE2b+LFwYwzKDU/d+7\nJXooO80MyrveHvyTchvRTogqQLm/VNHcVCJjhQPHjfTQOCpgOTidPxXcACs1\n0Jod7gzQ5NiIYJ4o1UjZKv4ywoY2vZHWtXPgUkIhOrYtU5rGlTzwTvLzum2+\noCRk\r\n=A1Si\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ef7de4def.0","@material/rtl":"5.0.0-canary.ef7de4def.0","@material/base":"5.0.0-canary.ef7de4def.0","@material/list":"5.0.0-canary.ef7de4def.0","@material/shape":"5.0.0-canary.ef7de4def.0","@material/theme":"5.0.0-canary.ef7de4def.0","@material/ripple":"5.0.0-canary.ef7de4def.0","@material/animation":"5.0.0-canary.ef7de4def.0","@material/elevation":"5.0.0-canary.ef7de4def.0","@material/typography":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.ef7de4def.0_1579901598421_0.6342374232906531","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/drawer","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.93e2288b6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17c42be49acab39020964a414929694a52252ec2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.93e2288b6.0.tgz","fileCount":46,"integrity":"sha512-knbnrYnyO8qFGA/8iu24Lj2og5DZ2EyceS1QYG7HKXdmPToG9zjuV9MeK7r4DVzY/44T4rd4qOBeU4nI1TFKFw==","signatures":[{"sig":"MEUCIHNbLG+AZljkrxqS+9SbxQg15ab/9y6itQke5QJ40V8pAiEAu3tdswXs8kYlfJWNZWBSXmBaSD2ZszkSQzHCs28NO9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGfWCRA9TVsSAnZWagAAfLoP/ic5K09AFguE8lzEqLK8\nBWaB9c60jS14IhCuXc4BcF1SiBA/2JRrBoLN2Pnz2vSGpvKGZhxhFYY7HJtW\nXvPyGBjfLOtDK0bBDqcg553vUrDo8uYS4ZbfpaoOnzhJSvmCXFUKdsD73nl/\nsXHRhTtH4xtVZSAnWm0IEmUihUoMr/u3oJadgu4LJRWRdGBYZDAph9TfUZJq\n6/4UDlrDn//D4FBQJmihLwCOGshLStA3bvKTXWsHwZ3Ry6p5U9Bz6zST8msU\nSP2WdWCEluDc3eZB/6UM50A2g0Wsq59/D1jG7h8jhndMqdYVP3LVWBjEwW98\nsK5ixnC5Mt/h7KFr8EeC/pPHaXCF/DIIcvX+CyOUSmfMY13AbICz3KecPUX2\nzq/DXTj8Xz3cBpYXObfRoHgIkYHJtEmLBdNojboGs0jN+WS7c3g7itKKZK1h\nG2Wz7zW62kJ2U75zH1ldIfuLFUqurLWXBgRitXOVgU5kQWUN2qNMvy1Preqm\nJTU1oK9GNqd3o64UxC4eTrrYIXjQ31ldyrGV5sEOHKpRRYTE3P0wweKN6hlT\nWq88SMaCY2ODlFjWVZV2hxCJ/+v9WAw0fb+3LqadH0imOMAWSX8ebnNbLS0D\neYusAHA4iCRdRD46HV1ZQKryMVRue4UYg1ZE+6hCNNdeWB0BgorvUlETfEqU\njXrS\r\n=CSPO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.93e2288b6.0","@material/rtl":"5.0.0-canary.93e2288b6.0","@material/base":"5.0.0-canary.93e2288b6.0","@material/list":"5.0.0-canary.93e2288b6.0","@material/shape":"5.0.0-canary.93e2288b6.0","@material/theme":"5.0.0-canary.93e2288b6.0","@material/ripple":"5.0.0-canary.93e2288b6.0","@material/animation":"5.0.0-canary.93e2288b6.0","@material/elevation":"5.0.0-canary.93e2288b6.0","@material/typography":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.93e2288b6.0_1580230614396_0.4516974463270176","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/drawer","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.34ef15f67.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e075c98e191d3324cd8bf9d65f50d857a792c81","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.34ef15f67.0.tgz","fileCount":46,"integrity":"sha512-0lAAz/tpfLw2kERj6H+0oiwdWikw96LZkdSHTOqyu/MRxlFdsgX/eDarzeJ4FOos43DXRg8hapUaiB5hKrX3EQ==","signatures":[{"sig":"MEUCIQD0/JmbmTjbEMzepSI5B2iNyGK/wRpwVQVHFU63/AOnbgIgGNYrWOzRKWALoeZozFKB5XFXUmnACFe4LPJKhcbw1H8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG5uCRA9TVsSAnZWagAAkwUP/j3YzBoQmQdpAvcR5/fZ\nif0DBb+p09+zyvsoUS4ODWS7oQ+XoQlCXWlDbfuP2TkWLHp2La87MOJja6EV\nOikHxNk6xWBd0hitoWXr8blpwDulgYzDhij1Ddd8ASf9eqcagYrHtxmOJcj8\ns2ZhM0K+1tdsZfFnQCSgtpwfNsaEVKfR/mmOYJeY8P4q+dElb+0RWPRCq3vZ\nevypCSme9m4/P80e8NO1VSYeNOuzOXdZRohgYsFprK7UEIB+5TFm6TFrYoON\nRJOt6yZQuNAvBXAWKMOdl0CuwzDXte1Qm1q9nXICnbyz8mVQENMm1iMI9gfZ\nZ+a/bE9X8PgsmgNhAxk3OyNBYg9UOXbspbSTvT7LorTLCyfTgLx1T2+Wa+OT\ngH1r7EjOJisuf8AaAA6/LteDVoAOPyfpM0FO8qU6CXyb1u7j2HiuVaa6I/bB\n4nHjtAZ7VeV7zS3h1EzGytE1LO18PdztpWpE66pIVISWszVA1KL/Ia0CscVm\n3dIYzW1ftw8tHqXd6m8isRuQ8Y7XTanZc/3a1RZLUiedYpmnfkcIp9J/tpa2\n5QThLDfQzwG2IwkyaAkYkvessTGK8AtWM5wBjBSdfh4czUew+aAUmEDCDLzI\nSO4lFUBFxcRrZ1KnmSotJSJL/jSevytO29Ozcnqg3Y+cUPpoozSY0R6bylt+\n6eLw\r\n=o2+3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.34ef15f67.0","@material/rtl":"5.0.0-canary.34ef15f67.0","@material/base":"5.0.0-canary.34ef15f67.0","@material/list":"5.0.0-canary.34ef15f67.0","@material/shape":"5.0.0-canary.34ef15f67.0","@material/theme":"5.0.0-canary.34ef15f67.0","@material/ripple":"5.0.0-canary.34ef15f67.0","@material/animation":"5.0.0-canary.34ef15f67.0","@material/elevation":"5.0.0-canary.34ef15f67.0","@material/typography":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.34ef15f67.0_1580232302468_0.43924463081629517","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/drawer","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.d3d176ba5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aae1efe5caf94768b7c59f2b093bcdaecc130e90","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.d3d176ba5.0.tgz","fileCount":46,"integrity":"sha512-ZUhV99bLDzbQ7j2QefaN3qbkP8Tim5qnbdNhFS7RHcoBS2gL9a6jfggZ3itJ3Zhkw4fpB8Rq/TgT5GUeEyNYrg==","signatures":[{"sig":"MEYCIQD/1qhzDx5R4yN2LdXCmYsuj14F/X+WLH+U+RRwZC33VAIhAKYmrC7soDhlybGCeQHtG4OIrivy5OpLW92cEkldTUSG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG+kCRA9TVsSAnZWagAAZs4P/3Fn/M6+jvOEubHrg7xM\nIA3vXrG6IfiGqGHZ3oZZtFtjIpZBjOrz9SkcLsE5H+JYIR+/Ul59HaoZ+45Z\nYG9PDLGTqiEb8jlvzgABNA0RCrZcuGoIyHH+B/kRgqZGUzZoEVZajjuBAIs5\n0MXGDg7zL/lfCUazWwFxUFqpJv4/ZnbN0c5zQabEc1KQ+X2g3UlD2DQ/vdky\nhUrvA4+xECsK/WRKFggV/7CvkiF14KyUY3hChOXDIchX4r9KFLzaBtZ0MevO\nM9SatsiZWLb7qMI3PwZgbpgfOg0THg4QM3pndACj30roRdYNKMn2HE+RW0f/\nESQrk6+pZ40uNfYSIZEpbpp0WMknBwxJZlU5e1HcIuMhd6WHQW+k3dJDj6xm\nvJntmlh62knyTk6QI6aYbDfccQl0Dhmy0LyiWiGlmL0Z60gkXcTHtYdqCYXJ\nkRDVOhDRY3KWZE+tXTBmuv0JT8GvUeVGuwvfC2wnZ+vJRqFiWHi3debJgPBO\n9hyYJvPZMi/t2JDEd2Kt4Shvk6n6lz/gw9bfT0nI+4CJrlmQW/h+HUT3tWJ3\neA+K0/Tt7TkSMpVHLAyiA88HcUylh98zzDsZBU/vZzP5y3m+ppDL3TlTDtC/\n7oQvXZfMHiTClI9uamCJyrgfX6s15GNSgp2eaeR26qmTly1gWy18K6uexdt7\n6GrX\r\n=ufDz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d3d176ba5.0","@material/rtl":"5.0.0-canary.d3d176ba5.0","@material/base":"5.0.0-canary.d3d176ba5.0","@material/list":"5.0.0-canary.d3d176ba5.0","@material/shape":"5.0.0-canary.d3d176ba5.0","@material/theme":"5.0.0-canary.d3d176ba5.0","@material/ripple":"5.0.0-canary.d3d176ba5.0","@material/animation":"5.0.0-canary.d3d176ba5.0","@material/elevation":"5.0.0-canary.d3d176ba5.0","@material/typography":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.d3d176ba5.0_1580232612010_0.9543895921195924","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/drawer","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.32c1df133.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e4e14e6e9a7dd3cac5e586c4209da8f8a241306","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.32c1df133.0.tgz","fileCount":46,"integrity":"sha512-R7VeP8MI5kxhhScwyugCLu4ObvQj8SBoCUkWGIZa5e5Uj69Nxqlw/NyVfZ0OTxMdyBPtCLaSDHa4tFKwu+N2Hg==","signatures":[{"sig":"MEYCIQCzmMlbyk2T+gMqYRltv/GmwkYDprpNM5nI6MpwUPyMEAIhALhbESVt3zz4Hcri/9S9+hn9Me6tKUEeiL6g4kug7IYl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI8ICRA9TVsSAnZWagAAwRAP/jQYzCToqQk5Qlom2bP3\n80HaAVfTZWNbTDhsuaPqZ2clPJvhGSS6gmoKjSM0C8gemk7j46f3k/+7CM5O\nWiiHidAkbshcHxv4gugse6y8QvbQSnIImmUuofVn9kaUXov4YEXRvsYoj0IT\nzlAaPMmBH2NWeTLxeFa+xWRxucfRxD52qRGlidIAMD6MtvJUMcdiU/zWisYb\nAj5LH2RnWuw0uVFuVk9iOOlhFy+ISVZd+uN63xTk5zGT30xhgPbovLWpSap9\nwnReiFeyUzMnk6F0Mp6yKK/bA6j/EcyYw7HWwUOrZGLOzsnWFwyrJwoCAP39\n0HaOUAWiT3T8jkB0Q8isBCJWsTYQe3vwi32G6a1QBhzATY6LIGvyMSQvQVW9\nklcyYuP3JL+2uog0sYyOl7f96MLI+W1yPPy+J4/+wwAapuIR4SzJyVt/4PcS\nI47uZWMnOvacwoi5PlL70ctR38g0yZoaHG9YYy3BrYJPOHdJUsf+a1M308/6\n3RG62Ilyu1hzKmWzaOuguJlrAKLAy4Qyr1XYTvPpX/fBdS3JzqNYFnZNl9fP\nkOyeYRL7YoQkxCkB+uYNGXjA5AfbHZvkjAkWJNRryHNUdrd4P6a5Dkd1Xhwm\nAmmqq7tIzcuataqBwnjWnZJU/ARhjRvWfJPTH/24ZTJlxS8fmgHIPH4VjJak\nphuI\r\n=10Cr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.32c1df133.0","@material/rtl":"5.0.0-canary.32c1df133.0","@material/base":"5.0.0-canary.32c1df133.0","@material/list":"5.0.0-canary.32c1df133.0","@material/shape":"5.0.0-canary.32c1df133.0","@material/theme":"5.0.0-canary.32c1df133.0","@material/ripple":"5.0.0-canary.32c1df133.0","@material/animation":"5.0.0-canary.32c1df133.0","@material/elevation":"5.0.0-canary.32c1df133.0","@material/typography":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.32c1df133.0_1580240647977_0.5514041733321049","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/drawer","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.f3adce86f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e5450a98a859a6ca7c49db9c0f4220dc586033d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.f3adce86f.0.tgz","fileCount":46,"integrity":"sha512-Z5Uh5wcuMoczisKGh8Y8YbaWx0kBXxuvFHKtmj4aZjlyqJSfPXJGygD/Tb/IR1OCvdtXufRR5WGlEHcJ9w0qew==","signatures":[{"sig":"MEUCIQCxyynIeFTJ1XTYvDcpCYGmDwPfNQYzzzbFHcJrNOtb0AIgBt3vanFDnSA//yHHJ9tkrFOlxGoBUaJtcX8jYaRA6As=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKx4CRA9TVsSAnZWagAA3ZQP/RzbkO+pLD2D+RskbmGV\n38ABOa/4WlzpcIlL31nVJR4vfAHIjwtbz+cFLxWYefPx9GaRhtqK4qxZzVvs\nJ50YCca9JSKKl5KTLwz21Oqy+dHk/XyyJNo+Rxn9xhl3GuURHkRaZ9q2u95g\nNq4JZkbnEXETwXl1kijpu2SuBuJoBGLTxFNyowEskR/q0vUPkpmvt+t4bfe2\nRs0YhnCqlQlaAVM7DElgxkxYwvCc9EwaxgjVRmNQB0GG/bUtz8sksvj5EHuy\nbJlFzNNlXIyFXO5pXmSmUmnC7WqAD+QngaQyAicevU9rGA1npl4q0x3ejk3u\nAb/dAtKypQcr1lUHjaLtrAyXf41WiFS5sWrFM6ieknTc6dF1lzCaOyY5muyA\neM847RwKT20GjFumvWQPBw9VLlmx24Ng7gKBv0Wzm47oWeI55Pkq8/dnco3Z\nijIaEQ9aijbQ0+BpeScY4VTNNF4LD4UeNHzYUXOwwN+8CdeAy5xgEFFnIVZY\nP4dbQmnW+63YbuAkkbqkOpB2OFZcut+aGTG5ZuneJoLFAJ+3tIe0xc5EGOZX\n7mzcpGu7Oiq7CXhuSBQxj8SvLjEoybhq530Tky0Hqf2J4whmE4vW4HtxTeuw\nTpnRV4y/vRApASa2Z4ToPkpTv7Qq/oMX3Z6m4WpyVMi2emRqSwQdwLX804Lx\noCUK\r\n=kImM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f3adce86f.0","@material/rtl":"5.0.0-canary.f3adce86f.0","@material/base":"5.0.0-canary.f3adce86f.0","@material/list":"5.0.0-canary.f3adce86f.0","@material/shape":"5.0.0-canary.f3adce86f.0","@material/theme":"5.0.0-canary.f3adce86f.0","@material/ripple":"5.0.0-canary.f3adce86f.0","@material/animation":"5.0.0-canary.f3adce86f.0","@material/elevation":"5.0.0-canary.f3adce86f.0","@material/typography":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.f3adce86f.0_1580248183901_0.6054193186427361","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/drawer","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.a4423f890.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d96ef4527eee6e6f52602b12a46a865986652ea0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.a4423f890.0.tgz","fileCount":46,"integrity":"sha512-hJLsowS7u1Q7f11AyBA/aEQHOvKhTh2b7jgCIHIzHHrcu9FZ3/VkY71RlVsZNM6pwfic/RlwQNueqIfYY6+UCA==","signatures":[{"sig":"MEUCIG1R4BpOinsIBdC1g6vpu5r5mm8C7RGUY0zmn/ojwbmzAiEAzqqc0xELWCujAjNRyzkzzhFNiLj6hiKqWpPPzHemRY4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfTQCRA9TVsSAnZWagAAqeIP/1G/GpGCUDn/IzQnWTYS\nrVhMF2u3nWojbQeaGled6/DxdB68463OX/sKqQhHMIvPQED1lpYM/DWS7HIB\nq78gDb34Jv3AaJNZ5lRtr5s/Hnsk2ionKEK7i4XXbjHKb8JpJXLe7IVrNMrZ\n6W1BqkA013kdft4ULkzSeghGtOA4NhxrhCt6BtH43sAl9FkVsfT3OTHbADO3\nsdpZPCYWQyqxNhrkMj+shKw3GwX63H8tKDyi8HRxrZCDxHZECZqeiP3WtY0I\nV2gJd5mIBz9G3WnzzwwwENsA1BqMZcLa91S4HD76T+CRFMC+Jor6GSz2EEcy\na8GQ7Mqt3Jt+71j0wtfi+G/+vftmOGzZo0j+2xHTuafwtTaZRQQ18Ceb2PQM\nW25C7r0UpcWUTz6Tvua9W6osjdry2es1YS0F2NEUkc6QLJYy4o885GdAP7um\nMVHu1vv1PGU1LbrGR8eA617ZQJKgnZ3cam/oVGsl5PjxiYzgLT6WpyR7v/yi\nvHakC/UBP38BA4HsxMWd3UKR9oWSBfxqpidtb3Az/hlaSsMQSaaDwB+JnTDK\n5FV63psnou7wceQcGs2nmykYzOiCgGvuU60HdkS4g7siB8jTeGK+tvDzNP9n\nXrktuB7ByRXcjw02LF+zv3Gu/jVy0yV3M+KpNRrxZvOpaJgZVnYyVKzqCerv\nFj/J\r\n=vs73\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a4423f890.0","@material/rtl":"5.0.0-canary.a4423f890.0","@material/base":"5.0.0-canary.a4423f890.0","@material/list":"5.0.0-canary.a4423f890.0","@material/shape":"5.0.0-canary.a4423f890.0","@material/theme":"5.0.0-canary.a4423f890.0","@material/ripple":"5.0.0-canary.a4423f890.0","@material/animation":"5.0.0-canary.a4423f890.0","@material/elevation":"5.0.0-canary.a4423f890.0","@material/typography":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.a4423f890.0_1580332239619_0.7452517465657553","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/drawer","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.9351f167d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6030f5967268e98a8c589e312c389fac42cd33ab","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.9351f167d.0.tgz","fileCount":46,"integrity":"sha512-Wdv/JgDrgfFRXgXzogoWapLS6+RKanQH6V8rjCUN8md580Y++FDcno0lOzNhkwRIPJ2o7CuQs+uhRRBJjai7oQ==","signatures":[{"sig":"MEQCIA+sg3cICqVvfa9fFsedJOaSrzoquQgeQgiNWRA4tv2bAiBLFbybYmcvvAesH6GvmwriRu1cUGq1lMFYKKw9nnxH/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf+VCRA9TVsSAnZWagAAQT0P/3KI2JG9y/I3NqOvr+St\nd4u+gT7Sph1ou1+S5zYEc+lprb5n2P85lmCpCrdYgi7jxmjjQniq/4EFIQQ6\naYAIAmxVX3hMghs6v+4uc9B5zoVf8wN57wTNkzsMrhoSHhUUOeLRX84/EQed\ne+7dIb/TtmUZvMJNMJYveMhSH+gs3gtefX6VjEj4ZbU4gBofSLj/+0ZnjPtI\nPm/ypFMtXGKxCgixipxEh1eLkwf/eW95CsPHuZtNPZPxcsoN4Iycg3ZgIx4I\nfRCkBKiF5e6OAfioZKVDJKxxyZNf5oQRAL768ClRrVpVRKFRTteT99gAy/Fo\nZqNCTnYPCe3NLrEyXyjd1l0+fDlTegHgrDeQSzCawtDGvebu+wEtglc9eIbT\ns2GE6fiK0/CvsKZ2UIYFJ5MTwDhEM5Fv710RZRh5EnXWXjr8g35tsmsIVKf/\np3tZkkubvtkZE+orJSoknjUayY9TLjPzsfrWBdaS7v7zofIyK94Av/qVK3Eb\nrE2Xky/WkfapvL80desXAGoez/4zN21DkQlKROu4JppBqrn3WvxaH4YBksre\nFo1Kfq0wwZ/l1eeDmDgwdWbTa2mxlNHI0BGNpSyhBHXyXHj44oaAuSW/xSOU\nmm80JTH4Sts8ZBgKks43fW9XY552TXJk0qfnxPK3yM2Iw0UWOyJ+JkAqag8S\nvV4f\r\n=TN0y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.9351f167d.0","@material/rtl":"5.0.0-canary.9351f167d.0","@material/base":"5.0.0-canary.9351f167d.0","@material/list":"5.0.0-canary.9351f167d.0","@material/shape":"5.0.0-canary.9351f167d.0","@material/theme":"5.0.0-canary.9351f167d.0","@material/ripple":"5.0.0-canary.9351f167d.0","@material/animation":"5.0.0-canary.9351f167d.0","@material/elevation":"5.0.0-canary.9351f167d.0","@material/typography":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.9351f167d.0_1580334996674_0.3956595224397508","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/drawer","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.29b89dbc1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af86686e5ca66dac8e754658905678b9ad42afb9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.29b89dbc1.0.tgz","fileCount":46,"integrity":"sha512-8Mf2qWEI+JYSVx4Pd4q587lWrNcttRWuvGA6PrAiSEFdz/mDPUNnVm42t1eRuQZ5tj45WWUSYVgjkrdjY9d/Tw==","signatures":[{"sig":"MEUCIB0AhRn0WvZyo1ji9VGxkce3Q/Yt30hjd77gf+qnNlzUAiEAqB4NdfAjhcFobS6vT50O+9oltlvPjr+NZ+xYl0R3MxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgSLCRA9TVsSAnZWagAAkq8P/2g640MK/wISuUs+jfo9\nb9Wt9wzUm3SfcF1a0uUmslJ/8j2723bmCYJ2ElRw9MoEb2EiwtKDhranCbG0\nivH3Y4EB/zIt8CX2uAvuRf2/BQEpub0qVcAWCdcJAyC53HoA2/wfDdNJtt88\nVyblD597kTlp5gpPEFqoKr6ztD+bjr7qjrvRytq8mHPCSBsaUZ1OBw7dt5UL\n1RO3/CX3j8tghg2lgvCoFBiXJlY0q8csCXfg6+hK8i8GK/YGBWyQ8MwlAFwg\npBDNYm08hZw8Z8qBpdRRoFmH1uBpfM/K4A2qiCNbqQvR0DYFTlQaiQzmrKM2\nd89Y01jFAK5xerfyBLMY2+Yw4sV4AQOn0WtUED9MxMG+5H4YhciYnkS06D1w\nyylpzW5cCyu4b8TFtmo11FAyCQM5YlKjPW7oR8RGYG4jxsgagyYUwBeLvL/x\nuvZ+c0nuAwXrNA3KrVPZ7Bjxbc1yLHEqmd4iqKU9K9E7NtXn37s6+rCpnoM+\nLAqdTMFGLB5wgp0gMn84mqQ5zEjtwN4dDoaCFMK0hJLzT90L90KO852pihyP\nwtkw3fM+DkQpuTxm2FhNxITJvplO6QNhv9d+DU7Fz3qa1W1fBxxYETtPrERc\n2AjmrbNoawOabw/EdHGOVCHv/H6+M7GatvWXSXN8vUEe/oZPS22mKF/+hrE8\ndokS\r\n=WCSH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.29b89dbc1.0","@material/rtl":"5.0.0-canary.29b89dbc1.0","@material/base":"5.0.0-canary.29b89dbc1.0","@material/list":"5.0.0-canary.29b89dbc1.0","@material/shape":"5.0.0-canary.29b89dbc1.0","@material/theme":"5.0.0-canary.29b89dbc1.0","@material/ripple":"5.0.0-canary.29b89dbc1.0","@material/animation":"5.0.0-canary.29b89dbc1.0","@material/elevation":"5.0.0-canary.29b89dbc1.0","@material/typography":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.29b89dbc1.0_1580336267247_0.8684707508682714","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/drawer","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.45985457b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dc61ee516c946f4af1cee6352d25705b7097ca7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.45985457b.0.tgz","fileCount":46,"integrity":"sha512-hCt+fKz9dUT8gkmbze5mYYFjhP8s+rV+tA2Asewb+iz521V1+TG23HZEU3emoV3PjYgixDQlDw6XfgBYdrmb8w==","signatures":[{"sig":"MEUCIGCanb6P+hBHUTUZiX4EWEH6KbEjNR+22ptzhd1li96fAiEAn1gPVfaVsz54LoprbP6lpofjA2IK0lQFQ6Y33+N3J0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhZrCRA9TVsSAnZWagAAmUUP/2rPMk+t+ff5LPpkWvi3\n3IrR1stWByt8RBtK3CLF/DO+8QUpdW2WzKXTMxajU2fouyrQe1LqjEDauDWH\n2al0k7PHDGydSWOezc7XEqThDL3ypsHcOPYMy20nOJJ8MQJJynLvI6E8LE92\nxMBDQriyCfA37slo1VRWvZJgzOIwPc/xm+/SE4gKoIHqp/JUA1dlxSPdZ7O8\nnB+ZMprvRBJghMrR2d/Q6VdxNpaMA60clxC683iuO28Je/PZjxCYNSx2YjRa\njW2Gs0T5et5gYrvHMOjMHXggsHwlkPO4iK4jvbTfKMmL9/gOjpsx1TpqbUTw\nJxOIH0FeKmtdW1IM+BKkpGXSVt8XY4BWx9gWnhubx19oKtetWooQTbZiUDhS\nrrwKVdB2Eyn//8z1ty8uZhdpc3jQZoksjVFqb1Cbx7elTak5CrdxOWKxDiIJ\nUUQtzG4RW8VheuXqityjSYSCDLRtkbnYSRiTVbyntlzmY+CWjecB5Vpu9a74\n/aVbl/XXf5wRUTFAtpxgV99teteUrFhyHtkYfOrB1VjafxWSTa8pwpmp9aRL\nuFB8DZiw1u/N4v7vdSPzGuhPLku2LVwgvjYCmWGbttCRFHRvK2W/wQ05uYBH\nud/6sGXQ3fqMF3K/dQjL7mfGJz75cL/Ftr/gmZhZ676KqGFNrihRoyCJKdl9\njMAl\r\n=1DHD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.45985457b.0","@material/rtl":"5.0.0-canary.45985457b.0","@material/base":"5.0.0-canary.45985457b.0","@material/list":"5.0.0-canary.45985457b.0","@material/shape":"5.0.0-canary.45985457b.0","@material/theme":"5.0.0-canary.45985457b.0","@material/ripple":"5.0.0-canary.45985457b.0","@material/animation":"5.0.0-canary.45985457b.0","@material/elevation":"5.0.0-canary.45985457b.0","@material/typography":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.45985457b.0_1580340842821_0.038372904641871264","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/drawer","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.a1a0deb3e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04722e58775c5e72dae62e836215b9c446c22558","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":46,"integrity":"sha512-edPoZXR8EDx6n+JujgTebvqdLuld/iWnecaKS7yHwqZKsK5qyBJRrsLxY5sq9kAj87TcHGjZypEFg9viujaVBw==","signatures":[{"sig":"MEUCIE/OGE2j7L1271jRKF9syGOAowAkr0emgSSZZL6MTv4YAiEAnj0G5qzLV728XGW6iP09/WHAgSnzVyTXJRxdvP3xLtE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":488474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxSCCRA9TVsSAnZWagAASgYP/1lGAipVwbsxDyqTkx56\nEuQdx6bQHVnVokBrl4B1cwdQ+2bv1B8a7m/nKqVp9Y4+c8MtmytLO5nrclhi\nMry519b3zbDmgp0Nedz9USkXEy8k5PbRbGENxHbKQVNtBihTU77qzZpz/Oz6\nFD0NObc9bP5HFP8hWpuz5OS9qXONbQXwUnyOe9Ucq52tAQW2d6kAAxdspyr3\nxLovzZ76P2JRM5beritH2PSUjNoOYSEMczp7IHbmH3KzDSLNi4zJnlTSknhw\n2Ak+gF4Iy5r2nX1IS2lfE1LuQUHrW+spVh2yeG7+91czFphJsE21G1aFEXSj\nEhUOUeDR4o0eZuniH50kaRks2EMcedhw9QGSQB5yxuTJ63wZkynlrsrsn43c\nsiU6l4GsRk0B5OASy5N73oX78Ie7VJrHV7NQF3uTGcgEklq9LAhCWwbH/odM\n3FrJBbRPIh9RV821xCoTg06Bews1f0HqW8FQeg2Myv1MPU+B4rWHMzwF5i5d\nYFzl7GxYJiIgIKPRu0/f7izCSTqitVZtiNL0V7NBqBd6v5kv5xYFf9XyVPWB\nXyhhFswphoraBSvXQEYieD2G2PWl2HSM9Ozb3YG00B5YdCBCoaN4WS2RpVWA\noXfnTq8Csz4Ta90PD+5JihvN8u3SjCVG6NHTymkafwN5ra27CUHcNLcgb9Dk\nPusa\r\n=2WTz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a1a0deb3e.0","@material/rtl":"5.0.0-canary.a1a0deb3e.0","@material/base":"5.0.0-canary.a1a0deb3e.0","@material/list":"5.0.0-canary.a1a0deb3e.0","@material/shape":"5.0.0-canary.a1a0deb3e.0","@material/theme":"5.0.0-canary.a1a0deb3e.0","@material/ripple":"5.0.0-canary.a1a0deb3e.0","@material/animation":"5.0.0-canary.a1a0deb3e.0","@material/elevation":"5.0.0-canary.a1a0deb3e.0","@material/typography":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.a1a0deb3e.0_1580405889890_0.2618447036939151","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/drawer","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.181486643.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36f4867a3761c93c8a8310bb2403831398d28e95","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.181486643.0.tgz","fileCount":47,"integrity":"sha512-AHPENR1DXH4vYFHfMtFif4osv8mUAFe9zoVUE577y2LMVib7H48axUi3uLAQY4PCNNBrO2vIsVQ8g9VYANGxZQ==","signatures":[{"sig":"MEUCIQCIvnhyG98YBXsQJboiLZIZXd1xK3w2ZdqkMJTw5q2hVwIgVXUczySDIQgLMgqN1C9ZqAdvD8jlP7QFuXwj+kyt7HM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0MZCRA9TVsSAnZWagAAYf4P/1ETScN2A/0FpJjHL/rf\nqXYkhRZ93euimODgXB1OAqv4Ymjiid/ZlvDZquIrIh0oijwv9ewO58L6i5gY\ne+3YeWG0jUbfoAUQV9Rg/QknUTW0AG2zzVJjpXCuFwMhf07VM0lzvkySX57q\n/IgqZ1KUBB6Nigu+E83q40MoFWZp/oOH98zrJhQ7TOF/qiudXgZ5T7k0YBPl\nEkXeojdtbS/H6NTQkpxdAnKIX44yLFpDCeFNd9aJDOfP5e12LAkMWT7dD1rs\nElLMOFPu6lJkuizUDkqvXQ18Ph9tzdaNmxLUCitA4UBZiark+36lxQdYNle5\nNts8D4q+ewEXHKTo1+18iSvbtM1s9ZY7XSERrKPATjzMy7QZtOuUTLZP5cDw\nAbacFUBhASXSvS9GyLXW3/q97SQlkcjMz09bmnwEnprmBPZRoDMegsmR1zJl\n38Sd+hr0c5bL8bDUrCGMvqyUDKoDTcDkKADFuM1Fg4KlhY/omSMLl2Q0Jq5B\nycvMV1zGrhG18leLEVr+/aqrm0r3cpSYX41HoGvND4121uP8mrOxbQrb4VYJ\nazL2wERh1ols9ESQIQYyyWbIKKmZDM954r+0VypwtkXfe+lBHWDIfoGe7B0J\neZLD6+EaxlVQiDBW7GD6GGluuhQE9uMsNVLbvNK5DyJ6f0HEVO1VvqGJqC3o\nY4qn\r\n=dMRU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.181486643.0","@material/rtl":"5.0.0-canary.181486643.0","@material/base":"5.0.0-canary.181486643.0","@material/list":"5.0.0-canary.181486643.0","@material/shape":"5.0.0-canary.181486643.0","@material/theme":"5.0.0-canary.181486643.0","@material/ripple":"5.0.0-canary.181486643.0","@material/animation":"5.0.0-canary.181486643.0","@material/elevation":"5.0.0-canary.181486643.0","@material/typography":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.181486643.0_1580417816802_0.717035476838817","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/drawer","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.3a85313ac.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbc85b54f2fed83993b4329e27c091e85c1ad503","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.3a85313ac.0.tgz","fileCount":47,"integrity":"sha512-16t6shtawQSmwjOc/Kpb2AimLFE5NrNpPcYS8wl72GZAggZWcOGdUoSi4pa0aEsRMN1kdGfAnWaKYL3lov8VKA==","signatures":[{"sig":"MEQCIGesKJdB1DJ7IzySfnNMayc1RoTUtPc8cdcZTjzJqEzBAiAoQx9i4ywbq0SMhYUXbJYVW7gGGEkiYfBIQmQ92OsHNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFShCRA9TVsSAnZWagAAMaoP/1paIlx1e7F4hbRFjtlI\nONBdjrbVtRQ44D8QiNGkhlWVOJV+lszSZxCk5FJ5W0MPNQ44FglxDjfeNfRt\nXN5Tai287EGML/EKFwDdqqWWE47tZ4LxRYlMukL7RDGPG9nXpYhpgFH8qXQJ\nyhjC9u21QkprVgz5ytFdmQvZVEBVwMQOAPoJkOZ9Xhdkpm0y0b22iMn1zpVM\nA3Z+OYIvWpj+4D3ops1RF1RiSXTpYn9fK9awoJbjKK5GUYJmaifmtZdiy8qv\nj69amO9gj6o8aE+N63q/+akyPaeM550yuTncD3Q150WbLFCAokcAQwGZA6qF\nM6nDHngce/+cO5AdYx/Dbe3sjtykqvTQFya4f3NdJ/bAGFHXPvKqCVlnypk3\n70MO1lI4aMD5n2it26RYpkf8JP9eeBynsetVhR91aZwu5iMUE2qGMuaHs2Qo\n2gRekozxUdllFTtIXjofU7YRBdlpZcdmN0x7ivX0mKNWfDiyZwYY01OVsq7R\n62+o0SqhUsEmdNeVJldJNO+t/fXCzoz2K7IQ0YambYDdFOkcT6JdfhW+7GcE\nL5+bv2z7sKFVMJZasmUhSw3CwWDk8pu5H/zL0xlyi/X7T9lqfm5J5+dQFrJu\n1kpFdu3OzbG8ecptkQ3V5Rs7vnfq5TKre7XgRZeSg9Sc3kd023Py0NTcWt0L\nBWvG\r\n=aECy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3a85313ac.0","@material/rtl":"5.0.0-canary.3a85313ac.0","@material/base":"5.0.0-canary.3a85313ac.0","@material/list":"5.0.0-canary.3a85313ac.0","@material/shape":"5.0.0-canary.3a85313ac.0","@material/theme":"5.0.0-canary.3a85313ac.0","@material/ripple":"5.0.0-canary.3a85313ac.0","@material/animation":"5.0.0-canary.3a85313ac.0","@material/elevation":"5.0.0-canary.3a85313ac.0","@material/typography":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.3a85313ac.0_1580487840652_0.6410660045872618","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/drawer","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.b6c7f624b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f51532798648be1a7dfa0f5cc1491635730db158","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.b6c7f624b.0.tgz","fileCount":47,"integrity":"sha512-MtDhfUxTMweCCpg48O7Nf9JF/laUuJ+migCOYScaRIf3RgfMBAEkx28pNAVNBWdjN+YrIRO+V7cT05YZZB4CiQ==","signatures":[{"sig":"MEYCIQD8qHXCErfBt+6EP137aJBgi5taoMEgYAPAibdb0ErJ5gIhAJM+O1sEnMiShYFM6pmyJ0blMC7hY3sAT9IVmmmCaQdq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF30CRA9TVsSAnZWagAAqa8P/2hIGLpx9U/Wuzp2kKiq\n08oFcIgGHv+Ewinuuw0WPjFyhI5Nq1qkzWF1tLE+OAgt0NR237F4VrexrEXu\nfwIWlrGH588Meg1sxEbYRU4qZ/szIkSKut4vn+2PC0Fl8HpKbmyxfCwRvbvA\nSUpwr0/ndIZUePnSEow2bXngtwkWGWVL8SCF1+8EIwUcnszhn5jdDt5A3NUq\nTQsz2gcYU2HNy2dZCMxUlOfEmF4PXpiISfLvld4pShokkX1lbgyc0lyGUhDX\nPQIou+GNY40eFNmmRNqwNPSB/Guu0NWAiTTf9RlyHeKbDKf4/9NljOu6CKVn\nxNHLTDXScRO52XPR+4mrE4z4ciYPFhc46dy+03GEv/SKeK2+X7mmXG1gmdaK\nmWhBO0S1AfgzfJwrXmWGu4+iWaaw6uHIJG6VmFILJzt5vJhT8wI0crbo9BML\nbc4oTWtzLxk00C0GNS3wNDI6Ot5qgmxmPhOQxcbjaq8nY8rvC8McwsLZSfxE\nLUvm8ZR/bCpT/aJXfXTTk9ATV9Li9M8B0c9MjZZveNbiJ6v021vU6wOTJS3B\notuTU76w+YFhHSgrYe/7AGPlpMoj033/xZCeHSrsPJ8IcpXgTrjz7gaildH/\nHmYRlgJAT2bRxrJu7Ln7br53ezs0HtFQS62ua8bceE2AyzJlbKUqQb8yx59M\nJOnE\r\n=c+E6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b6c7f624b.0","@material/rtl":"5.0.0-canary.b6c7f624b.0","@material/base":"5.0.0-canary.b6c7f624b.0","@material/list":"5.0.0-canary.b6c7f624b.0","@material/shape":"5.0.0-canary.b6c7f624b.0","@material/theme":"5.0.0-canary.b6c7f624b.0","@material/ripple":"5.0.0-canary.b6c7f624b.0","@material/animation":"5.0.0-canary.b6c7f624b.0","@material/elevation":"5.0.0-canary.b6c7f624b.0","@material/typography":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.b6c7f624b.0_1580490227591_0.30169507647406957","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/drawer","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.b3f70ebde.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0608fbe4af328fde712b5dc7cf0a1837f028ff4d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.b3f70ebde.0.tgz","fileCount":47,"integrity":"sha512-53qWA1hCF3IO05uyBVmBw6jJ4sXkE+bkaEbhmUp0NkX529JnedmdoKCwJCKmce/24Ml9UQzIABNO0nCkeHr3iw==","signatures":[{"sig":"MEQCIBy/rMAGNWGQ2yNtx3JBSMq5YP+Qa5gnsjCsPKpIiJ9zAiA0+mb4Odyoo0cD/w6l4CfbCPYZXXU+EcKwMfOl45q0fQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNIngCRA9TVsSAnZWagAAL/IP/A2s/zPKjAFb0Y9tUyj7\nxF9be42buU2KD1WcCnejkilbEPjw3CH3wcNB9ZI3w7jwZGsxTj1B5+YjdxGw\ng7ZMLNUThjHegiAHClo9wdqhxNvD0fSD4URm/SmDSJrjJ8xYvwajjnrI/lyx\n7RoNY5qlcwaE7S5U95tsgj5fUT9jBoCFj3NJXoGtZBVKuQZp1bZT8hit8PT6\nOUjH+XMEMOqk77uDAom6dIGZ73VDSaUEE2GEk0fQy/2H/Q87+BboYnGGPMdi\nqsg/PJLjdZm6+ucIseorOfefbudwkv8lykZ55TRfLtDV+0CPvdYcmCfnJ30e\nnyf3ILrCv0PscQ9z20yVbz2ecIiWWfD7OlWl1ND2W7J3+NbKjaQuhuOd0Xuf\n+S253MsTFCEHD1RrPT7XpL3V1Btym9Estd4q4tXRcuJtWWi3krT4YHPVP95f\nYb+eOtRsI8DJJuwwVctKBOcH6LTaOED0WhUy3kbvIhcX6sc0b00J4VWFy2/v\nca9WX821HrD/M6ABqyQil5Qkjf8pkCHXvAHbTSVTuKWoOBCTJOdvMvEpZP1F\n76O8bjgCXD8ygSKUOWE+rc8JZzdse+tXBB46OBWYSJWSyHvaCuvzJGYeO0Z2\nUnQipnngw2DxJriFfvyYIlrqTmXri17P3EfDPMFQyb5ie6CI4BW8QKYRW3Od\nCYMP\r\n=RRBq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b3f70ebde.0","@material/rtl":"5.0.0-canary.b3f70ebde.0","@material/base":"5.0.0-canary.b3f70ebde.0","@material/list":"5.0.0-canary.b3f70ebde.0","@material/shape":"5.0.0-canary.b3f70ebde.0","@material/theme":"5.0.0-canary.b3f70ebde.0","@material/ripple":"5.0.0-canary.b3f70ebde.0","@material/animation":"5.0.0-canary.b3f70ebde.0","@material/elevation":"5.0.0-canary.b3f70ebde.0","@material/typography":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.b3f70ebde.0_1580501471894_0.216328943476795","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/drawer","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.3e782d8f8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7164b412a5646ededfb8011ac64fa48489bf0219","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.3e782d8f8.0.tgz","fileCount":47,"integrity":"sha512-V1Vtw0DhFB1a002CVEv0sLZOIhCBm2aCkOwdgREOkemakHUOBaY7Qx0Ck5L8cgYhQUAJJNI3FJlxZspHK2gJlA==","signatures":[{"sig":"MEQCIC86s8IrzMP97JHvVeiCpBVWuzUyXU/q9qbjcuLIkiptAiBB0fmMJtaEsqRx+xjOIdpxwml1fkg2XqbwzPGGswSRfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiI1CRA9TVsSAnZWagAACU4P/2Sp2S7JnIRpbnlakb5g\n3p2FRG7zpTi6wnY8nUm4KBV8U/gDm6CJGUxDjBVMHLyBgDAEsDRKyPjgBq00\nq+LTWVtgPJrhsg1Wpu8V2To8gsGrgD8fsvhB7Lnxr0DbmZXOUCsZx2lsh0QJ\n2z683cYNtOpeXORaiT+0DSGu7Z/Mgkz9l8OEE/ZXpE60q7J28vmmKaaoHF5Q\n3bX9XyXB79z80EIdRENYbdt5UjxPzrxr3TXtVkWf4XYcNRAbcKIs9cFqO8F+\n4EwU0hJlRFfyjsf1+tbfzdRAVi+d3GtFoxM3v1eyZLfAtLl9afYXcmxWVDOg\nqt9jpoBvvB42w1B5PQCGBiPXetRLdGxFa99yu4WsMG+8gg4phAN8OQ/xFm6x\nVGqqa50MssN+/rmk1y8gYIXFa52vAbvRq5LTpgh1ldGUOv4ZhCkqz2GePgNS\nnPfzWb0Q5CpZYZ/HBqiWwjbP/45Uf+QHNsvoMz7OW0Ufl0ZMkSTgaHYKgch7\nTDwizfksDmzuhhR7dRm00RD7sc7xp4W0+S69NcbJqfUX+glWgiYnU4U2HuUU\n5+3VWKouAj0qVJrU2To3lXGBiHNZrj24UxNLOcPWmAi9p+OUYB8qxa9q59fz\nY7O/8SE2Y2wvSqLThkYQAqdbneZr2upFPSQ36FUyYdVQ240ArGRjXS2x4fFW\nqfr2\r\n=szTw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3e782d8f8.0","@material/rtl":"5.0.0-canary.3e782d8f8.0","@material/base":"5.0.0-canary.3e782d8f8.0","@material/list":"5.0.0-canary.3e782d8f8.0","@material/shape":"5.0.0-canary.3e782d8f8.0","@material/theme":"5.0.0-canary.3e782d8f8.0","@material/ripple":"5.0.0-canary.3e782d8f8.0","@material/animation":"5.0.0-canary.3e782d8f8.0","@material/elevation":"5.0.0-canary.3e782d8f8.0","@material/typography":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.3e782d8f8.0_1580606005216_0.388467677848515","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/drawer","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.535398572.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee5d3e329c619cf6fe571e9a248c834f4e4cf810","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.535398572.0.tgz","fileCount":47,"integrity":"sha512-gdnuVAnwJBtamSAvdt6abuWVdG/kQNRmM+zPWg99yDWGJ3gwuquIIHwh/pwrgfX0K4ZqvqmNGLvDRcq+LvqdJg==","signatures":[{"sig":"MEYCIQDjRTv2Laeozbd3FySqUf73Vz1M6Lfs4CG4CJQ/rQCoSgIhAOXPRZtpRgimg/FwfVpgzwysM8i4YvGwHZ/iWnBXnhsC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGKoCRA9TVsSAnZWagAAoQoP/10QRceun3pBa7KKUx3n\nKxIptLhODRPTrOE7waAh90DRaAFj+YrMyW3dFIDJa0cpWhwdAOVy51OgNIq2\nfQX9mVdz3ipOkxxU7yRFJxgyUpiSYo3dPijEYmPoGSdqZIjU6LhFBPbF3Nau\nisfFOP3hxIkNN3y/QtUefFgHZsSHHG3bWpu6FJv6xB/CqOvTmtGO8tjk9i3M\nxirGwqQFEktezw8WN6HzDRr93KcKa3rLaNsShvT981mqpuTMk+FcTCDL2Ocw\njOTd4ReABHHHTJuJtVIAMuuyuoxh1ye15RupDjvMvI83HoeBz0OTYbmPIC4E\n0kCVSlJM1Eup5QHhtAyn2iYPmJQ+c6U7Pz92T/3CwztRrPezF+wrP09+sDw8\nG3w4CEAAd5L5Uzvs1mX3xDyJZKzPeWoeN/9UTGA2ynoh/mUPx/hjJdXYyfPd\nASWgQ2Jiie5S9UrRl85+mDVQvo6yArpyIr3/F/qKJhmuGpIVWl8bGBcP91uU\nkHQaNWqHpfFLJ43g/r/COxJZJJgU05s7s6zqMon0fCSMFe6TsPqZ8k5cNP3e\nLTH9GZuyaUfge6ZrYNd7W1y6AhpZ5B0pbPcI3rg6c4Mjyfu/4vRMuAJsOQWN\nMoJxRN4GMud4oxDCSlxU+RRRq+40zn45QJPWWArwsAMf4jTTD9yhCF8LvFtp\nTbTp\r\n=3iyV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.535398572.0","@material/rtl":"5.0.0-canary.535398572.0","@material/base":"5.0.0-canary.535398572.0","@material/list":"5.0.0-canary.535398572.0","@material/shape":"5.0.0-canary.535398572.0","@material/theme":"5.0.0-canary.535398572.0","@material/ripple":"5.0.0-canary.535398572.0","@material/animation":"5.0.0-canary.535398572.0","@material/elevation":"5.0.0-canary.535398572.0","@material/typography":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.535398572.0_1580753575655_0.6843083289372225","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/drawer","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.5ff33802c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ede1a89dbe5c9dd15c6ccafeacbebb20f775ebe","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.5ff33802c.0.tgz","fileCount":47,"integrity":"sha512-txwsDI0Qb9bl1FBjRRr4HugL0WB5FXlNvYPzwOvoh3buwJiQGefSub8v+C/5ZNIYws/R61TLVwj+yMNkN/fp9A==","signatures":[{"sig":"MEYCIQDri5yc04bWQEu/kAmhIrys+PiMtbWZ7UZEK4JB769INQIhAIdXkPLKbhwx0x07z0NrhjOr1CEA0W9ETy41iBDLh07R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObI1CRA9TVsSAnZWagAAp8kP/j8j+WsvaTJeiCJET/gA\nR/P/KsfoCrWKE5EgvP6JpAecydUR4MtOA9X86DfAELXILWHZ8rH8xNQR2nhd\nz1TgbgqC+HBH7Z/MHVXhr903tP6AbYaTjyylTNp6lXdeyOwaxDDWAVOKzFf0\nsd8NDtkKq6GwkEEp4XdPWSBOGM/TOQDbT4hsnvERf/3MrEqXhfm3h9wdKwT4\ntWbSEVagAuzNkSxxfXHXz+BYxxpogzoNIwMtxbKIEWzy8mU3yYXqcUHHSenT\np3odxTJSJL9wPwqfJiLRAFGnH8UNgRS3xNZ6yxsvY5FPeot1IPjGFUz6AgZ0\n+RBoOMPk56OwM8Vp6utKOPPKYxLiAAr9DB8keHXqT01kydWM7qaG2KpNIbdw\n2Efwi/YGaDgg+fUO74S8CP4ma/jGBkvQn6Kp1mEY9zSb6nCyBgHU+rMUAQLa\nvUVxPNfLwhiiSZqrLZ2plBfkqO2fZ3Od5AXscxuHYf+Pta81zAGkWmYPLloU\nXauK0HM1Dfp+HEW0ipy2yHJi3e4U7Z/Bn7T4umc/ARn94AQA1qIDbvhHl6Md\n4zErOhcLjzdoW74lysZmIDQ/kM3HvM+SUxNpdnYcWTnVCMDJ3RM6fKvawshW\nPvV32SrHmlX2kA7EXjPKBDzCD+zKvOed5JXXlJ562c0IBbKXHHJdH5qKK4Gp\n6B0h\r\n=s1uN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ff33802c.0","@material/rtl":"5.0.0-canary.5ff33802c.0","@material/base":"5.0.0-canary.5ff33802c.0","@material/list":"5.0.0-canary.5ff33802c.0","@material/shape":"5.0.0-canary.5ff33802c.0","@material/theme":"5.0.0-canary.5ff33802c.0","@material/ripple":"5.0.0-canary.5ff33802c.0","@material/animation":"5.0.0-canary.5ff33802c.0","@material/elevation":"5.0.0-canary.5ff33802c.0","@material/typography":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.5ff33802c.0_1580839476986_0.3140943948712924","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/drawer","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.1eb29491c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5b2efa9b081241cc6ba67a61df6498dd7dc0ec7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.1eb29491c.0.tgz","fileCount":47,"integrity":"sha512-i9GvKjXbP4xEt246YzOU8oD31qR7TiVX/5tWU4oOCbYVhH/Z/o8rRNhLRZ+oosH79xiiYiDlJXNRQpdwIYh+yQ==","signatures":[{"sig":"MEUCIQCDppFbBV33g2zxYRPoyaaVFljmNJIPmLyNcce85wR6AgIgDxH8teCSl/qbq+wiJVPi0MTwyhURWoz+ltuuQ0ww6fU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOdu5CRA9TVsSAnZWagAAE1UP/jlD5ODolaZnoxdt8F2Z\n7f5seTRjR+EnQN2gra5dE96DiyTIgaVssJrBVV0cTuWmHFk46fap/qtulGA1\n4S77FM/j8FtaklWkQMQ41Uk8TkMs4iuu6a2b1MGuALPU5Uwc80/HNsgE8pnh\nJxKetKHkOYR3KC6X4imsSVOmFo6Q9s+/zrY4IUkGKoVR2eFe5tXVJNWrVFzA\nZiuLA/dSTJP9cUJSQ73SJHbTKeHfjr6I9a5r+X32/sHH5QnJ2ZzsTXABYmd0\nlm+OHaAzdbSypk4ihSHngcOUWY6orm+0opFnp+70WBsKlLMaoONlGnz/9+p3\nVLE+aK4PkB6LcZaNykirgLF8n4KPiVLHnE7+8ouxeRYgZoSMiQsJwr/a8yE6\nTB3rCruaGtoPxZ7WK4PvyguFoG+uikIV4SUWyRtS4srU5RzZ46dI6xv8ttM6\nmvJfuqwt91+f82F6iwbDpaVbLIoDi0wgtMs3E8w34sbeLsKUDSUblZUAZDbj\noOa2YIcHjaih6oBWXnT0AWNj2ESolERmycdl7cYtAme/uQd5YAE3sUPzUkic\nDjHMMckUD85rmRRd5vfZ+Zj99510x9loV4ZJylbNPhqQZmAX4oj/cmO3s4ho\nWJU97V9UVrnhu4/7xfvIsnT8jb3Ns91x+fYE6vuDNuDtNXrXTsn70M9ZwT7T\nQ3Sc\r\n=xo3+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1eb29491c.0","@material/rtl":"5.0.0-canary.1eb29491c.0","@material/base":"5.0.0-canary.1eb29491c.0","@material/list":"5.0.0-canary.1eb29491c.0","@material/shape":"5.0.0-canary.1eb29491c.0","@material/theme":"5.0.0-canary.1eb29491c.0","@material/ripple":"5.0.0-canary.1eb29491c.0","@material/animation":"5.0.0-canary.1eb29491c.0","@material/elevation":"5.0.0-canary.1eb29491c.0","@material/typography":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.1eb29491c.0_1580850104766_0.5099067275425577","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/drawer","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.4c7154b26.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e8327612bebd60b08f82a5f79e884a5c6eb3c8b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.4c7154b26.0.tgz","fileCount":47,"integrity":"sha512-jBH7oioGw9pxC9xf2YL0J5ykJRq77QINLXGEmzVBu5K7ObMm0KbHkuGPRJz2+gGbX1RBhXXtqholqqZct2zgEA==","signatures":[{"sig":"MEQCIHPqQ3FgS+AzuM9LGlNWxNyrHiDa0qJBtWXgnmD1qL9dAiB6TlBFaezisl6U8bwQTtD4/LxWXV3Y7TX86fLckWZQ1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOuewCRA9TVsSAnZWagAAHQEP/1Ygfy5nrrYSUEYL0/KM\nYs1X5df95euUdCP4hGpiLJgqNWaZr7V7EuZXw6rOq5CVjSewQ1J6IHHrcSux\n/kmTBHOlZEpMXXamZsLTiHLKv3DEsPIQtn6etgg0zHoW2gAlPSZ/tmViEDer\nnR4zZgMynQV+MSsvHigTt6/ZwEMT1WgL2GN9UD5IXPag78sDuULuH+Ewqsgt\n6pllLANTAGt2mfnzWi+hv8zOeGa0a2jlgKuJnt6o2hvFJWiBWwKQ3nVaGXBT\nQM0N2ZcHxWEPDHDQA5z4N64W9lQODxTTxwV42zc9m/YuUG4GHsE0svjrN39U\nyuAOg7QCZda9WmFrtmt0og3dxAGfUwDgY7uiA9xLaBqFRIWAZX4T+TGb+v5a\nfDRSnFAXlXkSXJhG1IUGIaQBEOGwPELVZdI7rFQSFhfv+eRetBG8TlLBansR\nYGNwmlkkh8ulGdaLgMPMyYdn5+WXDiOI70liWdsOAgE1plo2+WXSe2YOFZCC\nkDoNek/IAi3ZCsZ3jMVbO9GI+FNUO6u71e3oaWTpf3Puv9JWLo7VBqMpAb7K\niKoaldLo2T0ZNm/9LE6+l07tEhZj+qhc+rRZsy/TuyTp7R7JKSbZti+LFcaH\no6A3KZo3htsP0kPnRv9K+ZaNCEbaOuybTuytxGPnte2uzrS/NUDlo0okIIvC\nsi0l\r\n=Bkma\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4c7154b26.0","@material/rtl":"5.0.0-canary.4c7154b26.0","@material/base":"5.0.0-canary.4c7154b26.0","@material/list":"5.0.0-canary.4c7154b26.0","@material/shape":"5.0.0-canary.4c7154b26.0","@material/theme":"5.0.0-canary.4c7154b26.0","@material/ripple":"5.0.0-canary.4c7154b26.0","@material/animation":"5.0.0-canary.4c7154b26.0","@material/elevation":"5.0.0-canary.4c7154b26.0","@material/typography":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.4c7154b26.0_1580918703581_0.8831958992275155","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/drawer","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.ab5f49a2c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cc6620a36a56a4e7ddea79d0493abf620904891","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":47,"integrity":"sha512-jAUcaJWELFpeVhlFQozYOChrk2cjZdWsLoDEzfrsu88NsoxQt1pPA+FNfjkytfYLdOI1xIkn7b3+gz+Y0TVt2w==","signatures":[{"sig":"MEUCIAkuuThBMYZS7j/KD3xQA9ZcmUA/Y5RtnTc8474ksKovAiEAxKimkxC/HsrJVBOLlrV6D4uBV7mfUFsbnwbI8kJhAzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1DxCRA9TVsSAnZWagAAF3UP/3XsNC19RoWOIEsXJESL\n9YEMrMHKgwQ9u98LzCfeEWqWdIOiAcaTnhX6m80xFm1zSZyLgAwWdq3GttiM\nm3dhlO3rsYpsJ/bfIgsbmII0CfDS9YI6di6tk9YW1MymMR8CZj4H+qBNIR1W\ndxgrn0r8RI7l1ztHGk2wf70GexZflw1ry3Zi11fSEUj7LsS3dEfuK0BTVhT9\ntNJZS0FyiYXm+LQMAdCxdVnjk1/ziF8jEUzI6McWffpFQxDw00XtcQkTRIdx\nubfINVbEQV2TbU6L6+UbEZsD4LYb8dBEbMdUdPw3Q8LCzm/HdABQnhwnOsYz\n2rqec++WPq0EcEYWeYN8Dt10QEL4thOxgpRlmeK6YZhw4TlxKLbvmqees50w\nW294uQO1S4ywy7i8K7p6pEuPLFS/bnl86FcdH3tVdBiVlljDsZNXHYmrvg67\n4/IL6RgC2mh3bZ41BLXS3LnEJljtK9ltXAEvMV5FCwgpnM9ftIAgk3of9woL\nh93eW9qO9m5Ko3Pga/5lkzAmr3vlivYCtbxIoo2C+QUL61MDvw56ao3WUG9J\nWa71ct04AFeC/Az6i3LilxuqTs0vikUO78gTF5JPvVYdFpH306jbxTcQlEoK\nXcly5z83sLwqLzYyUC2Bfx74gXVQqUSIE5t0ee3gTadPjhMPyUw9DGlz4zzK\nEn2q\r\n=++Lo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ab5f49a2c.0","@material/rtl":"5.0.0-canary.ab5f49a2c.0","@material/base":"5.0.0-canary.ab5f49a2c.0","@material/list":"5.0.0-canary.ab5f49a2c.0","@material/shape":"5.0.0-canary.ab5f49a2c.0","@material/theme":"5.0.0-canary.ab5f49a2c.0","@material/ripple":"5.0.0-canary.ab5f49a2c.0","@material/animation":"5.0.0-canary.ab5f49a2c.0","@material/elevation":"5.0.0-canary.ab5f49a2c.0","@material/typography":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.ab5f49a2c.0_1580945649403_0.4185952171423706","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/drawer","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.c541ebe15.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f40bbff071bb72c23c14ed15ca514aff06fcdb7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.c541ebe15.0.tgz","fileCount":47,"integrity":"sha512-qgSGRXFnNbjWUw36IMGsSoBjO6slv/mVH2RMYJQ0YTkaNcZvS/I+RmNDCFxx6liFmQXq3fVgXuJ0WX9Zbh2rDw==","signatures":[{"sig":"MEQCICl1/CkVfZx3vAjkAIq9l1gnk1B0FzWUoWU8OkxEz3GmAiBi0Hd6u/iDgb9ckGw/yB9GIltelhZpUy95dvnmUSi+PQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJORCRA9TVsSAnZWagAAlZ8P/jeHEigZCnrRQl/yQeJ5\nOthJq0GpVGnSVrs0lYldk0iyGM6oODs+/tHBk/Ks/T+OYlsNEvftFJNAkrJl\nY/V+LQe1Npvlhs5K6U162rr52FZmKw4kh3cbz0Dj5ecbM+H5momtLArrhOTX\nDdYsvc++8tgpBgrphcGH1lGIQbpmoGFcM2jOQY8qBnuHeS3PN2n7pxDTdlyY\nSeZQB1kj5Ddu4vbQOJ7xWQbEGSK0KRhZdwtxgaH7M0jcUatvyIzHTnCM4Xeb\naLdBO1alrFkmslAvLkLH3TYKOy0S4i9vqlEDwX6RxjWe8U5iNT3IRp0YPRik\n65khhbaBByTpZvxiVmmtzrxGJOLTLkKRq5hppuYNLcUIQTXp8SlEM4vkiNst\nAL1Z4DX0u9IydlBmM+IArtpN5vqHiXliminjzpye1CeUkbe51tJd0/WEdOJz\nQ8yEYkhV0hx9OSG2a+pmu8aI1OORI77XS+MzBvIZXYwitbGO+kTW535tI98g\nnzH/HFuVWBEL2qBpjIMFx2y0aZYciqyr6AyGJF9ICK3E2viR1MERFwSr2r2p\nZ6CTuNUq3Een2usCmbXI2qd0QZiG47JfLGWTa+6huKWLBKjRFukavqaYaWP+\nydmdZIOmwhKoX5rPf0mMg7AWiiS0Hkf8RMAHYwPDBn8jeaWDafccTHwKf0ug\nOnFi\r\n=VTDL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@import \"@material/drawer/mdc-drawer\";\n@import \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-drawer-border-color($color)` | Sets border color of `mdc-drawer` surface.\n`mdc-drawer-divider-color($color)` | Sets divider color found between list groups.\n`mdc-drawer-fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`mdc-drawer-surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`mdc-drawer-title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`mdc-drawer-subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`mdc-drawer-item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`mdc-drawer-item-text-ink-color($color)` | Sets drawer list item text ink color.\n`mdc-drawer-item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`mdc-drawer-item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`mdc-drawer-shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`mdc-drawer-item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`mdc-drawer-width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c541ebe15.0","@material/rtl":"5.0.0-canary.c541ebe15.0","@material/base":"5.0.0-canary.c541ebe15.0","@material/list":"5.0.0-canary.c541ebe15.0","@material/shape":"5.0.0-canary.c541ebe15.0","@material/theme":"5.0.0-canary.c541ebe15.0","@material/ripple":"5.0.0-canary.c541ebe15.0","@material/animation":"5.0.0-canary.c541ebe15.0","@material/elevation":"5.0.0-canary.c541ebe15.0","@material/typography":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.c541ebe15.0_1581028240620_0.24677262349934836","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/drawer","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.98f7faa05.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bf52703e966b8bd97fac180fa852ff45337f750","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.98f7faa05.0.tgz","fileCount":47,"integrity":"sha512-u0ca3lqYKGAbMQbdbNziaaMKQXVFq6Ovgg1+eUdEaXZdxoaWlSQnxZYhA/6smhS9Nz1fbt2qIM0+SGGP7TDxCw==","signatures":[{"sig":"MEYCIQDgKdvzwQvRk7w+A+U+VgY/7cFbdDid4aNMh8BX/hBJNAIhAMCEO5awHK6p7jH+N6HFOfxOnBUQf7Qle57G5DtLSFre","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbjXCRA9TVsSAnZWagAA370P+QD6xZG7+QPZgnVy4MLe\ndTWSbq+33X4ZgsXRlkTH7Yon8CBm5DUn2B5iT/vbLfJrnPacOYkpT51DVRub\nZunmnLdChbpgvDpyB3hqQCc8MPOarZIJcfts0swQvx8J1IqyHdzUUuZkPdWE\n6jX4t7QuuXsJaYo9u1fbwD7uj6mANXRTGDaTwKWgF4/MZlNF080qxvaXAR0r\na1iU9VQN1IbgFRkHg2xT7WjcGgnic8kJTd3QoJTn2JT1sYaYOMbpQ24XNtG1\nz8LoiqJyVZSe9pVo20cOOB6jRtHoNlwrYoiAuBhOGRuWz4OsEsXAuZ4tXKHN\nbW6CR16Qazcrg/lVdQHiIfySNU0jMwOqw28seCj1K60N/xHVUTTEPC5cqWL0\nCADBEaZsCuFJ01g00a5YT/+QhhDgdx0i/9VZTt5vKM/1obfeWaZ/m30ul8Ps\nLg0ENpR/sIpezMrALosopuRngrhKAPEZ6uEUmwzRfkNkH0231bZ/0GUGRGLD\n6iD3OQR1fKEoQKiqBgCvYKjX5O1w+NFKBRxlhdMjVhTpMX04p3Bl7MbOSU05\nxkihcnqGD0ktnVwFviKFwkcmBpFejWC4VuLtcpTeZnL16K8am23AGTE2BLGU\nxCoSNKrcWUAl5ebY4kn6m8Y52vrbZEPLM4vpgBztqU0g4FTS7sR2rr9F4XO+\nsNO9\r\n=d4ds\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.98f7faa05.0","@material/rtl":"5.0.0-canary.98f7faa05.0","@material/base":"5.0.0-canary.98f7faa05.0","@material/list":"5.0.0-canary.98f7faa05.0","@material/shape":"5.0.0-canary.98f7faa05.0","@material/theme":"5.0.0-canary.98f7faa05.0","@material/ripple":"5.0.0-canary.98f7faa05.0","@material/animation":"5.0.0-canary.98f7faa05.0","@material/elevation":"5.0.0-canary.98f7faa05.0","@material/typography":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.98f7faa05.0_1581103318722_0.8323074161760133","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/drawer","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.b4727e43a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a87737c6abafcd6b9f091dd257a68f2a8ea281e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.b4727e43a.0.tgz","fileCount":47,"integrity":"sha512-x5sSYJ1b+jgnZJlUrrBhdI91t5QbSiJ3aUnEARLM0A+9mKAPtRq6g2ax902Dbgo6GoXB6DDc3XXh0JgtEkt7mA==","signatures":[{"sig":"MEUCIQC7lolfYvbXxPZkLM05I/vul/U4YZHuFoxmOBK1e7BVTwIgU04QF05sUqhy72YHui3ZRDh65j4q81AEaIIleIZJoGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcDiCRA9TVsSAnZWagAA8V0P/0YfHGgN6mOx1/3K6X2F\nHJA759ZVOflJ8Pv7tcDuhWHtp9Ku2GQm4a9nA0cFoblsutYY7FSHgBvlLEAB\ni6oityFjAeje7gTeSRKxDPdvaZ5N0VHl2It5XYTroXEtQkA5kfWi9FG8wZe1\ng0q84FI3iF5BiZ5BUmsWjJDnvK64ToXTaJqTJBMBaPCh7kArIeIy/ekod3qP\n6mPwrVllU2ltJoocyrNj77WGAa4h6L8ID54x/bs9Ccet7uzk2CrbPKYtp9kK\npf0Oa5Kz24ZIdVNQSKoPsLrNo+OUyebNkqe3xn+IM4RBsqd8dqeluN+OjIfy\nX5FlhAPj7sPeg+DgyiRhJEb9INCWjwZqGCSg6JEtAUVT8WBmzI2f96UlwQfk\norsiZnMX6JvtSkYIPTUOuBPoGMvYuT8EG0kIVLUiNU5zm6ej3MbOne5kbM5H\nViVOeYHoACsvibESFrmZCe39YcOugFQrThA5ksa1yjDvEtpxxIDr8JnmEgxA\n8uxy13glZSPPu/HGLy248dcre2sdYpGfCKHxatdmzrWZEOR+kO4Ck8zZxJhx\noOMdI2gwbu+EliG0G/tw2SnbFtn9hAPJAUBUeBvaBOs6LETmVWFnUxJjlsqo\n8R5LwXtuPWScYfP5q5t03Jhb8U2NuDtpGggVxRPANmAhUbdiT0QV/L6gk8oG\n/qCI\r\n=1XRy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b4727e43a.0","@material/rtl":"5.0.0-canary.b4727e43a.0","@material/base":"5.0.0-canary.b4727e43a.0","@material/list":"5.0.0-canary.b4727e43a.0","@material/shape":"5.0.0-canary.b4727e43a.0","@material/theme":"5.0.0-canary.b4727e43a.0","@material/ripple":"5.0.0-canary.b4727e43a.0","@material/animation":"5.0.0-canary.b4727e43a.0","@material/elevation":"5.0.0-canary.b4727e43a.0","@material/typography":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.b4727e43a.0_1581105377695_0.251090929387501","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/drawer","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.91d9d5a65.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5696b616212004005ade3d2a1e37430b2abd3c7f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.91d9d5a65.0.tgz","fileCount":47,"integrity":"sha512-/WC9u74kxPkTQMbddzYGQ+4uzLBmZSyiVVnlVxkQdLkjKuXn8k25odpiYb6u/XNWRB3f/KQEECSuMItgXFXhyQ==","signatures":[{"sig":"MEUCIQCgwhak98sjTY2HRvKYwDzeHZEI+ODczoIVG77a8OlU1gIgNgW57T/keeVZPNfkJb/kI6lb0XNI70xoFqRWFu5Bp10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePewACRA9TVsSAnZWagAAo98P/0TXL2HmO44q7fhqe8Ld\nHXg5BtUlWAK1/ok+loipemGqxg8Xfe+FXeMB/jGAiJxp0xra5Joqalgou+pS\nSMEEeiDSA2JsNcEKDNbuxMVBXtKhssSftt7/6msY+igrf3ewLSh9nKj1L7ZY\nOATMwwISSn1HBdv7yS+LeNw5LYskWrykJNcIAwSy5i0MxEmoYT6bh29+KUyN\nmAXkDUp0gcvKvAZhAhAAb8YB9ilIRnTgscZto+NbL0ADhJNtA2o2hhYbUKGT\naSUR9PvGQVavd9TA/2D95lzv+CllAwBV0+/etkvk0/SeqstHYJHv748VEy8H\n3oehHYmEoiYfrjBDQplZaMO27XBSY3BUttfCObKL4dWAcrHUxFkZ+xLvWNu2\nkIy7Id74mZU8vE0Bw7YZ7+rs42Mmg1Bc26gLROVEx4ZQqNgG8uN5f3sEaWt0\nsLqSYu4kmr7CU7dPSiFqZ+eCYWHxQZoD/gkh50YG/Rh9dEOyiVYRI1zv5dcf\nEKPEBU/Oki5K02uwCzr+dFYIr/xFNQ3ZWjxYIG37DPeQe4PrhVrFU3zupaqX\nnJkYSz7cVnTITilY09ii5JgaWVrcBFApOFr3gxa+MXsgWMH3tJXkPAU5dcN7\n0vuuyir5JsputGww6o+HABBsQfjHRzulowgzCASN/8+1OKBc1tZpcPF7cYsu\nPS6Y\r\n=ibDn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.91d9d5a65.0","@material/rtl":"5.0.0-canary.91d9d5a65.0","@material/base":"5.0.0-canary.91d9d5a65.0","@material/list":"5.0.0-canary.91d9d5a65.0","@material/shape":"5.0.0-canary.91d9d5a65.0","@material/theme":"5.0.0-canary.91d9d5a65.0","@material/ripple":"5.0.0-canary.91d9d5a65.0","@material/animation":"5.0.0-canary.91d9d5a65.0","@material/elevation":"5.0.0-canary.91d9d5a65.0","@material/typography":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.91d9d5a65.0_1581116415936_0.5499751485686566","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/drawer","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.d5c006ed1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eba926a84ddc34ca3ff2d89f52bc72185eb5a1e4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.d5c006ed1.0.tgz","fileCount":47,"integrity":"sha512-H6yNoOzEomPnbUs17G0jEeeO++HlmiCQtgavD+OxYiNhguOaJ8xWiwBGKvgr1SRhsdiHEPn4EsnBaK+yy9xedA==","signatures":[{"sig":"MEUCID8ZHXqFvJXIxHTPOdJl4wF5cH3d3tc9QT5MVNsmefp7AiEArbvV8d3XaWdBJXqD/qrLVzOY8Nnb4YKfNj4/qELC6LA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYmkCRA9TVsSAnZWagAAc6AP/2TEEZMJAA2iPsD+e2pl\nk1uuXpKRG9+dA8iVkBFBL8ETtIOFTeRhahexpaMJosTclvmlT8p0r4OGL9Gn\n3lP8VvuIL3XC05gBs0BFCgnUT7QNzh2JAD+kLfgS4gLYpe15MrtrVjNZEWul\naG06EJ94482GD21WZeps5yKVkok+HZEtPT7DKvhcJ+hTGe+RRYp7xrKJVLE6\nnGCSvoHHRn1GSR6irLXpgPoTE2M32VCPRlUbP2XWsleVyaWuXm6iRxz3Znb1\nW3GoEQJUTxHcWEFMObjy8nUx+iKp9GD83iv5iBaGgLqtqAqWdIW7svh8iX9P\ntxSiMJTsw9JWdEGktwipOEgmxJttxRJqhgmluCllnwyMJWsS/fRElwXjHw7M\nzb64qKXqRL1el28tDn14mGxaTHlX+aCZIOYt1aH/hOQpMJzbA+cT9gL+YbhP\n1QZjYHhFWHAZaCUsUScj8D6daQf9szSb0iLAjTqQujGrKnw00wD1R8hMyBQw\nIBLIKxEL/qVt2YJP7mMl7r5sFihnLppb4EE5HXBsz0BPH137NHACu+1ZAEaT\nmFFKUsbWmZMyvwILlID6XwMxCPG5SMA9kadKPCx9lzFazu3s50G6pKNHKqYV\nZl4g8VD8HCX8AsIoiS2ldlts4R7cr7s8hWyMiShw1hGIcQzcb20lv8dY7lpK\njA1H\r\n=A21x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d5c006ed1.0","@material/rtl":"5.0.0-canary.d5c006ed1.0","@material/base":"5.0.0-canary.d5c006ed1.0","@material/list":"5.0.0-canary.d5c006ed1.0","@material/shape":"5.0.0-canary.d5c006ed1.0","@material/theme":"5.0.0-canary.d5c006ed1.0","@material/ripple":"5.0.0-canary.d5c006ed1.0","@material/animation":"5.0.0-canary.d5c006ed1.0","@material/elevation":"5.0.0-canary.d5c006ed1.0","@material/typography":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.d5c006ed1.0_1581353380232_0.4837081442491087","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/drawer","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.559f1a570.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a19ec69e121665fa644804d9e8c7e62f9151c58","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.559f1a570.0.tgz","fileCount":47,"integrity":"sha512-fnAYGXBq50qb4z1y4ZzIHXwBlrlw0a1aJoGJ3C7c9/0jLJs2cPLQfXj4yp9KiZV5W4yvmUWKeZRqnJ9VaN0N8w==","signatures":[{"sig":"MEUCIHVHvXWrUOGL3LTAkD0eE5V/0lLCbyn0rAdIg7hWbxPGAiEA825LG1Xap17eYXDqlorLl+ceu7QQqbbUq2u+V4D+l5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZIsCRA9TVsSAnZWagAAQVUQAKFGgn5Z3OAlVILhHVQ0\nuRz7OtRYfYWxhux5ME9Cnpnh62zR7l7jwSdxgQUI0im97nk0w/e1rhqIi7ES\n//n8HL3h7qJLzgokwuO36k9KPCmLlb9iCfQWc+6osPVsdgo+s6UCYJiLXXqH\ngYklNuqlt5cnHUU2S1tw9jTy6k9E37FNl4nEBknZnWH9qGwzIySmPIzOPm0A\nNdT6RKVNC2/bPw9g8CuQz3Mb/AREkzWftz463qGUTuhYRbjfrWBCj1G1AQYt\naeCKhbio0R19uq2HfRRmfb2j93SUzA3I49dVOQQLjJhp/3p9rn6gdRNCKOT/\nfCKL3Ow9TaZd5YAQL1Wbf8BgVd/RRko5JXJ16VlOi8doyRhjm1C5o1RYiUeF\n16BGXIX8SIK5o1oGWkbdFlQx5NTl416ju+HpWF1YD93EV/rGLbBP2iSYfLXP\nJj9nZMhS3cxz1WxCERnvEMWQ7VWbw8tncB8Ve/+iBNBecEK+R5k+hwoLsiXw\nJD2V21606BWcLot6hdtmq5Ycs3C9jwJWRzHl8YUAz3l2R3DSiTwcqZGA0Lhu\neVepa4wq9Xprs47pQD1hvg1ZZMgr6d18AI8Xv7pUFGX277kQzbc/qthHS8Ur\n6xs1K4qdFbXD4Hivw2G8eKaKBW3NAyY3OWZJQRV9PZca7L0i4hEdjl0SmLSV\nQLrm\r\n=B/sj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.559f1a570.0","@material/rtl":"5.0.0-canary.559f1a570.0","@material/base":"5.0.0-canary.559f1a570.0","@material/list":"5.0.0-canary.559f1a570.0","@material/shape":"5.0.0-canary.559f1a570.0","@material/theme":"5.0.0-canary.559f1a570.0","@material/ripple":"5.0.0-canary.559f1a570.0","@material/animation":"5.0.0-canary.559f1a570.0","@material/elevation":"5.0.0-canary.559f1a570.0","@material/typography":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.559f1a570.0_1581355563884_0.299353302735492","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/drawer","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.ad3bbf782.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd090717c45c9fbaa0f9fbe2dc9cdd318f338a2b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.ad3bbf782.0.tgz","fileCount":47,"integrity":"sha512-nZuT95wEBfeh3AeoCeGhrJ0XgJCWfE9bF88goDkAKCNXvHE1ms/3KxontlWBIM5eExrKpriLmdlX627zCpzbKg==","signatures":[{"sig":"MEUCIHQJwp4eWAqe5DBAIlJhnZktZcv8iIk5nP0A4jKFGkh7AiEA2DUm4wyM0GiW6IBb0/pfgHhMDzHfvNvQkYR/rWxWlpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQasWCRA9TVsSAnZWagAAN1EP/ReWtd9dWVdOAfxae88C\nvwj805Jg1YWm76a6/mUi+icty+wytP1Nn45wdHF4HP6HlgJSCTPlrVcshKVQ\nUHxROCrzDPxgcI5Fo7O9X59aJWnV0SY0CHLl5+Kzu4PiBWcGacNzETrURqvp\nikExvZwcauYVOFfI3oNRs/0yetqwVhkeTjQjSQSCorlfXS6cFpLhI0+X1i43\nlmWpc7UbdOnIjuhuE9Tcgv2jYqhAWHhusJJTw0v0CQFYmU3ZlyJkM076tMhh\n6PUFAb1qSaS4goUwG8hvzwwgkc0W7XGSyfhfRxOXSgjULnUnZxHlxK4zHjIx\nj1WutOJazAqVPrh+xo8HDS7uccgcpfc9gNWrQNmQLJYxXAUUi2ldb/eZDl03\nVoRP+PwcQCOSdFdXI/El21FSucVlGtGrcl7p0Kv4EAOpHPmRg3gZz9sUiSci\nqophTpOURxeJZ9rft/jZpIXAOcfsOfGFw1Y3VzJfLKZd2+gMY86NJsCc9Pb6\nOtjrYcR8L19PQ/wEmKoHNIShLQ3/nOlnfoXwbVWbSiZ5ILLsHNhaOaZ1k6oW\njZHh0nvlHdsFl/C7e1Ehbjd3M1LUrDWQPl2oQpf7IXpX/PzIj/kJNv93cObP\nQtJtNKc+qme9dgPGxXkIkvyXliRwt6iIw8HqvFhBAV1tId2aLdPXJxyiJT/0\nSqA6\r\n=fV17\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ad3bbf782.0","@material/rtl":"5.0.0-canary.ad3bbf782.0","@material/base":"5.0.0-canary.ad3bbf782.0","@material/list":"5.0.0-canary.ad3bbf782.0","@material/shape":"5.0.0-canary.ad3bbf782.0","@material/theme":"5.0.0-canary.ad3bbf782.0","@material/ripple":"5.0.0-canary.ad3bbf782.0","@material/animation":"5.0.0-canary.ad3bbf782.0","@material/elevation":"5.0.0-canary.ad3bbf782.0","@material/typography":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.ad3bbf782.0_1581361941713_0.8088766261877434","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/drawer","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.570d8e49c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b13f27551c6efe1bf5500aedceade8edfee0722","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.570d8e49c.0.tgz","fileCount":47,"integrity":"sha512-GBMlq9IxThdN8Drn/RK2EiY9wi+djaZUr8JMChvyOru7ztQ4R5S67ERfI6bmC73O3ehvtsPfxZq1oHEqp6S6RQ==","signatures":[{"sig":"MEQCICogqyBWu17SIlV/kS7AxvLyoS+hMeRmE1jjxYrO0BJFAiBA661kjCdyElXSyd4hWkt5VUW8NgHaX06WaFhRhTBoNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcCbCRA9TVsSAnZWagAABAoP/jmP91dlURL0H1Co9KLw\nmQ8HZKurY8hFQ/p4mOqXYogn0eF26RY/Xlk8s8hxcgYA7ZR/Y5aWAPNH1WsQ\n3za11GVjcjh/oO2gQjA7Ejenx+bvOFuxkQLXZWNn5L5Mp7bZusMyOGrrNejZ\n4qkTipAQ5H01zeDuCRmsAKZFd7pUUiqMnD9o0ERwwg4+LPmbLV4VopdDMKwU\nVzdJHR3xk/t2MWpAhZEBLKlBcNZRJn1y42Ab+1e2f2O9om2VfqAY+55AjbjO\nQjthxadXH9AjVeDT3YOWrD1Bu45tAJzjaBhu0NB5Wu8eY+yzhM8NM2bynnKx\nz+CaVctjbe0yAYDjM04CeMLNRrhFIEP7ahMGGaM+7NcR731jCnm//83ADmFr\n5ikiALvrAdTxpmjVuy6eBBX8jx59A8NjaOwsm3CD1o7rnfuGERJ5XoxgSuxX\n8LAAiyC1Pc9YO6ubnUUsQ5Vn8mhzHiRUVROjqQZo+Hb5JhR9rtWRu67K7eMI\nz50p5tO1YZxep4HMH1tdkN08ie199N9L1/Mlr3Rwnlk0v40u4eH0FCKFEZJB\nwDbMOCPzknLtElM0odI4OkJEdmXsfxAM7hFUDbgkEi4RcTuA8hcD+wpXzv8e\nBt2qgVi5WqTYg0eFAtRlUERc0y/HzBRWYarRP/lxV9PnrkDkAr3QthJORRAb\nU3Zz\r\n=STyM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.570d8e49c.0","@material/rtl":"5.0.0-canary.570d8e49c.0","@material/base":"5.0.0-canary.570d8e49c.0","@material/list":"5.0.0-canary.570d8e49c.0","@material/shape":"5.0.0-canary.570d8e49c.0","@material/theme":"5.0.0-canary.570d8e49c.0","@material/ripple":"5.0.0-canary.570d8e49c.0","@material/animation":"5.0.0-canary.570d8e49c.0","@material/elevation":"5.0.0-canary.570d8e49c.0","@material/typography":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.570d8e49c.0_1581367450716_0.3962641641942368","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/drawer","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.48b06b89a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"122eb61df65afcf37c8b840e07df95f2ac289f5a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.48b06b89a.0.tgz","fileCount":47,"integrity":"sha512-IS0PwDAG6uJlqGJmd7N3Vc8CHdQjaRh/11Z4K2Z22usInNIALGGuN4w2NckQfW68X/6MvhX0I9ggMXH4xsCw7A==","signatures":[{"sig":"MEUCIQDB49KcVWMLpje3lxflt1utuvaJ/BUtTKJYqUgnb40BWQIgVZlrZOnPJsr9H4V1WyNKvRnfGURfKKY90gg71opie3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvXvCRA9TVsSAnZWagAABIoP/iwQRqubXGLOodjmdUTq\nRmEnVj9eg+JNI7eefG/chD02zo+r+XkogHQzrMu8NF8vU1hQ8uNACfBiraOm\n8EC9WbyqEv9rOA4/xQjYDvwCBJC4vMKxlA9b5xyN8A4sMVGn0o2T7IgNlLLv\ns/WDW2RdTNy1VvFJ+fX3+iwXjO6H5k5+IHkUQQ6zu3z6pasdSzrJVZaeIbgd\n3w8MfIr2lLbJukN0/nwPSoaTk9lCWsXrXH9afcL1771emka2XqsFTh/yGZpA\nBkuXZrwgca9gobd0bTtkQRxDrFKafJ1Puc5//ZZJO5pm/PDLJ9jtrDMGA0QV\n9w/8MTjqWTGsyEng5pf5gBEOgEOPIW30DpR/RvrBImgETkQYo+c7tMuZ7F2B\nBOydH9i8nhcNx92EiLDaG9cnxuM30KOPujmOUx40BtqMku2o7eNwsG7nyd7a\nTwA2UxTB/nthfz4dUsv65AvCJiKfsCCsytE3sFOomvdRSVSLA8u8zdzxypnE\nCX8v32B5SMb0PLSIg0jrUlVpf96NBvqgRqaolCe4LeKQYh33llf/NcXU++75\nUYFsHpWtwk1KsYlY+GPMT/4aMMYjsUm5eH9QbXNgogzuT6cZeTVgVOz8JJaD\nuaxuaozy1nky4c2OWr0hPcsjSbJ4zsmBJocfhK6TugtJU/707ZySseGFs7rq\nm09I\r\n=3q4j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.48b06b89a.0","@material/rtl":"5.0.0-canary.48b06b89a.0","@material/base":"5.0.0-canary.48b06b89a.0","@material/list":"5.0.0-canary.48b06b89a.0","@material/shape":"5.0.0-canary.48b06b89a.0","@material/theme":"5.0.0-canary.48b06b89a.0","@material/ripple":"5.0.0-canary.48b06b89a.0","@material/animation":"5.0.0-canary.48b06b89a.0","@material/elevation":"5.0.0-canary.48b06b89a.0","@material/typography":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.48b06b89a.0_1581446638568_0.1003189977473673","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/drawer","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.612443dfb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7d77258c0a37b79e5d63e2761764e3a882ddc7b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.612443dfb.0.tgz","fileCount":47,"integrity":"sha512-tCNF+lUdZwgJ04A4IBS0UwOJiDLLnDQv9G/nieGtsA07/TpQMQllwBmAuljzpNMJoG0Z+cs8JlFYWfldIfy6pg==","signatures":[{"sig":"MEUCIQCS/ixBRN3zFF8RvRDSCl8MTZpGGpGiRB3dsTgGLRUFqwIgA37dOy7c7PKN/Jte/D14eprnxwrt4U8DovdomynWATI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwV9CRA9TVsSAnZWagAACdAP+wdSKKKbo+NcSZZ2jH39\nWxHIs3/bmkUC8yKfxC75/ON78ouI/tfK//pa89LvWzwpMONyHc97sa+SM4op\nypNCpUBqmEHJIQPEquC0cxJprhHqC2/5uzgq1nrdEaG2YLXVTb3qLxGx3wNQ\n/s94TD94OLYkrtZPR79RmPb4QJ4qYr0AM1SbscnMwagb+1y0F8M7SPG3Z6km\nthsxvfKXYOhRDhE8v0L2dwYjbYlHwT98fSYE84bH0mVTdL293cyzcHLDS8/Q\nmCE4MBSwsHcl1BSlTt1W2EiU6855p1tWZ5p3kH7l5vrA81CYjo0vSgKKD03b\nYJJ/JJeOUzKMsvw7rufuWqHeJAyFBlb8YSfBS9nX2Lr4vntM05dnwRPgw6s9\nT0LLyRC6Cf4eflVwVOK67AN9EHJBoo9j9vmL2Ri7+Pcomy6xHonJyHQEOE33\numonPDRsrbMjM4o/95jAsIdwgYlRXeRYwaA6BA156OXRxU6rVXbXa9yJCIop\nOAAk4ndT5g3aYv+j8Ub2gbpukYXyrV4M0cZBJgcLHREJO9W68FHmXjm2fiTS\njjiZL0X71+Yhbyg6O4J3pOmqTEhu5zyWVuQTnx9Sgfc221Z1wlnBAgiNtL3C\nicBhdeh7rLenM8vS/1ydQwzEuwRwIDeSVONlrZRFoPiF3ZH5PHTmRB8g2RBL\n/FG4\r\n=SRCe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.612443dfb.0","@material/rtl":"5.0.0-canary.612443dfb.0","@material/base":"5.0.0-canary.612443dfb.0","@material/list":"5.0.0-canary.612443dfb.0","@material/shape":"5.0.0-canary.612443dfb.0","@material/theme":"5.0.0-canary.612443dfb.0","@material/ripple":"5.0.0-canary.612443dfb.0","@material/animation":"5.0.0-canary.612443dfb.0","@material/elevation":"5.0.0-canary.612443dfb.0","@material/typography":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.612443dfb.0_1581450620622_0.37542978332187027","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/drawer","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.8c11ea2a3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97f98ce7ce4a2e365a0b27e616d6a5c2170c7e68","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":47,"integrity":"sha512-bM9FVk3hs+UlBKSFLE2H4CwFsdQQ745IB7A1YsdgIxuISwZdh1PKeBtDXUM7DHoo8pg+oW3SpP5nDsw764CyDA==","signatures":[{"sig":"MEYCIQDfxlurKbYpMCknvF1I0uMgbIwdX1q51X4DUZajFDjNZAIhAJZp2iAa+sXjgW1+LS7atAdQaS2jrgLaCkdtbPw5yBRm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7zECRA9TVsSAnZWagAAmXgP/jlhY6QF4Q6V13tZGQiq\nIIWAUDXzSayoZy05X+z+UaF4xmr8oXaMlJGIKD61ZtW5xUAvaOinhLHkrxOE\nA0X7QUCzPHo397P85Vu0S2G//Itgs65Afu3ycbI2R5Sfozuc+ZVSlR0QiqGN\n0HG7V53koqpy51uDb0HxoEokGyJiS5GqL7IZyLHrQTpjjhq3od0RbXSw36j0\nWpZVYdh2ZUF6CALZl/61DLg3CmwK4mIFHPYYRJjmClO/PITw2x30EVi1mJs+\nPlDxG59+QdZPhp34IjH05S1Pge9DwqBBF0/BtG7qp5j9EHF65aErc99NOzAc\nNAc0gLn2jwvh494lZiMXe8JLsxtgN8Ru6/riuBfh7hgITn9BO1gVxuu4AMHa\n+2wakvXnJxwAJnPrfMN9X4B9nd9GUlGCpYLQ/Sa+ax6p866CiFbC7V/+8AOK\nDiCfCIaQgW2+Y8L3x9Ovir98G9E3RtsYtAVepCfC9y486ObxMZ+FKQaTqrSy\nT0t260hEaBa8qSkwnPlSk6IounByAqbde2bmS/gPyfG0dhKQ9hn92G7cBt3l\n7iSO5BxUP+CBEDB3zJcrH2mRCdJz2GM3JUbGtvZdpQPj1TjueCy3lYNrM9f4\nuEqbd0JN8n8cuHMSJoH+h79cijsDwOGV0VjFWB9kAW3gbXZu4UhcveLG+3oL\nuieX\r\n=/3Qv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.8c11ea2a3.0","@material/rtl":"5.0.0-canary.8c11ea2a3.0","@material/base":"5.0.0-canary.8c11ea2a3.0","@material/list":"5.0.0-canary.8c11ea2a3.0","@material/shape":"5.0.0-canary.8c11ea2a3.0","@material/theme":"5.0.0-canary.8c11ea2a3.0","@material/ripple":"5.0.0-canary.8c11ea2a3.0","@material/animation":"5.0.0-canary.8c11ea2a3.0","@material/elevation":"5.0.0-canary.8c11ea2a3.0","@material/typography":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.8c11ea2a3.0_1581497540362_0.04511295140184601","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/drawer","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.b2f3d311e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"605cb73456409e4b3ceb14b1564f043bb27cc72d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.b2f3d311e.0.tgz","fileCount":46,"integrity":"sha512-6mudn7VQs6k7byI+eXKyvNAI0DjKLPMpxrOajBxeqGh9WdvqpIraJktRhwsZbBlAXLQnA+dnLkFK7JHzIIVnzA==","signatures":[{"sig":"MEUCIQDqjSAj+Dm8qfaBRffFrsXh80saUry5Emf0cp6ZB40CXwIgItYll2ufbYXnIVex82w1r4PXum7LaBVKaVXrIqZPtdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":498624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcNOCRA9TVsSAnZWagAAV2oP+QFlP/YtG+RmWON6UKo4\nRO7DX8kB/wKKevieiADh1m2V5ltafSST+Lzs2HBz3GF3wd3fnIDw9fCsNLRa\nFpZog8gRc6bMRhFBURtS6JpWokTckPUOmFshoaTCocqZFzLVtSgBAd1mAv1M\nmWpay0o4P8l2jWEdUQrhJEmhGoBH0p0a6MFMalI8MIbEn0BGXP+vr+W3qd+Y\n/O2L+ibB3VLqFNtJTnbq3Q709G+Alb4j6+Y1O7DbFCnOpjRhCvUW99wJ/RbW\nWBOJHxdcBfX93XOV1gHh0LKLAElMiwy60VGU8Ff6zUeX0iLKYJOgxZ79XFYT\naZwTmZdx4yb7X9hp8jDvCfI6VrJXZI9QLqP/OjYzOyzCRu8rO4zsO6cJmrbf\n3mRCA08CYGgCt8rXJR3632fIUOJ9tNcsdyHlI+czarBLa4veRQ2nGFOmLZXy\npHp61xR7yehWXcGhrXf+C8asjMvmNIqLgD1dzsrvYVWUAHtf7jc8tO+lEeu/\nF6b7TzV5o2krncaANI1rOSYMINLcSSXD72wNrs8chlTZjViZnLT8AIm/Os2e\nC0EC+HsR/3RHzRbDt2I0BGw4KVF9EG0748AxqwAoEByQTJ5vdmCtv9QTTMWJ\nA9n/d/U1Do/kCXDomHPl8v5nwbvzucbOhDFse97plOKYw/Vd+uImzSTAwI9n\nfJvy\r\n=qAD5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b2f3d311e.0","@material/rtl":"5.0.0-canary.b2f3d311e.0","@material/base":"5.0.0-canary.b2f3d311e.0","@material/list":"5.0.0-canary.b2f3d311e.0","@material/shape":"5.0.0-canary.b2f3d311e.0","@material/theme":"5.0.0-canary.b2f3d311e.0","@material/ripple":"5.0.0-canary.b2f3d311e.0","@material/animation":"5.0.0-canary.b2f3d311e.0","@material/elevation":"5.0.0-canary.b2f3d311e.0","@material/typography":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.b2f3d311e.0_1581630285942_0.5651449939266437","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/drawer","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0-canary.4f488d0ee.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c31d2e7c4a98a4e62cd6d2c74fc48eccf444c5f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0-canary.4f488d0ee.0.tgz","fileCount":46,"integrity":"sha512-MGnkU/F6AaDNASVT62hJZod9GVQ+Hg6aBjLSk59yEOk/qWEuLtJIfXoABrlGiy8H8ryK1tYSFkAvPFmEbmIdsQ==","signatures":[{"sig":"MEUCIASTV1He+17FUqMR1FiAf0HDF37p1NWO0xqqqom5U15OAiEA9H1g/1BlzerJ4Kh50vC+PeXmPzp0CdpxAPXKxL53WSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":498624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdaXCRA9TVsSAnZWagAA8AkP+wdtpMNRoIkEGSK2DuVA\nASEg+7wigqiZ5BYOUuqPoliJbQBTmBF+hd+DEH/0WlydAvvLmNJPmpP9W5u7\nfGuZTVjxCRwAY56Ngia7fwYknp+5M+pv8gAokjMtOkclAe09JXV5kdFv+l1w\nrgxIp2tvUSjEMJJbYeu1yaQRtD6nHzWoL/HZnfdRrxsonuy7NDvLWMQsAWB+\nlpOBsDcsndk5zx4eN8FgFTqhFeC2jcc51PU8Q+pMILQ+wNHFf8SIM9QzTAJu\nWwh2XyhptMXonF1jko1q60V/1L0xRmohGr1b3N7eFaAoiZO3RVAmHC9EpRi7\nxKz/eGtcmDPTZQ4LYCnbvYkPxHBDpqCNAGbVnknW5a4U2weUwH91YN21FlUV\n9y75CmYYXpx+8etkdofg/lG/XlM/ii3S5tNm6zBcQs90CkU0TLo1bheIHIT/\nQJhO2iUShz0wBHbSzM3LJmxupqJ1dc1IXiBCS/emdBFUpkEIYE3jMPUe7F6g\npUeBM+cdOYsjrwVyCeT+8szsCOv3pM7fiGSc/UFaNCtmsOYbquPZ+EIHKABH\nI5qB4RzkfI1mmcpBXp8Hv8C2kZZ7DZHleJmZ4ATt9MoARlFEHlM958I+nNVU\nWjB8JxnkXup6+jPnBBPUFTqvy5typ8Q57Yce0XXtlsAeL0UPDG+fCC3bXaEn\nA3FA\r\n=bwO2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4f488d0ee.0","@material/rtl":"5.0.0-canary.4f488d0ee.0","@material/base":"5.0.0-canary.4f488d0ee.0","@material/list":"5.0.0-canary.4f488d0ee.0","@material/shape":"5.0.0-canary.4f488d0ee.0","@material/theme":"5.0.0-canary.4f488d0ee.0","@material/ripple":"5.0.0-canary.4f488d0ee.0","@material/animation":"5.0.0-canary.4f488d0ee.0","@material/elevation":"5.0.0-canary.4f488d0ee.0","@material/typography":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0-canary.4f488d0ee.0_1581635223062_0.6898535243379396","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/drawer","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.fe79de07d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e30d56b1f0e6b1ecd5c35513ab3c705ae934105","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.fe79de07d.0.tgz","fileCount":46,"integrity":"sha512-PnEe4i81TA0/RGD9CUiabwyIBYUpYu6AiK2IHIJE9essA+o7AXSHs4HqxBbMh8SZLBWUZVb+TzK/rBNMozwS3Q==","signatures":[{"sig":"MEUCIQCA8FthG5zovolLtEx1OuI23z+PJ5dSBIhxU9pzS03OtAIgVlJVG7qm7TKjWcAmuSI4DyEOozgpCieB6IfUvvLf0SY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":498624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdqrCRA9TVsSAnZWagAAZ/YP/3JDgylRD/ifiA0Gh+NO\nnOqfFzisJjtsyZCLBuBuHDOc2cgKpVYmrCeLPsfkEt+DGbHPO1LM9R/rYVLK\nox8i/yexd0hFuobARhcjdR2JNYQXiLsyX0XXsXfPkpjhA7bUJ4XNDlrpGeYO\nWDWGvprV9KGHmDzs8JhCUw677bnMOKY5pliiy9an6nkPLxerpGTVPkjAox/I\neVBiydVKymV12zqGsk3In0hKPcyJeXvZjcLl1BS6pZJpRDLLDj2aSK8ZE+un\nES1E+QmiPuKBWEQrCyGAuWfi0MUzh+f+wRl4zvbu+z14vwO5QF3fEq8KnwUt\nGZ85mJTxBOw5LULvI2mFfkrUjqp4S+TAbVOPNn0YmzHFV1Yjke0HAHlitumG\n8+S5G1yfmobk4XGpZf72HP4yHxlHW4l9oWubfOZWWpy5mpmFQ2gDJvpUrrOK\nnPC87oPtlnZGKOIsozIErfwJb5gW10L+dbLkFBVLmlQTpUV4cxo+ecVeWkO9\nh8WK+DQq3EyX8dnOTvIUhoqAQm1ij/OD96WzaAmz5vUP8W2Mw8Ve71Vxz2Fl\no/xUnn8CKXugLm59XChUrL29LF3AsX81rTFMW9tvdE1QQ3L7fG1/Kn22M1yO\nIR3YHh26RwsvevnZu75ekVmfwPmWSMnsSGAOfFiZjNdZ6RMhfLtDwDiBuY42\nnR7M\r\n=I+qi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.fe79de07d.0","@material/rtl":"6.0.0-canary.fe79de07d.0","@material/base":"6.0.0-canary.fe79de07d.0","@material/list":"6.0.0-canary.fe79de07d.0","@material/shape":"6.0.0-canary.fe79de07d.0","@material/theme":"6.0.0-canary.fe79de07d.0","@material/ripple":"6.0.0-canary.fe79de07d.0","@material/animation":"6.0.0-canary.fe79de07d.0","@material/elevation":"6.0.0-canary.fe79de07d.0","@material/typography":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.fe79de07d.0_1581636267396_0.3448703645767086","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/drawer","version":"5.0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb2d6d50f9c91d88c7ca6d0b7d107c75925d574d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.0.0.tgz","fileCount":45,"integrity":"sha512-BFuncL4m8CIutfUwHh6Cu+J9mYTNx0Sy7wocCyLDLZa4BlwPhpp/E3Dg8FlJTvBVsSruBw2xCrCrRU9RLtZFKQ==","signatures":[{"sig":"MEQCIEmErnfgelVgS0dbkkcKTPnSOWcHj+ysNxjb0+ueLOT+AiA2hos9FNZUiWENz4MiDnzNzpNAJdM50dM+AZaaXigqvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReVDCRA9TVsSAnZWagAA/FcP/RcPDJPaSi5MkYa/7QSR\nAUEqI0LxXYnr/XER4kJIxGHgI2734eSCcHgaOYYPUJPUnWnTu7AiFt+KrqMm\nRyXdkFG4baFiQ1fU4hGBQi+R+W6Ld3cBQ8jJzg7K1VvtWH/IqKwL8e4knLT6\nKreJ78CAdg8KY43j8YKU2jhUsx0flGgyX358bwBUTw+1ZXSAvkcl3PakIfqu\n31qFb3WjGfwI65TCs2El0SRS0wipoG4pvJScFOtt+jBZrVnaZrLrtlkT8c75\njUeL+FHx2cKYcNLrBbFuFJidzYmMYLHybhUCTubt6JyCSEBqCeZOJYrUUFZ8\n2irbTnRDf+8YpiXKIz/RnurE8dWBt92hLBaXq6yhxKhpFhDcteSRIjqWwJx2\nHNp5zrzlHSqIkGKuIHmt1QMF7nYwrii/xSWL/P4/uG0GqI9P6DYbO1Xf0PA1\ntCNZrZw62FWSLlC3W2ehONDEmjh6CebPR5/0lXUpmAvP7F02iiIl1f7zJeun\nqphf7uXT/cb0T29VarpugEmT/uC4gs5mWeVCF6TK+EU3J9YzUZkU+fnknBKB\nXGx+Is5WOwbyD0NmPQdlZaFvChcbQYlmqFHADZXs6eZv9duyydba3L+seyUA\nymira5pb2Nn1tzDxyvoS/++ZXOScucIvnvKi+87kEbMqi4OkB4PcMVhru4YF\nxPG3\r\n=yCDO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.0.0","@material/rtl":"^5.0.0","@material/base":"^5.0.0","@material/list":"^5.0.0","@material/shape":"^5.0.0","@material/theme":"^5.0.0","@material/ripple":"^5.0.0","@material/animation":"^5.0.0","@material/elevation":"^5.0.0","@material/typography":"^5.0.0","@material/feature-targeting":"^5.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_5.0.0_1581638979030_0.7087285607461806","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/drawer","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.5e313b1f2.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10af2a8eeecce1fbe1d66de471fc56e6d8aa620d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.5e313b1f2.0.tgz","fileCount":46,"integrity":"sha512-aeBVYj33/vJwx+/KtGXmsP+hB1KlDTH2LFE7tT17PefNKv5hIxnwSWmz4D498DYmkhrYlGXuey9dRDypnycH0A==","signatures":[{"sig":"MEUCIQD0IvSuogAF/DIH9yBdak+AKvhMfgLphrxc1ll6IaSG4wIgWL9up9LVYIvgzt9IC7oTGj3U+jGizqw6fkQUI5BAuj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzHtCRA9TVsSAnZWagAAJFIQAJln/r7Ve9MVEjeZu0Ky\ngHmOd3EUFvExl1RyW3rJRt63vgiReOPmiOon9cNsNTA+oBHpLyuczNjASsZc\nhP1aHtJu7Oh6dOhW7r791Vl1ds9egBxTZrjoE3OhETcID9s2rFMayZ7+Ahn/\n/rQoZEJ8WEcEXWurxOlpbbHSAMktH8m3McF3mTCXP1DaQ4qkZ9lsg1mgDRQT\nWTKVyZoxBu2r04dXClydYhV04eMaiVcGNM4E+WgEzICKwmYvsU5m5a4DxlOJ\nks1RZ5WYOO1pGTTW4iNsntxeMgi+SJWKDktaZ4nz9JVMqSnF4/ebRoCBksq8\nOKINgkPqUXjKEDsRv93s6l6LlpGdJmGs/MVtR95Y5WMbXjST1IHRDKECX9MX\neNkgWk2Nr6I00MQerudCv1Q2GJexLAC6Kj8LcMAHrDnmvq2MgiypJxM9QQGo\nIpftDggN4ANdabZU9wZkMajSt/8oFnuQNQVR2HZz24mfu3Vks+z57nGNzKe8\nCmb5nYHtj6Z15ZZONFz2+uLF9j4BK5d9v/YVnnccJJypGGFNLaa9GECbg3kH\n3T9cd4VIVXtp4TuT0mTESWsy4BlR94a+x9K2iIiUAQ586rtfz4ozMT0zi/Rb\nLbmiqpZIyn0BqBKrqaPozr9gBujXJlK7KA20yd++J2CZEYBnmPBZCtrkjKa5\n0Y3r\r\n=5SQy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.5e313b1f2.0","@material/rtl":"6.0.0-canary.5e313b1f2.0","@material/base":"6.0.0-canary.5e313b1f2.0","@material/list":"6.0.0-canary.5e313b1f2.0","@material/shape":"6.0.0-canary.5e313b1f2.0","@material/theme":"6.0.0-canary.5e313b1f2.0","@material/ripple":"6.0.0-canary.5e313b1f2.0","@material/animation":"6.0.0-canary.5e313b1f2.0","@material/elevation":"6.0.0-canary.5e313b1f2.0","@material/typography":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.5e313b1f2.0_1581724140571_0.20915312223619242","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/drawer","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.6a56f387c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c11ffb8860a3c63f55861fb08afc01e06323c65f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.6a56f387c.0.tgz","fileCount":46,"integrity":"sha512-wT4jqORi9LbiqZTu0w+kjfQvgQxrr2U0QriLv6q+Cb51WcH6NGlIznZI9OVccT8wn3BDS8V0orwR/xoFmWWkYA==","signatures":[{"sig":"MEYCIQC/swW40LlAWwBMmGaAWWXFgMiYU5CiX3lecxfwNAQJ0AIhAKiQtBcaQLN2UmuFV5hdmCnkaocjqiaDly5CQ4mHESlr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD6fCRA9TVsSAnZWagAAW7kP/2hTE5O8QIpGd+qKUZjy\nVVMESsEhsGmAEGzpm3kGjlWikrecpiD7npengwrTLuZdRB+tLfdeMvsJ7qz6\nYBiIPMdN/BW6jUF2BEYsIZo809pGShbH+fyW5ADjHt5YC4wj1MYKqOdlrsCc\nkHF329bIhLdc0l00wA3RVx7lxKSMvMRNL9OsFES//ky5B9EbHz8wR7M2xZ9l\nPqHyTbkCRlGzW1xREiDVRJCxGI/zp4jcQcegHJyxC44mU0DrThNgd3oeX4+0\nP8NF10xzbJYrwP4f+B3IONZk+loebDlkfHPskA8CBfhGUwc4jvWqrzUm/hHk\nH1okAjGzg0KY0gQj2UxkRImj1WNAjWJvRln9vF5h0VqCewqcocsPepV2D6yH\nLdYc0dkPWskpeiuSHSWAc6nD34imb6J8xttx6Eu+YndXy2OfykX0YboO1gsk\n8Usu9BWbmUrh67p2i6CQKRS3tQwfY7311KHU0XDJ7Y9LX5dfpcjedMHcgomO\nILq8URDX2peOT11y5dup1spYmkODyBG+Ce4u97zglAO7Rgk4XrXo5bDGJ05I\nLGyyXpgYRyxYKhYjL23HWJ0DuyYHuj0SAjxjU3PbTyJhqf2K8ejepHL+g/1J\nLRsRRecpWQQ5TAXcbAfPtGbG7D9Qn4DYnK8dFat+RmDXFOTPCem93eB1RIAa\nZP4d\r\n=jBi6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6a56f387c.0","@material/rtl":"6.0.0-canary.6a56f387c.0","@material/base":"6.0.0-canary.6a56f387c.0","@material/list":"6.0.0-canary.6a56f387c.0","@material/shape":"6.0.0-canary.6a56f387c.0","@material/theme":"6.0.0-canary.6a56f387c.0","@material/ripple":"6.0.0-canary.6a56f387c.0","@material/animation":"6.0.0-canary.6a56f387c.0","@material/elevation":"6.0.0-canary.6a56f387c.0","@material/typography":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.6a56f387c.0_1582055071021_0.5170213253799414","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/drawer","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.bdfd52632.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"704ba6ef78a215454a6e63b09b5d3ac59dcded85","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.bdfd52632.0.tgz","fileCount":46,"integrity":"sha512-NBLYYM83OVBRnI22BoRu+2hU/UyKEohfsGSV6FmC+D910/hzlxWdt53V9hkfIc9NX1sI0bBV63khovHkWRIxGw==","signatures":[{"sig":"MEUCIFR0QLxA61A3ks4KTbLhOx3uv1Kf8eOCHlCzFOt+17jqAiEA34YTvaKHcYHIy5OUJXfqFNrTL7IXYUbbSDMg5IdP6eY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZk5CRA9TVsSAnZWagAAgBQQAJ/IMZibjuEFHP/NDM4Y\nif+z087SwaehGdfPL2IHkNTDwyeq2GbslQm9g3/qI2DOrtpN1GGpG6BGiuk0\nMTHGnxTcccaeyzv6J80rh6+CGlpe1IWMy/npUG/j2Bqi3D1wU3PSiW7n8QAb\nznjPuGQPGt3QXiL8KN5Zs31l5JbB7GbXXGJq0CLh0fBhfdCTrLDioso10Jf1\nf8dBQprxOsWX0aY9U880zpnlRDriGxst+o+PPCF2GdWP40652Cz8J3qWkvza\ndIPwq+D9mA8wxElhmey3/6V2irgBfciD0JAI2oxvoWpGa7WL1CyTkD+Wtwys\nhTTRZuMn6dU+SK9ms4F/TcA0vFB9knPF7uysv+AWrxgePLZJyyYFhH6MgiY/\ntJ6CYv/k4IjxVdQoweHZZ4ak4hewx9HVFsjQZKf2cfcUQoZWfydJhyHh1xQh\nw+IqrAXlMWBYsQ+GELjaJ4fYMKfDUsv5nMLkF0gSsTtyMLC/im87mrprN8+T\nPfQsq5Zc6l6qLAtjTWptAvGf3EQpkMt0GnaZhuGzjgK6haIL/bEY0HkFYr7i\nU2G4rKF/GISEcSGqDOlgkirQtiSRB+VzBJar/uv7Wc5axOcMRKujyxHaOKkr\nYdGhKgnzhoD0z3mU3wZnEU6rBCsqzNRwIRd96sVQSefJO4/J38cekozXY5Yf\nnlEm\r\n=oY9I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bdfd52632.0","@material/rtl":"6.0.0-canary.bdfd52632.0","@material/base":"6.0.0-canary.bdfd52632.0","@material/list":"6.0.0-canary.bdfd52632.0","@material/shape":"6.0.0-canary.bdfd52632.0","@material/theme":"6.0.0-canary.bdfd52632.0","@material/ripple":"6.0.0-canary.bdfd52632.0","@material/animation":"6.0.0-canary.bdfd52632.0","@material/elevation":"6.0.0-canary.bdfd52632.0","@material/typography":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.bdfd52632.0_1582143801006_0.03174720271385345","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/drawer","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.ad2e4376a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5167b1010b29c2425639e2b05c58f2a33b4e45c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.ad2e4376a.0.tgz","fileCount":46,"integrity":"sha512-fcnkroE1UaEH9YQgwm3Bzlg7O7zALGzJqKPHj+5e00gIIX6ZjmCdl7z5eGZaOJkAdJmt3VJRdPwDxgS9qH2N6w==","signatures":[{"sig":"MEUCIAVdVd2ffvHBGsEyTuWIPkJZPOsNbeDSGPpfAnqKgMs7AiEA5eJvHZMbwAHcZfA9CboUne2qeSbRuAjplBtV549ccT8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxNlCRA9TVsSAnZWagAA30MP/R4tLbL+QciuQ+KmT83t\neZG0I5JRMEcyvdmeNwjMSXwoOushZmkcwIDTXBgN0fBx6413xi7+nzfTyA0I\nRgZgeK1k3+flWOOtC5Bh1N1Yk3g+4pL7xDEeQpVRlPZ8+57ze15kwmDP+D1A\ngyBZiF3m5IPqZ1k+Gf4+EcUc6SO4SJx5kFujVfX4O6KgwfQp9dOtDdrLVlIh\n8QrW7dtLEHiHSmyP3s8rw2Ltp8ZYvScyVBgYsvZ73Ulrw2HZfwF/rw8M2LLb\nbIPTS3JFO+Sw1/TATRvNM+LEybiDJWcXrQsJixvUjM+VerQRQQqjfVSoblBB\nzVdt3YScaXv+mt9/o16Ct8jSvbfRPXe6/ZX7OPRPDX6NZUIuj2tpzd2tUL71\n1yLSKWGx07kNCVw2TVSx0/IkIOE8WZh2LSsaM4YWe8sYBcSi6pQEGTF5xfvV\nae6PF6rLUKVAqWUHC9YFVjktiQX+XH0ihlPGCP2LaElmPdGcRx8XQMSVt+49\n8WeBgpw/TYFxc1x9DRCr7/+YUz6vm6e8B9aGz05drmFZMihqb6m4E/GFzVcO\nWSt9UtqbsA/VMaXoCSW0HMX5IQ4lki5sO2vZy5QIuLMaB0tauW3s8mqg9brC\nUnsOZyqqeJbYbFAqx3kAC4xW/EYbS3dxjRWfYuTvYuTRiv+iG4+Oi9ngh/3/\nNSr+\r\n=HzFb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ad2e4376a.0","@material/rtl":"6.0.0-canary.ad2e4376a.0","@material/base":"6.0.0-canary.ad2e4376a.0","@material/list":"6.0.0-canary.ad2e4376a.0","@material/shape":"6.0.0-canary.ad2e4376a.0","@material/theme":"6.0.0-canary.ad2e4376a.0","@material/ripple":"6.0.0-canary.ad2e4376a.0","@material/animation":"6.0.0-canary.ad2e4376a.0","@material/elevation":"6.0.0-canary.ad2e4376a.0","@material/typography":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.ad2e4376a.0_1582240613150_0.8471518872571886","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/drawer","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.765caef18.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49d0b99098482ab09fc51c57230c8e7e56be2bd6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.765caef18.0.tgz","fileCount":46,"integrity":"sha512-09UtOWh3+PJs43nafHVH0jGQw+mAup5dNOJEF1YAktfRI+JPh/iQ9WWJ50wuQoHn+SRYrNSqFIceZkzDldYwOA==","signatures":[{"sig":"MEQCIAR2Chm8gl8lN2exdrVuFGVWAGutl78YnA+7bId8q0HDAiBLXglOHZ669iL0iKbkRqb2SjB0enL592152TzwmbvfTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBR+CRA9TVsSAnZWagAAMmwQAINc99bT1UAfk+ruioBG\nOamCMZ0NUQuhmINSqNfyQ78ifYKidux1HlcjvaMTkAu7CB6QGLxfKqJFrI+b\nLJglvpYrdsDqAlyegCj2S1ILrqSPI3GoNyYpnkQPLUBNmP+7ugUVxJu6XHUA\nTQoH8uvc3ZDkulKlAJunEaiLtkiAu09p8N8HuotZMO+Ybp6Ru6SzBf9QQsV1\nXJLw/b/TL37iqYZanN1/nbB0jA9xLNaMmZtdA1CiQiL49dbIa8ggo8tEjjwc\nuQEdymcOFSRHCtNduLP7RpH9hMbn7fJuIAEtFeTBftdFlWnbtdjK3w/3TjTi\nkpTTDzmE+3FZyhMcqF9S82/yLGRR1chhp2o/GGgIHCJS/nco4XnhOQMeBuzn\n+d416Dd6ZqtM0+9GbSO3aDaMozfuKrxYIN+2bOIwr4jKNs1TZooZ/mFt2gLf\n5FAomVRC8AKWiPYfjRxommj+DKRRU/so3Q7KqWTZo/9y3wfhwOOqFtPDr0CY\n6xkaQ52+94NcETwurPjE8kOq4VV8JjcKRA/+rKApFdQYruHpITFxUBGcAZIe\nR/2BNXD6fFhFxhfbkSU3DnDQ/QVY1P9W172tBjunSY7nj9JNR/tkMrXt4ItW\n83AbaJIzU503iYX+Rm2/NBOERAUu/xnljVpoup1U/48NRHrNBC5m3FvbwnV3\npKWR\r\n=I86r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.765caef18.0","@material/rtl":"6.0.0-canary.765caef18.0","@material/base":"6.0.0-canary.765caef18.0","@material/list":"6.0.0-canary.765caef18.0","@material/shape":"6.0.0-canary.765caef18.0","@material/theme":"6.0.0-canary.765caef18.0","@material/ripple":"6.0.0-canary.765caef18.0","@material/animation":"6.0.0-canary.765caef18.0","@material/elevation":"6.0.0-canary.765caef18.0","@material/typography":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.765caef18.0_1582306430121_0.49510950602525017","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/drawer","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.949562303.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dab7b27659310a3b0527c0789feb7aa86acd452c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.949562303.0.tgz","fileCount":46,"integrity":"sha512-ft4jRfj428T6sMSrBxjp66CPy/TNrvaea0kaext5wTrCJxbslecRhVrnHqS9RXEUZ/YEEk1plbmJsSCRf/0JVg==","signatures":[{"sig":"MEYCIQDQMvSwaXqVvzNUBnavnU03qb47ppptT7KvzTaDAaEVRgIhAK+nA/KlakUfqbZyCW/UXzOmL9oF73q80NYMKNe6tZxV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD/KCRA9TVsSAnZWagAAlw4P/3rrFWODsts8HRiq4Wlt\nJb93O6/s86PFmT0nXc/Cdoi/Jcyid/28ydX4qYyTZQfirDPFwGbq5VGNp37h\nIIfvm/YYRN5gQxzp7UwWSd7sjfeycpHzlWBeUFmxNP1/va79TV7p6Jrt7bvb\nYDHCUorWYfjWEhvKexmNRjjFqpnTltgNt8pwK7FGXSpCgpZ8l3wjCr0ZBgth\nHhbLJRtl2VtpvVpngKI9mW6Ws6rI8fodzoGnzvcJhZJD6cBj8cFgKJS9B4vX\n3/vUBf/SDgvLHG8yiTjbOGoL7cB/yPWq06LahQsoZ5jCA8b5HO+R3u7Yj1dx\nAvKop3RgFNqJg6jfm1DzPTbGmMYczpf9Klr6opahA5dtVjcW44Z67dywSYbK\nRGL4m8tSZOIciIrUQ0h5mpxyWQrXkcXifHnXlOxVQTrKr7lYChFt/u1xlWRi\niWQiEgDEVnHIqItXByqJgEwqUX26nzXVpe1638cdOEO2cO5B1EAHmDfFoRdG\nTnWf38g4zz7wybJkXJ13Tf4oOrSj/DXgrQ2HeRU5TLnTtkML4QzPMVhK7DX2\npdKH2gEB00WRtnjsRlUTvldM8mjiKqyUjzbRBH2qQu/e921p7EFCfPTK4vLT\nHEotApsJF3Aoafx/2m0RS02iHAYC4+5EI9L6e+aybcag6adVamIzwwJFWr8o\ntlOT\r\n=ijFq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.949562303.0","@material/rtl":"6.0.0-canary.949562303.0","@material/base":"6.0.0-canary.949562303.0","@material/list":"6.0.0-canary.949562303.0","@material/shape":"6.0.0-canary.949562303.0","@material/theme":"6.0.0-canary.949562303.0","@material/ripple":"6.0.0-canary.949562303.0","@material/animation":"6.0.0-canary.949562303.0","@material/elevation":"6.0.0-canary.949562303.0","@material/typography":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.949562303.0_1582317514144_0.934445737114288","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/drawer","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.7ec96974e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1a0554817030e1d27901757fb3962917ea3e672","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.7ec96974e.0.tgz","fileCount":46,"integrity":"sha512-/wAm6IsHFOB1wyIRltLarI3L/tbI2sAc06bknscrQX8xrknFutmO2kHzIgwhoLQfr8aheeCo6gcXNneHlD90Gg==","signatures":[{"sig":"MEYCIQC8i3lZQsCPPjV7T6VcPmUEWNVuXr1BPSt+watWZmDBfQIhAOQtA66yyijKHD482KKrm3P77y/KTVwe9LUj94H30CMw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBzpCRA9TVsSAnZWagAAKVkP/ivaRyhT+XMwqk/b8Jg/\nVLXrD5vK5nK61Ka1YnQy2eI5lD4e0i0BZUmIKJhE6N0dY9WBGFuaEC9pa9HV\npEfVtHGAMp8EgqXsoumxaS7Wz+xLmWllnxmmY/Gzivd9+TtjzwpRhq7vu+Ld\nNirgSx+c9xD9KXcloAKn7YK2uTJ0TRu7YSVOxWbhCiOky9VaW5rcqqQazJ/+\nDGDfjcXafKmaSyWKKGFxlIvQQjIsozlvZEepoPbt6MpZfnTpBLVclYm5HzXJ\nrviQNnmw+V3+he0SWOCIbF4pRv0gFIxv0gA+YwYmIcfiFXRgt9q+UFjkehdT\nn1syHWkhIns6UM0QECgotKTMxFbWw9HX+NT9BqscmnABeAgINW6MP51D/UzD\nfzGMjbIEQ51vbl9qPXaH1l+v9khSRkn+J6VaIZUHyKBrmYz0IGHUYZhM963F\nUWuVJ6HBeluoP2c7VS49ZbyfIxcyhjPHQtk3S5s5RyOmf9zoj3KlyJurt1Uf\nV7sl4SCfdnr3GrGiE5mchUZYzB/fVsCuLXkuxNXJL06AlVG+hEwKTGpFsAeb\nlA4hkj4DLIG1CF1H6chnbHvd/zX/wZHc4JRGZJYD5wOCh9gdJHqnKixHtUs9\nobpGuPNLUOg2vT6KsZsiuW1oPm/7x0aqT51q2qEeXUKTy0O1xjrfid1YqUtx\n8i9/\r\n=Q3i5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7ec96974e.0","@material/rtl":"6.0.0-canary.7ec96974e.0","@material/base":"6.0.0-canary.7ec96974e.0","@material/list":"6.0.0-canary.7ec96974e.0","@material/shape":"6.0.0-canary.7ec96974e.0","@material/theme":"6.0.0-canary.7ec96974e.0","@material/ripple":"6.0.0-canary.7ec96974e.0","@material/animation":"6.0.0-canary.7ec96974e.0","@material/elevation":"6.0.0-canary.7ec96974e.0","@material/typography":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.7ec96974e.0_1582570728884_0.6982034155186543","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/drawer","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.265ecbad5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0354c24764d4e81023bfd47c9eff8626dc039b3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.265ecbad5.0.tgz","fileCount":46,"integrity":"sha512-4QTIxdPDkEpg8H5+Du+dTbRYTV7htg7RoZcc4x+qO9KXJxog+kXINNjew/+EuAcUOdTqkr4Zynj3iGCLWj9LHQ==","signatures":[{"sig":"MEYCIQDqRQXTQfAD64hjF/J5jBj7mY7mhjhg8cURjhhh9SxR5QIhANpOBi+jIE+T4L5gjy6MTZ+OwpYVRzc1sZpJ5OqR08VL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYstCRA9TVsSAnZWagAAOtYQAJF4rAI4VHSmcP8Kl2TG\nngpSuW4mr08jC7YecRQXeC+0AfSfp4uHFKShmoL3HnvS3PUWAbybtzBzjxeW\nn1TqNxc8CzGV8qyS7agMm4A25RsCx91PAicUXJNPWDUQynP6vHN/OXKusIsn\nFOVWDHCltJpPRA+DrTu/Rh6jfQoos1L8ERJPDFfO05TpTzWqjBWNxbOe1S2w\n/T7EssSqLT9UL8Y8XCVO+SHMoxT9zVtEa7xP08BqyBiH3g7oiDIb8H+ttibc\nizRSOxYGc8IQ8VxXgBM/IVW7tGHufKVI9w5wbybuMrks4fZXM9jPUCupidDr\nu/Ve0xGBxxWc59Zcuae7JRMTjXoJh74dHe9z5xBsDEbNSRgpaDkofNc6ugxY\nvJLQN2MmV7N8/O7gwoVxGzzsK6biR4bJDLBY0EGcNWmxiEfLWXUPVW72/VrR\nAlrzhcRdfhxHsszCDVCl0V1EYlZRA7kNq1wV4TIEqHB51i2GDBBuQivfNFOk\n6948HsA1xFHa7ZI3xJ+uvk2Hl2ZQrJICzuh3cYkXLm8l+K27lPMjGoBYxz7c\nisSV37SSCMSkCPiJhqc8m6t2PJCevBwfb1I+5JPT7fvaposoSoG6dAsKXeL+\nTEcJ1Vhyli1nMJex0KSIvEKOTtlh1y/iG7gO+BSIpuHyIOsXaDPrnS5nrlVV\nPkTz\r\n=OVb1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.265ecbad5.0","@material/rtl":"6.0.0-canary.265ecbad5.0","@material/base":"6.0.0-canary.265ecbad5.0","@material/list":"6.0.0-canary.265ecbad5.0","@material/shape":"6.0.0-canary.265ecbad5.0","@material/theme":"6.0.0-canary.265ecbad5.0","@material/ripple":"6.0.0-canary.265ecbad5.0","@material/animation":"6.0.0-canary.265ecbad5.0","@material/elevation":"6.0.0-canary.265ecbad5.0","@material/typography":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.265ecbad5.0_1582664493482_0.6874728932427037","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/drawer","version":"5.1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@5.1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"027a6ad85637b999b4301c9df09513c18d8b4269","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-5.1.0.tgz","fileCount":45,"integrity":"sha512-Xh/kYkT8QWWXkbCI25ys6av0wrc0wXRfvnRdH34Rz4sZvWC51D6apK2bxGr+AV/uR88zwn6U8pb9cccnr+2Eqw==","signatures":[{"sig":"MEYCIQDM9nyRE1HamoyLES0lODLXTr7ncJYW4SiWlAx6CY7XLwIhAOC/1XYRtt6iVppaP0Cdo1NBlk0ZO7uj9GkAvmeUThPm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPvCRA9TVsSAnZWagAAH2QP/1PSZK5ku3at2ilf6De4\nb9Bwt7aUuPjsgW4OrgDDUQQNKYnrIcsD6um/f4me8w04YY1XRAn/5srgTja0\nihWr8YgBBtSw+OxP2o8JMl4Wg42vRZ4kCrneweukfb0ZJzPCbAVFpxyJlLnr\nXJpJvtcvTIGrzh0nl7WjEFus4DXoVn4L7M/RA8twpON4OuX3IenEtEsRMo7p\n++tio2/TSOgPidGwq1tjjwllg0JW52i6p42V5xQy7CDIZcttMFJjFRh5SLnl\nRlsawMy7RZDdc1YBcWToFWSKP7PONk5LEPIkMZscPLUfq5XtO7kwK2BYOfF9\n/3EJoHqnIwOJrv2649l0oW8iABB3ccY8Jr+DX0WqhNhf1sheEtKAeKZWrPuy\nqHffAVLsChoql1g9AVUDmPI2M+SNW13f6L1+BEZm9SWl18v85b3tvqFMEseW\nlKmeYDNq8QNXTjHWBCS6dwvRVYU2NAFQhxSqg0UeroW+qUGRLN3b1WasGhHi\nu8u0cPG+PSp+dpHidaDBv6YbR2/darrI1fJ1bw3y+zKb00KHSnv4QSIWDTbt\nM0RZFxTEK8Pv5tNnUvLsJnc5iCbcbFLaU8qTCx1/VO0pIYBqPh5q3eGtuO9j\n1PqAlIUKq3eo3UF+oeA0+zummvL8RiJgZKX1JASsNGT+GSchmWfIZAFVjY+O\nYqdf\r\n=SWZR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.1.0","@material/rtl":"^5.1.0","@material/base":"^5.1.0","@material/list":"^5.1.0","@material/shape":"^5.1.0","@material/theme":"^5.1.0","@material/ripple":"^5.1.0","@material/animation":"^5.1.0","@material/elevation":"^5.1.0","@material/typography":"^5.1.0","@material/feature-targeting":"^5.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_5.1.0_1582666734987_0.0595993917854305","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/drawer","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.2cf87456f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c102fe363264012dc8160832e6e00f014d20218","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.2cf87456f.0.tgz","fileCount":46,"integrity":"sha512-Kw69CcjGDeZ8d9LgTTh90fKLQwO7xGCvgjG/Rl3SAtufvtuLWhyYpcXFVa2GBdxlTj371GUl3VxWhOOA5ydUEw==","signatures":[{"sig":"MEUCIQC2GWuczocIqKm2k3mCx9RjclurrJd/irxH2npFUoZxuAIgF41TpXp8VK4zgWUyPsrgJ3ydiyRNkVmxsl9PyLSuyiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZQUCRA9TVsSAnZWagAAYl0QAJWRQ/+jntFOTS+z08zW\nd6S84Is838ux1YK5g9uEowZ7Q5Hf5FhL5ycnH7+iuxXf89l2RQA9Ud9GHwMt\naSCJjAktFCGC7ailn+d9t8ymYRQZpALaoQ5jGQiG0+hu+Hww6oUjx5nWBm0r\nRVHazLn6nvNiYQIP+TNuw5uBophvQa+q2uLOlmsGvogIYCkbHCa4gxQvllZk\nGa22tEysX8KQjCPekYyyjNRfQHO8hbX2qGffYNig8IKa2bdjhZhlQP0vlkNW\n02DewJc6w9NxDn0V+S1l4znULzu7l40EitRnwSkyaY1rzlCM9JtEbkMB/w14\nPLkgyUnKWfUBsU0lJ36uo63ZK0WRigyG21JYP18g3qhN7czsibB4NXhya0pC\nXOEpV7+AVz89VhypRiJUvUSiR1QfvDEw285th//ik9kL1k6zNntzHOfqM5EN\nzRj/cPbbR+W7H9d/CKYhfQDW9kP5nuPsxHYW50mYNdtpou6D47fWx95oju7B\nZk1cykfz+b9eKRwsk0NHsREgaJkjF7A4I8HAEaEMuZPizoCXuoWlxLx3GBH5\nNWpSgirLEZ0M1kxOwf2CjvckjxRjL5miR8c/yFr7khJhv2jK/sSkPbRHuM2i\nhaMSkHsMo9VN167akM8TKHvKz2zT4P08u/kV1DnfWEX7oVC4JljmWXmim7B/\nTzIP\r\n=A5W/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.2cf87456f.0","@material/rtl":"6.0.0-canary.2cf87456f.0","@material/base":"6.0.0-canary.2cf87456f.0","@material/list":"6.0.0-canary.2cf87456f.0","@material/shape":"6.0.0-canary.2cf87456f.0","@material/theme":"6.0.0-canary.2cf87456f.0","@material/ripple":"6.0.0-canary.2cf87456f.0","@material/animation":"6.0.0-canary.2cf87456f.0","@material/elevation":"6.0.0-canary.2cf87456f.0","@material/typography":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.2cf87456f.0_1582666771668_0.8865914387902403","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/drawer","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.781434a92.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"404ada5e137b32b715187f1b641a12882a4330a5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.781434a92.0.tgz","fileCount":46,"integrity":"sha512-29puAqA7DIM6m9p7Ej9MHvCWfjJMbnz5Dj2rxEq4Ci8TRLLtznkjjQlbIGloOfgOrQ7Ty269vDvIBdYUpSv26A==","signatures":[{"sig":"MEQCIEa+eGiZcIlBdzmf9IOhdT8lOkclAK2VgYI8jsoHw5PnAiBu4BGrfGwfx39ajuJGQM27X3NzwTafF0F/jBbyO3fR9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa2uCRA9TVsSAnZWagAA5asQAIOTfXWMgYRbmvcHufuT\nbNso18ZJByWmxKR8c2zAvsz0Z+VTB8dj4T3a35wXMapS/1+uin0QO7v/LjnR\nZYmzmBY3LTff4LpsYkFPQPzeTiV7sFAT4IwtkdhAizR9esXpr5vrURT3+hSv\nivJnQhm6RqhNOarhcm0XF/zJnMgXS2aD0DcGv3yVkH9GeHGU/0ZmXQfx3Z6j\nLqFKHrUUeGcmhEZEYnqHNvAfqYw9FT0NG966rlBnd7xeYKpxbTkAXmqDkgZo\n4Wldz0xqggDyI4Af4r6pCG32RjmJh94uzFaMBlTda3EtcfrxA+T42S3QCiFk\nwbvik45iXSlR3ZUh6J0djAarMQbXBf7uG6G4aQKhHvABF3Uk7kIX8nILCsBU\nKy/UNHgwAPt9ZLYnxvq/eGghG9wWTn8QGXP7thsSokwgWKAsT/IB3rtDGqw1\nBU7AgJBN2DvcUdl8ZEkxpjkpQNUo4JQxZJYjCM0cNYWKcWpGpy6WQmh9RbNW\n6bhtp755FrhgZd1BdWs25a7zsrwgGpPbiKO57hMW4lQ2Yw6ceGLWX/ZKq4/R\n1WY+SrB2Uex/FYJwpOHXaM3WBq2xEjFoicoAvOyqcDOM23rMgiSb16+P1H+u\nZe2Uq9GuSjNd/8sXBkMHeoJvhtUMfQe58rGY1gObhjbAm97kwPz98VvG6gx8\nuiE7\r\n=vmJ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.781434a92.0","@material/rtl":"6.0.0-canary.781434a92.0","@material/base":"6.0.0-canary.781434a92.0","@material/list":"6.0.0-canary.781434a92.0","@material/shape":"6.0.0-canary.781434a92.0","@material/theme":"6.0.0-canary.781434a92.0","@material/ripple":"6.0.0-canary.781434a92.0","@material/animation":"6.0.0-canary.781434a92.0","@material/elevation":"6.0.0-canary.781434a92.0","@material/typography":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.781434a92.0_1582673326518_0.26334077706496073","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/drawer","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.d6f60c98b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd5528d8ed7b0022fcfa7ef54cbf37906e7ac8cc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.d6f60c98b.0.tgz","fileCount":46,"integrity":"sha512-x7Qo9rPqs0djDxlTkBwg0WvIycpIkLRJB5tf/92xerbyPijJDz9K8EBK44qoNjyOELefjaazIgSnCZi6mdOo/g==","signatures":[{"sig":"MEUCIQCXqaStQu2goJVFJzNU+KDCWBWjsyrKoMsn6mkb5MckhQIgbXZiREnGbKoEWeZ8jNXBv3it5NJAKPGJ6eCS8tSDBdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY6CCRA9TVsSAnZWagAAbMYQAKRzqkYq4mBZd8bbtja7\n6hDWqCUHUP8EpXhWETfxPFcm1iYW78DnWxNDI7HkwrMhOTLC7UY10mBiSGcW\nyeYqFQQzUZPykffOb+daTNeX1kDsM7tXwSieMp7cVLuD19FFzBFuywswbUgU\noGuc8vpvMgvgB2k4FuATe/0bzffBJ39Rkp0Vg4SY189QTKQaHyMa342wO63r\nL/N8KxFY7kQTRPEEVPziKf+1oSDJYPGN2cf1A6pu/GZuhNC7fPFe2yPctxRo\nm9xalUtK2m+Ihm4M16mWvVDsBE1TnyAwRY+mMnhTr9hrcRWZFO4YNJbKa+8O\n7cFmSTitXK4D+gleL19JqaXNh2Pmq2ZX0PZs4yZ2eLLQZpv7EyaXX1NKVttz\nQjlBJJFRjoJVFR+FMN2jrfVx6ER/jWEQiMlzFilWxiMLJXLFqWKXO6RyE9AT\nSAfcVbFcMB32Y5amBKA3HI+r6lNIVyNOGDOUS7XyfrNCtorLzY7SP1P2BYJD\naY1pW8vz7f7qO9pQla68ovcVg7rTZNay16Bguu+tInmdzFSj2E+99c6JGZll\nYH1jLFKMAWZ8HzC6k/6HiOB0XvNzQhJjNAGIWq+EVJNyW6HUvbwv8SBLHi/1\n0mCV62kin+lYDjFNhrHN8AWZYIN64MoShamBAU4WgO2aalHHYXQsqEXMPr+H\neoNk\r\n=2RzX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d6f60c98b.0","@material/rtl":"6.0.0-canary.d6f60c98b.0","@material/base":"6.0.0-canary.d6f60c98b.0","@material/list":"6.0.0-canary.d6f60c98b.0","@material/shape":"6.0.0-canary.d6f60c98b.0","@material/theme":"6.0.0-canary.d6f60c98b.0","@material/ripple":"6.0.0-canary.d6f60c98b.0","@material/animation":"6.0.0-canary.d6f60c98b.0","@material/elevation":"6.0.0-canary.d6f60c98b.0","@material/typography":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.d6f60c98b.0_1582927489846_0.6057807703334943","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/drawer","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.69edc6e28.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2511885514751798761fce0dcbc8137a27160987","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.69edc6e28.0.tgz","fileCount":46,"integrity":"sha512-FiYqyXjWJPMLXglltISZUhrRd39+IPtMuQsR6LvYlSq4ciVSu8XFs6+Lr9cfP+1rJRJ+UHAgNFSigQ4FvYEpqA==","signatures":[{"sig":"MEUCIQCOST8CauzZCH2tU2NoujxoYeogX91uT4vMt8dbwA+BqwIgBbhvtNIM/3Vnynivbia/dmN8YJY2b2Bouwtvr5mnUmQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZBoCRA9TVsSAnZWagAANX4P/2DwiMegF0Uh4EiZxvmr\nTlpEhvuwtcZjpNl/EOgZ7Dg3k2iicYJaUfYZWa27cJXcwgLA4a36/AO56ZmA\nEvnde9VD8j9DqYnL96ui06z9PjD6li/QPh1FH0kRcy50wZ8kIDa7nhzOQnoM\nlYWYFsRjJkMirQhbVG6mcZZKLeFAErWFU09PEEx2PQEbbArg0Ly7EjPXKx6B\n9bm/yjYO4MH2EUyiAq1fj5f4LujMrszFbx5eIgbSAWGo1gunjm7i1/EIGU+k\nQsZVDxEVVXex+kFhQQQ3A+Dt7Bw8I7txD18M7foFdB2f6oWQjrNaKTm1EgXi\nGrfPHAoQeMLOzHbYYbb9qYrxrp5pHurmcxC83SFY0gC1rtSXA7dObdDndVBV\nmmkyB8ghhHph6kUzjcXboWunOYqT9UOlD/b8pr59lDd16WCcwAoTdgjZXE54\nNlXRBS5YDRNoiWpmRA4DGP9DjYzlRpgP99wIq8qdN1YQgxmEomJ0ZTKxF4zD\n6P91RK2y0PxuZDsu5BP7KIadY1ftF6OXwcXjkhJNTqS+OW2sk6H6SlURk4Xh\nlzSIn7QGD29ALP7whbV0XE4ksKqtfCyeVWH1+YfC30Idj5Iy6oHIFn78dZoa\nS6XTLxpKHXE5QnHvujYRsTiCOlUNWtoTN7D9bnPzlb7qRXz78P25lDe0La/M\n366e\r\n=+5H+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.69edc6e28.0","@material/rtl":"6.0.0-canary.69edc6e28.0","@material/base":"6.0.0-canary.69edc6e28.0","@material/list":"6.0.0-canary.69edc6e28.0","@material/shape":"6.0.0-canary.69edc6e28.0","@material/theme":"6.0.0-canary.69edc6e28.0","@material/ripple":"6.0.0-canary.69edc6e28.0","@material/animation":"6.0.0-canary.69edc6e28.0","@material/elevation":"6.0.0-canary.69edc6e28.0","@material/typography":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.69edc6e28.0_1582927976067_0.7999543882847657","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/drawer","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.9372e4939.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a971fe0a3fdc13eaa60eabe81141191f7406f36","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.9372e4939.0.tgz","fileCount":46,"integrity":"sha512-UQJ7PVZKUEGiu7pGNzvJX8AgAx0FgMkirRkMilwbMOY+ZB4t1iwAmwyUlyNfWSQh91U0DhbQfyghr9kuM/lbNw==","signatures":[{"sig":"MEUCIQD9yuK1CtTvCXKLUNAaRGfIWjWLzyU21zb3HQxA/9FbNgIgd8/RwefI7NnJgQuuAuzbm2ITPO5LSo704YQllQdVR5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqvdCRA9TVsSAnZWagAAkI8P/0mWAKPt9BFcDTyF4ASO\nXbwlFYVFffXlBvE78ME7rkA/RR1VMX4BXf4M1PQZf3F5Hsg+458gdp6kPeOi\n/Q5PDQoF+arNNbKEbl0ITjPB/LHAuzXtdTzDCLKMlhB1fCyfotVKHGhX8Xdv\nFS8NCKhK6lXz4jMoxUlffZ0fp0ggcNk/T18mn5E7r//mOpVM0/aNZXGd3wla\nCCuDDQzJG7y5MTra4SD28mdPy3AbU++p3rC8l5uiAI96M0UDqmebCvC37zHY\nc9k0VNzazz0uo7Fgd8KlChXS2Cxfxa/SnNzy5LrAQ7m+OUEseJMQFx0t5h66\nzauO6tSmQnIsAp6o4D8mq3nyio647qZOyxzvBGJKra3On6qbiCfri4/Yv/jy\nHjV67QfGf4nugt6A8Ie1DP8nwWZUA+h/8Db5MRvd4HsyqNnoyeR+66xHE9f2\ntijN5czf/BpNhQ3NOcwW50ih8JJeLI3hFc3dQC92kxs+8FphaCrdfbx3pQIV\nZ8XpPHK7W5I6p8cpBjOX6nigSBcq9xeuz0SLl5T2JniJy9WOo8rW0ECcyxLr\nKuwRRxrcKrYOqjXI3J9GS0ATF2XRPHCEz8H3hQZaf3Wf4B10eMhPRVQ1/UbB\nMSK/3tdPrrPgPOtAw68I4SfuBId2ol57fCSn3Ogpl1IQryI+EjgNgTu16/JQ\nLSqf\r\n=MwFT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9372e4939.0","@material/rtl":"6.0.0-canary.9372e4939.0","@material/base":"6.0.0-canary.9372e4939.0","@material/list":"6.0.0-canary.9372e4939.0","@material/shape":"6.0.0-canary.9372e4939.0","@material/theme":"6.0.0-canary.9372e4939.0","@material/ripple":"6.0.0-canary.9372e4939.0","@material/animation":"6.0.0-canary.9372e4939.0","@material/elevation":"6.0.0-canary.9372e4939.0","@material/typography":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.9372e4939.0_1583262683825_0.16348292652974772","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/drawer","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.9cf5e9842.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5e7e0ed0ecae00d9ef60e05ed8016a9ccff2620","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.9cf5e9842.0.tgz","fileCount":46,"integrity":"sha512-jcnbVi+t0c4CqFmrNRQnBNDSVIzTB+M+NGmYBBRy+Z2sdqjVZLOos0DaeU7hp1Y7yEU4XnSFcNdE6t7/d00gbA==","signatures":[{"sig":"MEYCIQD+rX4FLuBK1zg9TPSi+R+VD6swkJPfxvKph05KN6dqygIhAOtcoxvemgRCXAzUBW089EE7BJTTcgD/6b4h/pNjBjfD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXufFCRA9TVsSAnZWagAAVfYP+QCBch/K3BeuOgNvQcnl\nLpf8LHt1N2V9SS5MxOVAIfSsM5BFZuKzsg3wVsmj62Dva2gAytuaVZbhOz41\nhAxcsSW3YPfMub+2Oa2IR/LhURvN45rAVWy+8ntLLNH2z9Hzp5q4miyamqts\nae+252aV2yRY+1IjRVv9RZupvDlYMoxLMYws5354LVLNVg0sb6E0yP9hayb7\nOSMPbs5D3RZS2pupQ02GmQJyTzkX27z9dXTtESO6ua/iJV1kaFDleH0X11xt\nNCIfQfeq3UTntavlpvOGs08ZISq1cIQGQG4r7wtoDDvs4zlCm/CwACFzPub7\nSmX5JDu9qP8lR+R8XEo8Q7Rh0OTjxWYV2CQT9NFhInrQ4alAQdW+Mfyizf6H\njcRFX199gvPT+comjhStCubn/011krytoaE7w45a/xu8vkRYiGEYuoJF4oTa\ndAot4KNPQhzXioxFObPUoWnKHF7m9HuILsuvv6euLAFJAGH7wOJqNNgD/ETW\nTmRfgPsRb1GKQ1Vv+JBfiislDopxPtmSoA4935iK2ybvV8D93O0Sw8zyEtIi\nkuklMjJjxXo+gakXw4I6yncsEWRaJDZBUAueFgBh1UhZynwtnQFuQ4IgBdeL\nPIJxlGnhOvLv6lEKyAy46uS7gSLrVueKnfrazsk0mILR81MVucy4BZlSURse\nLpCx\r\n=ZezL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9cf5e9842.0","@material/rtl":"6.0.0-canary.9cf5e9842.0","@material/base":"6.0.0-canary.9cf5e9842.0","@material/list":"6.0.0-canary.9cf5e9842.0","@material/shape":"6.0.0-canary.9cf5e9842.0","@material/theme":"6.0.0-canary.9cf5e9842.0","@material/ripple":"6.0.0-canary.9cf5e9842.0","@material/animation":"6.0.0-canary.9cf5e9842.0","@material/elevation":"6.0.0-canary.9cf5e9842.0","@material/typography":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.9cf5e9842.0_1583278020658_0.7506167258099561","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/drawer","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.3657f8863.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8246501528114f4e0de71c8c8f2bfe61dc773f0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.3657f8863.0.tgz","fileCount":46,"integrity":"sha512-WJR1z1yPYP4ktlc5dfpUpQL7rxw5HNE2v99e9Ss4n97eevAs+BhvEYJp/95zkRSfr4p0TatFcMPcmFHtO/cxPQ==","signatures":[{"sig":"MEYCIQDOkfomA9I9SAX8snZ4Y5nZThZIf9DJoT0bJRB+BKL0bwIhAPyDkrN8yHZQJ8p5avoo/bSYveUlvYebENGbne2YZc+3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+kXCRA9TVsSAnZWagAAGPAQAIIGpopNuRYyFhYWV1VI\nO4zVZU1cyHyNnqQ+3WmnuXb5yhX7AXJEnbLc9ViZgHYs2impnRANt58iHMH5\ntlEc4BYLVc6CzUpkuZS5Myn6RV9D2wJ3HmqFlGACRnu42BndEkJTfzfIdqEk\nHMjoiW3NbXxNBtzs9GUiAxIBhj/TDzz97LHI0EJGZutncPO45v4LG2NPZUwT\nVDP7m8mLrUz4BoH4gESJFKDNmy22W9KZSIaJk+tRhvSo7gPGmqElu4lruTUf\nik+2q9xLqhOv1DgT/5Y8VrSJ8aY7Xc1W3Sx2btvPwYkidByi563oN0d5LgC2\noQJ/1hiPLUr+5KgIzlnjeVOuMcCa1YrM3l0EpPp87lSOsNtadH1ClDMwAB+N\nR+hj9bYK1s/FOuB58c5Uh75cCZwFXa8fXnpKC2weUSQsOiU45DsPqgUTXY3O\nLuYnI/8t2X4/mXJ4leLH4YG0USF0qetc4OjcO3SaoM5L6MIE5FEcz7+QW/tG\nxNWZeA+ZYeFY/BiyQHrjeq5BkeyicRHk5pbTY9elxXs3wgJ36hfyRVpS7KP1\nlWEDyvra3o+JKxBBqeYo1/DoRilCf+fz6mMwsFJ1cxJsSyzGwjy9Ni+36R3q\n1AVJP9pTvMTfmxyRUBODshPz08XCFps/OIDV1xtA7D5dkeKqU0lH9yx23DRx\ndK5m\r\n=vyjj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.3657f8863.0","@material/rtl":"6.0.0-canary.3657f8863.0","@material/base":"6.0.0-canary.3657f8863.0","@material/list":"6.0.0-canary.3657f8863.0","@material/shape":"6.0.0-canary.3657f8863.0","@material/theme":"6.0.0-canary.3657f8863.0","@material/ripple":"6.0.0-canary.3657f8863.0","@material/animation":"6.0.0-canary.3657f8863.0","@material/elevation":"6.0.0-canary.3657f8863.0","@material/typography":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.3657f8863.0_1583343894494_0.56847675681636","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/drawer","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.98b843417.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bb89413dbaa84da09d641314d13476de61c3eac","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.98b843417.0.tgz","fileCount":46,"integrity":"sha512-7wV+m5enOUG38eTvC4yU0FVmCbR2u3V8gIkJ6RzH7QtTXWLvPn1ofsQ2oSBDCgenXz8JOt/VKe+wRm3LKC+mlQ==","signatures":[{"sig":"MEYCIQC63LE6XPaWqxmgjtxiGF7wd4W+OpE/RDkTKMTPvUZy6gIhAJofn81FSkHZv5u3hxy6CXBAr4VugFEaHGr0DOtFLPDL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUWSCRA9TVsSAnZWagAAVU8P/Rwd9Fms93saXrSkYDb5\n9Y77tCQXBcyxxe/t3PtqIUXU4SkDsoyc0ijXQquj/E3Zz2buNk3lzfuN8kY4\n/t7BW0/5/pZWzT22r+n8H/EXXAtfbCyKgtjusE4thR6BQjLRX5FO/ohPgjhT\nG4kQbTx6nIvmnGmpRpMsmsYYb+lymMlmvERybs6Z7COI1B9dmWK++Qqvkuu2\nCIvDCw3y1ErSvd7volXZ+GnV/Oyw6XTlxLlxc79/y5qfXULuWFmNGm2o8GHF\nkYJirL5dTwTrtf650Pe/79yqtKK1jzKK83dB2Y7kEtnHLAVPoubeuZVv6jgE\nmsxCtwKVu808NsH2t5NQtZhsWI59zzCOfKTgG4JPvSjZ+GX3cD/UM2C/XGI5\n6BGl+Iove0h1g8gOmJZFNGRsCDjxmudAzDQKSvUC01ZOKXYa5eqSYFHTiomy\nS5PQR0uZNh8cG5IMaDS7rxD+QU6rnUCPlOFm1I55Mc6L9DsacjxOAjWLGLzf\ns98126sf9Zl8XfJgrZeqqA+ruYzHCH2SQUYGZ2isIP+z+sFc31USktlPN/cD\nnoVi4nZ9R/XoyU2YJevtX9EDTSVb0dVlut2mh2cwiKW8qijiRhOJggklhKtd\nsxHV6tF/yUdC6/j+1iBn4dPHCUbnXItRa8DOIdiRzLPiBqUfZk+OrFcVkXvd\ndZDM\r\n=7uN9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.98b843417.0","@material/rtl":"6.0.0-canary.98b843417.0","@material/base":"6.0.0-canary.98b843417.0","@material/list":"6.0.0-canary.98b843417.0","@material/shape":"6.0.0-canary.98b843417.0","@material/theme":"6.0.0-canary.98b843417.0","@material/ripple":"6.0.0-canary.98b843417.0","@material/animation":"6.0.0-canary.98b843417.0","@material/elevation":"6.0.0-canary.98b843417.0","@material/typography":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.98b843417.0_1583433105880_0.9838328844533022","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/drawer","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.17b9699c4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b91be33493837622d33226fdf3c6b017d586b13d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.17b9699c4.0.tgz","fileCount":46,"integrity":"sha512-pyj5hCvAjM0y2Yrziye2Gf1dT8zHbyja6gA+0gXp6W1dDvah0LDyDXryHPb/CGyr+jZWkDmEkG8VmIqKEu63AQ==","signatures":[{"sig":"MEQCIBRzwTO6Dqj6REPQDJmPFQv43CumKFfwWmsredOaLU3lAiAEEgCts8IO6sI+mDXkra0h2EewmD1bz3IcDrbHkBU7FA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVGeCRA9TVsSAnZWagAAQqQQAIc2YKLfmQ91I6EBPUyH\nQJefnQEsfOi4P3qzK3v62srZpnWojO/8u5oBt0w9C+tTzattsM5XNQpSJC9i\n/ZYBAtk4CZ5LlX1H5No+lSY+URcDyYkolIrZZe6bLMQSJpiiV9LF565UPYS+\nreDkSJOSfDPI7IuBvSmZj/7O4e7isnShujFeRHEaWjvQCDdkJzRyXcT1Z9Zq\noAKRv/nnw399dRFosewgQYb6mXhs1ZYWcQXgiK9QLO4AI25OLctCwpCyHgot\n50GP3b1jkVkQLNRs8CUwbb9PD1SlH4wni1ZX4HjWua0BnsM/YDNwM69JEe0P\npxg2LJia3JZFhb1lRJaeVgBnN+kTZmDq7W27Y0EX6HKaKzITvhxdz6v+flD4\nI5rZslG9t7s8+RXYflkWikWBZ87lPhEDGxKIDqG5eaaLtBkD3G+Z7e32lUdN\nQwmbbYi8VfceOxp02whUizSEbsXzgAhzbNvKnv+V9dhjSsdMlWPk/baBbu/s\nNXT35+AAoREXUbSgVpfjjcdVcsGoUiopDn88VSx1xZ0bpVZy7wys3OLaVgYs\nZ+VDRdIVQUeLRAs5zlXQvz5zKurkYh7eQQJCMzmU4FOdS7Qrti8O88URvSa0\nEBHYpVQ/NXjPR/Gk7i16///f5sl9Q5qb6nhXLXtycyDNmEVu7hBSj0PNoUpo\nPG+5\r\n=Bu8H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.17b9699c4.0","@material/rtl":"6.0.0-canary.17b9699c4.0","@material/base":"6.0.0-canary.17b9699c4.0","@material/list":"6.0.0-canary.17b9699c4.0","@material/shape":"6.0.0-canary.17b9699c4.0","@material/theme":"6.0.0-canary.17b9699c4.0","@material/ripple":"6.0.0-canary.17b9699c4.0","@material/animation":"6.0.0-canary.17b9699c4.0","@material/elevation":"6.0.0-canary.17b9699c4.0","@material/typography":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.17b9699c4.0_1583436190115_0.4240032902480617","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/drawer","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.6ee035572.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d6e542680eef6a1525fe0d20b09ca57ff1c7cc0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.6ee035572.0.tgz","fileCount":46,"integrity":"sha512-FnUSksk9j00E5djl4uCgFWNKo+PqwXI9KZwyw8+J+JpC+m9Ese/FykykAzesQUxvVxXJCCzbZugbs8Cv2Q/gvg==","signatures":[{"sig":"MEUCIE1VtMEipXA6MIwG8eJ5H8Oumow9nG39Eszka26XG72LAiEAnJPnB7BZTQgS/Oa5U8lM47aYQ7ACyO6jMqz5X2Mm7ek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnNFCRA9TVsSAnZWagAASFoP/inIW5QOgEfFLdlvWZUy\nqlcbZvSt8sK5/b1AOttmIt0VdfWSpohoT0SkHozjecUWooF06Yfi9R0UyxXU\nNj2YcaAqfRbc/svvOlBAp6wjYcNXwbDid3FES+ROcf/qxJDns/dmoYYyCNo/\nnHAcWPXLthyizxMJFnBDIzsEooBMYjxNcU9DHPGP7Zc3tdD+SvycHFGYahjX\nfaBGDG/mb1Upq2SHbUqBj0z/fvV3x41o+SRWPgTm4cFHx2CZT0nwh4EnIf1n\nGZOYPY9kV/IdOtNjbJJtIeTntSCjqFOueBMhiYaZFqGtA5YlLl9iDgF0S0hG\n1HmWb/IJQwKEgWZ/aSXB49fTvLeKq7kBGt6wSIPPLslhI3nZxYJeNpPjafTM\ntORwQY638/h+XebLNKvXJBxPmuyHMQE02k+ljXjaS7YTcDc6HvGeLMinNsdf\nMo2aqpNtaLkCkRz3WFlHUOweyBAzhahzxxr5uVMIdjomEpdjc5EQ4MXt7C4M\n5QgnIDjtTd7MC8EluRPooVbPnqmh7ZG7gojtVUvLN5TgU2kKBlMrOSSf4eSR\ne4BqOCifQo8GVric8BzaOVJwGqNwGxD7Rq6kLyV8JqPy2Xw8BBSdiSVOqy2L\nzJPQzM1pBzonjS0RG7OMm7MKKrOOx9V265X7vIgA/OUvcWajSob+JoLBGXGT\ndvIj\r\n=aH7m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6ee035572.0","@material/rtl":"6.0.0-canary.6ee035572.0","@material/base":"6.0.0-canary.6ee035572.0","@material/list":"6.0.0-canary.6ee035572.0","@material/shape":"6.0.0-canary.6ee035572.0","@material/theme":"6.0.0-canary.6ee035572.0","@material/ripple":"6.0.0-canary.6ee035572.0","@material/animation":"6.0.0-canary.6ee035572.0","@material/elevation":"6.0.0-canary.6ee035572.0","@material/typography":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.6ee035572.0_1583772484673_0.17864718183252326","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/drawer","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.bd33cb56b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87f74c83dd70f74a4030aa344048d138c8967e32","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.bd33cb56b.0.tgz","fileCount":46,"integrity":"sha512-zkMkQxk1FtlVnvvEJyRya8NVEkS+9qcAM8qkfl3OvHNCc3o4s+KySWoJmY6iJ36FWzJxXL/D0r+1+DI6E6noaw==","signatures":[{"sig":"MEUCIDpfb1uY8m6mpTw9BciceO3xOfgvjjEavq5vQCWBtLT5AiEA071PkGb7a1g+r/5ZYs3+mNj4meQfIkSVUJxgKilgy+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnt/CRA9TVsSAnZWagAAy38P/Rq3z0u9gL8WyN30YoRB\n+oGI70zMq9xh95IcCho3VaxXhNsEywri1ngVxYTtcRq/twqATuDbUhBz9Zd8\nc3r0Oqza9bWGNxfjoe+PvYGHDd6fEjs4Th1Wz1QAvR8/o7eKGIFrLIEa43lx\nBj51MSRxBLhXFTz9dPnH4hHsZTd2YPe9yQzS6wXeUYDnAsQx6PK4Gf1w+tDT\nhZr2a8/7h0NRUHenhF9GUGfnzdIXvQ8axeghYuD37qnDSEAgujAGlzmSc45I\n8fs9KEu4H2obq3iRsCl0xDKluAo70BoPfwuR49qcc24JBUaf0tDoNuquYoWI\nTot8+70mL/XWa+P3SlGDiOBD49ctZPMELdVTi3cOATEBtpLwlqvZu96GDW4u\nMLlQPxCpn92fzL7eHenOERFEjqrFBc2iWTiPLlehxmeM/XD5DnmDrByujLIZ\nNw65Id6wgbGqyu9a0502pRRlFvGudHiynjy7Mh8CwTNZRJadhZBFpWEMS5xO\nfu/lIOEr8i/IOkQbixZye8fVufLnIkyMzR6kbE9ddEcB8M0DaKT+hYUyHmuv\nbxdPQAHxRXb6gB9Egg6izqD/xjZwOBkpgCvynFM/1Xlu6Q6xmiJj3K/G+5g8\n4LOynGaPWl4RNVn7O5xr6QDvNwm7urKAIOtwRrQsECIYKMyWoVGUprTazaB3\nrvjq\r\n=Jf56\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bd33cb56b.0","@material/rtl":"6.0.0-canary.bd33cb56b.0","@material/base":"6.0.0-canary.bd33cb56b.0","@material/list":"6.0.0-canary.bd33cb56b.0","@material/shape":"6.0.0-canary.bd33cb56b.0","@material/theme":"6.0.0-canary.bd33cb56b.0","@material/ripple":"6.0.0-canary.bd33cb56b.0","@material/animation":"6.0.0-canary.bd33cb56b.0","@material/elevation":"6.0.0-canary.bd33cb56b.0","@material/typography":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.bd33cb56b.0_1583774591117_0.9559947577840142","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/drawer","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.26c049afa.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc7b40417846b45ce568bc10e2f192ad710afaab","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.26c049afa.0.tgz","fileCount":46,"integrity":"sha512-yi9eNm9lBLMsoDCmzgEFQFKI4xaoTEyOhbSeIRX2v7WTOHlD3p4DuNxd3MI2VNzWq+mTIXJxILyuXrHRU/xetQ==","signatures":[{"sig":"MEQCIHkhnUcI5OXF00rXraWBMuH8x2814BgSiFZIs/ohxA0VAiAdQPjiVf4NLB3tPR2A+wnvOk/6TA8Nf0yXLOfgWRdC8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8hiCRA9TVsSAnZWagAA30MP/2evyIVDsHKUrq0DaFQt\n44i7xnj5drNITlgfzPBZtWYJsVOJXd8huAoQW5acUiocjPcqN0ojuGq9Q5fQ\nkk9vWgF7VUkCJNTKGDaaix2uXype2P/fgbigbANoLMArDQMVD8SllECxubuQ\nUBoyCJ3mCArkJCqy/4yK2USHL0QULcu23KbG/RPDkmgRAW9Rx6tCTQdnKVSP\nAyqK479+JFLVlGvuyuP3Aol/JbFKXQMdO9sN8mVfdvF+niBEXagIMY5XKKmK\nFE0cVMR7Q1yRjxST9lE/Bb1Elzrj5gJuXt8LTo/znI6aGlqiWkSUfXo+g4I7\n4fTHopn4jCAkf/Ir2S348YTxvNF1xikEzBYjos+17WoTNWzQSP81cD658ADr\nHnYiepcgL6W3/YOk0amhGrXqNBijt5/LY/3wrQbOp2t1wpS1ZobwQq87smBb\nc6wno2BOeijrRsfpDBettonQQ4mM4CFe4OBPSi4ptZorRuViRjWdOyjzFGyg\nOkPRXPiHXjcdiqQEEaXVNI6Asod1Op9rxatUBAIMkB5mTOsxR4dFJGhDlPES\n+OMEIEZkHhDepo3KraoCsuf/OzaRLB50tL0nRnu1koVEIagH2Lv9ekHE6Oh7\n10mZ5VjzEH9o+91EtCE/MeMVbLrTw3s7Zo2GqDxNzZPAok+pgOvQydpNPANg\nLKRs\r\n=4LoA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.26c049afa.0","@material/rtl":"6.0.0-canary.26c049afa.0","@material/base":"6.0.0-canary.26c049afa.0","@material/list":"6.0.0-canary.26c049afa.0","@material/shape":"6.0.0-canary.26c049afa.0","@material/theme":"6.0.0-canary.26c049afa.0","@material/ripple":"6.0.0-canary.26c049afa.0","@material/animation":"6.0.0-canary.26c049afa.0","@material/elevation":"6.0.0-canary.26c049afa.0","@material/typography":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.26c049afa.0_1583859810150_0.17627544548102225","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/drawer","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.1db5c9fc8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d356d075579fe9433be58a4767912b54e0e31c48","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":46,"integrity":"sha512-ThyLRJTGgSIcqYqEgAoCRur78JjuV6yMkkHLYOgiSehMjE/WiiN8FHMP3m0VNk1CnVhrIy60sPvIUvvMjPHgFA==","signatures":[{"sig":"MEUCIQD9XoCJuQAr+YUI+aGyuHdhBjjVtzzm00l1U+Bcu413BgIgVyFdJk4fgDDUgqUPEELZotrR7E0ZZZEhhibXbNC6gxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/qmCRA9TVsSAnZWagAAd/8P/RYVv1BcdYYYyayRrQgh\n80hTlLHfjKL5Yg09hfn14wcfsMXnMARLwH22D16gi/OTpI5djJlkLf17F5mo\nl+cUIycHsCfjkjBwf8L4tC6gJbzLh2aKSlv9Nb3FcPg9WWn59eG7eB1vQo1h\nksjb+WT6W4hzeOaJ8JUn3gSJS0Vhn83sLDUntyKhojKNijLMgtRwRQyNcyMC\n9J4b1PFxQWhpX1WpRzIABI5EiqHxwJzuc4vT1EO7xJHVtvA0eAxZC8BQvJza\nPBuetom1XV5Fgh80qC7BrK7GNVxuZuEpR3oRbLEIrH8xzfIcCLfRBxjjXmw1\nH1jKkxkY+H8qbkRoSTNnue1jnMxJ20TYHLRycWqOec2uySKvjH0VHb7GJZtO\no8S5PBBp4fAsl5rbWl4viaVYn/npSVzakxLyzSTyonMwA0WZMkv8G9TELyYb\nxgUwXNyZJusVqG2btmry2Zj/rhXad4LORYeHW4dKSd2fKKgx4k6bmC6GrUFc\nszkxGCQ7ddqa1MV9Nj/DSImw2V7B6DXw7MnORdA4tyVyJ6/b10kMxCfjWXX3\n6Wk6h3U33lXif6q3kfIx12sQolzYmtoX4vNaz2VP3VJUm46sbbFUGjyEQ/Ia\n1B2lQ7zprZx7bsrIEOh/8PlhCSqghUN+3H3o7cliqSuD7V7Qj7NmVMHsIrDH\nVivW\r\n=yFEu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1db5c9fc8.0","@material/rtl":"6.0.0-canary.1db5c9fc8.0","@material/base":"6.0.0-canary.1db5c9fc8.0","@material/list":"6.0.0-canary.1db5c9fc8.0","@material/shape":"6.0.0-canary.1db5c9fc8.0","@material/theme":"6.0.0-canary.1db5c9fc8.0","@material/ripple":"6.0.0-canary.1db5c9fc8.0","@material/animation":"6.0.0-canary.1db5c9fc8.0","@material/elevation":"6.0.0-canary.1db5c9fc8.0","@material/typography":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.1db5c9fc8.0_1583872677623_0.8461544240702252","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/drawer","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.4971637f4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3531511cbe46bf1526af08e4579e3fd80c553cc6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.4971637f4.0.tgz","fileCount":46,"integrity":"sha512-RdiMcvdUeb4wldvSy4GrW5mWJa6BjlSZiPaO6rQEaK/2+RTuSdyzTNmUEQXUwvDLJWUjzBD+H7fZAAmwNins8w==","signatures":[{"sig":"MEQCIB16LePSPqNnG29xKeLx4unSkmI43ad2FSV93Q8uszAxAiBY/TCJ2UKBeHTcZKOCa90fwyvMoeDJFK70e6daRe6GtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBvMCRA9TVsSAnZWagAAo1oP+wbGIBtmdHJ1CsYngPL5\n4FsEEh36aoMKYhcj+s7wY5TtDr4Vs1yzCTNKnuLoa1FsCrwvtgpRI2qKCw4V\ncvH9Ik9bLQv+e2Y/djyGaCk+QkL+/VjoMob9lLrMOB8yTF+7HHiIaV6DnQVQ\ngvqBoyoXK9UvVg3EL0esjfcwijLzp4pEomlpBtv9yKYlHGjY4Ix9icOdMAuP\nOSqep7nRR2IXVAtH30EhFmKHQDABc5TG5tWahbl88hEFP3RsdYfSnRbZsSEk\n8GEKj3rI1k2eeaN5Z0+d/glOjenSxMEAIRao43AI4BpIm2KPUVeRqddJ80xu\nqAbdkXNiGEztzdC0blog4ojIV3yL8d1utuXaaH+LPN7fP05BJOGGJN82ApWx\neQVSIqunRuT+xluxGK+eC/KcB/AIJY+PA5hv/A5Z5BVNKAOqP5EpFta9Elq1\nUSk4upTeeOPEGsQGNh2C+zs+P+Fbz0vQ1Nl8hNTpX88eiozPrpxtyvnm7QIG\nwWNCrBhPjFBB55lcYj2QhdF6v1ae6eGEJN8fGl3PChA4I2to71rB9Vn32CvV\n6pUZyGoWJ1qcQFGTOEzkyRXru/iqdF0P3wZi+0FPRrwO7MCwNlVeGndILSie\nDwUoTfmHYRGwrTmt3zBzsl/USfI74SLzoH3f+fGycSM09ZxExSGzsPCIw4wn\nnCb5\r\n=ba9b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4971637f4.0","@material/rtl":"6.0.0-canary.4971637f4.0","@material/base":"6.0.0-canary.4971637f4.0","@material/list":"6.0.0-canary.4971637f4.0","@material/shape":"6.0.0-canary.4971637f4.0","@material/theme":"6.0.0-canary.4971637f4.0","@material/ripple":"6.0.0-canary.4971637f4.0","@material/animation":"6.0.0-canary.4971637f4.0","@material/elevation":"6.0.0-canary.4971637f4.0","@material/typography":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.4971637f4.0_1583881164219_0.1770195466655975","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/drawer","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.1ae8130ce.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4995b5d9873048bfd283374c976f4f07fea307cb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.1ae8130ce.0.tgz","fileCount":46,"integrity":"sha512-/KgzaSXs0oqpfbhkO3o1MStdlB32iS6/ryx9dViSSiAY1W1/pNsmgi89smXHRLfSanfN2y1WTvb+kH4GHX+L0Q==","signatures":[{"sig":"MEUCIQDTEbdEqpX5/Jt0eM2JbVkbIBhKy7M+1gmHCZzrI0ilQAIgK6aW49+hlz0s2QU7NvJHkcavxUD+Bra5RoDybpO74xI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB1iCRA9TVsSAnZWagAAzpQP/iJnCMgbdJNNPLtck4wL\nlaHtpcFfJ0gYim0nweSqphwuvzGNhmrlR324lCtWlbynNxiG1He08Z/mf03H\nLer+doLN4SWKdtLxB/W331zoGp8wWHGRVkU8v/s32LlX+cm0Gc3PHzwDwBKj\n1/6R1AbLDEf83/+MasqbZvFbNTUohjwkpuVzkCSIxXw+tdd6nlJb91TrAuAl\n+yuJBgUR7WVoClYHRPpwl50S8D5flqWKzGZfKibftrpqVZvHLijp7vieVATY\nHwUDUQe1swhixb3inSYWKsqMCERmPsthR2H9Dran31AudPkxHQwO5klDtzDL\nxJuDdyXFtjnNjprDWlxQFkQ/Gqui/LNI6uFd1SjT/MWlPIi/oVkxdREE7m5J\ngFDLj/JzR/hitXkOmBlgr61/UAkVFK3hF+RfQZNCkuU6BVfo2Vt0TXTj6ajF\nZQ6PVDJ0ShpdWoZZX7d29vKdXOfnUlvCXE1ipispedDo64Hfpc19yZRAiozl\nja8gaEYvXv0LAIlMNTNTBBZAXWKAartNuDkAhSg5Mcx1Ti0uSQ/p6ruIbAzm\neCMRTd9rhr8IZXHs+Pgq8wAJ1YQkpLDULpnUNx9MHojJon5cFDBs32WmvhuQ\ndgGpc8pwNSWQBbN+dpzBHYnbh72beCymwEJdTYOX585BvvsUlkVSgnSVQvdA\nKZsK\r\n=SJ6/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1ae8130ce.0","@material/rtl":"6.0.0-canary.1ae8130ce.0","@material/base":"6.0.0-canary.1ae8130ce.0","@material/list":"6.0.0-canary.1ae8130ce.0","@material/shape":"6.0.0-canary.1ae8130ce.0","@material/theme":"6.0.0-canary.1ae8130ce.0","@material/ripple":"6.0.0-canary.1ae8130ce.0","@material/animation":"6.0.0-canary.1ae8130ce.0","@material/elevation":"6.0.0-canary.1ae8130ce.0","@material/typography":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.1ae8130ce.0_1583881570330_0.27198793435421176","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/drawer","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.8639c2690.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80cd1b525481d2e55a0c3b508b1791f320f23c87","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.8639c2690.0.tgz","fileCount":46,"integrity":"sha512-6lj4xb9fUrL4XIM4B/vG1n+8iAKsvPA/osT5aHrSBnpOvvbv5aj3qQ0/IAs8sjXjT9n/Ltufc7XujfbT/WzUfQ==","signatures":[{"sig":"MEQCIF440QEdj1UL9uqmXHS4PZaJ9G4jtCQVhX82OQF+krgxAiAFwU4JMrsiedDCnUpNFQPh6KMJP8NO8ksGr3d9TAeLNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIZeCRA9TVsSAnZWagAAVeYP/A7YJt1DKdKJF01Q/8yT\nDa4GUqutF5k3YHwN8188Zf6MfsWN7gQeWbQAhcF/ADlppsmRaWW7dFRpuSa5\nlTQCciEMIAyAGO6b3ZZa6/a4A6Uk++DFOmhYcCBmM3N3CSNFAF3rQl9Vxmma\n4vfAaYjJnozkT+WRwLjpikhPh+VQrkhGt3YP/urj1KmsCC11k0Bwt3Dsj7/m\nDFqOquMtLc8DQkqzwleSekigGAx9RZOmhKrDlAWIXURwPvvO/wcR4W5G5r2R\nfdO2+7qwd41CaA2J67rHSPIcCnTGfqvTfXmRgOqN+O87mhAurO0If5N0m2Y/\nxQLmZ8lWbS+sqvXDi7FiN+gYpSROnT15VrUcXlK3I4SzH6S2aWPjScCxd1ie\niZAVSS0G7zvw+E05j3WzFVQIlLL/t7v8EesNJ3iEFhFTn6ykE6a6yX/PFEMX\nHDJJ4lGkN86p30FANIJC1OnVYJFJxALbLQ6X8iSZ6oOKNN/87FD8nFpk0j6g\nA6ELN2pE7od9Gu285RtItaReHhAuyY/9JwIpWSNyfSqWrBWK8yMc7Q4mDLZr\neRgUbVdo0hF9d9V2RivkBtdtKe9njbiOHLee/GYH6KZPzvQ336IiGAN1P4KM\nb+OCVPTCvRpffYz+V8IzJQDQHIEbzfyE4CJ18/5W4AbIcDR+nUY4XCLDlaGw\nYMWD\r\n=i73w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8639c2690.0","@material/rtl":"6.0.0-canary.8639c2690.0","@material/base":"6.0.0-canary.8639c2690.0","@material/list":"6.0.0-canary.8639c2690.0","@material/shape":"6.0.0-canary.8639c2690.0","@material/theme":"6.0.0-canary.8639c2690.0","@material/ripple":"6.0.0-canary.8639c2690.0","@material/animation":"6.0.0-canary.8639c2690.0","@material/elevation":"6.0.0-canary.8639c2690.0","@material/typography":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.8639c2690.0_1583908445847_0.8778321923913006","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/drawer","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.d5808057f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"859f1a25824afbda580d6bda8e51163c35ee036a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.d5808057f.0.tgz","fileCount":46,"integrity":"sha512-ZJQ1uw9zEeNtjodlwk999bmsB6y6xDmjjCnowRTrUt4oKlgA4nOkvjfC2dryMFjO/uxQDqHFJZFQGjBIXn0ezg==","signatures":[{"sig":"MEYCIQChGBp3lG2SCMeY4qkWOI+qtfSQyGR65ZmsvZLfcEwedQIhAO9mgNpMtLkVFh14U23A+q48i1rxhMj2ndWR4GoyWLAV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRExCRA9TVsSAnZWagAAzwsP/ibnvTgdvyVFTAJU44En\n3vJYhfCY7C2t0cvIsrGVR7bdDaORXez4Kh1tGJuwnDZgEF8xAINOff9PvY+f\nGWjd7ZFkMG/JxR8RmuOpchBgsaln+AP4ttXg71mCIKDuOYYJPBPIgX++pAsk\nz+px18eNCJQtzFou9tNVbKA4XtRyWeE+uhntg08lvNkleAIyy9F6TBRKJzPu\nwjl/ZWPBYd6fMrczjVYSj+gN1RpAOxu2zsfQfKrM03EA3QsOEgL0gr9xRQCo\nKbqYF4bfuIBYjvUK7B4VC7Q7RQ5GJe076b51ZlhYy7AREi9BGa7MOnY1OxXG\npVpM3UUy1N3xQQXdssqh9M+ttFpUNlUWlWUXAe8bNPwggq3SHJIsBNdTmGRN\ntxIYidhfNs97thMuNDzWfbirAuzPlICdzEA7F0iO5uSV2hTz0QTWLuh1a73M\nc70YkQnbBJuUG8lOluj76XKIH18rfeOhO2HZOZ5EUg7C00JGQUie2aSI2KjZ\nfZi73llVm/H6jXC1vA4POIIjZdqYAZDEwRrMKtgP67adNssf66PwNIrwJ38E\nflWcS00s7Zrc6jlcTk0u0nwXFVVdrz3blHOPCB9DI5w2pjadSLvJLpeZed3k\njRb+ssw+4M239eHUZVeTbeAyvgKm+xUVCVagKxhTeDu7VPpyLHV2qeQHxV9u\nTAgw\r\n=fiz0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d5808057f.0","@material/rtl":"6.0.0-canary.d5808057f.0","@material/base":"6.0.0-canary.d5808057f.0","@material/list":"6.0.0-canary.d5808057f.0","@material/shape":"6.0.0-canary.d5808057f.0","@material/theme":"6.0.0-canary.d5808057f.0","@material/ripple":"6.0.0-canary.d5808057f.0","@material/animation":"6.0.0-canary.d5808057f.0","@material/elevation":"6.0.0-canary.d5808057f.0","@material/typography":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.d5808057f.0_1583943984604_0.03178816236669291","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/drawer","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.b3f58203d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18623067e3777c00bd36f3a93d74706e5b9ca255","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.b3f58203d.0.tgz","fileCount":46,"integrity":"sha512-obEXDENyc28Ib9twRCUDiZPdRSPolcBveKQBRquHlmxsFtUAT113RTrWnkgh8/ZteChSZR+W4H68xObs9IMmcQ==","signatures":[{"sig":"MEUCIQD3Rst6kw9derWSbSaU5eSsTFY669fgDiDPGrLqRJ1zLgIgBflrEOBBvWtqvvzJAfq1zxuYTvVaxqV0OCbP42CTPCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT5NCRA9TVsSAnZWagAAp50QAI76Ud8XjTXURjwbgQNl\n6z8z36gbkLTEK2pzYeBt4ctLOGC6AWiicp2iEUPPD0H0Pf5kRE7WZSkDGIhf\nUktVDsCt+jt6uqUrLhOkDffUFiIUKJxXZGC1l/uinaUCaSJCCMD53XscmOjV\nY4mpiY1M6EKoc2j9FnT+YiR3eb+d7C/oq7uchlOtoCd3DiA3lgjvNy9w2k1R\nWMwZqWYJohCEeN+lS1eGJXfoZnT9OhGl+Sw3tqrYEUPp47I4RD15ixuVZRoG\nwwtyxAQLu9OTXXOL9Rp2Ai9krgxxSEy1OF4BT/vBhw8PPeELwzVY7+N38XHi\nXOPowM2rozIFuC0g1iRisAS8p6DmeltEROqlQJbYMYaU+14DC5IMrot/omjK\nhHZSOUGunRcgIN9YtBY6QU+e6qBcNtkAGzsG2iX/rw+YSqfHkPPcAkrSvSIA\n8/TV+Gpnzyw7H6hr6eUn9WugwfUkHwnD/xH9cXDWrd28trrSmjzqlG+Oyn5v\n9SgiXetz/CmmYYmD6xo9PEOXkuz7uRMBcAJiqIBYBP+hebb7BpWBolNOWUDC\nh32jJmPwW4YUtu91Jx0m8QCDqhRiqFi3W3VDfysFUiH61NtGSZEAgTNCIbdk\nfn04AhliJMQDHe7Qv74H8brUg/geseXwuveF1NIjLoU8KD5/JxMt7uWCp8rq\ntIL3\r\n=T2tD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b3f58203d.0","@material/rtl":"6.0.0-canary.b3f58203d.0","@material/base":"6.0.0-canary.b3f58203d.0","@material/list":"6.0.0-canary.b3f58203d.0","@material/shape":"6.0.0-canary.b3f58203d.0","@material/theme":"6.0.0-canary.b3f58203d.0","@material/ripple":"6.0.0-canary.b3f58203d.0","@material/animation":"6.0.0-canary.b3f58203d.0","@material/elevation":"6.0.0-canary.b3f58203d.0","@material/typography":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.b3f58203d.0_1583955531659_0.6751030647274403","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/drawer","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.bec065920.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4ed737dfe55b1fc511c38c10d6f0be80b203909","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.bec065920.0.tgz","fileCount":46,"integrity":"sha512-xsbOEimgZ1wtZlTNHs/nio4tGZ/9fYX5ydmRCNL8edtCfAeueaJWOiFBnZsEYWHSldHsvfA4nPiugdprTC5/AQ==","signatures":[{"sig":"MEYCIQD5Td3MeUanjaIypM0cZ2CLWf8qSNF6gtzyrg0Zw4if9gIhANiC0fj4Wve1CaybchtF51BE0WhYjsPbnqm8yk5TLJg1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapm/CRA9TVsSAnZWagAAMC0P/Rrau2nI/PFY87DhoA/v\nBhMDC5N5ws5jDy/73ryBE5pmtXGumc3hdnYnmjXje5YXqB2J3hjqC0ZkoKic\ndDFvAPHkvrHrCIunez3ZZTzjk9yzpjoTsAXkdRVyRN0h8tDCn2Aaq0ILAmk+\noHKz10I1R8VPm5ud0D70cFq1Zunh2nVVzqIhg177r+pi4Bwf0HQfobMPRpxC\nnPYdy5zENI8qYqQfth6+Eds0qqn98RcqaZ8q816CMvdvpQO3zl5WbDbI3mbF\nTscKE4UPRvoERrgPN3/A5wVWpkqwQ3xGP0j2m/YR/Cl08mURkBWZP5dtFTL3\no2rnfYWC8a4dFOMl9Ok/xb9jU2zDtyaNlqEm6rs+TMaus+0lwxvKPCag/jRr\nxRwy5YB4P0fm5QVDtCtpfocfAxtEG19pDYI+0KBfo3dndlM3fiCvnJ4YWolk\nFrrMVlb9IRaHbqpB0t2hLM7jHZJx0Zs11HqooikDfFPuRtYFVhpU9lDMG3CY\nMGj58wePZ3UmvyiYjG6MMteA8aiCqnE+RUxeJ58lmIEi3Og02hIuKtS1zYkU\n06Lv7nbz1p6Fn0xp/ce+n/4scJcOy0KSyJtxOJmc09CdXqPNe8UVAnsEUGx3\nUfrzsyqH9oFn27AFz5FdfghpQAUhosBYy2aPCeBB1QK1kdjluMVtVMx1QcEp\nEMCl\r\n=W+WE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bec065920.0","@material/rtl":"6.0.0-canary.bec065920.0","@material/base":"6.0.0-canary.bec065920.0","@material/list":"6.0.0-canary.bec065920.0","@material/shape":"6.0.0-canary.bec065920.0","@material/theme":"6.0.0-canary.bec065920.0","@material/ripple":"6.0.0-canary.bec065920.0","@material/animation":"6.0.0-canary.bec065920.0","@material/elevation":"6.0.0-canary.bec065920.0","@material/typography":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.bec065920.0_1584044478963_0.5672907314640347","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/drawer","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.776291ef0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3660de4da578a9aee6d8cee945fa08775d62b51","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.776291ef0.0.tgz","fileCount":46,"integrity":"sha512-9YJCVma10e5u635mJIyrURsmLD3xh+1Poh8amehyCY2K1c3SuDh2s6wpocxb8uLVxy68wM7EEpZfqTDKB40lnw==","signatures":[{"sig":"MEQCIE9EsCIERmBDjaR7lxOibkYhT6FzljS+azofvIpvgES9AiARPfb9eNhLEjKoyRZNvTi29Aoa03yFVYu7sPohgC91pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSNECRA9TVsSAnZWagAAoBYQAJTo524fR+8Pa6/SjtKb\njaH1Ud6v0aNjJH96lhXUgFhiQK2eALg+XsM2FeY5efFpSaxFRLUyQagMsYcW\nTMj8pQrWTl73wBsNZeVNqe4S1bVaCObVpooAhYK9I34mV+9as3KJ1B0bc3go\nRLuHOxbJcpfNipfZ1XttT+hi6nAbMErbssfw6+bGFj3Tw4v0KnzWAvfXC+Zy\nnx7r/VlfZpTvdw/l4AH4GhLXHrwrYC2w6zy4AZUmDvz9LsN6WbWrWnKMadl/\nw7AWqwa7D6pEawAHWASpkfn5lc8VevlgPZHS7bI2Z7QqkYjqWEZJb8GsAwDt\nXM8Qv2WEw96efK/YIqjhy04Wjv4FXRr5xnRST7ik7Q5EdJ6ffB5NRA2njL7O\nocVQQppn9nbZ7uqQ67n20hh6TocuehU0sT+o8DbohNczxXI6ED5eN4Bla4ak\n9Fhw+4S5NWOCW/awyC7EmXnQ8tGzN5gH4pt8kC5OSmDL4818yfh6UctQaLvY\nkyVTnQrtZZjIGY+wni9aRtHcFA3HzN52vcE8TmzbhX0TRy8gAxoWxyrFf0Rh\nfpTrJ/xe8uxVUkLgVSkrF9AjiS6oMEpzoYVB4d+5bLRTB67TCuiZwvHsUShG\n3rbmnuqWmsksR+QiQJpSXkc4ti19F/Sq3Tqqlqe/+YsI2FRZDjO+0s9AnJGK\nRpVv\r\n=zoaX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.776291ef0.0","@material/rtl":"6.0.0-canary.776291ef0.0","@material/base":"6.0.0-canary.776291ef0.0","@material/list":"6.0.0-canary.776291ef0.0","@material/shape":"6.0.0-canary.776291ef0.0","@material/theme":"6.0.0-canary.776291ef0.0","@material/ripple":"6.0.0-canary.776291ef0.0","@material/animation":"6.0.0-canary.776291ef0.0","@material/elevation":"6.0.0-canary.776291ef0.0","@material/typography":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.776291ef0.0_1584472900416_0.3475209645205124","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/drawer","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.ece19f3dd.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"611688d75abab4a09cd7867dfe1f8edca7a3fdc2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.ece19f3dd.0.tgz","fileCount":46,"integrity":"sha512-BEfEyeqI+f2Hq51dn3AsXYQfNOGe+OTd/vBSbXLfRHe2nS9vjvA0LkJWxwmyqn81SWrm2Sbwar+Io+SqLChZ0w==","signatures":[{"sig":"MEYCIQDzi3wfDvRXKCYF9kFUXCC88YSkqrl21eupAbF/gaoWDgIhAN+a0IxhZBQLeZvpe12a5UmzE+oHvL8rAhM3HzN6i7/T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUjVCRA9TVsSAnZWagAAB+8P/3/y90iFEZKExOqp/pP3\nrqTk62rOfj8kTWMx7jMOepaopODUZ2Fbqz2vQ105OsECIvp1e/MKluEb9fs/\nAygycpf281E8acEO3idzCIqEBZc/eQKVOhakEVoqubO91R64gaWhEZdO9X8Y\nhyMZch7GuKBV1h19aHa5OYhbChJvUwUZJTIQJ3XNa+ngHX/vtH27GZQ782oH\ng6exIUhnQ2zrCBi1np6V0/HXJrGbZoTmxvd5ibvzKlWvIkdOPC5CQySqUYPH\nilgVkmVwFXyNMTywnVoSL8dgFewdqkgVislU06qBZMqhSxyc5qcOFwhut8Xf\nc3LJozQaiwG2wdWZsAtWdsz5L99vfPojFvXENtR9KalAviCqNavmhaxI0FFl\n1syhrUuAcDJttFWRbltMtU3UbgHyTlOFSm4Ni5qH5pOsC+Eqji/6v1tMBuBD\n1JG1O0D90SBdmxPIlkI9djb4nt0UnZ73GJBfe5kOfe9VEFxE5/3jifSHceDT\nQ2lXu016X2BTf0qgZwVA71hPyugVHQYt6PCaSgTo6nfQxKKXQkcrsaWCNLpF\nNIXeP98XPOtVlkDbe6HeUly5BhtNfPvSI+OCispZDCDf5OWGuhduqypjTby7\n7PDmm1y3pg2DXt6As5bJXho5X5jT4M/dP5KB9kzFw7JqL/NM8VbN1VdK3X9M\npbhT\r\n=xADQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ece19f3dd.0","@material/rtl":"6.0.0-canary.ece19f3dd.0","@material/base":"6.0.0-canary.ece19f3dd.0","@material/list":"6.0.0-canary.ece19f3dd.0","@material/shape":"6.0.0-canary.ece19f3dd.0","@material/theme":"6.0.0-canary.ece19f3dd.0","@material/ripple":"6.0.0-canary.ece19f3dd.0","@material/animation":"6.0.0-canary.ece19f3dd.0","@material/elevation":"6.0.0-canary.ece19f3dd.0","@material/typography":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.ece19f3dd.0_1584482516677_0.14484220635363898","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/drawer","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.4dc45af6c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fec9ff33623862306d1c740f3e5e5f60527bc4fc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.4dc45af6c.0.tgz","fileCount":46,"integrity":"sha512-eSI+829Tsr8kdUZX3s0M/yrB5odbCJ8fgiNw64R+QbT4ksZoaCMhdBpxodnNAgfQ/bBGexLtQwL1rToVDhdoWg==","signatures":[{"sig":"MEQCIBAd+uHaeNOdDK14VJdUrdAX8FZBZSOq5uTxab1PmiUJAiAGOVtWkaDhC6xBGRPUendM7Bt1WOn5A8LB3QxL58qnDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX37CRA9TVsSAnZWagAALDYP/iRKilL8NrUhTU0mAlmV\n6dGfPfqaF11zeiWcVSJIduCsSayxB9n9wyf9BCEe5vHhXfuyMUBrHzoXIgAU\nTAmPKJzL26xMmdrxokP/uHAdIRrLE6JhB8TqERPMk11tT4jZcPQU0tVsXbOi\naVBzKiCSPcrZMIwZJB6SfByeWDyjvvDKzx1e7eo5KEkw6i2xdiJr0LUVrs6O\nRfqTljXt2P1YuEaX/GlEd86CcJLEyQkmw79PI9cNViG3XP9hQMLy5P4nt4S6\nD9pBpWLO767O++YsGgB5NYH2VsPMjn4NpmXOTVVeXe/ClJz8CNvIARmQinWV\nznqS0wXAR5djZRYWEIFtBGZcGX4BoLdOubJVVFmacOL9Rxo1ciHsphmlu6jI\nXjL9msCos44f7a0K5D68cnrYzHUlQ6jH+UmB/McIW4icvzMLjRDOnCpE2Z70\nTca8RZb7OincztayYAntOf2oDKUIgHDYzTLQvkTA5wA/BTeEJApZvk4g0f9v\n5cE19IgwaRcGhJ/iiqRiqjq8z8bx4Q7/gaeMz+OkhrrwWqJ03xNFmrLrtsca\nt6ZlUbQKED+VdVl2+V3dntWXOV4L5fWH28g7kUruubvoAMEcu9rscqkVAaC2\nFr/+Os1nN2rmc/y0gY6Rqbx+H1ZxAq+NA+Fgj9j6VVxNRa+kf7SRIb0GbgMg\nVDh+\r\n=S2Vl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4dc45af6c.0","@material/rtl":"6.0.0-canary.4dc45af6c.0","@material/base":"6.0.0-canary.4dc45af6c.0","@material/list":"6.0.0-canary.4dc45af6c.0","@material/shape":"6.0.0-canary.4dc45af6c.0","@material/theme":"6.0.0-canary.4dc45af6c.0","@material/ripple":"6.0.0-canary.4dc45af6c.0","@material/animation":"6.0.0-canary.4dc45af6c.0","@material/elevation":"6.0.0-canary.4dc45af6c.0","@material/typography":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.4dc45af6c.0_1584496122848_0.44020265549839954","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/drawer","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.6b48781bf.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f4aa2356ce21968ce886503c3f6e253f3652230","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.6b48781bf.0.tgz","fileCount":46,"integrity":"sha512-twhaLvfmo/DiteZL4NfBc9/ktL1GEbdrYaYlJa0UpEoZLM+RSFJUOYMxYeAgKD+rNsUItAcosPnx+yFa5/kfFA==","signatures":[{"sig":"MEUCIQCV86sOG88VTRQTkGvI30FjrOhNcMIHrDMTQ7S5GLOwWAIgcm1lBpy0OR0W/ImMrNzf+0pr63UIjeSgU7FScrxqNwQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj/RCRA9TVsSAnZWagAA/QwP/3qAu+k7d55uo1HtSeMf\nZpDBqLCwOdd1vadH+MNTDJ/wtDOlRvY50G/BG8Byc6L3/KmpisT4Hcbt63RB\nJXZXXxeD5PtWVAIXzgBBSoRAJxBz3gIB1LmMw7CSttFJ3asHqivXpl2WR3Vv\nJ3f80M4rAnOmVcxrfJjd8LE9+JIi+caGzJtr7tsSAQNrL1YXqZnVAzx7TXnR\nh+ZoVuZgkWqZIJQs5+euJMDRu0yI6VvIXG0hZ6DuSUNXKqYux6wnbpPZE5Ev\nhKtFdptXBJ32TprrUnDaX9lUzSYNpuBp7yE0P7n2CuKPhtmFEPP2z5MH60kP\npJcszNeKb3+t9fgsjuklxxRFCjKZ9xtNb4YNHsrFPEsLouXarbCBQPhE7Bju\nmBY9tauadOdhuWdkdDRBmhlE/ACpf3HCd2ezxEivUBTertmB9idjoKFC9czT\nX/foUUTXEDEZcFzQDg+DM//C5NDtVNu/zNBKnb/tuaRh2SEsjJ2pn0M+RdQ1\nomZq68jPeuWSWKCZwIY4lLV4wOd76aLt80A8hB4q6rlLdW1gi3KWjfWzojOk\nNfZWs7xsv0pjOKHoIMhx0/ni3Kxks3EOwBgNIIxlWgKk1wX4PxqeZyj8b772\nE7kFrr3n37gQk+0aPaEpdX8T0A8DHxiO5Fe0KbbxMdf70uPH5dVBT0x0HFMm\nWXmo\r\n=Kd3N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6b48781bf.0","@material/rtl":"6.0.0-canary.6b48781bf.0","@material/base":"6.0.0-canary.6b48781bf.0","@material/list":"6.0.0-canary.6b48781bf.0","@material/shape":"6.0.0-canary.6b48781bf.0","@material/theme":"6.0.0-canary.6b48781bf.0","@material/ripple":"6.0.0-canary.6b48781bf.0","@material/animation":"6.0.0-canary.6b48781bf.0","@material/elevation":"6.0.0-canary.6b48781bf.0","@material/typography":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.6b48781bf.0_1584545744136_0.21796044884944354","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/drawer","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.a88c8e4dc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5bff5d296b11b6bfc97821cf1a583d027a45d2b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":46,"integrity":"sha512-sY416hCrMEOE89Ya9sbm8Ozskw6KO1aoa7nUSZEWUbWjnTu5Z7HqiLXs58pCQGU6Tk8MltAPodfz8HcelGcQjg==","signatures":[{"sig":"MEUCIDkTf7mKcMIAKrmS2dOcgRypxAGOUnv1G7fUEV+Xfo+tAiEAkqsVBX8NLggBMROmiFgmAKoEh2qHgAhdNGwcm9YtKog=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec62lCRA9TVsSAnZWagAA0qsP/0BiFAXDmedIqO1fFARr\njVFJSoQhbKxoECF7WCuZYKP55zU1sNWMUFzOf/mF8LXhhMMN2svsKi8gqIJn\nh0xW7ha8pEHu4+9iMuqF8RTsa0DfO4wudlXHqJuBYzVxQXSQ3YfsuPL+x3Xl\ndyCRVE67mOYa7W+/vAjXgSNaUhkALaFNF7wtTpV1Nc00xLpzE6dcTrh3cXwz\nS1KG5ABVym+YorhQ8wTGkgkDdep6nHDG/bJ4QwVDAX9CPfYDuiRSB7REf/yN\nY+YmEIGGRkkP1ENifR3pcvP4+ZXGiO7P4zP+cul/qPsEip07j4yx8bmzLFIP\nsVsNnRAApz5LRLZO2onQQp3IWnGBVpxaCVvP40EwlMX5XxCEdGXvbElH50Og\nJxy/h1r+6HRVzyPjEQsm7rlKCEieStYJLhzon/8Ks0W2vDk1VytKJR/kZ/Ip\niwHQQIXhM/0YI7VT4DyMk2s8qCps42Y9x1AUweZXQgZwwHDwGWIW46cbFnO3\nUFFc8lvOKAF6OiV48ZeCIcQMLSPxzU4uj2OSHbMm1Rof1fOktCHAAi8paioQ\nZi2ECkQQubSOoiZxBPaXb4p+dTGSmPNJj2Kj+JQGfBmekJqVS681pEpWuZbb\n7CwzGzif33f6RGk1/GcF0Ftu/vb8JRRa9alswSoR6yqrk8VZNhFn4jJlCik4\ngqPT\r\n=kR22\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.a88c8e4dc.0","@material/rtl":"6.0.0-canary.a88c8e4dc.0","@material/base":"6.0.0-canary.a88c8e4dc.0","@material/list":"6.0.0-canary.a88c8e4dc.0","@material/shape":"6.0.0-canary.a88c8e4dc.0","@material/theme":"6.0.0-canary.a88c8e4dc.0","@material/ripple":"6.0.0-canary.a88c8e4dc.0","@material/animation":"6.0.0-canary.a88c8e4dc.0","@material/elevation":"6.0.0-canary.a88c8e4dc.0","@material/typography":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.a88c8e4dc.0_1584639397360_0.1830120987030337","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/drawer","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.cafe18860.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ad1d8c6b31140d01065c045477f21b745291d61","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.cafe18860.0.tgz","fileCount":46,"integrity":"sha512-YUQvn9r2Aj4C00YF9zpt6H0nhxyXGywGs0hgUliBZdV1yrgGzRmWzPp7qepe3ntmX0owsOvVHnNcXXKPbPKnmg==","signatures":[{"sig":"MEQCIDwWo/f6szM1qBBDCra3iBXmcPmYTXglgoGWvrxkTI4KAiBx/H/7yNJK7LYYo+XCrfd8PyZu+QuE7ymqgW5bdoVDPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNkWCRA9TVsSAnZWagAAeOYP/2Bgf7HqcO8ZOR2L1gEO\nTqwpXAeIPxhrGmuMTNKpcINwuvL+a7yL+QKfL+p4HNVzSUxLa46zTcOLXmmJ\nz00RxXz7l661K3wWnSerhwKAmyGKrYxvFKO4tws7ovDMtMxV66oEeUOxTBqo\ne8hacFJT8soNNJJyrfg2VJ9igOrf8y0u+2XaaKdLR7RVrYvCj1IFMzBqRNcP\nhBxxTjRBAZVDxBIRTmhJTH2cfIgzZ4wXnEuyRkv5IidfVbzXdFWBPU9q1Ujp\n8GWob+ADlwthGuAWswNGz83hhtzhzWG1f7L6MQU4P89o1nOjwdLu8seP5xnj\nkVoZumxznzCCMXLX9CZsovWtvh3aaoKE+L1GrMobbrgRYvszesniLWJiQak/\n71OdKoUluQrQ4JxrlL8gxgEvVbSGSL97EHOdDqkIDyYNN7+mhDy/TdSvKBOM\npjRqR3gMQZTnIDnTtoCKP/y54xRwAljDRI7v2IUaTmDDlq4MtuIiUvBmO89N\n4DcgNoWn0BaTBmQVmF8YRQia3b2ovCDuDsdWiZCIfC0ZL3NSoe9m+rFwU8AC\noSdp4SJan+7W0J9nfZQVWcbefe+FaVCzDeS1LEckf1mFtU1ZADFAZc+xnACV\nVkA6057axNPIbm+tWRs89mc7aAsQBH2IQEqQjmfBXKLPmBLiJKMSOzQawqeG\nqCkG\r\n=LdTL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.cafe18860.0","@material/rtl":"6.0.0-canary.cafe18860.0","@material/base":"6.0.0-canary.cafe18860.0","@material/list":"6.0.0-canary.cafe18860.0","@material/shape":"6.0.0-canary.cafe18860.0","@material/theme":"6.0.0-canary.cafe18860.0","@material/ripple":"6.0.0-canary.cafe18860.0","@material/animation":"6.0.0-canary.cafe18860.0","@material/elevation":"6.0.0-canary.cafe18860.0","@material/typography":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.cafe18860.0_1584716054191_0.11556848236237194","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/drawer","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.35a32aaea.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a86ed54899f3d5823dbcf8be5f955630bfde3fb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.35a32aaea.0.tgz","fileCount":46,"integrity":"sha512-OWWi65EAzhbB/Ixd0SLW0JQxB5Kp5UKgOvvJxRb27VxyHr2FAKMRjS8DIA2d/dtZj8PUI2uELbJTQsZ010ipbg==","signatures":[{"sig":"MEUCIQD9JpY2g7ibqxkfTQ8RbRBw05iFxTnuKwrwfnp9Bmz5FQIgCpVO5nRzZ0RBCGq5uHy+MyXAOWW4pn5X4iI8/7L3p2Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSC+CRA9TVsSAnZWagAAGCoP/RBlKnSOqFK0IM7oRmqf\nVC0QNBTgkxHw4I1rsTYVYD9n9ptg/hKGyyoiKL3D6aYRTNSKfWPc5ZEFOH/w\nL9pqoncj7F92Gv5DzP2970I6/hbmCSgP1wnY7vxJ4Z6zEvT+JOCrDopoOx5k\nYSVxLM8vHRpeVSyOMNgaj6kX1MjVkSzdpyOj+j25J6F8qo966SdLDtrdb6Rd\nrMku1e2t8+FtWr+4hD6fvCD0exMJ6eFUDy4WUTnZjyEQ6F4v/Lb79Od9HNS5\nQDELDVMAwH1A+mxM8Z8z4Kz0ukkA9AygtuJfy2V5HqnIJ7JWhE20Uz4Jnrth\n6gqHt6ZckUy0mCUvXi5agiF/NUWVPmFNC1wZt1WWDHwvXqQMISGM7CYSy3su\ndGPn8tC+0DBrN4f/F2SS1j2wyK/vSdMh1H4FyBVp8hMTlMyeN4jrnP6dKE50\n9DR4BW0aATyDx0y5VUU/zD7WA9+191kcWxQw1ZS+mHqn1FYlngbXveEAfsh3\nqiAc9a+Sg5qhmGaj4X4ScfNOxnS4EES27zOa8zpi47uIFnZ5vsVnqZJJf60k\nParMTWDMJ3ifV6GNXg9OrBMWdqpnErWyKzHZLF0n92izPyJFG+KPGfAMIdem\n0WayTizZRbZ4P1gCXfxI7I8RnR0ZBWTec3ijJrjFJyIA8J6AlW241KqolDMv\nRk7S\r\n=3/oz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.35a32aaea.0","@material/rtl":"6.0.0-canary.35a32aaea.0","@material/base":"6.0.0-canary.35a32aaea.0","@material/list":"6.0.0-canary.35a32aaea.0","@material/shape":"6.0.0-canary.35a32aaea.0","@material/theme":"6.0.0-canary.35a32aaea.0","@material/ripple":"6.0.0-canary.35a32aaea.0","@material/animation":"6.0.0-canary.35a32aaea.0","@material/elevation":"6.0.0-canary.35a32aaea.0","@material/typography":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.35a32aaea.0_1584734397599_0.8278926923189063","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/drawer","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.e75deb854.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad5261544b546ca23f4e715f280ca033f7171cb2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.e75deb854.0.tgz","fileCount":46,"integrity":"sha512-/aGXsLpA73mLvzYvBq+wjYgqvoF81vMeNwVy8XZepY3FnteWDz9LST2oo21hBlo1wy9tpLouO2iXiyICb1vEzQ==","signatures":[{"sig":"MEYCIQDXO/Jf/w0tmDeej1+809ADMR4jgAv6M/dzfhTQ0OJG6QIhANFoOA2DeVQQahfCfdycMfAZBGJbbZauIeCMkIHvkwAd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUChCRA9TVsSAnZWagAADNMQAJxJ+2qJ5+gmmWeZB0Da\numCHgGeinPi1lQRuwk+d3qsjni+VN7VtUvgaR8xdDhqYGCjpG/0IeHzz9Dps\ntc4Jjo9km3/cbVC9inn6CafMZtyl/zb5J3xkaNPU0QKZL7CWn1tfBVSUH7zT\n8jzljVbNy8NSzeg5Uwlq0IdY/LC5/CVkegO232PiXOk4eokDsx75hvPB67fy\n9lINH1unHc66VIaYqASVCYdbDC5NyQ8L+VGwThQ8Y+8gfOAV/nkrMZrp+UTR\nitgap6bdGAIvqAJmPDOEcJfus7k/0/95eFwWPWC1RxNzgHAJPz3SGny38PP9\n6mX23gAc+YstbOa98RobUrA+iF87pWPXfyEb6K0A1jQ7wB3Mx0ot5Qx3rf0V\n7zNpktJWIIoODo5TYPBxWrxB4RAC+5OLYvPf+DEA5LQ9WqnyeiA5Etjctvex\na0logOlhk4VtbloabPL9d6+mpBILmog/WVI0i4xXLE2w3oo0gQjWbjElI8n9\nFJ3XHAlNzx/NB7PVP2hvKiWF76aV1fClcHqwA3euMfGRWPSU8lHgVwA1F1mZ\ncqURSuCTF5ZnizEe8/P1Fd/0BKDADasATUwicv6qi/QmUqBfvcjkR5O+umiC\nZ2THH6wjkU7NX5/dVHvPdmQ3f4GybpC3vOm7ILh/g1bKQcG9srnbYUi0/cvU\n0nF1\r\n=CB29\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e75deb854.0","@material/rtl":"6.0.0-canary.e75deb854.0","@material/base":"6.0.0-canary.e75deb854.0","@material/list":"6.0.0-canary.e75deb854.0","@material/shape":"6.0.0-canary.e75deb854.0","@material/theme":"6.0.0-canary.e75deb854.0","@material/ripple":"6.0.0-canary.e75deb854.0","@material/animation":"6.0.0-canary.e75deb854.0","@material/elevation":"6.0.0-canary.e75deb854.0","@material/typography":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.e75deb854.0_1584742560619_0.8291982991153453","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/drawer","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.2cc6966f6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8d38259d740178bf205a378c78a21bb8dbf8ffa","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.2cc6966f6.0.tgz","fileCount":46,"integrity":"sha512-peipm7k4h3NPhiG7xvjmtZAYAbRdXk5+PKhOJIQstNJkSxKECCkPxWu5Hq/x9BJz3tzSEhUZVrilNJGjYrmrew==","signatures":[{"sig":"MEYCIQCnHipyd67V44sD7F3cbpQTJrsRAJZs6V9lphZJPgq53wIhAL/O3gLVWJliN8hqL/wbjvo6+sgGMKe9q1uBW2na2VG8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelUNCRA9TVsSAnZWagAAVFYP/ifYkcQJJ8wfuD0/6Wjp\nQqkgXMstFz2lPK17Ou7uicWI/PoeBPs8deWc1V6JKWpFq2d1eL8PNevCWVeu\nykaop7pu6qd0Z3nlIO/KKVrxJoEaBmaOyLRM69rmJorH4CLlfcCdF7BAYsHZ\n+v1PzKTof37D28CRxLVkO0ie2moBiVbOS6gh7ac06Smzr6He4x9W62TPe96u\nQAOtEn7fyfY3XhFR4I2Ff3tXT8TNwGeqDjwPBxt1LHi3df+jFEOLB9xVloHQ\nt7z+5XX/6ml/hZMqTb2M2hHun0Yg0AAZZMXFaQIPcqx8JDB8AmyX3qmS5MLK\nX36EM10atTgfc7PdnrnQ8qZaHLrjw8cFC+SwzdGGAJerFE0P4gxF8yGKrdQi\nK179uEV4aTZauZQTIW7hqWc3lD8OdRg+LTWuOaoPaw1vGJOMxOjpzvl1Pjim\n4kESayiPz8Qfqp4BWtGs7kY2uvfAA5VO7nP/vQwOB2yi0Q0ZdmSb+rbH1Xyt\nBANH+pGMqS3jXO2r3Dm32Xir61FpJNUBPpojw99Ka50Q4HlnkMwLv7ARXIM2\nNRPBPIHFMh/iy5JaKGKwXDgCyDUqGN43bLCwjq+Pgisic4QPSCkBAL1s1CxL\noNnsmOeAGCWYxWMxxjn1r4gaNo/hNciuS3nEVDO+xGw60KPuZJ0SW3Y4tQr9\nqNI0\r\n=4rl4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.2cc6966f6.0","@material/rtl":"6.0.0-canary.2cc6966f6.0","@material/base":"6.0.0-canary.2cc6966f6.0","@material/list":"6.0.0-canary.2cc6966f6.0","@material/shape":"6.0.0-canary.2cc6966f6.0","@material/theme":"6.0.0-canary.2cc6966f6.0","@material/ripple":"6.0.0-canary.2cc6966f6.0","@material/animation":"6.0.0-canary.2cc6966f6.0","@material/elevation":"6.0.0-canary.2cc6966f6.0","@material/typography":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.2cc6966f6.0_1585075468947_0.32777012881044976","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/drawer","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.8707953b6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a066a0367457980e6c6a25983009d4f97296f38","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.8707953b6.0.tgz","fileCount":46,"integrity":"sha512-srT2vsDoHOtmCX2tiL0tMp0B84UWHGk5I/Ic1SSYAFWEqpJxE4LW7S3k0sf+G+ACgIIYDAzSIPRmrvW/C5LGTw==","signatures":[{"sig":"MEUCIChjdJUKhVg8lOiWHmvHQ1UlsB2zsyPwHzBx0r+kekX4AiEA38WkA6sfekWvx0GFn+u4jdJ5f3zZcx9lL8pkAGa7qt8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelXjCRA9TVsSAnZWagAAlmMQAIkQ/22aryWPzH2Y1SwU\n0RquiYU/wIY/tX20pyhz/DdH71hKkj+QQcLOdPld+mQJMJx1b5EimNVHT5AG\nu0fQmR4qmTjZ4CDdtMpJWlmoC0gHbBRbOD1nJfyKdTqHoVQ6TRguZCylzrKk\nRJttsSbazyz9Wgke/CFtyUCRiUiEZbTAUdvwkSGfvf9rhTRxxXQDeUMgwQv0\nFcyW+en8Tvu2ZLEIwFuv9OSUzcms3B/nLX1uxxvDWBDkbuaj4fYleg2lHMup\nnF7Bnt5yYdk/CwjevklrOztSq5KSin308nyVz+nHR/NufLFquNk3kwurwQru\nRJ59SVZWNn6gz61QwcDaSVw+zF+7cfdWP4d7cjjRxtBVeRY/+WUDMRZzHIFE\nnzB0a1wTwchkz+ziUusbEmiWKcOt/Y2JQktsKsvM0o9cpsIqhcMMZk43fzTk\nUqS7YH1P3oMvKuOo6RIpuyghCWbVffV6v/WxG/rKGcJXaCE8Wcly2wMRU7TA\n0IAwr44qMv6n7lymo86A3LS9qkWgYO7f8SMXL3nGhHIUzZRVennRP6YI3lyU\nB+Jl5MDLnwEsauNKx/OXBbtNBCewNUK3/9QpeYaz8inCXKw09Zjx74SBIe1Z\ntAecIKmTjoDDLNwBnHMnp9QpfAEhIL7fomzSmP54uRLohguv6yvEPzZePIsb\n9OYt\r\n=Dzwc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8707953b6.0","@material/rtl":"6.0.0-canary.8707953b6.0","@material/base":"6.0.0-canary.8707953b6.0","@material/list":"6.0.0-canary.8707953b6.0","@material/shape":"6.0.0-canary.8707953b6.0","@material/theme":"6.0.0-canary.8707953b6.0","@material/ripple":"6.0.0-canary.8707953b6.0","@material/animation":"6.0.0-canary.8707953b6.0","@material/elevation":"6.0.0-canary.8707953b6.0","@material/typography":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.8707953b6.0_1585075683289_0.07622646439984226","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/drawer","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.10af6cf39.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f92a03a719dfce695c8d4aa61c622b835fb09b3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.10af6cf39.0.tgz","fileCount":46,"integrity":"sha512-hMHEsBZD7PVisNd2lbScBweBo9TAPzYH8mLE9bMiaXz2EYOIcMeFgG6ZbVVPXYWv86bO6Ll9jWU4ZVsFSuRRnA==","signatures":[{"sig":"MEUCICvi//9beb4W9cfB3NDHCVMzBOQvUSjvI1WyikwGAbScAiEAlwL4aI39b6BCA/ljdmzuwkp617boQop9Xp+cj9iKMJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6CeCRA9TVsSAnZWagAAR0QP/1sotYLDdBT4t890NlJQ\nap1udBtF3TtI/QzGPxeLbG7VGApD20HiorioFegTV9ouuZBi7jpZ7bCytcPX\njNCKsAwxotcCiwvUQiQlqELuwn1ykQ577H1QCLTJLB9aY9t6IDEptRyUunPf\nIIOC3IhEesojLDINr1MDIS8Uc0K4gFRxFiCGgu6PAie+lGFH2i1D6Xd4jm8P\nQyjYWXwosRwk5A7S/riNcVpMd7wH6lffS5EXnjbgqQ+GlyeQNeEP7r0ORQHD\nMCVAAwjGjsOJi0ZQ77hdaiD9Nx9GcyWMIJdUMj4lt56bA9ifNcPA57UA5F9c\n7QkrIe7apd9LAS7LBCiwPVdUFCt6RqVUWvI3lUB55y+xhMPYVoog9cikpTIV\nU8lVFZ1XH7jhgO5sq99CcOSElqhvI0gMMgEYJ1j47NitrzR7LOaixNfLgdSK\n6HXHXGvc4NCb4REMqfPMUoAry3yL5PLjwnmQpHG4v0re+qIpf78ehixJZRIR\nEPNsIqNH+u2/gqDpRmsQ58HE2gu6JIHE3zoo94WVmGUe3XJHCAmu+he7PUXX\nEkaBY5U7QH7k9h2Etqlmlz0ibDD4gso0zJX+uOi/oSOWaFtX0YRo5rLqxdkk\nFbXcCu7LsQglzs+r2+B18qjeC6AggBJLpRtRGwuFV8uiujxc26NQOG0P64xP\nrk3y\r\n=42vC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.10af6cf39.0","@material/rtl":"6.0.0-canary.10af6cf39.0","@material/base":"6.0.0-canary.10af6cf39.0","@material/list":"6.0.0-canary.10af6cf39.0","@material/shape":"6.0.0-canary.10af6cf39.0","@material/theme":"6.0.0-canary.10af6cf39.0","@material/ripple":"6.0.0-canary.10af6cf39.0","@material/animation":"6.0.0-canary.10af6cf39.0","@material/elevation":"6.0.0-canary.10af6cf39.0","@material/typography":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.10af6cf39.0_1585160350058_0.2742658666448583","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/drawer","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.7d8f9c8d7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a1a615a4e678aa4b1c2167dbcb0c5c6d59e8c85","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":46,"integrity":"sha512-qSMrDGxX22yvKnjE4BiBqq7eMFQGL6KekkkAQQ4Ny9xTo0mdW3CLzC3DABNrGlXeShhoeFZi7vXK/nfEHJy0aQ==","signatures":[{"sig":"MEYCIQCP+FJTlllPmzT/KMZwwXMH/QkPPOiFbhcbIoiKZKaQzwIhAJHYT9huMoY1QK6sch68vdQ1M2hmLxQ7fs2FBqo5eAZ+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkB5CRA9TVsSAnZWagAAntcP/0qIXpSqw8eRpLqIb4Vq\nHi94XxElc4usVFL5fQiFb0Bp4BbH00F8efTacNcxNptTjZ2w5uetEpmmrS9Y\nbirHXz7iXU90pQbopMZtlyKQUhlxRr6rLBECGi5Ay5BXiRu01kOi+KXHiqRX\nrH+bIjwZNgfo2Qfa9d+Sc4lM0f+veCfWkm8KyBvn395mM5PtQS4C2lmHCjUc\nIWt84hvdEV0iYhcYMKlqP+owOKPJpEtjjwf/ZTWjx5m3yXjbU1mnfJKbCZe0\ngWibM7j38K3i10g4sFOFmzh3AiSzB/kSs+tDrbdfkoXD2hMxVeDldB8rN2Tm\nWNgBj/EXobUfIwDT3PKqt2NIst8LrSqtVeDEImGJVj7bOTS2KozC37iUudKE\n7gmgnZqD/WG8CyVH++TYeHjHsLXvp2SLS4wJ6a4YrrDTI6Cs5xrlgTRGA1no\na57C5EfLyVaZ9BDQlR8WQdu0l0Fs6xO3cyVI5PFW5JBgC6GTP6gH40b2/kov\nN68pEaJJItrDCx1EpMZC3QWntALTvFv3by4NLWyR9+Vn+PjNp7nCCaOAlS9p\nJX+Yp7kMebIdgszbeuAHg7wKILyvDe0vCxvq8L/PcNxIpLaQ012DsNtahyPP\nc4iTdg9p378yUyv1lFxbTh0EJ1R9QX/BWRljYAnH5cg/JGeHwTqlE7z+KpLB\nWCyz\r\n=XN+p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7d8f9c8d7.0","@material/rtl":"6.0.0-canary.7d8f9c8d7.0","@material/base":"6.0.0-canary.7d8f9c8d7.0","@material/list":"6.0.0-canary.7d8f9c8d7.0","@material/shape":"6.0.0-canary.7d8f9c8d7.0","@material/theme":"6.0.0-canary.7d8f9c8d7.0","@material/ripple":"6.0.0-canary.7d8f9c8d7.0","@material/animation":"6.0.0-canary.7d8f9c8d7.0","@material/elevation":"6.0.0-canary.7d8f9c8d7.0","@material/typography":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.7d8f9c8d7.0_1585332345102_0.42366231732695536","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/drawer","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.d6315efe2.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58d50ad6bb9029f006e3196cfd47dace3569ab4d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.d6315efe2.0.tgz","fileCount":46,"integrity":"sha512-1e0kFt/PgLIt0hUnwhjZEudTdQkk13ITO2jR/y9duwjY8mbR8jn6oC6okFqPs48BC7plYmD9oqH5BFZUYa2uGA==","signatures":[{"sig":"MEUCICBHB9/yRhB2RwEuNYwk630ep50oVxDa/Wxw0K0tYB57AiEAlOI6TofRKqM8qJN6cHWFMoM+jzF9YjKR7HceBWFraAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflqZCRA9TVsSAnZWagAA/YUQAIKyxBpVJ1pQMwioDYhQ\nPThZ5Xy9kBpkdiOeVPebRGkTwKwTHqrbUaHEDuZ1OLXEm5ko0JNXW4F2xK+R\nvhxVt7Nx+V22glDq2r6UO5KQRzftEiTRbtu7KCEMF9teJsnsEkxyHYpel4Lc\n9HjXfhhjOAGwMILCRVM+rMtsYTLl/D4zZr6mXU837MUjFiJAms+4njcFI3Io\nqgRB3+J0ERlWu68yfk/c7FnVliqzT6qHWKJdIkx/G0IAp+dVlD6VsE25BOOt\nQDFmFfS4o4/D7qQ+PSkSkDjnBlhVaEdW6KFwHUeJL/05d+3yt8EBhYyRNzte\nUftvfARp0ICLpT6Sw17G8YoiwtdoPycZ8Il66LpnRRLSbBD9/OIYEtkKr8uV\nhPqbechcet0It2XH+g19w5SMdxc8ZeFELSjMKauHI3t0YuQIk/+EzLxg36BF\najeH2PaqHFbrY1um4YgiufcQ03W6PgtZPqkBUWpBYizLOVmXzdqYeE8TjYt+\nz/VcHKJeraLX/AB2lR7YNkziQ7W6kaPEQdrGMGFMdsYnnRpGng3Sn0iw8NGo\nOZAkxWKsTtQ4Uq+nUMsEbGISPGaS7pzd26r7nLLo6uZiM/dcMO0+Z/dgGJTu\nnvAkaetyz62N+j2yyPxD2eBSciR5znKrSn6Uxgf8b6cH6M+oSbqoUfSRsv40\naUaR\r\n=OKxH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d6315efe2.0","@material/rtl":"6.0.0-canary.d6315efe2.0","@material/base":"6.0.0-canary.d6315efe2.0","@material/list":"6.0.0-canary.d6315efe2.0","@material/shape":"6.0.0-canary.d6315efe2.0","@material/theme":"6.0.0-canary.d6315efe2.0","@material/ripple":"6.0.0-canary.d6315efe2.0","@material/animation":"6.0.0-canary.d6315efe2.0","@material/elevation":"6.0.0-canary.d6315efe2.0","@material/typography":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.d6315efe2.0_1585339033228_0.006920348396121545","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/drawer","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.a3016368d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3952aacce766bcded2fea16ebb73e024e50de32","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.a3016368d.0.tgz","fileCount":46,"integrity":"sha512-ku6KxbnMvNv9fJ2e9zNEuEH1F5M4ldC/ulQ1lwW1pzs7cMaFq2Wnw0kMZ25hgr+K0fwKfokcvJIagS6RlmDJXw==","signatures":[{"sig":"MEUCIQD++CLsdQaUsVnG65PcckH7zWFTr/5y0S8pW6Dd5exb/AIgAcuKm0iH++3Z4AftGpG3r+zz/cyvFZqXa+UEH2e5J2s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm4SCRA9TVsSAnZWagAALZoP/iHEpeDthmZ0DQiYZEqB\n5WLsj7HckoBUon3JRU2dcIJeoHRvmgfC3s9F+27zRSvuIhxNLt+hkMzoy8l+\nHfFU064vr7UnI7/XbmvWJiHnL3KK8ZPzGaozAll+StvQBXgSRGpZq4Hk4mXi\nTcmzhyazZoPNHz9rMGnkMjnB1jD6R8aRBIBqVfpDz7jvfdRVl5XdwclgJSoW\nvRi/qJvtCCCdREn/STym5xHL/3xN2n7lxP4Lwosp0UvSeve7miqdSCF5e20A\niwzfHsk/2ub8gDzlbiKuRWEzpRPPwkMpgDoMcybyD/WwoJbQUs6MLlLk4dOx\njVBe4ITGcEjs6VV0ZzeZTsCelMcLhsLBKOVYIN4VHFaQXdeTiYY50+gHKw3F\nFJaVRQr9BPMIGFS3vgg+m7h/yRDuuXPo1YMArInEPz4Vs+qa58dG3VCgyxIv\ncsZykwA3gnTJn71qHcW+9u5osYimeJg/ymnZ6L+wpNgnH4lvsCrZi1r4pGAG\nsHyYCDN8UKoCDLP/fUU5fNNUyKrtOqoNqhYGRfcQrI3pC1CZ/u/66qiCE3CL\nEZlmMQ9rDVgcUh2s82kkt+M0el71S8S0gugNSp7WBzK4AmhfeqXX6Bq6TCcm\njrh/WcDx1aAk/eV80dEBDK4M8XBnuCrSes9p7nkk2+oVnR8WNjAzUVLHcaiH\nbyXW\r\n=3Svq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.a3016368d.0","@material/rtl":"6.0.0-canary.a3016368d.0","@material/base":"6.0.0-canary.a3016368d.0","@material/list":"6.0.0-canary.a3016368d.0","@material/shape":"6.0.0-canary.a3016368d.0","@material/theme":"6.0.0-canary.a3016368d.0","@material/ripple":"6.0.0-canary.a3016368d.0","@material/animation":"6.0.0-canary.a3016368d.0","@material/elevation":"6.0.0-canary.a3016368d.0","@material/typography":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.a3016368d.0_1585344018369_0.02021504647439909","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/drawer","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.4b45b6620.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67c91986eaf93dada011b0b2011ebbaaf0b491be","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.4b45b6620.0.tgz","fileCount":46,"integrity":"sha512-+Y6xp3zU4oAp/sghBx76VX60VKYIAD0PM73KyIOiJ58hxN6ZpOflQ1Q48OlGBV8j30dRNdRitt2eTmf5yPa7yg==","signatures":[{"sig":"MEYCIQD/LevfR9+ZpM6iNCfFZOUj5Lnv4FDyzTH03MzPwq1QgAIhAJrmuUdMoLZ8ILv+IrOfzccXdw/O2mkHZgbsuzew0uZW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2hTCRA9TVsSAnZWagAAq1sP/2WBYTP+HcgPEFwPlnGZ\nqOGNxEVk1mbFF1Plx8uoAcoL5dyYbUigoDPCZeDoYLU2TG7E6dh8peaG66I4\n+ylZNIoNg4XpZ0kDFMixdDZ7YqP6r3KEvllb86ywF0JUaDyYxP5qSszF5/O4\nPhv+ULJFh1Z3LnqhCkXo65U8wLm68no7/VRm6ZFKmW1nRh/GTGcNdcEvXu67\nZm8V5bAcyrMnViLuR8xzoA45mH9GO0YWS2UH0gQCy8a6EiUaolsqNfHSiSJC\nd8OObhGjKgxPty4jaQGpnYeqL3TOJjp0YVCCsMZG00GmbhEeZbGaudm/j20/\n9oDWTDc1vel728ooMxEu5tKCMBjGWJ1TwyCNzAbIxZh3sSIm2tEccw2qds7I\n1JbJU1V3wP/ZKEvbxzkYBCsvJ5VrYKJpkxwaCzcGoAkaD1pTdsQI18SIfcZE\nEg8LShjfod0v56Or1YNVf8PhggMIUolZ/MjTDEqqwqvrshL+5huU02gYGFc3\n/Gb3QbCVYU34olbA49ikvq+jJYoYa+FLX1EMHJYB6lG/kAaSX3oZJ6Oeid/w\nVddc5NNxHcgwJd5Fgq9vYvPOk8lkuRzFWwGbAA/5kg11BynashrUv8mZc42L\nNiwapTKnyDBbVl+eMzreAMmZAOC2iNwo0RGqyhIn3vynlEpYn5Vht770Z+/h\nWqZS\r\n=xWDk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4b45b6620.0","@material/rtl":"6.0.0-canary.4b45b6620.0","@material/base":"6.0.0-canary.4b45b6620.0","@material/list":"6.0.0-canary.4b45b6620.0","@material/shape":"6.0.0-canary.4b45b6620.0","@material/theme":"6.0.0-canary.4b45b6620.0","@material/ripple":"6.0.0-canary.4b45b6620.0","@material/animation":"6.0.0-canary.4b45b6620.0","@material/elevation":"6.0.0-canary.4b45b6620.0","@material/typography":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.4b45b6620.0_1585670227039_0.7113420707924696","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/drawer","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.e84b9c8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39e82e9d6264f2bfb290f5cffeefcc30c9d97a6d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.e84b9c8.0.tgz","fileCount":46,"integrity":"sha512-PCMtJq0bz/8A0bsD/CHMi5x14CbAdViISoEhHFAzoXnNgP25n6Xt8GNxFA4ncK/Xp4ItH7KL+RHhEenhsoyVow==","signatures":[{"sig":"MEUCIDgTcO0WCf9QJ1LHx5esXcU9+7I86I3Eay+ggzpUM4mXAiEA5DFgqPcNb2XQIHmyFpkTh14BQHT1rbZa1rMPv4XWeWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513343,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMfSCRA9TVsSAnZWagAAbeUQAKI8EMRyG6wq3UJAlC8z\nYuAN9wa4fczG2BkHXebLLj5s6fUqJ3IUXnyxig1W4O5fPGTWDRPCc8YrS6Yc\ng6YN5bgVXza0z9cdpGYr2qG5mGLcNKJC4Z7INKXhCKwhmLLvPL1DaeY9LrxE\nsUH8Ol5N7P5wdxJ7d0Lp73TxWlrmOSvdVbgcMTwdw+bdBFQgdEW4ubbaYFPx\nV04gxRoG/tdWQIdA0N+OqqDJ0mvGMeD6N7D8zJAnYJa0IWY9A8vwWrGZQWc6\nULdMbzhYVlb5oZWv9csw/IKTAI3QgGNZbMDHXZpakScClW0qIbVsUDCD7r9F\nlylxMBCWz4PdUeguCYHNzXWjHeqc9WUa9mBYuFWMQ1pCMWjRRuMF1U/85quB\nST7RWgn3wXx/rYg+xSNCpYl7OzIhD6G6RoF3OsBnU9v0voR4zktxBsweiJzi\nEzM/QEqbvR92lxtI9kPvEq7f7X0ksayyAffMw/GkhK96qVlPqmF2MyeqVnks\nGDVLFysXjxM+RLLqe+z9Vj7GGmSWk3Zl+9bguwTxoYyx9Jo5WNTwnPQIhieL\n/r7k+PKVdatvPODrfh9ewlr+6NXDXyhQwgYtRdl77oM5EbPX0nCBUAOO4P17\nz0Qh7EOGT3uOr7cJw2MwmgZEZ21BtSIMMP2mh1/LYkDwQqNoqbHbWfuOLh8l\nAEsv\r\n=XYSl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e84b9c8.0","@material/rtl":"6.0.0-canary.e84b9c8.0","@material/base":"6.0.0-canary.e84b9c8.0","@material/list":"6.0.0-canary.e84b9c8.0","@material/shape":"6.0.0-canary.e84b9c8.0","@material/theme":"6.0.0-canary.e84b9c8.0","@material/ripple":"6.0.0-canary.e84b9c8.0","@material/animation":"6.0.0-canary.e84b9c8.0","@material/elevation":"6.0.0-canary.e84b9c8.0","@material/typography":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.e84b9c8.0_1585760209958_0.25436506319538665","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/drawer","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.e33c49e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5b9cd0f0748ebb84952be5f7eaf74f9049bffd9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.e33c49e.0.tgz","fileCount":46,"integrity":"sha512-eOOMe8l+79E/+h487xzRapCygJ5Wt2dVacKTSc+7gn7fA97hyEw8NGKdVKA+uN4PcICAz5N2PLOYnnFJvtqR5A==","signatures":[{"sig":"MEUCIQChzuyeUnEdNNooh1qjAdPGRZvjc/9BXFIjh3ACAuVB9gIgeoUirfleU59kGpNDWesp+cCT6h3ZpE/W2Szs6oEaAOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS1sCRA9TVsSAnZWagAAC8wP/RBuHkeRINSD09UXhe6Z\n1tEl5LpFeQhEOY+p5XD9vQonwX1kcvnUwzee8kiosbGZHNC+TXX1k9wt8uoU\nr6nABkjPgxG3IefPq4CJ3VaU4tgLEYQfs22/Pbr2U6lR8uCTtGHsRa+qKQfK\nIj8NFEbWmOfy4eVV+AoYqbi4cEeJ/e2S8iyv2n1oAlkCejrUlndFZQe02g7t\nJiHYjMJhKLlFOQvj4WDk2WtUwrUHzgGyETRwCX1QJwMXfg2DV9kN/dxldQc1\n82DCoMzPQj++FO2fFynHRRXlQx7bT6boZxoZO4iOXtFDaxrY69bKIGrODghA\n0O9HpyRt1SeGpDI5/P0vgfI5DI9IuQp+3X4v/D1ebgjii49aaxBEVzfTuVM7\nGQl0oyA4Tr27LjFjGW+2AkGZbjm8hiLYrNUO0+ozDqrNcoGLndwGKzn47XZY\nmzC0lZkPZi++LgAA5s1vwvTAoNxIez9SAylbPGGx6swhe1bY99NKG5SgI+Lc\noX0hX5p8wNF5IDobz1dMWG9aDdS09Fc82lAZyiHsmqn9BxOVv61v0JwE0VPI\nhUSnLzphLHX1a61CVUtd+953fF4Tag/vFU5IEkGTyl9WhcP5t5bTvAFpo/zF\n5otttXyBNZQ1imCd7i4Pv11p+MvSp3Pltnn/na3mCIW2mhsVhOKE9OffdthP\nphYi\r\n=dnqP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e33c49e.0","@material/rtl":"6.0.0-canary.e33c49e.0","@material/base":"6.0.0-canary.e33c49e.0","@material/list":"6.0.0-canary.e33c49e.0","@material/shape":"6.0.0-canary.e33c49e.0","@material/theme":"6.0.0-canary.e33c49e.0","@material/ripple":"6.0.0-canary.e33c49e.0","@material/animation":"6.0.0-canary.e33c49e.0","@material/elevation":"6.0.0-canary.e33c49e.0","@material/typography":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.e33c49e.0_1585786220230_0.9290635493394548","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/drawer","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.f1f8e60.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dbd6a022b454a91054ba3e885c186a151cf3d0c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.f1f8e60.0.tgz","fileCount":46,"integrity":"sha512-7OvxR6kbEFJOfK2d6R8JihvYYO0aZ0EGU1GnCPn3/ZzELc5lf7EWj7soK/t74okTbrHNNx4IysSin+rMqBii2g==","signatures":[{"sig":"MEUCIQDKQOHgblq/lT8rumeAcktnu/yLPCxTDCiZQjraifYNngIgM0KXbDTRcVYPsjU58czKMAKr4xj5fiY7lUfaR+bCN4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjmvCRA9TVsSAnZWagAAJz0P/0nfYba1bkoIbDETElN3\nYS4+LelX3jV/dVhtFJa6DDSGhzJhBY3dbxfEqaNobWq+2aWX/Aw+kzgvrh+Y\nveKl/awCCSp0yop5k7MM+vZh9S7h2+tFC6lqxGgBJDbIMwxU/dWnZprNwlTL\n0N7uHP7u46NhagZRPLP75+UYykxQ6Z2/RxTOhnegjM+o6Rf8VtZXm84KgUSn\nDRO2OZ5jBu9jrD1bWef64x+u3kFfJZS0nV0zO3flfolNar78ROWcprVhSl3U\nMRh/OZta07g+Yv9TmbDsRPw4CJm6vFjP8kvUrDTbgh9/9ircn+XDmAZCDzv4\no3/KuIXz+z6N/7gGyCwOm9VWumUtfl2GeV617SzcbIqQh1k+K4J97CDLuQwL\n9wyy+WQp5Ri11fu5TsrDb/5LNnzg5L3dhmKkF38nYzdA5bPZyi7hhO1+Wyga\nqss3RPH18I0rBfuYd9aR9N3OWxiTFvZxTV6T+EukPL/UzwWvi54Kcq8RdTt+\nErnex0uhI+5K6EDMwxChRECjvpBhG/VG6uLz4ogBuPxFKzyvO9lHVqcjG/4Y\nprNhuOEeEcOFWrS4YLy4Amc3vqyL+KgDwc0iDk9x4qTBlnEmUmpUdTTVpx9I\nvaUFIsb4sq7JRd+Io4CYLJOFRqsnPqpwQbIhnIcHTYouVQlyY7SFYxJ59MaG\nrCDM\r\n=9mCV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f1f8e60.0","@material/rtl":"6.0.0-canary.f1f8e60.0","@material/base":"6.0.0-canary.f1f8e60.0","@material/list":"6.0.0-canary.f1f8e60.0","@material/shape":"6.0.0-canary.f1f8e60.0","@material/theme":"6.0.0-canary.f1f8e60.0","@material/ripple":"6.0.0-canary.f1f8e60.0","@material/animation":"6.0.0-canary.f1f8e60.0","@material/elevation":"6.0.0-canary.f1f8e60.0","@material/typography":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.f1f8e60.0_1585854894988_0.36385998327583935","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/drawer","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.1e17c49b3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1da4effd10e7671d6cd4e5a994282a29ff1e6cce","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.1e17c49b3.0.tgz","fileCount":46,"integrity":"sha512-6EC8De71m441BlolH5M9HPhX9kujbJ2q9HvzFsBDdwQMRX/4Fizg23ABn4Wai7dWmaxty0sZlMKBvXfFJ1IJMg==","signatures":[{"sig":"MEQCIBg0WhaqbqgNwb3Idh0xwYJw6UmpjXGpH9QANs8OgdnsAiBz991Vo+kgou/qHmIUSR5kA5JFRs26cnvRCzPPKRoulQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3rFCRA9TVsSAnZWagAAdwEP/j44i5qyJhjCtx6khazf\nsd0B+DsBQ+wzB8XyliDfIf13Mtrtbc6b1EKbeW+AoA88W1vyDdDsTYFrfKBU\nIweo/+CWx+qjZVNDkyxb0zIvUCeBKsMWsLOZfZjugdv7gmioBaVeGpVM7rhy\nvXF7G8l2gIm9iMCP+ij3L4T67u4qzFw6ZkTt2nnPkZpPjaZRUFPmmaMKue5S\nLQhDYjJH7UDocFyDXJH4oSJBqtBvPNcnhJhJ+8XtplyLUleKBPA1s3D4eqY2\nl3KWsVd72d5JzqBkt4HK5n5XZ7eGGZyZrzf/LH93G+CXxpsYmYJWPCYVQFBs\nO/qK+4EJrtPk1ysd/gmt/ifjFgw6ryjEDcmtaFSlLX5AvHHcIxfQp8TUve7U\nyE1p6SEbsnpIbFAQpjf0tdwnG4m3/uHU/6HEIwBZop41eNNIvCYIk94r5LVz\ntRscnMHHrvDliCdyzc2AnFd+GQX6vWZvSP7sBd7wJQE/6EIzr94iGbl23za5\nobYEZw/izSZFyL8AqL+9qCC/F42OsfmCnYurhcfoiGrpDuMNrzpAGR+n6NRL\n9uTAuK5RywVBY0ErRwWnMUBr3gDtsuVtctKqTre3g28OaaNgWye9eamYtId6\n0oiQAeNmlff9pAXOvpXHL0ZyAE3+NynLYR0EtzqSbT1V34dBL5Hg6cI+/vrJ\nEEha\r\n=8Y8H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1e17c49b3.0","@material/rtl":"6.0.0-canary.1e17c49b3.0","@material/base":"6.0.0-canary.1e17c49b3.0","@material/list":"6.0.0-canary.1e17c49b3.0","@material/shape":"6.0.0-canary.1e17c49b3.0","@material/theme":"6.0.0-canary.1e17c49b3.0","@material/ripple":"6.0.0-canary.1e17c49b3.0","@material/animation":"6.0.0-canary.1e17c49b3.0","@material/elevation":"6.0.0-canary.1e17c49b3.0","@material/typography":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.1e17c49b3.0_1585937093229_0.5622796688825065","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/drawer","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.6a40ef217.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54b429842647839ac25385076e4cc5535bb1818e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.6a40ef217.0.tgz","fileCount":46,"integrity":"sha512-l5W/XGtpeIsSEm/lXYtA31+EfdCdOAiVkp1lfWodfafaZK/EEai/KKdzbtSg8Vpr+Lh6HFH5kGjwJ6iZo6Or1g==","signatures":[{"sig":"MEUCIQC+u3iapakFMl9pYuBEXznaXTNcG269cC4V1vBq8G++bQIgOgAVAv3eAw3+gd/abtkUEYL63gA3k38oIwkizTk9Shs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh42tCRA9TVsSAnZWagAAjn8P/jU3YDATg9iiCpoOF0MA\nOEkLE5TF7dn4pcPqXjYXtC0BSMl15FusZHchu7SKwemORzkitBzKNOLmYkwC\nj3Ryz5AiK2Hn9uZ5eTdyziUkSu8AbRsaphmjbwQnJ8rqnmrPbTRuvMuybxI/\n7M5pL6B9+isr4UpXyM9gdZ4zedFiH9HgUlyPLN3wnHi76vUdlepPKCAtIT/C\nlIdbYUuETjQUKHWJW99q9ZtJcMymq+0cDHiFzOz+38OQDpag/XBdQUM9kvQE\n9lVXWjwwAirrSCMWfmb06dq4O+FvZqkVPskWLGc4RR6pp+iAkEw6xIslKFyY\nC8ECxLpaqmNMN4aK/iEETD0Or73LsbUHgTkafUuzW5LKljFOCI9JxI3u+tpG\nf5pe2aSf649xKfX+8CDkRVPvXIx/qHfimQKknWOj0Nt70tE7Er6bkqD884yZ\njV8TEMPIpO3Cn5msSYCQgmQhbxXQpCTMEZZSKrwVeNuLHhLOhHti3xxo+xT/\nAhJDbmhey/Q01uF4KPg67ZY1U2qpXTDIls4xikaFrcdmDzDx8ClgeMTGYGmw\nRx0+IHUmCjt6VvOzEjnTneBsepT/wVcQhdmqiEyqH+EponUhd9+HUHrGBCKI\ndYC63QGeOz5OsGBXkFxpLLZWcP2UVKc+0/FdKW/SoWiR2bGcx2Nuns/BQKVt\ngTll\r\n=dYXH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6a40ef217.0","@material/rtl":"6.0.0-canary.6a40ef217.0","@material/base":"6.0.0-canary.6a40ef217.0","@material/list":"6.0.0-canary.6a40ef217.0","@material/shape":"6.0.0-canary.6a40ef217.0","@material/theme":"6.0.0-canary.6a40ef217.0","@material/ripple":"6.0.0-canary.6a40ef217.0","@material/animation":"6.0.0-canary.6a40ef217.0","@material/elevation":"6.0.0-canary.6a40ef217.0","@material/typography":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.6a40ef217.0_1585941933285_0.1642611944187753","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/drawer","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.5f24faacb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32a1f815e619f2094647e2612e16ff9c6e8a0d84","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.5f24faacb.0.tgz","fileCount":46,"integrity":"sha512-Daeshiwkj896IbwxhwGbtnkhdshAYxPIpKXV9t+1CfVHnoWH1TO/n8eJFQygdTDafcG2CezwsM2dDZUDdv4cmA==","signatures":[{"sig":"MEYCIQDY3n66+9CO2l0zB2qcbL1uqjipH4iTOO7xUz0LPKQdLwIhAMEisjct1aLrrBv4Q2mNlXt/2QOhGHbdN6CNdthMXYPp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje/DCRA9TVsSAnZWagAASVwP/1/H9AILZ8Srxvz4r+Fg\nHAxHEUBBOTJIyj7RUqzslGhh4sSBVs78Kue4/96aeZuTLk+AHA+gX7Wtrv0x\n3L3wBa/Axe4j13IPJlFoburp6yAMob9cfUwCayYOzMdc6yKoWtTrnJwTsNx8\neD8Xs8yKaz3BNrxsEKnmUFYn/qXYSa/shi8mdV+OFSr20dejX7xrl05aRDLH\nj94GJUVYHptwxCVdO3Sb6FLr3fKRewA9UpyHCupc+BVtrWwapYGxEx+0kuH2\n6hc0MuwfJF7mnLd1DMWbKCFhXCzAvsQSjCX03GFxp6ACEwtBLyH2UQ9TxjRF\n2h4cBgspVFjZKX1v0O1HDr6XtaZghqNdiOW7Qr4J7hG54cMe2QLhRp7bK6Al\nh+2WUE+oiqaNoJCowu50JRIVucWZihcDF8MUpecfPQ7C0jV6342XCtx/8+Jv\npRll1B6qHgfKM3ulybEbwwTlSOBu0x/soFn+1asDfpppWCFP8U8IypCPvFc/\ncIL0ze4f9IN0QbuA+pzqdboYHaTAtCaBbkQEwar2LkL4vH24Mgej4y7z2g/m\nTN1RPAYItvyisKmgzEm6cFWcnhJz/JbAroP4O/JIUHlmoQo/PC1Y006T1CMA\n24rCNdiSfBjl53eg1Lbpb9mCXUUb/whOLwyb6nNI+TfpZ6d/z7xZVExlNpKS\nU66/\r\n=IsIA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.5f24faacb.0","@material/rtl":"6.0.0-canary.5f24faacb.0","@material/base":"6.0.0-canary.5f24faacb.0","@material/list":"6.0.0-canary.5f24faacb.0","@material/shape":"6.0.0-canary.5f24faacb.0","@material/theme":"6.0.0-canary.5f24faacb.0","@material/ripple":"6.0.0-canary.5f24faacb.0","@material/animation":"6.0.0-canary.5f24faacb.0","@material/elevation":"6.0.0-canary.5f24faacb.0","@material/typography":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.5f24faacb.0_1586360258559_0.11815870520076177","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/drawer","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.82fa986b9.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fa0d9cad7edb0577f92689d43a721b0f902c338","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.82fa986b9.0.tgz","fileCount":46,"integrity":"sha512-GqAZdeoHIvo8VBnJ6WSjajmZEWyst5pPnlcNjzZY7S81O23V0D67hE/+1GfnfPoi7/XbHPpWa8hzeI2XIb3VZg==","signatures":[{"sig":"MEYCIQCvjO5agZQpjP4ozODIdCLJFqDjNXYVkmcKiCTfXn8eCwIhANzIr1CKgbyuDSOmkhy1iJL00EJ0LzpSI5BVPeOkKyq+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfDwCRA9TVsSAnZWagAA5k4P/29xxX/HeZW48JRPTjog\n8JOE8js5nq0bRXoAsZFPWiS8YUaIpP2x4IUWOrLEChiOqVaXC/1e7ma8mz/D\n5EMh9GDX1nI7xhG/XdHhOnxDRRImUQHPlDJ0ZxudbhnknThCxX6m/kfNuNsD\nsPBFki2A1rBti7R7NM6FjOLn2wtSl+2tYlFLvSCwUk2kzM9fodIrJ780SnmW\nD22dmr0DrFM2EZCH36TniH8CbD3OgxaDrULDZIG5s0q2SMVc6gcibAF7Bp4R\nqb1kvQFyOs5o0L9gvPf9V0/keSKm33JkLhEti/wCdyjrarQ6OM5s8rgW5jh6\nAbohnDImiLGO1fSv6YrG6ZIQLP8xJy1M5NrxkwM/pU/aH9ZJBo+5yXY/UJJO\nm+G6TvMLdI9MjkRri9pq9T/sotaKOGXOznPE5JWcaLSQMV8fwwn7QfHQwLpC\n99rtEMGkDIdrSx5OnQZqz/HmIoWRsj5KMddtZdKubDP0SybRaPdCnwaO+A08\nmyoDjxC5iqjycsaY96s7zc3dUxRU40r1EY6gwVeGLxqWJs0JXb/B5W6x03+1\nGSxtkShHc2X96bDi/xrYBeNN23HJaTPrQ6C1A3yQAba0XWvHZF1UZR/1uSi+\njGAAFKzWcPb3xiJ1YiIEJv0LDsPgvSty0VtVJq7rfNPmQ1ryG4l5EGXLwYUE\ngnsO\r\n=LtTo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.82fa986b9.0","@material/rtl":"6.0.0-canary.82fa986b9.0","@material/base":"6.0.0-canary.82fa986b9.0","@material/list":"6.0.0-canary.82fa986b9.0","@material/shape":"6.0.0-canary.82fa986b9.0","@material/theme":"6.0.0-canary.82fa986b9.0","@material/ripple":"6.0.0-canary.82fa986b9.0","@material/animation":"6.0.0-canary.82fa986b9.0","@material/elevation":"6.0.0-canary.82fa986b9.0","@material/typography":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.82fa986b9.0_1586360560228_0.15242778254764433","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/drawer","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.9930d9cc5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06c030a405c093830499670f1c329f3b2ce3a4c9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.9930d9cc5.0.tgz","fileCount":46,"integrity":"sha512-mOQmvujDZkgmdxDsUFF+i1kpXlAO+bb0Si1IJbJRwN7P2G/xNE8povHbUAZrOxWbDoBwt0XogVZjCwpYSie3sA==","signatures":[{"sig":"MEQCIERKib0yI+cLT/6GQLWI9iQXnfq/F3B5FI8NPwU71morAiAiImyKNQ8+Q0FbmkScXAHfQkmMEJoIpv8cdZLlChh/SA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejib/CRA9TVsSAnZWagAADOcP/A3rZw2IIHQKU4qBvZ7t\nOmwVdZFHjnOpMWw1fXOpE7j4OqpGqGBSCPYXPHP8r3cr5c4dTe3hgpIWYW+3\ny3N10x+RHKExPeVph/IewdAJFOrzDaC5svcJ6Sfy3cv5LeBqRXxdCMD4FMAk\nXp0KRXlGBSqtcBhmcyvYYGMO5JkCgmto/qAesmV/A099xG6NTuxiCorKJscL\nL5jL4WQJaliVRZasg0wxqAmdV5FB7QVlEZU4zXU4rwJU2AJhP810CmS4en49\nP9ZAihINx/h0ix6RzGKZawoBmbLteYIwlbbG2iot7rEOTJ0MyvGjbrDg4LuE\nVsfrp11VAm8a7sgL0YJ/NXRFPfd8UAUnQCrlrKChqZlVwW9qX0M/tyRV0W17\nMfz9Qrkf3/bxFStQmHC+bDXxnCXpys0Z3wEh47nQtlIUtzO5UjMXqz9ljSQ9\nBRPy4i8CFJ/zpKoCXLZ6DcSSkD2Vcq8a62P8haoViwsJwUuVUekXRV0MFLDX\nbW6A4ZJrt577L9SJKYGOA70wtkD23ZuU8pqJiWj9cqFtf8hCunl96eGAyvF1\nJjn4M69izXGPMNZ/nG5FbAb2u8BRMDLPTuiEclDUgU/tDfKGlkgtKLuGNWWl\nguF8aE3F6RC+xkPD+yE38P+j8jzjzTC+EkgDOJ//lZwohotIcyJEuR8IG/F4\nOYA/\r\n=pBaL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9930d9cc5.0","@material/rtl":"6.0.0-canary.9930d9cc5.0","@material/base":"6.0.0-canary.9930d9cc5.0","@material/list":"6.0.0-canary.9930d9cc5.0","@material/shape":"6.0.0-canary.9930d9cc5.0","@material/theme":"6.0.0-canary.9930d9cc5.0","@material/ripple":"6.0.0-canary.9930d9cc5.0","@material/animation":"6.0.0-canary.9930d9cc5.0","@material/elevation":"6.0.0-canary.9930d9cc5.0","@material/typography":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.9930d9cc5.0_1586374398685_0.14509839503232547","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/drawer","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.6601d24af.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e6232284b32c6d227d2cbfef904c990c395f73f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.6601d24af.0.tgz","fileCount":46,"integrity":"sha512-cK/fdAjqtEjsKcR3MfQMbj4lmMbhj5Hm5fV5YAd04FqBvwjqZKQV6RQ5570ZB+ZzBhXp4DfQDe8t5XlxtIl9CA==","signatures":[{"sig":"MEUCIAR9Va9bGrbhV8eH3C3YKNPaKqeV1xhYhldaUlml7gIOAiEAoj2A6nh2wNcX2E5QVW1YzaGJGjfklTKY4PQqWcvKv7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmy0CRA9TVsSAnZWagAAJDgP/1AYse0aeYbp/QD6Vd9a\ndlw4AvFNhPdz+pkVKMt1pkaJ4468RkYR2Wv2c6z4MUedReMx/e6epWcBCkTa\nb1Lr3ypOpCit4J+GyqlBRCUbvga3RO9jP8SGai+rwemuQzLNnd+M6ogty7w4\ni+dcEs91CXJpJBNs5iNWdK/wpXHtFCfqAuP9uZJxiAn+i1o1vaTxsG0TpclB\nlypOBeIxmYJkkTMXxstkoPFY57T96wFu8UgF8YjgtkSljpE3usJKDKKzlJc8\nEqUbJPXskdAc8oMW7wWNn78srlwd717ZBVP4v/kU+g82CsOX9o5ozUpLxhkT\nDbqGZobG5vOgkz+gsbvUH+QiewCvzHiUenGXZJsrwJfJrSqBhS4DwTeB1Dm/\nKvvEDJ6latQE920BnQIkDvRYr+pHYeYgNnIw4H4YHpQjbcKb83YZLczfB9Rh\nXVB9bLyJyR+zRQtd8GmYeaFtAncqhy8VgiTadK0agi6RibIqnuaTzX9o27i3\n/z3I1NHBbjhLB1q+d3GnuMwEMIAkOFga3qQ5VEhixEVngPQTidg60jzR5cTD\n5UFKf80D1GlA58iMKkrlED4Q9gfnKVihtB3f7X78XXhy/FXa9tu9cNNcv75h\nM/iDT0a20/UL/abeINjlLiqaN+uq7plh6hoFPMRrKCBnDaMya9df9JWeBrq4\na1ie\r\n=a1sM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6601d24af.0","@material/rtl":"6.0.0-canary.6601d24af.0","@material/base":"6.0.0-canary.6601d24af.0","@material/list":"6.0.0-canary.6601d24af.0","@material/shape":"6.0.0-canary.6601d24af.0","@material/theme":"6.0.0-canary.6601d24af.0","@material/ripple":"6.0.0-canary.6601d24af.0","@material/animation":"6.0.0-canary.6601d24af.0","@material/elevation":"6.0.0-canary.6601d24af.0","@material/typography":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.6601d24af.0_1586392243674_0.3946678474181964","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/drawer","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.05f5e1583.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e7397168f0bbabf4ce1712bcf4953207d672e1e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.05f5e1583.0.tgz","fileCount":46,"integrity":"sha512-XdImAdmXRuSqo7VY1t+TB6Ew4YsdJB3k4qgTkviPQs2DuqSDThXz7sgpJbter/ZRJN5pkyS0z02j36fxO6o9Rw==","signatures":[{"sig":"MEYCIQCynGGm6eqd8XxmVLCFuAk9Am1RT6IYQMU7KEUBArq3KgIhAMQvQxAEw8E35Xl7H4nCB3umwyuAjfOamSIHplsNoddf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnDHCRA9TVsSAnZWagAARQMP/RjuzKRsUITHuG+DOn60\nxvmBSn9vwf/MXn4KpQlnSJxp9m5cbyw9YcC9E/bsJQ4OTxeBBUm3QJbAodgZ\nAUHtWn89u48vENHaAu77TU3HTKbUy3EaRqjyfUpjFrvRVvFE0XtASKS/NUuS\naNpLBjWc9mLNNtSXpQOUUZr6ShIuOmQhGNG1zSSlX8ETCAj1DhXp+ZUWYOdG\nGPxC4YQM9UQE0YXbiRKvSuHG7WhQAMITFmTmMyV6bv3IQm2omfcEO6J1A6O2\nZ8Z4ypH+DFgStsFQ1R7ZRqcSIISxnGza14TvNgZBuuxfavT4Wnttg2qedDI/\nF8ZXdtUwpRdiHL2ZeQy4rlrwZEYFqfbj//2Vf3tM5z8eyE1ycFhMuWXXOX+h\ng62tHcOKo9fSf9E0hT/WDG9dT/GXWntdgMOTvaq1/Nozc9/0YViD6DVQHcjx\nNtJ+8E2JlTKm2CzytoRP3juIvmszoSgi50fGEF5olGXwJD2IjkWDHP7vZx4f\neFnzc9fPtDrBMekdpjqDmNL7qmWpcLxjAGBJcKOjtxjQsFB48ROqHUhpUGMQ\n6SAlllJcv6hHyi5wF5DivDJLZCr6D10VHEBZlfwNwpuqQXsxum006hQ8rrW7\nwk5Yko1l5WWxRZBq3AwjVwegxkuvk3diAnl3fxQ3O1cE+tGu7fYksvHk6JvR\n7rIU\r\n=6TOq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.05f5e1583.0","@material/rtl":"6.0.0-canary.05f5e1583.0","@material/base":"6.0.0-canary.05f5e1583.0","@material/list":"6.0.0-canary.05f5e1583.0","@material/shape":"6.0.0-canary.05f5e1583.0","@material/theme":"6.0.0-canary.05f5e1583.0","@material/ripple":"6.0.0-canary.05f5e1583.0","@material/animation":"6.0.0-canary.05f5e1583.0","@material/elevation":"6.0.0-canary.05f5e1583.0","@material/typography":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.05f5e1583.0_1586393286823_0.6147814987129652","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/drawer","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.bce00e186.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"064054e5faab0eb304818aeb150a15b92d11520b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.bce00e186.0.tgz","fileCount":46,"integrity":"sha512-D6E0QQ1YsBm7eNRLQtkszlRH+wDp1gPbywydW90Ky0TmGoNnrSxDj+Z1vLaGjUrD0Zrh16YkmRkS7TPAaJ80gw==","signatures":[{"sig":"MEQCIF/FtHklZMkS/xv1UznsBQpgiIOx6/bOdSR7GzeTR2NjAiBQEAPWq/BizPbQ18Jf86Tyo88Qu+XdV4JgC/nEysfeVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz4SCRA9TVsSAnZWagAAwtEQAI4Q60pmVpjvkdTLNW6q\nuEGw6ktb1Pem+AmbC+jabKF/SXGXRnOuiC9pWaNadc8oxzkAxefl5LMOF+vw\noxF6E5MYN0j/hNqm6ri08fIjACpNT1G84Vthy6s7Cjkry1FEgbyHa+mJja+Q\nvQS59gY4OAxaGmzIxt41ljB5ZpSVlfgXqKGTktu3MBQb3SEjgpjvlSra/vd7\nWrSkFscZ6b72r5PYfbDPpR5xuaYRRDX9qqTqxy7t4BIeb76/Z11rIaUH8DYh\nURSjLglMVGxfqL6halItWJWmMorB1tY1z9LBXEXg7DpvYj+sX4TdNsMz0i4S\naX4tFqfV3WprvwZQydEIdJMTCuE5DiX93ReyQNW3cSUTow27pN5kdxoofHZq\nL124av421hKJlfr+n8SPbYcf7xFNVwY/Zo20e8cK3eWfXoC/SCv8Z8fAHfCW\np94MSGCp1OgeC5QNSmn2LtMCGByqIlTfuIRKluuKv11cw9jiNGF+AFGDlD7H\nkO5DzJs5iaJt+4IMbDhXX31qjE8PCjGGAhK5YiPZaiVut8XuLMZ/nFEMIAeV\nIdiA+soJfSkns1+hZk6AIWcl/HJAOajdPMfSjP7zuhpKmVaabI2DbHo9EgkN\nVJ0DJ6NyN2jq5y8EsM31Tw79sAUhLROKjp0c5pVWc/yVrBkmcXcR3rpMj36B\nDzyy\r\n=2FmK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bce00e186.0","@material/rtl":"6.0.0-canary.bce00e186.0","@material/base":"6.0.0-canary.bce00e186.0","@material/list":"6.0.0-canary.bce00e186.0","@material/shape":"6.0.0-canary.bce00e186.0","@material/theme":"6.0.0-canary.bce00e186.0","@material/ripple":"6.0.0-canary.bce00e186.0","@material/animation":"6.0.0-canary.bce00e186.0","@material/elevation":"6.0.0-canary.bce00e186.0","@material/typography":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.bce00e186.0_1586445842096_0.7135802092108656","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/drawer","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.927fa902c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d322cd246a126f79ae8b277209b6a74e0a2432f1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.927fa902c.0.tgz","fileCount":46,"integrity":"sha512-RqILg4Zzqdc6oceCKP1bhrBbEEIlN/gE2e7udC+xWO5JzmrF4Gl/hTIihW+NuOdPplgP09A+B+H5OWcjzdkXtQ==","signatures":[{"sig":"MEUCIQCVjaIhujgYmvoNszdQuVXl5bOjfQYMb2n9nFo3O95g6gIgBh3K7Oo2y5rki0NE1wL99noYuraa1lJWb4zHypk769g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej229CRA9TVsSAnZWagAAWmoP/jQF96D7LJ2/961DV4UJ\nJfT0yjfEiZqEFzIF2YjEFtBRngaTI4rH+kPboGkGx7j31qX94eEqtU1hpU4j\n5OStoYg69jEkaCxVOv0ZESt08fgR+QlS6cVhpqlqUg9ZX3TL0oml50d/uiIO\nwJlIQl7J9KGtolMy0R4l06zEBWZtsp7B3OnXtu/3n7fUNta/ha0fj0tIo1+o\n0qgywoZg7hssBlGThNDru/OhyqkjV0DrpxUQZgQqCRerbXoKTSbrvC/aN6/H\nzf1jfXWymxvZSczlxgY9yKCoTGENBqVKp/tijjRqjfdgKcuH8C6j9RCvKtw+\nGpv1Lc0cyO7FBDaCgiaN5mbNw37wxpjuGN1ZNwhFklFi8gGvm20uIo5dL/Xz\nWxoyBtFJASQooioVPxAbCz3wP8XYYqzLGwwBtMXghHda5tXU4hwYl3qup6i2\ny9NBXmkHgAYPRMCFKOkfYMrVUnJoycq+QKLM6Nz913tV1ce7VV10JHfzFyyL\nzeKtUrBB3rF7rgHPfmGrLQ6mOAZof+cpYFvkrNaFqH2ttp3vBD/bOhjBTigs\nV15nxTgb07PWJFh+B9F9eKxiZnoFy9h0p9d1n7FoD+7CHchkchRKfJNBud1i\nz2wU9lAHhJb1HotacjTXzJI23WpzoOr0LOw8T14wXmhZhTGniShqUaaHP54L\nDrZX\r\n=V0Nc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.927fa902c.0","@material/rtl":"6.0.0-canary.927fa902c.0","@material/base":"6.0.0-canary.927fa902c.0","@material/list":"6.0.0-canary.927fa902c.0","@material/shape":"6.0.0-canary.927fa902c.0","@material/theme":"6.0.0-canary.927fa902c.0","@material/ripple":"6.0.0-canary.927fa902c.0","@material/animation":"6.0.0-canary.927fa902c.0","@material/elevation":"6.0.0-canary.927fa902c.0","@material/typography":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.927fa902c.0_1586458044599_0.41748336589242974","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/drawer","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.eb28b6ecc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4adf0156df068bf2e3f41db784a26a56996ff8be","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":46,"integrity":"sha512-7MU3kzLsRmUUG8OmygNysntlHyVDQOlkrKOFmF1jjrkiiQUAwRrgE3xrfz0dgqctOOOpLsHMnpDpy9+5zXul0w==","signatures":[{"sig":"MEYCIQDLSGmHZsUdFBF2rZnVgrdcXf+tRW0lTEyvPHFjfjru1gIhAJur/5eJKwrIjXGJPiwvUdutZCsJWJw4aT21K2ympwtr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMmyCRA9TVsSAnZWagAA2/4P/jS1tr1c8zWzYIw3rU8B\ncQVEGRawVxTwb2iD418L+PLjWAkJqGOWHYe1r1UAszIykNftILkA0afjUwqd\nedjJAN/Y8RyyZGvjhCOu4FHRtGZyFXMngkFGN6wnv4PIMF4oYzgmZohDjIat\nq8FhkksV9NPybWy/3QXQcYfe/OaUPa/1lu96y8xPCMqxIJqH9iF9A9Niv+CP\nJB8q1QoDTyhQqX//VtZoP9Xm8Kn8X0n5reg7SMRzzz33G2e40rMg9sjP3DaE\n3BRUbZDpS6gZML1zhm7rkdjqT7H9aNpy3/OW7z7jiGwREZEOVtGIEXsOJP4A\nPCybkVWKBiMlLSgLXF2NYqIJ6eNnbutazj12rEKTOp3UVvIUbx/SObp+1OTu\nD3IKMnIRv+Nj3UrxgoAqlhdAHS+xmbPcIZPJy5Bh2SxJ56C481pCTDpr8vG6\n1x7GFIOU6nMTMBzY0wiE3JTSdZATlzh6+6V2/SMrGMVROjrMEHORW1LnPhGN\n783/WgUXHAYUa33J09ejKtzarH3t/0e+BQgbiG53gfRRAE+C7zSJfAs+6IMB\ngs+1j/t11L4A4qAPpN6m+tDENjKm3fdiQI12lWu1KN3MqweOnYH+2fSrE8dl\n9txxrnEDVnWScFDJotvyHDmGdSf2ZV3U40GpdEKlWzCBGB1V8zDihRc+Jfyz\nOet1\r\n=rr2Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.eb28b6ecc.0","@material/rtl":"6.0.0-canary.eb28b6ecc.0","@material/base":"6.0.0-canary.eb28b6ecc.0","@material/list":"6.0.0-canary.eb28b6ecc.0","@material/shape":"6.0.0-canary.eb28b6ecc.0","@material/theme":"6.0.0-canary.eb28b6ecc.0","@material/ripple":"6.0.0-canary.eb28b6ecc.0","@material/animation":"6.0.0-canary.eb28b6ecc.0","@material/elevation":"6.0.0-canary.eb28b6ecc.0","@material/typography":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.eb28b6ecc.0_1586547122191_0.26831653194126237","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/drawer","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.816a43b42.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd833fe88b55773820647dc31adb1f1a51c52d4b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.816a43b42.0.tgz","fileCount":46,"integrity":"sha512-Vmzo4XH3VKbzQCyN4OCQA0bqrifkE5OlCXXH8bvQa7uMpJ24zAE5j0kyWiY8bGpykgKl/Y9fsupTD93y0HNFvA==","signatures":[{"sig":"MEQCIGxAnc1Ic4qKU5gUoCXnPCUJIR2YdIVmH0J5lx4vs5l9AiBPoyM+sGCXMYXOtZ5vtB9G4t2LxK+/7dC2V5a5yXZ2Dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNzPCRA9TVsSAnZWagAAAYAP/jzBVu3BW0z4tz4lB23o\nKRCdairGXlErQ2F2mKy0ylJSuykNr6UHhB/C6x4w6YUovIq/LAzXDF8rRfdL\nrHTmz6pGMnWPhlSeU7CcsXVgQXjsXbNrfOP7ExpjPvoJmtEiFpz6ZbXWOIck\nMh691Pz4M2TnolLH7oDGqeeQ+L8K7EaOM+03F92PsUY7bN3UzMWsRGgmYwOQ\nv7xUqZYeULKdBdl06yHqrTgAKM3g6zQNLPIrIVJqAM72/xcFe11maolRtGQo\nng4LEbWnh+3jmkr3jwdyF72Dj3RVFAY3thKbIfGRknYntO38j2iorOvhScEs\nrGfa9seL510dRvFO0nwCZBOVPC+V1diZlrbKxQ4ay5h0mzLV5jisbkHv1jLy\nsYSYDoHvIt43DDQucAkpt4sPt9SjASUfdP29lKBYMMthKHdoTkWRX/WKWjzk\nj/+13BkjhF3uzLizrGZ55TqVTz1JLot6ndXTAuAe3fZrJ2TJfZHCH8nHDTRt\nXymPgMQMB3IiXVPZQLD8X2sD+imyjimg8R11QSSOiCeQORhRcQIlOaBp2r+P\nkIWohdxWPnNxaMmaSJIE8IxKm3ZISuY3KZtKsG4CIQchDQEdtAjXXieuLXWj\nYj9u6YoY9OOcIWEJN4qV3UFIinjQpIHJpgvw25zjtBai2lRNrSBFZgB17Dwo\n0rIX\r\n=YXBn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.816a43b42.0","@material/rtl":"6.0.0-canary.816a43b42.0","@material/base":"6.0.0-canary.816a43b42.0","@material/list":"6.0.0-canary.816a43b42.0","@material/shape":"6.0.0-canary.816a43b42.0","@material/theme":"6.0.0-canary.816a43b42.0","@material/ripple":"6.0.0-canary.816a43b42.0","@material/animation":"6.0.0-canary.816a43b42.0","@material/elevation":"6.0.0-canary.816a43b42.0","@material/typography":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.816a43b42.0_1586552014666_0.5717646558528566","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/drawer","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.008c4d319.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cefbb1eec6afa794de5dcc1058b0ba471b344d9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.008c4d319.0.tgz","fileCount":46,"integrity":"sha512-CVlEPkp1UiuuFItvDbDJ7om9du8F/gR+0NZvylR6pUiWXJJLVne8/B7yGH5IaKvKcwi7/MyPoHdro7/o2g07VA==","signatures":[{"sig":"MEQCIB/qWvZtP12ACXnXa16Gx9HhdA9EVH8T5uZYiPYteL3NAiB3Y5AS4HkqXlUzr7FH9CB9+/Chg36kuIDU6ZsiPNSK9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJS1CRA9TVsSAnZWagAA6akP/3PGCtwibmBCbXt5li32\nI6YOiWV/C6cbOfB9j8jbyyRFrqZAzxihzWilwjJhbW91nkD5VRL5I59GqkHf\nyBcfZZXo5I8yUAF/SWoUw5R3mWwMhh7KO3OEgqdYZpIjhZ4VCXHbchle9YMX\nWLpGWMDHsaI9MLMqu9oSfcbYduuzHLB0X16nWoyNa+Iu9I0xFoNzEjI8E4z1\nX5ofNovslmIdXOSb4u0tyy5tUpQIpAec4U3SZ0JBp44fLjmpGOJ09/fVFzGt\nGq6SZgiuSGWq+PCYrWFUDZATFMVdHDH5pVRte3sptS+4gtDGK4ck6NkirymZ\nfv1XNDKl8gGnvkUz295S59xELrVGZuqgY+d0qQ1bQ3nHfOAyWP1ae+kteXCF\nPmDTmId4ae+fzc4NNfdS4MhVj3WfK9KdtJNFjuBGGPh3eRV5+TPMjUkHE1XF\ncjp3FKlcGSL6/eZpECSZU6lpsiiePFd0QL5dlR8mtygd03JgvFNwWXFQOLg2\nhmTD9EMoROun8BMV5h6SE7yKHDWzMACZN7+bLDR/2H/q6KtULJS6ISnxpzSj\nHF+H3nmXrM7pDZCrgHpcjTDYWgI+wgPSwPC8GmPi9rvEVofcBaa3aGRY7jL7\n1UgoKs4FDPj5tI0vF4uI5h9dJidLBf8AV1284flPLU5MP1wm7EStdkfcVzXu\nSNou\r\n=ijGu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.008c4d319.0","@material/rtl":"6.0.0-canary.008c4d319.0","@material/base":"6.0.0-canary.008c4d319.0","@material/list":"6.0.0-canary.008c4d319.0","@material/shape":"6.0.0-canary.008c4d319.0","@material/theme":"6.0.0-canary.008c4d319.0","@material/ripple":"6.0.0-canary.008c4d319.0","@material/animation":"6.0.0-canary.008c4d319.0","@material/elevation":"6.0.0-canary.008c4d319.0","@material/typography":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.008c4d319.0_1586795700900_0.8113424916479175","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/drawer","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.cbb3f28ca.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5208264dd50044c7f4e8c13f36c53f59adce255d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":46,"integrity":"sha512-q+lCZTIKVENliL7h9WewAeOVJE78CJZTXGx6qCrzNS7tk4omAmOhmjM0GZrYsYnzcIbo9xBh4kppj8xPY5+cpA==","signatures":[{"sig":"MEUCIHrmgUZ3NJ9jrgErvcNfAFoQWOrgdCHYtjUJwOMyBfauAiEA4E+CRe28BwNDstZ88d0ys0z2uS6xrnd0BsFuN/NvSC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUTrCRA9TVsSAnZWagAAtbAP/0nDcHSZL7TGTAxGV/Sp\nHs/9HZ5NeK+iKRJ/V4xO16U81tylfAUBp06I81xxaJeZzoodPmU8qTP4T2M7\nc1IGS9TlhVdwHBs1jIt3dIzCGG63eZHu3vKD6pJN7psR2k1BEambEMV7XDGt\nnHabTrG7gfkpNC7YSANOwFBSNmpy42gb1L2ZSBeCFUepEUohYe2AgvKkWwZp\nthY5xVeEZ1hDTgAqxo5aW/aZI0nzu6QhLawiZKDhTiGtwRZpY+r3jlQgYExs\nh+Intiu/hJbaJGltX8f51eOOse+pzyaUys+fB8Vt1GnAay1qHSnkV6jUi+5x\nNlFdryg/QqgyM2yFtdTvhYY8l32b/WhSp8CiIqj/1rf3sD6J5q1ZI9OBJECw\n481/f7+Lb2DXcDF4/QnCbNVzeljC5wdzW6kB2ROx3q1QQbmbMarWmxQByjE5\nwCwEhWN3PZ2+de5rU+xxq1nBxZlWXEQbEaDZC8+3PH2EfSGrGSfM5lzP7NFc\ndNXryUl8kikM7MTnCVFkpQznKjEwFehw/WaNgXYfYGTSQ4IgJuMH53n2ofzj\n3lBFfSMtwa6tpirB1Zr2bhh6A4pzbRzjg53mRQLEvzTJwn4ZhiUpluYTNdM6\nrO3hu5EBYk1lzsMijMnCNQ0t8ug3uIBnCjBb4O7wcj0BoamQOGfysD4Kmv2e\nJ2Sg\r\n=gyLN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.cbb3f28ca.0","@material/rtl":"6.0.0-canary.cbb3f28ca.0","@material/base":"6.0.0-canary.cbb3f28ca.0","@material/list":"6.0.0-canary.cbb3f28ca.0","@material/shape":"6.0.0-canary.cbb3f28ca.0","@material/theme":"6.0.0-canary.cbb3f28ca.0","@material/ripple":"6.0.0-canary.cbb3f28ca.0","@material/animation":"6.0.0-canary.cbb3f28ca.0","@material/elevation":"6.0.0-canary.cbb3f28ca.0","@material/typography":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.cbb3f28ca.0_1586840810490_0.4912047912495239","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/drawer","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.f172b0f90.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"605b4bce182d08c8938fa01474afb18f29432509","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.f172b0f90.0.tgz","fileCount":46,"integrity":"sha512-gLUJQDvATT592Gd+YTcq/0TFk2t4DkkAlEE41q34LDPyewXu4Br8qRTbn3N7pzyctPnDrOC+QVj2TXQC7My8sg==","signatures":[{"sig":"MEUCIQCndkKW6lnVCv/hCLkXoFaWZerJk6yNna36l39r2lbrGwIgRsiC+t9EVCt2/K1LE4h/ofMYQ9VcnV/3CpJIn7Q/tSw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkMQCRA9TVsSAnZWagAAIzQP/Rz5KFIVXbCVPssMHZvq\n3YqYFbvYFVcXeWdoOwUaIbtQQhM26P4Ifq281dwMJ0o6FAh5jffRqMQ3tHDy\nI8Mx25R7IIddXIBmuHurfSkIAYF85KDzYU2ViIrmegM0oRclldGdBcOzvDL5\n3vkOplaFzLZxJejjIMCsAvo7mXOa8b9dIZnK0ifEcqD7vSzU29P9eDuuOOpi\nF6D9ewSCULdx0jsmUSanRz0HdWTnqA4HMM76eh5pIKufLhWLLSGTIHlQYCHx\nhS06y1+h2FsyHTkTyp8joqKn/sf98MJssiNapw8TKJwm1QFTq3APo2wHgtIu\nplW2WWvXD7aqsn5mfgSM39MIHOx0Mli3AmrnyXH77gYumu3S9rY0cB82IAvI\noC+iWTf2BF/UjVBFySiLJ0nw3hHfeYvCGkxcRwb6IsDTUvj8pcNwn7N2LFGO\nVFjoGqzPcxdORWdroY1DCe2lIp9f6ne6z1YDsDkSHuKyTmpePwfoN+h973N8\nxcDpO9Ichzd+Q75RGc95TuoA+7VzBHQfMVWlSy3LsgtiwyPfMxS0FFXMaqQi\nmGgqtyQfKncKC9Mj3edRXkwsaTREgrAk510hIhrtAkXBNUzF4ggnxGMjpHXS\n+KgLy9SSrlT7321Qpyj0KA75YDCWyugUuj7ptlLhTxg50MUKe4BFxwaUCens\nJ4Wt\r\n=kSua\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f172b0f90.0","@material/rtl":"6.0.0-canary.f172b0f90.0","@material/base":"6.0.0-canary.f172b0f90.0","@material/list":"6.0.0-canary.f172b0f90.0","@material/shape":"6.0.0-canary.f172b0f90.0","@material/theme":"6.0.0-canary.f172b0f90.0","@material/ripple":"6.0.0-canary.f172b0f90.0","@material/animation":"6.0.0-canary.f172b0f90.0","@material/elevation":"6.0.0-canary.f172b0f90.0","@material/typography":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.f172b0f90.0_1586905871564_0.16645169183673492","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/drawer","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.c02642273.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ea702c09182367c6eedbd94f9f7f358914808d3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.c02642273.0.tgz","fileCount":46,"integrity":"sha512-8niUndGwjIsZg5eTYy6KHEiIKAlz322StwYxZUyzZybbStbN1Qh3nJbvmS/tWaZoLHOj/UA7FAPKPzHHXAWpQw==","signatures":[{"sig":"MEUCID+OojJ0Y0TfGHRVGNpJ3aUedyMm+Wy3XN3VUPOeQo3ZAiEAxMCiVwv28U6R9aLsbtHMtVevN776KvGnKvKRvhN8Gio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzPQCRA9TVsSAnZWagAA8YoP/RHOpnLfuEkjEDKlwIMQ\n0PCqkTV669GZqH1feLaKZz+B2L6YCKm454O+1rIzygOvCv6xq0gn9r99hJlc\nWEhtim/Em1wGrZgxJOPrNa30Q/CPcv/AeA9HYgdfJ/wP/7kynHj8UEdEO6lO\n4uHVPUqFKj1Q/OmTy5I4p1KUmkZ5ia9PnoOXvC9R5/EEToIWy71Oo3R/3mrU\nQKa4shZbhQz1bYsxKcD91+FH4k6vlcWpnaV9KMl6r2LeEbnsOPT8plMTDkYt\nRnEiaFbkvCyHJ3ldIIKPDMJldAgAJK/t7Th7bu2ylR/FoMtS6GFEHBzYTt1l\nFAw6M2dqBlFM0aK2qybPfkEt9DEuoDuacEG/hsKUDQAi1JstR/uWwECrPOpQ\nSusHSBYCG1zotN7YVG1JtdlUolTVQduArmWUQtdl8n431HrX/33AkJLgHAXU\nmE+xjl+qXWT14k66AMgXYdO+9C6ADjzh9E8LLt8muKssyjAH6Gbgkz330IGX\nb/OrUMaTa9kVwqGbZeJ6qxGk96a0ojjy/Q2iiEjklVi6pitAnpg7xskkw5aV\nmDey2Z466aeDlLz//BTj7ls2i2ilPc/ESpn011lPD3EJ/2CksBUfs+xNCRcL\nepnWjFQELRB9QzHb+NwupflT3Y6eM/0RfLB4NSUjzUXsJY2nRxGGn82CH6ed\nofkn\r\n=ZOcv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c02642273.0","@material/rtl":"6.0.0-canary.c02642273.0","@material/base":"6.0.0-canary.c02642273.0","@material/list":"6.0.0-canary.c02642273.0","@material/shape":"6.0.0-canary.c02642273.0","@material/theme":"6.0.0-canary.c02642273.0","@material/ripple":"6.0.0-canary.c02642273.0","@material/animation":"6.0.0-canary.c02642273.0","@material/elevation":"6.0.0-canary.c02642273.0","@material/typography":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.c02642273.0_1586967504395_0.06872211999905709","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/drawer","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.8a299b568.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d791e0361171bb69e71edd3b2a2c20bce9c39775","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.8a299b568.0.tgz","fileCount":46,"integrity":"sha512-s0vZ9pivVYA88GtEkvBqx2HT8xakQ6GNePYtkOBp6dIjmvJSRe9xsDJpo9Fq4yUHsoxfv9IqwJBmMv9ODEZymg==","signatures":[{"sig":"MEYCIQCnmwWC8ISp6WmneKMN/ZNLO/9vgWHm8hDQ6ppKnOzSdgIhAMtSFugIh0TFrTp4qfs2hLJAzdsR2I1zoY0vGv+fqEPw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel445CRA9TVsSAnZWagAAm0sQAJ/2lB5ezm0jJR4LRS1G\nb4j6KJ6//pXdRGj9xcmZpDs8VuYWXP9niy6p+rdT/ePyFdDpKvyThFHY/Nr8\ni1I/iLtqlfwsu55mj/Uyupnzm9ZnDWCrv57sTkEXIFdE+NqrNurXhYNQmdHl\nI4Lu7OE1vnwvEGZAg68kC6B2F3svkWmvr9bamRUl8bmSkXcW2iHhseQP7zw6\nieuttOiIDQaEVmjC5aZnTFWw9eqliQHZ0bJViZfsl3NJe+QIMt10EQJfD9Aq\nvQrmmlXBvKg+CwLJCwBAH7C4Tvq5Ddl/KL3zq3eW6Eg9h06wJG+GwUzaeFk4\n57H45ddBsB+gmpBqaDbSeY5coJp6+4icB7pzNAbsbRtSV7O0p+okuITpvWJC\nwrpCCyROiHUuzxZS8ruwCTFbHolYmgpMCjhxUNtcas6bEmlwDwJkkuv0Ml8Q\nbeXAaFZhXvBBAAvw+UJBvdcK/nOm2KIKJca58zZ9S3FWXPZvV2SEEK0d1ZWJ\nmoBUZUUqrdilBlrAmcHS498ncP9TMUWsgLpLVQ1BI3Urd4lBg4uiHfz0CW9L\nFGDOlQPFRl+O2pDNGg28I9PSFXs4cnelIWooK1M1Q0yz97B+3yOfI6Qkb8Ud\nt4bvRGWk9A0jZaThgXSiYoI2TIXPeVakuPBvQlAafV9pDzFHNR8whGZ2SVtm\nQrI+\r\n=xmRX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8a299b568.0","@material/rtl":"6.0.0-canary.8a299b568.0","@material/base":"6.0.0-canary.8a299b568.0","@material/list":"6.0.0-canary.8a299b568.0","@material/shape":"6.0.0-canary.8a299b568.0","@material/theme":"6.0.0-canary.8a299b568.0","@material/ripple":"6.0.0-canary.8a299b568.0","@material/animation":"6.0.0-canary.8a299b568.0","@material/elevation":"6.0.0-canary.8a299b568.0","@material/typography":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.8a299b568.0_1586990649473_0.5516168474029028","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/drawer","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.490fbdc09.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b84aa5d99e23b2cae393916049b3b36f0ce8aad","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.490fbdc09.0.tgz","fileCount":46,"integrity":"sha512-tctUQNzioAR1wQZtyDrnQzf5SXTwzuGJES7c8MS755hi4i5PmfE4fz1aiRr21LLctFo+ZdG7ZyJzQugaaFUZ5Q==","signatures":[{"sig":"MEUCIQDM0hJ/ESqeVagqMQ2sgGFZCt63b0qONeRED1utqd2lUQIgH/VZJpdGti1XGrSyNCe/k7T1tXgMI2Ml7gDYh2ffJrM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/SCCRA9TVsSAnZWagAAYkkP/RTHOlFpzVx1WO5vxu6i\n+yckQGlOrPnHnWyR5Elw3ZkjNG+z14idlP8/7fkIxOFMSTAUgSINXd6hvtbT\nradZ3/WAdCQJAt7zqWgauOiG7Ye/Tulox/LpptO50pIM6azdIfc75qU33nNu\nu6CYVobl724g3+8ehoGmh9T6vDqUj00zGifv+AUm81EBeQ1DvHL4EVIoVbVH\nHKQQpqkQK/8qB0YYrFSFAc9zjWsXi/IbIqqYobmq0520gLWd+uJw7vhoho08\nM7dFobcxBG8bMZOFOv+UxpWNkHGpKr7cWVW96wOlXlwksnttdyzqHbWHdRVB\nUpN98sMS3wY7gp/t3zIgZU05OzkZ7jtVYWEeHMsTW0OiEfFxhCHCpNVfsN9c\n54Nt0MnJUIz+jpl8C5cDLizvvntkakIkflbn64EXDTJEuzmK6k/3Ozwvlkih\nggISkgtrEVZoaZD48rp9SiwF+Nq2MWVJd2sNYJVSUlDGpiicE8L0uJeT/epk\noUV/k4ceqntDFiO02tdODViF6JPxx/bvU95FH1Fp+Knt7PDnJmggcBNuX3J0\nA6dmWKGjnN6OBvg/9BhI2BRpfi+KoKBoDDyTOJyz6CYZG0wS28z8D8PASI+p\n8U9SJSNjp9R1OEFR9V3QFbazOJis5LhbCkPsgfWn/QnjuAiAZmnndRo9WyFR\nFcwq\r\n=KYc2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.490fbdc09.0","@material/rtl":"6.0.0-canary.490fbdc09.0","@material/base":"6.0.0-canary.490fbdc09.0","@material/list":"6.0.0-canary.490fbdc09.0","@material/shape":"6.0.0-canary.490fbdc09.0","@material/theme":"6.0.0-canary.490fbdc09.0","@material/ripple":"6.0.0-canary.490fbdc09.0","@material/animation":"6.0.0-canary.490fbdc09.0","@material/elevation":"6.0.0-canary.490fbdc09.0","@material/typography":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.490fbdc09.0_1587016834164_0.647418684319234","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/drawer","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.f838c6e55.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa7f0845045af42bffcd3eca96aa24297faa65e4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.f838c6e55.0.tgz","fileCount":46,"integrity":"sha512-u/64T9sRir/Oah46yWfqi6CSh/RO7GO/50HSiJz3ePuPQffEXPRuqdq997GBk1ydXKaOKIUodBB809MpvtbzpA==","signatures":[{"sig":"MEQCIDDBKudRZ+p++pdCECcn40bBruCWBU6kO3ibEbp+813pAiAReXTBuiUlTIGvXbrScRA+Kc0Ptg1OkK8tYX00Ri7vHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGtgCRA9TVsSAnZWagAAk80QAJiJoFxNFcTQLfebFa+F\nOu+xBTriDUAH4Bviu6HqXVsWzivhaSq6kREsDUDWaJ0ouApcTK+5zHkkpcyM\nfViBJrzSHDS8Cw0q6VpFsULQpvELUGfaQiWZ9EyFQPq6TiEByPM0PydFBqjJ\nouYJO9q/VqR/Nrt6zJfYvYBrz5QfoZWHS668lVBdXhCsVHbZJFk3nM01KqPr\nA94T/anG4XuCRBGqFjLuFMHnR5nfsIQVUh2OUqRB5gzlelVymukSAd8l3UVM\neMGPzug4+YnrZU+OS4j1igvh0aDjDKbnb6thmgJ6kUBVaIlfiQhbZp98t8gP\n0WnYJGfLVSFAWMCZr3mtAu7fzSiwg/FfKl+NYc9xq3JFN51TYUZfB8XcLqoC\nPg2R0zIbse7and4HwC9+sizascfKvEPlr9QP733Uh9gabKXbYLelQOC0RwiS\n0ri4CbkjkIGlJ8eq258uijkkQPPJAWr9eaTPR1cozaNAWb6CrmBACFuewrN1\nAwqp2vFQRqqOF6mYlenZorcUFUD3Mm4vDtjD2arWV+2KDs/4G25GR16/xCNr\nh1zGb3wYD9oSHAiMdCeXYnZ8PT0wGxDGuYOYqZLTMulUDbLsPG0W0Df9p9NJ\nP4yqnM96sApRYnrZYX3X1EMs94DCUz2BiSKR+doAV5+3g7OD3mKL8Ygjfsjc\nERDK\r\n=uQjH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f838c6e55.0","@material/rtl":"6.0.0-canary.f838c6e55.0","@material/base":"6.0.0-canary.f838c6e55.0","@material/list":"6.0.0-canary.f838c6e55.0","@material/shape":"6.0.0-canary.f838c6e55.0","@material/theme":"6.0.0-canary.f838c6e55.0","@material/ripple":"6.0.0-canary.f838c6e55.0","@material/animation":"6.0.0-canary.f838c6e55.0","@material/elevation":"6.0.0-canary.f838c6e55.0","@material/typography":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.f838c6e55.0_1587047263703_0.01997914720879579","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/drawer","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.ce6cb7024.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"baab9575be56f4fb4ddccbe0f0d42c08dee34f49","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.ce6cb7024.0.tgz","fileCount":46,"integrity":"sha512-3DOCcrZwpuHUyweAXRYk8UQ8IHTQtwl1qMDMVFq7c5iqjv/7AdjrbtSo8h79TZvntDLvTX4Gu5ZRTHZeyy4VpA==","signatures":[{"sig":"MEQCIEdPmwsNAipm3l8c62FC5RORWdfHgfnQ4t42UHvDF8xRAiAO/CU6lkWgrl5q2FAz8oGwVEBp6691XD/23m1i6og8LA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJPGCRA9TVsSAnZWagAAbE4P/RiEvXni6rKFj8fPk9w7\nOXLGB8c+aT9+Ggcq0e69a4fzAatG2o3qrWS90tX66PPFGXYKwMrx3Zx5c9ed\nc0iANojpk7GKUvFzL7r+FZmkNCC4jetp7YmzpSf7FdAQz1RcgIAuMuFLxzG/\nBAYs/ZVetUlR9Lar/0aiQoSZDzOLM1LmtAgOq3VLygoyLiHQ72nKQvA0EmT4\nOjJ3YFlbrc1GfpG44S4i1c+0tPITqJRn++Jrn3aKs2gGiBTOs1pxFuRPsLPv\nPoMIY8m2Oyyr1h22TfxxDI7L6EF6Kk0y/mFu1LJiu3Na9OlE+lHUTLdFgry1\n4RfeGFINQvPTFzoWGq6ms7ZoUGiQmTtWtkU+WyyczsgDWUTtnYoAW11Xd5pC\nBeDnL5mLLU6v6HKpIR83JGYHZSw6AfHNQCBQxt8mC+a/vuBGJVDijBAzfn9n\nZMZpflwzC0THnlK7GeFi80JMSXoqCdsnRU9/j2bw/mMtOUj0o7CnmN7BxyxP\nzulDKkiBMOjoPJS1KqwJ3hmG9+oX4mNr84Q5o4pN0M8k/ragrZdvsEiL8lEJ\nNHklmZZAOM7G+gzdqIRK6ba5eeu53Q5gH8VZQl6pnXu3LyeueVoKgS+6aQb7\nlw0l4N0klTAB6fWufoy8R8MN0z7geVR113xJb9Ol2wARSpKkgxYh1H7WnPHG\npOuX\r\n=Rkvr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ce6cb7024.0","@material/rtl":"6.0.0-canary.ce6cb7024.0","@material/base":"6.0.0-canary.ce6cb7024.0","@material/list":"6.0.0-canary.ce6cb7024.0","@material/shape":"6.0.0-canary.ce6cb7024.0","@material/theme":"6.0.0-canary.ce6cb7024.0","@material/ripple":"6.0.0-canary.ce6cb7024.0","@material/animation":"6.0.0-canary.ce6cb7024.0","@material/elevation":"6.0.0-canary.ce6cb7024.0","@material/typography":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.ce6cb7024.0_1587057605755_0.32576531234266093","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/drawer","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.0ab62a65b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c37511058194bc19277d7408e159fa5060eb94d7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.0ab62a65b.0.tgz","fileCount":46,"integrity":"sha512-xfwArm6t3JXfRqcj4s0mI0y/sYm0vxSrbFWRdBgsd9KEI3Mzk5sebZpBsxOf2yKGZTF7T9B8f07yoks7HpfP/Q==","signatures":[{"sig":"MEQCIDpm7PM5gfOQy7IJQImHsrq/HjiFlOf2XELJQ5tZ0cVjAiA6/TzyTXSm+rXrvNKn4wbAahQ7sK4C0zeJR/AJDTAfTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKoZCRA9TVsSAnZWagAABUgP/RaaHkuuG5HFLpv59q57\n/SSuZufruduWr0y1I1DYOYpKfSuRLm3RO3bOZvC6K3TbY/ZkonVJOOHcbMfo\nr2wYH4BTe/18wawSAxnCvm/0Q1GP+0mrmiEhB36l2Ilv3KXkiJQMCvTmjiV8\n0Ma+hb3zWDjbKIVOQPSRtYSCntNpeE5jGYQekcE/kKv9hmPBnjBhuApCOXAb\nNuJ0qOg3Bg8Z6HCQ5U1b22PXt9JlTKHfVJxDuwXWG30af+5IElJcVBdD5XTq\n5b+H7wVvZUBsPtxFm72Js0w/l6wlZEfiGGfleHnYKaINo+FdTsq9hbAIRkav\n7MNv3zwH399ghwyCpfDeGaLuvc9jGwOEZnRTNyacGJyLG7NFUOzxfKpM9l6k\nvs18nS5Anki/3fgXqGWm6Hp5mcWzw8CyHfi4ANRWgF42S5IdWIJMheqmolFG\n6UgZaJl5OQ7dVL/Qe/JptYc6HZklS+/HEthmAMPCDhzk9sJ1yib9T/e2sRhq\n1fwO7U3370IBeG0KAQLgAwNr1czZMu9Y05RWtxtYWBaBn91MVF9mHwr1nD5D\n2KaGTjfyuTGZWm4eA/mVp0JY+df3iknuBbtAfE3VJCBvDSEXjFHe024CfZdO\nUJVlXEV/cd7U8LphH5S8GeX2rTw53xTNodvsaQr8X10iTrt/wRYGdaN9H4+u\nu/R5\r\n=FDZj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.0ab62a65b.0","@material/rtl":"6.0.0-canary.0ab62a65b.0","@material/base":"6.0.0-canary.0ab62a65b.0","@material/list":"6.0.0-canary.0ab62a65b.0","@material/shape":"6.0.0-canary.0ab62a65b.0","@material/theme":"6.0.0-canary.0ab62a65b.0","@material/ripple":"6.0.0-canary.0ab62a65b.0","@material/animation":"6.0.0-canary.0ab62a65b.0","@material/elevation":"6.0.0-canary.0ab62a65b.0","@material/typography":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.0ab62a65b.0_1587063321297_0.5779834645815176","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/drawer","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.ca61b656f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5df8dd222407ff04b643b669546f366f8e6308ad","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.ca61b656f.0.tgz","fileCount":46,"integrity":"sha512-R9GPIcf5y9LRagxkfIp2B3PglaEwcvDNDls0u/VwJjYem7rflKvkIqB9JNDQ5LGNlZYWsbvQKbykM7X9xKGUlg==","signatures":[{"sig":"MEQCIFJVKTQc0csJ872Eh1BOIOF124M7mqF9GivyLEDlc4bdAiBHiW4HHnHkYIPH3/xq0UpodkW8Uhr59XXu1R0Rt5s6fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLl6CRA9TVsSAnZWagAAcMYP/0JaEtDUw4MtAbUVLY3c\nbrWbV6HCphgUuILiYANaGZRa2t0kne82cAp+UHxOY6FQqm2ipald9VpRw0A9\nQ1GVg0gFFfbASPxGbDxYnaTvG4vSaVuSCc8fhVdT6VnXgmd9kKq9zZuGZFJ0\nI1pgPNgtW6OtwZWXqvGuhc1/xp9gmPXoW3g6mkqCLYRF/Od3zhb7pqV6NCQL\nfhtLITdjyVzyXZTzAsPOjke1ztABpEPoW/9IlEFcbINkmqcuz1hNkkeHWuIK\nbpfT0fIyQsVgsBVp5CAf4f75pKo5p9v8hHUU7bnwKrb7VYvW7a1Gi3ZK0kss\nFHOZBmlpP2gWcS0ofZqSo16DbmWBSGyM601rYUVHVqP6GBz/qPMC9ntm93pr\nADXnyVIqWG+JBppFGbOgGJp5z+7lbTtDfARM7fQ0CUE1NGJeMZGBmpIK72bi\nfk9feGyla5t22L1zE6tX6Duy8u0qMxnVLdLqJjnV7riphfB4JEOVMSqiCW5z\n2UvdhI33WZ+opVBn6MCciKrT7j62iUxGaSNKs8cILNE5xB2ZFgGnf/Fh2shM\n+7jdV6upfUPos3YhTeZ+D3GzmoiH+qx7Xh+JQtXjoWEY2U+0s6wLZbp8v9Pv\nBFb2K6v4vBijACXPrUcNVA9a/ewmmnrcCE/Lx+rbKpAjLbGGzQY1YPGwqsIH\nUBwS\r\n=BgtP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ca61b656f.0","@material/rtl":"6.0.0-canary.ca61b656f.0","@material/base":"6.0.0-canary.ca61b656f.0","@material/list":"6.0.0-canary.ca61b656f.0","@material/shape":"6.0.0-canary.ca61b656f.0","@material/theme":"6.0.0-canary.ca61b656f.0","@material/ripple":"6.0.0-canary.ca61b656f.0","@material/animation":"6.0.0-canary.ca61b656f.0","@material/elevation":"6.0.0-canary.ca61b656f.0","@material/typography":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.ca61b656f.0_1587067257733_0.05987797874020506","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/drawer","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.45a6615e3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef420ea8431ae616ab5774c7e6ced5c07b15e48c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.45a6615e3.0.tgz","fileCount":46,"integrity":"sha512-UHk/1nPb0Smb5RtoogMk0lfrMFbjb719ah1a8V6jeUPcf6iDRzk5uw/2kRp9rr8cIAO9vQog1kUeMefKM5Fmsw==","signatures":[{"sig":"MEUCICVUDCMIZJ3CBwsrQ0kDDLoW5RJzOb4F49Sz2WVzFLwTAiEAq7r0rHdfr+6p6jKIekToOC16Zqw8QtHiqSdCuYwdpgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMEqCRA9TVsSAnZWagAAwUUP/07hYOvAkk4EQsj9u79Z\nPLcq8d7+F9OVdacIx67UJ3A/Y/pUyaeyBgjPpUqH2aYDaPiXaQ5BfAhaPy0e\n9qezpZtMDY9R00Sy0R89nr4eGtuKCslYNzT7jEt1B09RWxYDix1kkQvwalsX\nrdZdjgd9/RuyW5YCBPBePOOfmotRc9PIM9gBZz2CTFLknUJEPKeNO8XZHPXI\n5PGzGXAxSje5u3ejn6tragMgcvXZq8Ez9vQLvGgcHh93xFxOhAKk4iV6sn4R\n9231HCiTwolZO6waUvTGPxf+dG2he6OWNhCLlA6dfP36uLSMc28b87UxRdae\nYeFP7XfvTzD+x8aYaA1iX0XEbepk3a/sNrvNXmOW2RiMuAHJpEPHx7hmTXPe\nebk+4Eb+ZB6ceK9Mjawv3is/6IU9CJhI8gF1FYncXv7rFiMDrztJu99mk2WS\nhWsjZGtQplPO32s4HoWFP49qf7OIDS1kzcNky0wV5KJWOJhKrWt7FVwJi2YX\n9sp8TG6H4vBHF71fd4K7j6FijRP8JWVWZHdVEX+f2mxHNLxExL1gQimkKt6v\nSGGfrFCMP5WXddFrKezaflJTq4at5TPVbmKosq5RROXNEFVeirT0n0d9oImq\nPu10sxoX2N0Y1oFigvD6SD98aDwY03R7JkOQp/jw8sMx7yhXw2mfiNSXsMiS\nnLd/\r\n=j0ai\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.45a6615e3.0","@material/rtl":"6.0.0-canary.45a6615e3.0","@material/base":"6.0.0-canary.45a6615e3.0","@material/list":"6.0.0-canary.45a6615e3.0","@material/shape":"6.0.0-canary.45a6615e3.0","@material/theme":"6.0.0-canary.45a6615e3.0","@material/ripple":"6.0.0-canary.45a6615e3.0","@material/animation":"6.0.0-canary.45a6615e3.0","@material/elevation":"6.0.0-canary.45a6615e3.0","@material/typography":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.45a6615e3.0_1587069225707_0.27646555869361333","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/drawer","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.4b04cdb0f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da0159178192e2283fc36deb99d831c21db2eca9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":46,"integrity":"sha512-ZSmhxNFg3oMX3/BHmtdcQB4t2ciCcO2p9h/O2MjV3/ch8SRyx3r8waykSuFTSmoHw8X9xemGYmhOJN8OLEijKA==","signatures":[{"sig":"MEUCIQDTc06fKsTqzQ6h0F+Vtq5oDK0euXwGat8jyPpLAup9xgIgecCW/lvYiZxnt4c4EJ1p9o9FnvvMZBfowCFBDOTLJ28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemep1CRA9TVsSAnZWagAAzBEP/iE2AZpVb4L3L6Uctytt\nPbhH50ysnD6owWi2ltCY5LSR9kJaufNwElbBcE+tIMadezKRJMOZpirD3OJw\nttFuY/iAQb/cgthnDJkXr15YpFoXR5QgR7BuIxLowmmLoU5uqYi5QLHXuSKq\nBibCUxxe9b8iyNfE8W6qoS8a5wJLYSEq8+atYYCNpNJjv4Q8hk9lSb8cfem0\nAuU7NxSaYQcLblgWIz3Swt4Eg+hWkDsiEBt8/ksRTOHktk6RnMYNJkTYi1hO\n50z77q0M1YLMzKBNxuF1b3s5xVYLIlxN6xWxK6VAyJZYidS8yDsHbrPS9f+a\n1ciz/wHV5NAPp3oKfSw2yCh5O4COBqhQNfJKRGjfJcXoDXCT8FVM0mamRNqV\nULs7rEeXB4VZADPlHjZUYS+M1VUwrMZk3VnTvJ9qOzLLan/oZR4NMO+wZMuo\nV0UeSB14oB9nXzos2kiItH5Z73JixKjgk5cKoDYsu0rkqIwr4j/qhWYLac5s\nfg7zj5NgXYa19gHFs8gv2akb+5gdU7go80PmDYEbg6vg84vvOchejrRx2VaW\nsePG0kAi7WquTZc15PBCazrpUblHnQOiDDseiHlHj/uG3swwYDj1dbSCINWZ\nwS48ceh5KMydiUCcjmHlu8eHH4Tq+HavUKE/MrOwz1AX6kXKLqdoKooVDF42\ncZrN\r\n=U3jm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4b04cdb0f.0","@material/rtl":"6.0.0-canary.4b04cdb0f.0","@material/base":"6.0.0-canary.4b04cdb0f.0","@material/list":"6.0.0-canary.4b04cdb0f.0","@material/shape":"6.0.0-canary.4b04cdb0f.0","@material/theme":"6.0.0-canary.4b04cdb0f.0","@material/ripple":"6.0.0-canary.4b04cdb0f.0","@material/animation":"6.0.0-canary.4b04cdb0f.0","@material/elevation":"6.0.0-canary.4b04cdb0f.0","@material/typography":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.4b04cdb0f.0_1587145333249_0.9788527340627367","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/drawer","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.b273afa93.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdc72b4d72ebaf6d3ea0dc8de5dbc5dae45f7f9b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.b273afa93.0.tgz","fileCount":46,"integrity":"sha512-//KuKuhVRiThmHsq6eSH5M9IWBGgErS6Rhw4PVPNFe8SOL7bfUwChjtvpqKk4pyJnAn7qthvRzzmLGSvcExdUg==","signatures":[{"sig":"MEQCIGZmciamwLEEhtZ0/MBCl9REwNZgrcl6rc4y/Wa860UyAiARznKxzPQ/WkYbu2w378euWoYAkCd8w6zqAFFqdejLOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjXSCRA9TVsSAnZWagAAQpYP/j6iGTrNciRZ2p5Jo+Yk\nIgeZi+9Tk6xd6nLr49z6uINJvtGmzjB0Taqv00P+VwsLO/dqY60TU3uZVouQ\nHvpw4lVJ4s5+YprLwycRigfhghbdyjmd4QxmvxFDN8sl9QMov2uaGpSSJ/5U\nSgGZO2+OHncrUDJt7kXc3TkI4du4BV3j3ipBItjqrtGQqiE12XLekGkFQtHe\nFxX+Trs0I6LaTncjmfsqJsbTpGMaGzSn32zjthpC91Wg1o/syurupg3R4teh\nMEO7o+0GeV5+t9lXGcIFxE319WvUmvG5ZyJq9OUXysg8bFhAuPe+uy9g1jnU\njBE37Dh+5gTTy36WkEWNzE95HlZaIuBjYLz4ziF9Svvin96SSegRwrkiM6mA\nrvfZKQiUyuIrYMXHPk3bitGR7zyIDhppIPulc99RX/XVFSsLCPCICByCSU80\nmQa1VhW03/tkFDZq7sb0edVaGxwP9X4ke6hcASc3f5nhfSee0t2fWkZsucuv\nSiMIHL7hfAfc+Mo1Cxsmqa9PdW25bwjnzHuA2dgyuDAj8h+TRAqZHpDNLI58\nxd3v0QsdVlbsjlIWicOQY+3SJWCp0jYe/VQT90+9Er2418u5i/m714R/5fN9\nsYMaNZPs3dFpNIlnmxs5R/PmJRXvxrMTnjYpLklpdgvb75cSmzwQXNm7F15N\n7s/H\r\n=hYDY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b273afa93.0","@material/rtl":"6.0.0-canary.b273afa93.0","@material/base":"6.0.0-canary.b273afa93.0","@material/list":"6.0.0-canary.b273afa93.0","@material/shape":"6.0.0-canary.b273afa93.0","@material/theme":"6.0.0-canary.b273afa93.0","@material/ripple":"6.0.0-canary.b273afa93.0","@material/animation":"6.0.0-canary.b273afa93.0","@material/elevation":"6.0.0-canary.b273afa93.0","@material/typography":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.b273afa93.0_1587164626335_0.5364869287153615","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/drawer","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.b70bc601e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0370ff382fc3a62d86c7719503b4d7fcbd181ac7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.b70bc601e.0.tgz","fileCount":46,"integrity":"sha512-NEiYf1FkScbaV9XFFL5sjDXcjF4UdskUAbmxkuea0XWNhCpovUC571cDY5nb2d6ZBUT84yosFcENWC0hQo6Y+Q==","signatures":[{"sig":"MEUCIG2Jwx5UWrh6qqqDaMW1D1tAvg+lfOJVSJyVwfsncVZ4AiEA3HW+/MOcpdm3oeEKnA/Lor4UMi4VxrKSom4okI8nOho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjozCRA9TVsSAnZWagAAOdIP/3UxRLKYkZ0tURM46qNq\nAfTKCknOGGz2QwQUlV79pFnNtskjma3dwavgqeG44N7hHhtwpRydA4BNCWZ1\n9tjhvwPwnNAvjv0j3YabTwRxYAodwb+dYD5LlaJoWN49/fT0dhVqWmU/CP4M\nhkL8GPPAMqFmPX+fU0WJjNZVv67DgECsR1QGakELo3zFjEFIikco/Sqo42/t\nBFTRJXLyn4Fx5dF36WTIjKcVElJPLO84MlxfqTJLb/ltGhoTAz1M51SnGxCY\nFKNYHwDVx/0vuCli1FtjCeOsmRSH9r2EH4JeL6wkRhjH8HKrKX0G2l+HIUUo\nTW/XyhyC/rhyNsLUtnHkuivdSiRTT8iehRmkJB0aWWKQmtw4OOICj2nFTBib\nlEXNeqbrm/Z7LgF01OeE7BsIve/U4VRXsz+MOJlxE3qyOxcYQqtjgDxiSkxe\np4rYwafe3QVfXMWyuf/s2MQG7vfJ7EVJOQdKlUxCYULm6Rx6G83jvftDmbO2\nKHgowGx4zvTiiXRLyPI9qL5u95vRAMl1iMmQ1GufK1bSSsRu3CmXND3FCVM9\ntPIpqpwnfDBA/joRMoKo3tDaCaLpDAk+dD3AO2QSuZZwTEIPwmwdju7kmkkl\nQWOaPW38BRPdW/oqQkSibl7v/SKGT8PfBk9BAfjIzx044otilEpM7Uvsmver\nzuUE\r\n=xQbp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b70bc601e.0","@material/rtl":"6.0.0-canary.b70bc601e.0","@material/base":"6.0.0-canary.b70bc601e.0","@material/list":"6.0.0-canary.b70bc601e.0","@material/shape":"6.0.0-canary.b70bc601e.0","@material/theme":"6.0.0-canary.b70bc601e.0","@material/ripple":"6.0.0-canary.b70bc601e.0","@material/animation":"6.0.0-canary.b70bc601e.0","@material/elevation":"6.0.0-canary.b70bc601e.0","@material/typography":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.b70bc601e.0_1587165746982_0.42806213311366914","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/drawer","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.c4b4bba96.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f9e43008a5c86077f1ac86c740795cfdf1a6fe9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.c4b4bba96.0.tgz","fileCount":46,"integrity":"sha512-BT8zqEuFHOMkGZKNMral+V3zczSgU38o7V5UPYP6IEQPQFDKAs3R0bZB9Mb/QB2Za5bT3wYCF9qUEQ56Bo2mLg==","signatures":[{"sig":"MEUCIQDaskp+9e/+y4qQAgofop26fAWQeAZkATfjQOhxkQMx1wIgIrqScCkqpn1z7fzRi+PA5NUYQ8qpfXKY8m5rgzkKhD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkdrCRA9TVsSAnZWagAAijwP/2iqChk2AfwfD5DB62K/\nZOMQ3cOozrHdC8uG05xeWbYoRK8nuDgfn4qmm5VHAW68XTIooeGhFxoPkj6m\nqVVcxbgPs3fcCz2p2idQ0mRy/4y6gaislVDK3HNHSphstQOFmFrGurDzeEtt\ntWbz4SJ3tAvv0ahcfG3A5G4a6i1mavtr6kWwLb3pSrNwqjimMEJFE4k3ERtF\noCdAcAAJGs9yvre8cwM09OwJymhW7+dqN8XOx9hY+/OiFEFh5I40ec6ItT7Z\nACFNdeqlsz8HOWUq1nBFIxR1m8GMXHC5Cx0BWd7NnZOppPwOUvAmSZdVvqDC\nP75bUfBooDngS2NS+KgEVVd+BCWuRnNlDpsresqbx7BFDP0H8vPCiuY3BM/R\nrv6P/9t/nuk0lk6vi2LTNgrOf2j8W7aGWtA0HX9bMGImnqtO8zCdsLLwuRUO\nd/lgTIsvMHd18tnCbSCIiEbr9cGCkzJR2JQi/5szVRWF1GApaakFbphPd+pe\nTGAqeERFupMo7xdu+LlSFSE/k3pYK1Oo0Fw4W4DQV0wD+nGRtyKKluWlTXXZ\nAfsQybyEbNaHbnRvLxqqKyJDhvpvmUFEWwDtyosSt+OZPfD8HSD9EWuvM/TG\nDUyAlIpHulJmqmcSJUqavBWEl56UYYJTp+mJFuupcSpAy2A5NsLlat6qJ9bv\nl9w4\r\n=x79A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c4b4bba96.0","@material/rtl":"6.0.0-canary.c4b4bba96.0","@material/base":"6.0.0-canary.c4b4bba96.0","@material/list":"6.0.0-canary.c4b4bba96.0","@material/shape":"6.0.0-canary.c4b4bba96.0","@material/theme":"6.0.0-canary.c4b4bba96.0","@material/ripple":"6.0.0-canary.c4b4bba96.0","@material/animation":"6.0.0-canary.c4b4bba96.0","@material/elevation":"6.0.0-canary.c4b4bba96.0","@material/typography":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.c4b4bba96.0_1587169130465_0.5219133895180976","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/drawer","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.6c1ebc721.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9417491a514ef63189ff664c2a7b070824cda5c3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.6c1ebc721.0.tgz","fileCount":46,"integrity":"sha512-rEvQk1dO3Q7HPMzd9nYP8byNBm6EI951KQYGmS7GNiK/RBarqC92NqwcbWN0BgXqftVZT034qVzoCGWhBPGdbQ==","signatures":[{"sig":"MEUCIQD7nGsUf2/FM1hSyDs5aKF3E/Cnq9x96neNpW29YGmfGQIgTC/kd1ksDFhBd1d9M9n+QXAgv4vo4MHWH4lGuXtOdZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf8WCRA9TVsSAnZWagAAsZoP/3GoDfKayrtoo5x2IoWR\nbd98+/yo9kjzJ8ybpikpkhkFBB4UdBv0s/3Tc2PC3n/hD6bEe/3lhN+Anhfg\nRorKCm1+vfEVIt7fsjA5W29kvxz+j+lZpxplHrbjoWyQ2hLqzbJDuXH760lq\n2GQBnufyx7vVIGX7+XHDNHF81igGpClUg16i4ih2DgtEu3wAbRYEcMxUQPor\n6QN/YLSG8ZIE672XtjXvvg0gQbAvipqVsrqPAIu259467k/xEIj48uNapPqU\nS7phBPxZK+Y98Xax2h22lNyrcpCKUIvjaf7n5c9uDjFQqMrEzq6/nvUc6XBk\n2oGcDteiIKMJfg26fwguLVDyrWq5UQ7/Nk6nSB76NqBt2PNmgY6RYwlftipt\nekeFxCje5BO46J8qeXFzd3FSLLITmc5pRSKeITQhksgIWnpyXtV4A7se7wz3\niWZVOry2zEckpuJcgnDYcQagCX7qd4J3MiUyFWVUgrfaf1iryEKm4DGYcF7p\nHtXFmQmILCi3cmiNYgx0CxHLCS+CRUe3QD3mOuLEvQVXHj/z6arbSsMSoDNa\n+Pfmp/ntPvIwwpDGfDdEBbWFgrpOt7mS9/xK6td3KRUJms7GEkKPDOQaIIZ0\noIXDHd33Uim7IxIejkwkJLX7U8+r4iR9fJVJqY/u0Q0MrP+T66xB9e8ZLXa2\nr/0L\r\n=6ca1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6c1ebc721.0","@material/rtl":"6.0.0-canary.6c1ebc721.0","@material/base":"6.0.0-canary.6c1ebc721.0","@material/list":"6.0.0-canary.6c1ebc721.0","@material/shape":"6.0.0-canary.6c1ebc721.0","@material/theme":"6.0.0-canary.6c1ebc721.0","@material/ripple":"6.0.0-canary.6c1ebc721.0","@material/animation":"6.0.0-canary.6c1ebc721.0","@material/elevation":"6.0.0-canary.6c1ebc721.0","@material/typography":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.6c1ebc721.0_1587412757751_0.17971933209102176","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/drawer","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.9cff4318f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"958b295393d4c56a6362d06405e5b52780c24633","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.9cff4318f.0.tgz","fileCount":46,"integrity":"sha512-L335sfcVPfM8z3csGW3RfMgEwrVNsa7PY8ULoRDcdqFBgcWFK9H2VjL+D1VF+SHXQHQi/WjuOd2MljgH6I75yA==","signatures":[{"sig":"MEUCIQDoSjnyVONBKCU404MSIuZha0EgsdiH0G0sEXlH7thyWwIgV3eCmW0TeVhWwt0SdPdL1/XrFFXVFq1fNWioltbWRUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengyYCRA9TVsSAnZWagAAnPgQAJO2VuOweXrkANrpJqcp\nVstB7+CqSJeaX7UWVQwY0Epj03yn3wkDxRPXJ+PvIud+wmsLRWntohXn2Nnv\nwIXE+Gk2EP152h6du5+/GkNLKr0mok0qSKfT5Q4AvOjUmMIiwgbEgnkPtyKS\nJcM9LSZXhpvNDVVcdtSjt8Sl6wLh/9ZsttnryvrxV5CQPToK/AIzPlCDzXoN\ns4saHbbxCtt31YHP/I/2F8yMplrZ0A62RIhvIhs676IEOuNkTQ1l2G756suw\nyPJv1hsXfxaX36c9371uKN4jOArKl4IM1huThRP25/QOnV1vnWNOTGK1oG2r\nOkLWkCQ3boj8Qz43u0jr0+FbVt/C6ZAtbhoj6l6Ntp8AbfZC8qrYHFuzq9Kz\nSu2xmVV5v1N3xo9EVZNP6aFTlA5ORzuQdOORFjfKuFRqnNmjrtB6AvEqekSy\nM/CGks0n3/LafF38jzFrMtBJEfw/w25cPKFUvKZc9epSS1Rr8Ew9KHFB2dko\njH2vVHpO6v8dtz0T34rly+BY+tU1SaYLChUnw3moGU84z0gwN2hb88mb9OWC\nt3c5zfiN9MxHIKXEsmPceaDCThoO+3WlBCk++1+u8RxU4ZRHSTZRe0evKLDi\njqkvulOD1XjbeX+XqvZQ4n1cJyox0vNgjEDdRp6Q/moqPm1PX6CBMtHZbcd3\niCkv\r\n=CmEy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9cff4318f.0","@material/rtl":"6.0.0-canary.9cff4318f.0","@material/base":"6.0.0-canary.9cff4318f.0","@material/list":"6.0.0-canary.9cff4318f.0","@material/shape":"6.0.0-canary.9cff4318f.0","@material/theme":"6.0.0-canary.9cff4318f.0","@material/ripple":"6.0.0-canary.9cff4318f.0","@material/animation":"6.0.0-canary.9cff4318f.0","@material/elevation":"6.0.0-canary.9cff4318f.0","@material/typography":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.9cff4318f.0_1587416216041_0.27724309122441726","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/drawer","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.7b4482402.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3ddc5f3d32a4b61a61a0b0781fb6040f418e905","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.7b4482402.0.tgz","fileCount":46,"integrity":"sha512-hgdSYE51qUWxV/xYZeTDJRD/QBFNVCw4wIHWAYlFUusLX2Mezti0MQnfml55pvseXOQEuOZ6D3O4mQ8BYRZbQw==","signatures":[{"sig":"MEQCICLYAb2kxbAZY0Xu2Dew3fRAnlPJcNned7jFjmfXQkYYAiBLkZUTyeL9BTq1GL4+3Gt6PiUZ4bu+moYnrLUAp3YIqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniBaCRA9TVsSAnZWagAAV8EQAIgtoufxXU0T4ohWhsJB\nmqTvqmNotuPHp5QuIiCdK1d4V8UEoSiLwWRob9zCdvRSFvst+0EplqI9f+kB\nxAk+LRkafUvmvmCWzb3rCujvOSDgv1kgAvb9a2Jaj/M/mXJdea4qN8kSwShl\nYXOW+ISJcp5dsgbGv5Q83fSTVf5gFrCZhkyVq2C2xIZ62yUrsvrpslFA9Hfz\nsjRlrz7FMqDGzbrEtRiGYUr7I/C0EvgCKdBCHN1YhSzanyhKWJdxQFgS7Fa4\n8VeMBYRfQ/BcEdAT2MWtRHQ1ox8FgzgfU+c4GGm2BR8saC9/lxbpfRy90sIQ\n8tVdcWuLLM4S3Am4f6zBasPD0Ekfsx75D4d88Tspo9aDhwkl5XqZfekGh5HH\nVlpPgEEnCnPYOLl8UGlKjX972BiSD4I2yxbY6e7szPz02YrmhWcKhcpnRUzo\ndoJxjLJfDmFcH94rsKfyiuCWDjPtB7xYMkyBLynDTkqBg1zcyFwmcAl2zr6Z\nA3/roMJXfH26iaheMuRV6aY6XBObigquG6cvax3Dk1b+EzeVf/uEX+CbAYLu\nn6PZreAHzfTRJKE5BXcQz3a57lZdgtQjGY+DTmd/DA8hhZeAIwg5FOS2xNSt\n3w3Zr3+Irzs+/TThIpY17sEDps79D7HVVob6ay7cCFa3Glf4aeGMK5iLtYbt\ndF+x\r\n=5U3O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7b4482402.0","@material/rtl":"6.0.0-canary.7b4482402.0","@material/base":"6.0.0-canary.7b4482402.0","@material/list":"6.0.0-canary.7b4482402.0","@material/shape":"6.0.0-canary.7b4482402.0","@material/theme":"6.0.0-canary.7b4482402.0","@material/ripple":"6.0.0-canary.7b4482402.0","@material/animation":"6.0.0-canary.7b4482402.0","@material/elevation":"6.0.0-canary.7b4482402.0","@material/typography":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.7b4482402.0_1587421274141_0.9085744065884656","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/drawer","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.deda86d8c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b59509c31932e699f8a1e967dc0a0d3daba4c619","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.deda86d8c.0.tgz","fileCount":46,"integrity":"sha512-0i6oeGAPuGKTPNEskJnGU4lLVcLPdsEEqHCbU5ZnkmasptOD+7MHOCuxjd465nALnKIJPuSkWUz17GfQnRuQUg==","signatures":[{"sig":"MEUCIQDzAxCCbXeUu7OGIrAYEtv/6own3HmHpe6VqpIEkLS8aAIgPSxe0b7g+UnK3CH6bgzciqeBr/M7mcT6RAcMN9PcYvw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenklJCRA9TVsSAnZWagAAvZcQAIFaYpvdKHrhAT/4W+Uk\nDe9wXUe9bFF7Nf4sX33GGzWWE9a+UACdLbKIbE/7YnK6TokxdyeOhyh4MUkf\nG7OOracC05jQLASyBwdkcFYJGk6KOdy90KjM9vwP3F7BKsBxm0TjNTwDVFAO\nDZylAwOhMhPc6iXRA6cwCeJrex8jASCzm9LpDDfoWdUOH3dQOZo/OYu6hbkg\naC0G0jActh7RCES2Hy6Vs4d0M5FwveWhmDVqcx9dscEGdhUN8lAlANVIHlma\nOgULsDq500j88K2taKdtvvHP+HihBulTDNJkPZEja3LR2ZtxG0AImcSzmUE4\n3xLPD8J6nJ4pjA7hM5oIxpjoCK0y6v+xvbSqjFI9VbQIUZSXDbnoRxjJkhQc\nbLLnEv823xgCXVM8YT9N4t+TdRNaNlmaPdjOXV+jHGQRPKu6Hy+86PKVlCFM\n5JL8VUKFY8qF20BSrqOpkXeublEiZAjccnxO+21CbKmoYkuo46n0RXHtJzu3\nPD/t3IiVDTD7K7usH6UC/nEOG5v5ZsPawi73XVsbR1vP/dTugForTpmvlrir\nl8bpQRpuALD9/QiW/y2R6/RzHRDrFKCW/qy14EbWK9177wRFH6V38fLiZCkV\nFNSVC12Gh4I3gjOKTGnMLWcr6HJ0eo+JbUTXwkBfdy2j37FYYu5ystnoj/49\nWbJF\r\n=0Fp9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.deda86d8c.0","@material/rtl":"6.0.0-canary.deda86d8c.0","@material/base":"6.0.0-canary.deda86d8c.0","@material/list":"6.0.0-canary.deda86d8c.0","@material/shape":"6.0.0-canary.deda86d8c.0","@material/theme":"6.0.0-canary.deda86d8c.0","@material/ripple":"6.0.0-canary.deda86d8c.0","@material/animation":"6.0.0-canary.deda86d8c.0","@material/elevation":"6.0.0-canary.deda86d8c.0","@material/typography":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.deda86d8c.0_1587431752849_0.06300925536230229","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/drawer","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.d10412cb2.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d79ad2bff2c3c186fa76b5b2dab0e435d6747f5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.d10412cb2.0.tgz","fileCount":46,"integrity":"sha512-k/JlXlf7xRqIOjdp9+IvZevTV/ZtuX45Gbp6iAPiVl5um/B40Dpm/ktSyFosd1h/02IFHIAeWqcQ0EoUfukw9w==","signatures":[{"sig":"MEQCIH3nbHYo5m7cGwKgzgYV+WlPNE17QlGWYj19taaBLvKvAiBnGN2S0gPqgpD7PWV33VANyyCbLuQ3VsNKmxdL1JJp1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzkyCRA9TVsSAnZWagAAcXYP/1/iRZ5XQzuSuEGrEUSS\nU42bElUR7CICIM0xhc4FCNrv8P57MsxOPJ1qKVfxbKyya5soOB1QEPuwimmp\nFEZvRd8OMAclICyFYg9UnC3cGijsCs08uxkiG9wbrv79pv8I2yE2Fs5R7Y6P\nW27DXZaZqzDQ14FCtfjJ2onXw0jj4lf0hOYWEpOJ+JmWi81RVsYwD/amJTOg\nzqj8wy2fcBhNBTbXsnQETZzm25xImVUIB5h7A0n1KOBA+IFa2adJoeGS2THO\nOhyZyxp4+nd/0NoK0x0s4bMMalKTuPhIJJxMnjAjvov0Scc2sUHJR4OX5sIz\n1FDPwfzGy6Pmqf6gogCfoow37PH2AH35J/sLVoEtgTFiFyV4cHZf+7XXfq2D\ndRS3PuN8KvOtkqIL1hoxGYMZer4xBDib3c5/SUkgTUdkZwuxq6HSHbDCzZZg\nnpjsHvtJmUnQZj4FxuM/Q3d3/+I9Z9RND7sbofM/hxYgUNDV79Dm4NNwxcW1\nNxf47broq7grbeRuBmvhtgTFW9rQhe97NGEjr16mhuHDsjIeWucLzOElgOMq\nmIiokZlwBxi7Xx7TrqI2QN29ctw47uzpntbbQKvHREMBstk+4kDiJ7XpF2me\nc0srk4/FdCE69bfOrJj3LUHtS9iQ28ySbErwpt+JVlEUpEfUzlKTFwVdRzQt\nac0f\r\n=s1WI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d10412cb2.0","@material/rtl":"6.0.0-canary.d10412cb2.0","@material/base":"6.0.0-canary.d10412cb2.0","@material/list":"6.0.0-canary.d10412cb2.0","@material/shape":"6.0.0-canary.d10412cb2.0","@material/theme":"6.0.0-canary.d10412cb2.0","@material/ripple":"6.0.0-canary.d10412cb2.0","@material/animation":"6.0.0-canary.d10412cb2.0","@material/elevation":"6.0.0-canary.d10412cb2.0","@material/typography":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.d10412cb2.0_1587493170412_0.5013518501134635","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/drawer","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.c141801d5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5654c060dc7242ca52ed427f522153917ca0804","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.c141801d5.0.tgz","fileCount":46,"integrity":"sha512-y8H7mFXsh43Eud7TCuLY9ZAvSnaQ8xcZPuEOtYe1Q5MyZd9VBOE0L60GnLs+P5ccuJA3TL6fBvkxCtLxNsSNNw==","signatures":[{"sig":"MEYCIQCC+hjGdbSb+7DUweC9LQ0ouMUUw+HbkD1DXw8WSpeXPwIhALyXntXc8Vn04Hxxv+x3P3Jnsu6Xhvivr4cBMnswn0Qc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0zQCRA9TVsSAnZWagAAkakP/jZ0lSjopAnHcz9/3jvb\n80dLzL6StI552yeb6laSIn34/YQVwCC1LEBkh19iZhbwYhTUO//fp4UwwF7G\nfIT+ERuXqQfVb4hAUd/lIhbcVdZdfz/I9jbLdzq7MmnZoGglmWYxkeElg5k8\nr7+nymjOWGwkRIUzR6FmDHNxgOlsysre+BZgVHX8OiQ/z2mXoFdrzu53IMY6\nIIOHTmW21Lo2Mr1HTtx2Rh/SfwJ7teFrTT+0u9TT7AnR5qClb38aYSqm/vwQ\nasDnddFe8WqHwdrYvLYjdIp/ZiqJw4vCE5kZ4tJeT/n7CsAc50Wuyj8unjMg\naL5j/uZHrAPhGTDpVtLRedmmgRDNov0rOdzvWsI8mucqF8Pq86E5BtbyOH6j\nFwI6qM49wuFBg9ysyNjL5NCqO8BWM2cOmXhAUrF38duiHpwd+1WscWN7NCnh\nmLMcFqRufJNNu5JkJwtvtZmObf6h89RVItTpG+p28Tv9bSOsTvv2AAGnXihy\naH4WJTMdVV4D3+H+YAyo8dG5jU5PU34z0ZsWTB24AAYdPWQoXeE80kH/Ap/H\nI8N96a0L6lzdpW2U0jUH0utyTU8I5Z5PGZt/bgFTpuUzwzkM8HRpKRSVa548\nJiKyvbd5r4VLKXzb3oXTnhmJAwLDNJHWwDFWrIPyrIPPe3ysuEYMbStn9T6G\nl7Os\r\n=UC0r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c141801d5.0","@material/rtl":"6.0.0-canary.c141801d5.0","@material/base":"6.0.0-canary.c141801d5.0","@material/list":"6.0.0-canary.c141801d5.0","@material/shape":"6.0.0-canary.c141801d5.0","@material/theme":"6.0.0-canary.c141801d5.0","@material/ripple":"6.0.0-canary.c141801d5.0","@material/animation":"6.0.0-canary.c141801d5.0","@material/elevation":"6.0.0-canary.c141801d5.0","@material/typography":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.c141801d5.0_1587498191867_0.9793668659888182","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/drawer","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0-canary.28d10a96e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"063eb7a52d60c45a606af702bb894bccf96bbfc0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0-canary.28d10a96e.0.tgz","fileCount":46,"integrity":"sha512-eAfUMqxokv22zBZOHfvG/ku/qggZlRQ8f1YVsVc31fjK+it2vOX0bbku6zCup2ipgxS0rUJ/UezbSkNag/ghpQ==","signatures":[{"sig":"MEYCIQCJmAZpCXqf/XHqoGMzV53R6u9uAylISfwXTLPPevpM0gIhAMRsN7PeHCifIuVfnWsIqHn6ugFxBHvbvit+biAWC2kM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMBQCRA9TVsSAnZWagAAhjoP/jlb1B/sHsgGrukv/Nhf\nu6cHrW3v7OWriXHEzVQ8m0EDwzJTkRHHZI3j6zU88PwP2HmfmbBCZ1NGjfoS\nIYKgpvBx4GLqoungzGaKsD8lT/yEZl9j74HdAn3kDpXmBki/jZtsE6hLpVxW\nTzvG/PI39jNjwXygga9SrrExlAT+5udpMXxvnUCHVv/zhrCz4ZhuZ633B3F5\nrBjU8g+iILlj70I56KUAPur+k9vtbEKrbTloYqeAe9HIygj6ytQOQQH1YoNw\nw1EZOmM9/X8+SbtHe9k/vCJTBukXiMB3nHfFmhOEeMPuboRwlnnEvlqrnAxl\nn7CfUHSDnzN+ijpfKvy5rOnQoVGMnh6uI2mexcc514wYOh8fMWXYPhsnfY2y\nfh8//vEdMe01ryiU+yCNnz2bGfjeuSxxOsBKlwUJ+ZgLav0F8fkJ2TRZTVuq\nhgTUtXgOxrJD1CqZnuoHz4SPUgDhseZTbjE566sH2aegS2vFZn7Essx2iBaw\nqeg4J709YBHe3F7M3PfQsM7a28wMxJqmMU0oQ1+PyPOUXHURrTLv5Jt8bKcA\njqyqIHlrz8IKuud9p1n0rm6U+XobvL3BnUeNuPnDlYkFlmizVKNLiE5rs2r1\npQrt+Sjy5eJjZeqMLOnMyW6VQuylpS7vtc4DbIUs+YHKkVexD5gdLzHlbtrJ\neQlX\r\n=61qg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.28d10a96e.0","@material/rtl":"6.0.0-canary.28d10a96e.0","@material/base":"6.0.0-canary.28d10a96e.0","@material/list":"6.0.0-canary.28d10a96e.0","@material/shape":"6.0.0-canary.28d10a96e.0","@material/theme":"6.0.0-canary.28d10a96e.0","@material/ripple":"6.0.0-canary.28d10a96e.0","@material/animation":"6.0.0-canary.28d10a96e.0","@material/elevation":"6.0.0-canary.28d10a96e.0","@material/typography":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0-canary.28d10a96e.0_1587593296076_0.21687964473216104","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/drawer","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.8540808be.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95ef494503eac08ad9cf20b548d07b56e1d87b71","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.8540808be.0.tgz","fileCount":46,"integrity":"sha512-fybKiRHW2h/onhJWtrvGGJAOJG3g0yL7d8azxGKH3l5Ay28zDlOSvEuPRNgznACebKM1aaEsu9nUEfa/1iammQ==","signatures":[{"sig":"MEUCIQC3ryvsoCG23NCRdDe0kj5IFyk+e7uAFn3iqOtNgZwR/AIgBPSM/DYgU30ePw4Kfx9pmv3etOPL+E9qJ+ZHVxZ+8PA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/rCRA9TVsSAnZWagAAV00P/AhikgA+SGQicurKpj17\n6dB4NV4pjZYqJWJhRiIduBkN80X4185fFGuFPSffikH/OjuVQgQSSCNP1mTK\nnempxj08xUv5NU6DEtNTCnxOmzwBJNUrGGRoeUgld3O9WZx8UdOopySJFTGy\nG8mqRrV58Tw+Y9b3ss89HpsORE+s5voNGrwQKpSOYZA50+yz//KnJPflVZ/j\npblco0OJsOHVNJopObhmfNgHfwlmXtDRmRZEhsB5xEndG9p6dVLFM+GLNMJk\n+ng04BK6lur3FoSB7U5sS9cxqY2aUa3Ask8nM5lze07mPV5ZANL1VQ6VX0O1\n9d7FdoAuodE8t1zMY/2dMGHIBaDRAvPoMmz8nDUH/GIae06MZnp+MhAcJ26S\nM4QpwRhZyEcSIDxulawyxnX5wmwkfJ+2Mf9ZCfK0U9OvmnDodEZ/Ate2L3e0\njmrr5QtO00yLs9vyAYBZtNP9/ji6tJccsOEbz5bMZzQQDdtSINR6oga7lG9V\nVAF4/c/kqNn/r7S09tClzQ25tclXu4TW9S3mLceZSZHsoyVqYnTMdL37E+LP\nt992sy4OTY7+gwzekl0BUXa7uOwQRkZm9ee3BYvfAtKg5jDceN+owI0mSYF3\nD7XCqhKuA8J2SxKJTkSxexuYIGseMYqcFDl3igyH/8Yawf0Y2Ahla5HWk8op\nK6uY\r\n=xGtu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8540808be.0","@material/rtl":"7.0.0-canary.8540808be.0","@material/base":"7.0.0-canary.8540808be.0","@material/list":"7.0.0-canary.8540808be.0","@material/shape":"7.0.0-canary.8540808be.0","@material/theme":"7.0.0-canary.8540808be.0","@material/ripple":"7.0.0-canary.8540808be.0","@material/animation":"7.0.0-canary.8540808be.0","@material/elevation":"7.0.0-canary.8540808be.0","@material/typography":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.8540808be.0_1587662826586_0.026186121334383028","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/drawer","version":"6.0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@6.0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b2d427953fa20b2aba417e375817d22d4c28321","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-6.0.0.tgz","fileCount":45,"integrity":"sha512-ukh5R+aMOBf5wmZQul8eHR/nEbLmxk7SXxXanv7EXCRmY8bgNyAsnWu7ZmCAYlMN6lww2mpTEJqvi5XbCjbSiw==","signatures":[{"sig":"MEUCIQCIWIAIBGkJHSc+ToPNjhn4Sh/k6qCasXrqa+EYlUZXGQIgLnV9vRm/aw5MBbsuL+Dv8llC+iLdMpvuI/1YkrT+4H0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":513632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodAQCRA9TVsSAnZWagAAADUQAJXF4Gne2wTyumvVdMT2\nYqGfgFyg5hVBZO+CPPXHaI/QVxPfCcz8T0+klhNqCfjs8lm4RDPaQ/CTZQFF\nM0HnbV66fmsDEh4JNDvPqDj8CP3NRypwJ0vAujuNv8OERKsVycdBeDLiofhh\nVSUicTtongCF0uARKD2+r/iqxV5YVaTNHUgDiOH+LGralC87KY8AS8X77yA1\n1uCtwchq/fKegT7/+f9xFr9+0XZrZjKP+VwgmyjRYSG9GlGC5QErx4uSSjjl\nMQftuWRIJXIN6DqO4/E1/+sLSYiLIse07P0y1J4arNRBU6GiCDjjAnpdhe1S\n19f/nhc76k3NRKvZmI4TakjdiH9CpaeUUci3Hk5ohGUYwi224312aIoOmWge\nAAEg8nAYzHNu+XXO+s8WWA7lRv05rx+r3RVX8DiWaC3c804gZaskjU874EnS\nfrx77w5/U1vW3s4YPw54mpelx2yhzHopDjoz1mwUbcHwdZ3VC6yZoyj1q767\nTg1C2Y7vV/M+KenWgEmoIvviN4W31IxQAhovKJ+l9rL1fujVekIKXF3+FvU+\nQr2SofVrC0sxWVMbbd7+BFyXgQnxYsC/wNj6O4BaoUhhlkA/eoNw/HXXdQVM\nifwvWNQdFwZwL+NfQb5cmkYUi2uCiiR9AIs0O85J+c7ixxHOcSwJ/yReKg97\nlVIR\r\n=BFun\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^6.0.0","@material/rtl":"^6.0.0","@material/base":"^6.0.0","@material/list":"^6.0.0","@material/shape":"^6.0.0","@material/theme":"^6.0.0","@material/ripple":"^6.0.0","@material/animation":"^6.0.0","@material/elevation":"^6.0.0","@material/typography":"^6.0.0","@material/feature-targeting":"^6.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_6.0.0_1587662864016_0.5771183029416826","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/drawer","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.2673adb74.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be6f30bd93802fdf885c4bd68c0885216b2e6741","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.2673adb74.0.tgz","fileCount":46,"integrity":"sha512-6XevILY2KUxGX9MuQE5ilULbdHAA/UC00ngqNA9RLMABVUgvHjMnKWcIMLfTKBxcAMe6BYWACu8gw70tqR7c2g==","signatures":[{"sig":"MEYCIQC/vjKv+GbCZfwALcJDuZrv7yY48DRG+RTWO1eB8l1XbgIhAIxCPTW5rAMnR3NrYVrZSCt9HXauRWVZVwNjmjDcZ4Xn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohrOCRA9TVsSAnZWagAA8PsQAJP42lFxSdNAIPXpYSoe\nDealloNl/vGigLrzTmjkFaKyGpK7HgD6rbchqVLXwpaT32nPSopGi4wTXIR4\nLUxvbomOGFH1WyoWsp/E5MzgPxYApci0k8BVCclkZLRINCNz+hjEEpHQoxGG\nvfHjFy2EspUFdas4OqXA/MBZnHUD/OlHvJrH/W1V7VA9E5SDWYNt7LhUvkfw\nwTY9+5uc4891DNtPRvkh8bErz15ArFxAt/ae3LsTLlmsmdUocww/Gnv8GjLZ\nsah/ThCN9BYcPZtH4JJY+oP7xFCn+KYgjS+RiF/CKwBONzUgAA/NeNbo0zFL\nYrjDzs3Mhbi2AZSJowUSotCKFpeu1/D06HHlqLh4dGMV/oiuSXVKtU3JzETO\nwKh84rPlAVce6NLocVBMLtzstnoKHKg7xTLSmIYMN7pWnmVCIk6DE6fQ6beq\nJMt9O4tAawg61blBynBcCgzX0R2AME4D/GK8kF36aXNVqWlQbmgrbsZSKeRB\nOsht5oQNsArirNIf8zvGVidMpMhqUHFDEVU/3FDywzsTTKWzEkuzYrskI3Fd\n+1u+ITpHgF1MtdCAQlOwu7kFEVHwpYnKiq0sMDQOO9gaEY8vvN6W6ahkyP/1\nKqxPIMnv4X3qlvnaT1fqvzv3xVabrpY+OqVu2mni0cots94xf8bCdgHxfwvC\nPWJM\r\n=zpKC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2673adb74.0","@material/rtl":"7.0.0-canary.2673adb74.0","@material/base":"7.0.0-canary.2673adb74.0","@material/list":"7.0.0-canary.2673adb74.0","@material/shape":"7.0.0-canary.2673adb74.0","@material/theme":"7.0.0-canary.2673adb74.0","@material/ripple":"7.0.0-canary.2673adb74.0","@material/animation":"7.0.0-canary.2673adb74.0","@material/elevation":"7.0.0-canary.2673adb74.0","@material/typography":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.2673adb74.0_1587681997543_0.7582804789532345","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/drawer","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.b10d0d7f1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"753af67fe02790dd8a1183f293419475865ed8f0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":46,"integrity":"sha512-NuM2YYtOdCAMEqgk+/GXHpt1qvEhP7CTtF09AVfl24w6BtwH9Zv0l0SZW03LaCA6RzyJQ381L2vXmzeqV7pKsA==","signatures":[{"sig":"MEYCIQCEMz4gAlXI2vMfAdF9HNzvjwNR14+suKkC3bFgG8bCWQIhAIAXevKY/O0LqmgDIcAUYSUb/uw0t1vIT9RfU5E7iT7j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojEtCRA9TVsSAnZWagAAFbkP/0UW1OwXojqXhe5xZU83\nA4OMtEWOIlbp0+ButOkc8FdgBvdRAtbjDRr/fHVZkT1kmMhonzgtvxpVM9rx\nQtML+13wXUu5pj2E1hCiDmG717r/yQi9nqf9C/vvEVbCE9wf3pq9S5VC30Bn\nIrIY3mdWtdevUJijafzjL2Rgqkc/r4fBOKwRj8yj8drth/SpdqeDTRJGe8lP\nHikwmlCzqmzxb2maAoMcOWL/hrTAQYgU1cQaVvO5b16pTe/Q5Hp8uCVRDb0H\nPYT+SC/XMP+uZzMns8cyYzAJfip0oDPntfg3VtbR50HBLi3xUEwZgks5BZCL\nYqP3i0vA4bG6LXk1C0bZGA7/thdWiwuaMo6GkDAhed6LL534ZNGDBW/QCE2D\nLm7A/yl4sd/Xm5Qh89gKihDdvdBiGg7izIz43gWnMwzIieA+u87Pz0/o+KAr\nRoZMx7kJjPhPzt+G4FiD8XM0qm6bfBms0MsoN8Toy2wWjIOdgUSknt2jF/BG\nlXzfUvt8+klXy6gMU25/gFqV7xqKHI8cOBnywGeYehGnFI85nnA1g2BvTn/m\n4xzDnpbPdWv85AkjE91QgSCEUEfXb6FT+/Td2VJFfdVd95Z2QWC4NEyPSgbi\nVTDVO2bLnLNxDt7VM/eTBp54f7JnLVy1NFnjwn8lq2wK10IODxOVkYCeDZXE\nQkSA\r\n=HflX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b10d0d7f1.0","@material/rtl":"7.0.0-canary.b10d0d7f1.0","@material/base":"7.0.0-canary.b10d0d7f1.0","@material/list":"7.0.0-canary.b10d0d7f1.0","@material/shape":"7.0.0-canary.b10d0d7f1.0","@material/theme":"7.0.0-canary.b10d0d7f1.0","@material/ripple":"7.0.0-canary.b10d0d7f1.0","@material/animation":"7.0.0-canary.b10d0d7f1.0","@material/elevation":"7.0.0-canary.b10d0d7f1.0","@material/typography":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.b10d0d7f1.0_1587687724782_0.4151089839820232","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/drawer","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.3bd8c1bac.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6206350b375e211b2b0920a39b2e685bccd5f7c2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":46,"integrity":"sha512-fKzj8+iaeBB74O0gpPjfXxtsYnEvaCx5wiozb9fg8acPxbIbGqqRT6L2Tl4tP+Vp7IQjPKqcmfqIHeS8UgiyIQ==","signatures":[{"sig":"MEUCIQC9CQwk5BEuti+9Fek1oGPZBv9oiWAPBDo4SUgFXz5UkAIgP1z18grSHxsmUIl9uECI7hnzl5X5KxeeKQJEJWgLq3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1TwCRA9TVsSAnZWagAA+MMP/1yHpXR/kuySJSr9DC6y\nK0v7Mk+mS5eW+z0FJmLI5n0bPYc64WCDw7Re3EPjvmYAFxbc+7+xE0TT7iy2\nc3aMTf6TAqXdQ0qTPDV8L65jJ9WEsp6wIHQFr9j+hGIN8bakBo9cxYrybNBH\n+wmCbBEdU0w8lXR8U/CB7mqnbH5HS9wNwRUQmPi4Edw9DZdsHY7zXOMs13IS\npP4fIhkzyNhyxNxIhUhpcBE5Renqro7JoHESukVGiPEVm70T2BdHLPRjnfKb\n1hA2h+9lJP/dYzN1yxysmFNsVaB9LQ3P/Bq+d/TK0glGZyfK2JAYXhz8iGHj\nvj6/C1IQeGNxfS3ecM0odss4I6Tue4EjgWoyjpacLPQKB/r5W78AKMGHh5bG\nfXrh2odmDh/HaGsb6r7v9Zi4GcWWqaRVBMIXRenmEbqbWgWP0ITsEhDxe8A2\nlAwEc2cUBcMRiZVQWbw23tyMS5HoxdoiXJlv1pusjHm3XWaCZaOlb2jnC2od\nmd3otALQJEtalnymD9lXVEtrBAOgUKGI5s5eGXwngEkGoAnhOTyrG/9gIkg6\nLL07pNrvI/RYcUMw/JbJ86au9YbNIQhSP4x0UxFxnmBt/poLMeCPxtIRuCJ6\nkvCJMS6hnJ/We+kIVCNi4ZdLdWJ6Rn037oFqOBRp1UIk3asE02UkZYDvyMNO\nCSb+\r\n=h2qB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3bd8c1bac.0","@material/rtl":"7.0.0-canary.3bd8c1bac.0","@material/base":"7.0.0-canary.3bd8c1bac.0","@material/list":"7.0.0-canary.3bd8c1bac.0","@material/shape":"7.0.0-canary.3bd8c1bac.0","@material/theme":"7.0.0-canary.3bd8c1bac.0","@material/ripple":"7.0.0-canary.3bd8c1bac.0","@material/animation":"7.0.0-canary.3bd8c1bac.0","@material/elevation":"7.0.0-canary.3bd8c1bac.0","@material/typography":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.3bd8c1bac.0_1587762415850_0.3324276648561515","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/drawer","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.b83c8dc22.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10d63f053bcb32e0dfb265d1f038a3a60d539f86","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.b83c8dc22.0.tgz","fileCount":46,"integrity":"sha512-zCmn9bT1lw/+10/m4bhiPlncDqCiDFdMUAR5ysJ6wvcr4fPVllLbvDY5qyKPcUGRiO0BF8qU3XNwvULGiV532w==","signatures":[{"sig":"MEUCIGXZZ+p8O1zpxK+CqYtDu/y3mwljV9ct22fctmVx5UzbAiEApar7TqTMohiknit8wcr0MSmiOSe24j+awhKfOTcrSKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1ftCRA9TVsSAnZWagAAAwsP/ilFZOCW93CZVyaIdJ1j\nj7wwfUgg5JLzMIXnxTD2SWHxNGJ27GkfhncghpXTY4v7No4cg4crYE+PGOpB\nfvWB1EOJXj3lIyuIW5610ACqB1X2Y/mqBPprv9OsrylyHFogOJOfOrTaIx/w\nhEDV3J+2lJX8Ga0/audxk+qkWQrgQzACSg3nIzSWXLKvwoU2fSX9W8GjlRMA\nqMTBLfXEPulV2iuHV7G7pBcZs4mkxYNB2HyVtCJwXj6cM8car0P6gB4WzkXl\nJRele2xIRshnD7m8QoCe8YS1QpqEwrjF5byD1F0kBfa3twOvgKUcsXodWCPe\nAhomSkHwzOhF6xzc4pWyAx2d8olBgZGEjiwpBTLHurUO3vF/x0pOts2W9hlZ\nzLPck0Uhji8FjCjBiyqfg1Zz3BhgeH4NPdd7/lhMf7rVvWrLoSUyHbqraDUm\nYgKx2jiPRyivIuxlGz3KT6r1ED1UJrJcwuaWU8CBOkbPHof2H9qh2p7Z7n1W\nqk+FO5C1I6vmaNvthDKuJucjZXihaGec+an9k5KKaBzl7fDWdRx32a3i0R+D\noIQstSkXP3Lzxxyjtj8lEV9sAnMwZyoxMSYMzMiB2jLKK3+5K9ZCM7Kx4VRN\nJcWXREK8YWOQXlqOKWBuNdYVbecG/pK6oouT3LJUo9hsovtBkyBdkHvMhP3g\na3Wl\r\n=c4dc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b83c8dc22.0","@material/rtl":"7.0.0-canary.b83c8dc22.0","@material/base":"7.0.0-canary.b83c8dc22.0","@material/list":"7.0.0-canary.b83c8dc22.0","@material/shape":"7.0.0-canary.b83c8dc22.0","@material/theme":"7.0.0-canary.b83c8dc22.0","@material/ripple":"7.0.0-canary.b83c8dc22.0","@material/animation":"7.0.0-canary.b83c8dc22.0","@material/elevation":"7.0.0-canary.b83c8dc22.0","@material/typography":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.b83c8dc22.0_1587763180782_0.6816891025945515","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/drawer","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.1b3dd846d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bc6e6018dc250d1eba55a0e39992b52400df26f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.1b3dd846d.0.tgz","fileCount":46,"integrity":"sha512-C6Lz/wYcFFNJHQvDXqnmIq5KJbWrt38LKS7LuwHpkBJsGhbznQIwaSBRF6p9L09pT8KAx7/qTMW0VO+bYSG60w==","signatures":[{"sig":"MEQCIHqvSZfP+jveD6azEMzqKGpr3DKKvHEy3mESDyYXAkKFAiAl8FlbvsUvfyoZn7yqep1j6Lm6sz4RZfoUItiuM9+zkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4f+CRA9TVsSAnZWagAA3ZMP/jMXCYO/+SBZrjCiEyyz\nnTb1Wupu7XnXYEsvU/o0/gs7jSbYaxJI54kMHXDGgUd1Z+NvrXuol9yYKwQT\nl2RkouHRQkWsMWVPgM0r2udv6KeG1Efp+MMuCG7WRyhEdydUKUdIih94z1ts\nzz3DTrpCAgXv7ZksW22lUpGxp8cHNcKennhEI94Qxi9lOCOL3FWYuUmERhQh\nCkQCZ/U2849oSgG24igY90tBOayyEE5GfMSKJz9WLAAlxaRAtV69g14OOwD1\nPV8ZOIv9sCKsrlrysofsN6MO90J1rkIwfXiN9rPYrQIoeRHTbCVCisQdlwqJ\nJWjJ5aoXZ+28EWFOvcRP4ldTZhUcuvEORI3r5JsxWXDeeeLp5U59F0vk9H+o\nh9GedsTvvo9wghaStYv+i4o2QmprDnXUab3uuGNnaEapjf0YqTiI8pZiXLZN\nwLdSEOBjfUEtcBnn9GHBsmBA4vsuPXQKxPIC+C4dbWD/dzXMMTuRFEm5alfP\nIU9VWMXi2Zcz0A3gLO1kaJ9ZNUDKFKsZF59P1tSO04mx/LTjZNd6p8s4JOLc\njo+I4jrJjFjXXaK9tI+7G2HEZxveJ1C9lsHiAFSs+aJz32xWuW9+dQ//x1Xd\nuN6Ew/bVBEV7PmHDDU3o5khA9gNIM9kjo1w/cCDWRpm0CGbFaiK7gJ+B6YT8\nSGQF\r\n=7Uq1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1b3dd846d.0","@material/rtl":"7.0.0-canary.1b3dd846d.0","@material/base":"7.0.0-canary.1b3dd846d.0","@material/list":"7.0.0-canary.1b3dd846d.0","@material/shape":"7.0.0-canary.1b3dd846d.0","@material/theme":"7.0.0-canary.1b3dd846d.0","@material/ripple":"7.0.0-canary.1b3dd846d.0","@material/animation":"7.0.0-canary.1b3dd846d.0","@material/elevation":"7.0.0-canary.1b3dd846d.0","@material/typography":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.1b3dd846d.0_1587775485527_0.5742585918220615","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/drawer","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.29debfea7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdc9da7b369b06ea0155ba816380bcfadcb79e20","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.29debfea7.0.tgz","fileCount":46,"integrity":"sha512-D8iXmHhDEH0G2xC3fzz9Si0uwCAzv0PfLMPbp3YgzYUErOOnPanxfdXAkijjJarvrFpSXYp5HbFfqQ7DrVBGXw==","signatures":[{"sig":"MEUCIATyw4mWIPHOEtf5VCZL4jzPpQYWJkbdqz9uKBejA9UMAiEAkssW5JPACSNUrVA4AzZKOvBEof6uONiBpjDvgOKDJyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptEMCRA9TVsSAnZWagAAOyAQAIgdXO18WzAOYD/HzM1Y\nUmZk5WOHkmb3SFcRv9Y1+ScSewsn9HPZF5tCXawXbiQ9yTQYm6Hn2kZth7Ox\nmecKxJaj39ReYrqhVH1FKSU277qkXsl44jyI9FMGpFCeRU2AaDsi1QQ1mePu\nA+YPOCrW1iu9ZUYpQOLEBP0rwoPXD+eCobseONhXPquRipCrFP9DDMwgSkpt\nxkUlKzGXt3F1/t6kdXy21v+VYvECJeQpjnNMKlILpNxt1PgT8p8L43r5+1/Z\ng12LsRFymcamV++6JGy1vAY08zdeah+VEdV0113By0R2JwPf/YCTXHIAwMyr\n+GuZu5HN80U+NA8eoOGkF0xCmCVJYhXGhyvuoNVSEpq2U6jgxq0C+I528hfk\ngaRGZQ6fIFk+BNwNXgK8N5yV1qTrg0J4ih4zeae+O9HuaJ7AymWDu5/zZm9U\n1XXgc6FDpgkFEXc5F33+P8AF8of4i3vvO/XYegEWNXvIZ12FUFZmiIYCdGC3\n0OZDbJC5pkf+Y19sSHM1p7ta6h2dmgyR/FcITzO2WTu/Xf0q/ulHQCYW7lGF\ns05PrGNAVBa3Ur2Ji+T/pLIJpB+JfF9eTPyd5pSRANoctHHJ+DRMCNEOJ659\nO7M1sArrj/d7/zyfiYOGFt/2AVIQk98xsCUPFKC5wa5iN/gYOn40m/F6Y4o0\nktSg\r\n=99Kq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.29debfea7.0","@material/rtl":"7.0.0-canary.29debfea7.0","@material/base":"7.0.0-canary.29debfea7.0","@material/list":"7.0.0-canary.29debfea7.0","@material/shape":"7.0.0-canary.29debfea7.0","@material/theme":"7.0.0-canary.29debfea7.0","@material/ripple":"7.0.0-canary.29debfea7.0","@material/animation":"7.0.0-canary.29debfea7.0","@material/elevation":"7.0.0-canary.29debfea7.0","@material/typography":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.29debfea7.0_1587990795888_0.3655540875486385","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/drawer","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.28d32f8e0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b1e67b7e771a37eb9082b712370294135317592","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.28d32f8e0.0.tgz","fileCount":46,"integrity":"sha512-cEugoG1vNV2ZatD1kJ21bUcNS0oIPKaAwLfwn042z7MW3Zoe3XKut5jtQv4hlsYwCa5m1y46Fh9NJ8jRmS3Y7w==","signatures":[{"sig":"MEYCIQCXm7fY0GIr+HjLt6K0tUcwShr2981fnq5+hGnFb8+9CwIhAN+zBbnZS0ZyooRhzehZ3Ft+yaLzw+y9fusQ/7yXHSnc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepudRCRA9TVsSAnZWagAAQdAQAIKYh4L8KGuDWnZdSusT\n+BjC9l/XrajznTswIv9lEcQnFvmLTFykMf+i+e9jPjrzS8mwKbMVtvyaEheF\n8twr2+/B8nhpegGIwtZjkTlPURN6N2JGbLG41MUPDh7Ob9JnjPfyt2DNqLUQ\ngVluHafyKugz604wA2PUG5SQNsBo+jvCfD+sjOF9wQck4AWUqS6NZEC/JXG4\npAyULL6W3afDHsF3jzttNlwX2bkdQmMKvFLI59T8h6Ui/HY9qUem4MSf+V56\nDFH+esiAmaDlpFchhF5fH0zsle6nX3vAHXgGNY8cIjdCPa2+eSGCVhhYzEZc\nNI6BeoyyKAI176iKoDBQO5QR4ijKY2zO2pUR3kGA+MeL+HJsz/gNDygZkLK9\nQe7QV7pV3xd/FtInqX/GmvGrnh3rf5micIahQxJh1KIeWkAYLmv84QWw6AQS\nVe4ENT9KXWKw8qLUVsAfPGntl6/4gitEv6bSmSgIshjux2xDH5soYn3dSJi8\nWVrKqwKPfbl6u2gEqzZJdLOpwR+vEaGuF47GyGTZTDu1WUxnqQGyOQ9e1Qv7\nuz6m0nOHB0fMSCv37MdUBNVZ4Xj74nJNGjJ63+w9seDDolQ3KMfMBffM7X2X\nMEZKba8ev7U1oBSuVfOGHzzMDYLjjGMT1slKIC+3HYsfUtN091eMfuIwDkXG\nbAqn\r\n=ZqQU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.28d32f8e0.0","@material/rtl":"7.0.0-canary.28d32f8e0.0","@material/base":"7.0.0-canary.28d32f8e0.0","@material/list":"7.0.0-canary.28d32f8e0.0","@material/shape":"7.0.0-canary.28d32f8e0.0","@material/theme":"7.0.0-canary.28d32f8e0.0","@material/ripple":"7.0.0-canary.28d32f8e0.0","@material/animation":"7.0.0-canary.28d32f8e0.0","@material/elevation":"7.0.0-canary.28d32f8e0.0","@material/typography":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.28d32f8e0.0_1587996496731_0.1553438670419105","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/drawer","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.af71cfdd6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f097fabdc499dd0be8f6229b125d6316fd70b7e0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.af71cfdd6.0.tgz","fileCount":46,"integrity":"sha512-y1ymlKPRx/CDEpuh+mmJlw9XtiRwJVW6pQ60mGvyBJbfAkGJ9c86me9ct02y3E4Hdqv2YxD0IoKCTIpuGYbh1Q==","signatures":[{"sig":"MEUCICdGnLTF02vtE4tbc+8LDK6U9SlEMMh7COdBcq67OF7OAiEAmmvCYs8DRVh7pv2KWQtHuz9iQB9HaMIxkyfbidX7yiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLm6CRA9TVsSAnZWagAAHF0QAII0X6Eh/sxZZUuI+FQb\nbO9ylvikGi2QclvNqaDfdM5KmH6huoOX02L3jjCTVMOfI+nsvc08e7Xe3d0p\naTTc4t041jexvEKtqHRmp2H6++LcacQBAxzwP0bCdqihH9Ke+Pv4UiV0eFGk\nUo2mLSROU+agfBGPHnagM7da0ImpC9nrfkJdPXRd6CvKc/eQeyIp09iohbMQ\n0LjIKVCK9zJ7rhK7qDButs2pHiZqx1VWgoYwvO2HT9T+03qieWwHFsuNLwCc\n1+nvURpMvK/BsSdsp5fzpLkosswvxK2VVhThcHVgal0RZO+yBepVEL1e9nPW\nqiugeBsu7cPd4KS7Q59nGSV255erSNEyrjt4VA6Iu6LcDcq0UPH2osq0g04K\nQwMSYOJvny6V/Xd6a59BIi8wg1HnJ4WXt/Vrenmn55H7JSCI72c5Qwk1sBxF\nbwFufJWY/tf1+H8st1N1YM3NKZZjBIHYo0pzRxhJi77bRhs0BjfwY9AX3EPz\nXFNiQB/mr04tcQPWf4B9GxuEiXTuA4EQt+uXCR0V1NhNa8a1HugKNDrkMCUz\nJOZYOD4ikUoqDQtcIZubrJAhUjfb1rll3+MkWzFYh0fLQ8CZM6nSBD8Kd/qJ\nH1y9ayO41Iz0y4z9ntOc5VMgm7PWEGJ0U6AbmlqECEvu8eMEskybtmTiqJTo\n29io\r\n=Vl29\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.af71cfdd6.0","@material/rtl":"7.0.0-canary.af71cfdd6.0","@material/base":"7.0.0-canary.af71cfdd6.0","@material/list":"7.0.0-canary.af71cfdd6.0","@material/shape":"7.0.0-canary.af71cfdd6.0","@material/theme":"7.0.0-canary.af71cfdd6.0","@material/ripple":"7.0.0-canary.af71cfdd6.0","@material/animation":"7.0.0-canary.af71cfdd6.0","@material/elevation":"7.0.0-canary.af71cfdd6.0","@material/typography":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.af71cfdd6.0_1588115898328_0.09696890178869166","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/drawer","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.99d2fc961.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b24a3caf7ba864ffacddb7ad2040c27bd62858cf","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.99d2fc961.0.tgz","fileCount":46,"integrity":"sha512-GbeJThcAJpZl61hH+x4awbb0LAV5iSTmI183jj/VYzihd6mdiVgU8I5V89+4DJX6MjSPzlvL56AKk6S2lrwHYw==","signatures":[{"sig":"MEUCIHPmlOkVuWudWfFlEH+Cr2LT91AHQW6tnW7TXXapiBv1AiEAm3uAAvrGef4AHMZFDXFF4Fw0SOSxc3YM03PRo9BfnEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVqsCRA9TVsSAnZWagAACwoP/3OoSCtgWmpviFAreX6z\n5rjW32a3WLTNcNRD19MwCY+Rh30jaDqeLv6c9pNEkCvHk2sfELdt93tquCCt\nGfE8XxeFQBp+YEmxj0aD5llCossv0h8OFn5GuAv/X1sWj2GpsBDk/N+vZ6gh\nXL+zdcdqOlp7JVVRPJ3M6SRcZ7nhX27c7oVE7KXcm/Fud7nRUeFbuEyACymM\nkBI1nfIRs0uS/llh7RyzpYiDti4NfYAqRPzTZ/8JzFaLlBXre5RX7x/6SXEc\nnyvuW17wyx+Wgk620mwV360cIsNsbdjRZf1xY1YPc1s+iM/Z72Pn9jSz2yx9\nG8VnP6OrnT46fSiCIx0wCmaow7mQZcg197CUuKfPyrtXY/uqLuP9bslDhqPm\nd4iT6bzUMgarW4BqUJE3k6DgfCHrnry4FjKThZVy04AAoR4JWMkemLEcJMiY\nggO6W3Gzl5pBdU7ocUvyUk0y8FALK8BTvyYOXhpspWAkZ1meQHIissByoM0l\nkw9CYwY1/IfmM6X8/n6q6Mk+TDZCvHofjjIPzhfI9huE0AyfNB6LxnYVmMNo\nkod6UYAmu/P1N7UYjam5jP2fw9j+NMErW0RWqsgLZYAa6DpmXFAQCgX42yga\nrkgYw77wYaD1CdFnz1cn8DoVDOO3vyoNsfhfBlW2AZGL60zyI3y1M1mk7YR+\nB3nE\r\n=42sg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.99d2fc961.0","@material/rtl":"7.0.0-canary.99d2fc961.0","@material/base":"7.0.0-canary.99d2fc961.0","@material/list":"7.0.0-canary.99d2fc961.0","@material/shape":"7.0.0-canary.99d2fc961.0","@material/theme":"7.0.0-canary.99d2fc961.0","@material/ripple":"7.0.0-canary.99d2fc961.0","@material/animation":"7.0.0-canary.99d2fc961.0","@material/elevation":"7.0.0-canary.99d2fc961.0","@material/typography":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.99d2fc961.0_1588157100188_0.24942803240452505","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/drawer","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.0e052b24f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18e8321baccde8d7ffcfe4bcf3d29625c997aa1e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.0e052b24f.0.tgz","fileCount":46,"integrity":"sha512-jCebN+XStDbI1A5mlvU754XE5EuAtO9GLAaJ+OmjB/DgO2ppizcIKlTJ5VdexwY+kzhsskPttpT3nzXMrGDRCg==","signatures":[{"sig":"MEUCIGQgiTuPRnC7UpGBBikOAuW7HPBDJGgHujU8Zz5J7xSrAiEAzpYkx5j8kFP44HbPN2WlJ4ctqBN4+J9dGjMVcGrkmbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqio7CRA9TVsSAnZWagAAGiUP/RuLH+KoIv3uSYA6ZGQ5\nL9RnSYLUc7eKlHU+LoVwmrORJl1X68nfvvrhHYoTlSyNO3FDMPlHjeYwlba+\nNZfeGUy5YRT6ywxlJ1IJvUyCNkIr8a3tAtXaCS8qpH71hbszk2Fkukcv0Nzi\nHJlrEKonAFi/dUTw9c3xqacZootDb1al7BEo1mDuYicYuV5g8yJcgGxuHrsf\nEaKSRbv2/Ru+ur86MKlWFGDQzyWbM3RoihASLqrgo7S4dA+YQRV/PShLq7g4\nSB1hf0xaftKX2Ps8G9enuUPxpM9z/bONtVYxmLgz3annTltx3FCs2ce0uhHN\nsPehZnRlU7erkThjW8ymEYtnAoLYjdJ2ULgzdB71sRw7ezL1jaCr1kaG3lx9\nQs2M/SLIY5oAdod6ZUqLLIoNK19yxtW7/pn7te+n/iiHCf1GfX0fgZ6dEnok\ngccf5GYxl7Bi1uq7lSqP123mF2zENcg7ZuidElKSpprU7Ppot4jXbffibDT0\nmMdUGxKf5SJGC0pd6GqdOoxiXj2L+bLXP3CKG9CsEIKiSiPHQpRglaohcqbs\nsTJInAJZFCNL0/ekCrpgpEDKIvN3DaDPSoLpFFuqcEHCiMCtpuNAcMkCFwBs\nwAvy2c1nMgaTgGESNuAXyg27dGuGPE1vb+mYAj4nyWscam0O0uKu8VQeGOtx\nj+z2\r\n=gbSR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0e052b24f.0","@material/rtl":"7.0.0-canary.0e052b24f.0","@material/base":"7.0.0-canary.0e052b24f.0","@material/list":"7.0.0-canary.0e052b24f.0","@material/shape":"7.0.0-canary.0e052b24f.0","@material/theme":"7.0.0-canary.0e052b24f.0","@material/ripple":"7.0.0-canary.0e052b24f.0","@material/animation":"7.0.0-canary.0e052b24f.0","@material/elevation":"7.0.0-canary.0e052b24f.0","@material/typography":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.0e052b24f.0_1588210235233_0.19194718915295383","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/drawer","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.ff4bc632a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42b1f51b0910f7d66541a80c54651bf79eb63ade","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.ff4bc632a.0.tgz","fileCount":46,"integrity":"sha512-r/7wJmHq4qsIzdw+srsHT8zlCWrbSWdQ9O7aCckhtKmBiQz80LbWFpONO6LLUH/OSI0Urh7Sue/aY9flfugQ3Q==","signatures":[{"sig":"MEUCIH5lkRAQ67Bv/Oiz0Q3ByZqdbV/ZJ8cRyVIBdEggwzviAiEAqTdDQy45cIjDABAZv9BdB00wUBUTSpgqTff/S9ft3k4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqoxCCRA9TVsSAnZWagAAlyoQAJ6KsYnJhAL8/CeU2YdT\nuTsqp1KT20dOX1ErlMegT//J82gRvXzdOHQqAeprcqToZkm3zydRa3YvfWpv\nNRrln0xnOzfCU333ltAOIzidDO5zkPo1qGzkLUpW9AVqi4D6PinVu235vJjc\nnV5fwpLmrsIV90xBWfSnMAMTd/S/3X8AbUtZS5lidhDXKFxj7xiL5I0VLhQW\n2MOgoQPzML4AiAejW3TICS546q/eQmzAiFHW0khV+rKdvB8gZga6E1M+LGD4\nto1CkuoFBGChdhxMCtKzvN6Amj+juO2Q8O8lpwBfJd/hY9WfuBAqw1MlQIG5\ndY1VKGswTRG/4F5jqgoa+f2oC+WdZnW41tiTxbX6rwfSn7dp5K1eGO3EZruY\njP0bBtRj45J47QUcbul0XT2iCAp3QRol5C3rfjt5TcjOi1ib6CaM1Rsjm1Q4\nRXbS7HaQMPLNRShXaHjV1vsjpef3zqYhzQzVypKVvYxaqo7jriYft7jlkKpE\n0V2VFn7DwXV0d4Xr1TA1FNsc5mN1ddESlcdZZW+B2TsLlR4aWioRQRLnuB6J\ncheTjzf8Z8zi90WwRYjgqe+g9BshV91XfcxuUyTGx1LLuKDZHJXh/ydgDuEK\nHfJYsGfvKISEsizOkcjTlEz6WwjE3wJwVZISKoP8n63YaasYcjAS2I5qGG7l\nYMlA\r\n=eIMP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ff4bc632a.0","@material/rtl":"7.0.0-canary.ff4bc632a.0","@material/base":"7.0.0-canary.ff4bc632a.0","@material/list":"7.0.0-canary.ff4bc632a.0","@material/shape":"7.0.0-canary.ff4bc632a.0","@material/theme":"7.0.0-canary.ff4bc632a.0","@material/ripple":"7.0.0-canary.ff4bc632a.0","@material/animation":"7.0.0-canary.ff4bc632a.0","@material/elevation":"7.0.0-canary.ff4bc632a.0","@material/typography":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.ff4bc632a.0_1588235329958_0.5472444801673373","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/drawer","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.b0f83d2fd.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afe13fd94812bbd73bd9df6d255577da32528d4a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":46,"integrity":"sha512-gghu1APOrJ//qK8etBAPQauzITrbG12CzIyM+X46WacZggdkTsdnPHApoud0eQNbrRhaJL0eV14Ptr5Iatqt3Q==","signatures":[{"sig":"MEQCIDXmXIvZf1pj7ftw5RIAkZNzLJIZWxZ++wivpiFxD21WAiBMxrIyrbO5/wkI3AmyP0ZB65hWXcFH98t+5EFALXUIhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequHWCRA9TVsSAnZWagAACtIP/RYTeanv77JSVzN073J9\nlNoiLK4RrAcfj+lKJE5BKZMkWfBXJwMgaltvyzW78hM60lsomPofnUEUCOm6\nZebJDGAUvFb78r+exgTv/TtH+G2JEgeDV69ukfnJb47Jh44PePgrJ2Xj01OO\nL1UrZu6Qley1e+8AxcH8kFbgKVtIzorUVQIbRt3G41ux7J5jgk647Uo7zcVF\nU0R5zfH7vb+RR+jIVVdi+SgNLsiN8j+S7y/89S2d3mZunxuuAvfKRQa+bPac\ne9AA72xEOxTQjXEkIPi7Ut7vWeNOpnAZVyy1ie87mJjDsm1WMT9oUuiQT96D\nth8lK3yzH31qLTNCP55MSiiSGczSrxS/7dzkAIiaO/v66din/LE+lZEriKVF\nDGWEAM9bxQv46OAQOOHhhrjKdR/KOaDBmfwyb+Rf5S3xWq0xtAInn7O/fcZL\nHSlxfjmq0rduidAKoYtH+XYtXQlqN4LlnLpFD3bj9MFDsJ0lqCbLQRMWe/hP\nD9DDilHyhH16aoJDF65ZqTDFg1zTNwOIBI99ftZge2qvGEfNotIbgebJ7aaV\nKSr/SetwKb2lRPjtYKHy94hQRC4pWPLDUnr7FVYQm4t7iYRPj9WV215VlzDu\nX2Vf7SuCe82ygTCAo3YaI5GuV0CFqxiW1o3mhEZFKYGowlwskMB5K7FsewBE\noXix\r\n=tMhj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b0f83d2fd.0","@material/rtl":"7.0.0-canary.b0f83d2fd.0","@material/base":"7.0.0-canary.b0f83d2fd.0","@material/list":"7.0.0-canary.b0f83d2fd.0","@material/shape":"7.0.0-canary.b0f83d2fd.0","@material/theme":"7.0.0-canary.b0f83d2fd.0","@material/ripple":"7.0.0-canary.b0f83d2fd.0","@material/animation":"7.0.0-canary.b0f83d2fd.0","@material/elevation":"7.0.0-canary.b0f83d2fd.0","@material/typography":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.b0f83d2fd.0_1588257237922_0.45434609143416105","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/drawer","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.e59906a57.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1af960eb45eeb67084c854382b4ead01f29a205","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.e59906a57.0.tgz","fileCount":46,"integrity":"sha512-sIjF3rQhphHwAUoz4PE6OmhINduV7V85cqwTYW5lA+5syPFJERV5jyyvJL72bsSnC5uRimO6Qog7Kj0T0MPIKw==","signatures":[{"sig":"MEUCIQCahxmamH+9QjyVOGZ7MsUEOpeIuSsnWzOzGfY6qZ5M3wIgGebG2ThksvXfA3QSY0imQzEWNeoFUfvRkcOdXuepwI0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerEOcCRA9TVsSAnZWagAA+usP/jp7jABSnqcqzs/BiF1u\nxtWvfv2smIurqkzru7nKjzEAoOSVqz+oTZeWK87aHb9rEmxhR0FZBa4bzsbE\nqFUkHLPcsQ0VU+x7rAVk91e3udaXpm2F2Pml2MjuDxfYXwr9iR7QMS87wT/A\nSxfDuPOumHG9UMrV+gb7H6KKcEHFVFhxn+/R/NOn7hXCujb7bGVwZyQ6yIU2\nWr9ZibYnXZrpABn5DFpCqUKjSRpb+EnMyl1vLH5rmUfVuMIVoifUAkK2IcE6\nP9PXXq7ce3xa8PvHeelU9fJs5DA3MSDAsVhCCezCnDGjawZM8igUPUQBHOpx\n3yUbG2eRj/UPfOZ7Rzbx9qjzgLUltAcCqYSHyblFq6WA2eZ+eWOAuFpgK9Sm\nh5sE/EMystEk26qySwIfVmkmsxVKbSOvft5kYypByGI5PsPZHKeBpwy05qOB\n0jEO6fF9tblQSAnKEWezlf+catcESuLh6SEXvrtPm9Ec3tB8EFhSb485W/0o\nC7lu8V5FdsReGRWkAOzQupiWcFyYliTxBXfpdB9dGdgyQJ8t/2QXR2xwll7l\nGtUJlfxlWuHozL5EojKt9Z6OBVPUpSNQ36DgVY5aDianDV4nUpqhWFJ0/oV9\nKnqQAVPUV41/Jg9vR7elCS7Pn4iK7zG4FFSwT6S/2j2hZhI+2a+ujS1tjPqB\nN18a\r\n=83U8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e59906a57.0","@material/rtl":"7.0.0-canary.e59906a57.0","@material/base":"7.0.0-canary.e59906a57.0","@material/list":"7.0.0-canary.e59906a57.0","@material/shape":"7.0.0-canary.e59906a57.0","@material/theme":"7.0.0-canary.e59906a57.0","@material/ripple":"7.0.0-canary.e59906a57.0","@material/animation":"7.0.0-canary.e59906a57.0","@material/elevation":"7.0.0-canary.e59906a57.0","@material/typography":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.e59906a57.0_1588347803664_0.3526907359618787","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/drawer","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.c02712b59.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a93ade2c1b9585f62e5d381b560a07ec848f3b3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.c02712b59.0.tgz","fileCount":46,"integrity":"sha512-TUngWqgqSPEY3BHY2vlaVhA8ZDaZLCiYXwu7qNHd9XiNb5O64zETty9T7Pu07g2AYoL/cZdSaCTvOqqzYgQLMw==","signatures":[{"sig":"MEUCIQCR42n/DYBjbBHAqy3ccsnDV4poirJkFl9kSCx33QgqmAIgTXFnNzB9nm8Y9qB9j/+xmqR3hsYI59lpq6x1OgrVs2Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGnkCRA9TVsSAnZWagAAu58P/3m4V9TJkoSopP9C+QWO\nd0gKOEIY6WBl7SL+HJWERbU/Jx+kKS1dgK4/UXxQ/Z0mq9pr9nacZcRYz+nX\nAUUWN6WS2eYBQxrbRVnAM6eWnAL27SXjPRovG2Dl+29VCXj7a8Pc02ycnDqB\nnYYeGOAmQ/+JBI/purmcWSWlAspUlhzO3xpstZRA51U3ZMsV1TeB6x7K6cg5\nOWFkOnwB+vifJxuovOcmJb5cKUlLxkYTKD36IDIl/tJ4QVtfRwg0531xEAE9\nDNMcItwT+NyHKVHLEpBES1n6U6J34F98ZE37/cid+9J9elC3+L2YsdDkEx2N\n6Mz0ZEkxBEDeYLOVIvJhscrILWs6VoqaL5Q5mr4abvkodrnfiSpXnljzwWZu\nsfm+9mWY3mrHQxunlbzeNkn0DuIDjJdPfdXLn1t85t0g92VSwyK7fPQmrYkc\nYbfPEpSPZg+AlGZXzLr0+0aFUwq/SIookLSGCkNB+0FbkYeMHlfROv+s4wfe\nzRg2eguDjm6I1xJGWdXCB8/7Skk62dQ/75QGOweJ3c3w2ofHkRvg8oWRlCXz\nyGRV4X0oZW4G7nV6rgWhEqxo/Ao6N77m0+QpULVnnlPp5KuWTxscWt+Tk9kf\nEq+NBwLfEh3vWogwi7Zi6Cfg8N7IsREKC50RBHUZtDjnjtf6QzoOteYvkHGV\naF4y\r\n=Xgbs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c02712b59.0","@material/rtl":"7.0.0-canary.c02712b59.0","@material/base":"7.0.0-canary.c02712b59.0","@material/list":"7.0.0-canary.c02712b59.0","@material/shape":"7.0.0-canary.c02712b59.0","@material/theme":"7.0.0-canary.c02712b59.0","@material/ripple":"7.0.0-canary.c02712b59.0","@material/animation":"7.0.0-canary.c02712b59.0","@material/elevation":"7.0.0-canary.c02712b59.0","@material/typography":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.c02712b59.0_1588357604392_0.6410428813963351","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/drawer","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.15d65448e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29522f346f75e4c363615da25c7884a8f26ca9d9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.15d65448e.0.tgz","fileCount":46,"integrity":"sha512-o+5xnuEzp8jCB3MaUCvK4Vn1SsnvT1Hm3KpwjJ7GBA1QDVVaYIylOInKn4sVGXGmfhdTCXXQeLVu6omh6nmzMg==","signatures":[{"sig":"MEUCIEPCncpoYHmZZR7WTD2RSRujSE+1qcbuh/Kodvu91EY1AiEA64WmuwnVfSmvSxFocx4KQ7sGzr1sULqDK1nTbE6oDZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHc6CRA9TVsSAnZWagAAFFMP/RGrCoEWW15ZNAOUWUZo\n4cDyrfBWWcwmQCF2NQ4Z4cVkntphS/1eBgGNeli5tqcTia6z56VUEXFVxyRj\ncn6f2Lswuz4OPPioqiwyPMyt1Rat4BWj6OCYME+ZjM2G/BDbnnvOO5WxmwRp\n/FyoU5+6YcX2S0NaQXT6TDYI3EGctTd9UZk+9QP9ykhOAipfN7jvP/0IvNu5\nkZ6ZlXF0b7tFuHKxWgumjoM8O9tSsDL+TOi0SEv0ci0al3glMTRNctcD6DbR\n7qZX9Wvjwj7xS9Z2PVnMZBA3QqYvWqqg9QwXMkCCbnOJ4vDDQaWZvAIbej2l\noVp00/NIBQwhWKbiHV1qb0Z68RAfYdEWMYVx8EfEKIuCTJyFbnC48Da7tPiF\neZxZ47VEqS5fENxnpuc48w+d277ma07KsgixDltD5h5ACunk8o7pxwqPRmcH\nm9PCQ38yAgSkdks8ViRIyMQJOo0zBxhaM2G5f/8BBEzAChd6pGKOhHqQ1OPz\n/Q1SoLjKjii/Zu2E7jGW6ljI+EhBP0xMBKwDxjVL9Q2RdONE30v+2IZlKPmL\nn644Awvgd1Qc4m9bJPWYdk4Aqbzs3LH109c8KAP9bGg0ukvWUyLLL1IM2L3d\nreCx42tnyQvTIxgiB2WiHOmk7b57rVsYI+6TXu9l9i+Y1kUBt/IdefnWp9sP\nXGME\r\n=sLc9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.15d65448e.0","@material/rtl":"7.0.0-canary.15d65448e.0","@material/base":"7.0.0-canary.15d65448e.0","@material/list":"7.0.0-canary.15d65448e.0","@material/shape":"7.0.0-canary.15d65448e.0","@material/theme":"7.0.0-canary.15d65448e.0","@material/ripple":"7.0.0-canary.15d65448e.0","@material/animation":"7.0.0-canary.15d65448e.0","@material/elevation":"7.0.0-canary.15d65448e.0","@material/typography":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.15d65448e.0_1588361018228_0.6411093804952488","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/drawer","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.142b1549e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a1a04c9af0885116a0614941bd9e76a8380dd54","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.142b1549e.0.tgz","fileCount":46,"integrity":"sha512-AyXJI63zs9a2P3D1u3R+sdOs4+qRV98h2R5yiZR7QE5vczU+IUDTuBITx7IBBCtFhU4Fzmr6Biv9PY+85hd8fQ==","signatures":[{"sig":"MEUCIQCl5kY47xBRIViDJnQZnKfQpRgAmgXRKLqMZQOMHJu4IQIgO8K/5gaYNzChPWiJf+GYvWxmJCCFc0CuNlS9HlT8toI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKR7CRA9TVsSAnZWagAAOpYP+wXTqlWDgmhP4n6RFdUE\nKQgDRUK/4qJPGcW+zTLhPbyH8fVvgj74pv6eY3KUZ2dkYRVi+qBkExDneGwl\nxhDC5asKYo2mfjMZLzXK6pfJiuk6Ey857AJ68B4YDqxk2w/Uuxunl9i/4T77\nZcmRyLQEAwlsxPmyvLPoRoK4+i9RVvhszESAP8u+ju0ecKr3srFS1Olky+Rn\nWMnkdzz5kKB8DpgJlOkqtba0jLpcySF9D/LEw12nmOAa33Fb9J3vZkOuM0Fk\nqMspEP5GThsi/MeWaCcDb/VMnodAk4wiuCK7pr7E510UCb17kQr5qpenB/4N\nX3VHIb6rtbMp55YeXZkxDtIvfOhaoONRIsGLke4nDsPl5tYrmvhR2mCdDzFm\naRcg/gB1UP9VQpXLn8KsxLbIuRjV+IeouzyfWyETDHfpcxH7sBaUAZDydand\n/AK5HN52pMiiOAWF6thyegAuxfSGcC0LfAey7IF3i0fv8ZiSO56t1FcNbEdZ\nHeBTq4j1uIt80Jrm16F70yHRfJf/63c8Fx7NLQAHunVFoxPG8r3EsBSStte7\nFYWIGBHN5makI8ASgAKNz0BYUYoBFCz8P0UcfvoyeD450Eh10sk3GBXCsnKw\nrbr/fg0I1y0hEhyyXj5zT5k1N4+BUBj9k3wLDqZ8XtQRcvCpZDSCVMdJOA16\nYxHJ\r\n=6BQN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.142b1549e.0","@material/rtl":"7.0.0-canary.142b1549e.0","@material/base":"7.0.0-canary.142b1549e.0","@material/list":"7.0.0-canary.142b1549e.0","@material/shape":"7.0.0-canary.142b1549e.0","@material/theme":"7.0.0-canary.142b1549e.0","@material/ripple":"7.0.0-canary.142b1549e.0","@material/animation":"7.0.0-canary.142b1549e.0","@material/elevation":"7.0.0-canary.142b1549e.0","@material/typography":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.142b1549e.0_1588372602893_0.1628986224013056","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/drawer","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.524b7b812.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8524c24a454c0302f123c741c34f86f6821d7e9b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.524b7b812.0.tgz","fileCount":46,"integrity":"sha512-zGojlN5nWnYSEyTN9Ljgu1APbBjofWOmC31YPXpvT07qp1/8Tu4pbPHG8m6XAmrxBxZXmqzEhy8GrQUas9OYOA==","signatures":[{"sig":"MEUCIE7xzYn6AylILHpPi6V6mpH2Rjdid/1P/ztUYVsri/fSAiEA38601NdLegMjF9jeX0cKByuN87SODY5/Ub3j3sGtoic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery4aCRA9TVsSAnZWagAAYAAP/imyKCdGUO8S/HpkhAae\njOJ4ueX5Is56N0EZeBqi7Sd2SD0+v6TtvDL79pJQJ8Hx1a+8qwGGMg4p/MZV\n6f6w4ELVwwPZT6N9nVBONDYIdbPIfZPZATktahc/TFh/s1XgkX6aTNb8uZp4\nQ+0m4ne5qw3Brw5yjadvW1vDYc4QSvhZcWkHaj70pwb5c1JfA1f4ts9Ys0l4\n4BAa2yAcT4IA27sMoGOfTTiYvoqUkMYADKfShvGhouPjcmkQtp5nT40ooBBc\nsw8hOMBpxXC4323qR+6skf5lMCmrJmGl1KQWogoYDS7nbTHnOEGVQJ0gnRfZ\nJ3Go1+OlxutynwS5sKSToD94HNdxKRoeV4sIclT1VMYHYsFzfK5NZSNFNaie\nl3BLIGSDqJfKnWKx2EjmP9D5/udbV3+BFe7u/GiDpCKpd+XrhTRQ/ZitKrcI\nTK/3xxqLO+wjNF49jBGC6IwAnCGfafYxe/43acMmBhVy+lUrOMw+bRkI3Cql\nClylLuvzqFjFre7TtABXbph+ys2JCjAqsT9jPOkKEKEgSilZb1B1mxsJMmIh\n+fw/NxL8amAhCx+em/yC+aXauLdWdVBkOKghzLOVC8rdb+hnS4wtwWMBBRWT\nTnPzJNFV7CgKGedbkc3CGPW1N25yRbC+W22fk4xJzj/1W4CDgcpKn1WWrxnK\n9gjI\r\n=dYny\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.524b7b812.0","@material/rtl":"7.0.0-canary.524b7b812.0","@material/base":"7.0.0-canary.524b7b812.0","@material/list":"7.0.0-canary.524b7b812.0","@material/shape":"7.0.0-canary.524b7b812.0","@material/theme":"7.0.0-canary.524b7b812.0","@material/ripple":"7.0.0-canary.524b7b812.0","@material/animation":"7.0.0-canary.524b7b812.0","@material/elevation":"7.0.0-canary.524b7b812.0","@material/typography":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.524b7b812.0_1588538906272_0.8864123010925673","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/drawer","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.bd8ca9678.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"873afddceb65d31697e34c2a2fa2ee098c01113a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.bd8ca9678.0.tgz","fileCount":46,"integrity":"sha512-OR8va9/HLiLVEDewf1nIQOB+wXPEsKPjLwPW9w9NhlVjgNO51+uEBXfQiRcu98pgpvdZSFuRw+yKFwVZ6vKBlQ==","signatures":[{"sig":"MEUCIBdaH6jvBmC2zatFCLuXhcBHBsBHnEHa5dr1Uqz2unV7AiEAuL1sfM/JMoI/GVa35xuZG1C0rj8nnynOcUCVb0FcCdg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE7ACRA9TVsSAnZWagAAZ+4P/RauCyeEoYBgMtcGdTka\nmjy46wmEXfgsVUWtOGLgJQsCetl30bCCObhuK+FBGKv3YCcgvILBc4Ghxvoe\nNIfpFP35k5oKXKoU8v5V2UBDfIgymyp54fpSWSoIZoxH0T/AYNdo0RMcue4b\nsbUPWw357kjOFd24+d3Pi3PeW4aHDIxLCXkU/S9omxDa04hhl38PwZlBuXit\n05NRKop0N/86gRyE5WXdgH+kJBYH8PQhBJlHZ/absLtRta8sEX0N/P04waU4\nh+RfhJWR9DLtacq3QOkuguV5UzvNgqA9XY8ggT/Gb4gk/uW5hgOIaVgVq67t\n3RdS0mb3TEZnhhVAG0/ol1s7+xz/tZXFnc4lcoUHWt05+/j9WtBXLojlz0GN\n2DTuHIenOPtHk9Lm4tCr9MRfw+yFHivjEpviFE855E8h5wBZ/XiRpqpBCFTo\n5FB0cc1XRoqbNcsvrlmMMFYdXzaG5cAUlMy9fa+/kecZcgs8B/yZIpmBurvf\nO86BqTZIKit+648Ypg6sg3DGVVmqFS0eUdFEF6T08aIzvaqwrhqgVfsEUFWE\nYX457daE65XFi79Zm+utK8az8+1ltovzWM3w6bBCahiRVHWUHZxUf43R1jBJ\n8xyYV2Kx90lNBaqfbpZKsfl0THzQU/tcwm3wRWTsTxAsRl/usoiJj72uSMVu\nm2O1\r\n=czWi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd8ca9678.0","@material/rtl":"7.0.0-canary.bd8ca9678.0","@material/base":"7.0.0-canary.bd8ca9678.0","@material/list":"7.0.0-canary.bd8ca9678.0","@material/shape":"7.0.0-canary.bd8ca9678.0","@material/theme":"7.0.0-canary.bd8ca9678.0","@material/ripple":"7.0.0-canary.bd8ca9678.0","@material/animation":"7.0.0-canary.bd8ca9678.0","@material/elevation":"7.0.0-canary.bd8ca9678.0","@material/typography":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.bd8ca9678.0_1588612800396_0.1697536244961535","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/drawer","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.2553e86fe.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cd6e5283918b4980788c427b05b6ff90c31887d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.2553e86fe.0.tgz","fileCount":46,"integrity":"sha512-ugHiyKtkxRuhQt6f3vY2raPWxpWuBlvlbMbwQHAPVz9cTWLwUh8XJePM2BBgqJ0VbHbvCthgdw0Nihl0YDwpcw==","signatures":[{"sig":"MEQCIC6KxJ0nO7nWzab8lVTempX/RRh6dDugNi7z71T/yBuNAiB5fC5HSGomgq9voPExeCgkoUCXJy55lZlI+zmDNyCm3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":514373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFGdCRA9TVsSAnZWagAAUZkP/2sUJX3alBts5Xs5Vm2I\n0h7ybi7qfBiUfOdkraZpqIXmAi09za8ool9Sa9ttIMdqZHqlfLPwKYjVTsTR\nZ/EeNgO+pyb/rOweZfHCr5Ed/7D9b2LQHAwRO1gUFiHeMuPNx/eXJBcYXXyh\nJ2PJ+DBUTL6YQ3BHEkLOreFtHVzYMdbmi+neN/botwPX1KPbDhMZ75t7FRY+\nbh3xeJjBo6xh/cbB/2sq6AyMH7xZNaAekTr87Qv3u/rSec+UcWDZ947jBlRf\nuaTt9dU0U1JJs9YmoIC4qO+EMoRuv6CEF/kT4DE4ABR8Q4IbOthMLwKAXPjQ\nAKab5oQT1EgYrLuQ85DXC07g4Pu4rqFA+/WOBEMvFtTitDtGQqJfmH9fGhVK\noMA5ViGL4lP930LWSGIf1HQRHLPqYZPqCCOYbIVQ8Uy5SznJcJuoG3M6dahg\nR4HLw1KkOqHqVc4dNGL7Wab7OPiWdDnmNllxPpzlI3ZBCJOVXtvWKoXCqTIQ\nA/6n7V0F6DNOrQ12eLisX/EFFOcrCCAWjM1ratpQuT6TCsHySXh9HBLOuOzs\nXwBNIlcI37AL2duGLXnStTiRvT9m/yVanFbaDtlL1kwUBtSnIvuyn27AW48b\n7rFd1KYFBXjlmvnhl/dBJP4PWpjUHpg//iQyo73q1v1sO6qlO2fAy0hxhM3g\nnmgf\r\n=8Dnm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2553e86fe.0","@material/rtl":"7.0.0-canary.2553e86fe.0","@material/base":"7.0.0-canary.2553e86fe.0","@material/list":"7.0.0-canary.2553e86fe.0","@material/shape":"7.0.0-canary.2553e86fe.0","@material/theme":"7.0.0-canary.2553e86fe.0","@material/ripple":"7.0.0-canary.2553e86fe.0","@material/animation":"7.0.0-canary.2553e86fe.0","@material/elevation":"7.0.0-canary.2553e86fe.0","@material/typography":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.2553e86fe.0_1588613532434_0.35403784810032746","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/drawer","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.03dec929e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7e35b757a7047790e3995d73ccbc8774a9d8582","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.03dec929e.0.tgz","fileCount":46,"integrity":"sha512-DX3oz5Gl+v0Dgh3UxaRS2IlRxS7W/a9M2hsgFq6uN26/RZJ7XFdlmWX74qDou/T2Sb3Rb1ZO6qykfUXKArnfRw==","signatures":[{"sig":"MEQCIFY5iAADkAYzBRpcofmvuP2c+BXApA2Gy/h/qJMFYcTvAiAjASTL/+q2SAb46Hxl2AwqaYklgQreQoD+w4uhn+KcKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKamCRA9TVsSAnZWagAA7YcP/0o5JgLhGBXiMBKEI0sp\nsqNlivnHWOJuhZfE/Jpe2qyz+FFXYdrJ17Ag5oDhf/9DCYLxN2dwHTHSkOR7\noT7y0G3fPWfHQ7jA8WfvWCLjOPySeIBqHFia0L+tWAT5R1s973VgqI4jSPVq\nR3V/tmC/xxaBRqhxIc97Nbdo9BW2inwcaS42JHBn0Gvb5qMFDuMIECC7y6wH\n+FprG4cCUNiCul8rnpabpkXVCsozKHCocvbsgxQNVV38wTD0MAGmB9Kgj0g/\nJsxYw0Ab/jbcr/GmhsEj4ppKuk8INskgwLoikZmyD+VJUVAsA61/PmzMbyiI\nrzPY0vmGEL2sRjJje7aK/zicwtKx56ZUxxKVE5FM2n3dFJR+Y0DscQ7ZMuqO\n8KkNkOfaOZybQUSTVDnnaNEGgY6boN2oHqGazpIyigg9qfUQKnKMwwa/0s2y\nlhgw3IrCHZTYsf3I8eXTw7WY9vavHS09+f+1C0a/gt6UiYT/K5lfhWalfA2T\nMpRx0H0LM/8nS6oyBxgZlTOcABr0T427QT4qD32VF2QvnN9xsv1xjLQB0MKU\n3xpQnZhF2lm5n+COOjkGyWJt3Z3Uax05hDjb3PLwt+GodI5btUMQ+lo/Maoi\nXnjzmSI39INv5/viBSailgcyT58SRBcAINgos/lRAqF7v45YVH1qfbRuDdeO\nR3Ps\r\n=YS4p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.03dec929e.0","@material/rtl":"7.0.0-canary.03dec929e.0","@material/base":"7.0.0-canary.03dec929e.0","@material/list":"7.0.0-canary.03dec929e.0","@material/shape":"7.0.0-canary.03dec929e.0","@material/theme":"7.0.0-canary.03dec929e.0","@material/ripple":"7.0.0-canary.03dec929e.0","@material/animation":"7.0.0-canary.03dec929e.0","@material/elevation":"7.0.0-canary.03dec929e.0","@material/typography":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.03dec929e.0_1588635301842_0.07874481982321457","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/drawer","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.d92d8c93e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dac5c8771e608e852ba31fbbae2e76283a50d246","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.d92d8c93e.0.tgz","fileCount":46,"integrity":"sha512-kVwfqx9bIO27xmlXJmLaGfMglcPehQpFqyzEpG5cUe6M2BGnGYP+amoAg/JIa/LmAgXO4qNSiYJWgsM2koAAUw==","signatures":[{"sig":"MEQCICVNqwy57kFFG8oKSjpmMGHcukcDYApQ1E6shO8eJi3gAiAA8Itxyp7XU3caQ1KztuS5zMN9ZRIrY98QvX5ChzBrBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZufCRA9TVsSAnZWagAA6sYP/0wz2ZdJPglDOTepdRbe\nRoRGu04ZRWypfaPbnkHUHUjuOL3Ws4HYjTNSrsONb2VWlNgbN1zx+yacztUQ\nqQuvr4GuqlxUrJWDePX19EeSUuSh+NDxtW4zB4yt1X6c+ADMugitnhlKGQ7r\nKMnKK25J6JQAEuIsfu1Vu/h9EKcwwYkk4Ld5CiA5+ozpyI9E6Jpq/APdYYMK\nxdtsZSEbSTUMSTcnb7qaXZfr2PyqUUxDNRTfJxcSev8BktzJ7pFa1g7tMPHe\nCz/tBpTEsBFHHtneJ0qFjdAjQBJ2/NFQBNrnuLAIHOrNl8x1rd1rg+DxQnVB\nEegTjZVux/H2869S3jZzUNLL5QOCZKO3xKYc96oeMe98nTcqt0vi0LugnAIR\ndoUYOdQNvbAc8pkj7JdjW4NvYk0RpIuxs6TLYz7vkHPVwzYaTeHzQSy4kpFr\nnHO0TUJ1EhsLyJYIsZlvdkkOls83JfNvNJVEi4uEJENy8eqKAa8K77WUpIG9\nY/r4cPnHIkM4ioHS6LEzlpihaPyZXy0NhbaQ9yQMfKn7xWll139FXC7DEgGo\naUwjEOzDe1DcxWUj3dp9uFahBRtKzRcJsx0/CADPgZp32ydrk0nc6c47tWC9\nfV2/mGbftd+7IKcn7x2z0yQSgpIYTjypgXUwgYYyVQrqnZ3fktEHQhyaYPLX\n5uGf\r\n=Atm0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d92d8c93e.0","@material/rtl":"7.0.0-canary.d92d8c93e.0","@material/base":"7.0.0-canary.d92d8c93e.0","@material/list":"7.0.0-canary.d92d8c93e.0","@material/shape":"7.0.0-canary.d92d8c93e.0","@material/theme":"7.0.0-canary.d92d8c93e.0","@material/ripple":"7.0.0-canary.d92d8c93e.0","@material/animation":"7.0.0-canary.d92d8c93e.0","@material/elevation":"7.0.0-canary.d92d8c93e.0","@material/typography":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.d92d8c93e.0_1588698015098_0.7301915156978427","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/drawer","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.09f591967.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ba8aac7f4109b21d422dea98544c304b538769e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.09f591967.0.tgz","fileCount":46,"integrity":"sha512-9Kqibf71UNNyGSUFCb7+MDnFfL7cT9w4/JexgU7V6YWBqnLo/qbYLIni7Hm3nbQyGv+JTpHkQVFhd8qfb8sQkQ==","signatures":[{"sig":"MEYCIQC8YHyqGJyY1jsRc6o+jSEE4+14EBFwpv74ZwG7WuOY9gIhAJ3lqY3lx4CFhkoCgkQ/IVPW4uPYj37WTt53icCqptjj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdUYCRA9TVsSAnZWagAADM4P/AhaiKGZ4y30Kx9jdOyU\n155H/Qp5hLKpmP3el6jrD7R1QveDE2aH2R74xsiI85zJtj4ATD3pvBrFDBAQ\nwDDdbHza09vmJhZo0e+F6behOkEQVneM+KUc7QYW+V/1xFQcXTT3cxDlqywW\n8SiwnQuHyvrrqXmrUrJyLt0exwgSz+dr1WEJcJbH8d1ej3Yy9mlAd/Ywfnxs\nq7D03qIohzA50MAnxwqOJcqWaax/u4ndC2mIYH8YfUt7ojkThadweCXPLVBu\nDIKhvdPBe/Wc36USbXRn7F1OyMuE0zR6C2I/zg0xDMJUwArNxpTCOoi35aTu\nNZAcGdPQk9jrKjTmGwv+rX/ebAn3M6a0E7MlvIcy4P2KbclBuhdEU2y9pFP0\nb31BfdIIY23j5SxZBzwTdWKa5ay39uPIwWrmk1Dz5FG3O8arQujtNqCUeYAc\nrcEQyRy0ID9IitWJ2Y7fDP6eJUYe5hqVNaO9KyT52XQIshzsf5fzPNRepjA5\nQhKq8TGjhxjWXeXvSaZHgP4V8VQYR+pUMMrWQpwVrRNS6VgekyFsqPvNu623\n2gy4AT6U4ub5jkqTjwuyhJQWacda5ViJUg7OdHQxCz3uBE2NQmHV8zifqCsq\niBr/WT/9TmpeynhftN8UoA4fbAkATzj2+cMY26ylcaowOqB5IxrMgRZH+7oF\nB2De\r\n=1gJL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.09f591967.0","@material/rtl":"7.0.0-canary.09f591967.0","@material/base":"7.0.0-canary.09f591967.0","@material/list":"7.0.0-canary.09f591967.0","@material/shape":"7.0.0-canary.09f591967.0","@material/theme":"7.0.0-canary.09f591967.0","@material/ripple":"7.0.0-canary.09f591967.0","@material/animation":"7.0.0-canary.09f591967.0","@material/elevation":"7.0.0-canary.09f591967.0","@material/typography":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.09f591967.0_1588712728015_0.2737578683155639","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/drawer","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.3846ce311.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93c709bf1873fac04a1baf594a3dff4ee5d4f08c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.3846ce311.0.tgz","fileCount":46,"integrity":"sha512-gl5Wzv4k6GJGkmo8cGLCBiqdT51hC9511j4kF5keZHgF2r/SUbQIW2mqN9cTx3bLqTw+/Z7Nb7KBabhKh8ke6Q==","signatures":[{"sig":"MEUCIADbszNweMpXdkwZWer0kxfEkj8hHjvxpsa4EyvH2WGIAiEAmmIB/XC8AxkxIs1/C7RzriQ0aJPldFR1c9FjeQvKfzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessVWCRA9TVsSAnZWagAAjVkP/iihOws4/6aQNi6qAZar\nvBKVvPe+RwcCHc8D54Y7TN4anKeNrnVWhF9OlkE0o4TnYF37UzQFJEXoKtEa\njHadNsgou8k+kkW/pnw1B1+dpw41sVk16Tgm2J7fwGelh4YH1gbZTGp5S104\nCmTSjV6iKGl0BGfkyA3UUm18l3ppU8WyTD61840vHFENKr7ZH9GpRwtrKwJf\nGsrgB+2aFlZN7RQXelvTGyXHM38JfYGTOiWvgx/Clw7i31aybRzNjnjXKAGQ\n1zJJCRHGswFJCu5bEjGPLxeiQ/2AU974Smeu//KaCOP3cSZt4xIMqBzhLeDf\nNC9YavO2mQsM6Wy3DgDunPLWy1mJjEbz8LJe0nk4vJlsmQRkQviRosGbTnh2\nDdWa2ngsIhTXexxoK04B8X7YmWcVzN5zpZru1pTFBNb3tBIsLxdlKfsivf0a\nNq1AstroItEqH/T01RI/d4rMhWRHHfba2d9dBaDolDyLVBNda/ZqXXN60C69\nLGVSSLFrscg1rZtxpc0sYH2kL7gCp7OP8UzBS6HkEY8vjrG9U1WCdJ6QylqE\nd8jHx/PQaM3pnI53rvBQmWLTt1aO8OeuUMIymzGVG12xzAF1UuHdh8TjA5OI\nVKWf6FUSoliINa/2qJ0K9YVAhDmh3XKce/XOGiGs3jpKtIfo8VvALWHXtyQg\nXEww\r\n=b8Q+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3846ce311.0","@material/rtl":"7.0.0-canary.3846ce311.0","@material/base":"7.0.0-canary.3846ce311.0","@material/list":"7.0.0-canary.3846ce311.0","@material/shape":"7.0.0-canary.3846ce311.0","@material/theme":"7.0.0-canary.3846ce311.0","@material/ripple":"7.0.0-canary.3846ce311.0","@material/animation":"7.0.0-canary.3846ce311.0","@material/elevation":"7.0.0-canary.3846ce311.0","@material/typography":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.3846ce311.0_1588774230406_0.7781655549649247","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/drawer","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.ed7f32463.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b855f9ed36103d975d0d5235b3d95d8f44dc301","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.ed7f32463.0.tgz","fileCount":46,"integrity":"sha512-HVXWy4YST2pg7Vwkn9eFfHL3UT1GHy3zD8uvrzlRa98fU1nozPTufJL8+6TxU0XWEkYJLRKv/OOPdHgeG73TqA==","signatures":[{"sig":"MEYCIQCKZayudVC2kV6fXstlN9LMbixk7Erdgny5K7VASCk4GAIhAP2YauSSy4l8ouDZNlqTldBm5iDEnTux7wosoIjxoiBU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuERCRA9TVsSAnZWagAABgsP/jeYwLsLeYeYwJl9pK/D\njigExU5YqG+JiRBXM2AHlo9C4pxylligO/KLEYweefKSwUgkskQqveu1dyJs\nYg8icrfa/nHOTX6uJAmArMZQ0Rki+lXWUC0vZFkmbvIU2WIRkjRFF4iFHJgJ\nCRrZc+ZwSwFGTzsRWJ9h+daQ26kpO8gnHfqB/fEubGqmYxxqzPOiMXiCeJAs\nXq8rJDUoduUruEu05DNHj6NIEDY1k8nTqBrkTyoVokSJkgoYY1RFg6O4p4Rj\nZNlBM2SoqHaeLV5AgLWMK/POgyjpZkQyKJGeDJupO3V+bd0sbEj06r/PkWlt\n2PIln/nvDAl8ZDeRaNhUmztzsSFG3Fxixr0fMj/xXC1E8alVSQ5cfOBxDIFP\n0mFawwOcvniWmmyJMOLkk8VqpIbx/O0d6wf1UqSA9rux8vgBHvhjEoyVnpv+\nj3FbEzsxPtS0MEddTockUXmPO6uMTPKjAt3Ap/Hl2nutjl2qedw77tUbRrmg\nAnSL6u9gG0+I0m3410ZxizKiubju2ubC9u61/SFyjJmSpymdbkuFTynOnpJn\ne7NqJTTIlc1G0+tbKOa+2tg5yx3j8NFOWO6jRbTPj7Bv5pmK7W2v09l/7PTy\nMZQDH8WTuD9zs+gQ6bh0Hs7rwf0SokR4XDS0FefnpqS8Lvk5XABDqXx42nzg\nthfZ\r\n=PK6N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ed7f32463.0","@material/rtl":"7.0.0-canary.ed7f32463.0","@material/base":"7.0.0-canary.ed7f32463.0","@material/list":"7.0.0-canary.ed7f32463.0","@material/shape":"7.0.0-canary.ed7f32463.0","@material/theme":"7.0.0-canary.ed7f32463.0","@material/ripple":"7.0.0-canary.ed7f32463.0","@material/animation":"7.0.0-canary.ed7f32463.0","@material/elevation":"7.0.0-canary.ed7f32463.0","@material/typography":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.ed7f32463.0_1588781329560_0.5675622929755755","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/drawer","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.8135cc085.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1859522e09a5b94e8ee1bf192d6a189dcb72c15","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.8135cc085.0.tgz","fileCount":46,"integrity":"sha512-F++p1ExoAeMCeZCgQ7XoubTxAc/8b9HbpitJqGzYHdL/Q3fZOPAaGv7SBl3DtsyWM9hslWlq8Q39wKqeLz2kHw==","signatures":[{"sig":"MEUCIQCSdJISKnLKslTn8DkX/KJLuFGxRYd4ApwOYAlHkYbiLQIgHX0Z58g8PH21U+pmmxstFlDr6ZFscdCg6s9sCazYB+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxZSCRA9TVsSAnZWagAAsjsP/RqcFPsyiJnxbdLQaq6B\nIXqmEoc7IMkc3YZ+xQXPZkS3DDg4QojVMgYIad3mUVzzZhhkaPccp9kbzyjf\n0ZCLaP39cALOj7DJSgLBiGukkMELO0lhwcqmBb7NRX5DD+bXhx0kS7pv4B9m\nUoIRmG2JGJWFpxMqqsU/n1VlegjnhSawv+zns+ajlWiw8dwPmnTdBeY4TZX6\nwS550bwbFJP+JucnlbiwW7TL82pHQJVV/PMwCBrZXFT1otEEwSUy2DTTpufJ\na/bhrEaEjBFsSlNWqi5TMdKbzBueVl5KL39lUdSboMTrv1wqe5HD6wwBxFQi\nQKF8E8yQIl0zbcGUuTwTLJxFdugPI9QoWVtAR1Za21X3kFf9hDJ3o6eA4Yf3\nOAtlB4Znq236J2X2Ze5l3L498Q9iXDGBSX3WZ8d/O5qRXZ5tQDcr5iGmuarf\nCWBBuoNoAJN+4RmwWdIZ6rtFUctqkijBVhq5jhE/1D4vTN9R8cdt83ow2+wS\nEC3fTGgVoBWdUiOsdrv0wBT+z/9ALphdvLFSjh0XrVrWR/aAm+FCieCtB/6s\n8v+pibpQrYtRxYnpCQyDYtR9RvaRt4VsLsk//rDFtnj6VFVXpMh4YxR7hSn3\n+nnDbvuVk4cxzREA3g92ehPZKI6oKfmRD1kSiOxeBgi0KVw5dJOyCkcUHP+9\nRq6a\r\n=JZhi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8135cc085.0","@material/rtl":"7.0.0-canary.8135cc085.0","@material/base":"7.0.0-canary.8135cc085.0","@material/list":"7.0.0-canary.8135cc085.0","@material/shape":"7.0.0-canary.8135cc085.0","@material/theme":"7.0.0-canary.8135cc085.0","@material/ripple":"7.0.0-canary.8135cc085.0","@material/animation":"7.0.0-canary.8135cc085.0","@material/elevation":"7.0.0-canary.8135cc085.0","@material/typography":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.8135cc085.0_1588794961938_0.777974506250265","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/drawer","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.deb212de4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"def28f3dc27db804901d3db437a4933122b8055d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.deb212de4.0.tgz","fileCount":46,"integrity":"sha512-fwYyWfmXH1n4Pz4+lCdCQiPaHJIaSGWIGgerGTUOcGUtItIHTqHotm0pnwQMp+FkAd6uFhr2P4RaDS8PQp+HUQ==","signatures":[{"sig":"MEYCIQD7akJfOEbz6vPWtTOGx9R++l9AO5Gq+J0zss0qNOd5UAIhAM3O31gHLIa+yhmSQD2u407ZYH1gEvS6dOdoCGnoWAjc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszf6CRA9TVsSAnZWagAAIg8P/1Osx3VzKWj+yk5SD3o4\nnJOtYozKJzwDFwfrBFn/4hVAK672zFxtHFGoRYv+7cG10r7ODPeCwvplBF8m\ny5wHtxC8edJmSu3a591yZ5jYnzcfNIQ1FbqgSNuLnFI2NF5zRuhl86HjTmVW\nVZK7UwaKJOU4q761QKZ+I0Uyq21kbDxyd4RJrCh7YsbTMa12oCGAYJF6wA8h\nzpEYbl/H9w90yaKfnee+A1G0OgQVTLefc57GId8srPl5CMKfkq+2EAUUv+uQ\nLnlopIB9oMQhoZ7CTvvmpVcgYUkxXDXW3jbL0H7xKny6MmgRJePNDJWFWrMD\nJXKi5HbhwkVOAbAxyzX9d2Ugkbjg7rQVNIlC0ADh5IBGA0inMw+m11DR/BAV\nVevSf4TBox6rAMB9KjN8PefleiEm32jJRD6lSDreLZtw2XqcGwlMva79kUBI\nrRZw9JAVlPiC2jYH0PVlH2DolmSWsbHEaMF/WkoD0V4EYK7OeOcTwi5gR80W\nBR93uiXxmhqUY/8OJ7FY+hojWg2y19Xv1UOc5T0cz03QHNvXq8l195TcYoXQ\nI5hLgqCocBQGz8i9m5FKGc0lYQigtwvR+ui9hNivPga4nvdkNfd70plmdWMr\nTwPfjnuA+1h5maVeeKtcmYoC1wxfElbgfzEcvwlFCSPxkY8TvcsmbKTYprfL\nS3MQ\r\n=AndQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.deb212de4.0","@material/rtl":"7.0.0-canary.deb212de4.0","@material/base":"7.0.0-canary.deb212de4.0","@material/list":"7.0.0-canary.deb212de4.0","@material/shape":"7.0.0-canary.deb212de4.0","@material/theme":"7.0.0-canary.deb212de4.0","@material/ripple":"7.0.0-canary.deb212de4.0","@material/animation":"7.0.0-canary.deb212de4.0","@material/elevation":"7.0.0-canary.deb212de4.0","@material/typography":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.deb212de4.0_1588803577714_0.007870612867443727","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/drawer","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.f83e00898.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7b1558c942e55ab4cb0b6323e7cbf8f672d4f9a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.f83e00898.0.tgz","fileCount":46,"integrity":"sha512-ioIFDmtAxW2cXgtRaCdRBKSRX+koVdQv20Al702sdrTznbl7/fcmdHglZEe0DjUQsuzouwIh3ez1DYkTV4PXhA==","signatures":[{"sig":"MEUCIBbD7zEySaxIthqeTZUwFBtkIUKscFIVfigz9IduEgKyAiEArnO4BUG47QwgIgoCPMzigiMiXi7iZY9kMfE50NnJe6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDxPCRA9TVsSAnZWagAAk04P/AgeQx/Ri0W8JVKrFGL+\n3ay9KWcPGA9P09YRw47xzqsH+EdF/3xT4p3qkGGwB4aueXq5pj2oSTM7TBBE\nPq77ggTAz5QPPa4GCVSIKi4/sH8QL1ywiLdr5eTDUaPzlzcx8Vex68+4ySgs\nRrAfJZ7nshkUPLcIy18J8ZCGS4Sv5m22aksqdXOFd1yyKYZ166Fd1tFWezL9\n6TMz9ATZPbwNWw8JWhoLqsxFqpGLHZTdn1tLpahRcjKcd7AK9enDKusU3Ljj\n9nYRIq+0KK8M11WQ2zEPNISIxXygc1KOnnrr8sGqpQYXYuLuuf/aliRq7tx4\niZwgnwJYrAh/Oke6pAVoKmmTjXz0TlU5tFj6DCNYUgarvIstAXoT1J+Zhhi3\nqjGIZqn1dGFD5Lkmm8rUvCkmlVrvYQoeGzTgxKLKX4rjb84R2/ZFDqJUwFDS\nQRu0QJY9gWk87jmlY/jj5vpouss1DdW6qa8AvqOjJnSOajONl1uwyniHhXc5\nAngmMeqlt0yVhUPhbinxDbcsjoJKTGgSwVTjEUwPNM1ZaEQzbyCitLVeqhPm\nDRj5Pjy4hvAfBAQw8u1DUCLqDM/3FesY9j8+2mnUOCY4e/jiqyJsFspbl3B0\nEFFVOUZFd0ahWDR+sFAQEsiNtC5ey+Fhsg7deOC1xLZfZK+g6oVs1TelDtGf\nZxR5\r\n=jtrj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f83e00898.0","@material/rtl":"7.0.0-canary.f83e00898.0","@material/base":"7.0.0-canary.f83e00898.0","@material/list":"7.0.0-canary.f83e00898.0","@material/shape":"7.0.0-canary.f83e00898.0","@material/theme":"7.0.0-canary.f83e00898.0","@material/ripple":"7.0.0-canary.f83e00898.0","@material/animation":"7.0.0-canary.f83e00898.0","@material/elevation":"7.0.0-canary.f83e00898.0","@material/typography":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.f83e00898.0_1588870222574_0.16026174168557672","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/drawer","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.047e6b337.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3876afa32d025811ff62d50434590812f01ca71d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.047e6b337.0.tgz","fileCount":46,"integrity":"sha512-T7n6XG2zx6+gdIhBAhWLXTFdATFXsm104iTHTYtma6pllcoUwU+zr4T9EAip2QoVTZM3mc2+wzYO7Ofy4azBtA==","signatures":[{"sig":"MEYCIQC6htM+wKCmtnkeyPCzi+VXqx0nFx/POj/5a8CNaEQAAQIhAMX94aY2YlQ/JI3rvVWJyzeoAGjhirEM4MKNyrbTbBCx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetadXCRA9TVsSAnZWagAA4GIP/j0MEV7QstK+e0vm1ukI\ncZBWKCBJBDUnuxcMT71xTty00XSe/AYHjEQHyi2eljrny2UBJi94/ZmnK/jA\ncPM2ar2Kqz8rz+0D2Zb9HsIfUtITH7c4sUvtsuKDPplhnCVftO8+G+42Boqb\nCN/7ZKA0s5/F7X9cEQRpV0KQwdU3h2NqsSQxkuBn3/xleoT8z9GE0BJ5L0m0\noZK9jisXAs8/iqOxmtBIRGoucNutVpRrnc7hQSvdUD/FMYWdYEjBcP7F/yjP\nEVJ2GmMbd/BkQ0T5MGX49Zz/yrnsUQSS4yY3DaF4rG8CJmaxeMGnPwwu4pkx\nOgONkbF6BjyswXiFcOVH3EJQrcgQdbJ3tLM8cAsWPF1PCmoekm/8j4Jgo5ri\nsmjSEgRm8fous4Lu4lHzirYlF0jFco1oBQ8FyRQfLcseZvciuRNAy8TIo41w\n1xhQ1fFKefiv5Y/1wR3LxVmkfcfe9nSmZ9PZSxX+NUB9v0822UFF2rot1TT0\ndjTZHImJSK8mxyAzGq/nDfL2sBqk0CDXUKRzRdLVTPeIu+ObfyT5z0CrVO4B\nZnSad3tLuZQTE8Ip1UkddyrovZ3RNSAfnrcTOAzPzuqKI/CVVsiCITpsCNDU\nzJcT5y6CsZP14A2h9AGxXxVtfbliUy4Bz/RrGYyTjj3tdd5bUIFWp3b11YDw\nbOw9\r\n=9r19\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.047e6b337.0","@material/rtl":"7.0.0-canary.047e6b337.0","@material/base":"7.0.0-canary.047e6b337.0","@material/list":"7.0.0-canary.047e6b337.0","@material/shape":"7.0.0-canary.047e6b337.0","@material/theme":"7.0.0-canary.047e6b337.0","@material/ripple":"7.0.0-canary.047e6b337.0","@material/animation":"7.0.0-canary.047e6b337.0","@material/elevation":"7.0.0-canary.047e6b337.0","@material/typography":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.047e6b337.0_1588963159150_0.5832113565457455","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/drawer","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.119e21426.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"feadd6f68606bfef3423b7dab7868eac8103d535","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.119e21426.0.tgz","fileCount":46,"integrity":"sha512-tegLNZERs0aAGBQdyGL6NPVe5Xf0o87hDYJjHxaSUqVsTdOAi/NtV4BITY3ULVU6HG1TlR/OhcKgw3AJG8c9Kw==","signatures":[{"sig":"MEQCID/6PhsGRtwqbzKwVIbUBz5ca7XSla31LEMG3+EczrEtAiAi0CbtiStPrer6dt8kQDVlLShTXYAgNxRMpD8vuvF7FA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb/ACRA9TVsSAnZWagAA+0EQAIPhRavwQv/El4cAAP+i\n4Z2CemTlxcVkIx+IGAemMqX06GLeHHDqzkcnMyw37J3HUckXCMB9BTjOhhJ8\nUcUJnEHwcO3yklVcwP1MwGpRlFo7/gn+lBwQqpvauYFXz1xqImRjKDA3uWoH\n0pwr6ODXiihsmkNiq9U8kerRpf3JIHso+c4BYd/+zwQMVSARihBVntw0xVzF\nVyaCdtTej88Xb+yXiJrVaNwuzOXDSRyXcvIH2HkWAMih4u5hL66xmmr3AJnR\nJu0qCc1Sf0pinqucMll5AB7WXT9LQCvdtES2Ev7D1wZaHuTuQWSxjRPDeVSz\n1Dreof5ebL5Arfy48vnhrynWX54vOWqrIwdrz6F41FJNIwp0RX2Mv7mL9I/Y\ncYYur4kZ2rq7s7OWRzNWtDcbFk910wZFMKaYxTfdBLLKOTf3+ZQXvFwonHKv\npNX0/Db+8AtKa6mEPpejgjr+DclCCe59PRL3J6Ub6CLgdvOo+vBdbOhJ51Je\noaVnB5MMsi+kdMDv0iE98dNBP4+BE2s41tsMWS4EqQEtU1q/p7KibqRiIB6y\nI3nIYbUrIYzEUrRyONlVFgAMIKY3cvv2pVrihtMFypSOiXzQf1pxYqoJQ9bZ\ngThlv+8V5KkVjwCNFP5UotyGfy85Sv4Eqc9FnPIvYjk7I0QUX3FwpRKJqOoN\nheQF\r\n=DeW6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.119e21426.0","@material/rtl":"7.0.0-canary.119e21426.0","@material/base":"7.0.0-canary.119e21426.0","@material/list":"7.0.0-canary.119e21426.0","@material/shape":"7.0.0-canary.119e21426.0","@material/theme":"7.0.0-canary.119e21426.0","@material/ripple":"7.0.0-canary.119e21426.0","@material/animation":"7.0.0-canary.119e21426.0","@material/elevation":"7.0.0-canary.119e21426.0","@material/typography":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.119e21426.0_1588969407976_0.551166417060386","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/drawer","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.2f052d824.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1aafc4addfacfb6c9e031ebf477a3b84d8eade7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.2f052d824.0.tgz","fileCount":46,"integrity":"sha512-HIvBz+tqX84ma/e0oLxWT46HvsgV0j8NupxNaZQko8co3BvqB815URVz4DKIyCcCC8hup5KSgg1d2/m6HjOxtg==","signatures":[{"sig":"MEUCIQD0+ptXwb+Rp6TGswCWi2cOcZHIYgZiCQ8iVAsY8sbyNQIgAqU9WZpFDFD7lrA+y2HjCRqFUFMzrdtkGDgCprBUxpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcpHCRA9TVsSAnZWagAARb4P/RE2jUPq3f6I6Wi3VRCT\njPDuCNKvSYrOrCnM0L4CSSyQGGBBR8bGRoiyPHF0pwWzgllBZDIl69660nKI\nhqjmsZOokDOJciuwTUMSrPepqTcDR9gaYiTxg/p7OjNec2ItFK3j7eU+1qui\nN8OY32N+t7z6XjKB2FU0B17usBlesq97hVFanJcAiQVq26CUy2C3tJ03Rc9U\nqmsjm687Pt5nu98NpRihYydreIasF3qspKMDfvo0zvZewz8zpK4ionh+Qzhl\noqAI7ZlumWvY+v8kQGOdXDbHelWAqaoR2v4vzKz/prJgC+st1zn67CbJRqa2\neGzOiwdcHOlylt4okIiGDVTRHX3r0GpzVLRn2pfQEBm89pUzeRt+vKQDegQS\neXsCN++dENgz6ww2w/ghqkosPWy867YDorjYRKfSPDlH8z+pTnFuywtNGJBt\nBd7lfvrFE3aor65Ewynpcv3x9L0bivr7Nbub2JGuwBULxQj0f6tWLtAMAtVs\nV2+XU2j0T3jtYP9Le4YAg0LPwUYvW2s2r4ypTsvv5DQSloLD7zddztYKcAvn\nOE6ydNKU0TTLm8MoMBV5kM15lsunbaZpgfeN6owb1v/ZjrJv3y2uK6SDvY7I\nGluzWujXAk6CuFki0+ZMSC4m5c6ElPErHigbtcl3VyHaVxFFRb77/R6yAF5y\nwnyu\r\n=GYnK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2f052d824.0","@material/rtl":"7.0.0-canary.2f052d824.0","@material/base":"7.0.0-canary.2f052d824.0","@material/list":"7.0.0-canary.2f052d824.0","@material/shape":"7.0.0-canary.2f052d824.0","@material/theme":"7.0.0-canary.2f052d824.0","@material/ripple":"7.0.0-canary.2f052d824.0","@material/animation":"7.0.0-canary.2f052d824.0","@material/elevation":"7.0.0-canary.2f052d824.0","@material/typography":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.2f052d824.0_1588972103335_0.6955985203123118","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/drawer","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.e84444387.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b676cf7aa945baa6bbdad0cdae32081929649ba","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.e84444387.0.tgz","fileCount":46,"integrity":"sha512-sEALYYJcZRC7p/UtmW7OsCvHYmsiPN8E489iSPyG/MhR5dWe0enQTxLGbvmdhjLOHeFVWyElaQVqL1ucGnpqUQ==","signatures":[{"sig":"MEUCIQCtRtO5g7FxvHb/OyRC6BCHjPuzR1qq6pBIX8NlYSLo1QIgWz4oDuHxJuaEu31ZQ5CiY9LzzSJsFe1RTyWeyQJOYUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc/sCRA9TVsSAnZWagAAB9oP/jekVKmH+JrcivHQgPZ1\nsdQZMVXFx1YMmjCkeq+8gnDo+ywxLgt++Umd5U8m40vFHC3sPm3TGGJ5mkhn\nuoBtIGwdwnxaCbNclFcPgOM7RIWniOb5pgouizF4ZiD3VBWu2s9LcB9fj4GQ\nhF6ZBJDcoZsrirvdsIYsWUU3YXabliKYbxpOyW5zdjUZIrWTKziILrhUmNzb\n0sHy3zg7xskzCYTBn1BNDor7yo41J62zoTGaG0X9xEC5EqVlXw70gc35KpJ8\nKNt0QOA0yzy6f8lk5YDUM1xRqegIncJXENMfm/jKK5czrC23FyRQsDiAt8p/\nkxZQgr7Zj7T8OlDXQJBxP+7rhVKAlDRAfsCHs8gjS7YxL1Ay4KURSHEnLqzA\nKn2rMkh/j0DmWRQgj5mdUY36YRpoVvIw2sUWAWH7sjcEkLjin/jdGj23wgMZ\nS2ZnpVOHCCRgCkaFLp8hoc/a958widjxXfijWrF+tX/ZoLb6EHdP9Lu1zwPv\nMtuMB8f4lN9fN60TfKHu5jBJpF6Qj1JikYeu5Ce4bCJGF9kOeHsPufaRzHpw\nCGtic+nnOHaj9h9XHerfyQfPboOMpan1Kr8ioDbvQzJzwoAe9T6ZZBMpJVW5\nFtEHWfFFBdNfc9tYJJFkekRxKA/++SsMZoeVsy6yBpbm/hpSuPlNoRdQ7HLW\ngPzb\r\n=zCpJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e84444387.0","@material/rtl":"7.0.0-canary.e84444387.0","@material/base":"7.0.0-canary.e84444387.0","@material/list":"7.0.0-canary.e84444387.0","@material/shape":"7.0.0-canary.e84444387.0","@material/theme":"7.0.0-canary.e84444387.0","@material/ripple":"7.0.0-canary.e84444387.0","@material/animation":"7.0.0-canary.e84444387.0","@material/elevation":"7.0.0-canary.e84444387.0","@material/typography":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.e84444387.0_1588973547931_0.10222675769140799","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/drawer","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.893eb1876.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d539887df5e914b7aba006b4cfc1803ed16b5e63","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.893eb1876.0.tgz","fileCount":46,"integrity":"sha512-+LkM4xU7qOalXcEoYsj/hGLkdzf349WOnHjD/aTjj3ACdVFPTV3ccNaEzOFhXq85NxN/7zKWK1S092i5+hR4LQ==","signatures":[{"sig":"MEQCIFDyURGzvDvxJcPdgmdtBBOUhEj3Z+e+6HnhAfyceam9AiAcPgOEsdscZ5U0qnc5sToKwF1ImuOfmmmo+br7W+P8FQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV21CRA9TVsSAnZWagAAKj8P/RZt4Rg7rsZORTFuPU7y\n8DCY9sWVJM9Dh37kuepGk5auqdF97xS9LLng1/26b8EMpg9LR2zSoddu5Y7M\nSGnmaAldrYfeuNhNEg9UYfbtN2PYmAw4mwJivYV6rcX0i8VWdK4HzAkXIM++\nvJaPtPnJaUZsAiTMjIlVuJuOUzI0rmqqfczkQb5kvEXjGBK4kob5ffleyUyf\nnVtqI4NSml+gZwJOYfHU3t9KgsMd3DHN/m8B/l2dzGhDWFjWYKLq0Gs+DGJ4\naDHvf9N4SCa/y/Wcs2A7oX5TLgAtHe2ZmgPKyTfPI+Zay1k6I41IcjxO4oym\nxVZce2//doVEecVIbC+8tohGkvgzOHdidk+Luc7XutNL87lNt5XCjDDDeHhQ\nPuMFGG0362qpmP8cmyFqiMh/gyEuTy+JdzV0/lbGqEXb4t5caA4p//6VkIAW\nHwGuH87DLcZ6UjYnGvkmgVoB4cqLAj7+qTwTqmqkVVGwegXnacsQ8XJsxNuN\nZjhCnZjFQcMfQ49synSx2zuzQH0FtRXPud9VooNGGlFaxFTpgNvE/6K2gyjb\nAacGlEBebVLHc6abRSJWpJo1wM6LyjaNwLRwSV4MVgNCv6oFbs3/dCisoy+r\nsuTbelviQI7V/TumAHjSctV49G416BRuwldANSKYKDd03IWBQZn/zfsLnBnI\n0Au3\r\n=WBKT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.893eb1876.0","@material/rtl":"7.0.0-canary.893eb1876.0","@material/base":"7.0.0-canary.893eb1876.0","@material/list":"7.0.0-canary.893eb1876.0","@material/shape":"7.0.0-canary.893eb1876.0","@material/theme":"7.0.0-canary.893eb1876.0","@material/ripple":"7.0.0-canary.893eb1876.0","@material/animation":"7.0.0-canary.893eb1876.0","@material/elevation":"7.0.0-canary.893eb1876.0","@material/typography":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.893eb1876.0_1589206452514_0.6412586388171437","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/drawer","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.a5aeb3001.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fdfb42a1a48aef9b65d2c91e365688f66ddae0e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.a5aeb3001.0.tgz","fileCount":46,"integrity":"sha512-w0vp8TMY6QH7XdYeIdpWSXZ69B6Qz21TINICvInAR/HfOYF4AskWu68kh0dYKpLPsDp/VGMDvA0R+HH4qT41jA==","signatures":[{"sig":"MEUCIQDEjAFAzddoib9Mlk2Xp/ssTY3oML0ZaBO2VmDapN4DOAIgOyWIf4WWa8CG93E+CwVhjNbRp/SzgiotoOhlFtvK5ys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWF+CRA9TVsSAnZWagAAtv8QAKO6g/KrWJ98AB9f7Hku\n7wEFLZd2ZLpX+mrrm2w+FO8mV83rSOMskSexY5qUNUaLpPbvG8qlqsuCsZo6\njfx+9SsWBFS+jlsnZSYlb9PscTCGe8Z/+0SKFNPuKbz/BlKWfDgIwSJK6DBj\nxmaSYb7y1oSk5++0PHRCsymBY9CSKIXHu8lCfA4CTn6JjsW2vCPSChwjS6jH\nh+sf+z5jyXsRU9FvXM5tOKoOcr43EoW9+iweor0kvteicgZuCMIUHZx5ZDxa\n+i0ayKmCLPPqdDjepgPf5jFygGWFjwXeVYasq/Mu9jL6DJzxC6Ggu5smwEBp\nAKDf1RLgWNiRh6T8J3VZuFqlT4x87n3bnJV5EEoyJm6ADDrhxDPLLNC8W/cA\nIvHVvvqu1AEVm/gymv0vGrMuBqO0HedF1w6NFXzaUf51pYMK4eonPZllJB83\n6reUbu8G4HYWQtoFFWppX/pV8RVYPOdJzO8dGn7eHAy4FigxkJ+5C1+lFxZ4\nqqe+WG4g5bsD3kjMf2Bh03JxZY9eJ3pv4sADSmE0Lzrrg3xe4Qbjp4OhW3mp\nnrLBV3Y6WBDwzvKIJw3p7qJUz4fOHEANkKMJ/jBN0CfNx8rJD+ZdZYAHq5dX\nH+ZZR9UBZohAjeHLR/jU9T4BXiVHM5uFqRa0hRu/Vlp6g+mDVHYmKs/xTsiM\n/8qz\r\n=yLUD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a5aeb3001.0","@material/rtl":"7.0.0-canary.a5aeb3001.0","@material/base":"7.0.0-canary.a5aeb3001.0","@material/list":"7.0.0-canary.a5aeb3001.0","@material/shape":"7.0.0-canary.a5aeb3001.0","@material/theme":"7.0.0-canary.a5aeb3001.0","@material/ripple":"7.0.0-canary.a5aeb3001.0","@material/animation":"7.0.0-canary.a5aeb3001.0","@material/elevation":"7.0.0-canary.a5aeb3001.0","@material/typography":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.a5aeb3001.0_1589207421875_0.17720255862386725","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/drawer","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.610c68d97.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a02565dd5c1b1a413dd1717266eb87ca6225158c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.610c68d97.0.tgz","fileCount":46,"integrity":"sha512-nsYNhvxdeiapg1z/xWcw6oChMuezSLy96ubEORAIRk1frcGo3VQkXzzlDehgUJatpqQN4MEwmpspCTeh4HJbeg==","signatures":[{"sig":"MEQCIAVo8I4cPezcKQ91/uzv3NxQDYD7Wrk2Xw8IJS2ySCVkAiBpEoocOJpFT6LvAPmpHm5o5tqbtwVIVVLmEQuYNXsDlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuaiWCRA9TVsSAnZWagAAqjcQAJm3NYIXjef78YbJ2EKX\nOKvtl3rCJzYOyAIYAmbkadPqtKckVv24rk8IGDt1nxe41txOWyB0yYCslukE\n7ngWu2aOA4L4zhupFIYR73BiMqg+ymY7qrYADHmsZJY+gZg+CKwA3IN+Vy6x\nKYLAuENBF3QNJit3+1gsz243X+OKhyuxDTVDq77qb8MMy+xkMx6fAvsqp0G8\n5RoaGuN3X0lgdmsBELu0xXhZ0UKmRwc9hEXEjZZmM9NpRkfEDtOjrKK+hPm+\nvMPX/JYaZzAFNs8opzZCtou1E3DeZVbaN0o+9UvLAVyO192xF4FKzofcDSv8\nxxv05TYcoUew/k78YYtjyxaF9NWyruVHyCW/UujqBhZPK+XPqvv9JxT2nv8G\nI7vm1390Yz2chCgx2nuVE0VwcUhSz5nn4VW6EJQDfSiHAkokCFfTsB5I0usm\n+eDow+AyNP0j+sKxh5j2wqlotw9mXBDfQwR1qyjZyMD/Rp4rH7ASCSVeBLNC\nBX9c8nc7b+R8BFJZGCXxd+zlXjBjNg5XuUnU7OvyJm2i6HiYVZJwGloVnLju\n67mCxBmS7JAkniRvkrW0oohQrPoTSlazZxrzvHbdwn/61D6BVtiW7lw1ojiT\nS39uR7w1zRj/3MkdJtZw8jPvt0koTRg4eTJ5+AdIVoKghq8D3idUdxS9H4x6\nqRqL\r\n=4C5M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.610c68d97.0","@material/rtl":"7.0.0-canary.610c68d97.0","@material/base":"7.0.0-canary.610c68d97.0","@material/list":"7.0.0-canary.610c68d97.0","@material/shape":"7.0.0-canary.610c68d97.0","@material/theme":"7.0.0-canary.610c68d97.0","@material/ripple":"7.0.0-canary.610c68d97.0","@material/animation":"7.0.0-canary.610c68d97.0","@material/elevation":"7.0.0-canary.610c68d97.0","@material/typography":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.610c68d97.0_1589225621854_0.6385744305281911","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/drawer","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.ed52af767.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b57ec671d37ef0ee0e65760e17b9cc7976e9c75","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.ed52af767.0.tgz","fileCount":46,"integrity":"sha512-gcQP95S2zbgpH2xBF/wX1yhWuqGvfBrIZ8hd3tV41Tow/NCSuoFNvCtEUBIRB6tpfN2Cc4h5DSjsusbr53/dEQ==","signatures":[{"sig":"MEUCIDr6z4BkG/rO8Vxyg/GAzXWGa7CGPycfIwv0XHaaRl4+AiEA6pBfdbtpp6bvYy3ZtDpxjB05LsxVGYpt1H1CeC0JWD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubVcCRA9TVsSAnZWagAAwNIP/isORA0dY6Jv2QAeqCt9\nSG62i63ENBbHJxTEEWL2RHuvfT05I4CXQSE+3TDW7PgL22Omf0+/h6uvgr09\nAe8Yjoeqh0r971+pzrDh52sb2E6qMX8YMZsH9OAAvVQnIWtZaYUNnMLpecLG\nbeTIifrU8ZS53unb8ub6EpaW3Yqa5EmzGWPtLQH/Lr43qavkOcnETC/KQv69\nh/aRxRseKsRQv3uv+NnPpTCfaKPsxy2DTElnSxYIbY64wkicC/a8cY7bt/jc\n3qrJ+4kqatUw7KI4VVvYritjnH6EzuMgwHPdyHQxWnP4z/3SeqiSkYHdWAPy\nNbPAa1TpA2T+5xuUCjyFI+AnVLOTRtJvg5nZTeTDsLoyTCjOn+2yy5/BLDLf\nkYI72+RFdWF2SGBc3nmFsG+US/X3+QTdS7APUYDH3MEHMxhjExDlkFfVEIaQ\nAaQyiROy15lTF6iutI5fYGsF6lMRL7mAlRAi0yWnj0N5Wz3STKljjN0MwlJU\n0hAOfZFQmZ/vhg5Kcl2qHQPKgF+QkLb9RZHyXX4wssSyEoo0/KXIRgSDyKN7\n2FDlsRRB8RZZBZJzkElrNdlUfEgY4e8HUOg5Sp082Frfs+Z5GwP70lZmUkNu\nuA/lZspyNxv09zDebOQ+jQYQIhwhr2fIsxDRPHxDBWnGsmcWEaQZbgxq7HyO\n/1n8\r\n=gwMM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ed52af767.0","@material/rtl":"7.0.0-canary.ed52af767.0","@material/base":"7.0.0-canary.ed52af767.0","@material/list":"7.0.0-canary.ed52af767.0","@material/shape":"7.0.0-canary.ed52af767.0","@material/theme":"7.0.0-canary.ed52af767.0","@material/ripple":"7.0.0-canary.ed52af767.0","@material/animation":"7.0.0-canary.ed52af767.0","@material/elevation":"7.0.0-canary.ed52af767.0","@material/typography":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.ed52af767.0_1589228891961_0.570678407936196","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/drawer","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.058cfd23c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9fff614afc109372dc6d446e5513e9d4f3c3e59","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.058cfd23c.0.tgz","fileCount":46,"integrity":"sha512-c7zEnUJn5vsjjoVgluVYZtUFb2B244RxbO4VS6pWgARwb3V2aY5ajI1mEG1TpI+V/lrxUxYvcSuJ2BDiBCFoCw==","signatures":[{"sig":"MEUCIH8zTVvBMgnxdwezQEQ637muYzMhlw9VrZoi1EtcLeeBAiEAm6MppKXnU9p9vAYdQzbJSCvYdTlwbEKXE2oXyvywbFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucLqCRA9TVsSAnZWagAAKt8QAI2iM7xqcZ3tu1aTblUz\nqJlxSC5YHjaQcEYjq7nlygyR3Wy8+R6NT4NCI7V0ssi8JgIAnp6VSFABvD3n\nXM1KuNY5uVReeFzQrVOKYLxR+s4++0ZmrvRvO99VLMOY94aGM2VMzu1jK1kX\n5BAzECsqVWShmNUglv/UwTZibJc05lVe1N1XmsDP8Eww/X1lnmYL7xtaUKbJ\nT9EYBgJSLn+GqCkH+QJ7hgzSvEt+m0qgCAtRYPaDWoDHGLKJesaL0HG3il8c\n6sTkgrORXllVGfD7uXr6lfBIAaU5KQ2L+ClZf0Pniv68wScsiqkkS+oeN/UT\nNwom3as2HXqPEwbqp75DeHHTunsUwKqdjJi67IG7Sh0NQcw0MBKgRzqazY7i\nPovMYbMjh9igh8PdJIlqiQNDJGbegbuBctONLlVhXPHMEGL1XHSARf3OKIyQ\nLRWOuIQCPQ82iOM5HSC/gYawsqzcjlRM4j6SAilVy8YgA0xiwjJ6QlgHXVA1\nTz2hw5FSG+Y95vrtfRLg/V7Q4OHtEms2VUWTGtJvv0BBKUPA3jBPwItToiOq\n2khvaZOBrPDRxTqY+RMqtCWUQR3mauFPiejgTEMAXaLr26+sAd8gxgbeixOF\nV/n9ksyUXT4KakwTNtQZLfauMp+o6U6ffml5Bwnq2i5RS4OwnOuXztJ7MobZ\nMTJX\r\n=1d5i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.058cfd23c.0","@material/rtl":"7.0.0-canary.058cfd23c.0","@material/base":"7.0.0-canary.058cfd23c.0","@material/list":"7.0.0-canary.058cfd23c.0","@material/shape":"7.0.0-canary.058cfd23c.0","@material/theme":"7.0.0-canary.058cfd23c.0","@material/ripple":"7.0.0-canary.058cfd23c.0","@material/animation":"7.0.0-canary.058cfd23c.0","@material/elevation":"7.0.0-canary.058cfd23c.0","@material/typography":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.058cfd23c.0_1589232361569_0.4011479382991874","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/drawer","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.0a371b4fe.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a5d117f1358b079e9b195def052d6cf43c2a53b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.0a371b4fe.0.tgz","fileCount":46,"integrity":"sha512-sG2NSgXXh+dA6545bPvsUpJg4BjhTlwfthqhnyA1YRMO26ecrfrJXBOwQdhcuC8/fE/6FdqrpFWiN4EUS03hUw==","signatures":[{"sig":"MEQCIHR4Wpz0G3ZOkijRU4uRG/TA2Y3m4Qf+Yx+0FqoZoB4IAiBOl77EfsBIV2HaEuco7GpjwCsIEM0ri+84n9mm1ZiE6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy72CRA9TVsSAnZWagAAqpUP/217SOAN64b/el658StQ\nt9+6CYg64gcCNgq0hdlrQzxJFU/cCHxUV+QCtiz+S8ocwioNjt7ATGia+MBn\nlVMAPKFM/FX5j9ifAnJ1812oUhh9gz74SXof6GvytvhW7ZG4APPmTPH5t/jF\nSbHk/2aGuICGk0ejLSOH/fufKfoxGs428csWdULmC4kw/L8S7re98kOH0EBZ\nYhvp0Bw7frUxgOOawpIW9wpVfs78G9qtd/7oymKIiTkc/V3ukXTS8GJ8yx3S\nMx29S40i35ZvIKyoLRUyfhshB5XNe7zIIlZWicWqUE/O1cvjtWGFyiXrf8PB\nzzsfhc50PsWZFiZX/tb6cw0Rz4o4m3jjOcBCeTUaIAETpezRFJABp2zx5viP\ngiQ5noz3T3Nu/lOcKhLKGGFgWxuyyo35bgQIcmvxZ4FPYUXc4hwQMCWaO1Op\nPKABk672iOApwugXgHev8YsdNuz91bYBQXulivzzYN/g90TOWxmfMO0zWEmV\nWU01ppQP3eqBLYTzwaXfcWLNQfCadMEF4Hwn5O2hVjpE+g1vr14ZICCYH38h\n6dF8JF2EP/ADoQds3ollYtlqXRVhm1VyvAbPS4alcwHVMuAIoI8jYwF7Nmy7\njJWg4jcjWwXSGhbv9LxPRL/kVfDjXuGbDvopGNODy09tzre7NapifVM14mUY\nD9g3\r\n=C2WN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0a371b4fe.0","@material/rtl":"7.0.0-canary.0a371b4fe.0","@material/base":"7.0.0-canary.0a371b4fe.0","@material/list":"7.0.0-canary.0a371b4fe.0","@material/shape":"7.0.0-canary.0a371b4fe.0","@material/theme":"7.0.0-canary.0a371b4fe.0","@material/ripple":"7.0.0-canary.0a371b4fe.0","@material/animation":"7.0.0-canary.0a371b4fe.0","@material/elevation":"7.0.0-canary.0a371b4fe.0","@material/typography":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.0a371b4fe.0_1589325557582_0.48817365730723594","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/drawer","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.2139200b3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ebc72295cfedcadb864fa73f734238acdc59ccf","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.2139200b3.0.tgz","fileCount":46,"integrity":"sha512-Ajj/4dxy3LsvCf9tQ1UjQ9rf0u/I+dcfmUddm8jw972XDuma40xGvNM0hhltOtiARJv/Ppk6BN6CGsXovoNLcw==","signatures":[{"sig":"MEUCIQD5aY3hJTtbVr9LYLfum4aQeSWTyH7Nfa+0Wz+qSacuaAIgTnSFxEoAlnqRKLXz+dQvaB6ckLsKonylquWITb71iCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAizCRA9TVsSAnZWagAAdZgP/24sm4cDrphTeyB1DX5y\nlwBxtsVtOC5gaIYLgsOqpjkY1iRlaIitJriqTaeGkDvLNH2MyXSBMxKEP/aS\nDmNSDfrSTZF6toyS7IEZLuHC87UEJG0suF7bBRxmPpbijcFVPAAASuBAknD7\nK20os6y3x5dyVWzLSlgBDDqvtRWd6CmXGPSu3923R2t+zbGWBhc5JL7kmi3y\nAJJdKFWmLWHTNaFyzVx8O1MhTM1qwO/pJWCKXmTDULP8vNxsLQHWlnEejWGw\n7jKp5zPjB5fW7QRV4IOoYSdmeS1XicfxYpLmuux1ZI4fFXb5MiFAOtb/15uE\nQ8+hNrxlY6O0LbALIIaqpK8fDxtgeP6Qc08y3wXloBvqz7EI5V/Wl4zJ1niu\nV9gg3kG8pw1ttSQE+fennyAq9HK6DmKPO2HnvsDZ79pG1OZbWVVMXEeu5GdB\npzjC4wW2936n/+2MYR0GrGnPrxOOJG7cuqshqfxsYvfdKvzp0CTuXKGJWjfT\ntKVEbb0+0KtUJFjiOfSEFEKArf4RhLtesB37fZ+vWymRagviHKZQDJLM0+ac\nSQVnRQhabAbtY6ODi78IYkj9mmE4M8LXq9b40F7IPPQNUO/qcTuxCytaOl4c\n3gG2d987GE7JgJVk5h0ctwt+d+S1vDNly6emoN+I9cdg2ApQJz6kqzNo4EZN\n+zOe\r\n=KexF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2139200b3.0","@material/rtl":"7.0.0-canary.2139200b3.0","@material/base":"7.0.0-canary.2139200b3.0","@material/list":"7.0.0-canary.2139200b3.0","@material/shape":"7.0.0-canary.2139200b3.0","@material/theme":"7.0.0-canary.2139200b3.0","@material/ripple":"7.0.0-canary.2139200b3.0","@material/animation":"7.0.0-canary.2139200b3.0","@material/elevation":"7.0.0-canary.2139200b3.0","@material/typography":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.2139200b3.0_1589381298861_0.1856909031486358","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/drawer","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.744d751a0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9788adc18da6319ed10426524dacffc25c5dd3ed","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.744d751a0.0.tgz","fileCount":46,"integrity":"sha512-mZjBZ+6tTyMP7WDnoAe00KPToUrmuiZrMs6M5qkCJz64wQGEJ4UvJENZq/QyCTwcT5FIoEPE1hAMHpxu/fnrKQ==","signatures":[{"sig":"MEUCIQCNMA0shtcuGGutBv3wA/smD4iNIIxXrHAUYYxf/CKJ/gIgeq950g04uMNiiePEEz1/quGw5FLwiMUk6su3TSt8Pjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMx/CRA9TVsSAnZWagAA5BsP/jqcDIZHvu0+tMf9fhA4\nvv98cNNXJt9xmS09ZmMQd1ptbujlpPR7Z9Iw9+sNS3NfZUovNaZ8VLEuZCgh\nnePRSV/9jBzvI1k1FQ1V23Ja1LpNjAHxcSn673KV2L+pqmLX4pj+5RcH7Fks\nr8SWCKotuo+Q2Q2ZmuIRmPG0Ja4jhHRaqWKyOjrGzhcLjMm+0PQ39n1rwW/9\nx5YxqyCNha8bGUTV8A75Ug2EuP6kd4WfKia++fGBnffmpaZixso/mNcwlD/9\nCmSVtIl3uqZdn4psVNfTyowbETTEs4tX9l7FLnk54JCx2S37rjLaZ7cEXj/4\nCoGQJTURuS80SwigfUsMDE+8fH9BZ+4DjyUdeV323azSbjMxCzLWWOtq9Sl7\n/UXBIJ0YyfW9jzeht8v+TNYxqEKkSga9oBPrdmwKTo7wKGLGJPhb7U36YtaK\nFu5g+bvf2EQJGRtwH1etTimR0UDkKEEbiOs+FifqBeVLIcaY5maprwjyLf97\nOCwtYJbMZSlZ8XYRID8Wfg7dK50JDRPt2yUrihukwn07yHZW2QAKyN01TGCh\n6/f0lzPOtvFS9oiQt7pnHOCYHTN28kYaanymO6YgABTZ2/ZtDwBK9sTM4Tlv\nwBs/iFqhfWk2V/n8vUAAmfzIJ1jTT2YmWaDdmpH2aFl3bwM/hdoppp/JCKXo\nAR+j\r\n=OAO3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.744d751a0.0","@material/rtl":"7.0.0-canary.744d751a0.0","@material/base":"7.0.0-canary.744d751a0.0","@material/list":"7.0.0-canary.744d751a0.0","@material/shape":"7.0.0-canary.744d751a0.0","@material/theme":"7.0.0-canary.744d751a0.0","@material/ripple":"7.0.0-canary.744d751a0.0","@material/animation":"7.0.0-canary.744d751a0.0","@material/elevation":"7.0.0-canary.744d751a0.0","@material/typography":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.744d751a0.0_1589431422607_0.8835792159303149","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/drawer","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.ad0c0c103.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"837235327d3c18755027bbc1236f3eb7b601c891","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.ad0c0c103.0.tgz","fileCount":46,"integrity":"sha512-x0hpH17RYnKnWbWGttdweEAohE5pLwh1gMNCpak959d/Ao7Fj61zckSQUY78HSGZK96o+w22lBYOS2up8/izKw==","signatures":[{"sig":"MEYCIQD2um8lcoC3G74vmXeP0zOKPAHyEdlNz2UbXNYCRMKaVQIhAK1gBH9Ypk9Zt8fzjoElM8MSOV//asQria3D25zvnp4o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVs6CRA9TVsSAnZWagAAPn0QAIeziv6bADU6tes28GrZ\nC5cwK9k2O+pd/ROM7qs6+aS803oeoTHX3O9i+Z79eddXvdpfUhukUEox8koE\nI0hYRVDSHl31eWYlW2tQFkGdNnNkXnG2z89ni2Us9LjONlsRGVqJw5TqCAl6\nmBnMMl/hGoWsBxwN7A8DSJRf7paO1b7thIb7wq35awHKooGFty1yo8iz3SCV\nNmbrEpRUPDtnd+FHQGUW9DS92qxNYAB8LOrmdN88PIcGaQtelj9/qlacCsoN\nA79MasZM6m5JHfWoDRXv/rol3DyqQgRqdcwG6JQJRvNXA0yuhwJK/stcJhbk\nG4ODGq+e+VaD45+F/5ZnGoxq9oP1b3feuiHu63JH72jnEqpgEwTPIYNGt/zw\n3exQ+O++q9kVe2rDo2TieerWXi3jkLhY++4uRS6KIhZSpY/9w4l2AQid8r3F\nZkdel6eu5xkxyc1Pg4EWyZBGkEA6d1AAzmuTPwkyQWhUDypKwQOuvTPcQJQ7\nIDzf5fywffOfz2ZZk7gao2hVWLom0fe5a3Z2myQiLPpalLH6bbA4LkOeqb6u\nzbi0upFrImjRrt2azV42btbmN+j2g1Yo9M+AcM1PDIJQDJyJTplHOpT0pCH2\nfANd+jGNWZTc2b2z9zFGpyA3J1gAQqglSWUCcFil+bWjEAlAl3AR3Mdy+fWL\nUy7b\r\n=9Zqr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ad0c0c103.0","@material/rtl":"7.0.0-canary.ad0c0c103.0","@material/base":"7.0.0-canary.ad0c0c103.0","@material/list":"7.0.0-canary.ad0c0c103.0","@material/shape":"7.0.0-canary.ad0c0c103.0","@material/theme":"7.0.0-canary.ad0c0c103.0","@material/ripple":"7.0.0-canary.ad0c0c103.0","@material/animation":"7.0.0-canary.ad0c0c103.0","@material/elevation":"7.0.0-canary.ad0c0c103.0","@material/typography":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.ad0c0c103.0_1589467961627_0.7920151150763344","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/drawer","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.fd8f8f2b7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"552ac2e24b5c86cabd0d94c02b83864a0971d226","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":46,"integrity":"sha512-8brvl++77l3MFCFiRqCMnSUmoVimYtcPcq13ygXMUqKZfWQK3frqeGiuGNKLAfPFO/8wcD0D14NSzSBIUFMCRQ==","signatures":[{"sig":"MEUCIQD655Xv92nVGJraf/JWVlsSBd/6GYur716HBr2iQtnYqAIgF3CEKYFCrnHBwVsghtor8qojmsAOJ7qSisgn9z9qBwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsvbCRA9TVsSAnZWagAAUuEP/2NtAKeHN63J3tKIZY3H\nLQQLiepe9pnFTrLgY6MQ1uOMUFUiWWTaSq1GnAGKNqEj18QcMI98zhi6qptw\nXBZns16Ir3jXTX6yLQiHrHHD2aN3/Wf5FOuLY4dSzk64ddFGXu3uygvpsUbE\nbASBFxl+P8+dAmhXF1mytrzeMO8Q3QNGydL70aBxY5UbRe1OsZakaL2PjcSS\nTzD8DL6vsmFXFhIlsQHh1yITYayLsf7UVPei5zjrxnkHgw4QtVWN4O7Xyc3e\n+ZnpnjNVOvqZ7AvsggHKfvP7lz3sQ+0ibgbMTkxotr5lFRSaqCp4lgMmCS+h\nWg3/xlQrM80zxS4VFQYE/qxbqqS3II67gnNdy2EyZfD5Q9H9ggY93+D/SvhE\nXy/LgbHBFVzjcDb4UI8TkJIyea0NWwKZcUEPxG5Y8WZJw/QpaMMaH4H39LdC\nXBFlHzZXEPKZSkUPfDWRUNQvyC8nPLYgjnIXh0D+CmFWDyVQk3BQpmyrBwVr\n/F/PAluVABM+J95sYpkXjT1RYTDzPZQhB2iVTQ/yQwoPyqlgVgVc5zjQwU/t\njUj+T1uS+JNtO0Soufld0OepoT9cuL0ZggQRXBtIh8XgEKiO4H7sqC6kWk77\nV4F/JIDNdB9TnTl+EWLkebFwQrVlJLDeBLivC7b9fSc5StqY49t25qbPacWU\nu0KJ\r\n=DXt1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.fd8f8f2b7.0","@material/rtl":"7.0.0-canary.fd8f8f2b7.0","@material/base":"7.0.0-canary.fd8f8f2b7.0","@material/list":"7.0.0-canary.fd8f8f2b7.0","@material/shape":"7.0.0-canary.fd8f8f2b7.0","@material/theme":"7.0.0-canary.fd8f8f2b7.0","@material/ripple":"7.0.0-canary.fd8f8f2b7.0","@material/animation":"7.0.0-canary.fd8f8f2b7.0","@material/elevation":"7.0.0-canary.fd8f8f2b7.0","@material/typography":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.fd8f8f2b7.0_1589824475062_0.6851823127722716","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/drawer","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.730920fbb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d35dd3b630f2b233e55f7c2464ad1ffc2bf6decf","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.730920fbb.0.tgz","fileCount":46,"integrity":"sha512-doYMhcbVD9dgDUE33XSVzfjnNoe2qfvLqZrJCyDMi2seafmOqkBXIOCVpXTdmr8o4YcSrRh4MS0Ne4UA+DzzlQ==","signatures":[{"sig":"MEUCIQCJmNYKm0cgsaO3i3QknDVrtA3Bhse7tEyNPTK7HDFiawIgVZtHSu6BL1V8QhjzBdYUdCTHtU6qcpwTRJLzOvNB1pc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuXPCRA9TVsSAnZWagAABH4P/0IudHvSJaEUMilBr9jU\nrstbB0hARA5aeUG8IP2Mrv4yxujRfk4jeZjUqjH2jxOHdmVDZJOk0T9D6Hg3\noHMHAhcfeaC4xRBr1DTFsLOddt1HXSKeHvcqGgrjeLhg2rqS+ZonLLVvQG/s\nWahHm0Bu6Oxn1vKxexnI3YXhf6js6LqtqyhKp4gz8ox5jNvEoQRew+onE6ET\nVGJkVksUUsdiwK7p22wJEaJtxEs+ozlhqsSfpFOqEYSvFpnrdAMwesdJUULm\nUf47TRHIU721HzUaEKcLdgQlQmHfYPr+M/ZQghS/DsgzAU3exRVbb2YxGMVR\nThedxJB3ojkRm1GMF6tQZt1YcBchrzZ/45U1axl6PKrXOtrhFqEzBsrC3rer\nxwlnPtRnEO6wcKz9PC3uNTew0bd3FZ75GY9PRw4lDRUDmDTzOdzCQnqfkjbp\nw/75STbrPMRYCUVHOUVTifM2G701NuM9eM3ZnnqWXKw7a3+jmMpRF9MyNrTz\nG6x/CN1jo9l2g9HqGm3Eg08VMclgWDvhlInZBbU0aCFobAVVxwghk/yqU72a\nIQQrPqkQFbyBCflLh9bg9quCGuZZbuSh1gZ6v+isZ558r6QXk/vd+Y6pY5kd\nse6xuGEzGLcc18h6p9Cgs4GtxX5ckdiFsAvTVHQhAHI1jrYMzLjV5qe1o4Y9\nC0tD\r\n=O4Sd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.730920fbb.0","@material/rtl":"7.0.0-canary.730920fbb.0","@material/base":"7.0.0-canary.730920fbb.0","@material/list":"7.0.0-canary.730920fbb.0","@material/shape":"7.0.0-canary.730920fbb.0","@material/theme":"7.0.0-canary.730920fbb.0","@material/ripple":"7.0.0-canary.730920fbb.0","@material/animation":"7.0.0-canary.730920fbb.0","@material/elevation":"7.0.0-canary.730920fbb.0","@material/typography":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.730920fbb.0_1589831119410_0.7274025849755477","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/drawer","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.bcdad99bb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"392a9234f65887c155b5e2099d64d75fd04f05d8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.bcdad99bb.0.tgz","fileCount":46,"integrity":"sha512-Rdqjla8X9z4HrinX2dgXY6gqNfqx9Pgyf2UwbC1Xatmmgv7ZS2pgqTQZan2pAM0pTyySFkftqTqfz5NOzC/cbg==","signatures":[{"sig":"MEYCIQDFjwkFVpFnYN+hM8xH1RO7O9TbBj/Gd2dLdUbBMpABXAIhAM3F/XUnxnEws6J0Jws3aXGJ5vxbEccD8vb8LmOIuXpd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1AkCRA9TVsSAnZWagAAn50P/12kYBgtKb3aOiuZk6c0\nW39FySX0tjdYN6rPXe+ZmQxFMBYHsBPw7PC5rwcxtC2dI39nDwDXmGY/WDQW\ns5tGAsXWRADKV7UX/jYoAcbI39j/Tz+/TivHeeXMhyuDRQBIkyhKxffiJGft\nBKCUAhTR8Wx8KcWZ33D7ixkFLCUM+RAerJpZp/on1zDhGsJaj19H1bhsaZXe\nZj6Uj5+o5V6d1nSbDhnVoTHoyYsBDf1djroy+CaMirtNDtYI4kEUyuQJvcI7\nxv42ORvy86kkYb9qcaZYkRnaCzctC0BUAsA1ljIbgQQtxv2XpPXC5BPj0lIa\nHzF3x6RxXmCz2826zM6S9ucGWebaE2y0gNN6MEh1FzIsTqSWd/v46bQN5s5F\nU2tfNOcPEnjz2KpykdeZBek2fAGsKm4vNPjmoRn99yX7FMkaYWut9cPlTcb2\ntFe1ShHUBrRMuwi0SYdMu5w16vUeAs+7j5XvSsmdAYwS5vxireB2SNkfoEyq\nT+l6F4JHjBv3RCusTMiQmJqyv7uagUorJ36w5hIZzLxQsJPYOmAtsL3Xsvjx\n2Wuqwy8vnEdb6z8b10f9BEOOWlodzgBejnTTT3jQglbU45QSjJOq5aU0eTOY\niLsXwQWSba6d3sjVQRfmHsbP8KLxHus2bvz/yBfh/Aez8MuFqAf+kMArBoiO\n5aXI\r\n=ZOEw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bcdad99bb.0","@material/rtl":"7.0.0-canary.bcdad99bb.0","@material/base":"7.0.0-canary.bcdad99bb.0","@material/list":"7.0.0-canary.bcdad99bb.0","@material/shape":"7.0.0-canary.bcdad99bb.0","@material/theme":"7.0.0-canary.bcdad99bb.0","@material/ripple":"7.0.0-canary.bcdad99bb.0","@material/animation":"7.0.0-canary.bcdad99bb.0","@material/elevation":"7.0.0-canary.bcdad99bb.0","@material/typography":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.bcdad99bb.0_1589858339861_0.24375452199158731","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/drawer","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.4497b86ed.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45b1b16262585f300cd607521c9641d412d64f42","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.4497b86ed.0.tgz","fileCount":46,"integrity":"sha512-fZXJqAGpNOq0fy1+8YQY9gHjlGTpo0Ft5J5xPs+Swhc5hJZSodnhVtHOMBM6Twhf39UTV0JvmKSjOnZzL+gDwQ==","signatures":[{"sig":"MEYCIQC/wjdAuxF62MN+qxwscgXkro3q3hZ1vnGXJUWBvd/oxwIhALWv6F0TE/HpTMb1pBqyhI4UDmEQMgGmXM3eYBO9lpjP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1fOCRA9TVsSAnZWagAAh0IP/3BQHw3xBdjwyT4CRykF\n2/AyjOceqKRQ+2mGEZOGTEnHKb8f/BmJr7Rms6WhJDUm5LUtBlK/yWQSUJhJ\nD2Rfmrzb2Bb8Sd8UqExVn+CgKlUGtuukaZPSb60xZ/VP+h0+5aCepaDbZtZ4\nu0rh32NSmY0C9GhpzN9zz+mhkT+jrpT0KUgPRtDI+j+gfrt+xv3s6r3119c2\nuPy2yQvL9jLmPP+DC0Mhx+ylqRA7NKDr/LAz2VDwPrn81JT8a0dZ9CcmB1As\nFunX2KxS/FLPv7rtQ84z+I9/VpOpnuFIzxPJEWeVRo+uVNwO85djMlOS5efZ\nbcBVOQSM5DiL1e7sNKLBQPxk1wUoBiQzYt0P2gFZeghC+9NwVOaDOl32riYs\nlh698O3nFUHua47Jk1l8xhfAeHdRZol/CAhDyAtO1M5gkkL9PTTKjyMekGK0\ngoAnZpgFRU2QMh9YYPivaDhR67hJKq5IHZ+bLpplxQPygLApnvlAm1aZcIbz\nJ5p6kE2W3fQ3ARIC8Ncd8BDFP58nCYcGXsvbwUYs7repskFtZk1yddYxyw0V\n8Z3K2NByscEQuDV6U1MovKI/K/ISBOiq6yLy3sKWlkdih45Xt2arzkHauNT7\nYUjbUfbFMA9OwZRp5MuW0J4Sd0aE0UY0HpeMgj2w2WLFQDLyCFTuJCBvX050\nzvgZ\r\n=4WDh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4497b86ed.0","@material/rtl":"7.0.0-canary.4497b86ed.0","@material/base":"7.0.0-canary.4497b86ed.0","@material/list":"7.0.0-canary.4497b86ed.0","@material/shape":"7.0.0-canary.4497b86ed.0","@material/theme":"7.0.0-canary.4497b86ed.0","@material/ripple":"7.0.0-canary.4497b86ed.0","@material/animation":"7.0.0-canary.4497b86ed.0","@material/elevation":"7.0.0-canary.4497b86ed.0","@material/typography":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.4497b86ed.0_1589860301573_0.2325399532178889","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/drawer","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.2e60575da.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfc3d0d8a91cf40561d1aba7a64861a1ceb5c23d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.2e60575da.0.tgz","fileCount":46,"integrity":"sha512-c/raHbI1aOv9zJsj6LBCspYLE4pvngLxIfQwy6EtVMoCmwJHnZZTabX7Oc9mJ5Mi0NgQFbT788eEj0C0PJsoWg==","signatures":[{"sig":"MEUCIAWGrJn117UTWJRkQgJQe8SpGJ/8eBhSqdyan5Fw7m1OAiEAwNf31ppPsACk1Qd/3TvU4kGeudvOSn/NcfParjiFObM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexATuCRA9TVsSAnZWagAAvRQP/3+FLIBz8e/kw8HoD3CO\n25vjveHCeCd/zqAK53cL/BRIAjHktDXz3/yOSnTvKzumlW2O32PMhtuJuMyK\n+2LTeOkMvw4N0c+LOAoa90aiBcmTpPdU/Z2yFJYDjCaKI/nUDFvPFbPPdxBm\nkgVlE+LsltHbo3XQoJWZHEW9s879L3NcwnhsFqsFIsQ3woNy/3Odyi7Rq9fM\n1AW7RjD6s2ToWMya17yl4ie2JVzkZ9XBkPL+LRSPjDUD4FoE+zgK9Si0uOkW\nAPpRiTsGnQN9y6nqnaifGEA7Ht9/31DzZCwsQwUHynIjOGZq25hFCLZc4RLE\nD7yq4DK0WNlRN+B5hRd7LsgfGD9mcHfTKzhoSnL3bjaroxvrOAmD98dl+xO/\n1ql/d/zeoGdE36IzG6v/SRevcKgY8gw4/Rc9LLiQEW79w7bAfrTGD8PkW6Nx\nLT+VDK7eg0EBaJrJtVkMkufxlM+maXTYy1AC9tBd12+ktEdUNALSD8MaVQlz\nDlc4wUQpk2XfQxOseMWjBcs1PnmGF39A8kFORxkXtoiEvOKj2l97IrRqbycH\ngu1VRF1WdTIRA5TQq/cD5RPkG1t96gdsajbSfed0CC4i9Y17zFD86jqIWdx2\nHLsvbJ5Qw4wEn8n5w6HWPLk6wvLk3oHDBM1B4+yWz6SWjWsKlaimCMYglyuy\n1BBY\r\n=Qwzh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2e60575da.0","@material/rtl":"7.0.0-canary.2e60575da.0","@material/base":"7.0.0-canary.2e60575da.0","@material/list":"7.0.0-canary.2e60575da.0","@material/shape":"7.0.0-canary.2e60575da.0","@material/theme":"7.0.0-canary.2e60575da.0","@material/ripple":"7.0.0-canary.2e60575da.0","@material/animation":"7.0.0-canary.2e60575da.0","@material/elevation":"7.0.0-canary.2e60575da.0","@material/typography":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.2e60575da.0_1589904621617_0.617076224694834","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/drawer","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.e3eacefcc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"daa513c4642918dc2f134a7d085d2342a571ab32","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.e3eacefcc.0.tgz","fileCount":46,"integrity":"sha512-/lI1oahDMEGzU+Wit4S8IwoLbIQz5l9z/0+qqgRHb7fGsO2UIj2wIPxnrODMvO1Q8XZYL1QU79gCNrOfHEisxw==","signatures":[{"sig":"MEYCIQCNEeEyIfsyV0g8GWQoLzrjQf3v5Sg7XnoguCc4CjzP/AIhANcYSzQHKxZ6WmjHWTW8D7GMHUnlQ1bcGCc5uT6NC5a9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBnCCRA9TVsSAnZWagAAwG4P/3sAMJNrumKDqeHO+Owz\n4rI7dtT/wW0oa84IbIjavWy8u8AElKS2/vHX20v4qmi3wV1mx6L+kTCYS0h6\nRlOrS/mWtTSfYMINEFD+SBwNvLHKj71UXSjM5G+USSIG8z3uA4rELKaw4ALN\nKlmVmjt0l/SFao5QKBT47gQyxH1AzX2CUO/mQYHvnn+OwH6GgWCP+0kM54NH\nQpdU55nOHKoyoCXJ7/PDKi4aGka3wNtNGfRe1fLlyWwFOCAD0E+JBDcXWxW7\nHOprjIWFEZEv8wktruLxfSeOKnYG/pg8fmt0JHRe2cibGHiAf4597qWzEo9g\nS8Cl578ovJ0A2GUHaLdppm6EJly7/66e/ZWcSWb+2mquPkquoeaKP0iuTdTV\n6DA+olpmaXqNSPup1hTPRA47I6LuX7rJNfisLUiC0jd7EEckfVqLaM/keh+V\nRQxzkhLKCVFChtPxB/siFoZnjwb6b0zgfHaSiANqi0/PvLaBUmuAco7WWDDj\nr7Fvld7c3JkcTcAg4gLYaLxqibMPHqutec1zWNIj3bpgIZDwDzHMezZPkEly\npLWFR8uEgwnLVR1kgcNvUaPBBU38GjKUeiZm7pTIcro0CdGRHWI8EY7JArOr\nLW1zjIIwdlT6+RNHkouUPbTtvEPUl1x1P3/cSHkf0K0J7wV9fDcKarW7wTOh\n376l\r\n=SxlY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e3eacefcc.0","@material/rtl":"7.0.0-canary.e3eacefcc.0","@material/base":"7.0.0-canary.e3eacefcc.0","@material/list":"7.0.0-canary.e3eacefcc.0","@material/shape":"7.0.0-canary.e3eacefcc.0","@material/theme":"7.0.0-canary.e3eacefcc.0","@material/ripple":"7.0.0-canary.e3eacefcc.0","@material/animation":"7.0.0-canary.e3eacefcc.0","@material/elevation":"7.0.0-canary.e3eacefcc.0","@material/typography":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.e3eacefcc.0_1589909954078_0.9309517727556138","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/drawer","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.b065a4d2b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9eb6a812b80a37ccc569a555dd10d93d810bef1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.b065a4d2b.0.tgz","fileCount":46,"integrity":"sha512-smXM3x4KYQcYoSu3MlYSBFv379XZyT24pMB6q4qQmpAphvtwCUOUU7RKdmHzQfMtATuAK1vyLRy3O7sdkah+Tw==","signatures":[{"sig":"MEYCIQDFGIPsmsVDYrSaeh1ggcTCwYIrqjXMx22cx8K0Lo7+3AIhAKGqtTdc5EQ2QV53P+O8ukSiu356XV47putvFNZr5TVz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUDPCRA9TVsSAnZWagAAoYcP+QA4L+taKQRiqFhXLHC2\nx2dtFcEZ8SHVcLme0QiItG5Z1HE8/qMD2MC7Y3WIb1flneRsDhQT0oURuzp9\nnq0WjrLpqf1wh1sF6HvLHDcSak0iq4M5YLrpJrE65TtMgk7xX9DA0y7+1rvn\nZC7ty0plrQP2LI1YnTy5CdxP2XdkRyZLPWjih/pMG00u+vNDFNkFoBs4QnwS\nuww3xM4TFPvVnI/QWXfgKMVl1VfaX93245WapSZIwQ2VoBVFRjyn1tqBPpgn\nFnCwY5R5Ct+c7VEuNwLHFWQAROhoRMtvuu+/o0TTkUfTLXGLBAg9PJtYSht3\nyrCk1ST0EGBQjqFZn4OG2Zgc4+zuRWnYk6kjZcQCIJgpdy0eJIi3IJR6tsc5\n4E7VIJ01m1r3qSWCy9iC7ATEzj6bx0VGkcv4A2aihVY8BE6eQl3ZiaGxzMdh\nV6Gj5bn1l+IzuwFFtq37Wx6s3RoWyvXtaAOdQ8x2086gy/5GMsU5N4V12Iq3\nZiQLC3zAZzIKhKResv/kSr4WWPSK3LZI42Rm+EmrDXAhAwKSYoa1waNFc9sg\nwYBmYIjr2AHfodEDVMfl91X53L03p2YYjMYylde2d74sP+8lrB23t12PUFx7\n2Czv4woGJhzO5PDw4+8K6B+TZQxv3jLSJpMV4C62ZWqgn3Ikjg2v+3MQ4TOo\n28b6\r\n=HbYj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b065a4d2b.0","@material/rtl":"7.0.0-canary.b065a4d2b.0","@material/base":"7.0.0-canary.b065a4d2b.0","@material/list":"7.0.0-canary.b065a4d2b.0","@material/shape":"7.0.0-canary.b065a4d2b.0","@material/theme":"7.0.0-canary.b065a4d2b.0","@material/ripple":"7.0.0-canary.b065a4d2b.0","@material/animation":"7.0.0-canary.b065a4d2b.0","@material/elevation":"7.0.0-canary.b065a4d2b.0","@material/typography":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.b065a4d2b.0_1589985486528_0.07528594005558364","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/drawer","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.4ebce8d78.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b7430d058af734656150670abc62ac06ebd6ffb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.4ebce8d78.0.tgz","fileCount":46,"integrity":"sha512-ASwamRSKAreqBgXy/d/F1lIgQMNoTEV7T+XmeQrsJz5z8Bqp9ebzA8VD3kIIzTs3a5H9WqGzh9vfQK/R3vkwKA==","signatures":[{"sig":"MEUCIQDTqTRBpanOYGcFj+1yFAycIjXd2wjbXWF/bcdWh7M+eQIgAbadF5WFlDrt14924IJwLqU14V5x2WpWgx1AAuspsFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZhTCRA9TVsSAnZWagAAIBsP/2vV/RPS9qXN7o0Sixwd\nfQTcyV3iFnHBv+kr2bOmsWqjwNwhW9GcpxaMucXOBPN9KEQms+3wamkRt4Df\n6N+z/7LJD4Oc3u08bJECJzS9yZsZ11e+pqGO+skt4V6FkWBJO5RNe4PzMhT4\nAi2NctaHgEHmJBAb/3ROti59nQG+lya6XonZwXpirU/e4E5ERimqn1t8D31w\nt2fK3I3xCZtGCXglPJh+2d/Bw6IDMyv9rnCWeccEwuK+NUcAJ+9x/DTWKtLS\njlZcPINOXE6bq4+5ir/B2tlGABHUz+pq5GMa/1JJbi+QnArCgpdRyW+mk9zO\nC0tRqEAOyik5PdbIo8WOSZJLvZYZmGmCrfER9VNq8lPjW6rqc9MykMqYJ7Uq\nzCP3WuTuoxE7VlRjO+3rs0sYy5wnilYWdEpPt3+vUjMQ4EzXm4jyTJ4PscYs\np1/G8fs2WCQc3DOkDLkzX+99YW55BG+8DEtnSRFgW0sVMwB4upAiCMHe5tDI\nk3c/pKLZOMyajfOPSi5NnH2oDSjH+/Asit1xB1eGgtun+xXKXC9NSf3oYk/L\nHmTV7z8qzFAZYDgIu/HFREsqAE/GavMhLqBKN7A+otlJeC6b61gS9xBwz5ue\nkWbZ6HopsioecgQfrarL2Yps6pgxqogGDTExprMxTV3PrIAc0UWM4Vv45AaO\n+sGI\r\n=9ztf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4ebce8d78.0","@material/rtl":"7.0.0-canary.4ebce8d78.0","@material/base":"7.0.0-canary.4ebce8d78.0","@material/list":"7.0.0-canary.4ebce8d78.0","@material/shape":"7.0.0-canary.4ebce8d78.0","@material/theme":"7.0.0-canary.4ebce8d78.0","@material/ripple":"7.0.0-canary.4ebce8d78.0","@material/animation":"7.0.0-canary.4ebce8d78.0","@material/elevation":"7.0.0-canary.4ebce8d78.0","@material/typography":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.4ebce8d78.0_1590007890536_0.14675331814221337","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/drawer","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.b0fdca492.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ac92f4fda6e6450930ac9dc9481ab954ef93e0b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.b0fdca492.0.tgz","fileCount":46,"integrity":"sha512-/Lo/Ped2qlcQQeKOX7RSOJ59CSIVyUSBonnqa21J5sAbkBZqTtqUFEj6ADnYUACLpiscZkwnx4IsOuEFOnLl0Q==","signatures":[{"sig":"MEUCICwqpfL8w7FGk+i+tAPCP7fsBU+tRMKgKk4lqj4c/Q2RAiEAowCreGHZ/eXS7bqiQh0gM7cPoMq4a6uqqr/FfydhAPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbdLCRA9TVsSAnZWagAA5DYP/22GE+/TeB63+xVgaF0e\nb4WSbounGWNGdBoyunZQhuy9MYS2rUc1NVUIhL8PTv16wIBymCvGjCCK/IfC\n1JqYHOsoJK7Ez+HcVJDykp//fEW/nOfN35v3opoQ60g1sFo/RfkT/K+yI1+R\nbs0y3nFpwL4zPWbeOi70R+Pp18F0YNcT5Lbix7Ih0mWOlLLBJAWJZUWI9/gj\nnS6ph0hKmkDYfvBsioQ8WE2KHOyXwiHVzQYly5587pZOsIBRgGD6+KmMbSvA\nWp9tei3cRA9rXMzHZ0s9v3W/ZhJjhYEnbHYDGteqW2foLzMyU+zOFow9vP2q\nlC9n1bwvGf+JgvkBSZ7wL5+arrwRH2oB8Tra9RLFy5mbiakpOOZ7pie8x7Ey\nzyUjlmC6Z7ltu4avXO+ggu0lE0GLGV9yd+cN2cf+YMjeh0NbYHl1ChH/gbB9\nR2aEcWCg4m22IXuPStr5lRbcSPAmvWw+e6P6/zPgYl86rv/EuUpFc2Kp/Un7\nvYKYHP4Z4KYV31raGe5qftMEYC4AFYQEfPS4GC2XOfit0OGv3ecx4SpZj+d1\nQT6U77MFHjJKY3p/YcUquxEfXhaFVz5dh7TzJgf9dyV/NG9qFQBI2Pbdx2WH\noJVqaHcD+YcBQHNy4kMRtmF/isA6KOcf74KtusMXYFA6uXl5EVdo729YdBWj\n2Bhh\r\n=jwEk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b0fdca492.0","@material/rtl":"7.0.0-canary.b0fdca492.0","@material/base":"7.0.0-canary.b0fdca492.0","@material/list":"7.0.0-canary.b0fdca492.0","@material/shape":"7.0.0-canary.b0fdca492.0","@material/theme":"7.0.0-canary.b0fdca492.0","@material/ripple":"7.0.0-canary.b0fdca492.0","@material/animation":"7.0.0-canary.b0fdca492.0","@material/elevation":"7.0.0-canary.b0fdca492.0","@material/typography":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.b0fdca492.0_1590015819342_0.08782419718172241","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/drawer","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.c67667e8e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4c358f0d7a756fd5bd9866283fa307241371b8a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.c67667e8e.0.tgz","fileCount":46,"integrity":"sha512-mfhxkdg21XnlDENJsu4chjdnEEuf4e/zDvAKyb1HQIJBC9gz42C0KN7W4BffvuRy0Y1PaHDYvaBaWSeZXiObqQ==","signatures":[{"sig":"MEYCIQC+4ae42vKT1/hzeFhr2N6KDNxyxRz5Zxy92oC8+JN2FgIhAJB1Pk3HKXH6eFc2iIPO363bAJQ6gqF2A+6/cCDiBkvn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoyVCRA9TVsSAnZWagAAQOIP/3ooeiQ7cR96PqYCKcrx\n+YtSiNCOnmtYLSWm93nfbzknQwQPGUHvxYXRw5LwyzsIfivjmGzMsfrV3SRk\nGBHL2U1S6SDR/IoOhSzuiWH5t98u6XZRTYbp0LCk8w7/izrX58zduikjqicS\nQU0SHM9Dkusk9siK74+8Q5sevZZxDEC88C6eMnJDTfIRah9UZ0ruqI8zIBO9\nVaoXIn3mI8pzR1VO25RzxVBKlaJYGKlXl7fdabTgTOaQpEbTr6kTUor4LUJH\nJp1JSK90Nm6H+w6pHZrjdYCz2QjDYppeAGSh9AWTP8WTwNhYlInTOTxfMqiS\n0FnL34E6QwOuLHz8h+dLD2P7r9vR+Fc92YZYYGMfVnESpeAFnZRPD8AyRhwW\nBcggSW3tar271wEis0sjSFjwIw+w9tYUMohYOJDa7xcAz1YOMh8SOj7TMTxn\njznS2a9/ggYYw7Vu6rzZ0USgePfnxh2haEZg0mVtcVOVPZT2+k4Nts0xTH2M\n3YxqEkn6GejWqbuREIUvhoy3vCK2f29LihJNK0721xdvCrZ7n71h74HtZ4Pu\nvjHllTezWci8C2nmwxLu9we242NgpB1YZJr2fkKxX2vljnQBGfs8Pjss4CDI\nMbmAlQeIkXDyZ0u8T6LtyLz3VS+vWjlxu4MyYFM8Ih3cyu6OhG/yAXqfk6Ij\nooH+\r\n=+ZYz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c67667e8e.0","@material/rtl":"7.0.0-canary.c67667e8e.0","@material/base":"7.0.0-canary.c67667e8e.0","@material/list":"7.0.0-canary.c67667e8e.0","@material/shape":"7.0.0-canary.c67667e8e.0","@material/theme":"7.0.0-canary.c67667e8e.0","@material/ripple":"7.0.0-canary.c67667e8e.0","@material/animation":"7.0.0-canary.c67667e8e.0","@material/elevation":"7.0.0-canary.c67667e8e.0","@material/typography":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.c67667e8e.0_1590070421385_0.8740694683507015","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/drawer","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.62b5f37db.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8358ed6309f6b7c5eb946973c6d818e0c7869aa","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.62b5f37db.0.tgz","fileCount":46,"integrity":"sha512-0zu+pmGVVzhHCiswTi7AuXplA9hiXrvwD+pKBNFfbYtXkK9kjIx5E6/l4s+PSpT6OJadz+B0DMgzwW5hZcxu6A==","signatures":[{"sig":"MEYCIQCzIHMm50MSGz6MYCobyV0H3xiOTF6sApAYvWNDNpHiVAIhAI0D0wGYcS751wS0QZFtq0Mqh6b+EHhhkxU0ZGlP+3FY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq9hCRA9TVsSAnZWagAAUkUP/ilPiyE5KvHQ6Yw5kj5e\nHLuW+3j+Thq4+lJFSm0B43MsjqjH1BrBnNJQ5lkvO4BpIw+Ujg+MEHQfq9Xv\nUB9Us3+u0+aiyCZ5taUhAgMS6g5Zgn4VBGHvX2PCV4bqwlTAFgW13qL+q7yz\nk8Itnch1EApQf1LOprvqNrK1PuftOpAOVHXT402C7spE8alIcB2h3WuciJ4I\nxMsGUK+14W8Fn1jOwSrUHq9JeOhRkh30MFbyf6liAjG4zzHsBWfcFxXC6a/2\ntTqjuCbYP2yax3jVTSPiSYLAmsqkqagfTtyP2LzLDo/4TzYL8IeJq6vvShEg\nxJIUwxD7PqtxotRYfRrvx78YuVGb/dzTkpSFH6lcLLuZY/km/g8+zv2txund\nzUuhFcQAvjVVnxvkhJA/tityKoQ7+Sl2mWrl1p76vbt+aqwRld1pwUyOhXyi\nBSrKVGMWGlJKPMass7jZhKqKcLAyxl3hJAdcwTWdOzMuxvDwpbSv+YnAlGjA\nMaxbLTGmXRGVLh1AKdHjfhidSVWxOePeZQ5wyF9ANOON9SjQROthN/yF26CC\nbHgGKOzwfcucEva2FXAu+bFl4HPQsVoW/nK9RGh6P4K7lelTHc7Gq7wSJmQh\nevaBHla5MnK5tFG9j3qMIuaHAo7SYmKbqGaKlPlDFn1r50aXXf49YEu5fVLn\ndw2F\r\n=ehIV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.62b5f37db.0","@material/rtl":"7.0.0-canary.62b5f37db.0","@material/base":"7.0.0-canary.62b5f37db.0","@material/list":"7.0.0-canary.62b5f37db.0","@material/shape":"7.0.0-canary.62b5f37db.0","@material/theme":"7.0.0-canary.62b5f37db.0","@material/ripple":"7.0.0-canary.62b5f37db.0","@material/animation":"7.0.0-canary.62b5f37db.0","@material/elevation":"7.0.0-canary.62b5f37db.0","@material/typography":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.62b5f37db.0_1590079328717_0.5546826766826793","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/drawer","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.2e218dbf8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14886f948427b0053fefe4b74f166fabe60b913a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.2e218dbf8.0.tgz","fileCount":46,"integrity":"sha512-x4dvghqsDA9SzAsBodoZyHL1lESY7iPn19V3mPmZ7Uda9OpmSobQ3yihPZYvqu5Nc71XuGlBZixKyV6wr1XB/g==","signatures":[{"sig":"MEUCIGtZbB8quW9H9jgrTm0AVGIokpzDH5E72X9sRwVIIrZCAiEAkgZSFJvS1zbCsl239XerIyxu0Z1qZb4p0Ttfd1Limz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrRFCRA9TVsSAnZWagAAtNYP/14Pj4ozDfx2BbghGhKs\na9MJfLZlDuQnHahJ/2Ke23wZaxfgYm84P+QC1MwZ40odhuv6+V/fpUMACFI1\niLQKVWSSuMsAT+XFt48FT/Ge49OXlpjKSoAe9mbPKSND1Epw48wGHvbjuimH\nXKPwJON/EP9WGadnxX5Y0A6UaNwQpz0p+90ZXeGP2yRpD+3iYfTdyQ5vnKCF\ndss9FkGuUxj7n6kJc7KsDumBSeK3PX+kJcJuCXZAbvIbeWcqEcXBNTgrh0Ik\nFwYsENEMHNsyAr1WHy5LlpPulVE+Ej7InIqeMd4AvIVdp/V55HUdmGuu2AVV\nxa0q72aljy7D/VtwZp/A0hJf5sRxq12B9eSw62GVjaYqcgg5pYCBFsnCyVkj\nY1NfkUiTQPB+sh6Zxpgj4/BVbnmzxs9EY7YXld4BXYxgpeFfR1tWGxmP05Hd\noOEblOa21ZNOoTNdv5n4obvbsba3n8cl16nCE9CGBKKlTplU90mUHdxloTkD\nd2dcgmnoitKg06Yo7vCXFe1d0aOQEPig1qes/bbXIVy5q0LDBZlgvPGjr8TE\nAFm+V5TarMFtdvFhv6N0Gj8v6jx8g+gJERmDkKVKkaUVVQI3MXsQiuj/IEOb\nzRYs4/08kmbBILWol0fxWouxAJMy7yxRP5IV/Psc/ITAlABVi14umiefq5Zm\nr5Pf\r\n=SIxb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2e218dbf8.0","@material/rtl":"7.0.0-canary.2e218dbf8.0","@material/base":"7.0.0-canary.2e218dbf8.0","@material/list":"7.0.0-canary.2e218dbf8.0","@material/shape":"7.0.0-canary.2e218dbf8.0","@material/theme":"7.0.0-canary.2e218dbf8.0","@material/ripple":"7.0.0-canary.2e218dbf8.0","@material/animation":"7.0.0-canary.2e218dbf8.0","@material/elevation":"7.0.0-canary.2e218dbf8.0","@material/typography":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.2e218dbf8.0_1590080580614_0.27050498055467953","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/drawer","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.7fd792bb9.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41716ba8f237be14f2ab878b64e6940a4fabd034","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.7fd792bb9.0.tgz","fileCount":46,"integrity":"sha512-CtUjIQ3h76Og84IUW17cBsoDgQeVppSMV1HoZjsU+wrEcJNKApJUTmbi6Afd5SCLoX0pz+Mb0YSekAPhaRC4hg==","signatures":[{"sig":"MEQCID5ncmyaMWZezdMhRC2OKEkpuZqHHeh5jC4kjpvFeCW9AiBW7N1IRgrsEvF8AUzpiL1TaJHhy0MRJ85E7WojoTgDCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrdDCRA9TVsSAnZWagAA7wQP/iwbF8P8zX0fbqkJAY4x\n/aAwUrAujkcY/n/RtjxkvR30gzbzlRl8bBZCim1PmALNHrHBHDtzLvCVV1CV\nIPuzSEhBu5hGmmts3lHy3G9cs0csrcK7mtKEwaprVvRqO2h6u/ZOSNthqHR9\nzPmCzsAWkfybeQlEKXfBoNk9wZgNgvFhGG7EkMI/oaCVf/FmyQkgIjdY9x7d\nq5WuY8A+53Q+uEskt9CcNj4ESgzLlJCoAtCcTOWdLruyHNXi9lDRjcNW7fc/\nbC9uuqxK01i+B91qm/fqOkQ5JDx7v8Z9NRDv2H0iRrNpUQPz8oelKgxU/1fB\n3B9RpCliUkT7uHw5doTn2GdcgN7ieEXjwGe686K6YI1A0naCCgLPsxkqUR7E\nClbTJR/FxB4sNN9bcrZdqGxGkEWqNFAxn76ZAcDViF/KcN88HM+N7cYhAuf8\nYVtzmoziIAIpqldQ83fiDTV0B6b7gXp60Tdmb7TtWxjnp3JWK28JKCv67owg\nDYiDcazyIGhBM+tdE5nSWFW3nDXUQsspr2bpR7KOOAU091bwpsQFH4cAYfw8\ntw/QLugguAWqk9Nwis8c23K5AhV+h5ikjkOMXn0NYR+3oyZTh6+gLusnWI4/\nAkZfbGhi2UaVsrd4vfG0QoOp5vaofuXlPBoTilxA7r0d7XvPXMk/rN4Rkx++\nKiDP\r\n=EYCu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7fd792bb9.0","@material/rtl":"7.0.0-canary.7fd792bb9.0","@material/base":"7.0.0-canary.7fd792bb9.0","@material/list":"7.0.0-canary.7fd792bb9.0","@material/shape":"7.0.0-canary.7fd792bb9.0","@material/theme":"7.0.0-canary.7fd792bb9.0","@material/ripple":"7.0.0-canary.7fd792bb9.0","@material/animation":"7.0.0-canary.7fd792bb9.0","@material/elevation":"7.0.0-canary.7fd792bb9.0","@material/typography":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.7fd792bb9.0_1590081347110_0.025457347298185162","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/drawer","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.a66493cd8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62f70bbc2e340a4c3d79b84d278e7e88b1d5b5f8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.a66493cd8.0.tgz","fileCount":46,"integrity":"sha512-CFxMIqAFZdcgYYRWtuMNntVHG7sZPAVU5fLHdhYFqG6pIzzm2304u56BRfWXZoHr44a5VY1RSKmc9KE1U5dobA==","signatures":[{"sig":"MEUCIQDPhSVl+d4R0OLjM7F1bzPC3reFYu81IqejYNhbdJ/kiQIgJQ48uM8meiLthF+97fu5K7sSOn0dbb+S99l7SHJQyXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrgPCRA9TVsSAnZWagAAyM0QAIyorde66zf7YJyzLwx5\nDYz8WFCtriHu9JenfFy8JdyOJEKcWuaZpYNPP9wrpHat6yucmiyFgYHUJ0yg\nzPiTYW1OZr9ljW5Zn1TeM6GMO04cemCvgxRdsAMEtkgoW4bhqfn0C9sQos73\n4EDGj2LmvLTxyRd1TVrn7761RYkAUEc80vp0h3GuCDmCZ+pwPGq0RuODZrFq\nyOI2gYLJtFnl3AJPzp797MtGqWQB17Xt8PBFzS+OMzd/v4X7tOdle8x7mTyi\nW6AvPp1YJdDtpbBwtOEjP4E88XMf5gMVv3WPQH3h0CTAGPwn2YiCvSEoY1yR\na5/OeI1zVXcz80o0+vGT/im7mFWcJDPBZLh3u7/olcK4ZeVbGnOtHxNHg4U3\nGS1GjX/XPLUvtTdM/gtnsn/8pVGzRW+x1jJEreG8+eWc7quVZn4CV8Hn91F5\nvhB+0rz+KxiGyzhnq056+lK5+wuYK3BAjSMi5y9oZWmsrQv2t6viAoe9Qhc/\nau3612IifGOEHW48Ak6MpCoigBg/LAgYVSsIeQeLeWr7gyPvGg1n/NoW3PAZ\nr00oIaO1HcPc9X310xzV7639yUM+J/FryV6Mm/VXh+/F9rG5qq479/TApfiz\ngSCQse3OqgkcdxhP3lEunET7CwVnBNYNXlW4TDM0wQ+o7VWxpmn3D4qDyihO\nAdV9\r\n=sD01\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a66493cd8.0","@material/rtl":"7.0.0-canary.a66493cd8.0","@material/base":"7.0.0-canary.a66493cd8.0","@material/list":"7.0.0-canary.a66493cd8.0","@material/shape":"7.0.0-canary.a66493cd8.0","@material/theme":"7.0.0-canary.a66493cd8.0","@material/ripple":"7.0.0-canary.a66493cd8.0","@material/animation":"7.0.0-canary.a66493cd8.0","@material/elevation":"7.0.0-canary.a66493cd8.0","@material/typography":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.a66493cd8.0_1590081550405_0.825950287646344","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/drawer","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.da05f66e1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3fb0f3d1de8224e034fc9dfba7ee78f09214ba4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.da05f66e1.0.tgz","fileCount":46,"integrity":"sha512-5HuoIUs+ry2Rioj+TOTK3EzqFhYyHNzt6lLy4RAmTRqENB435/gDBPrxq8m/R9zDMZ+a96gM2DOv0mNDhphDmQ==","signatures":[{"sig":"MEQCIBKxFMBfIqSv4+vOqonNlWBTTyRyURT+1FZY4ubhnN7IAiAGBTPNERrnZGa6hSka31Hk873UzqhQcsqmL2Ebm0Zc7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrh7CRA9TVsSAnZWagAA+GEP/Ar9tterKzYCq0HarZ/A\nPovr9UFVmt5m/HtN45RPlm51FJ6kMsZk7uYKQ0ELfaADA8h+DgMEESb7GUqJ\nXl82Ggkm9Ww5IEBqPDqJXOfXeoHxW1zYaLAFhYu6m3HMxIgZTJGk6X3Q01XV\ncEHIoMEpZt1b4z7uEM7bo787Uy9eY5Y+3Jh24tl//3vO0fPbyHqBs10funop\n/TxU6Whw+mJ5Wt6MlhtTeJTbHs7SSnDI3/z/L9WsJGaIdyQA9/IzLL50lcGO\nawLB+MUn1CdxnKhOAza7/v2g6VbSKuKAZpWMrEr0jk6zpRzyGy9zfhdtLEZ9\nRKRuClF2KidiqSGECTt2hpiYn2E4kkOaKXK7I07xKGbThG/zgSIqb3koI0En\n1zFafr8A6g6EgSEKv2cO7kgO9mVRYPm2bTSrN0boHeUUcOv3kfDGkMRmsp2E\nVxVMUxnJfwm4fXn1icgO3RAFE0uLa/d/EpCJDmvoU5JvnRTdU3FIzE4WKDrn\nZ2nitK+y1cIiD1GjtA0pmvYyRlnWrcVe7OAldlh/I4N+VDCYE5Y4/zfVuz3p\nvz2/g945HXKaQZTtxHbXpa9rvQ2hjgvqftCuprTKpqw+f4FdzNDa/HKLW6XK\naVRrgX/EOZqStDBMo/jLxcQUC+Fepz391Wf2wAEiryPBEIUlmuWNSQzUbt5a\nk2hq\r\n=EvY2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.da05f66e1.0","@material/rtl":"7.0.0-canary.da05f66e1.0","@material/base":"7.0.0-canary.da05f66e1.0","@material/list":"7.0.0-canary.da05f66e1.0","@material/shape":"7.0.0-canary.da05f66e1.0","@material/theme":"7.0.0-canary.da05f66e1.0","@material/ripple":"7.0.0-canary.da05f66e1.0","@material/animation":"7.0.0-canary.da05f66e1.0","@material/elevation":"7.0.0-canary.da05f66e1.0","@material/typography":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.da05f66e1.0_1590081659231_0.8827140270544922","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/drawer","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.740860e78.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"386a6760e92b6febf036baff4bd159a7af76fcf0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.740860e78.0.tgz","fileCount":46,"integrity":"sha512-f9mQRYTN0+HVjGZ/n9kupT91D24uhcHh2QiWQSnplRqGNNclM8cagPABslHugesZpxIYmedOKed94OTaLF2FeA==","signatures":[{"sig":"MEUCIHRBO+QcY/Ou4Wc07gCFbs7EUT02DyFn6/mJaQhEGv0+AiEAyrFASQRfyM8pUwMrZ1WJYshgj7oAVRFFPjvoc7ltiNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexroHCRA9TVsSAnZWagAADWwP/3r/DczkZRIy5nejSXKp\ntZ+F78UdY169L8VTgqqwY6Eyo7iC8pdglGc1MfOKgq6kiyYMdvshDInCYseB\nrkHcxhy8RAjQbi1BkWsKgCy1Xepe05K+maXqCItyHDi7iYlN1m7kANnC5oO8\n9NtDC1s2kLfHhTFmXUnd+R02lja1t9XGrwFwkAaylnjA3MVOv7+9gKsSKBNR\nNU4Czv0um1oJo82L9Zc4xIJtfK301tOewUBHxhwvuiYxXpZLUvAtfRQmxPUi\noYQX10gzbAg45bzeg2GYkYm36k7hGOdx6CIdwV5q1UJpoDIRi7eHgR6dhULR\n0GRRc16Fy6bmExQ7KBuD46Ok0r5rAqpIjHbJcDDJREU3+D2zyle3dhy7e3tD\nS2zArGYKpVsAGO2sWa2dszqF+a70lemVoec2hS2LWY24HpsxvHa9huNpswgf\nyuSEihL3Cw2DQxjs8LAzXkASLkz9Xz0GQ3ysfX6dsUNuT4+6K/6TezMiraZU\n/q33LYMJ/sc82NE/Dy9o/2k+xgwSDyqt79yqSoQoQTaJyStJ1QR3j7bJg3K0\n3fFyecl3NRMYuxeVLYIgvHv078DZihTWrsCF6jg2oVy0a2UlAixpa/pAlXfK\nSz6qDGC8BKtqKKPt2clmJrshVwto2Yk4cWfrIRP475m55dQntCmT7j6pHgVE\n2IGR\r\n=LUTy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.740860e78.0","@material/rtl":"7.0.0-canary.740860e78.0","@material/base":"7.0.0-canary.740860e78.0","@material/list":"7.0.0-canary.740860e78.0","@material/shape":"7.0.0-canary.740860e78.0","@material/theme":"7.0.0-canary.740860e78.0","@material/ripple":"7.0.0-canary.740860e78.0","@material/animation":"7.0.0-canary.740860e78.0","@material/elevation":"7.0.0-canary.740860e78.0","@material/typography":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.740860e78.0_1590082054557_0.724048276918442","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/drawer","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.5cea2610f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65ba89b33fd8145cec6bda45bfa3354babf48f54","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.5cea2610f.0.tgz","fileCount":46,"integrity":"sha512-VhHeyjiwfKEL9W7WuVpQ31G7KJywU0f/xrK6z73sGoPnE1eEwoC814PN9RjVWhP4WAiqEyvx0IZUKSTP58BfCw==","signatures":[{"sig":"MEYCIQCD8AOJ/DtL7mI/YfPP4XsWvXpFMl/j4gQX6B5miK7fKQIhANewbpaIYH8xJfUPeEogL5JsAajMGg+Q/ejz+b+PQFny","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrqICRA9TVsSAnZWagAA784P/RT9t6tcN4UB6p6A4Owg\n8Lkr/1anx/Wt5J6O9xXwmNHD7ZnHQajcPX6hsPynkRkp6iXi1VsnB9axv+UR\nTMMmIED0h+AsIZ1F4WNtgLSsIrurEfPdqqYCvs8cVtYNA6VRK/9CLbrEpKGE\nKj+I6gpj5DicC6TrC0yIKZPFmVp45t0EP5stHcC8UxWvCR9oMVWdssW/u+88\nYPfE5kkoV3MRjbQnWynJVbEVxPQuaZf1Lld2bo4k17TKPp+i5sYyJH/EQmGx\n5A714Gv9c5JNCSsf67WadTO3Gfr3jR7gNJVXpEa+sW8Hvzo2x6KriW8NwMAG\nXYY+3nFsvD85cpzKvZn0BYGYNkyvWqQQAA33bJBe1WBv7WotTHldfv/kDNxQ\nR5IYCBR80521C1804oDreMKdcUc3RL3A1L1Jr9gr56auD0YvKTiNJHgPT0pd\n0ppAiWjWPU0JErkKadK4MqxCfjzGKCW6TPGJqB19vza+XXFr9ShpqGJCEcIC\ncC0vkFXf6fU+0g2elCPzW7EgWP1TElTcl3akZJio2xv1POZlVat4AVYWshuY\nBDsaqudpq4PlEqVTM8vZSBN5TunyE8Sd/eAXQ0zu4u+SYVPf4Bc/iyHrzKNS\nzsE4xjIAd/vt6BQuN/aAiCAGw8jAlOmS9ev4i6VJzlycJFAZiS/S2gwOizpz\nOrLD\r\n=6TBU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.5cea2610f.0","@material/rtl":"7.0.0-canary.5cea2610f.0","@material/base":"7.0.0-canary.5cea2610f.0","@material/list":"7.0.0-canary.5cea2610f.0","@material/shape":"7.0.0-canary.5cea2610f.0","@material/theme":"7.0.0-canary.5cea2610f.0","@material/ripple":"7.0.0-canary.5cea2610f.0","@material/animation":"7.0.0-canary.5cea2610f.0","@material/elevation":"7.0.0-canary.5cea2610f.0","@material/typography":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.5cea2610f.0_1590082184192_0.0807637949406026","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/drawer","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.cf7747ef7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da3626e4e4c906a5c9fdf9b4578cb6175bfa814d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.cf7747ef7.0.tgz","fileCount":46,"integrity":"sha512-O5m97Nc9ooFHFNmkdq58Uc1zDVW89poMIlrh2YFa1WhNEzHrQkq3KHhqIB89vgJnd8m0643MdDGCXccRs9p8ug==","signatures":[{"sig":"MEQCIFX1s9cOSqiCq4krxDfKg99RxhSu9rAd6ClGSiBoth+9AiBw03DKb1/1DBy+1TJr2pCVm1AYUR5Rihbfls0/8taBRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrqdCRA9TVsSAnZWagAATl0P/2XidjxEcwB8pq7+gHr7\ncaG2GoiBvBrsj6pdGTjD7k5FjaF5x1OorDRYYODvC2Pa/IwmEr17y7l1mmmm\nuYGBk4WN2EdlMiOYpGFR/fyKmmlzz0ZkaMXo8ME1Wj1emHL+T1vDv5Z8TyAW\nV6YmFX2zG3IX25ztf+MBFLHSQ0C1N26xbW8WIv1DkW0qD3uaMMedmiIdPaFu\nwzPrZ+5LKID73Tv4PVSh6cqp9cTbOBhZgXv+8KmTmfXFHR+bYPZkZYQX9zBY\n/YivjiUkulagkrSlhw0fxusABXJi35j3D7dPMhObbdWpNrZWymUm5UK4JB+v\ntWXdBrZNLZ0Ew2sYE5cqirt4sdzjCkMXp87Wb0fMBU54lKqajnD7+eSVN1Y+\nNNl6J0BrLtHrrB7+R0YIGaLVH8jxZuukuIhlfOP9I/rXX+6b8HvGiABQJJkH\nG7CUuffdBJEdDVUd3A5OsBAoBVtuhnxj941QWotzcOhED4ciTAt6LB3xax1Y\npZtiRPFSUfs2ohA7su27pzu5HztTVAKW1z0g19tRh6tjio+fWDjDZyHt/yqd\nmu5AvTI4rSGkkbpOQqjkGtx1/8Yt/aiovtsdBOibxA+3JpURORhnBpAhoCVq\nwSVK7QTztVQD03ncTnt1yAPIpn9qE8sfY75i5MeW153IWpw5qp64XSXv4sbr\nJr1B\r\n=06/+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cf7747ef7.0","@material/rtl":"7.0.0-canary.cf7747ef7.0","@material/base":"7.0.0-canary.cf7747ef7.0","@material/list":"7.0.0-canary.cf7747ef7.0","@material/shape":"7.0.0-canary.cf7747ef7.0","@material/theme":"7.0.0-canary.cf7747ef7.0","@material/ripple":"7.0.0-canary.cf7747ef7.0","@material/animation":"7.0.0-canary.cf7747ef7.0","@material/elevation":"7.0.0-canary.cf7747ef7.0","@material/typography":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.cf7747ef7.0_1590082205149_0.6230468516526941","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/drawer","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.862d0d7bc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fb8429c4d1bb0f9966be5edf3e1c5836480a81b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.862d0d7bc.0.tgz","fileCount":46,"integrity":"sha512-abW8LpS2SlVeGTxIspshLq0rXWTZ2jXK+0cTx2aUl3AYd1MmchpTVs+Gs3RTP2fdyC6CSMTrTFXRzWEpFRO9zQ==","signatures":[{"sig":"MEYCIQD+6DwTY6ht0iDd8V9+oFNJ1LmYd0aUmCKbWT14YT0uxwIhAMIT07GFg9CxxFMklSBaT0goHc4ouK9PvFd9HYS5TdeA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrs6CRA9TVsSAnZWagAAnlIP+gNTBZVAfBBKhUjmuCUy\nr34VULHN/8iKhy0OnHbQo3ofe3gZ7wIgT9yNEcRINkZ2xO1uElZKH3om8cky\nf7mU51yHC06Yk8HXaapCpNOKuXSPczs2Al97AxGUpaArlVOLN+Bs4e57rwfj\nZ/5SdgJDgDOCE/66cfVq3mDttNOH4e8mvM97hp2xsWeBgSP4W7y8qaekWtZA\nG7q4JPoWmsps1y5XBxpYDjQ8S8vWkWBa9XlKQva5jwco1LT4sQBbQo+WFWkU\nojBDOEvIEi4ACDyAG+kKE8mlyQ2+tbYKqW3ETNHl4TZ9iSiVds8NueVrFMHA\nTUx88rnw1RDfJhN8gqRnhHXXH0fVrzVj6awq6378LuhVJlyOjuVmMG2IudsL\nzfgMI1hQbNZofM3UsZSb44mMsrGCuQCYvpxfixVXlF/tgFyBO8GmtYfoAmKf\nJeiBZrF5zDgTnyLk0coJEXBGmaJVgWb/Vsmzehqnld3ebJAuW23sQOoyLls6\niJ/x1kW1p5/bFgpBaeczWNr2kdx/IteMQrdh3Vw7z3tKumWGhyFjyvLp77kX\n+2PNfYFfaggpz1G2AtEuKwaS2HxK8nGjZObgZ9mF1gFlmkwhHsrKeRM23Y2X\nWyYGgAniSmj9UfagjIImZdnyUkkec3CyOnGu5DwNw2sPZthXnJEee0y6WpNO\nwH81\r\n=AR2r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.862d0d7bc.0","@material/rtl":"7.0.0-canary.862d0d7bc.0","@material/base":"7.0.0-canary.862d0d7bc.0","@material/list":"7.0.0-canary.862d0d7bc.0","@material/shape":"7.0.0-canary.862d0d7bc.0","@material/theme":"7.0.0-canary.862d0d7bc.0","@material/ripple":"7.0.0-canary.862d0d7bc.0","@material/animation":"7.0.0-canary.862d0d7bc.0","@material/elevation":"7.0.0-canary.862d0d7bc.0","@material/typography":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.862d0d7bc.0_1590082361561_0.5996052909399596","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/drawer","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.0008c8a91.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdc348ab16edc0be42c9275fea05a41b83ba67d8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.0008c8a91.0.tgz","fileCount":46,"integrity":"sha512-eqNdCGdZyZftwdRX1IgdO+IAoFo4kGlLSQXlXCnnEhi6L50MCj62n5IpOw7q6dRYs6wVH7S65jE28/Ja03EMow==","signatures":[{"sig":"MEYCIQCKSaf6owP4bGfNXo5/RmuwMpdaY/6o0iXBF04IuUx+PgIhAM9rc8cWt3s0iGjyfBBt3MZa927PUgY9odgER96dBPxT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexteoCRA9TVsSAnZWagAAmjIP/3F+UvLGsH3QlR3O9PYb\nwVfTW4XTD0Ow6HxN0dua9Y/MJZO8FM95dFbgBxSQkYg1R2ZQL7GcPLTtsadD\n4Yn00TTCm7JW+YPPJabXwrfaflSZvRg3iYvjqzsGEBIKnjvHDgvb/vidpkaM\n1wdtA4sebKvahIjH7Ra0R3egfUXzrNrGtNYn18varqxCKdVwZ/zOFkhLBAqv\nwBmyc7xluZsqga2tArOGH7K9/ZX9EZI/2vaY/NHB04HaT2JiE9XLN5H+7Vkc\n0qqTHpibDro/Zc6lfZvxGtIV2um4QMHLzT3FKbUn1ax3jEsAXnCihR/y8oEb\n3uki8hTc9VcPUexAdvwSN7H5zoQsSQAea9RHrjk/6Ngt9IhiWRxe4Swh5FON\nX6V5OODu7eisUVXFM6GT1eBBAAaQm/TsjeCFmEgJWpju5pBYd+r8EVb7luUG\n0IefHeRQRYXktDazMPnBrJKeVKk72CCza7J4HaOz1AHCFJP/xn5ebtYox3nR\n6KRlS7aqmrhoxBkCzR525y/VCGBPdJl0f39ouYFubeanhvCc320DRBZMC22P\n4DTTwewOTEJ2Y8x9pCWILeCmCW0OzGqW0CUkrizSbj2tl6xdOQRlXFrz6HKN\n6g8djXwBapz/Rt3UcX8YYQSa6vuDx3/2tquAlz7kdfFps/n98+EfCML0oGo+\nsWw/\r\n=nJp0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0008c8a91.0","@material/rtl":"7.0.0-canary.0008c8a91.0","@material/base":"7.0.0-canary.0008c8a91.0","@material/list":"7.0.0-canary.0008c8a91.0","@material/shape":"7.0.0-canary.0008c8a91.0","@material/theme":"7.0.0-canary.0008c8a91.0","@material/ripple":"7.0.0-canary.0008c8a91.0","@material/animation":"7.0.0-canary.0008c8a91.0","@material/elevation":"7.0.0-canary.0008c8a91.0","@material/typography":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.0008c8a91.0_1590089640237_0.5738439367061854","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/drawer","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.541638fa2.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f006e7eae90502d709fe203776a2f42045b5a553","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.541638fa2.0.tgz","fileCount":46,"integrity":"sha512-wTpzSkXgupOlWtg/ipH28gp2+8d57E1KD3MAlxEJlJMiMAqAvKD6to/ZsaCfIll5f7b26JmEVRp3y6WUT825ug==","signatures":[{"sig":"MEYCIQCLyBekOzWvJA/at087C6y0LpzoL3miNPyIO4gtA8inVAIhALe7pXTaZcLxxNc50KndKchWG7txb4gBuZm/lZCWmx9M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextsuCRA9TVsSAnZWagAALP4P/RlVzDP0EhrG1W4Sdqd1\nekFf/wgzBR29/c414sRXJ3Za8Z63ZOPft/y9nza2yxu0Nhwa4CLVkhor746d\nGd4XzQ613ZquA+VtyJimSO3KMs2OlIASihuSkmuWd/1hoWhChAkQbZQmI/Wn\nIThoFdsCsMa/DcARqf8gkBWj8Igb9Ml3Kj9RTHw9iJl2WmgN405CEHOpkrFs\nJVkCeHDddrbBTKo/UrTWRd6jbkFiLF+K6nuXoNkwiWhCUD3CrQOiwkr0EhYu\n+LgqlqHkwP9shUYbytFRHSnE+DpyrTRMCxpD0oVo7ENqC9YZpQVB5I+FA8wu\nxiT9vXQgoQk5R681IYAVc4Ee6meWLrcEROKg/PKjHPddLNd5BGeU6rEAhik1\nZxWSInEz4/tTO2Pslr2ajDgZQGqM6vYH2mjaM2qTq9yhxvhlzR0hTBDOJdQ8\nnzSL9Bu2DRPZ45RO8aEFhD+axqpODfQIB83h5dFTR/C8bErCNwI6R8txqzSz\nvfBuPQsXP+AxhLYAKvo/QoN39ev1d/q8ub+xOWnXRSWeR1ZMROXKI3spFOPo\ny075sVXqK66zbisI06ogAAiD813o4mlbUETlLVIEQL3PB6gk5JFTlrKAgV+Z\nofejtn5bN1Z7Ut2OBBgSaUNX+YiC2dj5kDGxxSbr3anqYqImlry/akRnjlwk\nUWdx\r\n=opqT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.541638fa2.0","@material/rtl":"7.0.0-canary.541638fa2.0","@material/base":"7.0.0-canary.541638fa2.0","@material/list":"7.0.0-canary.541638fa2.0","@material/shape":"7.0.0-canary.541638fa2.0","@material/theme":"7.0.0-canary.541638fa2.0","@material/ripple":"7.0.0-canary.541638fa2.0","@material/animation":"7.0.0-canary.541638fa2.0","@material/elevation":"7.0.0-canary.541638fa2.0","@material/typography":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.541638fa2.0_1590090541574_0.5057502592045855","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/drawer","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.6167cd075.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d2a9b7ceed5a90efbce31c522b3ccb63e00e74f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.6167cd075.0.tgz","fileCount":46,"integrity":"sha512-pHKnF2sSMTU0FD56aliJXuw6OkXLnn8iUL04g6aSGxE2IMLUx1B6mdj7YXKPRTG+ZB3leInFU0JJTRzK7JAtAw==","signatures":[{"sig":"MEUCIQDoVauWQcILl6OP7xiegZw1GaJ5CFr9OwV8O1mKQDAGVAIgel//d1ESARdKEahan9idubwM1C31R0tWyyPclUyB+sI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuLvCRA9TVsSAnZWagAAaY8P/1gDgDAGd1LcxTn55zg9\ne5vweL0FcYoRoov00trjmnzvufXPpWA3iJEkxQjDUBV/wHnqo0wbOwX5fn1H\np+3xFhXhq+Uruy2MBumPMx9XA5FoVOubOSkokmR55R8INxgeH/BoGtY299pC\nVEjxEVz3Y7ScQQbUMUBo25Cz5QSmFRYqcrNhXZpVCKGEWErT9NFJ8z/5oerf\nY8QRm6hFmg5U0DqVhe1CsWsbrO/T/p7ywN1b4zcHYXhI4ug8kxq4HT1Jf+sX\na1UqwRHJkTB7OluxPu2jePH8E7F8Zs3newBWVibklpuKVeTU4T5hWJmFxj7t\nkXAbREwpiPZzAE6x3BWVBf0F7S/3nEwHYB48Ie5mufScbumvlMXVY74IKQN5\nDp0YOX44q2T6g4EON7wooTLJmQoNOE0E6s1f310yErgF1lbRpPlQsR//7nSP\nb7xcQY2rgYimGI4noJU41nFcY8aPRfCArTmiaFVy1/o3vjK18VuoCRFlVpYO\nNNlR6jwGa79eyGDlIR3WlV8xUOnDr72P2/pWSYoYeGMnH8c7IsRcye3f8EWf\nan62PhRczWqp0SC9jPHizupj8TNvlqmTGj7+kAEOt4T+fjRjk4/AnzQzU50z\ndtp9P3r8L73Vxvs7/ueNMFRKa/QcOzfSmUk5eMZV/mwuBYQVTwDIiSy1p4X0\nFG/D\r\n=rFxa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6167cd075.0","@material/rtl":"7.0.0-canary.6167cd075.0","@material/base":"7.0.0-canary.6167cd075.0","@material/list":"7.0.0-canary.6167cd075.0","@material/shape":"7.0.0-canary.6167cd075.0","@material/theme":"7.0.0-canary.6167cd075.0","@material/ripple":"7.0.0-canary.6167cd075.0","@material/animation":"7.0.0-canary.6167cd075.0","@material/elevation":"7.0.0-canary.6167cd075.0","@material/typography":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.6167cd075.0_1590092526511_0.6426863427814347","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/drawer","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.863ac1b0f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f72adcbe37fdc3787e5728fd2683d34c5579e2d4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.863ac1b0f.0.tgz","fileCount":46,"integrity":"sha512-Xr6jwUMo/p4yPYtJmobp2s0eW8ro5DYyV4rlofjRY4Z13iOUtnpneIGUvKgdfurgyjKyY7GvdC+i46cnVXGzug==","signatures":[{"sig":"MEQCIFlNsGtcQSC++kjHRfCEVCtguDpllqIPkiynadmJ5Vs2AiBtA9t0M06ava5dSZISe4P0t+tXyFIzMz4raatahxUtIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuwFCRA9TVsSAnZWagAAiTEP/AqN4eNqzj7LefCnJwZh\nQVQu9H5wYr2Hc/IjyCPg5Fq2SRGlfdeag21clGd/LrFZrSblh5rB7Meo+96a\naSS2lLK58h9nuUhy+7uBB4HYcQl2tJT8RzXRykL3gmUIeEIba68TwwEEvpBC\nCUQeaHyAe3E0Fab/FIGNqgLcYjDRu8SLONZ7bbqeANpJEa3r/wi352TRByzq\nTdGbfahwIf1Lit3u3XkRV1solB5Kstb1Nnyf5Qbfq5e6mHx9uKIVkMxIxdwu\nZgrWe74zygkk4q6sUIO2OXwcu3pxPB1VtojzuG4s1SMQq44LXuGbSiEY18Yy\nsENn2YFz4SwrwGjxcOw8DrducVZ7sgthNQh9pVPYr7RnHVBJa10WCuQNrM3U\nq4JVRJHO229SoDWJqbrLL+5mfjT7BPmKSoVsKhPr7s1B8VXr0wb6HxNX3k+p\nJh/lSX6wkg5lEbbRPGovR+TFYbsdWkZBG4t5jY2v67N3aEtfqEEw630gwe+s\n9RgSE+PzmpTVHjmZthgOmfrCn8M1asZksMOnxuE71j0kvCQp0c4ACCcd4W88\nTZ6JFM9ggitCOD7A/5m9+1OK3vl5t1164lT6NpLD9RYSprTLlghf6Wo2uTSS\n4mdmgeuynqJWmxAyoOhHZ6ijScJVwYKjKw7vfitPrtMZGL2GwjmFRX96yinn\nl43Q\r\n=lZk3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.863ac1b0f.0","@material/rtl":"7.0.0-canary.863ac1b0f.0","@material/base":"7.0.0-canary.863ac1b0f.0","@material/list":"7.0.0-canary.863ac1b0f.0","@material/shape":"7.0.0-canary.863ac1b0f.0","@material/theme":"7.0.0-canary.863ac1b0f.0","@material/ripple":"7.0.0-canary.863ac1b0f.0","@material/animation":"7.0.0-canary.863ac1b0f.0","@material/elevation":"7.0.0-canary.863ac1b0f.0","@material/typography":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.863ac1b0f.0_1590094853331_0.572448225129579","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/drawer","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.d30a214ac.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d41926f6714e2a39b25f6820e5edc2271d2e6f38","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.d30a214ac.0.tgz","fileCount":46,"integrity":"sha512-i1aigcY44ti8dA869ieDZgNJ0ZeE8gA8IHoy2CgKxH0F6l/T99PEn0V1Cjx2zDP3Twbq4oNRE9GfehVr0vZntA==","signatures":[{"sig":"MEQCIEl0zTOAwWkvAUjfH1oBrLnDunYq0ZFzkn4tt6207L0zAiBTnmedXqDVkkc/A/5JJeXA47rLWvpyAjs32fnMBBF+IQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuz5CRA9TVsSAnZWagAAgiYP/1Acnh1EiIejAIdcnJ1a\nAoDY42ug4F58+28WtKLzdKMurdS8lF86J4xfEGAmebq8gY9hfURK8iCiX8+f\nB77NtjmI4j9zy8W/N4ARGy2ff5HXuPjifTAGZaUNbi9fnrhtcb3/Q88/EDY+\n1IqC4H+RKHCttODF8jn+5eg5XM4nML63P6eV++cODhbCDaxkD73IN2oQWl2I\n6Czd5QXvlVwjgkYLSnVsu/S4G3/sVBWrqShjBgjvJyQMcd7y4jMNkHo5zQ+r\nllzx1SZ0jXP/lskbEbMP2aS+za+bPnk0UYKAmhXQY1xkt/tlLPErv3TtYc6D\nGgcA17vFF/nfazVjRlZu0qKBeLQLKR5/nShyDj36OhMUsWJMeyWTy/XT6cUY\nxmpUDsv0qCVFFsfngjWw3Wkrbrn0U9dpQ/5yalSvzUuI10sWEAA4YuJKmf4n\nJd09iud2SciNNDR4vW3fPdWOZ13XTM58ywW7t2UbF9elxiUXRmQeR/Jda9Q8\nH7dFIpVO5ca2M4qXQodMACI+l63TV3q3cqxbqLJgCUpcN5iyowZC4PuuUnby\nw2EwXh3cos5xN6zh85OTpKVPPjY+BzrWgs1JKAIZMKSOpyqeBihMU66Bar9o\nNeti3YRHGZjHpvbt4LLMCibJfYl+ZStTQ1AChA60IUOL5TtZ2KwEOvCjM1wl\nBYcU\r\n=TIdm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d30a214ac.0","@material/rtl":"7.0.0-canary.d30a214ac.0","@material/base":"7.0.0-canary.d30a214ac.0","@material/list":"7.0.0-canary.d30a214ac.0","@material/shape":"7.0.0-canary.d30a214ac.0","@material/theme":"7.0.0-canary.d30a214ac.0","@material/ripple":"7.0.0-canary.d30a214ac.0","@material/animation":"7.0.0-canary.d30a214ac.0","@material/elevation":"7.0.0-canary.d30a214ac.0","@material/typography":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.d30a214ac.0_1590095096888_0.8681664379584975","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/drawer","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.62abbc8d7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7f2969b8852c50d483d03062e506307166ab08c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.62abbc8d7.0.tgz","fileCount":46,"integrity":"sha512-5r2awskKiz69CB2V89CDo1FaWaSJgg1aB5hXffPIPqkABYgeb0SHdXmW+2BOZlPSrg6XRy7QLYS4EBGh6r9Dbw==","signatures":[{"sig":"MEQCICI6ydOnFnPwDVDfq1sT7NyEd8Mfi3RhaXoYqp4Rg+UPAiBeyW04SyHyCHqcPROoU5Oxjk0QhAEm01PL5FcjiqEjuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvLACRA9TVsSAnZWagAAfzEP+wQ4Nxh8xNnqJCvkQSb+\nMMyF74vfPY/AfMbhC2N9lft7McyorCj15JOnqtZibzVKBBO7I8tNgdjhyYTo\nQUxZzoiQC4d2LBeFcExswpUOHGN0SLP3MYGPv1AVkQi9jD7lVZc6/DRo7CcT\na+i+qs4uRJnp2WsPBafK34N6FdY5QY1+FvXJDQfvmfApf5ViTVuVeB5xwCGb\nONcdn5pBbFvf29RrRGP5/BBr0ADoO1MNXxI9rfVQ/6VP37Cfg+Len5Ebs5eO\nOVBFItIzDW148qsZzYUj+D/RAOuVuHPe0UjfcsKPfKYirco/OzZJv6tzx00S\nEedLrwCVd40OwaK2ixiAQkmP3jDB7g5ZcesJ0NLbSalhhShFJsZj5N8uOv2j\nEJgaxbQzkD+cOppqnVaWZIr871JkxP/DkqylSo+QzQplRzEOtzRCmdq6xwbQ\n7HSWGHGqe1/qrOBVjQVWilraczwPfYAFtiWbvUW3TgN0FlmVt1j00bk0bWx2\npYBE+PpIaBCkDuwTtpPeNkRXbB+/EAs/tX/g002yGEUPECg8/uqxNBUo/AI/\nuxAuB/HfvIyvjGLZ3Po3mSYBRlPB5sVCNkOIT1uDu8US9LSUfaI52t6QBxpk\n9B2HzDVJ61LRzdNUyADhbt4twBrqzDouKvirv6zV4mRSQdRgw0s+Z/ULbQ3d\nzVR0\r\n=Z+0y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.62abbc8d7.0","@material/rtl":"7.0.0-canary.62abbc8d7.0","@material/base":"7.0.0-canary.62abbc8d7.0","@material/list":"7.0.0-canary.62abbc8d7.0","@material/shape":"7.0.0-canary.62abbc8d7.0","@material/theme":"7.0.0-canary.62abbc8d7.0","@material/ripple":"7.0.0-canary.62abbc8d7.0","@material/animation":"7.0.0-canary.62abbc8d7.0","@material/elevation":"7.0.0-canary.62abbc8d7.0","@material/typography":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.62abbc8d7.0_1590096576132_0.13510019979221544","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/drawer","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.49bf31d5c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8820b3d1e7ba6ee30b6e13e28fcad23f23a8f5d5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.49bf31d5c.0.tgz","fileCount":46,"integrity":"sha512-3+yQrPThqSZ/t1w/35WKXyCHHLepPInapEG9JwuKyCQdbz6+CfPteppT2BfF9RVUGmvK8SYQd+rULXg3XOrSJA==","signatures":[{"sig":"MEUCIDge7TpMO1f9fPt2mspJ0qkop7uHZJqKLvwRXylt1RXAAiEA5QEmg+FYPqrVSd4JDiK6jAcDg+1IyE03lDBXOPSx1kI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvORCRA9TVsSAnZWagAAy70QAJqhahZVYx2Q/r2sDJNu\ny8PtMFJuAeL/V44Qdl2i0i7XRhIVFa7gS81Kr1tBcKnSgcvlFeusy8ELaAiJ\nR6DD2HI9ZQVyhhWpE1UIJ/0ccRLbb+77pygOxjqKmqRez9epgYVuSbLr1w49\nKtijb09s5P9g8+5r60YbAVbbq7DpAwvbZweogMRXftkJdQWv0/w0DtzmKtHz\nCzBbhhB2yElz9xPWRTz8rCpL7Q/kXzGxSNakLzeMawpBJ4SlEbuXHnw2+BOi\nOFSzAF2AT/fWlJAyM2SgXmcCNeKxefXLrvsvU85lgjLO8mY/O+Dh5mEbLxR1\nbxe+1hQyld7EdqteyI7Pa3Q6lb5eSJ1feRiLLAbJbqrpCEIehDOxramgZsIL\nQdpsNXxRLpHvX3cC6q8GtbN2GZABvHVebU9mJkkVD6Kndtn5Uk52WI3xM8ks\nQUbiyp3b+68Qf07DzLwiRZ6cNWxKa6tz6PFRGcLXxMDhZGXDT3BfrRN1f/GE\nLwLYrFsqrCCQUKRaw3GTjhKLQs2c0DNeui2TsILdUnTN90IKGWff88h0CttI\nrGJAR/RrEVhc8m/2MbtOEG7TdDVNBBiIYuH7A9AZ8l4IADlggjwT7nUorbTW\noHqumwD7aNReJiJbenGMpxTfaBh3uVHjJ9S8jWWBvcZiSdOyA+5m06W2Oxts\nfrYc\r\n=RxYp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.49bf31d5c.0","@material/rtl":"7.0.0-canary.49bf31d5c.0","@material/base":"7.0.0-canary.49bf31d5c.0","@material/list":"7.0.0-canary.49bf31d5c.0","@material/shape":"7.0.0-canary.49bf31d5c.0","@material/theme":"7.0.0-canary.49bf31d5c.0","@material/ripple":"7.0.0-canary.49bf31d5c.0","@material/animation":"7.0.0-canary.49bf31d5c.0","@material/elevation":"7.0.0-canary.49bf31d5c.0","@material/typography":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.49bf31d5c.0_1590096784851_0.053123688506926614","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/drawer","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.8e17857d0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5d8f48b407fc2938a7c98ea64f4c9222ff79608","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.8e17857d0.0.tgz","fileCount":46,"integrity":"sha512-wwElkJthOSvWnBnL1LR/xlT51UILAuYq6nXDybkF68OhnFdmEYOZV5i1NWBcvkfpjBrvH0G/PmXYXQuORQ5xcg==","signatures":[{"sig":"MEUCIQDrI9YEWE8xk4YTqM2/UPtPBCETU7VmJeyUfFxoftRqeQIgcfTyENjzWgX3dx7K79sqqkd0PkhLOdmMNZ/GTncF6DA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvPACRA9TVsSAnZWagAAEb4P/A0Ns15C7RiD9LVDBaZu\nAWnoAatGtoPZa97eKSlV9eCg1wJT/PJrJJPi9i5K9FiGjmgFZLjqDnr/FLWN\nxvq7nF5Uzicp4rOKvbm+IKW8S3Ijh/rrrOzj6/ac82UK4OY0VaGjIFtODjt4\nSGzk0U2O5OHbxIRYLoeT/CmMZjbHb8KvAv76IbVr9axC2Actn1n2b7JeTqiF\n5p3rggFN8dxF/ZV6fSS5ebI31gJewSf2ykj9UEd7ygKP6SlBQ8ytP6/GWgxR\n3YbpGta0VHiWLT1o/QgtBP6urjyBdCTtIKgQOmCx3DibnJ31jAnhkYF+H9fG\n/ANz3wrEDt3/tuM2Yk9eKeGzH5CcHfcFpdhmD6nrYcmhIKqNHkMeuMQJpVlw\nn3nP+hxIwynYGZrcHWCXJyEh9SXUitaxNO0iUf77AYeDkBrhI/7qfUVEnS0b\nfih7wdhn4G3U4rpk6XbBvg6z3T4TJKtAEP8IqAYloFBhWHAI3e+aNkw420nm\nuLn6mRuV5fT8AJGkd1CADcmgCe1tMhxk96ESswBmLZ+pP/l7trDvDhxFahe+\nRMRotBgrjE2VynRD/ZqgMi/vT+RruYNrQbuJbx8kt1Yq0oeY2rGFfvRP/6uU\nOoyh/7H8bz3QIV6rnprANVt052ufBWjX2FX9bkROikt0os8+lyUF+R3iGPgN\nuR1b\r\n=NmJm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8e17857d0.0","@material/rtl":"7.0.0-canary.8e17857d0.0","@material/base":"7.0.0-canary.8e17857d0.0","@material/list":"7.0.0-canary.8e17857d0.0","@material/shape":"7.0.0-canary.8e17857d0.0","@material/theme":"7.0.0-canary.8e17857d0.0","@material/ripple":"7.0.0-canary.8e17857d0.0","@material/animation":"7.0.0-canary.8e17857d0.0","@material/elevation":"7.0.0-canary.8e17857d0.0","@material/typography":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.8e17857d0.0_1590096831559_0.8194013359350674","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/drawer","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.c113fc942.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3aed2d013a0c8e28954456d9073097c5293f3a1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.c113fc942.0.tgz","fileCount":46,"integrity":"sha512-ykEs4ip1xYQHIHShw7JL3acDlvqdVXZwETnF2FghLnWBg+QjsSaR+pWABBaNltSpAinalTpO0JeLqjk8895quw==","signatures":[{"sig":"MEUCIGpDQaaPtEJ9MFpNpnMOdUOFr8k6uiHJiSREyEc9dMXJAiEA+0G7D0P0LsjstFUvTG85snHdN8veZe+OJZGW7Slj16w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwUDCRA9TVsSAnZWagAAlM4P/0IUkLNkWdvGB9dkTY8G\nZSUp2mu1qrGEF7XVBUO/IjN6fVSU7yBr7uha2n26h59RNF8HGjv0JxwRJd/1\nxBbD8brt1vjzFbZPeXbd0nZfBgUqppl6UNrZHXmsBUxqYIviQz1xDcRbqISb\nRMR7DytLNn4LLTYSjZpe3Hm1iW0edFDIbXLWWx25KUajQu6wZmMGa9gEKNCV\n8OOtFYWVIpMTDgIksOPiJ9JICBu20/HuebOcFYD4lIRCp5np/uP9ywZAD8yN\nj/cuhcgOQYSLVXRvxIVgCZtFhRT7YUDEETyjyxl+7n0yNkha/GpEkm/UQCAF\ntjrx+or2DSP9KuLR2jEaAnooXp/n1SvoUOCdrBa3TlRULvj7XbjHUsH3IzSM\nxNuOo0JLazxh+7W8bzod7MdiAUG4DK2dDo1NWP1Ouh29nNZXqBjCmSLvfNr8\nGtX4IC6Q/lu7R80M/D8l4TncW7XjiqC6bbVdMKbnaxVn4qn95aDxtUDYAHjt\nLxNcfmYAExOOlvOknuvz8yf31KJNGe66LeGZlFZx+bXzUYCG1bYOeT78WRKS\nZPdkzD4KpAHCWCve2UtVxMxfOwvFShHyfPzbaNx0j0npjcxzSDDJDtmkmLrZ\nZcXrIWjmYP4MZ6WXEUFckOWWBJRlZ1Gt4bFe8ygKq3JKo5HrxLeNa1wpwwMf\nw9K9\r\n=eTzq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c113fc942.0","@material/rtl":"7.0.0-canary.c113fc942.0","@material/base":"7.0.0-canary.c113fc942.0","@material/list":"7.0.0-canary.c113fc942.0","@material/shape":"7.0.0-canary.c113fc942.0","@material/theme":"7.0.0-canary.c113fc942.0","@material/ripple":"7.0.0-canary.c113fc942.0","@material/animation":"7.0.0-canary.c113fc942.0","@material/elevation":"7.0.0-canary.c113fc942.0","@material/typography":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.c113fc942.0_1590101250584_0.8037136803356326","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/drawer","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.912d9021d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3e563677d1837d84fe65c644c3356d9f8e5c256","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.912d9021d.0.tgz","fileCount":46,"integrity":"sha512-VsK9pwnQhuwAw+ViD5gwM7mgnRN3nOfE40xh6a4ShPRMhCcb/K9jpERjv+A4DXss1nrSwz1r47JHwqKQQQDTDA==","signatures":[{"sig":"MEUCIDVYZm7VoPH/bAgwkHvXxHIg1T5rnhwHpZD5EC9rQ48AAiEArkFwidvaf8EDdWi8ljMqzZTdK3n6ZF54mHa8/MIw/Jo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWP+CRA9TVsSAnZWagAAIOwP/izFgA/RBsO1l+5mZpnf\nU3Y5DTSiaWfku9LLtRe/IqGm5uk/UaU54yOt75FyMoHOC2R4xbjZjgNxbtnz\np8jzJZZoXPMqlE53KyWOk99PdiU5FSGZrIH9LGkJ3rtkmdBRhdmTP/PN71U1\nDdgzYTLhcPtGc44eBkAFtPZ5iBvuWdx2ciaGckjZS4b5uMspQL/jhlitS3GT\nIYoViLanGUjNDxj5I2oHpDGhcMQwF1eE3MSuQ7LwksuV+6kQEl5Fc22h3p2z\n1TJKWRpg5UWWxESj9BIMxrZkpDFsAD8iJWpCNQPm1G33Z/NJldDbYohEo1hR\ng2wq6/z0c44r+T+Wg+FIodFuvaLyzF3sdxZcWaCbpAwpwFMMFVLKhL4Ezwoq\n+IMyivTqpdG1SgRONjO74UZUPCPgorQxVYnBr6lizvR15tZxWdTZp53j/XJv\n97wMB54NqppzyTh2/fdg3h0u/MIXaXxV2QusohU6Yhoxyu/4joQ32ADksjKK\n7374e0HG/At1p9rNT5brmKjNAV3R/1+NRF/1ZjaaQU2acpDaWJE256TLSkAO\ny6QjUAow8ZrR5VY360lezOExl+ggtQM74WwTwaI8UBwDW/EItxhwNJLjFGAM\nkLMXAfC9/TpzQAktjZVzCc9E60KFdBTWZZA4/njzBIAwy7O9lJEQsCgiHuoS\nUaDF\r\n=MGlA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.912d9021d.0","@material/rtl":"7.0.0-canary.912d9021d.0","@material/base":"7.0.0-canary.912d9021d.0","@material/list":"7.0.0-canary.912d9021d.0","@material/shape":"7.0.0-canary.912d9021d.0","@material/theme":"7.0.0-canary.912d9021d.0","@material/ripple":"7.0.0-canary.912d9021d.0","@material/animation":"7.0.0-canary.912d9021d.0","@material/elevation":"7.0.0-canary.912d9021d.0","@material/typography":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.912d9021d.0_1590518781725_0.26464815722800084","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/drawer","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.68a2af131.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6d4436ad1ce7f35ba598123568c23c7da65a925","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.68a2af131.0.tgz","fileCount":46,"integrity":"sha512-zoTXzRn+NHfy9Y3VQdqqedr5GhZOsj7Wnc9Vm4bdP84WWXbzJm/3QtZtGfYI57uCp8dZchGYKX8VVCDpjgjOQw==","signatures":[{"sig":"MEUCIQC17MoIZZgQBvTvB7EFB0PbR+pYzvVCX9+8uoGWhvWyaQIgWNZVikLXL6A3U9GB6tHF1OlksQ0KqL4Q6rpUQRzbc6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWkrCRA9TVsSAnZWagAAYu4P/iSV0+zoCukcEtV4cScD\nbAryYYRLP1y8L/B3g1/pRHvNBC04e9iLyRThls1yHd6cCvUV8YDbvtSwwEzt\nOOj5cM5iPTUiVGhJG9BLi5k7CuIlVzNekCZ65VyN9Vf/1KKCqS1ptu3/tdE6\nIK03K7TooOzQPTg8QGzNlqyUq7vvMMJt8ONl8vztxrevIcmSYvEuKEBzuufs\nKW/qMLocuqmjBkCVhxxv4fvPgP/9R5w92YPFdMtjldCoQWW7ksVVNnwRr+8+\nnpo/m4YZJ4ECZuIUXXghmwDuQOPkW1+kbf0EK8/vuRas4KcACvfmY7QEA5GM\nhzSYetsEGSeRSoFmlHR1p7Ui8OlKZXbn0mW9ciLM7YbTd6LIsblXkVaUvX/T\nhNBDool08XclA0xIaCl9+h9vz/MxBPvMTdDRYaKgW3ENEfMZyyw/uBw61uSU\nOTycz7K4RKYHa0TmVW9aXV1DkzbimJFztzfDrFc/7C95V4Lb27yIv+7uEoDm\nSvSl5fyFMb7OL/mqNSk+FCvUeELTKq2jnFYZgU7+UdqbbgArnk3EIjCd06QW\nGJP2E2h/++0FIyqZF8uKdnyRnNFLJzhxkPnrqRAU8aHWFcnV2R0E9u1x0g7m\n1Vr/LISvE+tGcg7ktF+SowEK5RVQQ6/6drESCwok6BS5GPu9evzlZ0SAYOFd\nEcgx\r\n=8/k8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.68a2af131.0","@material/rtl":"7.0.0-canary.68a2af131.0","@material/base":"7.0.0-canary.68a2af131.0","@material/list":"7.0.0-canary.68a2af131.0","@material/shape":"7.0.0-canary.68a2af131.0","@material/theme":"7.0.0-canary.68a2af131.0","@material/ripple":"7.0.0-canary.68a2af131.0","@material/animation":"7.0.0-canary.68a2af131.0","@material/elevation":"7.0.0-canary.68a2af131.0","@material/typography":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.68a2af131.0_1590520107223_0.4302364028829948","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/drawer","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.01de07011.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ac341b3562473f4ef5062c3628156965b429335","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.01de07011.0.tgz","fileCount":46,"integrity":"sha512-zk9H26JZYEz3A+aQmb4KVBebgRbirUbEizNXEVb7kOSTuqD7w7s0J2o3YmmKA6ftIewCRsArs72LxtcxEosa3A==","signatures":[{"sig":"MEUCIQCy0yU5t/Xb1ZfJXSfdFC9zwV/uiiXoYuGhtkko+DGF0AIgc3TiARYVJKpIPT9KzJ6jr9OSmyP2VkJzbQCssSG1nlw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXO9CRA9TVsSAnZWagAAmrsP/0qFdA1ElCnDpdz6YIIj\nJ+MI9qbWrN0Qz+QxK/SXIpyxztWn/5z6fMPanod/rpSUPXG2A3IRNrY/M8LF\nsYslU/LrHhAkpDxHptU98CBex0A5To1LbkgHrrHfRtNaL4UlT6hjrBq5WLXg\nTkHWOpwbPwMkf77S9oLoItZTKBCgGe6fNL4zSOaHDFQWWNkhbsp0HoimS5mY\n8D61icYw3CNAcCQCEQM9L6AUCGgjh7wra6NHEZNAvf5VR1y/kKBlSZQIzgD2\nhBu+22Sg02It82fe2Gx1uQW+SLmvzjIawTCtsOv0uXJA+9T/b1a0hHqYE/JV\n2jU5VESAIekl+wPCSTxpChEudcd+oj32aso6otIcr/XfhpMxD/9vjETfSRIe\nlf+muohS7ZCQeSCPR5KLsOqLXyCkevY8yhegcJEM/KCjaJ8eSGdbGSzwfxs1\nmFYqZUyOxOSMIoMjuvivyXrsWmVuWtUk0ttE/3zR4xtQGTXJ6uSAQTeYqjid\nX6jDyB/GEQoPZKJRYREUGyR5VHzSr9NXjMyGXO/CWWaw198WvhmvZlDrG7Af\n5P+J01B79gBushSKwaa7yy5Il4fLUtg1q1/CZZacDiQP2R+PZrQCUU+M/m1r\n0zbdgFYg4nB1u5pfy++oqLb6Lzkw/La9Ts3kUXKBENmYEM5hUJV5z9COxiZg\nDVeb\r\n=HA7p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.01de07011.0","@material/rtl":"7.0.0-canary.01de07011.0","@material/base":"7.0.0-canary.01de07011.0","@material/list":"7.0.0-canary.01de07011.0","@material/shape":"7.0.0-canary.01de07011.0","@material/theme":"7.0.0-canary.01de07011.0","@material/ripple":"7.0.0-canary.01de07011.0","@material/animation":"7.0.0-canary.01de07011.0","@material/elevation":"7.0.0-canary.01de07011.0","@material/typography":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.01de07011.0_1590522813370_0.12386718558044296","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/drawer","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.51d4535fe.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1085997baadf721c0d5ca6d6d84e21ac6bdb5eb8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.51d4535fe.0.tgz","fileCount":46,"integrity":"sha512-7bRbhKLt01uFdCpXgd/KLZjIX1f+Qn7+ICW7d2CTg2uzGtuff1QPoQJPHzZgQNa9CADRQ9nVdkPEIqePaGKgIg==","signatures":[{"sig":"MEQCIFtOIW4UnBaCk6fJUPV5qgreyE3HBbhvA1pJ8GIvqmnzAiAxe802NdJdev6Spm6q+MFEb5iooQX+IR0XBmRF0dn8qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYvZCRA9TVsSAnZWagAAoowP/js5nGNfxt2ldLiE1EN4\n26dedzRlC9faA8flQWazACn/Uc3D1go8MuR2brqaHDO2dxR1zve5l0+FgzQ7\nTtCMytR3E6xwBMADQCZr/n091jssFuL9DUkQs+vLpe0/Pbixqj+jkhzM/4HT\ntDhsAzWgdxJo5Lv0wiIGAQyzeZ5qVdoamLH3OWtivAXyiXnHqP7kNJEp1anz\nMJV/MCGgQCjwvIPEWAWkXSfaS61eMnQnqhVWrt6ul0VX+oNi9n6N9yflduPY\nmJLLny4iG48jfq3cxxyvlJk+VMJzQD01SAKWjUiifUdVkQNNJODmaP8ODxk8\ndvrYQlxIWNSP0RmJg1xwsA7OotAwpgsKJsH3j065n0GmAzoJ7f8qQozeKvhY\n18M3npKgGvGFiZksEVG3LMWi877tZStcI3QAPidZvB7W85SQ9iMPx0S756Mw\nTHWx86OMKyFFESekn+0RhuixTLRmlKHEjWN7hbvk0pIK2seM6J9k7f+5bOFL\nVou7SKBWaNP2VaolnNIp0zj5Jw+D9KFh/32t8ZCdQkK7Kvv6L5H0w5kxdPfK\n2EAo57q+jirFrzvSVPVmWkkvHs0OLCMhWruphTj0GRgPKz8x+zf6/7YMhAfV\nLqKmV8XTr/uhVU6APICxrfYmQYV+3CIc0NSxmWUbrXaAOCWQc74rhfc5T7Nu\nTDtK\r\n=n93D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.51d4535fe.0","@material/rtl":"7.0.0-canary.51d4535fe.0","@material/base":"7.0.0-canary.51d4535fe.0","@material/list":"7.0.0-canary.51d4535fe.0","@material/shape":"7.0.0-canary.51d4535fe.0","@material/theme":"7.0.0-canary.51d4535fe.0","@material/ripple":"7.0.0-canary.51d4535fe.0","@material/animation":"7.0.0-canary.51d4535fe.0","@material/elevation":"7.0.0-canary.51d4535fe.0","@material/typography":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.51d4535fe.0_1590528984739_0.5748640231012938","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/drawer","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.b86d826b7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"396ff85a51dd62fda4f5215e99a1fc0bd9bf94e5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.b86d826b7.0.tgz","fileCount":46,"integrity":"sha512-MOakpdlc8RdNb4Y6fC8Mh8HDBvdULPtSk8BQCdboEnPLV2h5Gcg1gXsVdlYNDjgyfPiDJ8wAmnfGljBl27Z1kA==","signatures":[{"sig":"MEUCIQDlU3xmayvvLGKWwjFnNRn59W7fbErygqykBhj3yes6xAIgO5bW3/ww/X95OZdBKhEKxd0JahtU2ivWF2SFdgArbX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZTMCRA9TVsSAnZWagAAyykQAIim5vooTn6vDqfWszh0\nmCbbEiLXzN/u/JXXS95b7RUo0SG8E8lbJlwyH7BuVEJcEaGKTty6n6xU9hrb\nykYFx3SqM4T1taUujlLNODXxcaR4NoJs0Rzz+6D0Q0R/u8AtozCcZTYYtjQZ\nOJPsAUDsIIoUqJbWkVydjd+DIGDwnduJZjzO2dS12XvvSnWjbWidNN/wwLMB\n1SNb2o28RNZtSDGN4kwhSE8D7duY0rpqver3qkR8d3ycYM9OOL2oHZgoj6Me\ny2VoxQ3Lw3MWiNLEwW4SOYTwSU6nNrfTfm+8mLDlXNa5hFM1Bsve2Tk+v3sx\nx6PdAx2psmVbq7dORVt/u4ciuOualiP6UAWJbPa5mAjyahjF+qplXctXSd7H\nyH7y8xekciLok/EjnGHmNN/TO8yQsdJN6sLgoFf5uSZdYbdVTSpeJYZL/maN\nQcyanxAsp/UBvwpqxz34/Qavd5RQPxxwOacJE+8oXzdXxI0EIGHMT4WzdVl9\n7O5mPbx6nlkFQN8mJDBWcKJvtjPgZ4d+0yNpR9d7kTW8EAbeamWls3B9A9gj\n5SfSQl27sEqBoBEpu+6k9QgAyckQS58wUyb4PdzgZ5B1Q8V90gI0koaTlyjD\nj/oSWDpBWAxBgzuAlyO8eN4tTJ4cwiDsFXBq3iQlTyYFuzkx4U3SAu2qUr4k\n0T5K\r\n=5zO/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b86d826b7.0","@material/rtl":"7.0.0-canary.b86d826b7.0","@material/base":"7.0.0-canary.b86d826b7.0","@material/list":"7.0.0-canary.b86d826b7.0","@material/shape":"7.0.0-canary.b86d826b7.0","@material/theme":"7.0.0-canary.b86d826b7.0","@material/ripple":"7.0.0-canary.b86d826b7.0","@material/animation":"7.0.0-canary.b86d826b7.0","@material/elevation":"7.0.0-canary.b86d826b7.0","@material/typography":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.b86d826b7.0_1590531276326_0.9265887891057714","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/drawer","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.d91794c7e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e96d57febfb778379730430202bf1a519712f7a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.d91794c7e.0.tgz","fileCount":46,"integrity":"sha512-Ly8jczjfcTamFhcgsCAQ+XO6GgwOTCNallV0wB5SLcrDIO8bwzReniyVY3l1QyxRHl7ThmdlDaaEYi6XuyFhNw==","signatures":[{"sig":"MEUCIA61706ko0SLl+jyTr5rND1hgtSYqAlzvV6XIJre3+KpAiEAvLIXMFKMdAolGVIPEEmFIEuVHwEwsKp2JuWBj7bqlz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezayACRA9TVsSAnZWagAAGWkP/1rCV9YtsIMl1UecvKsA\nxxM6OnC+qA1OOKeTrNeiy1P11B5hIkbHjnBINmrdviUqHLfMK/ZnK4jtrlIH\nBH/935ovNyQcXNPnH19xgHAtfqb7KOx5ZHPviCe0tPO9CNJkp6uAwbZogU7B\nfyjK7sVRD2EoJVjAFua4rqnu9MLzKJ9yXN70+KryIvm8Mwa0VUR1arLAgl3J\nX5sxCeVSpflt6hIoAgKgnauT871AZo6F1KIZDn089tuZR8cwFR8LY/Sje4ho\nGh9pYJyv0xDwAbqsUHZMmugHog6fQk4Lc02n87BmIuWbqfnFNSU3XccvjlmF\n5SGG8EYtU3rgo5ng4XBua4ljkYiQEqxbv28H3ox1zpUYs6oGZ8O+S5BdfU7F\nDNevuY+lSnzhHnCEANDkfA4ME/bId8HODu1TcCUUdjfSkQGtsnVzLD2juvHi\nxPSs8NQjmJo6IxO6jjKOm8e6SDajaU5L0mzWVbTf6qWh/xt1zJet+JjFi6Aj\na+9f1q//xMBJutK0cCXkyT1a/K3CSt8oGCU8nyHm//RGbW03D+osWPNSVeF4\n5pd84T6RXPTpxEnomJzE71ZCJJZZbiuZxdlXCAfBf3TlRiXQ+ISjG7juZsjY\nl5vQQIlV12jdaczxAVLt52Gn67rX3OrbY2O+zSGawgryTDHVvm0GBe28NhxT\nn8Kn\r\n=5l61\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d91794c7e.0","@material/rtl":"7.0.0-canary.d91794c7e.0","@material/base":"7.0.0-canary.d91794c7e.0","@material/list":"7.0.0-canary.d91794c7e.0","@material/shape":"7.0.0-canary.d91794c7e.0","@material/theme":"7.0.0-canary.d91794c7e.0","@material/ripple":"7.0.0-canary.d91794c7e.0","@material/animation":"7.0.0-canary.d91794c7e.0","@material/elevation":"7.0.0-canary.d91794c7e.0","@material/typography":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.d91794c7e.0_1590537344426_0.015437942503568447","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/drawer","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.8c6d7e076.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"728cbd57675b02794f9920b15317fe9e97d8ef70","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.8c6d7e076.0.tgz","fileCount":46,"integrity":"sha512-qrpdBMm7/iPCWTGpIL+GF9zfYb5NbauKDEUCKhp9R7nKTkXXjRZqgKgBjhLBjv2h+wwBDBf7kHdUSS9tfwyPyg==","signatures":[{"sig":"MEUCIBu2vlVBu24ak8t2IICpJPll4Ambq9OtPsdaQ3pqV1hBAiEApzFQDnowsgcMLbdwSi8GicNyepQha0zdgntpAnj3sVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":549190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrjgCRA9TVsSAnZWagAAdHAP/0Bs2lJln0qJqp07QGzj\n1tpXEB7DwC+UH7VZohHHZRv8M6JfHrgFSmiEG8IZOteuyay7bEGKOYdKvGGg\nufZYB1VuUhP32GCowajm6U6mOCpYPnSY39HEOnNhQNP+tuYK5MAdjvzfR8tl\nFQWbWd1TnOz+OnnQtCEhWpKLyDPOmEif/PXIeQk8MvhoDgVRfjLoqjBpyck+\n0LkWtsmwOuzW8FyyxEpfOzuJecZPNUnS6daH021y03PXdtygYRI1mINz2+9m\ntlgHYKT1XttYI2L8R+/tQ7JYIM8zOhS/6SRJY7RM4Q9beP88OPpOFT2zotuH\nksVpfH7Mx/idhFovmcLZa4bm6vcoB6oibihcf05MgwtlhvZYIXPbkxIuablH\nCGD2bZP88mX+1IXYPoRtuqE6wInDVn7+4uRXRr/RvqjVJG30sHYGNt2cvcmm\nJBzZQemsw+viGQkLcNgirhdwJWbNR8nQ3s4EcdN13/glOe+5Gx9NTrDkC4ri\nIK9avrxwUOmGmyfvmw/NeHYj9A3ZnSJsG0opxoh0NkqO1kH8c76AoJNSHLOp\nQBSzYBJG4g08tTiN5FU4n/UOsIDl3MjzSpINm12QQEFBeHZ9walDfN6HrMq8\n3fhrRzEL1d8Qu5g79icsh5TjLijXjUu4088JnGU3xgMpPlY2xcQLQ57Hd0+R\nk0l0\r\n=67sw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8c6d7e076.0","@material/rtl":"7.0.0-canary.8c6d7e076.0","@material/base":"7.0.0-canary.8c6d7e076.0","@material/list":"7.0.0-canary.8c6d7e076.0","@material/shape":"7.0.0-canary.8c6d7e076.0","@material/theme":"7.0.0-canary.8c6d7e076.0","@material/ripple":"7.0.0-canary.8c6d7e076.0","@material/animation":"7.0.0-canary.8c6d7e076.0","@material/elevation":"7.0.0-canary.8c6d7e076.0","@material/typography":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.8c6d7e076.0_1590606047780_0.4805647964111992","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/drawer","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.5b5f62f93.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a1ebbc22dc87bef60b1769dc9b17c5c9f297806","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.5b5f62f93.0.tgz","fileCount":46,"integrity":"sha512-zdRuyxNu7ffkNb5wxu8RucNlvRYwzjwz2y15brGG7DZIwJjIX5bqjJfgC/kVvYCwB0DsqTMowuAy2qMKPpM22A==","signatures":[{"sig":"MEUCIC4+OPj1ZgEP8fWzi7ECdjHqFdre8YbM5mqqDLvQ9o/CAiEAjDRqXQWfi7eYvOjfRCA+EBJZRIp3NzQxSJSBSrepm9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrzLCRA9TVsSAnZWagAAGe4QAJlL4mwDTMRtHVxcgaKP\nQnvkDsjpnv7e/tqtD4D6NBRLAMOx0ZiY3dmZSdsdM3Gix4ZQ8stqbOBw380y\neEEl0A+m6QlaMrEo6aA4Th54RBVV++ENKqfNw9/Own8mm/1QXXAApQ6oQQn6\nws1CghCyOm0V4OLP8ks/kOyHcQNEd01I0d3iNWa14KXgersORDGSNWt4Wla8\nhzqLmXEcipZ+NZNSR4NwqC0dsbWk8Bquqth/1ANisZjtpRnC/uQFbaeiu+Rv\nibB0QQ+9IBvxjbNQRi0prJKYAS7kNbNJqlqAkDqMyqVHQKoczSO0wngZddm6\nouEQnquMuztamqirp8NNAlHD8wUcBXjR40zlhD4byehrn0xrQyz2MmTyvSeA\ngDYHSowl3yodgtyaP9kE1BBgUwyoPdiuJ3MFZQi+RIUfHfJYssWR7XQNMfw4\nont6PDIL4aTY6QSnuMasvRs51U0SIOs/Qj9O+RP89bD4S+sqs2unWV7Ttrpu\ndpCvHYrYDbDsaFuoaP8opBqFXUkRfFD87NGeinetT4VboHEX7r8Ch/LvHw0T\n1b+VG6UWmkAqIu+uFggqpl1yMkRkBv4usOe7/QOfsTKdL8Z+tJJ8JBw6tlXi\nxfY1/SnFP/3DgZAjTY0NxgjrEqSWD2QyaTbXCZEe0pkPdL6/TBiYQsDHFpkR\nQzpG\r\n=2SKP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.5b5f62f93.0","@material/rtl":"7.0.0-canary.5b5f62f93.0","@material/base":"7.0.0-canary.5b5f62f93.0","@material/list":"7.0.0-canary.5b5f62f93.0","@material/shape":"7.0.0-canary.5b5f62f93.0","@material/theme":"7.0.0-canary.5b5f62f93.0","@material/ripple":"7.0.0-canary.5b5f62f93.0","@material/animation":"7.0.0-canary.5b5f62f93.0","@material/elevation":"7.0.0-canary.5b5f62f93.0","@material/typography":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.5b5f62f93.0_1590607051340_0.4165287942246254","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/drawer","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.d9972abb1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c481251c5d22fbf30b1c54321c7ce94d5368d6ab","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.d9972abb1.0.tgz","fileCount":46,"integrity":"sha512-oYZjtOubvjpBGRhQeEJaTyt+vp+vg4z6/lWSXr0utZRnVg4PP0Wfm99MysIZdB/haBTfktyGi37QWH3ZJzKRPQ==","signatures":[{"sig":"MEUCIEIC0DBWvkInkdo6HePL7puH6Q80BO3Qj5KtkpU6bKWCAiEAlOYDMguTs++aoePLbz9f1ZXvdTbpMnSX4F8OfhSYgZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsvZCRA9TVsSAnZWagAAZSgQAI6ixXunnXlM4WnXvtPw\nVXK8aZY9XtUNf5yf9gy9HP0LlpKyhFz6OIo8504FOf0hjzrL/qpgDFuEQoU8\nIyrDqLpKZ8olDWHF147qUjSDD0FXfDQrK6spAhPQ26WK/nLYrD24uuDc2VHI\nT/sNbXMHp/ioysuRpynqMPTVbOct9Qn9HWH0SAHaUFTnK/n5yfxgBhUJTy47\n8sCGIivTjg24z4Z8B95ye+LkiIZc26cCaN5RKR0GhYueA+aUkTEbfTgikITz\nylaLf9GV3cw1CUv1nCtQoToywedEOpPzyRRWtrOJ6Y+RgaryHc6r9vLIRyNb\n2RcuV9Ji/6qfjrNFR9jbn49OtxICgB7XfS6xn0rqN8E24m9AGtU+46eLrgjK\nyrXpK1XNyG3cdZX0u4X6Y5rtH2cnsr9vRbbzp0ScB08+UsxdIxkC+hlyoyoJ\nt/O0CXl175iV8iIrvHJxzC1JqXnDNT/M1D1WRyHS8W9s3ZFey+qLT5BEWBWN\n14W+wpXM9JsbUfyBQMbpQBRclXsAJAsnr+4JOc6oRdxEdhDnSl3bEmes/9bh\nw/G+0+R3k+kGy6ALpNZb0lGxHphPfHOcGLlPgw7i70c3wTmF7INnkHNv7WJ5\ntqexd1kIO6inZjGet906iSFbd0mjC7ytBRL79RwQ3EU1yxdv7kfOoeoqHr8V\niw9d\r\n=Mm7Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d9972abb1.0","@material/rtl":"7.0.0-canary.d9972abb1.0","@material/base":"7.0.0-canary.d9972abb1.0","@material/list":"7.0.0-canary.d9972abb1.0","@material/shape":"7.0.0-canary.d9972abb1.0","@material/theme":"7.0.0-canary.d9972abb1.0","@material/ripple":"7.0.0-canary.d9972abb1.0","@material/animation":"7.0.0-canary.d9972abb1.0","@material/elevation":"7.0.0-canary.d9972abb1.0","@material/typography":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.d9972abb1.0_1590610904740_0.4911821108051402","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/drawer","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.6556eda2b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2fc3e6e3cb247b68d45a24ff6f1fb9f1e94cb4f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.6556eda2b.0.tgz","fileCount":46,"integrity":"sha512-lqc5nOx3BpoN9SfF3CTpXMKpYH6+9n8e5b9fWoO6kv9TK+fBurLNVHl7/RWQmdCbksV6mjj9cc0OB1DCIOeAPA==","signatures":[{"sig":"MEYCIQCnOHcAA18JNY6tSOjawwbYYmqSGpEs03NS/3SCIqR1TwIhAIaA2Cv148WCTRPK5eNgsmC0/I6qL846OLK3sAFNj4Bu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs4FCRA9TVsSAnZWagAAuckQAJkj7NPuXpIjCBywjaGd\nHYqdPqkIisQ0eqPFO8X0IzuyJEKwcF+4HrOkG35x1FxM3H/yz9PLFjWhQme2\n1HJbbly7Nq8+bZD1zVLC1r5BS3Lb93pOewyhjuQzm4eslBGXylpJwcfAbfey\n8nlf7ieGOu7OOjRuC52OnyrOU6RCKPQMS9YpB5qQt1hG1bn7qJiATY5RUxYd\nJD+DyodRTQmVTxYDmxXycZ+Jm8twFkiT2ea1Mk/N0BihT2vEv5QDxfHXaJ6v\nodXIzFVRDTjb1K3foGllnNfqU0cmkMEyzLa4xR/MzSnQdHTRgDPJ2Zo5miV7\nxmPHtS6sPWzyx62vkDKgDklcJ5EZ52VCp4k+UzU00ZHUCCM3KaffJCeuK+C7\nXEqbrmrPtcdAgJAdzvbBExVZhI2ScYi1O1JnFg4KJfSBhf4Ojj0LueTVtXVl\ns0qNkOmVrbJlZ5lM0xnrShDnyPL+4z3paXtvhFU5QTEczVpNkS9Z3b9CB/Bo\nAsyJJ1HnU6y+vcYdTyqNCd8GS6D7VyLiddjzCqWbybDUH0GNWek8oa0mjYeQ\n5UftFCbDYdc6rdhc4iP7kYbtwgn3XWBF8YxJoO5QIGp4BKmtM3S4WP+lCz8W\n1P9ugg7KR84G/x7AMP10fOgSRs92DE4AIC0wbQCqxYVNafwUfQde+3qTF2a6\nPAPd\r\n=4nbH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6556eda2b.0","@material/rtl":"7.0.0-canary.6556eda2b.0","@material/base":"7.0.0-canary.6556eda2b.0","@material/list":"7.0.0-canary.6556eda2b.0","@material/shape":"7.0.0-canary.6556eda2b.0","@material/theme":"7.0.0-canary.6556eda2b.0","@material/ripple":"7.0.0-canary.6556eda2b.0","@material/animation":"7.0.0-canary.6556eda2b.0","@material/elevation":"7.0.0-canary.6556eda2b.0","@material/typography":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.6556eda2b.0_1590611460585_0.0031773045675809186","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/drawer","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.32aa23641.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fa07198bf624f6e50e5684698a5bd2702bd5519","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.32aa23641.0.tgz","fileCount":46,"integrity":"sha512-LnC5lbiug9pjC4j8E/yZrd8sX5YGLlOinGPPCssX3hsf6wZlW4xDU+gS/+Ph/8RtHiNeT5/JrK0bpJORgSQ80Q==","signatures":[{"sig":"MEQCIBnYoJjaTw+ohekhR2LJByJHMF6BMAZE1jFEeYc5t/1CAiAln9IblYxmUCEtuyZb3TA7/bAq7t4hyimfqXjUu2Bv/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt4HCRA9TVsSAnZWagAARzMQAI26/gbF1mClJKOaZtSK\nU7uX1pJVvG0JXBwnbDPY/ErwpMytMFMq9bCV6OsdXjbe+E2LqyMTtr9fssuK\ndu8UNcx0qJ0U8JRGkGLpWqqwL7YoWw0dEzJYCa0JMOe1R+auJYUpumg6zU5N\n4xqOIsomOhygv/ktKJcns2g9ocJC+TNgLz8Kg+T5vzOuQ3Jz6gtQoJfAnQRz\n64wv2HHjuay4h+fffXvNY/FBds4TUZ9rFjXfXP4UsEdesOiUBJ9B5am/BVsy\nPKr0FV31xT2A02nOn+lFxwTm4OrhRprZjAuQTHgxmW7cR+i0UuJmuIJrOA9o\nAI9goK02KSL9r6FmiATH0BlphwB74S/4AaSDqyunAXHFqGb+PiBwswjx5KBr\nR9tZoeLSM0p5NWjIKg5d32O/3RYCzJbuVe/pnjJ4O1ySvvWfKR0KFL6n6ZY+\n6ofAhsM12LM/qxPIOtSKWN7qpPhP8wC7T3U5HoPEL1dl86bCbJt/KRrz6HZS\nqWGmaPQraVF/5owNPIMApwHEF4AeCTDRWmZt7seo1yj/wWwfFPPZHq8Z3hxJ\n7QYWNfHMOPLq3MNNW4pLRuRTe7zQthxGT3AcaqdxJuHAPt3KPaCpszyQb3Mn\n03RTVM1DzHrGRQW4jxJx0PGFnp7+iGfAu1VPUL7uL2zf8C5YBdVP5q2NbTdo\n6v73\r\n=JoCZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.32aa23641.0","@material/rtl":"7.0.0-canary.32aa23641.0","@material/base":"7.0.0-canary.32aa23641.0","@material/list":"7.0.0-canary.32aa23641.0","@material/shape":"7.0.0-canary.32aa23641.0","@material/theme":"7.0.0-canary.32aa23641.0","@material/ripple":"7.0.0-canary.32aa23641.0","@material/animation":"7.0.0-canary.32aa23641.0","@material/elevation":"7.0.0-canary.32aa23641.0","@material/typography":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.32aa23641.0_1590615558871_0.32955867068786193","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/drawer","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.654934dfa.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a7af2f7fc8050a8acfb2d9e2a0b5f2307cdd3f5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.654934dfa.0.tgz","fileCount":46,"integrity":"sha512-XjQBBX+VMMjOgh/pTEFNC4/ZMC17hiGZ+CiKsJegCZY9/ROaezodQs/Ionplt0VhEP5O79PZ0wR+dGQB8pTavA==","signatures":[{"sig":"MEQCIHJYaISQwtQ4cugMFBxgqhvX8PXsdNcFkPO5hpLrM1LxAiAaeDYSGY9C62Pb408njNa932BS+xVYFYPtthkNITeiGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwfnCRA9TVsSAnZWagAA7uQP/3SK6QrGb2Uw+29OOVkC\nKtqFpUmWz1GVtheQb6irdeFNv83LTiM/1ss9JBtGn15ugoGssQ/teoiYeSJ+\nsAHpMpl3djig0N+4O+gLypCGHaoaJYXtl7UBvX1Fr5e4xjJqAbLyL0+8jsyw\nd48ObH0R8F7Ak6bGeksjdIHWt60t2rdlkCEfQ04T981untsJFs+ztrGKOTVS\nCPDfVvDTD5DkR/60Shp4soEpZ+9ZmcpN3aewplTZR8j7y2WTfPE8fd0XVz1+\nEpIede9uQguRh/nEzYAAKsg6lG6UvJuNBDlKEBJB+fJOho+F7vT71ANDWQnV\nHwGGszxau7RpL9bz6n8prTXzMpnm3ZUYu9DA5xLU07hb7dBkJrqlQ8PTYgxk\nz0gSDiY/4FVb9IeeJhPQ6FKLbxVm8yhTd+a6byKU9lZd2ZVG9JuWOMgukmqE\nwXE+hOH9TfORESzgu0LQ8RJtzT0H1mRrgC9YI/quXHU9i6djqQUbvtzSZe60\nckQD0A9Pb712AKTl36niPRrzuqFJIZqYlvVuWn2xrZuwr271qz+c0FDslzhg\nai0KYcPvHMMgdC34TWBYbDmrVFVgf5O3tjVY8zK674iLczcuo8JtUD0bXQZ3\ngrPBXS1MozPtxayS4BPC6Sr+bCQx5ck1hixNzWB1Kcr5SHxEwjXXJX5T9toK\nhpWg\r\n=V4ya\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.654934dfa.0","@material/rtl":"7.0.0-canary.654934dfa.0","@material/base":"7.0.0-canary.654934dfa.0","@material/list":"7.0.0-canary.654934dfa.0","@material/shape":"7.0.0-canary.654934dfa.0","@material/theme":"7.0.0-canary.654934dfa.0","@material/ripple":"7.0.0-canary.654934dfa.0","@material/animation":"7.0.0-canary.654934dfa.0","@material/elevation":"7.0.0-canary.654934dfa.0","@material/typography":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.654934dfa.0_1590626279482_0.4004988925859625","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/drawer","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.41910b8b8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5c564073df0714b51e5515b3e352e44301ea7df","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.41910b8b8.0.tgz","fileCount":46,"integrity":"sha512-qaW5ipQv/8U4q79D477Nz7F6vZ0KRr+kdkNQ4DGsdFKCKPpviK9tUsFJSbbOs3jq455htPRhVNX6r+mHEpWoOg==","signatures":[{"sig":"MEUCIQDnW4J1Drn+NfGQtOMAEYT6iWCkZdi4HuJqkqwE3bDaiQIgJis++BrRFegq5/AbjfYAcsCeWTi8wswiRb14z84vY5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezws3CRA9TVsSAnZWagAAW/YP/RSg/lzpOps1eHssiEz+\n4ZqAJevowXyWSfX6YgbG3Qz7HUEMduW1L+IS4lj/hN+HaQAmCKGxnAYEaFDu\nBg8nw3IYA9A+Oze4T1ISYSM4SiQ0NTy/bSBvpmZKl40wuR9IHXbecMqsJCcL\neO9wxUL8cuFhaSzFOsdvNj3eoK2C5DFciLhaLe96PGhJrJ/vTgLBwbbdBG95\nx5ApAVU42hDOI70BQY2jJ1h8idXiXEkCvYS9oNyzs/cB8KZmVHrcJxKtooqe\nFdaPB7ztUxeFc8P6BBnTtz0vsavF9ELJqfB08OdnxbhHQCk0FwGFiwP8xTvE\nwbtENq/G40EUAKU8Wn2qnMxWQok5v3cIjD04xOVTc1Em2NQrIGPRTEuqrUGh\nf1iHGW0hAV9Bt9H0wNIUWgvoqbKkwavpLlfGtFd2H+J8V0U6EYTWa2BobsUY\na/QSBQg+QVKMtdK/Z36oO8gTJzrk0IDNhFvzGzZLJTddjstwSDilw5nsnTqX\n4CREW+JSTU2txNz0m417+Ulws41oCDMtWrDfeUfyHih4dc0UssImC60EpC7Y\nUXzDzP+xvvhfqZW2xMMjKwOcc2tUsNhE5jzLKxDZjvv00/eHoLiqamDWhvaz\neoxBxSqxQBMFJHw+ep2v6ezmYFxEUkTGiuSK48BNY+eAX4J2Qr+OkM6oFcx0\nyDwm\r\n=YB1g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.41910b8b8.0","@material/rtl":"7.0.0-canary.41910b8b8.0","@material/base":"7.0.0-canary.41910b8b8.0","@material/list":"7.0.0-canary.41910b8b8.0","@material/shape":"7.0.0-canary.41910b8b8.0","@material/theme":"7.0.0-canary.41910b8b8.0","@material/ripple":"7.0.0-canary.41910b8b8.0","@material/animation":"7.0.0-canary.41910b8b8.0","@material/elevation":"7.0.0-canary.41910b8b8.0","@material/typography":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.41910b8b8.0_1590627127176_0.1441684109827246","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/drawer","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.d66d22bf9.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"565a0a04bec751a4113af002a813d820fe3aa737","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.d66d22bf9.0.tgz","fileCount":46,"integrity":"sha512-GC6YTPvU7yEPyPFlLxrMscMG1Kc6riBwZdYRpb6UpSvf1Hfl2/WSIqtuqNxaqezcMCZicknQ6qUq+/NlEZxyiA==","signatures":[{"sig":"MEQCIHf+VfffKtaejCGXeCe+nuhCEK4gYGoAnrAoFez2xw4TAiBJ2Iorc/pOO1Awx6m7ehyrV+L8EhdADVnEcT/5PIeT/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BdiCRA9TVsSAnZWagAAIfIP/3IeF6eBK/UodW//AV/D\n2muPFeCK5khFA/4rFwzW+GRAox5D0+7HKHLg03iATBTYmgHQ0exBhcFJRGS0\nd8ArMUvW9DpCn93bqo4o0kSC66J+3piKoyNqLbIOua8L0yYklAbbGmXN6qEj\nONk6vD6X1M1gM3U6IGXccY+9rt4drmJB0rFvL1j5AeDMhtAJJ8p94M+VcVbE\nNCZgnBqG25hCI8MYldzDZFArLecIhR5BIosEEmTea8zsz0XDpSy5CAOM2310\nBdrVymPpDOb2jKtRe/2iK2+QCO2OJdVvoDrx0Lpzk98lfhOdlh5h5gl4VNHE\n0UxiUtY82GmCltsriOjRm2QBsF8pEsKAA+y6WmGxTZMx7/XDPmaQdzzKljbp\nS+9J/n4XGn6CqquPtDqWERa0orNx8ob2SywAh75WqihVgU0Mp7E8+k90mvr8\ng6a8+at7iYQVzXZFoz6nWl0i2jPcWKzp6KxFELK04ccWuICqxi9ce5wOI+tP\nauVuMLvwXeRplQjeIVT/bZPGmi4m+J+EN/RnyaAT9zT7c8j6x1oOSnNwGlkZ\nMkeBZTOtuVaibPhG2iaDg9u8FVjQoOFdbB1S8kvX48jqABWwntsEu7hIolFG\nNPZDDagPrq8YeKKJyXHaEfjmxw3WauFm8fgMuPHOI9aIiP6lM3NhDV+Mj37+\nvJQs\r\n=xP7B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d66d22bf9.0","@material/rtl":"7.0.0-canary.d66d22bf9.0","@material/base":"7.0.0-canary.d66d22bf9.0","@material/list":"7.0.0-canary.d66d22bf9.0","@material/shape":"7.0.0-canary.d66d22bf9.0","@material/theme":"7.0.0-canary.d66d22bf9.0","@material/ripple":"7.0.0-canary.d66d22bf9.0","@material/animation":"7.0.0-canary.d66d22bf9.0","@material/elevation":"7.0.0-canary.d66d22bf9.0","@material/typography":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.d66d22bf9.0_1590695778160_0.6182331008342632","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/drawer","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.8904f3cbe.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"419ecb940db16d8a33348c5cb8ae6fdd84f996d5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.8904f3cbe.0.tgz","fileCount":46,"integrity":"sha512-mR+WIw64n3ZA+6Cd5VW0MA9iONork5CwSkwEs+YTpRLXXcTystKrjaHvyi/QYReAyw9mGVSp0OfVO+N2spk2eA==","signatures":[{"sig":"MEUCICifHp7Y0Y33QLp9GsSLXyyrc9FoZLKiI1q+FiLaIJwYAiEAxFX88qX/ktmMhpDUF6XTNWW5eyTkzVRvxK+hEBgFE/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T2ECRA9TVsSAnZWagAAmTUP+gLnmaSekSKvkFdESATl\n0ppLxdpBZWTWUv7/HbLHivbOah6oTqIxDnnWi4/tJVRToJkVDiuAEtsMLeSh\ncEjT2Awl2BYClY0v+KUKhhRJ9wg/4LxngNspM6wbb/NDKAzw5XrpPJcZZz5U\nEnB4Eyn92GJzGEV/o7oxxIcbW2s4fADX2F0HNs8IZpADBhpfkQ+lmRhfdkhv\nfIL6/3SdYFlkVlDMf4fofgtcLN4FLHAOzhRbj6FNhAjmtUrm/sbYdj7A7tlN\ngzC6A9n1n8SPMJ1POAJtXgtLkp3OpA3ZYJQdGDjBC3nN2FvYUHhYJe71EYU0\n0tuSzppqs3md3xiO7GQfB9GYdbK43XAqJq8frEWV2hZOREnmU8xv5XtLs+6C\npvDvJxfOX8RVE02A8df3WEgtQVsr20AMp7CuFUnQJRHK0URNXePzSPL5FUZo\nqamP5t2wt3tIynCmZ3IUhao4GVOZXxwL7XcsOGCEngf29BRQUOzK5qFuW84e\nsPypoVRthk3XeMGS5ln7egmWvjgsHSgdGOII0hl7jHixw7X/Iz+wz0yy/GtQ\nBxIEWkf6blGLvkKVGupnTb5xfnr9qV2OJxDhenzLj1YYF7Kxw2MBuaGBYs9+\n3TsXP5Tsx5arF4ysDQbp8xeLPjFHh1GJdp17Ml/guEPnG7bUZkwJlotpqIc0\nFhO/\r\n=ibJ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8904f3cbe.0","@material/rtl":"7.0.0-canary.8904f3cbe.0","@material/base":"7.0.0-canary.8904f3cbe.0","@material/list":"7.0.0-canary.8904f3cbe.0","@material/shape":"7.0.0-canary.8904f3cbe.0","@material/theme":"7.0.0-canary.8904f3cbe.0","@material/ripple":"7.0.0-canary.8904f3cbe.0","@material/animation":"7.0.0-canary.8904f3cbe.0","@material/elevation":"7.0.0-canary.8904f3cbe.0","@material/typography":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.8904f3cbe.0_1590771075905_0.15768111052024447","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/drawer","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.51512a4ac.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"868070a83f0f0093b3e22403c286d0ee109a9940","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.51512a4ac.0.tgz","fileCount":46,"integrity":"sha512-1We6xkhqRn7xVRMoe8/SY3Vh4gsoanD6i5C1996HPchwpjM2L6FhF9DukE+MQjrOTXl5Mp2rVB6qqGDPzW6Bfw==","signatures":[{"sig":"MEUCIQDVHVyakjJP54lMH2OQPnEYb5yDBijQHXPpE7GninLZuQIgVs41afML30ObnWOhZC1afuSW6f5LBCogyCcj62LsMHo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":566516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V95CRA9TVsSAnZWagAARoYQAIoSN/tpW7kLTH1Epy25\n27e5F4qfZxrb2kXHLjQrwP5jVPd6cFBcpjDezurPKEa/cjbW1qYX/BAmYlm4\nLmFpzK4RfXwgVCX482PdhjUwukP1z9QFOr5rOYGkYgg9u1of5wKoSMFAOrfy\nJZsxXy7aZjOAKDTFUG9xy6tRb7LpexhnnwxmOqkZjPCa1pelEgWpEO3yV26B\nw3IrK0ai7stT6S0qegKcBAs6kEf/UyoUY2ldGZTqgrJrwuQPjSErLXAZICdm\nr3N2t5ijjzc7DWcMvA2IPY0ucd6gtSPdI5lqsNW0W3GheiIEotiRh0psng44\nYbHX+05rJzcrlx+/6CseJrTb2RrvdmQVdZqdvssNt/MFUVqqzz+XIPRcIm3s\nkEXVhgGEtopGSEAEYup24RGaCBJ6tujldiYvAnlahTZO+DZ0Wja0PK7Th71L\naPS3n8H1TEP2MgtzYa4gYtOfHY+flRpc7kZiy9HRRDTVM0Pdlh3hvQrqKwhs\neSohNEeBjzr9TdIHGF+b/yVe2q9jwuCjLOF9BaUPoP/DEn9YJEc7J8VcANR+\nqgsM9Kfhf2tUTtCFQhyir+fDNp+3OgorsMcK4JVxsV9MwA5PCBOnEurR3oTO\nistN1LYgQPvouhamgCrkOrjDcoP026pXW02ua76X7z8Yrg8PtzmUIfOLv+Lp\nnD3K\r\n=2FsQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.51512a4ac.0","@material/rtl":"7.0.0-canary.51512a4ac.0","@material/base":"7.0.0-canary.51512a4ac.0","@material/list":"7.0.0-canary.51512a4ac.0","@material/shape":"7.0.0-canary.51512a4ac.0","@material/theme":"7.0.0-canary.51512a4ac.0","@material/ripple":"7.0.0-canary.51512a4ac.0","@material/animation":"7.0.0-canary.51512a4ac.0","@material/elevation":"7.0.0-canary.51512a4ac.0","@material/typography":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.51512a4ac.0_1590779769201_0.8690225391692825","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/drawer","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.0743288fb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"914411cc13a53aaabf197729d72d63d7d537f2ec","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.0743288fb.0.tgz","fileCount":46,"integrity":"sha512-29ezQASw4WuvuquRfm1ReSvcEXWv34soaRbTK3Q8sWNi74CeuQlh7giUTNaKOPa6kkkYQLwJwTQb7qGaO9uJgw==","signatures":[{"sig":"MEUCIQDmFR8UFmKQVIxbr6eC+fxosO/sxao0Rk0hXRrZpljlNgIgWTPSZr+Sen2jipdtQb+n9zHrYj/50oFhu3OodMvjR48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":564351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WsoCRA9TVsSAnZWagAAOLcP+wUvZxwaik/UW0/wqYk3\nwTLY9IQBefEx9x6q8Y4IDSSz5FkKd6Tj7+3QXuwJ/ut7rIG3VbduS7TdhHhk\n+feBRZeQRL7GxHy0vxg74bsANbp/Id1lLtxqFT+8XpSYpEw9F/2qJPuGfvoi\n7z72tRnMSB0EB61m42LsUb//O/N8hiLci3/tLrZxQnN2CD+zEX6+znRg8aVP\neKsmJTwT7+8h4s8pvUHZrdiGq029MVgppfqTt7KdGIEw5+o/AnL68s77TChX\nGrXxueic86v4vE0SZI6eV2Lcrp5jasuP4NPVBH1etpEMS2s0c14LlgkKhDhp\n9fS3pr2Rb5UdpfMzplto+BCWdW7nuNgllgHLPukL0sFQRwZRNKk2XmYxXI51\n0AERxkwCciRmkvpM7sTBY+muvI0pUp3t8Xk1S+6wUwjtO3Q0rI4TuRtPxmYs\ncKP9H7hFe5NRcNviNaHtiq98HKKNSIiXxT/Jd2Esb92GyljW+vStyZOJc9tu\nOPvTfIyR8ThqretwUTJ1XFL1MdrWOwrGxi77s3YdjIdv47mKgaSHc9O072l8\nnF4bqDPx6EkUAKLWAQbZuaX1HClRT1XIA549MLrDaruny6aGBrsRxwQzKOjU\nKgw7cpbVbAqqL/BWo3C4hwkB/40ri0AWJV5W798UWiLs1FXINby85b/S6O9i\nlEVh\r\n=xSn3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0743288fb.0","@material/rtl":"7.0.0-canary.0743288fb.0","@material/base":"7.0.0-canary.0743288fb.0","@material/list":"7.0.0-canary.0743288fb.0","@material/shape":"7.0.0-canary.0743288fb.0","@material/theme":"7.0.0-canary.0743288fb.0","@material/ripple":"7.0.0-canary.0743288fb.0","@material/animation":"7.0.0-canary.0743288fb.0","@material/elevation":"7.0.0-canary.0743288fb.0","@material/typography":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.0743288fb.0_1590782759739_0.1345796704475002","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/drawer","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.06ef147b5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39e82b6b3c256216e420dafa149c2e6b288645fe","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.06ef147b5.0.tgz","fileCount":46,"integrity":"sha512-k/8I8BDrZzEPzalFNGbDVONA2a7JmvreR6YrecfwNAEyZvCAKx2CUru6Bnqo6uPqbd7SqKFtRpxHNpOyJ2ltew==","signatures":[{"sig":"MEUCIGYeDmBGN/drTnSeHaP1LIw/1BsTlLTz1C5FyK1RO7oKAiEA18pTGLhhVAKIX6ZC5J3lWRbi8OH/zfNxX0regy0bfuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":564351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XOACRA9TVsSAnZWagAAsfQQAIAr461bIEqghSYF5k7L\nA5158v6Y28ZmMvfxVSKmCdNjG1EfoBaCv8hfPyHGAlLpzVwJo/h2PrWDqqL4\nrintuDQIsgmpXw9Xl9vAopaMpTK066DUmNLgvUFKyf6n9fXibLa01PsxahIV\nl9flbbKQXj0hTVP86BCH0xYQpW5ECU5LNHcA0UXGatWnjeMRJOJmg7K+o29O\nRSGmzRlgnLRdkphn2uzz6hFzL9vel7yyRpVz3+fXjDKwiTsh7h3WYki4Fqym\naGjyKrPkceBQuBTysa1duFvz8kkYJQ0pexUCoEyg2XmMNSzfrXI7vJRSYciu\nWaToe5WoAKwAVMTkmuvCh41ftWtzuLvvd/5w/6y5MHudmYdimxVhjU/QF9qb\nhuIabPRMKynMisu5ByKnpnoJykCE+JYFVXL/02/qQQApcTUwSXcfnGW6d3V4\ndQ2qmZfaj393tu8dFu3kuE261tbyqEohuBGlF4E6W61GgGEGvDfw93DPgZnN\nzFbUKcrwgTuE2eV8FNNHUNNGrXQYNMvW+PyZPp8yoEO5k54K/La5O8VggvB5\n4z5lPCFO80L96gYN3HgUbyAAQPeDUTyia+cuIHm31KgWQ546vq7Vkd+fvgTb\n6E5EvmTG89typoczBi5McnyzRS0z0JBctXuwimLCVTNkLH7HPzvNrNZp3ILH\nWCHr\r\n=vXZm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.06ef147b5.0","@material/rtl":"7.0.0-canary.06ef147b5.0","@material/base":"7.0.0-canary.06ef147b5.0","@material/list":"7.0.0-canary.06ef147b5.0","@material/shape":"7.0.0-canary.06ef147b5.0","@material/theme":"7.0.0-canary.06ef147b5.0","@material/ripple":"7.0.0-canary.06ef147b5.0","@material/animation":"7.0.0-canary.06ef147b5.0","@material/elevation":"7.0.0-canary.06ef147b5.0","@material/typography":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.06ef147b5.0_1590784896372_0.7279857608518903","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/drawer","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.8073a20a9.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d74316b58768215159eb7674170c10a9014484a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.8073a20a9.0.tgz","fileCount":46,"integrity":"sha512-9FGPrlNCyFaVqlJnHycgjIDd3URP854TeF2/uixR+GpXfu8msw1BAoLuRaro8uzrtTttlAzpJb9UoDwhBfQOqQ==","signatures":[{"sig":"MEUCIQCGwY0W2hhymowJR7SbFiF5vzwdJG/qlYJIcw71d7tYtQIgbR5BARTlj/g0e2TtFXSHfXDw6Q2RJeSUm2O6Fb+7dRc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":564351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ZoqCRA9TVsSAnZWagAAdLkQAJ37NPPCJ0liOWSF7jPH\nfyKkI0/QOrjtbx+T6TvPl3WRBUK3OpwSKKMsesil4AlN3duP7zf08pa6V5P3\n2gTXL1elR/G1S0mwIHBTS9uMtKxJBOWyLmJqRtLFTVT/FLXATDaYJCc6ZHw3\nfI4kt1/sc825zY7L5N638xI16mmpW+CWv09V4u7BHKipV9vsg8MCgs6riwZz\nFW13femK2+BLZIlstUQjOaig/C5OkBFBfLN5PXFjBGUa7++rM3OP+QwqOknL\n7Nr23oevsnM/9DKMH1UWu3WWMPsOSezrL2t8KiXP6EYaXJNSVyyfnqsinh4s\nIJXRas6eUD6j8fIINU/kJRb+c+YYlHx40o6LznJePRjM8iRdiuIUqSlcVwOR\nINW8qjq0z8ejeZ44/swrSBWdy8+zCpAdS+0LrDauIEmdbY6c9MhonfriOrjK\nt3Oy5TfRbrcHyBwRyI49p38VzNRJsmWPo1OuPA72qjmBkg0Ed1Gn/GaxT+cF\nP8SJRkRLvQU6AsWhpFp4T8PJsoM8ft9uYPmVvy7mnd692bfp/CUx2FClLIBI\nOZ2WpaZtdOSQ+W1ngZLWRXYxTtoiBziqqb8gE8QDVQ89BI4Sc12rJPigj5aD\nYnUwtgXtxt8dqMPy6Tf7JYNwMJXPvm9H5qS0wu/v+kJG8to42Pe/Iniuo7m0\nwIjJ\r\n=UXd3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8073a20a9.0","@material/rtl":"7.0.0-canary.8073a20a9.0","@material/base":"7.0.0-canary.8073a20a9.0","@material/list":"7.0.0-canary.8073a20a9.0","@material/shape":"7.0.0-canary.8073a20a9.0","@material/theme":"7.0.0-canary.8073a20a9.0","@material/ripple":"7.0.0-canary.8073a20a9.0","@material/animation":"7.0.0-canary.8073a20a9.0","@material/elevation":"7.0.0-canary.8073a20a9.0","@material/typography":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.8073a20a9.0_1590794793965_0.14454145076990388","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/drawer","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.72ff42330.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"388364183be4d4844b87d7529a541f44a187fe72","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.72ff42330.0.tgz","fileCount":46,"integrity":"sha512-Jz7ukeaBYrZ/JqMujtC7A6SboaTEV8RpoUlYIR9x3ZLziLAEMR2laTnU7Jz5VbCviDlMcmIz/pdUWd3KWMrjMQ==","signatures":[{"sig":"MEUCIQDqLuCMxQTTP75JwjDx2sDbrAYYjxmaSdPXoZdpJGxNUwIgVTUmq1Qs5Y7YmL44pSAocBFfHwSd+mw1BJJyIgQZ1CM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":564351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TC3CRA9TVsSAnZWagAA6pQP/0imJ+6QZnvwzpUslHkO\nfo0AZVzvo/VdxQ++vXNRtbqmgetlED9wud/ihjgR5FmK9HNpcRIkLtbs3U0p\nCxZUDXQf0XCUXd+TRVoM8xdVYCRFXB2fpacVy/X5tmsi3d1/G8T/9ANh65dH\nrDvIvfJvOqJpHpGJuBIAEXOQGbVKYe2Bxn3T2yX68rNVpVt19UXixirHLpB+\n/hCM3BiDrFEWm9YLI9vzwx07CI3qwK7wU4ZHxASO6yPbD7qxfL5UTvTChQ0A\nF7i9dQLF5TZTkXr251m4wpVsP6cG9ZYII3lOuK+SobhhGhAD6srK1Lg13565\ng3DFc4v1RPZiDHZkTnSiSM/HFjk1gfS6xbieblz//ccbUZAUfuS2hQ9OGhT9\no0AsHFTbQodKage6/CygwkYxulRI4LdR3KONpjRmn86fhNeQG1VFljysHgxO\n2C6X1cO7N6vC0VzRqlfvg78tLCocB1VmSCm60+FIRGZNY+/mP0L+Jy+6BOJV\n64sIelBrgR6Bec1BLEI8mxdwDVV6yv2nyPG/2xSIioKZ70o93yAV6UOlvEcK\nH8nyXa2xdETyYsM3jtulUEti/SyqbwabmYaGMOFH1+ojwxMIizjWNuiX56uq\ngIyJLdsh8CK9g3IfkbAchR9XadVhXL1QtOSEDzjUv+aNOfRbvCE60l4hTjIU\nmi9G\r\n=L0Jr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.72ff42330.0","@material/rtl":"7.0.0-canary.72ff42330.0","@material/base":"7.0.0-canary.72ff42330.0","@material/list":"7.0.0-canary.72ff42330.0","@material/shape":"7.0.0-canary.72ff42330.0","@material/theme":"7.0.0-canary.72ff42330.0","@material/ripple":"7.0.0-canary.72ff42330.0","@material/animation":"7.0.0-canary.72ff42330.0","@material/elevation":"7.0.0-canary.72ff42330.0","@material/typography":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.72ff42330.0_1591029942645_0.7785541868953874","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/drawer","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.9ea52070f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4886772c25a0a32a3a90dbca080cb01cc63bb67a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.9ea52070f.0.tgz","fileCount":46,"integrity":"sha512-0tzK2xj6XE2+LegkaCEYyXkniOabDvRbAhZiYLpzEoUp8Q77AWiTiwEHYNW3u8mhiwpscM8aMu+qYmNezGHoeg==","signatures":[{"sig":"MEUCIQD9dywvxxZPfcrLbk6RF9nPh7UrlhlqCNSgiZqWoZkTFQIgY7AIBWF+KXE0BbckFI5pHlEWYUMmhLt1iLf4mjfvzH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":564351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TG6CRA9TVsSAnZWagAA6jUP/1xA046kNzerIIaxk9gw\nmZKaaxs9518IOp5GIpvrBnWi82qX7qmJiY50fgFEZf+Epw8dozM4cv42Loih\nBE2RX98A4MuBWJBhlS90RBQJ2dniYUVK5ONNQ4QIzqsrfp4mSNVc2De5s+P+\neSyf+IfuSYksEPtb54hbyUCGXxRCQzKLYLUM6iJC0ew/0/kqM2cjNc3y0Sut\n8rWX2R7bPPdvU6dV8C6OMspAxJAhFJFJVA426JIpudeDbhRPdX0rt0JhI5b1\nO3xh3P4/g9PfPTchASxMJWTl/E1hJiYyDEy1iiN+rsFyo2PNwhdmfcWGKCen\nRhSymHYp+o6vo5PFufEHe0an/Osj5g1gC/KzQ+sYN8VRunHPN4bivcxNXhDD\n91iGJco1TXiJduWLuEHIAj746+3XMyBxFAbLXGMidldf0MMXe31WPkEte5o+\nGzzgkj0B94g45yaMj7eLLyjWHYSpwjElWLcg/1CmYzpTvgjQ7+uKaNrK7jxj\nAXnS0eCiYnWfe8tqjreum6We1z43FWRWy+FGtgtVWxW5sAmB8j7gqJQ5iVQG\niTqt4V8bnKOEESrDJ+khuofJ4j7hOEdeCl6acvHZO95MpNVJtO+9JrgxQcAs\nQt2gyqrekNt63pbz6112BB7JJ29CJuKqKmpE56FwzL4ugys5bBc+fZ9IveLI\n8aBi\r\n=g7i6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9ea52070f.0","@material/rtl":"7.0.0-canary.9ea52070f.0","@material/base":"7.0.0-canary.9ea52070f.0","@material/list":"7.0.0-canary.9ea52070f.0","@material/shape":"7.0.0-canary.9ea52070f.0","@material/theme":"7.0.0-canary.9ea52070f.0","@material/ripple":"7.0.0-canary.9ea52070f.0","@material/animation":"7.0.0-canary.9ea52070f.0","@material/elevation":"7.0.0-canary.9ea52070f.0","@material/typography":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.9ea52070f.0_1591030201747_0.2506928370102035","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/drawer","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.d86ad3b60.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd1e05456dff377427c63e51922109a64186cb73","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.d86ad3b60.0.tgz","fileCount":46,"integrity":"sha512-qNXcoLNQXOk3YsSu//cNPiAuGLVC2trvsk0xCQYGS/G31mMITByv3uPSffPxDU0kDrZSva/0XTM8nRY/7YHUnA==","signatures":[{"sig":"MEUCIQDBDHuXPYKKeuQ+VwxW0Y1hWHfPmKi45F7hwoGo+3S6rQIgJil+gmcWe1QlxMiVDuepX6JlO1aDdGfwxi0ueZE3AqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":564351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T+3CRA9TVsSAnZWagAAJsUP/0d/XsurZt6RCeshzgdM\n+z85NxmTjgrjuoYMLcfE3CVyTEYyfrSQ+2bkziSOKuMbmWX6BrcYz0tEQqlQ\nQHAoxomjl6KaqIPt0tV6xvxCNUBin3mznLhbw5o8U+e61FFKjKrSEiMqve61\nKXo0AXbUjj2vf6dGd8SLtnVsevMK05M8SZdE1yDU95UbCOhNVadFoS1t1HqF\nSeXQHxsEv0HDJxc1U6yNODg+MLGlNNU4R2xN977KzafB5VOj5q/LcJUw8q5G\n9h0Yag53tMT/nSs9pmEwcFDheED9RnapaSpeQ54ZrYvd8CB91n0/Z5XAjwVN\nyea3moDIt4owi3FbDM/Kw2SSJPnbQ9IlppMNofgj6dLCCdSgD3giRVtH4UjR\nasczOVI7ZDPlx7V/jZObhdHS8EFiHEt8LY/zlNMUNfgJ638lvBjsaqowDkzA\nB9UOicbTPmFkYAClmeNl2RB7gmTyZ+zffiXn/6SszEta60nIlJPLeUpuxB03\nADsTmyl5/Ba+7muxOXjfjYqx+PGlvLFu9tczNp260vpRSaqrUBcxz7hA+ZYt\nNUvu8WWMgJ33KutTUqKlgQ3o4Um6ZKklqTmEcnMaomxDEZTWn+wFIuNIDEdy\ntcjZuYR+pLVw53kUxcbdcnkqWPmjgwTnRXQ6Pka+aspC6ht2QvEgBTAuU7nL\nKd8N\r\n=Q5c+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d86ad3b60.0","@material/rtl":"7.0.0-canary.d86ad3b60.0","@material/base":"7.0.0-canary.d86ad3b60.0","@material/list":"7.0.0-canary.d86ad3b60.0","@material/shape":"7.0.0-canary.d86ad3b60.0","@material/theme":"7.0.0-canary.d86ad3b60.0","@material/ripple":"7.0.0-canary.d86ad3b60.0","@material/animation":"7.0.0-canary.d86ad3b60.0","@material/elevation":"7.0.0-canary.d86ad3b60.0","@material/typography":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.d86ad3b60.0_1591033783395_0.9425095156855714","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/drawer","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.b9776b1d0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35de6a6ebd7dc34eca7b80732104bae614e8de63","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.b9776b1d0.0.tgz","fileCount":46,"integrity":"sha512-RMrzpWs98EjtT3WrZrV7kLdrKQ0ONdZnXAldXC3vh5cUCeO+uzZL39ajErnw43aBKQkX6JOImDyVlYkz6bW5pA==","signatures":[{"sig":"MEUCIQD7+PlfpJuY548LgZiUsMw2E7Ww6q8aoMsAAKYATjnhGwIgLu/Jh3G5DqdLYhvtkJ4cH/mRWabttcU8acj/EnjQHz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":564351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Uh3CRA9TVsSAnZWagAAtmEP/0IPkSWtObrszHMMlXQz\nJLX4FwWdBeUj6rg8NTJ1b5gSq+a16+EVHeyAntCCwbuSuEi8p9k1v71usS6n\nGOayNIZCNGprZMD/l8HEwlGUBQHw5Qeo1v2Enon89VKpTCvzpGgDpVp8BikW\nqyLve7vpendLuPfdjrqOdyHBYEIvslfX6jxMs5stvXKlgbIBwJMuByqgTtIO\nKHYHwhHyZJHE1I5+Ixr+Q2fJ7627QVEppcbANvMxi5YFmU727vwW+dRaI7dg\n8DuJXfjoy4RPVurvwHFu1OMErFykML+1G78aX1AppO2fCLAKpuSX4nBuDdWk\n4kqIyypcrKCGGt5KVBpmT64dcRxOzUKh35bJbZJ37heMb9+RgOsbreYeq7d3\nbTpAC73A/vzSAauh1JyQ13AuLPG/IAh9EEdtVm7njSddcRT9YztT+6dnFsqa\nAu4CNCfX+/JPrNebX+qTUvi0HnTYzaPaeipEQ0n9X2lhQLh6WwN23eRy9o9f\nXaFTAdMp7HvGLSNQl22hvfFP3yEav8TWBgDRvhpIkDxQezYZPGaLA7npX4ry\nErJBi1BeIPl5te1q/S0HbaZqxlNmhkMNW4AfecrnGTJHcSKXawL9blCdvirc\n6wiGEHBPAvNlqIpUkPoAyRpJ3zG0p+PEWfBpe0BBUw5/KZgrcSYto0f8fAhN\nNnYi\r\n=DNvK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b9776b1d0.0","@material/rtl":"7.0.0-canary.b9776b1d0.0","@material/base":"7.0.0-canary.b9776b1d0.0","@material/list":"7.0.0-canary.b9776b1d0.0","@material/shape":"7.0.0-canary.b9776b1d0.0","@material/theme":"7.0.0-canary.b9776b1d0.0","@material/ripple":"7.0.0-canary.b9776b1d0.0","@material/animation":"7.0.0-canary.b9776b1d0.0","@material/elevation":"7.0.0-canary.b9776b1d0.0","@material/typography":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.b9776b1d0.0_1591036023180_0.04458127968797654","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/drawer","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.ba6f7c294.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed57d913287f359fa9b49467cffd7b7772601006","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.ba6f7c294.0.tgz","fileCount":46,"integrity":"sha512-g/Y85hgwQYj1V0o/S9DbPBTWMPc60wCjCylDAoKbyrd3VKRDAypsXq4IGYMPcxZX55aGTLRE21d+w/SASGn+yw==","signatures":[{"sig":"MEYCIQCPqQgMC2J5Ssf52Pf31ZQTeaaTnMH4twP2LKyookl/ZgIhAI7x5vui21HaDsFgYxw1a9dy+bp7Jg96vgArn6QUKu4/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":564351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oZuCRA9TVsSAnZWagAAXAMQAIOgegkK0wNUVNLMAl1k\nQwD6WhYAu1aeKKN50zv9aIWxgFvHtBzz8rw6qlPywM0FWh0YLMd+KKK480di\nj3V/jR8uHQ13osJX9VPR2THwlAsbgUPV1iNF1aknvx0HW6W/Wv7bTfDScu11\nZgaP6V1Z7yk33m/Ksx94lktuBtTAxebZ82W1X7dlipeWxFrVkE8Z0GWC7tyA\ndq2bMWJd+jcbYVldBE6eqSI3iQrdhnBiqdyROqdcohVdRhxK5gRhEXYzI4ik\nHNNYUYWkHuWwUuFiPWVth+N4v0ZPqYnk/bQ5a7dPXfKyjSYjsqJZL8ocb4Yt\nurWegzpVYDYMd/l34TnOB+ICc0WIvwxWMaAaj9LFXbGwLprbOdDJP8gvRVmQ\nhv0w8jK9f2D4qWclG4OePmrleIWVSDF7HMXA1TxO5a+V42UH7l6cVLb1tn4m\nVIs9SIJvf2MxsEfz1QMhiBeKhVoZJ5zXEcuLYOrbZOPUNqP+giR8C36mBwoD\n5IDgLv27MZ28L2hRDLVRRELcJllug+GLxW6eoolwZCeOuYyKWGfmYBJ0Cycz\nUv+OdOoj59d3DT0kotCTW8AAtzbbY+EkKFNQ/n6fYmCjcyAFaX/6LO75scV4\nCDXF7vmJ1rGXJaijVRkqtFw8SfgyRn52jGXRDwZ5Y79TcnbLYpzZRyuhr23p\ngHaD\r\n=hjVx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ba6f7c294.0","@material/rtl":"7.0.0-canary.ba6f7c294.0","@material/base":"7.0.0-canary.ba6f7c294.0","@material/list":"7.0.0-canary.ba6f7c294.0","@material/shape":"7.0.0-canary.ba6f7c294.0","@material/theme":"7.0.0-canary.ba6f7c294.0","@material/ripple":"7.0.0-canary.ba6f7c294.0","@material/animation":"7.0.0-canary.ba6f7c294.0","@material/elevation":"7.0.0-canary.ba6f7c294.0","@material/typography":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.ba6f7c294.0_1591117422412_0.5225524364264551","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/drawer","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.cf3b664ab.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05e5df4ac907cc5df4409e0f42fed99879ce971c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.cf3b664ab.0.tgz","fileCount":46,"integrity":"sha512-RDi8DRt7nVZjr9evbN8pc8HDCmbgRFOAMqgZk9AfCRCgyyFRI0zjivEewvTacCsJVZxzfLIyQ/E2OaSwwrhb/g==","signatures":[{"sig":"MEUCIQDvBv3qAGnIcUzAB8DkP62t99gVN0pco4ngIuxRqvNk7AIgaMh+sm+otvZpARRgO1LcvxUvolYFFL5iAuZ2V4XeUsU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":564351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1plcCRA9TVsSAnZWagAAElUP/RqaElsCBHB08A2ni9Zq\n8bnkvn8jFUB5K4InsndwPUe/wJ+xEP0IfnS9m7YQEFlUryInh5fJNlfY+8V+\nC0oDkJ9aboGRoJQdtQK8fx9gvzwY01UjTOj7UY+pmKsjFgWiQPMmrDUmUJzb\nFMdPUtC3STSL4/ENoWVu6Bn9mV3Y0C5o6H40Yd8IhcMvd3xClgp3GM3OcUz4\nfccetPOqoAheeLIucvorGNJpYLQpoTbvEThkGdZ6SMiTJgXSLTGIHSbJFRsJ\neXkjVYNl5ZWqXS9lqvDWgv1AMrxNtcUxj5zxYgewyRoO2PARfYfi+rv16RZd\nSpIsxkX2TcfIETzq32L+iAGBpuOkbw73g5whOyOAJBJSrYO2q61jUg1oSCFH\nrbNvuZWGGNTSmzomW+tupnSNgrHQs42dGe5CW1nM/Oz/Von4izzC7VA/QpER\nQ4VM4yS3fsWy5pSJ5B3daOPvgAqT96xyn/pjyhyy5NLNzdVKMCUWOIduDVFL\nFgBRiOC+1QrA2r/HyO8LUimw8+e8FvmPwuWiE4SRLLCJmkFnSqFto8ANo3Qm\ntpPbJZJoUD6Ybxzq8xuYHtoZ5hcBbzKCCXGCgA+p+z+w1B3EE+lLtDxpoHdh\n2wAk5aggXWXoY/uTMpIdm12ID/LpYEH7zvHUdybeowMrcDkStJCdYAco3C63\nzk0T\r\n=gc0Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cf3b664ab.0","@material/rtl":"7.0.0-canary.cf3b664ab.0","@material/base":"7.0.0-canary.cf3b664ab.0","@material/list":"7.0.0-canary.cf3b664ab.0","@material/shape":"7.0.0-canary.cf3b664ab.0","@material/theme":"7.0.0-canary.cf3b664ab.0","@material/ripple":"7.0.0-canary.cf3b664ab.0","@material/animation":"7.0.0-canary.cf3b664ab.0","@material/elevation":"7.0.0-canary.cf3b664ab.0","@material/typography":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.cf3b664ab.0_1591122268004_0.8961131171444314","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/drawer","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.4ba3c9a31.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f5181eb99573d149abe497c3e200d2fccebacf7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":46,"integrity":"sha512-ZWIPg7Fss/KTy21qj2A53ynoOZIGAhocbZMHvCR1ILWfCswBXDQjSffMmrSfCIAJm40qab4J04+YZTEbGrGpyQ==","signatures":[{"sig":"MEUCIB6aAhTzJZjZTBG1teWisdBaJVLP/zbLC/RDk3SLE7ghAiEAwmqIj2vmBWFsRYZET0sBSqem9WxrBfNX7t1zZ1zRZ5s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":564351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uZ1CRA9TVsSAnZWagAAnfQP/inMX2OLPfAZeO6FuLMe\ncqpw6NY2Q0w+P+7fw4uUYocQc1yMVZq0+9w8i53B/OnrAFWWoIR8WqfcHQJP\n4u5egMAPzLNv+go5Ir82zSn6W6nP4ODCNkLZVlXnPmawH7qPBA3r/M1eJc7o\ncvaYatBF+UAgizhhpw2xp2eu1VoVGz+acPYF9n1pUd/LkeqI0ZyIi7HSPjjH\nqLMBF9BP72rVVwIQS5ZCzgV+UWh+nW6S4mMyLbP8O3DEf3AE0OGuPSzbwBNl\nZM1szIxqxb3OWHnjyd2KGeG6O5lIxRjj0YSDzFME74U3ov7y571fY0DnyTF2\nt5k89m7R33sgmfhBCxFcPZApMj49zBjHhwxiEq5Y0cI5YOu3tVLdkwhCI750\nYjjOApIswphjOCIW3w97Qd0dv7I0ZDvhoZmwz7XBhdFaZKr/YkWLiF22EsGo\nKDCasFcosfAWgNB4szs9v5KaZitLAT2Gc8Ho5I2SnkWFiNCUgl2R7oCJYoLH\nTtxdx5P3wHl+ZKqbIrSgxlumLqNckpaCYRhCCZvmoKZscyiKSNSiSMmX/2SP\nShJ44enAo4KGKWiMFaoPI0u3Us2HGGZJNI4Xe29aWCicg9WvKrBncl8a24Nf\nmfh5yHiRPt4Q0JwuJRid4luqt6jRXQK1iV+RYCyNJimFMWvdh/OpqQSZox42\nFqyO\r\n=3oGL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4ba3c9a31.0","@material/rtl":"7.0.0-canary.4ba3c9a31.0","@material/base":"7.0.0-canary.4ba3c9a31.0","@material/list":"7.0.0-canary.4ba3c9a31.0","@material/shape":"7.0.0-canary.4ba3c9a31.0","@material/theme":"7.0.0-canary.4ba3c9a31.0","@material/ripple":"7.0.0-canary.4ba3c9a31.0","@material/animation":"7.0.0-canary.4ba3c9a31.0","@material/elevation":"7.0.0-canary.4ba3c9a31.0","@material/typography":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.4ba3c9a31.0_1591142004500_0.8183159566981171","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/drawer","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.388b042c7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0aca0293f4dea2cb124de147fe40712c4b6c6be","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.388b042c7.0.tgz","fileCount":46,"integrity":"sha512-RaI0Bo8yxTD4W1UbtHqFSiFo7PQayq9X7mTqvXVbgXYd+0U6JvULqdKzA/QwsbP1Z8WnEkZFiB11CNnpAcpphA==","signatures":[{"sig":"MEYCIQC21ghp/gO26NSgk/9JBlflqcg/93eJEnmxIe7MqhsR1gIhALPDvSm6AfEMl7XzfkXqQJWcLjL94d18Okba8L9vGibG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":564351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16oBCRA9TVsSAnZWagAAOdUP/R1m71cThlHjZMnPwFvI\nTQYzaPCb77y4Laov116rT3dlOngaTAaJ+a1V83l0Sl+2AAkL+56m21Ykl48d\na72MV9sTYGS1YXUaFbuk7GlOyNTUQDi0U60kIqYrkIqrHGCevLDVauU/bhU3\nO6uq2MbRZyvarZXFAAZkq6FGz8R0hqOtUjjPhOiNLS7i4zktjgkabrNJc4NQ\nogFkKzP0NzD4q9oucxOZ4XZuyvstwf2q0OgkFpg8Z6ThifaQUoxYzhSFyySw\n/kRuHEvle/Mya1K54bSIs+n9u9wsJagK+nEm/aSABr73IUJ/3TgaEi2OfBdM\naL3xMqzxh6qa3EUZAy+N4rsVslh28oXcLtn0iSIl+AtSnwk5RKxUr8Tij8tJ\n/Q2qi7gA11Dz1rmOn3ifrW0jMFXS1DbqLO8lHBzyrOFpy46bxXTSrxoYgSYQ\nTMum0rcxmfweP17jNLAU5RP0LL+TMG9gbikLPOZUoJ5fQP0quy1LeDXn1ERB\nt0lgEgFs6ePS63EFkPf8CprtnGWPToTLiCLmkTuFnxCsRS5WovBwTMTwghWa\nX+D+rC/wCNOfcrRe/18fLgGrX89BWSyu4lw0HXYEpQ89cnzswZsNwZR43FAR\n7xb4EB+OUHEuBSrq+H8pM5+0WCzZk4BXYJQnbnekVbTruV3qwZVyaD63cEzB\nxKeJ\r\n=/FI3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.388b042c7.0","@material/rtl":"7.0.0-canary.388b042c7.0","@material/base":"7.0.0-canary.388b042c7.0","@material/list":"7.0.0-canary.388b042c7.0","@material/shape":"7.0.0-canary.388b042c7.0","@material/theme":"7.0.0-canary.388b042c7.0","@material/ripple":"7.0.0-canary.388b042c7.0","@material/animation":"7.0.0-canary.388b042c7.0","@material/elevation":"7.0.0-canary.388b042c7.0","@material/typography":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.388b042c7.0_1591192064885_0.7484646202895044","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/drawer","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.cca1ca84d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72a1c44fbb365470834b35c8c45adf0645c77120","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.cca1ca84d.0.tgz","fileCount":46,"integrity":"sha512-mRON97WM71FF/KwVLU6clL3bR36cQuz9YSRJS5ZpXATSep4/hgwv0UVIsjBVTIe08MXL/BXSpDwlp53A+r6Wvw==","signatures":[{"sig":"MEQCIH/rWN9om7xF9DUWI+pyNX21XBDks2Y1fHisdHpJ2JECAiAXOU84IJ/cyQ9jC4eIezc6B07WnUfRgUZncUfKGA26xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18oDCRA9TVsSAnZWagAAHXsP/RpUzNotKtbcN8QOVFh/\nbC0684UGFXtVq5b4zTPywWKzRccvc3Sy25bTXMZ9uWvhl4XDa50/49gFP43j\n1WIi1SwIySd/SDx/OUrLnsqNTMospf+NiUSV0ATj8VT4luZsbRuNbIy322i/\n9IPJhmwsnHtZkBo3Ab1g7U4TJBaSu2XOrABu4zFuZT8zIoRUGcGjgGuFilQc\n0Cuejgke8X/a8VrjtZ2oVSYmcRJadgpW+fHs2LIuUkoZwkE0hPYApfljgE3H\nhUT1eGK4ABne1M8/pOHTAfne4wtV3MYkHqz1NcLWFrWI92ePrbSQO4UlH0Mx\nfBCl1XGZkCZLZn8fNKhVCPgYdiuBRhProCmZPlApQQGRMwVebOthBrXULKrN\ntCTnOyjYn68fFuHSad5NCzEh9lRFpYxrIb8rg/MWJx8+wBzseiDc69VFjJBp\nF4mw5pWNABxEQe4/+ylFLk7ABzl+waVLbPPqa2sGJWNwOFuxV7UGode07+zn\nVqmcYpf4io1g4mobSNAFXDLNRk6eVj4Ifp2HY8z0P4xi8lcwZWOKuZuHMR/X\n2D9bRHD6Jicy/qqy3gBsHja/86eT6m43PvMnIhtAl1zCWUuvVFR2SKM9oXAR\nn933oONU0yBxzZpxjGOs961//Xtg5DuogDFu4Y6sRNCLB2t6CyYCZYWsqi5l\n0lBL\r\n=bO5I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cca1ca84d.0","@material/rtl":"7.0.0-canary.cca1ca84d.0","@material/base":"7.0.0-canary.cca1ca84d.0","@material/list":"7.0.0-canary.cca1ca84d.0","@material/shape":"7.0.0-canary.cca1ca84d.0","@material/theme":"7.0.0-canary.cca1ca84d.0","@material/ripple":"7.0.0-canary.cca1ca84d.0","@material/animation":"7.0.0-canary.cca1ca84d.0","@material/elevation":"7.0.0-canary.cca1ca84d.0","@material/typography":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.cca1ca84d.0_1591200258504_0.7169680957067914","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/drawer","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.9b0b5f2e0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e29732f5be3bbce89900d6c7198a473a65fe49fa","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":46,"integrity":"sha512-A81Px3T+KU9Lei61umnkK8Ey9pEDrTJLcm659VflOUBQaI4eC5xurqfTz0WJm6EoEbEOf5DmAV2eyNudmMB8lA==","signatures":[{"sig":"MEYCIQD7lzkNZcQfIH1kGUZbPKXtacoyDzYAJlneYcUHme3bFAIhALeRj+n06YpP2XZ6kVN3+dpC6PEZg79RxQ/NAPWAykCm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":584971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/L0CRA9TVsSAnZWagAAfhAP/icc0lOljGotP7JLWBXs\nFmR9zjw+EG3oaGQKr1/Lym2IG4ij7ciZPxMJR2JvwOi2qFcETODhcDCEGKZ2\nUIiYB9Mi5qrAu5lTTF/rAvE2gF1yIhJD5kgafxVkqgBh16R/ugZUsM2KsukB\n5pjaPj1gzQUBUhEUNBMnBIigdp5ocCbJTKGw/2DMx+Zo6DV2nUCGnEivGGm2\n71LDyh8SqhHVtxvBTTCtSXVt8RkedinAGvpU767AdQwXDw1gU4x5REukwx+p\n9Gknnkcrezc5Wz5gNs3R2uUb59ja2195h4eHNETrTWEleLeG5zukLZm6LHOT\nh1G+UmDTk5/wkpi7/W9D1C5rUqrWrnlqdrsd9bhyQpJX1KZPgl663eHBmulX\nsi1naK3YsKWBiRsmhHRahZMNu/ytiWLFjGjU31kZf/H+CxRcsZIGbfGxpri4\n6/sCacd1VzvXux3shkgegA53ijNtK1gJM0wpV5A4rIwOFD3At9gkfz8JY0zV\noLT4cnRZNkCj+wPX7D27yM/bFok+rp9+o1vnPHA42/4m5hLeQaLVNEE6hdkk\nPTJuRXtrjPREnQK5qQA5wXkrEn50WF94Q23FxtP1NuiX0FI8A1Bf8RdB+rr3\nlR07DcXITDTz1CZJgmm8j/1XPM+YChIFg6iAh3Q0RoyINrPi6RMF/dzH74RN\nXuue\r\n=v6dc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9b0b5f2e0.0","@material/rtl":"7.0.0-canary.9b0b5f2e0.0","@material/base":"7.0.0-canary.9b0b5f2e0.0","@material/list":"7.0.0-canary.9b0b5f2e0.0","@material/shape":"7.0.0-canary.9b0b5f2e0.0","@material/theme":"7.0.0-canary.9b0b5f2e0.0","@material/ripple":"7.0.0-canary.9b0b5f2e0.0","@material/animation":"7.0.0-canary.9b0b5f2e0.0","@material/elevation":"7.0.0-canary.9b0b5f2e0.0","@material/typography":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.9b0b5f2e0.0_1591210740507_0.3527541623507404","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/drawer","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.0a7895f4d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5252b78dc7a6fd08e441ba2f990eb3fa7fad1ea2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.0a7895f4d.0.tgz","fileCount":46,"integrity":"sha512-VgCwmVVh0im8F4Y56zck4DbBcRt19XEb/kD4R9IcB2nwkwkghVewFm1bL4iMIMHnY4Z0dqQz5BhdfxKTx3F2Rg==","signatures":[{"sig":"MEYCIQD89VsHTt6xtudmf2fcQRClfFTNQJohtxa+SCQHtGybXAIhALPbG04a66RQPleGBjcm9f2EmxYFtR6WjIw/Ur492/8N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":585442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BGrCRA9TVsSAnZWagAAiRAP/3CRl+djul4JUb6tqsEX\n5/MD8V3UXIoh9RyvtEIn8YwLxSFi+Cw3QVg/OJi9O2J7s8trn56/gZD6+X9B\nmp84bmihTn3WSbUq7p7gejIGS8bKMSzl+K5GPm9grHi+x0lJSHwm9dmIAZJJ\nImtgpLAKXNCxHDhKQ55EQXefsDjz6MLYE4xuj0R5M2gKiOFwJdXtuXZSysPB\nWRT3YzQTeOMU4nqmkWqyQJfaytC5bTab9nmOhb1Vg0jgIskbcUxxzvefEq4I\nP8N2fAQvSWx3W0e1RnNuFxRYqKJByMml+29iYFWfa+msNtCNFAt2lY3+IUD0\nT40DkOkWzZFTQr9QwO5WTgnVKxrIMy1KVKt21f/i4eaMF7QrtSkfcgd0+YtG\n9sAba1g9H0lMs82HFa8IIH7X9lNoKYAQ8ChnfyfP6qtFoVtdbj7DtbJcDs3/\nuNSOZNrJ9oDk48esWuSAl5/CwCpnKOtdr/hFJHXBEE4DpgUWRNmPyzY+Z+VA\nv+LcLZniWbylqPIYgk/DopLs+Ssc7krgas1BcJv3b0T7kaSM+R1etNbp4AnG\nC+dOaTMjXBPTNTQp19TqWZYnDe6qP9LCfcZAV64y+0B+m/4p0m3I0GNBIXap\ni/FsHj1Z0uy100Cbps2eSFj/F0yP/TYH4CrtVnqbIVa0jHNbXRwkx5pnMPLo\n9pYS\r\n=e8s1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0a7895f4d.0","@material/rtl":"7.0.0-canary.0a7895f4d.0","@material/base":"7.0.0-canary.0a7895f4d.0","@material/list":"7.0.0-canary.0a7895f4d.0","@material/shape":"7.0.0-canary.0a7895f4d.0","@material/theme":"7.0.0-canary.0a7895f4d.0","@material/ripple":"7.0.0-canary.0a7895f4d.0","@material/animation":"7.0.0-canary.0a7895f4d.0","@material/elevation":"7.0.0-canary.0a7895f4d.0","@material/typography":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.0a7895f4d.0_1591218603080_0.266916807720359","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/drawer","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.7461aad68.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d8fdfefd18a43690a2bfd51b8372d6ccaa7a58d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.7461aad68.0.tgz","fileCount":46,"integrity":"sha512-jYiCb/O6ZqQtwM20uXzM1h9LwxTgvhVVEx3kDcWOXFe7uHhkz/K6p3LC6ioR9hj7RUC0+LgslPGqQzqsBkVMag==","signatures":[{"sig":"MEUCIC1TruZHZu0A8LUQuDhQzJyvMGr77HLYYhWKlyWKj7YDAiEAws69+iJXbuOSlJ59Ve3suJCpe36hFh/jaXFM1Zd8+dE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":585442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CCXCRA9TVsSAnZWagAA0BIP+wWokpi10egpec2jFPvy\nyHfbkVKiDcAHHPlBQEpttgwqvBpoTIz/0iSO2sCTinUKTYAA2Tt0lvWSCiZl\nixcNTmLJTENkFDIZvANYPwsGSj/f9kHxlT8QFOVHtM8Imx9Y1AKUSyoKoFXQ\nuwbOkeGk3bTnvUmJtbloN98pe9GuHZTjyoXHJ05IfXzXRjqJAplrlxJrfqnq\n3su3FA6rodZ1nkgP/IygX/DIFqpQ77NZN8ICW+uBnIsKSy5O+zfUcU5TIPot\n7itxWJ8kO2OyAiJUa7spQKBi97ynBzT2FwJLfXpBTrNdcD14QTn/+RfC8tIS\nxkPqN8s84MkFpj2WNIIplbQ2AzdxTb9WnYHo7aS/LqrAIX0/OkSeSt1PfS0q\nUSLGOuD34zWt84PvJL3st5NeIVvzKSj/eA0ulgWj0JaazeVrlbQb4EJERJrn\nvP2b50NsmqPb3/T4GHe4rrefb/ovJDXv3pblPLtAOySqaDJBsMq3NlcAMHb0\nhV3MRiROWic2LwE4vHwO36+j8pNbPbBjiL0mTPgNmyOpfsdHOooiwZXo3MCf\neBJ9yRi9v7ON11q8CkIIXv/TvnCkooa8xTpmMFaxSbj1jUFNyBApxrnPeKjC\n9rbHUroUpvw9uf18XsgaDT9yoTquqPaRNITywo5Nw2zVaMzHfc3H1ego1uW1\nfzIq\r\n=e4If\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7461aad68.0","@material/rtl":"7.0.0-canary.7461aad68.0","@material/base":"7.0.0-canary.7461aad68.0","@material/list":"7.0.0-canary.7461aad68.0","@material/shape":"7.0.0-canary.7461aad68.0","@material/theme":"7.0.0-canary.7461aad68.0","@material/ripple":"7.0.0-canary.7461aad68.0","@material/animation":"7.0.0-canary.7461aad68.0","@material/elevation":"7.0.0-canary.7461aad68.0","@material/typography":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.7461aad68.0_1591222422526_0.12020795888372704","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/drawer","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.a0dc2b5c4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ff2af4ee79df9d03f1ea59c89bc24d2fa2596d8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":46,"integrity":"sha512-a3WjPUQjBST6GjmXKMSwk6cNQsyfpOpft0SycBLqc9ViMbzgtr5Yx3S+Eykptzs0V5TfxjAPs4Pw0jfCDQ8eWA==","signatures":[{"sig":"MEUCIQC79LjgQuGyVxIPggTGoRnwP7bWdDGC8fRqC0nSbUsocgIgQNiiZjRLeEdqIXzBHpkfaQZMfM3rpPuzq79zw1lFNFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WRzCRA9TVsSAnZWagAA0cAP/RRXRtUsHC0xpZc+qNqU\nASc8RLBM8oBrXK6DoYAMAk4QTHODRrJeunoSsBLjF5Wh52nmrf7JNluG60WU\nuCuQhpN5wBvvS6opJ74VZlw2uMpFsERgjRxum6i3Qm+T/cFJ+3tMpIL1eZG+\neJLB2cbj5h2WiyyiIRVu8dLtho/bandoyQR2+usK7yp/I2VX1b9PTGF+OBJa\n7yMsQIEgTJDuDIBBroOlf2UHGldNz8HFxeuZWZL71PN0z2O5/RYZ3ycwgV/C\nGI2d/kMuBUHerXQEsi/j3GSwFmdNtKXsAUH9d6K4XYEt8VRbWsBekhB36oJw\neEE5ThgMyvLGks6K6aqWrM5+ayRbOgVeePcujDsnWGVxwXepwJ1X9CgskCCF\n9e/Tryg8RH1ZTTcJuMUcPSDiSO4pt+qRfHzVNW+XMUg4WElaTN6bDk64rN0K\nx+HnG7QHEK8QWmqgkFb8e5wKbrln7u9BmWlLbKQjjZQSyL9LjrQL+gTD3Isg\nvJ6RMuvXUrRnQAe4F5XEHCNPRM2a/Y3AHTuAqPiwrJSkZAAwYSP9PUn59ro0\nq2OCg83/P/pByDyQBe4SlmswzIUKz2kKKJaTnf89sRbL/U8DzHhQGgvVFX4I\n6sJpo/iN+t3hHO92WUgI0NfMObTYmayTB5zRh/9oyiWqezM5dR6HXHS8pB8K\neCDc\r\n=Hcxm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a0dc2b5c4.0","@material/rtl":"7.0.0-canary.a0dc2b5c4.0","@material/base":"7.0.0-canary.a0dc2b5c4.0","@material/list":"7.0.0-canary.a0dc2b5c4.0","@material/shape":"7.0.0-canary.a0dc2b5c4.0","@material/theme":"7.0.0-canary.a0dc2b5c4.0","@material/ripple":"7.0.0-canary.a0dc2b5c4.0","@material/animation":"7.0.0-canary.a0dc2b5c4.0","@material/elevation":"7.0.0-canary.a0dc2b5c4.0","@material/typography":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.a0dc2b5c4.0_1591305328187_0.8480778188640283","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/drawer","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.2b420c5b3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14674df74f20daf838213d8152df5115bd2e97f1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.2b420c5b3.0.tgz","fileCount":46,"integrity":"sha512-kLUTu4kyZp8lfP6eTU5XQecZz/arXcoZIrFrmJudOheQoED5/4FfrA0ao8vPFTUR9IvfgAue7Ub63e+Ff52ORg==","signatures":[{"sig":"MEUCIEWUjlEdOffutKwe3uLFfK4pEvgpDQD0vI63fJbK1lHtAiEArPDYHQHrhEUAU1Yft/3XkuTZhbECjMQ/yjehRfbQ8Qw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mQiCRA9TVsSAnZWagAA/84P/3GcOAkVaAWjHxlTc9zs\n65CYbxpeMzeJne0auX3CzwSbsmyDeyScp8L4pbYhlshHd6NcK/A9V5XtbzLH\nUT9/CVnf1bFbRrr48OqLaRKBg2Dhj28E71OI5QgoLJcsZNdHVNis7IK3M+Gr\nY6hOcK8PPeYK5Xld8ZeXTrPo3inAVJU46XjXXJTjKxDmQkquA0xcXXldSeJq\nmpFBgFWe629ve7lX9J8+MHH3+kIE1JFaxf/5T0P8I0DjVtv1SIo9iIVBW2vk\notkFTO1NIsLgNj4didQnyw5EZ42X6eCc8NVwVi6yhY3QqAvpFxu5ByOag8fO\nh0YQmxxzKbPT7hDglwJRGOPEBBZAVZe0F8k9ONnRabT4t3zh3GICsM6s3rs0\nVAgSCeAred6/XAjtldYDkgHe5DgGvbu0X1+lHyoBCyCcZk/DYCRajWF0ext7\n7XxyzJ1oNTOffIg0p+N+RXWA+qDsIKCI7h2phnE0lYnal33A0xj0eGSVYENJ\n6k0ZTvWypC2FLfY2Q9jLnNxXLhLGGcJJ0ykW6OEZOtxvyFrmbh3XJdp/I2n+\n9zokZiNw96UddXPvs/OMBmaOr+qDXCOhidfmj6Du6/EvG0BtHUzMGj5R6Waq\nlG3kYQouqq943CCiH+DuoDXdzyWh80FYWjOBdgxYxcWLNyX/kR5ZW0kGLXfk\n2a5w\r\n=V+12\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2b420c5b3.0","@material/rtl":"7.0.0-canary.2b420c5b3.0","@material/base":"7.0.0-canary.2b420c5b3.0","@material/list":"7.0.0-canary.2b420c5b3.0","@material/shape":"7.0.0-canary.2b420c5b3.0","@material/theme":"7.0.0-canary.2b420c5b3.0","@material/ripple":"7.0.0-canary.2b420c5b3.0","@material/animation":"7.0.0-canary.2b420c5b3.0","@material/elevation":"7.0.0-canary.2b420c5b3.0","@material/typography":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.2b420c5b3.0_1591632930431_0.2728950035732318","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/drawer","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.8fa22aacc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"809c0549ddd0b97724ff1f46835d4bb8a4ae1413","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.8fa22aacc.0.tgz","fileCount":46,"integrity":"sha512-5i9Zl/oRx66lvlmtKwDKilcX3Xxxl28ANwrbECPUes+o9sFn1NZBcJE0JKQIuqkKfGeO/Xej5ZwrZhI0qalEvA==","signatures":[{"sig":"MEUCIA/kfZeR2LGGmBMLDH5sKFeN33DsUuvxK5ZSC9cN07jNAiEAsxe65FUikpKXdZb3nwzC0ULTPg2FhW0QAvJw48amRyA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n3wCRA9TVsSAnZWagAA3ngP/A8Vygc18yZFe7VMq5MC\nJ1RbHPnS4vh4dbddU1wxsxuUAtAephkrhPKomLFagM4yQhrK5KZgFyhmWASc\n2WjPpS7o8ppnl0egeumrbj2TMmbOmQPo5ItDA+PTPlNtTtP8gr1JjyrC/Ppv\nGpy9C6JWJH8YTd+e3FSSWdX6VDp+6Rfe4NFxaDAVQUKsoGaeYLHcHg3DMYw1\ngjj05JMBnPeR/M8LPnJjS/yN3k331OK55P8Rw0IA8XEVCfqmt63fKDB7o8Eh\n7o9prnSfAR7uXW7pID7v4yuNhcyIKyJNKlvSd6SRCqp26MhgPHGmKB3rld7a\nwppbFCiam/H6h/gVx1wl4JkWjltw7oe+wz5mvB2ppeDvoQ3e8DO+9FJnQSNx\nYnsUM6laAR5XPV0ItFQDCuqKNJUYsMNQyQ+Z/DD9az1/2ANNB05XPEfWbUCD\nJFi/JzHzdFjvPaUqOxus7SBetGZeP4q/vWwmPbCskwTV+/Ks/tDFzkQuoQyM\nDFwDghNxAM5c7vkAvASL7C7RmujdGRd7q7xrq9A1PEUxAPCsO/QNUDxtYOyV\nt5I0PAgN0VbV1ZIc4NUvxXf9X/ARTI9R9r8mzJDdGbHBZN0oeK2JFxzIuAVa\n8C4HrJuUXGLqwVjiPqyaFV1ea5ZI408Jpexnly8PSHHlTwE+y0dlPPQQEQGP\n+B5J\r\n=czxr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8fa22aacc.0","@material/rtl":"7.0.0-canary.8fa22aacc.0","@material/base":"7.0.0-canary.8fa22aacc.0","@material/list":"7.0.0-canary.8fa22aacc.0","@material/shape":"7.0.0-canary.8fa22aacc.0","@material/theme":"7.0.0-canary.8fa22aacc.0","@material/ripple":"7.0.0-canary.8fa22aacc.0","@material/animation":"7.0.0-canary.8fa22aacc.0","@material/elevation":"7.0.0-canary.8fa22aacc.0","@material/typography":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.8fa22aacc.0_1591639535344_0.5946857392376259","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/drawer","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.21c4e4ed8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"487a07f02662a69c065bb0d38315944c675e0300","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":46,"integrity":"sha512-3+UIldHS7h8tkBPsnWrtCfOb0WajDxx0+w6J4u3JsT0R1sf9JMQTTVBk48IgO/Wb2PDnY3Kf3z06Hm9slhfRGg==","signatures":[{"sig":"MEUCIDixqZD898sJXD1jSkwEqiTqe2w7pB1XnQH7mxpZpJ0kAiEA7O3aJwlHL6OoRV33/NytTz4exvS23+jFjn1am+jPI3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3oc/CRA9TVsSAnZWagAAhd8P/RHwnngqfNc7alwCLlyU\neHAmdZsUOcYmPgUPnyHyqJEkkXvKWacrP5NWacjm8JSOgcLSVG9L+nu3vZSx\n1DZbT7iS1djukqOo5em61J+hoHVU+JPWrY6SiHyZ8dmL93HB9NhO3SlkXm1G\n59JOK6noESORJKrM9yyvJ00xjyvOAkIvJc/se61b6JOccnPIzdnQdNwGUfVW\n4wGADz3JMePGv2muwJY7MaYQbyYfjENz39cu7HQlVZXcdq9T3KddsSxC4BCH\npLZTMGEm3nQL9fN2pnOafX3mukMYPZDAKOjYU4oOEM/sPDJ9YeVqto3ywObJ\nSzHWy2JZxKDG9qAhdJRc6NZZ2JoW1OblUnY33vW+oyl+b+AZdTLfeG5zR7uy\nSzsmf6xBcejNMMDi6vKZFh01PZO2DlmiNixBGVynW8RGlyS5fyUNfePmLFyY\nHhF/RzXU7LONPTf+9mH2E2bVQW+ERptzGtMjOxPw52IrSAOCcGhqTry7O0KD\nOZFOWsv7/hfKIz45cdeX1//evNfVIYBJnoAfdCBdBnDhhubhNf0VM8V0wmaO\niZijmOyCA1T9L2F7ARlM3ejk1k1u8MAhiFQ3d5uVie4eQdDxhMspoCg0cijJ\nAsLsxPmaRk31CmMa2tVjMAd1H5hXLDjVKP9Meru3p1L4iwB41EocFi6ncZms\n4IxB\r\n=59K9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.21c4e4ed8.0","@material/rtl":"7.0.0-canary.21c4e4ed8.0","@material/base":"7.0.0-canary.21c4e4ed8.0","@material/list":"7.0.0-canary.21c4e4ed8.0","@material/shape":"7.0.0-canary.21c4e4ed8.0","@material/theme":"7.0.0-canary.21c4e4ed8.0","@material/ripple":"7.0.0-canary.21c4e4ed8.0","@material/animation":"7.0.0-canary.21c4e4ed8.0","@material/elevation":"7.0.0-canary.21c4e4ed8.0","@material/typography":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.21c4e4ed8.0_1591641918883_0.7083190320126367","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/drawer","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.dfde46516.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41ea0c86345e0f91ab63e4a02bde01a8b48e027e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.dfde46516.0.tgz","fileCount":46,"integrity":"sha512-OdsvUR0USjWtyShoGgd9ViUHhbUrcFkavEsam610WGw46F+rLLo4X+UYrhuKPVQ41Tk32Mv4Gj7wGZ1YeH3q4w==","signatures":[{"sig":"MEUCIQDcE833MlWeX6HttjdYrXiPvRQdgR07EAVrIzjy8W3EFQIgOI9fTNKwKEQSmyabEoi6mOrEwudJPL5NxAToQBtQfq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pTICRA9TVsSAnZWagAAQ3YQAJGdJ+6WanH79ZzUHugY\nm+AI8z3Doj4waqEXww+4XIVOznlW7xNEoImCssrj5xBEiSWLXwwnj4lnKpHP\ne7Z0vntnlM4Fo7xabxSoNWefX2iAqr5OTSzW/20R0ATrvhiEdQj878u9H26r\nitGGbZLsKsFnz+axr3bqSC6JolkJR3+qsjhn3AOBtEAtfE4SeiPhQi9VBxCV\nQFtu7B5y10XSind9aiPWY1tgVTCtyIDCC87icXKr9jj+5QS2glL/PySHlADf\nXq0tKEPChhlePzBpyuNJgWxu5Wk3lePdjeUMM46Fe4IkivAK6pO8iKdXcAdm\nKtii3pF1JSzN/ok10Wya0OrAG1ddVtKiKpdHVdGrXvPBTiAnuV/aUIOXhLwl\npNTL59FIE74kVA34KirB7SwMRZf8XRIJyux9eJwAQf9sfCCnsF3lcF3UDQob\n1nfNFukBXmev86EAgmJFG/AjzQVWDJQyljFy6Uv1sGGlMilpZElvUVjJedeN\nRYiwzB2YlS0SstzAmS47BrELqvN07z4FQM0V6+aMT0lPUZebxqzpjZt7QalD\nc/zdjwpXzowDs0IJ6YW3PAzj3nb+Ewzd4U8xxWwaS551avqHp8q7+ZG/mRq1\n6kg5NffcUeiA6UrtEBmJ0TKpKqMljgYqzxbtrfVe26l/NyHkG7BxhVCl9Dml\nMP8p\r\n=+2ej\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.dfde46516.0","@material/rtl":"7.0.0-canary.dfde46516.0","@material/base":"7.0.0-canary.dfde46516.0","@material/list":"7.0.0-canary.dfde46516.0","@material/shape":"7.0.0-canary.dfde46516.0","@material/theme":"7.0.0-canary.dfde46516.0","@material/ripple":"7.0.0-canary.dfde46516.0","@material/animation":"7.0.0-canary.dfde46516.0","@material/elevation":"7.0.0-canary.dfde46516.0","@material/typography":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.dfde46516.0_1591645384301_0.7605493998918882","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/drawer","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.05cc5c206.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5d6aac5375061d9db583b64182a3f4ddeb8d9f5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.05cc5c206.0.tgz","fileCount":46,"integrity":"sha512-0uj5cOlgleUZyhNSZOrtLM747dzm8xyN5Fh13xvGQgTV9xNrr9OsSxMartZBqiz99SLhXVg01JezLa/YzG3hQw==","signatures":[{"sig":"MEQCICNq4Uo3fpW4rPTO15Op68Zwz+yt9FvJz1SZrgIsDzOzAiBIYkyzp5QNugd+OBpEpW4EPFt0S+9Yqp0CdZgOE6r3PA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qZ6CRA9TVsSAnZWagAA6eYP/1Nxn43507IjXiPQ9Jf3\nc9mtIE7Tl3VdeLpY8vUlnYVpV6pPyX9Ym2kpnnPoFgJH4obeZs/L68HD3aQ7\nMuF+i6BJherKtYRlhO10WZyMQH9ayYUo68I/p63iZyShddZCZVPFfSuObQMe\ngYvARFZofq3T3jJM2RzU5AQ2AY3nri/eC4EJef1yiNYyJc5pJ+LDwFF0xnmG\nOCzDgJBv88x53FwpVoL6VDMyP0MMR+Anzh0IrIFXdCRWSdNclAbsWC4VN1Mb\nOZpvolsvZ3bBl65imFhAUg2dvyBqAzfvUZ3tO5W8sdsNs/HR7qc43Q/xGafW\nHiVh2iRwc9VaN9qNVbZazOrdopexdtSYJOxMFtdKV0jdROidJ+hsw6flCdW5\n/Kc7KUvAyzMOWZ4oUYE0lS10Z/1HfGIFOLJ1imjWwCQlvqZTvHwhAco6N58a\n84pmv4ksAwuqs099it2KobvFzpOVY0HsoyiEA9ca4ijW75uZd9BS7ZHgEpgt\nJ1CLQNhUkZl3umt4B9l4zwdegXfnnoGomEU9ppaZvohqWD6HdwzlDJqqMwLE\nT9Ey9U2/61yHGDwnfgv2GTnIUd1CEPVpAkrjRXI7b5XQc6dKG6ZKVV3+sBzN\nPZYAPf1tC1PhP/yhzevUibS9ZuQNgg3oTfA9T01mx8iU6tZYAt4tNnlHpii8\nkiu0\r\n=MCCz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.05cc5c206.0","@material/rtl":"7.0.0-canary.05cc5c206.0","@material/base":"7.0.0-canary.05cc5c206.0","@material/list":"7.0.0-canary.05cc5c206.0","@material/shape":"7.0.0-canary.05cc5c206.0","@material/theme":"7.0.0-canary.05cc5c206.0","@material/ripple":"7.0.0-canary.05cc5c206.0","@material/animation":"7.0.0-canary.05cc5c206.0","@material/elevation":"7.0.0-canary.05cc5c206.0","@material/typography":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.05cc5c206.0_1591649913979_0.6414368713251004","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/drawer","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.3ee488f1c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16288b261ce2055b4d04ba555296367ed40f3c4a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.3ee488f1c.0.tgz","fileCount":46,"integrity":"sha512-dxCWw9qs4nRHNfe+nXWG9oh/ThXwO32Of8mVjp+hSQ6nCbFTlMC7/ui9737QKZqT9jKIlCBUcWFyAyuypQOrWw==","signatures":[{"sig":"MEYCIQCS1lm4Krwxpiu4sNCixZr3GAKdr8DrZcaKsWWlXj1b5AIhAOT93TP7EDw4CnyWdeWmeowffpZrB44tL1YAOkVIi5sj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36LFCRA9TVsSAnZWagAA/QsP/jpW9WdUW20+ydQOerkj\n3U31qLb9mVId2s9HMiNjmJQXhIakEzNW/goK3TvHAbqMDzIx/QY2HMfRLz1m\n8Evl2QJx2hTXVAoE6cSj37Lh5JjydYgAiD1pcGK8woYyW7uHio4a/EKKlNNq\naX2yMB7/yZ5je02UYrY788zMswSJBIeJOrMOrqTt9Ws0Aa7/xKu+mifhKGsB\nKMa1at9wf8iIvyEBptqFeJuxyWUsvofQlLi9Seva2IVl0gh1NSADjgOYD3hT\n8JnA1Bp26cDFw08XjPfDqgJhbDo9EPD+JntMB0sZAbFdVEMvA3osnLTKRsYX\nWtM8zC85LWOuABqp/QgxJ6vp8Ujh1KxXUkR0Mkner6ktiL532cC3TO4HUPm8\ntI9u5eKT1J1WjxppynXoP8Arr29FSh5BbhXlPLfgY2X2rbLhPhXSwn6T3fMN\nBZT5fupwXmFjjsCf4Zi014B17H6AFj/5DKqcOJURCigl2H59gbFd0O7CVcrP\nwTir+v7da2gb4gdd0JFu4OtWhraoVwPiHQtl/a1NZdICSNqLkiHM83OeCQ05\nOgCcjGQP3bage1VRvJ9WQEC7NCjUtxn1VWSlDYp1iwZ8MgWZTUOKdgb/1uBS\nsFR7sV3mF/l33YIPoZPZLGy4PYNnSeco56L9x4BnPyuwsMW/sQrLQIwuj6hZ\nJd6V\r\n=j1rB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3ee488f1c.0","@material/rtl":"7.0.0-canary.3ee488f1c.0","@material/base":"7.0.0-canary.3ee488f1c.0","@material/list":"7.0.0-canary.3ee488f1c.0","@material/shape":"7.0.0-canary.3ee488f1c.0","@material/theme":"7.0.0-canary.3ee488f1c.0","@material/ripple":"7.0.0-canary.3ee488f1c.0","@material/animation":"7.0.0-canary.3ee488f1c.0","@material/elevation":"7.0.0-canary.3ee488f1c.0","@material/typography":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.3ee488f1c.0_1591714501581_0.7108365207942715","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/drawer","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.b83d720ee.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1f5b63e56ebfb139ede288417c2f8ad1bdfeda5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.b83d720ee.0.tgz","fileCount":46,"integrity":"sha512-NNVNYNuo1uR57q/b/JX++AfEC4P76+w2BwS1amQGAxRILogEcvGxDroTam3Zg+Bi+IIkhA27NEjsnLDjmDbj8Q==","signatures":[{"sig":"MEQCIHZ8YTFFblh7htfuRrKhPFShx1IuKhpqjS3DNPjnmDe+AiBNOO1nLmIBQ3c6Nq8VaqJCBP4fCD3tuVwIBT/mtwbTRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38ZzCRA9TVsSAnZWagAAXigP+gJBkwaW3I4Cgn3HPQPm\nX+Ye8Vi/IYuVpjGbGFx3y01AVNvTxf0bvigaHPCzcpUhvNlNT9Q0LNu8Blz7\nUlsOANFh9U5c/kCL9tuQHYYWFhVgjXmd3XS/XBO5LhHeLxif3KH8r2fuv917\nsaNONepzEvT0Uq9ELN2CDKQzC0VLjNFq+h7Dl/QMK8ihZmP+eWWx5BG5g9Ne\ngw8ybDayLZMx+TfJ4gEsJA0nbKGG39QkO2Oz3Y+1527rWwW4MA57X2qvNGAN\nPICZmHuCZ3d8Lqf7Ey5vUwx+J0Qbad9QkfZCnEkS3SwJSw2l7RXQMfrbNSoH\n+t+LegwKvmsBjIzkQwVUtmKHgXKnGCbELEA9gaIEtPtGVhGHXBrA0cdFR9Ci\nRtsFq1F02Tw/G/zaIVDvGiPuRTN8nDO47aZYk8sNFaMTfGNq3oVU23auahBL\n8nzMOG41x2oYcxwMaacvTIRe6mu8IZ2d2sUUaICF10Ty6torKuOEmdty/6RD\nbEuVw7ATn9wddq3AYMO5dL0YV48rU9+kMhKrTPWG8XkkPGoeAigOgsWeU/XA\n/LXVECuWgGj9zIaImNI4D+rrGYBnvUtMwGInQEDJdhK5YWyNyByHk9dEoCk8\nu/nMyh23ipEjMrEhAVDryT4Qx4UHfJKyGyHh0P2h6VPqD8ps2MtyPkZIzkto\n7zz8\r\n=j3tk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b83d720ee.0","@material/rtl":"7.0.0-canary.b83d720ee.0","@material/base":"7.0.0-canary.b83d720ee.0","@material/list":"7.0.0-canary.b83d720ee.0","@material/shape":"7.0.0-canary.b83d720ee.0","@material/theme":"7.0.0-canary.b83d720ee.0","@material/ripple":"7.0.0-canary.b83d720ee.0","@material/animation":"7.0.0-canary.b83d720ee.0","@material/elevation":"7.0.0-canary.b83d720ee.0","@material/typography":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.b83d720ee.0_1591723634846_0.7290400040006908","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/drawer","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.afb1c11a9.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59fbb1338d2bda6d45df9d7f8139a40bb903556c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.afb1c11a9.0.tgz","fileCount":46,"integrity":"sha512-V7vTDLT+1K4UNxQGQ432TrRJxumm1z3GlEh3H0UbswXXJqRUlX4N+46grOY36OSdiTo+aVeFf8XjCUFFMnmuGg==","signatures":[{"sig":"MEQCIEoMDsPjP7HIEJeokhywGxWgZBbYllHhEgcCku1qYSRHAiAduaCvHq3KlQOQS6lLIWBSKgouiFIro/Qa5tnugOOgpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+5dCRA9TVsSAnZWagAAc4sP/0HIehUqSYTgKB4dHHZa\nShMh30DJDngWAm+gO2EUcFOpP4rjb/M0PxIjDPazU0+zTDP3sW9J3rRHOEyx\nl88K21nSqWUV++BkXCM3+mnRry2oMTIB9K85xtUY/NtRAnjFc6Rj+h/ADXvN\nD0qXAfV5DK15I/NlmUjOVJNclYSBYL5gJdOJBfKkyYiz6hYRHdSWfEGJAq0F\nRe9bNxgugBpK5jy19Cn19l5v7JDkp2v5HzG031890TYwJz7pzNgZikjxPn2f\nFlXL9GVPar8s7ElI5XoBhVmP7Pt6+ZfmsWeYLMFjqe0A58wCcB+IsnxoslWS\njXTPApAt3MGT1hftAHdHoP+5tlcY+QxxW3mzc6MtUyPynM7JUeby/h5jdvcF\ntecdoFuvTdJWY2SiqDVC+6KueMuQQ8gwJO9JEyuTqug3hQtNz5Uv//Lx8eiJ\nrgZ0bgIINf+7ULbVvWO/pJyOZ7lJbVdTl0gl268+t97Dsh7yaW8ub58lgY29\n9DPXh3saAKpaEPxndlLhQPE5knpqt2Nbi2WkWN69QspOSL5gYKLS5DB00+wS\nuqGsQkQ/GAEhvYcOOqjJ844Qpt+AEhv2WkHk6o+j8hTrV7hK4KPgKOJxf3sH\nUc5KS4m679zpg5CzCGMzyO3qgNMi+I4SShhNC/8DomttoXbheZGMQ57QhGKw\n4esr\r\n=UzvY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.afb1c11a9.0","@material/rtl":"7.0.0-canary.afb1c11a9.0","@material/base":"7.0.0-canary.afb1c11a9.0","@material/list":"7.0.0-canary.afb1c11a9.0","@material/shape":"7.0.0-canary.afb1c11a9.0","@material/theme":"7.0.0-canary.afb1c11a9.0","@material/ripple":"7.0.0-canary.afb1c11a9.0","@material/animation":"7.0.0-canary.afb1c11a9.0","@material/elevation":"7.0.0-canary.afb1c11a9.0","@material/typography":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.afb1c11a9.0_1591733852953_0.4311165248666373","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/drawer","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.39e6f71e2.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1772ff21a6d1c8c2ee609b2563e174bcdb0e187b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.39e6f71e2.0.tgz","fileCount":46,"integrity":"sha512-2/yg4RDRo3gTCYVwM3Tbv5P6pafBCWQ3AZgQlrFI01Fm2yK3PEW/iCuTLFWCOuUBGMdMCE0cDSBKCjR+YhOR3g==","signatures":[{"sig":"MEUCIQCroFrhobYMeQUXT++FrfqbAjawBPPdzIiKx9L2nsb7GAIgV/o60//Km0lJ29ONbl1j4mhYCPfpfOJGT35u4fscdHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B37CRA9TVsSAnZWagAAPywP/RpcpIVyGDpCHQuFk2K2\n7WFmvWO5djRyLZ7VTTdVj1+aRkDiVYp4JNwxU+7qNzO6smRj/+36nSEmdTWq\nzX8HtuyRjKQrbLsLD++lEb6SXZ2X7Zc3gdoQZ/yYo7eRmW7kd3rMC87/0CNq\niDnRUjc3F9kfzj5ko4jf9FkdjAY9OHH4Ga1PHcrGsPg3ZRkxt63WBA/KhOX0\nQljkAxg1cUZ/mp04QJ5mY/JrF1q0EUMK0JYz5yY6zvdTvxSz0nEoHpiQUloX\nbl31wbJuXJbFarpIomM/Zvi+wvO9TyPNFHBJbGfGq+SlZKWQ3GXthTPILqUd\nL66X+2pq5an8JNKtXDBJV4fMmulPwUZ5XF1bV74o/TjwfOkmyNMUQKhJbmeq\nHlmHN9UxuyNF8pQcdnYPzyGFKjUcMJa1G9p3N6lqObhiF/niCk7aJohUflDt\ngyO6TyKr2myCLxor9BXguIgauKecg8xpkMcbVLqrAJ+MKzBKv+Dnu/pzdgG9\nf8bAVObFsIhlreu/ThLq768qJeICTMRQtheu4O5HG4uGr0CelSjSP33W6Us1\nmoBWjYu3bbi6fUzVlf4NEsvLRDsuwIkvBAe8WfDaFCbuMDocBpfbkQuqb2Vf\nF/RSbehJfYlsDbAhATUkgywiHN9jEYxrbnfSZYocI8yNq16xxTiP6iCg0BVE\nbYBD\r\n=NEB+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.39e6f71e2.0","@material/rtl":"7.0.0-canary.39e6f71e2.0","@material/base":"7.0.0-canary.39e6f71e2.0","@material/list":"7.0.0-canary.39e6f71e2.0","@material/shape":"7.0.0-canary.39e6f71e2.0","@material/theme":"7.0.0-canary.39e6f71e2.0","@material/ripple":"7.0.0-canary.39e6f71e2.0","@material/animation":"7.0.0-canary.39e6f71e2.0","@material/elevation":"7.0.0-canary.39e6f71e2.0","@material/typography":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.39e6f71e2.0_1591746042487_0.578683150866339","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/drawer","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.d4c66dc7d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"028a15da67f1fb3df813153939e3429db4f6db51","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":46,"integrity":"sha512-0oa7B7gbvFME6z4BaLryek0yRwpKH4jnIlygotIIKNfsumLA1+DOaEPuieE/8SXHfqAFaBC8VFX7RDzyvaiW4Q==","signatures":[{"sig":"MEYCIQDRB9JoNVVBU7CtLowWGuqu/nXQ1X0DMKti006ugM44TQIhANTtOoyXKsKB1LkLZmlpLxBybyKXN0LAO2WOVL+hHSzr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m47CRA9TVsSAnZWagAAqFcQAKHIr6wvzR43da6YI8ko\n48s13gxLm3+mjj38frC49BzXtgvekY/n4bgr0TGYwFpm8isiQ7jQdJGF5Pbr\njiutY9nI4JfBrEXxFgqTsNA1FB+qSFoLnIOO4bQgjeNF9VewOJLhshCcEB5e\n3b5Xzp4Fp+EEGkXOR9XjYlBnTM0MR+PpqnMxpqxwglBu4zFdfLBirrIpk+Bg\nxNdbP39RlAj9fccuA7AQzYnWlc1f1fwI4+WX6xWT+z8eVtLl1KQkXjdBnZXy\npGXTKovX4/Yw3UmsH/I7PPXTQcNSEDy6PxVU0864lmtAMwW4pY7MfCQCYGBb\ndGpf/3ymMJkoMeX63rGTKepL3xKc6rkPzk6cwII1xw5KjXMZEUBI1WcVD0tm\nwEWLuXJlMhZYXpAmLBTymQ2vj7yJ7xraZ0ClqokIl85kWhCjsGzpZxq5p34d\nUvuOoD6tkbAAANgjkLdwimcVMuxzBCwHF7ygWzulOjgl3HccB1r9+MubJxHq\n/XBR8xhDHeqG8fB5SuZIu11lLpKf1+NLTiPo8FVOss62kgvxYUjtZ+7kqJkT\nO4mOXt8jtoUtM9oCqvJ1IabowdLHPxAfv0FaCaPUq0NJJK3Xm/VlOYfblhVI\n3XPJNYsPN8xqKsvY9Fk80j5tDn8f1LG0YphdK4yp6poEBb9DfkKfIi20Z7Li\nHgQG\r\n=Kp/J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d4c66dc7d.0","@material/rtl":"7.0.0-canary.d4c66dc7d.0","@material/base":"7.0.0-canary.d4c66dc7d.0","@material/list":"7.0.0-canary.d4c66dc7d.0","@material/shape":"7.0.0-canary.d4c66dc7d.0","@material/theme":"7.0.0-canary.d4c66dc7d.0","@material/ripple":"7.0.0-canary.d4c66dc7d.0","@material/animation":"7.0.0-canary.d4c66dc7d.0","@material/elevation":"7.0.0-canary.d4c66dc7d.0","@material/typography":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.d4c66dc7d.0_1591897658380_0.9369093360575487","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/drawer","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.be4a19f9f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f5484ba19470bd2456568995f8826ca739331a6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.be4a19f9f.0.tgz","fileCount":46,"integrity":"sha512-hCxVf72Td/3jgBxYSELmzhl9e4JS3i9McwaL8gxIkHfHRjyF4W1D0AmWd0g/VAWrX+Mqx2waUArQpNJkQ4sYwg==","signatures":[{"sig":"MEUCIQDuhLiD6b+HbzXD/oHbJ5/2+kaOxsFeaEXjx8pBSjUESwIgY8knE16SUAL7G44d2TWrgen//AdbirFe671Z5T3583E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xwWCRA9TVsSAnZWagAAA1kP/3Bydl0ykVny06XFvbU9\njSqDyejxiVHD9a/6ZDwdNdaPFBGxvqeGRUD9QYkQpW2JBLCejOLolK7diOD8\nlPCmRcKc+gUfAYCjjB+zQMti5TG5dxQ2zVRf1LNSThO5vb9JhAC5rp6Y9tzU\nr7cM5qdS7DoYJGkxMjsYRW2hKp8dlkkXBWb0xWom2fGRqB6klza2s1tFQt14\ndrYi63yvvdmocF/KLyuzPBYt7IuVTma+93GDWj4v803t9l3Ltq++M+mCp2KY\n6f8mFCbglGTBIXGC+7sJwFv7bp35omBX00wKtJZKGv3JJPOd++sgWCIZtGso\n9F0btIYYfqcnZs3lcAZ0aUilYtB9w7fLpg8h0XsCULczrlJdqaoQDOCRTW0E\nGkIJ1jLZJwX+VotPWGnDoYRS0nVFet1kGVwneSmy6n07C+LzGFAZ4GkD/kmU\nowsiIWdyxol2urE1FNBJ2f0MmavQO8xCF6gnHezCNWeyY68oHFjtfbI21h79\nOJNqGxFxOlCE2dQO207CJB2Ho7cM/eLz5Y7V6fccVBkcRQJ2Woo3q6ymrLt7\narebIeJBQ01wrWODNlCn4vi86iNrsUq5y1sxIHFOtlBoxuPnro+fKa+t0qEl\nxuCgeKATiL2zESlNHHts9uqR/+owwiScpzQ0gZ8d5tu9nhb3NkaexATjL2xX\nT+Jx\r\n=RMO+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.be4a19f9f.0","@material/rtl":"7.0.0-canary.be4a19f9f.0","@material/base":"7.0.0-canary.be4a19f9f.0","@material/list":"7.0.0-canary.be4a19f9f.0","@material/shape":"7.0.0-canary.be4a19f9f.0","@material/theme":"7.0.0-canary.be4a19f9f.0","@material/ripple":"7.0.0-canary.be4a19f9f.0","@material/animation":"7.0.0-canary.be4a19f9f.0","@material/elevation":"7.0.0-canary.be4a19f9f.0","@material/typography":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.be4a19f9f.0_1591942166544_0.16328660655545235","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/drawer","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.a6ac8f629.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31ffc2fccf560dff56fb03c0abcdacb745d879ee","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.a6ac8f629.0.tgz","fileCount":46,"integrity":"sha512-IbJwKj3NBTYtc2GKyxF3/YUdscqkxZ3/S/cXzG9PaywSgs2IIyC5RvLe3R6dZBFCbCCIMhmXo9UtBYd+Gjuy4A==","signatures":[{"sig":"MEUCIQD78WWY8GiUQGHB2TnOGrVKc09BLvv0aHkj/8KKvbYj6wIgZQnTgV65U+bM26BNCsmrKjRbPtpQK96kdVn2m0Z7YoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+jBCRA9TVsSAnZWagAAuGcP/A1jquJ14YiACA2pe4hQ\nGeh00ElOPpZ9w6aDdOItrdWCvK5ZEu/FzwytmLuePbm1zPx8PUQ+kO0/xp2q\nOetIbuHS+g20GlVhKnOuWuh3MX2t/dR0YM6HD69KYUhAawVFf09MK/ajsasz\nKKme6M/HwTSKsUFlqLV4XHxnHpoh02bJQ6Ekp+ccOr9xyzPufj14IbIQF0VS\nKJzk/CCU96EufyIvQcTdFB59ZjgBHa84LDEsid74HjUe55CDiYGBTHp0avmr\nEXb6X/FBQlUXRmNUeki8T2NdvKFvZfHiUHFVMuAyCEe2DqL1UdizC1e3WrpP\ngBWzFbEUIGrf+iTYaR3VwrlJExfyC14E1ACSc9hGFVqf4ZmVd56Wli5+3DVe\nBP2gnCC00IrKkuRNtXZkBObTHK0aVGl2jfaeZfPwr+Yo244ywkcqVKvF4T+G\nluoZyUug4BTRFp2NnfOPgRSIZHPKtIR1LuMparDi5XRIYe8kmhMKe8qQu8NS\nFfNCbDGf2NU69onastZGc55bqojzZtHx/3WGmnNnpuY88BPobZc6clKRyyWz\nN93R9JTQTfnEbN7DGC3Mge8vOgKwgBUXd6zv4C95pd3cdILR+R4C0qG2QLTa\ne+qLe9QQQSb5AihjUntC93K0iRHszHvlPGmBkM9wMJCfTddkM7m9z26j2QXK\nAvsD\r\n=wAMT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a6ac8f629.0","@material/rtl":"7.0.0-canary.a6ac8f629.0","@material/base":"7.0.0-canary.a6ac8f629.0","@material/list":"7.0.0-canary.a6ac8f629.0","@material/shape":"7.0.0-canary.a6ac8f629.0","@material/theme":"7.0.0-canary.a6ac8f629.0","@material/ripple":"7.0.0-canary.a6ac8f629.0","@material/animation":"7.0.0-canary.a6ac8f629.0","@material/elevation":"7.0.0-canary.a6ac8f629.0","@material/typography":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.a6ac8f629.0_1592256704974_0.1359110467816591","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/drawer","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.9833dc287.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5848933fde53dcb03b2b7475ab1fb446d2b85f2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.9833dc287.0.tgz","fileCount":46,"integrity":"sha512-+JrJ1MvmY2Edg0Ouf+7nlhvKTbX/W9020IsLnIFd57JsGomWbz0Q//+azUeipLYEH6SH9aSSWGT79WjBDBNktA==","signatures":[{"sig":"MEYCIQC5+Y8Mx4kdWSHzw6lovXJ4GNXB8e5dscTYt4qGrsErIAIhANgT3llQt4vhKnX0gSQSI3aFKfvwTQ4qNM+z4ohCsaBJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SJ7CRA9TVsSAnZWagAAAjYP/igpA1OvAs1MrSHvCLYe\n5+fPeWxS3x+7M/xeU75ezhF87Ycb1POa+R0om5QCBNfkhnD2Ts6Zu6U0gA1P\nR5EeoiIUGcEZgR1ixB6Sq6vzqkT+XkuaEUT+zDDCG6FUjv2z+BB58cPgq0oJ\nrIZNGVT3SYzhGinwpfA1mStGpxsaoU2Vpv5QKC/dHGp9OLTyHS8f1waNSKzb\nLbIomgG4PXtzDPN4RGFPyP+KZMJaSh218OZgvP4fNKZfRnb4jnRPH0janCAp\nUSW6JtRPH6cWXaeUklOqMm8j17ZnAlCsaDbliuOczEU16yVfF/yx3JUTl/7Q\ncoSfveRLoAbgZoKLRIHSWJm1hoX4L8bIw4+yt9ZC0y0NBor6i58I0EwtFZdD\nqBmoFmzgfEMkqzZP7k07Q2zx4FKOqZo5InSe8BUHn7p9MbclZdRtDr93Z+2q\nNlEyW5Jm2EyB8QesOHk+bG6CHKXDZBak0FTEoe9OVdZxCB1RrsqvO9XG1O5V\n/iXawJWWlQWykQyVzNcvHXpXZ3XIXQPLnHW7uTMr26kCKAUFGVkXJggeeZc5\njTLEJWsRYslrKDD7+vJgAc+uY8dPuXgkxpTaWHFpG5dc/tWc0FCWXNfAsa8z\nGtFzfAR2vj0xXE/bUZ+JZdZlvKs26+5Ho8kmpb50rtoepJUktxmj5MaVGZWO\nI+Z7\r\n=AE9d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9833dc287.0","@material/rtl":"7.0.0-canary.9833dc287.0","@material/base":"7.0.0-canary.9833dc287.0","@material/list":"7.0.0-canary.9833dc287.0","@material/shape":"7.0.0-canary.9833dc287.0","@material/theme":"7.0.0-canary.9833dc287.0","@material/ripple":"7.0.0-canary.9833dc287.0","@material/animation":"7.0.0-canary.9833dc287.0","@material/elevation":"7.0.0-canary.9833dc287.0","@material/typography":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.9833dc287.0_1592337019213_0.9782060740388119","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/drawer","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.3aa33998e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b711f3414a86acb45288813a16eece819d53212c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.3aa33998e.0.tgz","fileCount":46,"integrity":"sha512-dz06RLyqWZu7rVhG7m8zaUGyjHxfuOU/uf+4u5ij33DrcJsR502YtLkyECy/HC64nUVAwwAnmjcayoorlz4+CQ==","signatures":[{"sig":"MEUCICsZ3OSvi21CpqyZg4x1Qxje5I2c4g4l0/q2pFTaAdfDAiEAxFYyRD/c0we8HVFT00ASwE5NIKuxPf3tpiXrDgVpyP0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":593530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SoACRA9TVsSAnZWagAAOwsP+wQniPqQbCS/8oFVyBM6\n+AClLkteT2WMi5w+/isUr+gNyGOC8q+61ZkSYFR60a++2BhlEt5YNGrujch2\nU5Y27bWfs+2D9pOQA+hqz8/xvTxSThUBfN3XTB9kxrwF6MofWASx7jfRAzLc\nlWXmiv2oQpA5BhY3vbPUF/5odDhwLX96j5GQpn/NrHkfzvaK2/a3CPp4HEbk\nEbOjs72xrACCUoqU6hHqCghrOi26RcYX0E1Wdp+9wTY1edKLoSGxabg6knLF\nvHjEqtq7QdtJMKau7JoJURXnbxYb2AuGvPBq+iqQuVeX0TawKZXWaaeACJ/J\nLI8ZHjHXvWc/p2Rf3d6im8q+lzcMNtUhXMxQ+yhwBvf9p8xfKAF/59Uc7Dbq\nx9ghb2gbeFc/xU8j3nJLat0qmXND1TuE2aXgvUYdSR3k0XHS6c4nI4esMf5s\nkWN4Rt+shlvNxmfIz76jt78jTiyV8vxNTp3QCLQ4A1kUfX4mGCXmC1lUzU7c\nKhjffXmCVLC9sW9i88OFdlC2VQ/yXlCFuf27VQjjQz0BdmqeyrzjP3Tfr8s+\nvpfJkNo/VqkEw7+CSV3LwAsxdMPYnR1doo5h6s5dmW3PcUsxV0HiBHGR40Kr\nemmbEbshZ38ES6aq4srKVeo5bzh7acOnQhQqrb25nszsvvQvh3PxX1iCfQ/u\nk8HL\r\n=2B57\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3aa33998e.0","@material/rtl":"7.0.0-canary.3aa33998e.0","@material/base":"7.0.0-canary.3aa33998e.0","@material/list":"7.0.0-canary.3aa33998e.0","@material/shape":"7.0.0-canary.3aa33998e.0","@material/theme":"7.0.0-canary.3aa33998e.0","@material/ripple":"7.0.0-canary.3aa33998e.0","@material/animation":"7.0.0-canary.3aa33998e.0","@material/elevation":"7.0.0-canary.3aa33998e.0","@material/typography":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.3aa33998e.0_1592338944144_0.13052691988673848","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/drawer","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.d2b54d183.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca99ac572b9801fcf38eb9d2a13aa7536d4b245f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.d2b54d183.0.tgz","fileCount":46,"integrity":"sha512-dCur+34r+dy8Wse++ZG9eS5EE601HFvq+pEwGGVE5kAaqSvm6XSMM3c9LKCAbxJrd6bBnq7xouoohQdf//D0cg==","signatures":[{"sig":"MEUCIHHTmW1s0qilFv9P0Ucuz1aDBskrqMcZUB2kzeiHLxdNAiEA22+il/DE442zz5GSHQjO5DMe0k5TXQ49JVSBXdZHrGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":621426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sB3CRA9TVsSAnZWagAAqaMP/15rT1jyGNha8A3VlDEW\nf1PzojzaR9ikomShD7W5UBwSRS1lE6E26lugOzBpRWM6BrZsPs/84GoaYTpp\nQdrr7RQ5r8/4Jw3AZBAVug5rO1MANieMfaQj1Ba937elrsRH3brNfhmcF8ch\n11055PAFx58vXkjdDo1dQIfzSA2C5BBRv8DdpqNqPCCbwLwRIvxiy24fgSyu\nLAGSY1EVVjJehtR3HpnniZC/fFxUAdCZWuuUKh+qwNYd0xaBLSTG6ScQ6LRn\n1dBew/alISlPelJRMulqp/iDX9PFCXr2DXTyN/OweMmP/RUTvAtdV3IvDRvV\nk4nwB13wZWlj/4mz+wRfkhcdlUdnwkm+uuWl6eMWsFIokDAAkKdFxO9FMRED\n8BlHgORjyzAHSInQybKZZDwmWeM8vi56PWTGHhcsP6dZXSSZE3gYDMjI1BoT\naeQhhDZGO2+nFE752fiXaaX2QwBU6v1Tk6NcTcdXuOV6KyCALG2aqA26cGRQ\nXyorlQP3Z1JgWjAt6fDTzK9zUO3fhPiI9S2k2W2kpCuvBPo8h9UmNto7GNyu\nL05KATz7r9tGW+KxRJu50h9VyRhBI3ADigaJ8jItqIr3DP6xFuyV5L3Se5z6\nNFipqu9q5EenQY+ITrwIcN3EqfITAymhSPiefmTdocc3GfMfuVKoo7lUWg6Y\n2qMy\r\n=Z6oq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Drawers\n\nThe MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/drawer\n```\n\n### HTML Structure\n\n```html\n\n```\n\n#### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Styles\n\n```scss\n@use \"@material/drawer/mdc-drawer\";\n@use \"@material/list/mdc-list\";\n```\n\n### JavaScript Instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n## Variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible Drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n> Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.\n\n#### Usage with Top App Bar\n\n##### Dismissible Drawer Full Height Drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible Drawer Below Top App Bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: these styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// only apply this style if below top app bar\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n### Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the screen's layout grid.\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n> The `mdc-drawer-scrim` next sibling element is **required**, to protect the app's UI from interactions while the modal drawer is open.\n\n### Responsive Drawer\n\n There is currently no dedicated material component for responsive drawers. This [responsive drawer example](https://glitch.com/~material-responsive-drawer) demonstrates a suggested solution for a drawer that dynamically switches between the permanent variant and the modal variant based on screen width.\n\n## Style Customization\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n## Accessibility\n\n### Focus Management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible Drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal Drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n\n### MDCDrawer\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions | boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### MDCDrawerAdapter\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### MDCDismissibleDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### MDCModalDrawerFoundation\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n\n\n\n","gitHead":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d2b54d183.0","@material/rtl":"7.0.0-canary.d2b54d183.0","@material/base":"7.0.0-canary.d2b54d183.0","@material/list":"7.0.0-canary.d2b54d183.0","@material/shape":"7.0.0-canary.d2b54d183.0","@material/theme":"7.0.0-canary.d2b54d183.0","@material/ripple":"7.0.0-canary.d2b54d183.0","@material/animation":"7.0.0-canary.d2b54d183.0","@material/elevation":"7.0.0-canary.d2b54d183.0","@material/typography":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.d2b54d183.0_1592442998918_0.3877157571287051","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/drawer","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.f2a488e95.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"360cf4e9ae273af7d63f7e58db3c10f380c85307","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.f2a488e95.0.tgz","fileCount":48,"integrity":"sha512-PAt8nqnpFUYK7tvostLumGNDS+dFnAtcjwQFBF7wolet9H/JyK3K6IKsByfAoT896ycsm2QgLhKwBxfPVKEdbA==","signatures":[{"sig":"MEQCIHJezK0GHKPgb1wXVeywwLeurLNsfEWc3BAt6z+bH4r6AiBuSzThtuz665o4zMGTUH+fE+GKlmSJgt5f4XyqVnFKDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":901352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64KvCRA9TVsSAnZWagAAcs0P/AhngT5xuxd3+6U7KFu5\n+dF50UaPniLHWaWyMQORI4rF1dmQzluB7t/CbdpIDmx4fS9TpR1u3NIpunta\nkO3e1ewStkqkV5V1nE3KCNqsmJnvxDleV+7vDlKQ2JhPWEcL2zCh9um2kY7/\nCyWrgklpqn4rbQOkzAAZkyHVk/rGGVoMPWgKresgyeZ675c4kwK1h60joU++\noA2XdG1PRkrT3/f6jlwv4fS4+lcPxkssNSWDsOVimkXpyTa4hxAbPlFxSbD1\nmFw64ktpt98l5A/dWiM8qRUjlYy+udo3MzoDxKuj9rQNuuSuoklRzPDdW0LT\nu2379622bvcaG0CBpVvLPTpGPsTI92ntR9p6TkqqCbeRqJWbnJkciyvhqoFg\ncwulK+1Tq6oReLYf7AjM08jkZKMiH3K2LgS8skcttHvBM/HIRm2FHVZ1urqt\nBfz5WIA8HU1woM6vkNAOt2ZDtsSOTJDZqc6zW/OWpilwlWHjaiZyDsdXv6Ff\nUyxethoiGbryaiqT3US9pANdL36OcdCEodLdkvXVV6feFdvAvNjS2GhAQ1d7\n0cinnwWSGN9+v3pzAG7jGiKPZ9wfee4pnKuvzH41M06wQ1WhSqCHe5m55UA6\nMzjvGonVe7XScjUr++NywZtjTa3AxV5b4ar1UVK2Aorpo5cL8TfQMg8T8obM\nbUeZ\r\n=U5XZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f2a488e95.0","@material/rtl":"7.0.0-canary.f2a488e95.0","@material/base":"7.0.0-canary.f2a488e95.0","@material/list":"7.0.0-canary.f2a488e95.0","@material/shape":"7.0.0-canary.f2a488e95.0","@material/theme":"7.0.0-canary.f2a488e95.0","@material/ripple":"7.0.0-canary.f2a488e95.0","@material/animation":"7.0.0-canary.f2a488e95.0","@material/elevation":"7.0.0-canary.f2a488e95.0","@material/typography":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.f2a488e95.0_1592492719014_0.4920245672020551","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/drawer","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.bd8d1aafa.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a0971aa37bcee4eb6d4e4256f4eb5f1ba48b062","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":48,"integrity":"sha512-9nvXOMO2YwLpx+ukCgwBxGl0n7nvhRxYgcFTXRD1elb+tksY8u7rp2EadJBQj/WU1coc+0zyLIbcsDA4zdo5wA==","signatures":[{"sig":"MEYCIQCm8N9alY+fKULalKLY502SHPnweuLpvYRQjEO9Dz+gawIhAIRpQoAMbdLsVL7elm5nnWmrfWVto3k4Hcd0uUY0RpTg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":901352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64WECRA9TVsSAnZWagAAZ+IQAIS4ntq0pFB8RwRozJ57\naIWjRGZEXKtkMyLgp4P3t9TyV1ugwAqwxRsS52mekZLoM0wTsftLUDZz92pk\n54jW2K6bH5ZCmQFih/QABQdkIt3CAJ+gGkyISL8mjpEwoKVgzEYqxho4tFxU\nXk0NZaRj3YpSYiYacec7Y6G5fAt1wMfIIAhz64c2Yo9XaOZI9ss8bUw2qwkc\n+8WsqobZGxaXqB5GgPG3u3vdD8l7ouM6tqD1aRSgNvMf7/T+EkwwGiuyFRrS\n1rfPMsgdkUZ9mZlv2K9rhhlOsXliakDmStW/ig0FmeSmXvhycL8CcP+G6//a\nFTKcD2wmQAmelYGOIChyaV/UH/Pl0Am0mzMOxLtchsVtj/6SDJcNqmzdNkqW\nUY7ob099x9M1uup0f5S5D8AY8Qu51NbDkScE/98jdr4MjsBziMYHESQA11Om\ntfZV71EngQ5NGmNu0hSl/AD/TA8oBgRWHoIK2/jvj1oLPaVyGdHYsd4wjF6h\nLPWwp/2PuBEvHFP3V2IQBKKIfnMR05dwjv7g+X5hwHN6jMs262cIcFxgnoOw\nx2gISJ3s2+L0yMlgPepmhMCrl/SxVw/3I4yRbhuGqr8om5cwBes5aDwq00+8\n0S3myb4Ivbj0I6TsTsOORzJB4GctGHgsJRnqys0FANKxRYUnnL3SBTrvhhRI\nh9wn\r\n=OCr8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd8d1aafa.0","@material/rtl":"7.0.0-canary.bd8d1aafa.0","@material/base":"7.0.0-canary.bd8d1aafa.0","@material/list":"7.0.0-canary.bd8d1aafa.0","@material/shape":"7.0.0-canary.bd8d1aafa.0","@material/theme":"7.0.0-canary.bd8d1aafa.0","@material/ripple":"7.0.0-canary.bd8d1aafa.0","@material/animation":"7.0.0-canary.bd8d1aafa.0","@material/elevation":"7.0.0-canary.bd8d1aafa.0","@material/typography":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.bd8d1aafa.0_1592493444177_0.4261208472365132","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/drawer","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.1321eb968.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7aa8dffc0a5097d72e411b3b9429f79106c5cbea","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.1321eb968.0.tgz","fileCount":48,"integrity":"sha512-ezmWFzYLy49huzx4CXEBd6XJRwYjz7FUBJ2vFjOp4HAnmWbLb80449abt3o1bz4wzeH2JOdLZsT3w4VaTL77rA==","signatures":[{"sig":"MEUCIQDXRtcc6MrhrY3W+WhFXfdGGSbjEQWR+O/0BYN3MzFKCgIgQOqyf+op8PrLFWZvvrXlV4OHVFml47F2iO5eWAb+3RA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":901364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RBwCRA9TVsSAnZWagAAv0UP/iIymlj/e8Cs+hfLstSl\ngyy8U8qbfmzS4oI45XgxNuwlnTV34QI5aAc9SpfRK2sMwVIFjpxe5b/oad1H\ntsR/3VIcZzmzAN38V+ehkNwYvxTLORp24IzjkPK3jLL7+EvuXgW7XfCvPC3V\n5bTr7/78wsDgYp9XvvKhBLNRkAId/mkMXyBJyhaPBCLGuU3dQ3FcOgSh3Wtl\nEo/HJvZzT4AmC7HIf3M8wbhjiYBhAp7FMK/Ek43YFwxnA57Nhl5mmHxUUxql\nvgiGmsFMCxjqbxRBhpKGxQOvZyZLVeiPEHECAjfrIH/oVJyi+lbPB3reV7AW\n3hnqdFcbKCoWKRJUyaNafeqkrAEX0WHxqK69AW/jemAl8GPnKs7YxM24QRq3\nspFueW6Km7uUfXxV6MYOnb/K3e0YF5mdZjjbTxe+0285lH8f6F1ArHSovlEp\noizg7BAK4NVfX/eYyZ0HbCBNHHR43yd6qyNic72rhb3RpzsMU1d6OQZGq60G\nWZ+e6Uh8H38i2+Y0g5+0OFXqRLzQF8GBckrI0WF5yGJnjwSa/5f8jRL3CtmZ\nza8BF6kEZKkMIKs33zMVD7G/3N2qj9qufmPj6FXcRe+0XGVWlu4FloQkNNm/\njUor0pH9+ovnehKQqrpXlEGBv1h+2VJh1BayhvpJcONePBj0htVH5ZT593Hm\nh5v7\r\n=ZIKf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1321eb968.0","@material/rtl":"7.0.0-canary.1321eb968.0","@material/base":"7.0.0-canary.1321eb968.0","@material/list":"7.0.0-canary.1321eb968.0","@material/shape":"7.0.0-canary.1321eb968.0","@material/theme":"7.0.0-canary.1321eb968.0","@material/ripple":"7.0.0-canary.1321eb968.0","@material/animation":"7.0.0-canary.1321eb968.0","@material/elevation":"7.0.0-canary.1321eb968.0","@material/typography":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.1321eb968.0_1592594544034_0.9165799331292388","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/drawer","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.db5cc0382.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2efe01383b466f4cdf0376631713fa817bd213ec","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.db5cc0382.0.tgz","fileCount":48,"integrity":"sha512-5tZjfUMG/lchIr8S27qh/YBeT622scMUpeZJmnG1YPsNY2IWPe1zLA0zQ3sAp03JPLhg4y46tg0MD2JUoZWYzg==","signatures":[{"sig":"MEYCIQCb5B2Y5wDa2d+CotLop/2UTc4XZxdgkYUy15ywhfqtSgIhAIPUywL+GbdcnFx3vtXFMnZIoJXfy6PSxzwuqFWGOabO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":901364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RHtCRA9TVsSAnZWagAAH8gP/R98quzGP3rdcp1+6pzm\nIiBDaaOzETHoYzOnZzC5Z0fUhysh95IYsfZ/865l9P/5/Ar1K2qFAJn/fa7x\nt2NN+wRDNSm0dJ/S24hlzpQGoWYtqbTs1ntwk5YkGnpG5mzP4ejvQ2ZfLUyB\nfoAIe89DwL/v8MUGzdvFK6WNbX/SE0H9/yatibuRqjTjrmu8avTrwZjxixx+\nLxRuWreN9uK7B5MYsyZuxyKp3CyU8frfbZz1hH2UjLONcM1jtVdEQulG0NKL\nF7oEwYb4yR4/KbeFo+ike2fUzaeVCfzr0Z4lIjAV5PV/ZZNAs1Bz/0wDkdu5\nm6fBqS9O0SKMeTOC0s2MMDPq2fcZykMJlKwHPr56GYLYpxJdz7g67SbX/SxQ\n5MyzlijchRp1hyBEqFA6HxBRQC+UcV/1vq+lO5L+csY5H63YNTBNQPRJYLsc\nur6SwWshhESb6SlpSLOqTzRzy+CaeOYU9CkXMGjVuh0JHYGWBiJttAhFahcJ\naBGseSwjbHWv0GBLe6Dg0cbMrwRL0GDWI+TgEhiMchnALm/AwXFPk14CmsK7\nlkeF1KiuVJtM50A/4UCw+Tm0+oP3P4ZFL7U3jGsdggoXRefat+VpkCdEWmv6\n3QQ+qQL9GPVv+kUsNHffmNJ6X8AMDVd1YqN5z9LtmyioAEvdsW+5GlWLgAT9\nnvPA\r\n=XEFE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.db5cc0382.0","@material/rtl":"7.0.0-canary.db5cc0382.0","@material/base":"7.0.0-canary.db5cc0382.0","@material/list":"7.0.0-canary.db5cc0382.0","@material/shape":"7.0.0-canary.db5cc0382.0","@material/theme":"7.0.0-canary.db5cc0382.0","@material/ripple":"7.0.0-canary.db5cc0382.0","@material/animation":"7.0.0-canary.db5cc0382.0","@material/elevation":"7.0.0-canary.db5cc0382.0","@material/typography":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.db5cc0382.0_1592594925146_0.09317851157756318","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/drawer","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.6ac9bf031.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb21d9b89a9028a6eff7575499481bdd242ddf11","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.6ac9bf031.0.tgz","fileCount":48,"integrity":"sha512-cnmxSdAtdl2+uVV7Pu66+EI63SdntSgFD06fb99c37Ljx5ZVlYk06P+CiyBvbm1TTQpvkYsEdg/XpyHm5QFBRA==","signatures":[{"sig":"MEQCIAFGM/jmpaC4rFBNvYVnerIiaps+YwCWrSKM2nH8mTI8AiAc91C93PkCGMsaLeOhYP2PfzaxS2NGE04N+Ei1M16qyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":901364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Ra+CRA9TVsSAnZWagAALn8P/1XTlLBKNPS2aborUm/W\nKcH7nVTk9Qqukjrvd98Vu6vx5W5XDIOEIFrncokxWqBbhonemcWgT39JCNj0\nzUT3l2o8+MAPqoh3/bvAN5rHEKp0gQQ6gzp7U+98WkLWin6La3bAeQIfpy7E\ndKAvKyAgXZc8KBwHh50XmQ9TRXOlQFg62zKbw/wFs/BpNyCULIBmZW04rbij\nY6jmXhq1cL8ZZCLaNIg3c/24W2ncMn3NdUBpGDLwZzurYznu75qHZ9Sw/hdT\nF3d+0bBRDPMzegqrwSBPK0xMqQJ5aZtoX0duzNQqVAMeSE7wQVf6nuchaALd\n2lfoS+qOh8tHSjj2VSKxV2G1rgFkgoPY0ca6jRVanmRQHD2a+aKgYeuaMvtl\n8bhkdRru3XinQ/PoPfAkv4PzlEHiOMiWrDDopUmycnsGAcQHAnnAIa+Po8NL\n1JjndhPXNr419Qh/EJNBnzHifmNDUoQzsr7iTX5Dn+gCc1ylKHuIF5fLlzYK\nQG2MKnsrO42HouKanXuLxADQ51XcN4DOCZ+mtcB7ORWO2jQS+z2aBv61LYRI\ncixgyaISbq5D5BrWcgWk0F7nmyIChSWrqFU9k6sThcj8oiAzYVRRy9xs+pAI\nscDErnc/psnyBsIl7cMPgFWpP0RvGQIiPjcuovYqRDAvke9oJMc6jxI4wcpM\ngpMr\r\n=AXsh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6ac9bf031.0","@material/rtl":"7.0.0-canary.6ac9bf031.0","@material/base":"7.0.0-canary.6ac9bf031.0","@material/list":"7.0.0-canary.6ac9bf031.0","@material/shape":"7.0.0-canary.6ac9bf031.0","@material/theme":"7.0.0-canary.6ac9bf031.0","@material/ripple":"7.0.0-canary.6ac9bf031.0","@material/animation":"7.0.0-canary.6ac9bf031.0","@material/elevation":"7.0.0-canary.6ac9bf031.0","@material/typography":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.6ac9bf031.0_1592596157617_0.5223907291841947","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/drawer","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.c21b5c367.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85e287aba9172ee1451a1168d3fbfb95308b9df1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.c21b5c367.0.tgz","fileCount":48,"integrity":"sha512-lPGiy6xh8NBwc6uCLUCPO54eGTLyvvh0dEIpl3oXbHPmmumtNa7hdX6TS7BKOunZKGQG6/rLpu7DZmVI6f2xIA==","signatures":[{"sig":"MEQCIHKeXv51TtKZJdVN5KZaFiuDTIRK0PKIPvdZuEGHggxJAiBRx/ZizE+UVFOjOxH9TgBCGL/4O8QVIcVzgWaSaNTI5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":901364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RwZCRA9TVsSAnZWagAAbtoP/2/k5BqyoOcjlNVbXY0k\nnYr63e6QWFXnrGeiHudQEWwtqJdTQxUFdo/Ni9mPR6skrzFRXONQoW9zbFYk\nLuL8xPKmkr1qS8qlNlYGG34Fn9nB2bWIHFixYPhfnZC1oJRT9PuIilbcV+QZ\nFof45UFXTEK2W1Kdk2ZFlKecrraPFIuI40qHXDM/VqL+tjE+wr5gsGoZXEiC\nWcZp0Jb+pDmE8WpSTctwh4lXL7zbqUWA4NgMmN6nvUnwOcy5TqWnD88sciw9\nFpuHT7HQo40dl1yyU0915t9A4vyaKEcIJhaNdzv/ZAbGDWFpWxZdqvB69bnV\nb62/E8uJiHfaZVr0yhH64cH/IT12GA7Tjfb08DdeMobbtzVNGU7WXkeMGUfZ\na7Yb7lNEjuMHRqQQKsvokXeb7JhP+9h25lZVUCUylTG/KevRqV43f/aJBg06\n8hDKHZiB+JZkaELBsm53qCuVnrkqKyu7TJGGqyyqqboHQhz+vfPsQzuZuX/c\nzcNffJgL/BmNbxfjVvuHcPzdckgcgQxClERDifUlaQoW862amDJcM1RBoA0H\nY5/jVgRXOoIXQq1QCIPhsujRcc9I69cmQihnefXmdRQ+zIp17qwW5pThLqTx\nGTaG9g7IeJnf+hPHHcLIEy/YlM4VdRFcQraaAiky7Ju4zNEzY4kc74NBVSqb\ntcJn\r\n=mBfi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c21b5c367.0","@material/rtl":"7.0.0-canary.c21b5c367.0","@material/base":"7.0.0-canary.c21b5c367.0","@material/list":"7.0.0-canary.c21b5c367.0","@material/shape":"7.0.0-canary.c21b5c367.0","@material/theme":"7.0.0-canary.c21b5c367.0","@material/ripple":"7.0.0-canary.c21b5c367.0","@material/animation":"7.0.0-canary.c21b5c367.0","@material/elevation":"7.0.0-canary.c21b5c367.0","@material/typography":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.c21b5c367.0_1592597528789_0.544647251042488","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/drawer","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.bfdd7fd39.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20c8fbce9fb46062d3e473c7259d02f757255f41","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":48,"integrity":"sha512-Vb+hnNOBBMyJXvZPAt9fg244Zcyf5dKQ1nwcJpHuHgjcgZIPnolER1bYBUqAakjX5ZZKdVS0bEs0fIBWj/bQyg==","signatures":[{"sig":"MEUCIQCBm7G/izpHodq1VsJbZrnJERs8/SnAP9/zr/84o08b9AIgTIa6YZzL3SGa5RbgMdxsXv+SpYg80ebUCMgJDuOiBLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":901364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R4vCRA9TVsSAnZWagAA7IYP/jCmWuqduaJ9SrYFGbTK\nlUSCYuCAMLS+rXojJFuJO8B5YsenETddST0S0GXjI/upQwbLiWw92VBskBZo\nhgOzDqSdB8bkZ1VLzuHlfc0mgoJLyNDjeqcip+uwSpN5PjjLyaeMfogFsbp6\n9Uxt55OkU1hflfpP8Y4lPiTWljRHYmxl28SqPMpTbOIKmPOBeJlA4xcJOa6q\n1lrozkW7v7wnL7gHe8WDYmDqyAIl1eZBP6RCqVOOMbWz3ncjo2MB0OKaZVIA\ntU4krEgkq+z/G6JjEBPjR7oia8/we4MGWvUI/eHp7LnkGKfn6seXfdeoLGT9\noaXUR/rQyojCrIvYzfyzU4o3C1n0294t2gwcVzkCQ1IXdLfRNI6oIjCTh0oI\nHUE+e7Cdbl+itQjei3TlciCrgtTKCtKmkWTwogkiESZm8Ougg5PdDlw2e9qf\no2l6vEGPQEGIe+LT2aeVwCLBmae/FKTJc8ABSQK8aXZ9R5PaHxmoGhdezmQC\nlE67Zr0iRp5y6DSiQisbbEW2VuFPP0deDfcas8QG3BXmcZLk9Zi/VcjO+9OT\n9aqpQCu9OO9dYB1kbSXraq6NW8l1RUYkaCXRG9NSsQYvRux5T5/Iod16vboQ\nXKXsDlOH98KEk2dujMytKTvVyv5Y36m0IeLhaHGdMLneQdHAkzVPalHQFo3Z\nGhDA\r\n=dM4E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bfdd7fd39.0","@material/rtl":"7.0.0-canary.bfdd7fd39.0","@material/base":"7.0.0-canary.bfdd7fd39.0","@material/list":"7.0.0-canary.bfdd7fd39.0","@material/shape":"7.0.0-canary.bfdd7fd39.0","@material/theme":"7.0.0-canary.bfdd7fd39.0","@material/ripple":"7.0.0-canary.bfdd7fd39.0","@material/animation":"7.0.0-canary.bfdd7fd39.0","@material/elevation":"7.0.0-canary.bfdd7fd39.0","@material/typography":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.bfdd7fd39.0_1592598062777_0.21134426358624037","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/drawer","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.10b505785.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"780464189381931060d2bf27e6bd198876f69e36","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.10b505785.0.tgz","fileCount":48,"integrity":"sha512-Vh+X/TQKIf2ZDPXh2vP/cQBkgcv9cWW+2fkzfOBgg2bGoCrx2MVMN0+9TGwPWW1FoTc7+9BCD4vSmDb4ETEcJQ==","signatures":[{"sig":"MEQCIGtGEzezSsyT34apLvBOlcAbNDg4LMdc4ndKOiWtLpwIAiBAlxcLY6jgl6uy1E2gscsCkolxrB+dW6+8NXQ3s0LTrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":901364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R6ACRA9TVsSAnZWagAA/AkP/0m0CRwaI43KfntFonee\nslFg5j2RFByTzqpO+a3f4GeS5qiLhZOlAugCevKgpz1Al05WW9iIHxeYMPAH\nQG1jOSOfZAVa83czVzgfKocB7Q2RdWa/263j/kASpEp2/EnBbgq7eDXR6g1C\nMcAC9/f3DgGt8bwFK7MPMlXezMtdDXxWSKHaRy0uS4wKCDg+GwCNLhsig8Zn\nPSDE87KZMpbbqGFI7KYqQmiW2Jd7Imr3gmzPln5htoxPAxdnq2O732F7i8rO\nxgic7Lbmb966l9x3D+Ms+ec1iwkXAYTYwYValB4/gCW3PriLWTBTwK4NjV0w\ncnRKd/ibDP7yUuqbiqL8Zncr0VQkuXoa86dLl6w7/AD+uvKTFcsfFqBkDnRP\ndNZT4yVrQkp2Objsl/Vkl+kZTn43sD58Qt7EVLjx12+TOfnoBreeQH6ODIrB\ng5/SOZMdpRld+dVoDz2mb/S72JjWYFyi2cPn21KOj+dVWiBuQ9NR9uBAj0HF\nUV/6mbBhiwijeFihDV2iWiSOv8s8HmMbTOXQrbdIdbomLgaAKceMvP4+0WXu\n1Vhb2Fh0HkntywdQWZxKNrE9VVN9CYsBSMgpZfCVG9yhS9GmUuNVzX3g/gcy\nI+5uj0O9+JCzPb5npy260sHHwl/Jf3hkPlePWQFB7BLBiyxaG3TGWVBNDCcl\nM5R4\r\n=p1Cg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.10b505785.0","@material/rtl":"7.0.0-canary.10b505785.0","@material/base":"7.0.0-canary.10b505785.0","@material/list":"7.0.0-canary.10b505785.0","@material/shape":"7.0.0-canary.10b505785.0","@material/theme":"7.0.0-canary.10b505785.0","@material/ripple":"7.0.0-canary.10b505785.0","@material/animation":"7.0.0-canary.10b505785.0","@material/elevation":"7.0.0-canary.10b505785.0","@material/typography":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.10b505785.0_1592598143888_0.1618826925118102","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/drawer","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.6483d3f44.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2ce63151abb923aa4f18aeaae311104e8eb91a9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.6483d3f44.0.tgz","fileCount":48,"integrity":"sha512-/yEDA7p3VNcoub9RiKGud4YI1uhCEs82qvvuEOqcQJcuodCf5gp8WxFof9slqPF6FrvzTtLxyz2QxqsXU8FLvA==","signatures":[{"sig":"MEUCIQDZFu5iUvbCvk/8REHYcuVPi3ofq0Au9MKb4lixcWXZrgIgPR6OBx3n4g+0QKwk7tYciRaDbucJtOuOOw6M1zQAbPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SJOCRA9TVsSAnZWagAAlS4P/2xLSEDiw/vy4m7F8QEB\npJyA8gh1iS0JV1dIoyV1WRdl7tlybu7ArPcK7zkBtiEUjJbj9NmksOMJVgji\n48IEEbg3sgGJk6H5XwkNEbOHcPiqElJeA4MDktwEP54YGgQIDPCQp9v549xW\nD1ODrTKIYXIWC+9Oc4wigHNvkFtsmrHFEHDNNGwOaaouYlFcDRM1tYLzmdOK\nHXmk+Byz6dOjqLnXqFXF/yU8But2WgadoOwyPDkJPIvy6urBecwfThQwHZKJ\nwMEAYhkqBdYl5rZM80Y0aJksI8u5zShHKeljmSkhCd4zAUed/5jKP2naOsDj\nW3C0ApF7REtoqCXERPL5RmnRV5K5ANN7jcuyj+pZ72hmA8lmLuVEZhDYEnam\nevfa+hJ9yXlU+vYcPghs+KC0NvTrwzYt5L15U6e++TUm4lWHU0mimJFxEc0Y\nY9dFzkuCj6kytxoQ2Y2YtddkzJGF2DKE9XMo79Xxtvm9px5UeyzKARdbhyJP\ni+u3dw0x0wwsgyEQ2OIF+yz3tSX4N+H/W+U3iTpMKqHACiFRnGWXKRJVynq3\n91wyBBw5H+hzexnqcwi4bskHaNC35PhZDrMvPtp1SXOl2eY30NSNfWsIYwAH\nLleqRTw83QCzWSSxbsqHlF8PG3ZsGXUi1aGADe4Tvltatad1NkvzxxOMVmKX\npt0g\r\n=h+YW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6483d3f44.0","@material/rtl":"7.0.0-canary.6483d3f44.0","@material/base":"7.0.0-canary.6483d3f44.0","@material/list":"7.0.0-canary.6483d3f44.0","@material/shape":"7.0.0-canary.6483d3f44.0","@material/theme":"7.0.0-canary.6483d3f44.0","@material/ripple":"7.0.0-canary.6483d3f44.0","@material/animation":"7.0.0-canary.6483d3f44.0","@material/elevation":"7.0.0-canary.6483d3f44.0","@material/typography":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.6483d3f44.0_1592599117635_0.7861445369442925","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/drawer","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.30a74e921.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c0c1e2f2a19ee1913edfdc70a092e5c2a0d7ab4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.30a74e921.0.tgz","fileCount":48,"integrity":"sha512-ULU5BN/2JVGLaLZmdusxj9j2HxDLQ3ULpuVs6v8p7pCVOo673a55zMp7sXnQANxR2mzRTeNWXfXMnnNOBG7sAQ==","signatures":[{"sig":"MEUCIQCfABInbRh2YEALgj8USr8Rq6NvWpPVsDgH8CELdJHr9gIgDNu6unte4bwE8Omhs0srVJsBy9fPGwTl33q6TgdTVjY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SLUCRA9TVsSAnZWagAARFUP/Rm+BqBwIA8EoTcWzuGz\nhK3nzECQKG8OTSohD8xeGi5zCPpEBZvqSbZjg1dnWWHfcZ211HjuPuD/y0yp\nzFw4mn2zrlI8i4tuM14m9bbB2ZhP4K5HZNmZGRpmosZuAKtz5VTjhyPOtonU\nUMnj5w8WwW6bA3s2gycUCmYC0D+/FbzMxfBezEu4RgYPyaYD0DN2Jndg/QPt\noziv5MxXTSdQhOSZppD0yryUbs/iQ0P8MQDU/D52O0C2h9J6EEn+BAtJOeH4\nShzcdCMDY+UZptBq27SkW9wN0o1do2wNQHP0o7i7JFIBODBMxOShTrteD4yF\ng8mqKqAOORWR63Saoj/9BKddZE5TYXS1eyLGY56wQKIOZlY2Y2maMfGEAx7M\nMnH+uaGZEz8BdMFkXbX81epiGCJLlM3fiSpFuOJQt2sgwReg3llCowEHQdcJ\naEpeCqoc/OQxHomDx1BQ3Lb83uos43UqLR9jCHowpgmIhZZOTeqdmia4eiA+\nRQSo1YolZoQ4MvVqsiIMs0YcGNQPWJyjOsw4zt9PE5C1aN1apnvywIJPpPSh\n6ykVyvhiHeQ1fJt21SMtjNoeu3/gTKznsnYEaxR3ZS06ShqbX0RT2Lt7Fwjp\n7vazdO5LVTVWfrgnebPg9PCrkeZgirTK8HzwNyAmRpRCK9M4SYaJtU5JpUGe\n04Tn\r\n=LuW0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.30a74e921.0","@material/rtl":"7.0.0-canary.30a74e921.0","@material/base":"7.0.0-canary.30a74e921.0","@material/list":"7.0.0-canary.30a74e921.0","@material/shape":"7.0.0-canary.30a74e921.0","@material/theme":"7.0.0-canary.30a74e921.0","@material/ripple":"7.0.0-canary.30a74e921.0","@material/animation":"7.0.0-canary.30a74e921.0","@material/elevation":"7.0.0-canary.30a74e921.0","@material/typography":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.30a74e921.0_1592599251875_0.3375665708298161","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/drawer","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.c20727498.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61cabe239e75ca9ef7265e2dd760018a153f8eac","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.c20727498.0.tgz","fileCount":48,"integrity":"sha512-TJkLEnmkA3so8WqithabrS4e0aaRHwuPcvDRDTIgDqFUfulimd+/923/gbqq9iRy7wzOmqqjcQwYUIHy1XzPPQ==","signatures":[{"sig":"MEUCIDNS6YOKcVbmDZ/qjqIk8DF2QdqVEr5lasuDDwwA5ZPJAiEA+FEkduOBlGfyEe+MlCbWatRnlc8Qt7ZikJbkm9WJucY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SOACRA9TVsSAnZWagAAu8YP/RgaojnBUELUvLDTxrp/\nYUkMuB1NkNxB0Cw6vh4wku8zjA8Gwv5CZhphdgxbEtDh7rSOK31sv55+Jm3P\ncOICEsrmrTmCtZ5dESSVfsgfTTcMVJ/E/ZhBF+QjHd9jfJ4kVN9gZLhqBroQ\nLCQB4dORubuMh0Is8MFbdbAMyXMhEOIJ6p762/oEDHSE42HuJMMrFesciJew\nQR3aRD+/ABFAywO6/unfYWWXB17zuZYWLq8mh5jGrDKUOWQ4LhHOHChAASCG\nvZGa0X/zpLhSzZ5Iv7TGpxRmxnPwe6Fy3VJMG9qLpzVz+ZzZingRaUfLRy4K\ngNvigPIFnlF3cEoJt/9Ag1XnJ5T7pxN0wU9KjAh6dSI6L78SIbbw3zFhR1Kj\nWA1QJ7CbbksvYdiQz3MwNLtyy/FDOBjdR/Qa9GxZt33yx3oDK6EK2qJ2a9F3\nDgg1ffehmODfWWwuHwdoHbRLH5hB9Vmh/m7K+9ytn/v/6KPHgLqWVf+y7GBM\nB5R7VOXfkNwmdzI2gHOgW082FsyyLlFeHuqEbE2IbcJ6J2ji0qCwV1yH+B8u\np9RpDdYaWLGRg2ucQbFOYoCNJmpHSSsfLXUenmzK9qemRBFpwl8i61vGEbPT\ntM4AoEwQFcHVlxBpYpggzsCmK6rHsv41FeH7fjV1hk7UJ9ox1AZqKvDdupPE\nTInd\r\n=V2Ur\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c20727498.0","@material/rtl":"7.0.0-canary.c20727498.0","@material/base":"7.0.0-canary.c20727498.0","@material/list":"7.0.0-canary.c20727498.0","@material/shape":"7.0.0-canary.c20727498.0","@material/theme":"7.0.0-canary.c20727498.0","@material/ripple":"7.0.0-canary.c20727498.0","@material/animation":"7.0.0-canary.c20727498.0","@material/elevation":"7.0.0-canary.c20727498.0","@material/typography":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.c20727498.0_1592599424224_0.43338944452755657","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/drawer","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.4e360ae94.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fccf9b33a8a109dd74e774d1bc8e962a309c8b48","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.4e360ae94.0.tgz","fileCount":48,"integrity":"sha512-s1z0nfRpxMO+THRLML/4a3cKQs4uzRzNH5DHbVTIf/QyUcJV6LsfiaPNWN2ajjLegpXXpvCOxpodYnwts47yXg==","signatures":[{"sig":"MEQCIE+lOHgw72nXKMRYqpZhwfVr21YRpZ2aPd6XR869S9KZAiA2D7inae0J88y4l/33MR/v7/5KaqPg1ZTBwfg95Xrl8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SdrCRA9TVsSAnZWagAA64sP/0CPeEF8rSipgGhjLQzc\n2lFFk1Gx9v3lV1qWfgrD71jpIre5EyGwMwDlU4lUjW0nSrbu+sb5Qo2ekD2W\nY4E+k1SoPRlg2zovj5spMxXb4Wkp1MHGvZemHj5rcQlyLYmFtYFjjg2ypMSo\n2YwaZ4/nUcPOn8pENBBjll6x7hwRdzkSQN9V+9TtCO3vR/ad+VAI5zdkLrvr\nsbWgfRN0fzfA5Ypp1M1Z1SaEOpOyOvys5IQ7gySK4zcT3RU5YQLxgvSA/dJC\nasKcD8y1RKg8LXIDaLGNe1iNNkx11hBibOImQgIoojSl2iE776YCTDuG0Gx8\njc1YbNYELTwGgpI7/tW97VbWwlQ/qrAkV5KK4wRa8ubE8wiP/2H9wRqVHUVq\np7eUGpRkKjwGf2blW6kMTSLXNUljqMDO/AUQA74pJuz3Syz5ckW5sAUlVMod\netRyob0cYZZANx/H9qMoDKtDquiF7Gi4uaV5UbMRi/OATm4b8QDlPnge/JTm\nGyp+WPbAURUlctmUd0jQ6sbU8mKsR8O2lzm2ZR0Ki6KJCFZbfowePz9uiovj\nWH0jC/h6OAP0gBttpcx+63hrcAvAjRUUtx0PT18J+I12yUYyWC8EUuFMbD/0\n2o9bJY6wYn60uc8oUSBDT53O4nZqqjNy5hKf9IgPPeuqlzyALY8gQnqlWo7t\n03bm\r\n=DJom\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4e360ae94.0","@material/rtl":"7.0.0-canary.4e360ae94.0","@material/base":"7.0.0-canary.4e360ae94.0","@material/list":"7.0.0-canary.4e360ae94.0","@material/shape":"7.0.0-canary.4e360ae94.0","@material/theme":"7.0.0-canary.4e360ae94.0","@material/ripple":"7.0.0-canary.4e360ae94.0","@material/animation":"7.0.0-canary.4e360ae94.0","@material/elevation":"7.0.0-canary.4e360ae94.0","@material/typography":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.4e360ae94.0_1592600426632_0.11077030508785612","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/drawer","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.8550fa53b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d0118df6dce45bdec8d6d9fc9167bb42cc74707","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.8550fa53b.0.tgz","fileCount":48,"integrity":"sha512-UMyqsthP0OWPCj64vY/FpqytlO4h7dhsk/O+D9ZS6fuy5eUSN5ixhXwrxL2u7Am79L3Lqj5cIWS6etg2Rp/jaQ==","signatures":[{"sig":"MEQCIHCT2yxq/AT8Iwf6dpiQ4Ithw2sMv2xq2cCt0tqHf3hzAiBMUcipZPEAwgtgm1DOMLnNJx/ADaB7/mA94N6l1I5/SQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Sf8CRA9TVsSAnZWagAAj5oP/RDlMsr7FG7zEzXTsRaw\nwhx+XSjaoR4gLPxPGoAvGJzWfxDTs+1zq1hIJYxo41qHeb40KYhAqxd/eOEU\ntCy14jUJQl3ZUG3zcX2eQEZoAgDOMg7WX5Y2vF55oxwQ5MMoB73F6LFexBqO\nMjPE9e1a4LwtbK94UJN+kZa+gDiFtCI2KHHg8ED0wThmex2sLs05IjTfifdm\nHq2PKYue7N/+AmBoj9rodbbZaLGmLe9Pyg4pICQdiwy2MSnrrWs8dQmeqTRL\ny6yON6EzNKKrHRB9lHqKuAHxZehuERE7+bSKDQjt+Cndx6Cz9p9vX3n6YPHm\nRA4mimJKex7NSq5/pbhjeQa9GDbbC4+1h1PEFta/I4uA9VY9bHa94fKBKgIG\n/Tfz1fuN++OdIZloTAsd8xlI149IZ+JouHvZGIFXmeTQFA+x66fOKUdM3+nL\nxzSGBmp9KGoXTHYEQKEhAIIjz+svUni/stnvdZajXlpq4LBj4K++Fq0De9eP\noxPyLSwNBRuub5+jX9K381mtN1OdLmNtbBL6z3C2zbt/Jz2lmuNoS9fccfHG\nxfwBcjnRELc4s7SXTKTKdN/vNnlE1VIsXW5iOcFDuD7WOlQBckPxfcrJnZYs\nko9WiAJgP/rDjd71d9w60jSYXCMKztCCsqdqRQHMV18vFQqxwLNyzcKUwy60\nTfZf\r\n=5nLQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8550fa53b.0","@material/rtl":"7.0.0-canary.8550fa53b.0","@material/base":"7.0.0-canary.8550fa53b.0","@material/list":"7.0.0-canary.8550fa53b.0","@material/shape":"7.0.0-canary.8550fa53b.0","@material/theme":"7.0.0-canary.8550fa53b.0","@material/ripple":"7.0.0-canary.8550fa53b.0","@material/animation":"7.0.0-canary.8550fa53b.0","@material/elevation":"7.0.0-canary.8550fa53b.0","@material/typography":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.8550fa53b.0_1592600571885_0.308921742294058","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/drawer","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.93ade142e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"261b83ac19ee2d60e93fd3deca7dd698d779770f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.93ade142e.0.tgz","fileCount":48,"integrity":"sha512-fuQGIxVo0YNU+mQYLGdl1TLmuFxmlM9NNHlIpxH/8wJ3W+q9goOzn/lsSH3HtFEX4KM63hpP8ErtJk8sx8oJRQ==","signatures":[{"sig":"MEUCIQD2XAGfA4ppOjFkmvdMFOt1864ZkJ+7QljP+501NvG0swIgbJakSKHWpm6Nb0byqnrmdRrjo83P0/pYbyzrmvNis7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7ShCCRA9TVsSAnZWagAA7NQP/2+nlDLzOaxX/VsfJO0l\ntIaDakyDmsfdplgKccrNRm/Eu+pw/IVr3cdV6ASQNgAKZI/H18V1XNnup20u\nMF5qsEOmoTF441tbo+tMJGsm048UdIY3DMkRD/JWkob/IeQz8zA7JCnEFPwh\ngEavfcqaVjHdU/wXijN2y1MWHWnohIfY6ecVK8b4U6czZZRH2nBeYLbG2UBS\noFyqr+ZHMaXq4yFHXIp3Rpa/zIfYl1DLoA2WAMSXg0x+d30D5z/sptq21MV9\nKVEkhZAM30AECrbYWaRgGbttB2kt+a8NGfJI0rqV+NO0XqSYNAuo653QZqPQ\nTzSfbSAwUbJNvo9tTGfQkh+XAX+bI+PUhpA3n314Kfzr4hL7J0NylYcBPZ5q\nASTl0Up70X7AvE81NeCYg+vDFaooKh6x1QLh3/D/vh+rPDgL9D0ohu7PaqpE\nFxHI278WciU0+oUu1IbQ83BTVhUsF+zaXxj5yrbPulCSjfv8+CO++0mXWR0V\nu8D8XFOArQ10SunZ63T+6NAbCAgsqGmHi5LQVhNlpjMJLVFcN9Pt63y7Ac5t\n+ZE18+rVniIeSyrhtK5ZInXClv8Yy02mmqMF4XwQHUKnLXAbPJqaB2h7g+gc\nz5lEMFNrgqZYQ/OwNnCSP9N/DHLeF8i7jlJWqvBVNuEOMLMJSVeXdxkbDkTz\naHgM\r\n=N7LT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.93ade142e.0","@material/rtl":"7.0.0-canary.93ade142e.0","@material/base":"7.0.0-canary.93ade142e.0","@material/list":"7.0.0-canary.93ade142e.0","@material/shape":"7.0.0-canary.93ade142e.0","@material/theme":"7.0.0-canary.93ade142e.0","@material/ripple":"7.0.0-canary.93ade142e.0","@material/animation":"7.0.0-canary.93ade142e.0","@material/elevation":"7.0.0-canary.93ade142e.0","@material/typography":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.93ade142e.0_1592600642564_0.2632550139230534","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/drawer","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.a0032f5bb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18533c75809b663ae06dec8d159f344144691e5b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.a0032f5bb.0.tgz","fileCount":48,"integrity":"sha512-c1NbjgLeJLZIQGr0/2b+Bj771WDzWikQZPIvdA/a69pveHlOnhq6hrqVtBlGRUw4GGzcFvXxpVKo3rZJo7A8ow==","signatures":[{"sig":"MEQCIEI6lmFstTOWxWXhqnIMbRblB8oTWOE0skKUYWDIPP/mAiB4cZP9ilSLGg4I6FmEGpldBWz0q9A6KtJ4hXtAYvxjDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S4tCRA9TVsSAnZWagAAwjYP/1tk+yqCG6gKBvLLyRFd\n6XEl07Auqi13x1tyNRr865xTiGIvnozOOzM4yMogxkxFXKAIxqXdv37YVBcO\niq3imEUhMJLmN1BMEw8QGqbVPmwVAx9K28Gc3XyIOaq1FPeQ0fpTTzi6wMYS\ncp2TrONJjqJ8Pf5eb+8bf/TzCRH3sNBWpgPaqF1KtKlZjARhZpE7RZJcR6RP\nUyYTsFh83NhvkMZBweQurXuauMFKjKm7743iTqVOLDPcEMnUZVF7HJZGPG4p\nE0xHn/H3lUFbjQvFiXq7IqhGqrvJ6+23qmo3kn+JIbjGahN0/4NyKzgS++Vv\nYILXcZ3rChI8rSmDwGyO5mmbBTRpnzSsEFsPL3yOF59FsWezhbNa9T49a+XA\nycrl7cM2TFg2VGmr6+3xUTnm37eaKmHToICeOhpn1H1Bx5g4KAwSOQRcIcNt\nlOyhLokJv6z3almrImnoQZ2ITGVNcLndUTaf9vOfIRmE540Po+ZrerwXo7Qb\nbyBMz6k7W1ig+qiwbEjAfRQ+ATZxyMQsH0YJ3TjBDK7I4b4rZ76bmXAN3+3f\n4ubxV4JAxkZLST7nd0K3sYa4tSoUJ3UfkjCFBP2cpVEi4mwSnTo+g+YxtpRs\nOOJyVJ80i4lQZG5jYvXHkOBRuL5gfU2QBgwlGUrolEWSglsAYOHEeo+ukGpu\nZ8uZ\r\n=LCKW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a0032f5bb.0","@material/rtl":"7.0.0-canary.a0032f5bb.0","@material/base":"7.0.0-canary.a0032f5bb.0","@material/list":"7.0.0-canary.a0032f5bb.0","@material/shape":"7.0.0-canary.a0032f5bb.0","@material/theme":"7.0.0-canary.a0032f5bb.0","@material/ripple":"7.0.0-canary.a0032f5bb.0","@material/animation":"7.0.0-canary.a0032f5bb.0","@material/elevation":"7.0.0-canary.a0032f5bb.0","@material/typography":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.a0032f5bb.0_1592602156627_0.3208855801707915","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/drawer","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.3f342e721.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0621e03ead71ed463665446b1db6e244ddff3597","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.3f342e721.0.tgz","fileCount":48,"integrity":"sha512-O9MqeJUR4E6HRhrj9otrrO6cer9qzQiSIiQ1lqLYEnTjCFrTsQ9moGJDLIlUjQOaA+X8H/E3yPEyvA+q+gk2yQ==","signatures":[{"sig":"MEQCIFEkyGLFrlwINkKSSuQWSSsg97lolnDaxq0gKJQ1XqzxAiA/gMn5KI4YTgXH3VWi2k/t+BJGIbOLgF1Z6RBS88FtKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6zCRA9TVsSAnZWagAAmAAP/iSQPIRRvgH4roSKw5SU\nMaPGXGnDMtnlDq7U+FsL493FKv368q9mdTPq1J7gsO6aAydgaIEVdtiCqmt1\nQFHyKSi1yTph2VaN4uZdcEdeAgzwaVppOgan9/5oBUoXk10sftqR/bNJh8cm\np7GJsuQFprexb4ZIAONsj02KCZuY2Gm1CKqdD9HaiPL76J7Ibz4rPK2tKyP2\nRbGs7u+lspyDjfKMDMcht3BZgIJN/zkBQAVrn0IIlC42byBn7EZEhHr+T2eg\nQ4ufXV034Zid+S0DnKBq4cLM0kFz+LXtgzIhceIxSXGzgs348IsaqLWUdkxc\nRTmTX6ygt2Et4Im4G83Cef5m95qtcs4Nix6BCZXSFRq+GoYsAChODVHtsEue\nylNUc0sxVAnkMx4H5WfERprAG5hqTR+YggHyi2lVMdohAVwCoT4BFOMKqwGk\nCK9fwxECTdjPLJpwmCyTgBVdeJsnb1iQiSiEh5GPnhZjQmHW4gUoG+KS3WXy\nz1XBOk4rBs1qRoZikavtaF1RXNv4Gaj3TvziKfbfCulqD2ShAyJizMJP1TD+\nIHwlQdZ2tAYkpO1qdpk0kvmP1fVnENeo11PmjrC5FaMbnupdGSZCl7TW4f77\nU01OOjYiCxU+VTZXSrV6ucmsHF00vNQdhoe93dJ3PBwAqq0xS2zbqy6AvAtG\nQrCx\r\n=7xiF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3f342e721.0","@material/rtl":"7.0.0-canary.3f342e721.0","@material/base":"7.0.0-canary.3f342e721.0","@material/list":"7.0.0-canary.3f342e721.0","@material/shape":"7.0.0-canary.3f342e721.0","@material/theme":"7.0.0-canary.3f342e721.0","@material/ripple":"7.0.0-canary.3f342e721.0","@material/animation":"7.0.0-canary.3f342e721.0","@material/elevation":"7.0.0-canary.3f342e721.0","@material/typography":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.3f342e721.0_1592602291491_0.23225920221781915","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/drawer","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.ff89457cc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"757885f6adfdcc79f2097a9f4043ed09d61750aa","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.ff89457cc.0.tgz","fileCount":48,"integrity":"sha512-8TdNJSM+S9uErWcLGqJa4LkLULIxk7GUjr992mVbWn+tQQ/T/Xe48VxPH20yZuTnstbI6sckGb4FAtcoT0B9mA==","signatures":[{"sig":"MEUCIQCAm1zrg186W7lpuEiRRSihZ87od0GTGLAcgssUj0ScwQIgVq21JB5mwsH/w9GZzwSjOObbTxgSaYpu/s6ANY441DE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S7mCRA9TVsSAnZWagAAuC8P/i+ixZlqHrRJ/xywN5ub\nRVS6RngB+4mpDP0/Jydx1MLxsNTX3VuqRbJ3e8CJmufex+V/UOE2Y+H0sUAl\n70pJKD3u1YjefD2tyqPY/AWsQjqtAkv4GNx9YZGm0eFeH0BM5+RnEm24RZX5\nY3ocZScjyG7MCJ8rv4J28hA+uU1wHSuPJTLuqbQyOJ2KhPtEOjyX+mzXjq/v\n3s8vzybFJV93yT09Dx+8kQwA3H88WLbtdzg/UrCOVvHZu2Hrv1TjbAG/6LWA\nZvUwXwYZuv282Q6Kc1hncRs3NhDA6X+v/1dCF5b/GG5gBNYGxdli/gslcjGB\nnqTSmWRBZHY2EEL9lB4I0j6NwG0DWCPKDIVys7pm4Jci/axSPsyLw0xQPu2C\nGmHrT/SRkIYRznDp6cV8KUtiCYnO9bem7YvbfdhyKlfUk602QR5ms32997z/\nLLGJD6TU4tjHuE5Wx2llK3kdSDYBYqZTPl6Zt2wrmlRvafYQf8fFjEb20yrk\n3CCGbw9nugweJaqOtI8PJzSSy5cAM+res0cshwdin6WwvL8tueqPgY1CVRSX\nP9R8WuP4P4Qwz9vvdALNmtDAtKT1dKGBbpQO+UWAK1DDZIJ0pKEAwEEmUgef\n7Z6jCKrfd+XwhjSMGtVDNVOhjzDKWsX5s6d37eYJI+ezvYYQZ61SBgRYCVMg\nr7Zw\r\n=PXdw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ff89457cc.0","@material/rtl":"7.0.0-canary.ff89457cc.0","@material/base":"7.0.0-canary.ff89457cc.0","@material/list":"7.0.0-canary.ff89457cc.0","@material/shape":"7.0.0-canary.ff89457cc.0","@material/theme":"7.0.0-canary.ff89457cc.0","@material/ripple":"7.0.0-canary.ff89457cc.0","@material/animation":"7.0.0-canary.ff89457cc.0","@material/elevation":"7.0.0-canary.ff89457cc.0","@material/typography":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.ff89457cc.0_1592602341771_0.7424360679081152","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/drawer","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.4a1855cf8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9df1a02a75b5a97cf03fe93eb0c4261e674d93f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.4a1855cf8.0.tgz","fileCount":48,"integrity":"sha512-C5Xg9iAYLI21fPjM1uwHvKelwidDXj5fwW8iJrJ09G6zK+X9fGoPmwWRCpf5Z65Nyar45XAos/rg65TPNuZTKQ==","signatures":[{"sig":"MEUCIQDga+lr9OfNuci+Me78QijHHI8SFr8p1D4ea1uP748t4wIge0cpY+icQFDSf6vV1d0GlcYK0vOjqn/EwhH+wm44qZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S+ICRA9TVsSAnZWagAA7gsP/RYBjYTyZvLlvQ6oj7Uo\nPdVj7H0R13y56Au+H6jrHReMhCYxbAZJ9oZpsM4udOlM7qQJ7p5WZo835V0M\nWa6D1Kc/Zpg9UFaO4pjmwZIuwLUShFwJIwd5TXPgThT2ayARStr7BEnzR27D\nLloZZTfzCmQeuUT/RFjfaLKT+9QFTRsSbka7iC0/AJbkmcRjbO79eoG2/OJU\nD+IqmwP0Alr9/MXUCS6svHpZI6GMAHtmCvPzTQBJc3gQncI+D0NuZ63637MK\ns3Uw++cXfR/jIgc3MLv6gj7/8JhGnhv0CGAgWGUnUFskX/NaZncAPpkHSTl9\nu39c9jKi9eWsW3ePIo5rByTV/aLZH9Pu01Y0coOsXvmqQ0K/5MdbCLradeg8\nmDYmYXuWGAMsZgUoR7SoITv3u7xh8afRhDfX5V/FS5o1RSHk+mVZkESYwC0Z\ng6Q37I0fR7dTjkHj0eseGD7DcSyF2/b9DqB7yPlraTkuEL/ITPB/hHwXZe0E\npUZjjNiHfEfAFCUt6QLETeGFjE4UKu87Cu7y21RC/KkP6b45hjr9BY9n4ebZ\npgzIcPNc/NyyrVQeOUFQ1XeIzY4IH0h8lLgKamDysP77CYELujAetnK2bb1h\n6M0NJsbWpNB9oAnRlsUvDHGe+GaXcEZEDATXYjyIIG5vjRcXjTcav9bWBWrp\nAFYp\r\n=+rGr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4a1855cf8.0","@material/rtl":"7.0.0-canary.4a1855cf8.0","@material/base":"7.0.0-canary.4a1855cf8.0","@material/list":"7.0.0-canary.4a1855cf8.0","@material/shape":"7.0.0-canary.4a1855cf8.0","@material/theme":"7.0.0-canary.4a1855cf8.0","@material/ripple":"7.0.0-canary.4a1855cf8.0","@material/animation":"7.0.0-canary.4a1855cf8.0","@material/elevation":"7.0.0-canary.4a1855cf8.0","@material/typography":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.4a1855cf8.0_1592602503965_0.6564612318713974","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/drawer","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.8602f1b4d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af274da14b309a1bb8e75b2deb385b45ff08fcde","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.8602f1b4d.0.tgz","fileCount":48,"integrity":"sha512-9GsrU+po+biiP46wVRXZXmbQC8cRFd3zAvpD+BQKhNQpUI3T68BDkq56wV1fMa/h2C8UZYYraWBFms5AcKjDYg==","signatures":[{"sig":"MEUCIQCpPAcpKsOZZsHwqxt6PWiEHC6RvBJvSoXVVrjEPH4giwIgPIE5N4itgf2pTqh4ZkDIjpDHjxPjsk/FWXgXLirX0Qg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OlgCRA9TVsSAnZWagAA9JAP/3prXezRsAX/o+3WWd5l\ntFhOd/dOZNIpzmk6UEzpjZzyoVEevtUzfdR/uVG59CPwiOjOfHJte+HFXEkM\nwSLyF34C2u5+d/NTjUG6uiQ65+46Lu4dm5xEHGCx21G+lBCfRec6jSfECM77\nQzO7u1tCNCd1NKtMpI4GMTBPnoCC04g3of2jVXOMKA2Ys8WCGeVrVMZx+Gaw\nFhm+OEDLcI6Yh4H7WONIACO6FVwIgqJs7eZ/JCFJante5YmC5FOkErhbEnKb\nYIsfPfD4N05wfhuOh7/DKDnPEBbsua+31GMVGboNWezKYemY6JrJyzY2oGmn\ndyS2G+GEeruIqLDA1sVIVZQ++LUn5qFhRqGwMLEVKexdgI5TriRVUuWNAmVv\nfCUcy4BPE85tai/GZH+9pIYemQJLt/K+M5avjy/ilU8Dopp5VWEMSGKGmYdH\nuZKP3R6+93qDqYgLqQLFGn/jgpzGAQ2kHQABjG79j6w9ohCkQ9lV7TN5NifC\n6aurtO5ZO/Ta+4JNNjVvrhANfP/HqKbg+QZTvjkhxNK54F1vUkqRvXepyMSF\n9vCRNQFAhkVTpfGWJL1Cr3KCehH0pvBDsx+FNd36QOfJycvZtnWASrB+jdCU\nKfCBCxzZfe353QO7lp6HPDtdAst5unbIo5TKDQ+VHleP/i/o19UDJ5Cu3I/m\nIsYj\r\n=15W0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8602f1b4d.0","@material/rtl":"7.0.0-canary.8602f1b4d.0","@material/base":"7.0.0-canary.8602f1b4d.0","@material/list":"7.0.0-canary.8602f1b4d.0","@material/shape":"7.0.0-canary.8602f1b4d.0","@material/theme":"7.0.0-canary.8602f1b4d.0","@material/ripple":"7.0.0-canary.8602f1b4d.0","@material/animation":"7.0.0-canary.8602f1b4d.0","@material/elevation":"7.0.0-canary.8602f1b4d.0","@material/typography":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.8602f1b4d.0_1592846685501_0.9811158689726027","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/drawer","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.69f9f0982.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b5be57a5c7e5a90115d721fb66239632abe335a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.69f9f0982.0.tgz","fileCount":48,"integrity":"sha512-RboX+aUpRBgTLXzPOInz2dwlHyi41+A3t1mKad6C7Qrk6IpPaxXtzUPvrirFnRr0ZwhNjAmTloeICUme3QQb/A==","signatures":[{"sig":"MEUCIQDBm6g/T0jgOFt9tOGxdqDFtbJh2ocGCxVt1+SNvCJY6gIgFVYnrVAeYtFPq3h5pudTxwd5Q1xe+l034VEuoDuPdbY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R9+CRA9TVsSAnZWagAAsCgP/RMZSi7kQgt1qkwStFij\nqFVHocpDwP+v0hX/UbIVIIM2zs+Ky4ehYJM+kJohZYb4xMPfQdGOF2/uyJto\niiWOrhDOjMK7ZGSlmJpNJFD4jJEJhaxnn2bppzdeNftjq/+hgk4MAvsCyUQf\nv5A7N3s+XqcMboBQHLkf6keuNUS1U6TAnepN4sfVyFPkYSueoJGx6F6bVjSw\nkW0rqUXk8mUIqu9Fgvf6pp6uf3Nrljc3CYQNn4mi/wj63FgRSg19dHdFnN4c\nWvxD26bH6Ji3nxagLxaDbWMHwNM922lMC6qqL0LsxNMkFK5e2R0YWeBNO5Xg\nc1h6HoUAX4ERJXBT7EEraesXWFq5JJnElYuTtzdHa87TqLULaWEV9mpAPSIe\nRJDAjR82tdjzoWAcP0Op6uQAdqSKqUvsCEJAtE1f8l1BdFexfkErRTQasRaU\nbR8kRvuvogf127IO3fakAwsRp0pQ/WKQF235J9Owb+5xtTkECUUrxZXvefIv\nJmi3LmQLvE2gcWQabaR3FCBqkntQ+fPv/qhoSpBakqCexC4Rw/QToG9ZKMci\n0U0zd7H/JcYuCp6CynpyqE+H1Xj8U2RL/CBI6es7Mvo1rGx4+t3Z6V+iTqCt\nywIdADjgzYSbAGSCVuCAQV5iU2X/AStPnVAhTLz3NqjMI8CaLraJcghD4aEX\nMVlG\r\n=i1Q1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.69f9f0982.0","@material/rtl":"7.0.0-canary.69f9f0982.0","@material/base":"7.0.0-canary.69f9f0982.0","@material/list":"7.0.0-canary.69f9f0982.0","@material/shape":"7.0.0-canary.69f9f0982.0","@material/theme":"7.0.0-canary.69f9f0982.0","@material/ripple":"7.0.0-canary.69f9f0982.0","@material/animation":"7.0.0-canary.69f9f0982.0","@material/elevation":"7.0.0-canary.69f9f0982.0","@material/typography":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.69f9f0982.0_1592860541511_0.056309770294396655","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/drawer","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.369a293f0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c4e0a8d7ec70a2f2cc70960933a20a58ad48cbc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.369a293f0.0.tgz","fileCount":48,"integrity":"sha512-E+TIUNT4bnNifU59hJkI1ri0vhCJl9k+C0i8CgKzAr5mvA51upS53W+l3wY3s1M1UlXToTFcqQ0fuu75AsJKHQ==","signatures":[{"sig":"MEUCIQDy/D8Q1NqCym0bSMG0jQqqF1PBwsVET6OPKR8Ud9Sp3AIgVKWYIyROA2jqy0QpKFMI86YXpN/Ti0DLPVZ8VH6iirc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SAhCRA9TVsSAnZWagAAINcP/11CRFRjvR9hyApHObyx\nBuAY3LzrzAypFjRbY6svSuWYbyYL5eDTg4tlTUskqxKehraZQQ/ej8PEXVXH\nD10+xJwdwB6Tsy8rWrB9z3g/KgPVANUIlJtJQ3ZC4kARDCW+m+jHMonfVQgA\nYOSm2u//8k9bMbD93rI0fwt6slFjLnkteN2BZ0SMWUrS+ObbL2q+Mmz2kOfq\nrnP42SDxyl5jquAOFVAeRPPvWVfapm3iZWc9b5rmRjfJr/oAfLuHjEyuiI1Q\nZuThGTLXqZUMNqF6Mq+7CfouLYifDLe0F4Mziu1ci3pwUPfj/nrBktqey7wu\nBF/2uFivn+Riy0b4NoytsntiU5VareG0NfORD0dWy4HjHYAYhRzSVK3HP+K4\nG4g1AyCWRiAR7fSOP/AhcaWZx9jBo/uicqy9MCtdeLPIP5Jl5SXXweanFQQ7\nnQ8CGbrMCbCTzrp2YfrGQfQBwKJWPoNn6qliczaFcrtBdBfKqMIp+uibd2ic\nMjQ4E40zZcHbNkrWlLcSPndcM7bLr4eiRfXMd435X8DjQHfSM918k9Tcs8O5\neWqeB5/Mv6KU/Ki+rFA7TxGkVxxZxfGD3GlMQZM3UonfFbeeyjVIAIS8ThPy\nt0d2Ha5A4JuDl9aQJAWNuirupOV9AWIZPeVDH3pN/K9TjFVnaIT4UdLOwZc9\nov33\r\n=PSWc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.369a293f0.0","@material/rtl":"7.0.0-canary.369a293f0.0","@material/base":"7.0.0-canary.369a293f0.0","@material/list":"7.0.0-canary.369a293f0.0","@material/shape":"7.0.0-canary.369a293f0.0","@material/theme":"7.0.0-canary.369a293f0.0","@material/ripple":"7.0.0-canary.369a293f0.0","@material/animation":"7.0.0-canary.369a293f0.0","@material/elevation":"7.0.0-canary.369a293f0.0","@material/typography":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.369a293f0.0_1592860705112_0.6061082860600331","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/drawer","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.f1432b5c6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79fee61a707c9f8297977587243f5781a604c997","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.f1432b5c6.0.tgz","fileCount":48,"integrity":"sha512-Dlc7rtcU7HPg84/FhUhmgWxJj/6td+n6YSt50WrWGIvBVdtS2XLwCEcZPaMGCTMc/LMWjVrfSWehGtkFhTS2lA==","signatures":[{"sig":"MEUCIBbhkSIEkJqDguewYJea8djkPv+CcFnLiHt/FtBuShZFAiEAj0mTmoAY6BwtVeOqt6TfvcB9PTzsQFkGK+aE/ImjE04=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SH4CRA9TVsSAnZWagAASqMP/RpZh909Sb2wJAI4C4pl\n3YvKELQ6xYLjn1hVSCQ+hYVywpUIUOa3v+4CDG8Rc0qW0Zm969A+EETSUKQZ\n3xAfwU9Ah5SyM81353O7l28dwPRzUYhMtvR4wq/UqB6rispysMskUPgL74uQ\n1I6c08HqNSxkec2Yrj6C+Tu6yo7EPrNjjRIqZRgJL3EbN+ljXvXgAU/clmKG\nkQlYupP1LAA31oaGi4e0Wtc0BOZer9M/FGZhlrMM4TFDNiLhcf/PUARweesV\nKvPN1iC2HDFxGD5yiGoNCC+2QxTP2BvH83U7YjsQchavEHd6DnrLO6VOwauh\nAtYPM8aWptrES6763f5/4y5fBm2l9tjlFpea15I4HP2xlVjGfHwR94j/0CcJ\no7aUi2Bqu/PFY6sxbJFtN+Auj0DXpS/7gfSqTRVj9jpJfQLXARBdvnGYhgcC\nq2PIfkKDSeKzSXMo4PpUm8lVcWhk/GuQn+1ASPrTdfh0oyP58HFy720hq+U3\n4Yof85AA6BDPzQPNQ/wJBzs0G2D1lOM1mw5Qky7wFZEARmndY8uLaqYVqE1q\nZyEYCP9E2xkeh7XX1e0VGPzpG+w7H304GiS2QMK0CGIn1J6rFDHA2wZQug9H\nOpGsD9MQLLscxc0Sa0/0v43mAN6yFKT0vISLtLNKA8eXUJfT65/iJuJ0WNzZ\n6Phw\r\n=QU5E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f1432b5c6.0","@material/rtl":"7.0.0-canary.f1432b5c6.0","@material/base":"7.0.0-canary.f1432b5c6.0","@material/list":"7.0.0-canary.f1432b5c6.0","@material/shape":"7.0.0-canary.f1432b5c6.0","@material/theme":"7.0.0-canary.f1432b5c6.0","@material/ripple":"7.0.0-canary.f1432b5c6.0","@material/animation":"7.0.0-canary.f1432b5c6.0","@material/elevation":"7.0.0-canary.f1432b5c6.0","@material/typography":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.f1432b5c6.0_1592861175845_0.07078338887594637","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/drawer","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.4757a16b4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fd1b73f054e47313242e9df6739aaf5b78137de","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.4757a16b4.0.tgz","fileCount":48,"integrity":"sha512-igU0hM/GfKBEdEHjez81zfuFx0u5TX9phWLeuC4m2wfPeIWtdmbw0ZgxMt9QGYB5Wt72+x9x/VgXVKWporD1mg==","signatures":[{"sig":"MEYCIQDBZ6EkfOJyt6+wywFl+FI0Tb0vlPhG+tqC7tmVpriTNwIhAJQdR7xVTfVOshQwrkpO6BQWYFqJ+V47D4pPCFdZfiCK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SiVCRA9TVsSAnZWagAA33sP/2fxm0zBt8kIFMcj8hm0\nlDB7zegP5odUVjuDCf7vj1AA1WDWtPyYPH9aviH/TbXVnna51S6WYwxNdyrN\nIdkU7DXFcJLWctOZD793IbypWjVEfWeFpN4cSbBtKcjGt0ICwOXbV+ZPy5AV\n7oIOiUqNU3L+wusFZfaYVjLX7sJZG6zSZJETeK9prOf5xCjdMU5clpq7CiYT\nOjQzTpZ/6v0aJTs/FfeUAz1SyicYBprkIbXxKENyV4OE4KEvGVjvbXsQo4d2\nsWq74Ja+2H90Y3NnX9nwCQM6pqUjU8nVSEqZPpdc3ueIZ2tMVASMHcMP5/Qx\nfNajFVhwh5c6PIL9XrEDg1ABhVb9mkKkgfpkznRyUoBuVdOWR6AdhU9S7DPc\nAYZDQkT2bKNE2nhskAadC0YYILDHCMoIC6aqTPMzew2VcAiJgDkczLxCRx2S\nVTWbCdiM7L9KnkFM13gZyXnp89FLSHiPxaxx/46oDbL2RBcold5IXeHi2Y8E\naRwPgbHTMzpGpe3ad1PlsVAhUB7Q9ZZXFY3/tstvpblaWFe6CL6UFmwEexQ9\nbXw3jxStQHlVtWbIrlgiRN68vtkmdp686d4DPiPhD0HaKR268YQnO+SJLJ5j\nDQgu0fwn9Ekk43ujaeBTvx4yzESJ2/gPmqIC8ZE6YwEZXPRwRzEnkkWq17xk\nCB6u\r\n=gWKZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4757a16b4.0","@material/rtl":"7.0.0-canary.4757a16b4.0","@material/base":"7.0.0-canary.4757a16b4.0","@material/list":"7.0.0-canary.4757a16b4.0","@material/shape":"7.0.0-canary.4757a16b4.0","@material/theme":"7.0.0-canary.4757a16b4.0","@material/ripple":"7.0.0-canary.4757a16b4.0","@material/animation":"7.0.0-canary.4757a16b4.0","@material/elevation":"7.0.0-canary.4757a16b4.0","@material/typography":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.4757a16b4.0_1592862868849_0.3340206440787339","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/drawer","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.f8f472762.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e6ffcb9ecb6c289dbb619eabe6a3f48e02e006c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.f8f472762.0.tgz","fileCount":48,"integrity":"sha512-u4JjcWwPmT/DNYOOnSrfv+GGc1DD3DCey3Udd9/TA6pnYPcbIoQCHfqSHvsdHOZI3/94BaYmjBe70XVvZ8iMww==","signatures":[{"sig":"MEUCIQDDJnRplwnYS7Gp2e2lfklQsjzLHSeZ440wXp+0aeaUkQIgJbfqINSx5E7lCi0gmQGPezdayqgZM/SkhUQT6/zrYLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SmFCRA9TVsSAnZWagAAd4sP/iccGwwhk2IgdcuiKokY\ndq/NCcubu2DbA2ojXswHMlATL9+oskBJNMKG7DVWFxsBZSGfGCI6hBOCYabG\nbHboB41iC8i3QH1C6Fqv2zQ/rqJRDiwBM9lBHPbEf13UJjniJQBPziSzz/bi\nxK7Zkc6tpOtd1ktsJxKW4uoc+gHCpn6ObSJ9TyyFex6xchdvOt8TUr/JXuWA\nNsV2cX2JVStUFgAtz3AmK5qwKZXiGNwktxRjNrX5rjawVGdAEubSaNq17XUS\naJCNfHrKsw6/BhYhUfdRiRBrkI8PlFonCE4Kop/Pf4zczlr04wT3+VkSdsMl\nMhcXBORJgjCQK0Y3MDWZM8BgpiGWwPQjvukOtnsVRp9iSukVV+8xARGicfM/\nSFXh5kU4DDMFVvdzDQ3t7TA5w1r5GFI5SQBOQBtfNIwf1vx8lhZCKFra9bbd\nRJ4QNc0Ckp18hLp4If6LHtfhTy8oR1LhmAyZFGXUPRovDRceQUIv2P7Pdd5I\npnJj5RZJRrWq2JTywQtpyCxa8K5/EVsTAhIiYR+bi20BG02yK/GUJZtR6/mL\nsit5tbdnP574799dfUa6O6NLbAeeW8okiFrRUqLzAd9wbcWVs06uw3TYaN7A\nS6IAb1kLpCDd+INtturE9m3mlfeOBFiDRzUOWQkbFfSjHTqQ3qxjrwCb+Uda\naJNY\r\n=ergG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f8f472762.0","@material/rtl":"7.0.0-canary.f8f472762.0","@material/base":"7.0.0-canary.f8f472762.0","@material/list":"7.0.0-canary.f8f472762.0","@material/shape":"7.0.0-canary.f8f472762.0","@material/theme":"7.0.0-canary.f8f472762.0","@material/ripple":"7.0.0-canary.f8f472762.0","@material/animation":"7.0.0-canary.f8f472762.0","@material/elevation":"7.0.0-canary.f8f472762.0","@material/typography":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.f8f472762.0_1592863109273_0.15923466520117802","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/drawer","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.7e4d55c34.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43454fa546640872799932d8902b20a768d802b9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.7e4d55c34.0.tgz","fileCount":48,"integrity":"sha512-YAVyjoTwyY+ndf+WN3OZfI0uB2pLvL5sbcV7Wtp1z8xJkNetLB+INmiNbaRahx7esl6Y+I1YKDQ+QagXAvup8w==","signatures":[{"sig":"MEUCIFwHSh7Qi9hzmEckw+1pAQ6YvRLTkUkqg+Z6UEW0OPo+AiEAnwEiGs/rzXNsTPr0tskdhGtnhJbAiZKh5rq/BzHKUgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TD/CRA9TVsSAnZWagAAUUkP/irKOFMk6+dGCV86SFAm\nsvphJ7TmT7q4R8ony3dBVevVdi4eKfF41jNbKvHevdjkmxbmCQONS1GZX0ZE\nkuV9oNBDMz+yV0Lv41V+PFW33po1pg3tXHrv/fRW5fjU1alkrYyH/YCF/TxU\nbCpI4Dr42aR7PV85ebscJERUWE+b8xz1hHB6Ow4D0/jaUweR/Sy8x6W9g4PY\nlHHvD68yywe2KPtbIwniLHHXPSOcO6lz9SK3QcW514z0M3aTa0BuzenBcyI0\nuvFUYymiYa/Jte4+swqYUx76FuFSBw401JqbJbQvVps+wwlJnYqYVmCIK549\nEmPdZosqpbhibM+5w8EGkbYIsVAzZU+5OU6QYQbh4sHGcmxmsW0GQrlIu55S\nZCYqrAAv3MhoYnvoqTx2bO7uuMFdj+wbxBbHaufF/WVOX6hYaGk++XpbzYxi\n2WRYemihXyL7XtvOazf13Xga5xe9bfdCObc19Ye5JnQrzmuIkd0XLawXPTWD\npZlyg1OOEyB/S+4IH5Oo3IdCqb9s1VP8oRbMb8ZO92f7AlvQ0G7D+fabUc9T\nsroV5aQ03FKnL4pH8iU2Z5fKp2qg5DSk1Hy8K3VNMWrxltHi854wiSnBhoi6\nn/Io4D+r3WqAoM6xrZqqgW/ubnp0pwv9vLhdZgUSI8CnQnmrLTpCRli2Mabh\nvDNN\r\n=2OIx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7e4d55c34.0","@material/rtl":"7.0.0-canary.7e4d55c34.0","@material/base":"7.0.0-canary.7e4d55c34.0","@material/list":"7.0.0-canary.7e4d55c34.0","@material/shape":"7.0.0-canary.7e4d55c34.0","@material/theme":"7.0.0-canary.7e4d55c34.0","@material/ripple":"7.0.0-canary.7e4d55c34.0","@material/animation":"7.0.0-canary.7e4d55c34.0","@material/elevation":"7.0.0-canary.7e4d55c34.0","@material/typography":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.7e4d55c34.0_1592865023116_0.05159008809023846","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/drawer","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.bd1dbc91f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24802bdb2c70bab4e09daa805e42652f7fa0e122","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":48,"integrity":"sha512-m+3Ps4L0o0lpvNBUXRGgRbV1km0RuibiVUJX6qgw1zqjQ/B4fhwq8FDK76X/dM9+9YKa6h2FRPwqTIKf1pnDcQ==","signatures":[{"sig":"MEUCIQDTs6GoUBjqw6pbH0cFi0TRtg22Ta1Yp+oeka19Bh6nvQIgKTYQg0PqFkLBSku68bCtJLiEU3GZhrdeIjfk2+h76WA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hG/CRA9TVsSAnZWagAApCcQAIP2jN9/jyu/wR5tXvU4\n9kWw/mpJ+mn28mb3al0sb0RasnrU32qL7p3cvI/P6ugqPDkr8pINdbwL6ni2\nAVu8DJHJhqpGcTOpqy4LRZ541T/oZnYIxIBBr2IGNiNWddcSMziWnfmbqu6X\nT7kr6A38QdtTnsUtoAPLJYjNoHpOOdouOeBM1UQnpDjJAJBOMLcHg/tNmZPL\nzWmTUu7J3snl9feeUgKvLhEEQJe63u0lEvcyh+zYab33LCIT7FBBpr/sM96V\ncNp99KQCGxIGdK22S18utdHdXjhzhEyGAG40AzhlfcrfFhImLIVEmqJ6uzVg\nHtk/GbgffHIHARM3pW7wqaf3rhryYGUfwJrDU6CI3vKnB2hgX7GbZbTG3fYs\nsl6ZRJMb3SiMjMD9okVieSLc9mGN5TJfl9saB1VOJ83jEgNIG7KcA7Whb/ep\nXkr1PL6phAqFJD46I6ul9/Lt7jheyNUtC/NCrdbYEOKu5Fpp5eHtwuyGLWJ/\n2k5O32mQMSBOTytuc3d11UJtou9op0E6pkPD+CSoIa5v+4ZO25BQbGOcevqL\ntnezKlEpqxjpgVCPK4VMK8POSqvixZHb7bLRVUgAZivV2GDPWIGK5jJIbizy\nVdoreutkXHKeGGLmJwlFG95QluHs2WVJX7jU6jAPYd7NW2ZblRmGpGxb/dxa\nu/RU\r\n=ija6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd1dbc91f.0","@material/rtl":"7.0.0-canary.bd1dbc91f.0","@material/base":"7.0.0-canary.bd1dbc91f.0","@material/list":"7.0.0-canary.bd1dbc91f.0","@material/shape":"7.0.0-canary.bd1dbc91f.0","@material/theme":"7.0.0-canary.bd1dbc91f.0","@material/ripple":"7.0.0-canary.bd1dbc91f.0","@material/animation":"7.0.0-canary.bd1dbc91f.0","@material/elevation":"7.0.0-canary.bd1dbc91f.0","@material/typography":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.bd1dbc91f.0_1592922559103_0.387926555582504","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/drawer","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.31523bc62.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1376ac7d7a719d4eda14b0d0226f8859ad843d68","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.31523bc62.0.tgz","fileCount":48,"integrity":"sha512-M1PcfihrwUs/N6+Tvmli/k2Te1GusIvxhZ+ryV3iOaDBzQEiMiJ6NNQZ46oW6QmZ0zJ4+FbFqnFWh1v9OtzMzw==","signatures":[{"sig":"MEYCIQD4tLYpzWLBRznRztq45uWUbY4xmpxM2IEUWRQimacnSQIhAKelI2mmid82xeJBvMEV66E2reMSxMLPrkv5HcEhpzu0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hMVCRA9TVsSAnZWagAA9FoP/3K5q2VeU9A9wZAYAkb+\npCREm9RCcQAkp1czJwp48qm6yJu5XGSe8pb0B7oaQjxOcZBLI7K5W4AMeFJl\nRFS6T8gx5XUh/5bQaJ5/9ROgwEJCtnAfNxsjncgX4WZryzmk2/Zj9W9Vp6hQ\njDfShLnRDacwdvoJ0N4WJqfB52RjpzN+3LQo9ndV2/uGZ6nql7AHygcs1K+8\nA3UYF1rZ7/rfMt5eUU1Apa7FszsLcR68Ks+DUQrw898IkqwpT0J4AieSOybS\nzPmXX4/1UQ36nOyoCpswDwMjkYuuZ02Qd6BJ1n+GBwT+mbiBmzKTSHSOktYs\n3UNmfXA+fMavu/kBnmoZQnqxBPLkfHAHoBr8y6pKndh+pxZvkqmObyV2S7eH\nVVJSVuckRSMz6IBL6tyJpbuSUtH4vzhobMGFaxz9uAI8I17fCYIVmPoEkSg7\ncfNq0/kml5+BJyTHRg80Yw1znqalSVipZoNa6balm2naX1lMV5oFnWcdFLRT\noEnTokF/SXvtBoXcQEd0xsJJZOmKV6tRCHrF5v6C4hdNyWOtqgHK7x+/W6Di\n3LMAoHhVLNOrXiq3sIf6TRlT3shnsEnrG27r+IS/Fq3NmdYXAByEQWyk0Zn2\nzP4nwVgyD/XpbNkw+HTF5itthpinHkKfCyIovuQ7AfH1KvdexhSQ5m4BgB6O\nS71s\r\n=k4cW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.31523bc62.0","@material/rtl":"7.0.0-canary.31523bc62.0","@material/base":"7.0.0-canary.31523bc62.0","@material/list":"7.0.0-canary.31523bc62.0","@material/shape":"7.0.0-canary.31523bc62.0","@material/theme":"7.0.0-canary.31523bc62.0","@material/ripple":"7.0.0-canary.31523bc62.0","@material/animation":"7.0.0-canary.31523bc62.0","@material/elevation":"7.0.0-canary.31523bc62.0","@material/typography":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.31523bc62.0_1592922900327_0.162107156817467","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/drawer","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.a96b6d4d6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c85ea10ee4e353ecd627ebcc04836e9d7c86851b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":48,"integrity":"sha512-Pci4GT8oP8Ax6ykI7wV+8lgR3OUr+RdIDjFKEPLR8I8dZ/llSlva2jix0c4H/X1mwY2U4ShiezfBrL6kLii/hw==","signatures":[{"sig":"MEUCIGKuKSeTvo2hZNWLqM0mD4sdCoOdtc3GdqNq1OWqhcELAiEAl1vbVRhA9jTJe7miuE/lWFGA2V4FSzWMqWgJadV5B50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hT5CRA9TVsSAnZWagAAI9MQAI8bZlsKPjCwMQQxv89r\nDpOroebNy4q3uIw7EozPhvIsZNvlXEju7CqWDMdDvS9p3dJOX/AL29Z23ogQ\ns8zClPWGwcYeZZU5pZK1gNDh5/sr6nor2kgg1ixFQ2njN85TwefHF9wJ3t80\nhLSIsYeQEHya8G3y6l4Lbyjc2xVlTFdvkJRE5SoQr6zXhAC5MXE73wQVaT9Z\nfrcvwNn4iZfSPa6ZAThC4Gze8cP9QqkPUPnV6T/7Pa5i7oIt8vHEsnghBi12\nMq8QZWCFylu9jBLmUQvKM/lRXrHMsoWOGwlhPyb+sxGVOKSefSW5Xr8HLE11\nE+e912NJquNTNSlANUf1NV/VwT9ZY2FN4OkSB3QUcSxVOsLGQ1y4WdJPMU89\nzpVS+Hy0Vm/3wAVcJ2wb1RNrmG9TkF7vfgm4BISaXipHWQIR80rcRbUsHNEJ\nKuKKt+/KgXWpwImJLd7AeHF0uYjNKxjx89AECYWjxAoUT+MSy4xePG3jrn8D\nakM2EaXpLje3sAJUt/VcqZOIOltixh4oycXVwiMQoXHGdmj0uoHTFKmgptCC\niegBlsiWO25XwDYgRS/lbGxHfv01RuBfsZ3RcDIr7zIyAvOResc38JDbNTWj\ni43xkphEHE+uZAmp+WzCVzKLa2bKIzR9Gu1QogmrtN2Xof2BVP65tGFysCjk\no1o5\r\n=afse\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a1de2723d32536d695e5bb779b950be4242fede4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a96b6d4d6.0","@material/rtl":"7.0.0-canary.a96b6d4d6.0","@material/base":"7.0.0-canary.a96b6d4d6.0","@material/list":"7.0.0-canary.a96b6d4d6.0","@material/shape":"7.0.0-canary.a96b6d4d6.0","@material/theme":"7.0.0-canary.a96b6d4d6.0","@material/ripple":"7.0.0-canary.a96b6d4d6.0","@material/animation":"7.0.0-canary.a96b6d4d6.0","@material/elevation":"7.0.0-canary.a96b6d4d6.0","@material/typography":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.a96b6d4d6.0_1592923384796_0.62056289196542","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/drawer","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.ef3a09533.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d266ccc09532593908dccd104215d121be1c32d8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.ef3a09533.0.tgz","fileCount":48,"integrity":"sha512-3af1yTXMUxdYgO8UxWJAp9uUOEMZgqvgjwISBgdbTpGUxwNkzz+u1LxO5J9Cbumg8jTa3G+qrNHa7FFqUKgZ0Q==","signatures":[{"sig":"MEQCICFQLXC0UaNn0buMSvSliud5RuAYhILcAVFB7FDcWkN4AiBca7UHR2t9ZpB6hzuywKEyzMXjWdaPNQafsR9woSIekw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hZqCRA9TVsSAnZWagAAvOgP/Alhn4aCsSWnW+hBbbul\nL9F11Ntl/sRu6VQRDNlNkV3c5UwhB/SYhnJGEyi+zR65dgK01/7tPgh6ZDNq\nP0/9GIlL6h9x/Qqm7d9XC5yKesDUNGojOelkBAu9UdoXUZVyNID+HulG6q2I\nhY5dt7isLKz8KqFf8EZMLkInIjeHD6K4WdSbSJjuUON3FtVmXMHzBkTe/xpO\nD1SmSM3X0zaNqE71VSUEe3rZAmvd3f5NrovgC2fMhK1af3/6PBCdT/Krg9Vn\n8DV+coVhngXqsSoS+D9PLKoOHBBaG4NMMVkYTRsLmtHYfj+0s6kPLHNStqr5\nfoZcawjvjJUD5iCFg+1+OUmJJzKBJCclrU4qdyFZfcKyaeAga8OTfYQi9KAW\nkBTf01GSoTs2t3nf73cjoi6YyA+SdtVJIirqB45UfiNfyFJ6oWvHjAaE/GlH\nM54dtz0oMkkbmPndd22oiGdpThpuKdZBvGSDlYUt/wJFYR278G6ObJRGVOTe\n3mZTtYulbzpbJVnNaeZpqM8lOZ/nt7EixGoWzBmECV6M6pRY55/GtduJVKCL\nX+fLihnHyVINDyCaYKVG+CokwWpr2odBedTDxwImTHeCj0zkdIrnr0RjcLpp\n9/SKq/xoCI2qmK5bHkCk6dV0qnRzbloMr0Rkb9DxTq9YIW//tsOTEbnj8N7D\nqD7Y\r\n=PHel\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ef3a09533.0","@material/rtl":"7.0.0-canary.ef3a09533.0","@material/base":"7.0.0-canary.ef3a09533.0","@material/list":"7.0.0-canary.ef3a09533.0","@material/shape":"7.0.0-canary.ef3a09533.0","@material/theme":"7.0.0-canary.ef3a09533.0","@material/ripple":"7.0.0-canary.ef3a09533.0","@material/animation":"7.0.0-canary.ef3a09533.0","@material/elevation":"7.0.0-canary.ef3a09533.0","@material/typography":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.ef3a09533.0_1592923754100_0.7224651801935296","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/drawer","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.080965f39.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0d52f9af34b6d76a8604ebd9c8cab5e3bac6183","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.080965f39.0.tgz","fileCount":48,"integrity":"sha512-adKb9eTzixOC86q8rXebKvFFVEa4fCbAJrwCL+WkQZzlIpC9ewHRZKD1IBLayRsMOWyrLzoEFpoYIkBkvIec+g==","signatures":[{"sig":"MEUCIEeIs7Urvktspz50q8dORRTutUuHWD9jkN8POB+Cf4b2AiEA0l2ZxkQXPmb3NDi7wsDxWhSV+ElJVS7b+LD6pTQMtQI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h1LCRA9TVsSAnZWagAAiYMQAJdDoAjpPGtTEAAmeC0f\nW81mYNT6NnNBOyw392KmkoHtWU47CrJs2vaA+OgnW8D2W8oQa+JnPJW/B0oI\ncFVqAP5vC4jfZJH1mrccIZhfgRwez8XZb+HtgVriJbS+1Z2/fCOfykODJDF7\nHLEs8tX4LeEuZ7pB648SIjNGZH8avOQ7RzJfs478jOuqKaCktG35+U4m8l1U\nF9J502MrfQzTIfXOk/aivPJ3/CYhy7aH2f8X2e54CRwz0qys529tIYdoXbbV\nXm9ksx/AHMSx4pFZCswKZEnNHoPCzQqi+Taw0jc4Y3bm646iDhESCM7qy1oG\ngOYuxJGsvL8aP6Q4jJkBIwUmTDAU3SivEdzahOh0A3nOR1oaQgG8b9IeE6qU\n4Itya1ayVPB/aRSMuPKbcY7HV+zYVRljIAXCeR/uQ6zIX7+oSnm/e9fwx1q9\n+ENVZxfMTiORryBTc0iqHXyIzHykiDqJpzYJNJpdaeobEwNJIHruNaASrMJh\nuxvO8QGGa7qLdo3KghQJ3boM8FLSapAK/trM+Ugp1eOwikCsWJfpcSd96szn\niplp7fs9GNxnzvx8kSTZK7ONCZ8NMRjFeK5axAbQWNj0o8jEaFFlVqbBJDHF\no7KmT2tzvsUcXNnUXWYJIaFE1G2mcoOcjarcvrm49n9qijUMrW0GPRRr/05N\nd2Id\r\n=9hiK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.080965f39.0","@material/rtl":"7.0.0-canary.080965f39.0","@material/base":"7.0.0-canary.080965f39.0","@material/list":"7.0.0-canary.080965f39.0","@material/shape":"7.0.0-canary.080965f39.0","@material/theme":"7.0.0-canary.080965f39.0","@material/ripple":"7.0.0-canary.080965f39.0","@material/animation":"7.0.0-canary.080965f39.0","@material/elevation":"7.0.0-canary.080965f39.0","@material/typography":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.080965f39.0_1592925514760_0.9472640072426763","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/drawer","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.1bd67b65d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e36b10e7e5a8fc83d822f9fc913eb60cb7289ee4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.1bd67b65d.0.tgz","fileCount":48,"integrity":"sha512-2d+9+f7p6JWaTfsSnCbbTWAIik2rqw8DtpHs1YhtyZhmjTyn+YBD5na77yVP0W7u63QUlB4uUOfV9Jn9NQztTQ==","signatures":[{"sig":"MEYCIQDi9kABFwOo/VuGupeHoDWym3lrrw/WvsuZOkApQznlnAIhAKiOvm0VU800R3Hnox672KAK4EtxJ24+iUngn785/ium","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":902885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8idBCRA9TVsSAnZWagAARscP/3cAqaTXkjF6h2P3WHDy\nQFauh5pQHD9sLv/XrtvXPZaeI6m+SA4+IaGNwqwu5KhtZ5Lrqx2EWZS3sVMm\nkEMUWxJZSeI1F71jiVSimO8fW4z3/6kq6TVomdL63LjEUIXDGyijeapI6b9z\nnELHGPqoMBP2dDVfigrWmkWShXKHgvUtXSm+QKG6TCCZG5zWrZLjNZYsp4jR\n8ESVts4K8Tb++u4PVDZpjT0RCa5WaoArRYTFfUL7KyAljm671LtzWv0iX0VO\nG613Sl051suqAx14pGgTInVo6fNcDw/4gSD6F/9e4UgKjRAqL7YcvfzuVxzs\nQjYsyGwEFL7R+R15VspPnIdCDd1bdMGSZN3mZ+LRA1XmqVtI1GLF7vUoYrZx\nWlhK9bLF0xLJDJGF/8JiDNgJXbxfQbtip4aDweJgidgVFsNC8UdfhRk1u7yv\neXkN815DCOcPGNnD97wpPpZbbItzH3mMMVsgt88g/SzObmlI0KHRF7O/62HD\nZ6Rwd0Bgn63guv0TdhY7Jbf8Z4fqpXid6VstDKrsVQSvPuMDytNG428ANitV\noG/CZRnQCMDoUJjpBDTTgihofG22mRpavX1mgLt13UD+sDgFFGfVKrrrEbva\nuzkI1UqOJLndr5pEjzlzolpkRW6OjkFKruOjzJN6DFQlU6haE52fO10B7OWr\nPvDV\r\n=x9m3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1bd67b65d.0","@material/rtl":"7.0.0-canary.1bd67b65d.0","@material/base":"7.0.0-canary.1bd67b65d.0","@material/list":"7.0.0-canary.1bd67b65d.0","@material/shape":"7.0.0-canary.1bd67b65d.0","@material/theme":"7.0.0-canary.1bd67b65d.0","@material/ripple":"7.0.0-canary.1bd67b65d.0","@material/animation":"7.0.0-canary.1bd67b65d.0","@material/elevation":"7.0.0-canary.1bd67b65d.0","@material/typography":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.1bd67b65d.0_1592928064916_0.8995376796907208","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/drawer","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.18ca31248.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6754abf46f23cf33a7aee2a652d1cefb756f88f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.18ca31248.0.tgz","fileCount":48,"integrity":"sha512-i/+ZTj1QljyA57n0VSEVOvaRA0/Eg5xKFOK2cyeZKnHj+q8VzgsaPHapeZ9MrRGkV+NDb4Esjtqa4qz/2uhGjQ==","signatures":[{"sig":"MEYCIQCsDV2fs0Ug6gqmUr9o56F8JeDgPD4OO0JkEf1j+9dQ/AIhAIR/rIGSfTePfhAVAVRwCSBcHF8sf3HUg6p1VQIuSSTd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":903223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kk8CRA9TVsSAnZWagAAtN0P+QFBa6ZKe1tpt4FYyWvb\n0IVGynEvI9czsGVad2ni9glOrN1c6zlgMXtipyxrZlOnFlmvt0px7K37/umm\nmttt2055TN0HfX9zq1DvcsbUBP5HeWchpv7q/CcgV7bEeaIzn6DNK9fz+i2V\nO7HDQkje3z/HQ9rW3v0RltXYO4W6cH8lJJnaPeciiF7KdYbXhyLtKf67WzPd\ny0kGsNx23M1u1rKybFZYS8y8sjgYJz47Rhe/uULp2eXahnHc4imTKFWWWJa8\nE6i7XrUksiugyjW3k2f3pElQCCeknPBQZ6Z8tE0AQkfP4//QFpZsGIxpB82W\nuD16h0VEvNJokiwOWlMywTc+tYlJ9Wk8I9NmFvIXU5xR5Pmt+VEj1+nGJtCv\n5eHKCKdbruNhIy7d/sQJLR6vQkVmwtT/aqAKNIZm+sHrtbQxRhvafIxeCQA8\nEEkjN217OMNsln7ESZQ5sloM1tRiLuZK9yzFt6mZhJYZ7dmYaYhL2OpUw+4Y\nPhxeSGeeavFqz4HhF3Hu9ZnBwjcZXpmaFEQJAA/8ZaLui2KRN9bMJV8qk4WU\nd/gOUrK5yxYAqfiTK+DzMwkw3cpJAgHoesdTrTeKKFMxJDDPhTOI1jOxOPKx\nDAtx7vrfqpuHTWRL8xWNi+BtepG3Fj0QJ9xvqN8s2+4X6U+YLmUwxGVXpAIt\neFNB\r\n=j1TX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.18ca31248.0","@material/rtl":"7.0.0-canary.18ca31248.0","@material/base":"7.0.0-canary.18ca31248.0","@material/list":"7.0.0-canary.18ca31248.0","@material/shape":"7.0.0-canary.18ca31248.0","@material/theme":"7.0.0-canary.18ca31248.0","@material/ripple":"7.0.0-canary.18ca31248.0","@material/animation":"7.0.0-canary.18ca31248.0","@material/elevation":"7.0.0-canary.18ca31248.0","@material/typography":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.18ca31248.0_1592936764133_0.1950411038384514","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/drawer","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.39cf00836.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba775b2e2910fdebf73d65162fbe99c35c491bee","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.39cf00836.0.tgz","fileCount":48,"integrity":"sha512-QS45n+1eHLkYVygc2xGZq01bOLn9N4npFzfeMN0bizRzGwmO7Eo/5iHK99iwFIJfp2nCDKLob/9QXXky7VZ77Q==","signatures":[{"sig":"MEQCIBnDWIXXaKAS3OgtGYoJayv0kh3NIAvn26e0AP0jOfvUAiA5JnWkx3tLOAx5ciUUg7l6hi1A3BAzM85+Ceg86EvTWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":903223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k6cCRA9TVsSAnZWagAA/j8P/RB0uv2S1c3RnI09O9fJ\n9pxQyLc9SKf013PxLoqWUkfbJHJQJuZvhuHws+ezFPIkDHRjAgkrHUKh2BVi\ngismZrErKDKi6QerhlehOELJ8fKYIbyX6vuq7HQnqzcZq6dRy1LnZa1rkDqC\n6jh+5USKu/NKfR3Bc+EyFEqlm0f4Mf39CcCC1IQ6gPw+vjojKFRByP0Pxq2G\nVUs3RBLHRvAVBw6DfenPDg55IKk5P9EZoJHPWBfHSM/8OfbRNBC7RrrWalQB\nuJnEBJHMWQSY/pzS38NPvNBoMQSyolf82VaV8ZVVDIbJqMkPO8A+A0q6Iuc+\nFMN9rrxv06K6n3K7yTElRh093fuI9yAOtEnC6utMYadwv7veDUkzYm0xhH1M\n/Qr1vlsStzQ6P/EG7GTicvgwvHKhB2ZkSN78rSXGd+OxIZda5GHgW3t7RrlA\nC3JgtF1xIiOlxtexVqqDrkeSJbKymuqLD3JbURVS1FHvn6PCkxRD6sguISul\ntrIxcpxC+v7dJyOfqVeeL9VDVPGaWppFHBSfoNY6RshtM1WnvqATI33/Z1oZ\nPGCrIJYYLn283Nyfx65axZ/RKsShDEqdH3qU80aAf8OoGg0XBehTkXlxpi2b\n5Nrq+H9sjnVrG0xPTed25xg/usV1ygiQiV1w+dQYcF6x/o7iQzizxzwinLE1\nrzR0\r\n=coIC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.39cf00836.0","@material/rtl":"7.0.0-canary.39cf00836.0","@material/base":"7.0.0-canary.39cf00836.0","@material/list":"7.0.0-canary.39cf00836.0","@material/shape":"7.0.0-canary.39cf00836.0","@material/theme":"7.0.0-canary.39cf00836.0","@material/ripple":"7.0.0-canary.39cf00836.0","@material/animation":"7.0.0-canary.39cf00836.0","@material/elevation":"7.0.0-canary.39cf00836.0","@material/typography":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.39cf00836.0_1592938139780_0.6172542181824359","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/drawer","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.1bfda9e05.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bce276f04e3c204699c239beacb892e56382bf19","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.1bfda9e05.0.tgz","fileCount":48,"integrity":"sha512-eIIGd9K7TqpYFQB/UcpTmN+04FcOLJQ7C/QSRTKwJMZp4Wy/XG2dJgm6feUSQuHErtKtfL00XZtaobKtGZnuWA==","signatures":[{"sig":"MEYCIQCWbkrH4NCq0t/fENnM0kaVMgXT6J9HFVveH6RxcnIe5gIhAJtIWkNN3CxlItHr8B641NOcsGyJi1sITDwIXZPIwYMl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":903223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lGJCRA9TVsSAnZWagAAhcQP/15K6bRFwbazjK7j5BqM\nF+Us9iXTlVQ68lW25G5VFj++WJrhew7g/5FOQyaFvkHgCdF9iEef21LXVxUJ\nFJJEUGL0tfIbHUJFHZ3JbAyvPLzjkHUz7lTYMrIKid+14A0UOfDXbx+fzkk4\nwOx79Gc8UpvdqycAqslsTKBYDTl/wykBEUZQ/Tpf8iTzbodzPm73qu3FOP+y\nfkMpEnflrSb7mVc2tPqAwGkJhjhhE5DGLy7+yIMYhAfOwbP7Y/ZjBYsWrXd0\nJOfkj+EDgtkeyRVunmRoQGVGXYyHQrCvugfNmOj3JkX9mtq2vee2TyC1KgWb\n5XqsQWz4RTNB9i+8VaV12tg477+ft7tzod1CDRDbUDaReePpuMRulssmNa+P\nxy+F8ScDQ8aoNRIxfbm8zoyEb7GJ1qdz6Hdey5vk03mSnOb4TZ22J2yPk4QO\ncCfHhldqmJ4ZkI0G5aatlyZ+Kjl1yptPrN9CgMRSYmgyw9WDfcM2/L1C0k32\n/859GLKsoZCiXRkj7jIUe4tDNij5BrpJqnKm+WVdtTPZQKO375xix99jDx5F\nyhvsC4p1hwahmmQhDBuz8ufZfGpV/IdXg/aY/0IuIdTFIxwj3nv7TYvgKEKA\naJHud8W0M8S1EcjLPRO7jZK/MUrZnlC6yzBurs9/S+qBicDw0aJ4tb/EIYV0\nbzNc\r\n=E9oO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1bfda9e05.0","@material/rtl":"7.0.0-canary.1bfda9e05.0","@material/base":"7.0.0-canary.1bfda9e05.0","@material/list":"7.0.0-canary.1bfda9e05.0","@material/shape":"7.0.0-canary.1bfda9e05.0","@material/theme":"7.0.0-canary.1bfda9e05.0","@material/ripple":"7.0.0-canary.1bfda9e05.0","@material/animation":"7.0.0-canary.1bfda9e05.0","@material/elevation":"7.0.0-canary.1bfda9e05.0","@material/typography":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.1bfda9e05.0_1592938889131_0.9669920087267623","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/drawer","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0-canary.08731bd95.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a41b26bfb9df5fbeb96d17404a418b562b14218b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0-canary.08731bd95.0.tgz","fileCount":48,"integrity":"sha512-8Q4XmzN/mHiSmcSu9IO7isIFscqAfQSDS3ASmavI72jnxcCFCNU3TsJ+zOuZXU7DWmMbCk2xxC8DoU8p9TyT6A==","signatures":[{"sig":"MEYCIQD/fr1mK7zBSrDVpnqY/yYXxHwmUDJE2FlJfa2bAk03zwIhAJ+ZQSPIUTzD+ZmLBfOAovML7og4SPYFF3BJLXHCbACV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":903223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lIfCRA9TVsSAnZWagAAGVAP/2tmEShdmwoO8nohPOAP\naLfSTFkMGQPwfjj+vySgSdvVQJ3kx4UQDr6oc8kNBBrj5SzuurhBwph7D9XT\noDFXcoapbuWnTAwpWPBG9Mx7D08vqdYJXIqFzAXp6Jyj1DSI9oeb15QAWhFi\nX7FnxaH37rRiiNAuK7q91+XhbIEfTjjxae2F9oo7Wo4ccs9OGq/Whbc56as/\nu+VQ4RpVMpG3wGWJDiUL3EDvsxRDVXYwedBcnGl7xd3mlfuqIet8eA9hzPgG\nIKecypk8kuNVB/yt93fK4CtdWbI+65xdoCsQRzaGT3xwft1L5j/b4505w3PW\nC8XDrcqkdXEv/0EUQorDiRoWgDe4VLncgPCLmteXoSBS0HdpTWUfCYvmmdxS\nPvfscpylDhq7WsgzswxqR8wT/Shh4I+NapjoEwyQNThVhAdtf4JmoPuj+0bX\nSuASFFUtxEYLxKlknARivzcISWZL3I9smpSujxOurHRiKvQMkHoXtl9oydxl\nVKXMBF9oZVIsYDS2aSmQQklSC3b4QgXurVB6f5qaFkng1A39caRP/Z4elyfN\nPNmGrJmfp/aJUEXkZ+FpqOalUliTqSLbwfdxTtJ+SmZmFdowctyccipbMgzF\nkgSoILJjnBWFSjkdXx1OCdsrewfwaslzQEk660Y6/HPd3iQvsnJzYGf/GyaC\n0ASh\r\n=mYkE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.08731bd95.0","@material/rtl":"7.0.0-canary.08731bd95.0","@material/base":"7.0.0-canary.08731bd95.0","@material/list":"7.0.0-canary.08731bd95.0","@material/shape":"7.0.0-canary.08731bd95.0","@material/theme":"7.0.0-canary.08731bd95.0","@material/ripple":"7.0.0-canary.08731bd95.0","@material/animation":"7.0.0-canary.08731bd95.0","@material/elevation":"7.0.0-canary.08731bd95.0","@material/typography":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0-canary.08731bd95.0_1592939038970_0.9945735353219733","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/drawer","version":"7.0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@7.0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb99accff17770600a366ca5e40d077457ddd793","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-7.0.0.tgz","fileCount":47,"integrity":"sha512-MY5RUh4kzoBO20I/ZCo+sG+aiEcPR6TcOS1Q+d9mV/vuv1ACEJfuEoVaBJ33J/NiUxhnZ5UFnPDkI84UcK2Lbg==","signatures":[{"sig":"MEUCIAG4xt4oHEfEhgRxSLknoWNERCDfIsy7ueajciVtYWPKAiEA62JA2xgqSYh845NTCMIR3U/fBAxxFAAu52C2qw8QQWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":901952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lQBCRA9TVsSAnZWagAABX8QAJVb+sx43GleRy41rJgq\ntFXN3SerHWUM8TJqD39kIwC3OmSBkmfpyOC71EryqP+f+EknPXbKDotgPPJ1\nQ2jMV9T1rsQ4jrXd1q4HCf88XmMkEI4JDQkkhCTmNdmbMBryjyWqQSuaJpYq\nisy2YdcpMzqG2wQArj0Kg8UBrQ+fsGLTCpu2q43HIjnk7XZaQjdZI69G/nSu\n3M8qewKtM9tBfLk6FPN+LpBPOOnkT9qD1GVeRhVFuB65MCRcGTgYGOYX4AFV\nAzLwYFZsbrvLLjBp9L/Df8Um+oEousJpV6DYR6970JxWIL0Gh566fA8FLXhH\nz+WO4VhPgQ11rYW4SHUhvp+0nuZx0cWfhLyPYIhRTIy3bT1RvJXfX5Gjts1a\ndhajb73whXGPgCdvlXsCjHjnw2OaN8YRZ+YvCA2o2T8xpLoBohRG9manfLx8\nTA6/dJ21XRi8eFVptX7IDbOUiciG/blTicRe2zY+2p9lqMeCmlVgmIjxGIWF\nsaktOrVkqf0rspCcJDwCV7lF5/JmtPdiHMJkFFmgevxF0jZTb4MOh4Ix+g8X\ns59bK6r3TL/ZTKCrvRTCn5Fyzp+LBuqcGHmAmUs+/70IApxUUmt2JzHhvb+N\nRl2RjsAl5XsnOjfci2MgDHOzTh+/N0kURSDQ5zILS2umErtmmRrOrTY6Iy09\nrgoK\r\n=nPtv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^7.0.0","@material/rtl":"^7.0.0","@material/base":"^7.0.0","@material/list":"^7.0.0","@material/shape":"^7.0.0","@material/theme":"^7.0.0","@material/ripple":"^7.0.0","@material/animation":"^7.0.0","@material/elevation":"^7.0.0","@material/typography":"^7.0.0","@material/feature-targeting":"^7.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_7.0.0_1592939520966_0.21125353034526384","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/drawer","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.a3212b209.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d557d0eb415b1d1ec138c4ecda1fd0e3c38f3cfd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.a3212b209.0.tgz","fileCount":48,"integrity":"sha512-k/vCR+ULWF/8UJTu6Lb52RELlhWiogd12l3rCs/8tY1e2TMr8HeKnT/HmOqf5FBiqghEy1otRZK0PEHMeH4A9w==","signatures":[{"sig":"MEYCIQCybZ4RZ9Sk1vdE2BIZ1g5+VqtHMPI/M8eSgCuXEwrPGAIhALTdeXzivM4+GWcJ1ufkg5i7eYfm0O/GywOzOWB0hvrA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":903223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lQ0CRA9TVsSAnZWagAAgZgQAKDp84F0DVQa+qAudxtA\nvh0dxZ4H/ECYvSQ70Tb3xux4XeiRSeDXo+i2fpOD5pKOUZpicUoXJACIbAKL\nQsinY+OchMQTAp/zl8h5zjNTjs40cIuyu36gPwM9sQro4emN2opyHnnWamWi\nxwZo7Kq73/KYkc0I1dUVdoawb4yu+KkIRt0Z+nZgZFRoqhXbBI0yQ1J9V7H8\nSrhpkOiic/pQIj67XVwz7i9UTHHzvByx+UwMbfNFvnoPKPjE0+ZwTCoCdIEF\n7faxgBPgzVN2Ei3iAuBFwmkExAEkL0OV7uWl5eJKv8znVe5uf5tf6pwVN3x4\nM5UZKG/2flNEo0QuM99Fm26RXlC1E+qh5dZfGLwrowyw+ov1DvHZxwuAtRGO\nxSJE4vNf1WNojXjlkMCg7aI7HaAFffmRFSk0E9fQlf3F8NTFVn20gK4I/EbO\nOAYOGanzw8Xu0uRww9ZG1WugWgnhDPdmQ9POsqXfxGFs+c4b3A6zc7miRMsL\nWfnVOxmmvTyuaIcjInqfAgg8Ve2EibjuDMnkPhci5F5MMWt7VRhrl5oAPvNU\nuOGFbWLU4UW6J/GG2L5YU6SzZBlp3v1Q+nuPl5JDjlnlofd69WlqRIHyEtkp\nC+cnC1bktLpvzx7OWo7Mwg3xPl87CIFfCxuI4/6Yw13zNn6xAJ6fwvALpHn4\nBs0W\r\n=RrD5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a3212b209.0","@material/rtl":"8.0.0-canary.a3212b209.0","@material/base":"8.0.0-canary.a3212b209.0","@material/list":"8.0.0-canary.a3212b209.0","@material/shape":"8.0.0-canary.a3212b209.0","@material/theme":"8.0.0-canary.a3212b209.0","@material/ripple":"8.0.0-canary.a3212b209.0","@material/animation":"8.0.0-canary.a3212b209.0","@material/elevation":"8.0.0-canary.a3212b209.0","@material/typography":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.a3212b209.0_1592939571726_0.13491007568891877","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/drawer","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.15e81fe98.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e175f8735b87df24a619a75d48d04970e58d7805","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.15e81fe98.0.tgz","fileCount":48,"integrity":"sha512-EjTJmHsBbPTDNqThs15aliiHB+8OPdy0S2D83SptK48JoMQpgfKQ7/uVJ//5rGE7wEdZ9L2ZmiY1waXDh/tQeQ==","signatures":[{"sig":"MEQCIBu23N1T/Z07vUXcRZMRIErRSiqBkDjqeqRS/W1h81dLAiABP6aMmdmnshCbp5WRE5Wm/5SpwfH5tkeC0xMoYibNGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lsWCRA9TVsSAnZWagAASAcP/2EkXEOXeglaQ+bBmnz0\nTzxmpCrdbA38SPmU/XrwR852CdvsOf0U2Rc3W4YAEq+sLb96psdKHQbz/cMB\nwHvnHLIfs2Grld/CXe/chMslLRUXa2fn8EuCvLHGbfdA2+Bas7k1obcp5xuo\n550euOeHaPTwvLTcCRnos1MwJxOQXM/vMBUoscWnieHG6+04CtdMfdARzAwl\nvkA8V4Tt2wPzlWA2r3Wv0oqFWU4qV8h67qJThaV+XA2QgYg2UNXHjVx0OutE\nwLY8b2Kxq1wJdFxVLjcZPYZTUjEsVo6fm56InJ8OopAU2sHxh26lEjMd3vO3\nd2iXMRSboba8hdT+QMKVfcWs6WJRUAzVWXte1gpiwPOAHJP7s2U6X56fRqP9\nTZuiems2SUREVxSrQdum1lrrs4V3LE9rm6DmsQ7EYThTkSTftalhSluk5ITO\nuLAh45MyPjrobEoi6cRstArDTZshB62MGR8w2oR1bCUylwO5ZRSw1CqyG8D1\nZlSMQzl63N/q6xXyAssnMefR+wkccvkBDY09ofhMVel2VlAY92sqUR9l0LHa\n3H2laeRZNUKJ0BeP/yA1I0r4RNH2A15D00CU4acqRrZt0F6u+v6w2XSDAu+L\nfy1bJwDUn/AqIhc/383srlLB6qfr1tuKfR01KjDJ6UXflGTaYVLOg4CE6MER\n36rv\r\n=krA1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.15e81fe98.0","@material/rtl":"8.0.0-canary.15e81fe98.0","@material/base":"8.0.0-canary.15e81fe98.0","@material/list":"8.0.0-canary.15e81fe98.0","@material/shape":"8.0.0-canary.15e81fe98.0","@material/theme":"8.0.0-canary.15e81fe98.0","@material/ripple":"8.0.0-canary.15e81fe98.0","@material/animation":"8.0.0-canary.15e81fe98.0","@material/elevation":"8.0.0-canary.15e81fe98.0","@material/typography":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.15e81fe98.0_1592941334355_0.00848934695744119","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/drawer","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.004c9d392.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05a998b012c0577aae3d2db045b4748a636d48b2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.004c9d392.0.tgz","fileCount":48,"integrity":"sha512-q9EuoPvfNntdzRGtSaDDJfdIc+tAvQUizJ0MyRXvGYOt7j+7s2F17BAlcovXNt/yWMOkhbd29rErY5pNGs+uOw==","signatures":[{"sig":"MEQCIDiqN54099bQyLNgiBxJ97Rne+lFFpGK/T6Va7CLowKJAiA1gpraxjUrwI60H5ABxKCluGdLuLzAV7dgauKTQpXn+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oi1CRA9TVsSAnZWagAAcZUP/jMgc3YHbdxYIgnmlYoU\nVGQrIeFcXYyiigYnxE/GM5GZeKqDfRiARsVgqyvZdRi2RGPlQiLUs9PeELSC\n06zxl4qX/a7ThVG9glNASJOSQRRCNg3dkMCR0jwnfusLIQ1Pba57BE5Efivm\nuWiKBNcDxN9pC9YyhIdNU2wHzgvy40J/eHLxAfw4BqjnfUIb3Vpa/zP/wuMT\nwCp5peL8IMsMhM1sk72OZr+WbMHQen+VvU17zhhuQrCs+Mp3xfv/sd2cVrfV\nbxFT8163r7w172sjkwrr7Y50/nolLwPdVB8gA7f67yRp8UL1e725ViA0xPnf\nYwOhGAAH8zvfp30D2aLaf541KYCyZD+paQmRXLeh3xdsVSMmKyBaG+UzBVMY\nGvyolaJDfsljmEjsHlDYpy0qJhLatvwCKHMQYhIOqEc7x0A0gWlX1rvS8Thf\n3UBAkxPEMbzh274N9oCXKfbZ1K6xrK43Wovk+0BKzypzVO2Bt3FIhFV5vvDn\nFI49h5U6+wsBTqmxHsywhWmFBhyIeWx1qlEEDVO+shxXoc4/krUjLrFvcn78\neIlBd0pxyHINOLN+Fd6EMWK5DNUTWYB0Tppx1Aq6QKLsAB0Fa2GbeBDBlyQl\nFcsZsh14pH8nhGUl/GFbMC0ygcijoA+4NWYBy95gpM5DMc3s00oPYLhqnvBQ\npRBH\r\n=OHS2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.004c9d392.0","@material/rtl":"8.0.0-canary.004c9d392.0","@material/base":"8.0.0-canary.004c9d392.0","@material/list":"8.0.0-canary.004c9d392.0","@material/shape":"8.0.0-canary.004c9d392.0","@material/theme":"8.0.0-canary.004c9d392.0","@material/ripple":"8.0.0-canary.004c9d392.0","@material/animation":"8.0.0-canary.004c9d392.0","@material/elevation":"8.0.0-canary.004c9d392.0","@material/typography":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.004c9d392.0_1592953013022_0.6745391511890371","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/drawer","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.03bde00f5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc16b5bce89b483bd8f1a22dad218a40ddeb6d19","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.03bde00f5.0.tgz","fileCount":48,"integrity":"sha512-KoneoJoU1zO1c7wvd+9upMD7gS+7gB41zPsded1O/ZZ9wioxE7HP/swsc+kF5PWVMeEpKiJLzqTIAWXSflPLfA==","signatures":[{"sig":"MEUCIQCzduTg2rUFe39oXVretwt3PQg1yc1VXg1BPQWnzW7K0gIgQ4k86St8Q6sJtgZxdz4MkHMNBFmbejLuMUhMlTm9V6s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p8pCRA9TVsSAnZWagAAWvkP/i+aIsCLCM1Z8sGfIOE8\noB9/KpVktJsW552av8Lvx1C5Pjx4JOW17E0rptHVBVzFQxRo6on6Ov3imA8z\ncVW8STzyQ2lOU4mMoMBxyecoBwHbmpYNT18Vfo3B5IkVqjz6CdzfQNaIG3ZE\nkfTgfCznqN5HGlZCSte2azU0RUAo02KC18xUrlAOgH+A0Eivi8PC3V8fZ2rv\noYrepIPLV855XoFJVNnnLOPaqx37YAWCs+Xl4Wsd+nVG8GfXw7QpO/u73+t3\nrHE8RBc668dqRZnlw4p38NGzN3YxtqfkZ4oNx6Z1UwruX1M1Mu07tIDZCzLB\nM6y7mDUNGN7FZWV958jbcweqpJ983i+RX2HCglKQfucL30UC8x8WkjCY0goR\nE4IJqYLPzO379ndarIXwnI9ShFwFzfS6n70lXfOnLTP3htSelQGbyHb0bIjO\nsDARB4lhewNsQfkm7Jsy/l7VvyZ7UPnl4hOuk+Bzvpc+cmE63CAFYbvU/A/n\nJN2uV081Iq7HL7zVHgN5EU9KCiEAwHcwaER0pKx4O78hP+M95uoGLt/OEXxy\n/+0Zl4bEP8NN4pC75VGuGHzZlhF+DSuhrNfH1FMnUjidPSPabUiWhihffZnQ\nbnAw5StI6f0Kj2BjiFym245eco6xv9jGpSIqqsaqDTtKiYhzeaXL3STkFvKO\nPO0J\r\n=vFSZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.03bde00f5.0","@material/rtl":"8.0.0-canary.03bde00f5.0","@material/base":"8.0.0-canary.03bde00f5.0","@material/list":"8.0.0-canary.03bde00f5.0","@material/shape":"8.0.0-canary.03bde00f5.0","@material/theme":"8.0.0-canary.03bde00f5.0","@material/ripple":"8.0.0-canary.03bde00f5.0","@material/animation":"8.0.0-canary.03bde00f5.0","@material/elevation":"8.0.0-canary.03bde00f5.0","@material/typography":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.03bde00f5.0_1592958760928_0.16910508214289166","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/drawer","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.599b8c319.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0c5fb6a07289d6247f381998ea983e4bb6e48b9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.599b8c319.0.tgz","fileCount":48,"integrity":"sha512-GTlji2HtVek5xhKZeGVl7/IORUJy47Oj7qIi77vuiQg9tke85k1wBn63+PsyF+PnExjySW0k1Klro+PtbgmxmA==","signatures":[{"sig":"MEYCIQCS6zB2eP/i59afaaJ+VcpeH0wQorU3fjOstY9HCVtiGAIhAOpqZliakwh/SjFR0WzbU7WKhTvWWOr8zd4hU3fhX3y5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82n5CRA9TVsSAnZWagAAYJEP+wS0ad0Di8tlrIgfY4D7\nvfG2Ot6OWYU5wS8PEcAo6qAOCntvpIIavoG/aRqOtqS0ay4eJ0oz86v4QRaP\nhl97voeDH40glljjgLQNyAXAX+Fb/njFrlgBc9HmNVeEneh7usj3P/q9YWDL\nDpc6arKezxFt4qaCxl16Urhr0ChCYkc5u9a8FHt6g1ssFqX62g+MwRz5Jmtd\n/F3sdgnJrm6C6smLkdwONmX8pRhM7N9jw8VV8ij4EIUegiVd2lPvzeB8Tv92\neXPntslryu7MEmJQ28QQ8lwdmTZWxZZchcrMD7cuF1rfjtBTz54Nup69G/Od\nmssR57tc6ueICoT1Zk67iJfeuRJb0wz20pvqnRwed12QY5SMfHpi3aJHG2UI\nZXvbFMoIueLBYP7oaAjaj1i3U6ktkiHa/7Wv6uegFbm34Zyq7G8bxo1Iu0EK\nD/QJEp8jO6cOTWHHJuo/NBjQcRIWLs/TvGA1w0gbtx+26AkWj61JSY6jdfm4\nGwxvMdl0NJiZz06rfYzJ4wMg3LyDxfhdCUYhzVEumtZ3kwA+5GRS9GHHWQlx\nhcIVSZB+lBqY713Cg4ZY5nO/BsqQKT+sODC+uA8BRS6Fe9maxycuZn6sJspu\nw5zEC/lin/eHmTRCzEQ4/dFxeROuUZWe6u2DlfWReVYbEJyrBXkXHMS5cHpS\nf4SK\r\n=CezL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.599b8c319.0","@material/rtl":"8.0.0-canary.599b8c319.0","@material/base":"8.0.0-canary.599b8c319.0","@material/list":"8.0.0-canary.599b8c319.0","@material/shape":"8.0.0-canary.599b8c319.0","@material/theme":"8.0.0-canary.599b8c319.0","@material/ripple":"8.0.0-canary.599b8c319.0","@material/animation":"8.0.0-canary.599b8c319.0","@material/elevation":"8.0.0-canary.599b8c319.0","@material/typography":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.599b8c319.0_1593010681113_0.3551717969875037","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/drawer","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.87e3be418.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7bfdba91a0a19082aeaf1fbd4fa10791070ea0d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.87e3be418.0.tgz","fileCount":48,"integrity":"sha512-NC/Tx45UImPtO7GfnyEWrbxAptwt5kOVamJMGod5QMg9I5wbf3fq+4o7Kplf4PuPyuyAms1Cb1O0J9askGSaDA==","signatures":[{"sig":"MEYCIQDUtPv/Tau5qH2NO75fpweJDV7aNJKHAhwRppmVuHkPfwIhAOJb4uZGMiWk79/81i10fGUlL+gZsM3cFUZBpuI69TIA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85NLCRA9TVsSAnZWagAAGmsP/2HGPgpz4akkBrOkNghg\nvAGR48uLnyAdLpTqXsFKvRL48x/HtUcgz8DYzYE/KtaWM5nWAv3SPMofgFtE\ngR2AjOScDzUMEouSK0q0mIJ+jzs9ekIlgl/SBF21dhRQ/rMRnepaKChRu+l4\nchZheLqN9smZUkg4JTfEa3PPmIJ9luFBXCoxIloTp8QjWw+P+gkNW56KAjnn\nYd9Vs2e+hRg4j0OGAh1zBkBtiL3kIuCH+CRday6QUd+Lkg6U5UUwYz4BzIIH\nNN4qUlvcyUiq6dRvzA4ssa8eibgMfqXWk/p428Z8e5ALTzNRLBu/inM+iEzA\nVZE6mBkj88yzJmpKhNAmiFeDwSvTd9N73W/sW6302MKI5ziTXetdm+FEaXD+\nDbzg9MRNuSJOnwLjIllNbkJI+VMhIXnY02DPXNLtSOCqmLk8p+AR6yo9haHH\nfLXPR2PZHua9F+0XmWezSddU+I6YEzYfc7BBFlXq0z+QVRsj0xdsInJ89CKL\n0qk4uou8lNCxDO7oNmsSgWYfB5c0N+DyKXbG47opTXlM4gXDhonLTaviO3Vw\nbukcQf8K2TGaykQkAJBn8BSdBkWMPvrIZJmf2k4XCV9+r/isijQCm7vNfZNc\n6bG4cJXVyoRxj9zpEZGTGJZ5zwCE+bq+XpQREYER8ydR1zpxt6Bymjwff+5d\nq1tW\r\n=khyp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.87e3be418.0","@material/rtl":"8.0.0-canary.87e3be418.0","@material/base":"8.0.0-canary.87e3be418.0","@material/list":"8.0.0-canary.87e3be418.0","@material/shape":"8.0.0-canary.87e3be418.0","@material/theme":"8.0.0-canary.87e3be418.0","@material/ripple":"8.0.0-canary.87e3be418.0","@material/animation":"8.0.0-canary.87e3be418.0","@material/elevation":"8.0.0-canary.87e3be418.0","@material/typography":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.87e3be418.0_1593021259027_0.8289280049005341","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/drawer","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.035cf2a6f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"252892c359f1490a9241af0f4d85e9f600931554","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.035cf2a6f.0.tgz","fileCount":48,"integrity":"sha512-C4Q5a/tVn1CE5AF4LgqVeMwhV/3A5w77jlTvSOs1N5A8q/4Sethf2x/7gUD5FwZGkez127+0HW/KzCbciz7BAA==","signatures":[{"sig":"MEYCIQDSzkDf0QdGMHfGyJ9OdhtDmXUQaqaI0QgPy7wMI1ne8gIhAKcPmJvWScYKJpoWdporqGAzCJ6i2J1cXgr2L3kDEzpp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe853qCRA9TVsSAnZWagAAoiYP/2hhaxazzRwbILGibFaY\nu9RD321F0hh4crnh73Uf9UhqPvboAH/51Lhm4hyMc0d1C7pBmJRsNUmlinzB\nMDm+6SH0PLwdP/N/lc43ui6sAkv0NFgPdRM8fRy6cSgxXzi0y6IhyYXpSf6u\nWVtPO5/6rOE4ujNDxd6j/hoLstfWIHTQkNLmSNHk3CdcJYQCGLiEGW/Ws6XG\n5gGxq4xSPjEh2I4heLGPw1Y/A56l8cb0adklD4Vnjnh2+qIZHvX85FMw938x\nc1Eo0AXoir2HLtVSvTjE/DGQQnLwc2QsTyad2Fm6r70hwVD6+7uShjidRQVI\nyTZIfPXkOPQYynhmiDRnrgPuKrOZ2+yo1GHrgshth4rDgwIEr2kTELREEvlf\np++TDXhqA3H1tiXdO3YHQINpEu4wsdYoH4eDrHX3RD3mabY1fRWDaYv4Hz9d\nEeDCEhj3iyuKhEnYcYODBeahCmlfzSlbqo5yRIbZtfFT1otfUb59IRC0jkLH\nHdVU3ENAcFeWthdCXKi+uvb7OJsYkmqFprUZ/Lol7SBZW9EzZmlaiFtynSq7\nZpyP3hRH+zyLfwHmjawyUlbz8Gm6YverXVfLYcH/NuwvcG8H8geqm9oEOwjZ\nIWD8NPThfSlNepAQZ2yDz4xNMiq5CsjTMde/tBaWsvZUpuP0po82w0lcd8WA\n1eRd\r\n=Ee4I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.035cf2a6f.0","@material/rtl":"8.0.0-canary.035cf2a6f.0","@material/base":"8.0.0-canary.035cf2a6f.0","@material/list":"8.0.0-canary.035cf2a6f.0","@material/shape":"8.0.0-canary.035cf2a6f.0","@material/theme":"8.0.0-canary.035cf2a6f.0","@material/ripple":"8.0.0-canary.035cf2a6f.0","@material/animation":"8.0.0-canary.035cf2a6f.0","@material/elevation":"8.0.0-canary.035cf2a6f.0","@material/typography":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.035cf2a6f.0_1593023977647_0.5508262717937793","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/drawer","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.2fed2c12f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcb56e6deb8f730f37c852395f285afdff9c4f69","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.2fed2c12f.0.tgz","fileCount":48,"integrity":"sha512-7PHOwWvvTFkWkY0b6BjNm+jJYnkUUFbA/YVUCu4PhB/bIqr+G8lx8o9hgm3ODzKg/lh1i3wwVJYWcKRuw26hFw==","signatures":[{"sig":"MEQCIC2UGS6ndv7f2Hay+QBU5Zgd+mo6wJXKuN3xb2PtTOloAiBlMLXWr0bFqIDLjRS3s4M/knVpMfejRyvtVkbNrKJQGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QLkCRA9TVsSAnZWagAAzf4P/ArqJgZvk4s7Ow4FRdLc\nAE+SaKQhp3mm4KBO1rWfRc9EDCS50P2pJW/igsaG4RpVc6rHNc5QCR9hC9QJ\n17Q2CBMYzEDUz65qs+Yac4i38ob1qq8UlTeN+8PV9r6Ijc+i0uEB331ZqqFU\nSQ8CPoM7vz16SVoaFpeYWpp9pzsFEeVBW8lXes6oL3Hx4tP+6ujNfjvsTgWI\nXMZCNvF3R/QdEzmEzO7kkx9zZicUtezLat1Ue/ZmCXeLnQx4JCoBxRY4Qzp2\nPtDxfkTT5CGdYNQeboUNu5jHtl5PURIAqLEZT5rsROr4f4xQxknGfR/PJ5Qq\nsqEwoURuBVv4LoB9wy2D06mo/IybDjNPNsXrcgEK4J6URTb7wlU20x1fHrc0\nAZAB52Y8DK333/f3NsOrmga25VQXZmwPdPTRe6KFZdqILLaY7OxDyvGL/iIV\no4Z8rFKixmHfsVQ4XQk+fjpUXHBZmT3aPvUVZxTW56ynP8J65tkJ9sF5EJRR\n6nQ5tODD+uBCF7J8+1od+oeQY+qLFCruYZymtGLagOiZxRUz8q6mdxOlzTT/\nt8ZYuh+RbKiyqozvYw56Xj4nmbY11gezThx1py4pre5Ai9FESiiHyswHuLdE\nbGkaHY+G/vCm5s6DEwDbuhaNOzJLod6BHuZg1nfAyhaL+a4HQhKPA6H5ujVf\nBzqX\r\n=bNEX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2fed2c12f.0","@material/rtl":"8.0.0-canary.2fed2c12f.0","@material/base":"8.0.0-canary.2fed2c12f.0","@material/list":"8.0.0-canary.2fed2c12f.0","@material/shape":"8.0.0-canary.2fed2c12f.0","@material/theme":"8.0.0-canary.2fed2c12f.0","@material/ripple":"8.0.0-canary.2fed2c12f.0","@material/animation":"8.0.0-canary.2fed2c12f.0","@material/elevation":"8.0.0-canary.2fed2c12f.0","@material/typography":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.2fed2c12f.0_1593115364449_0.7451608622422787","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/drawer","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.38197b443.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd3db290c405e3d62e53db81e7f246a6e6ca6ef8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.38197b443.0.tgz","fileCount":48,"integrity":"sha512-RkJpMihbRzjENXF8G83mHoLVZ2pcqWn9mTmm8HnTJ5nAXQIzNAHkDucy6mU492BM7844oZBbPsJpCp1rlNF2Zw==","signatures":[{"sig":"MEQCIHhLb8P5HluEKamcXNT6VQF/z1yon3CvEPTDxHWtmFG/AiBZ1N9odYjS8TzyJGVuEz991QHaR25STg/AqxmSBjEQGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RXXCRA9TVsSAnZWagAAzi0P+QEqA9SavuTN92vy/u5+\neBEYUYlmV5Bf2ri6AAIUzUEUQJj/WZe1Bhh6y3Q3VTsiry+rTAA81vcm8Io1\n5cKypeeFkzaQhK766HJ9LNKEnX3sdAHMxQjWGPmPwhEBe3F3W6SHgzTQQfbK\nkwFQmqixVXFYAJhEhWJ7ZxO1kv7ceBuCzYlEPEuN2rm4DO6X58oKWAKIMLyo\nwjfwaQjuPi3PjLVyc20t5Nx399ZqBV1lbnKKRhaV3iNSMuK3BWsZ3wiC1st2\nEaa7rQRqT2F5Iw3gHbpdwpFwjAFnii2AQEfJfVTuCkM81tVkSmg3zDiVsftS\nHrx7VepwJ5hBXuCMN7WzolE5ldIrmuZ8SqNpo8TtjxUsxEZdYowBNmJDCXPU\n4mzzGfQaHx3hIAxEVkgurc/jE/ahdYoob0V4sYk413gv+55KPyNFPt1Pi826\nI9qk6P1gA+pcuNA9/59u5DnA1g6IzbkWZmtQE/KTfixRpg2pVyBvJVOgptuW\ndk8dPIIG0Bkg7EgVWhhIqVfdrbwK8aAAp9jxYO4i6+qTF3k+ap7mo/RTcVID\nvOfZ0dM0chCS9lY9k3/lKesY+76bX7LqZc6j/nnj9Hp5ZwaT4ZNNIDJ5M9ry\nNypLL1Ex0VpOJ/DJ7J9+pDIWsJVzHLBkCm5N7KtxqrV96dcmOPua/3lJF1LI\naYuh\r\n=dbSg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.38197b443.0","@material/rtl":"8.0.0-canary.38197b443.0","@material/base":"8.0.0-canary.38197b443.0","@material/list":"8.0.0-canary.38197b443.0","@material/shape":"8.0.0-canary.38197b443.0","@material/theme":"8.0.0-canary.38197b443.0","@material/ripple":"8.0.0-canary.38197b443.0","@material/animation":"8.0.0-canary.38197b443.0","@material/elevation":"8.0.0-canary.38197b443.0","@material/typography":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.38197b443.0_1593120215078_0.5073807247608955","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/drawer","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.69a35e80c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"268d83b86819b13cb8bb7d5c1cc2bb97a064e68b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.69a35e80c.0.tgz","fileCount":48,"integrity":"sha512-2/JwczIn3C+998T2TSrb87UhQTSl20RaPnBUUCg2qLtjqxE5uow3+fKcDpURD3PEy1eYdwSZ2i/kNkci7Ej8XA==","signatures":[{"sig":"MEUCIQDFKO5XmAuQLRExYvNrDQRxtABlgpb6z3OLN3u4Kzp1QQIgTieoz9WYdjOiWAl+WNaWK0bqNjVT+Aau6ufduJ/Vfjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jLiCRA9TVsSAnZWagAAPw4P/1xw9rq0pyKq7bsiwSMJ\nARYe3ngiQcKFAxDcmk67M45O/qMzGiMyxI0Nlr4bGbD71LwRrkntdjBCD5Jh\nTRyTJhvDONd5uxv+qVgALlLkBlmp8Q+s9w61DyomtMlQfCTxwtu0v/Jy0IU6\nlFA9W2cEDlWKVPaehXJe/m+XlbnjdwD0AxIPtcGEH1LtgBC6bP3n55fB9+Hr\nMVLMD9ZHHdTtAsUS4WhpxaIv6uQsKP/v54kO4Oz0Y93Md+x/4LExPB7FoOlp\nF6v0CBOFrQMgXPOj3xrTIzDQCDaIvc9OaMJRZIrkNRk7Kj9WMHTO9IQ/fmw5\nLtgre8SENlznKbQWjzDb7SZyVRuq2FVth9qV6U+o9/8NkHUVY8GKlQklIB0z\nT6y0wm/VMQ74WqUJB4FFNvWP9IURlar8Xro50h9p725Fay0nG7zbvpgBQpQ0\nLH3K8sEl+3C/LUoWFoCYkHht0+n5UVVUOe9kJrByTn9Z+0eR/3fQLAuqZlXF\nKWSSUyUH8MceOtQNlYSsoEMX5F9cHcgghv2iahR7EOJtCAmFFAJaPE/pYZ2B\n0US2GTgUKqGoJYggXHaOP4Ej+V8JLaoMmQfjIXFZjKcOwy2lNtnQCm6iBbun\n8a+FYJFPdVR9vlbhj4lpNIBsnv+u0WWzB8qDsjwsnYMT1xWT4WJ4GLXBpjC1\nVHQ9\r\n=TL3c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.69a35e80c.0","@material/rtl":"8.0.0-canary.69a35e80c.0","@material/base":"8.0.0-canary.69a35e80c.0","@material/list":"8.0.0-canary.69a35e80c.0","@material/shape":"8.0.0-canary.69a35e80c.0","@material/theme":"8.0.0-canary.69a35e80c.0","@material/ripple":"8.0.0-canary.69a35e80c.0","@material/animation":"8.0.0-canary.69a35e80c.0","@material/elevation":"8.0.0-canary.69a35e80c.0","@material/typography":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.69a35e80c.0_1593193186355_0.7882132782777005","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/drawer","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.df7154fb3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ee68227e847bc909c965fbf7c7fc0c8c6b6f383","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.df7154fb3.0.tgz","fileCount":48,"integrity":"sha512-qvifL3avvNhlMN7aa2QLtMKxTk2DV9VWhVaOhRL815BWbTP5S1AzZBSFT5tXS9d8kU2X04NUexF0JldeJjGewg==","signatures":[{"sig":"MEUCIQDTWNini4tba4fTM7Op7cqVQUAgd3ABYX2Kgbi2b7Bb2QIgX2jGmKO4feiMNJsdIzwWkve2t9ACb/Ab4AdV8fz2jtw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jvTCRA9TVsSAnZWagAAO7UP/0CYLmc/x++sgDzAT/87\nFTpKhJru4ubIg9WXvNJbbReJDQE+1UYqQoHIfE7Emat5pyFYPqpAKZL4NUYI\nnySRfy16bOqTJK2DFCs4VJLwoRLk5LQ95X5aILWSV6V583zc/SESj3mWtheg\nLbznanYwvamf5z/0HQYx5Jl984WQXjrhDxlZ9T01AQ14PEq5qBEdQZnkXIwm\nPCN8G+bO5lIlj41VJet8hp3B9Uiv4BZ8rljvcP5uxhMdcs7nRgRCbrutXqO7\nkDrX+aUdM9NQhYP0mFfE8UEn12B68Wf7yAl+ZEUqAwPLgmQwbjgg+S7pQ/7u\nQc1+EZRU/YKaurAv0Gq6Ev2YvQ46sGdCIezJtgOu260Bj/+ELgYif/NutcB3\nQ+tFR0P7UfWtgQJe3sDAGCba1+Id7FB4Ie7PtYSutv/MRUs1rtL0noFzv9Ry\niF22FA7p5rQCgDAt7M9/poJrJqGOtr1rcQBo7Ou7cn75XxY/jLPB8p/hX62T\n+HUr7J5jkN8ygMlvranHHH7z/RYM+0iVF+2xtfYcIDc3rh7vO05dBvZXzCg9\narzrt5QIPrW5CgURT2J2+m5dAo6SGa0lqC/2wlSTFI8ieTp/T/GAB66wvscD\nJaM/gUQPrYAP0YJVg0G6moA0M3WTkZPdPBiSptU6+P33oEzdnz+XzC5HYeMu\nVQuT\r\n=viBk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.df7154fb3.0","@material/rtl":"8.0.0-canary.df7154fb3.0","@material/base":"8.0.0-canary.df7154fb3.0","@material/list":"8.0.0-canary.df7154fb3.0","@material/shape":"8.0.0-canary.df7154fb3.0","@material/theme":"8.0.0-canary.df7154fb3.0","@material/ripple":"8.0.0-canary.df7154fb3.0","@material/animation":"8.0.0-canary.df7154fb3.0","@material/elevation":"8.0.0-canary.df7154fb3.0","@material/typography":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.df7154fb3.0_1593195475129_0.6870860821589799","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/drawer","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.d5618602a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"444df1f03ccee281c2ca2abde0a768a6750d27f3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.d5618602a.0.tgz","fileCount":48,"integrity":"sha512-4u7jZiva2NjLrpfUpH4Hbz9uD8FYf4clzZbUHyew3PB5oLKykRXGQ1bunW58NyiReRcrpOjZoKX73qqtcNHtHA==","signatures":[{"sig":"MEUCIA2tDQ+ZjlhTv/VhobwCUcHTRTxOx4sqlKbjeH6gfRWcAiEAwmQ9KwdpQtFUVT0WdaKqGQuj3AzOXuIBSF+qPLGZGI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m1aCRA9TVsSAnZWagAANsUP/RiG9PfJlGaI5WkfpOqO\n+idf6nHKlGGVdqq+4SMB1uwpEETCXrFVSHmXx3MV8MpM0E+Uy9N7LC97SP6T\n1cGMzUzq0QB9j4T5Ecg3IM4rHtyiXp20zhbh2/1E26/vmxsLuzG0CG0CRUd9\nU3NaG9RtO6Yao5vgG6NRw41iv1jJ+WO4gjPr0FQxF8FrzHFLsWUHHYu/rGky\na7C/RmU87rqF5GZLQt1Oy5cyScJ9iDf+RcfVcGWFoVa6F1Gn9cnEdCAYMgJ5\nGECb4ErWhAhswXQibn0V/GciZ6wnjfCKhGvh1mlfhTEJu6RcJyOwgSOIJJe5\ngzGQbNYxVj1kX4K5N/NrYbsorYwpJyUNIHliknl0Z90XyOQXOLsJ8068eJ1y\nCtg0+FNkAHSyPo2LsleMQ5as/46XndXe3YbVqORZxYY3MuVrg62NQC49v89q\n8NF7KyOwo/8goOvyoWuyN7Yo8WDgSYAtvs88zCcCOKiUbk8H9EhWEExAFkgd\n2GpG09AA9RCh064Clz+3bsYBnEFA7k6RvUkOL5XCrNnLkC+yFsPgMZgXBYj6\nCthGf4/95RL3ZRj5Zb6DzJpdnFJ4uGodB+ZdPz9sPTOjWNp/FqPHXhn7Dgk0\nTyI6mg1bMgRAOs57qbvhyQhcqD8JzHsoxnFE2njScWI2NDwMBdAP7vK7uood\nhH1N\r\n=nzPD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d5618602a.0","@material/rtl":"8.0.0-canary.d5618602a.0","@material/base":"8.0.0-canary.d5618602a.0","@material/list":"8.0.0-canary.d5618602a.0","@material/shape":"8.0.0-canary.d5618602a.0","@material/theme":"8.0.0-canary.d5618602a.0","@material/ripple":"8.0.0-canary.d5618602a.0","@material/animation":"8.0.0-canary.d5618602a.0","@material/elevation":"8.0.0-canary.d5618602a.0","@material/typography":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.d5618602a.0_1593208153603_0.7471081068914673","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/drawer","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.e590b376b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a22c0d65ab7edfbcfdde9af878b19a728b65a8e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.e590b376b.0.tgz","fileCount":48,"integrity":"sha512-9S4qr70lUnkYAGaAt/qiBQOYiByVzklXk5DJ/W+zIkdaYe+k6wlqblV7FLfDEj06prpZFr1Ld2nGJe6fbLTIQg==","signatures":[{"sig":"MEQCIDcOQZ6tTpDOV2H9VNlzfz9ZUyepZCnfJeAgcSlzIS6mAiBeNfXE9LSUIJyJjSoLdAGCfoaNIYYx3GQ0bRjZmIGH9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oO2CRA9TVsSAnZWagAANyIP/Rj4qxFJRWb09xpP1Z6L\nvkImU7HRTwY+0AkOKpx8B7sDA5GCYM72W0IEVLxeibp84/RoT+Ls4X9cDzBv\nGue+oq3UaIbHvSMwohiY+su1j0H8u0jc4XJedKPCvYASYbsf2oVsnD2a6xWz\n+/kxTr9Pu39FyyFmeGzOxiZjI8oDuDnr/l5HXxATYgk/5bDp72PzAq71PAFp\n4yJ14xbmN/xY2szbQDAR09G/Y9ZVMIV4CT47pZcuAJbn7HjZSaAHLSKmKx3b\nY7mYbApmqRhCXwxW9ZT3y9Erx3C3O5aXADKrjTl16bYSN5239WvwrMYXr+mh\n5HLgp6Ip3qeinW94CIF81i2eZ511ckzV7f8o0YEpL77iVFmTURDz7vg7QM7k\n9PrWGGLtKRzwaVMYYDub/QoHijzq/qgKbPazlPiUT+2+IZ9kIdoeOu2XzBrW\n9kGKa4lqcjFGI4kgt9E9a9pdRvo7OEJGxuGU9m7g8rmiVMrmuj5j0lTaihnU\n2pLRleNfTyJwpRZhDdnkN0uVeCqgoIu7jxlUxL2WBsx1mUNVtttHHc5vwaO+\noP49BrfzC2I6acQCnWWA5Fi3xg4eUre6kG9NNeV5Tcsw/AgudOf9jbfTQmM0\nognT2iY9otTZDo5iuNrvX0JUy7tu5ITnNWhZKeIb6lBstTONR4HR5PcFGry5\nfxFt\r\n=jiuz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e590b376b.0","@material/rtl":"8.0.0-canary.e590b376b.0","@material/base":"8.0.0-canary.e590b376b.0","@material/list":"8.0.0-canary.e590b376b.0","@material/shape":"8.0.0-canary.e590b376b.0","@material/theme":"8.0.0-canary.e590b376b.0","@material/ripple":"8.0.0-canary.e590b376b.0","@material/animation":"8.0.0-canary.e590b376b.0","@material/elevation":"8.0.0-canary.e590b376b.0","@material/typography":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.e590b376b.0_1593213878232_0.003037381603506306","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/drawer","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.0c9d6bd2d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf1cec99ab313340acb37adb3fca1e0b1fc1b1d2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":48,"integrity":"sha512-xgvF7stpcp0nb7wm3J3uYNitLJuSmwwoCT6dY3cJrbL/kJ/w9LxthDNhfGIBrSG+ILMuv8V3zcxdRXfGiWezpA==","signatures":[{"sig":"MEYCIQCFijcOzMrdkwe223xWyzRxfvDOH5Lk9tbPDUTmLFbsdAIhALqqjwAyCSC9y0Z90yfYWa7NnYKG6RqjakNwjsjq/Fo8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iHkCRA9TVsSAnZWagAAgTAP/0MW6y3jlStiEhwXJ6ji\nAZ/oj8rgxHzfLDtmt8Ez9OQlgQC9Rr7vwjxZWAxoOvdhfuYTn+Qn8wrSCc3y\nkpEi4+5HUf+rSyCpimbmlIj3I9gcQEZKacCVHz5P9dLmQN4NUBnmYdIqJecK\n9CHunNrgeT4ePsVd4wDePFt6NkAlglGOZpI6vf7jpd+rqO6iDeHTek8gXw2b\nmnc3PhAPh0x2mA8Q+Ke6FWH94lyHKHQvyWr1WDQWO0oSGZ+8IoNI02rFy47b\no4rHf71lOhBU736Vmz2TaE1AQjJuzPwdlunthbpyTbF14VL6YVKrIju69SiW\nMeMqxpXP9eMuTXFSGU4f1Ajw4dkPBEJxlfmI+hxMQOP+aj8BE0M1/alugTFR\nEpHtKOUWFOz9XlPOi7NsJQllJFhFM/Cm1tVnhYcsiT1RniHWYoqLRBmbWxQ/\n5r/DDmnOY7nKanjPpQeGuz8D/kKe1nDRJ87JhXWRrzLoTQsUEftVMiZ30uIj\nsD1xMfM4+/C6i13kRWYqhOmgLVH4nnrN6EjQYT6Q0eTSBBB0mmDR8kOM/Ol7\nWQJnhTO9YtCFOVujRNaEwFwwSNZ3A/SCi0t3bJAoe74Z88RYjEC0DIHkSJaX\nATOMKZhAQo9fbmcv8T0tHiNQ/YhEoO8r6G8y6BDVIzasPm/Rbc06knT7vT3M\nb9Ir\r\n=s3cE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0c9d6bd2d.0","@material/rtl":"8.0.0-canary.0c9d6bd2d.0","@material/base":"8.0.0-canary.0c9d6bd2d.0","@material/list":"8.0.0-canary.0c9d6bd2d.0","@material/shape":"8.0.0-canary.0c9d6bd2d.0","@material/theme":"8.0.0-canary.0c9d6bd2d.0","@material/ripple":"8.0.0-canary.0c9d6bd2d.0","@material/animation":"8.0.0-canary.0c9d6bd2d.0","@material/elevation":"8.0.0-canary.0c9d6bd2d.0","@material/typography":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.0c9d6bd2d.0_1593450980446_0.5516592055784404","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/drawer","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.c1fec4246.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8b641a83f16b81dc68adcf9ddf237fbd3414ec7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.c1fec4246.0.tgz","fileCount":48,"integrity":"sha512-AbtyAONhZBhiycBvuevszsQyPhpE8dbreB+fHP/Enelvc8x4wXNBl3RHqOuUfuAnj8ACB3v/j6fu+loMq81Prw==","signatures":[{"sig":"MEUCIQCI6HI1PfPlt2wyLVClK0nnDQCFZoz0nLhKWKZEegYSVAIgbcuI7dOXlldki9ROst0+H8mhxXxyUwUmwkq+dBUHL0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iWHCRA9TVsSAnZWagAAV9gP/RhzD0OYWxdIGLfrkyFx\nleXYYur3wA0hP/1TgtlVHKJRohLN76Pu7B38+Jmnz2gtGO1r9GjadVZjn/yH\nxvlrkPVkzL6gk8noHP9B4sDsHlXKdtMGAD21Q2TT8LlWhgSD+5BN3UE3Uaj2\nPbi57E4fb5JOxNaq+wsrVG8qe4fhmcSbg9LP6bDJzg9kF1FG0xNj48oo1OQ4\n/Vf77NFdtLUYy3REpsU3EC80p58tmnfP5gxO1bRVtd7Nf9NjNnjy+VP+CLke\nzryOgtv1CBzVZf+JvTJMfT41uO14h2XFMmElGx1NdLYxvbuQ9xZX2OtSJn3q\ntQJI/gKWYEbWwBDgC2RxxJyVpBJF53JETqTRhZxF8CkJiBeuFkHbXntoqOnS\ndDEL7QsnixZbmH9E7lK/8fFvLpMJUGftyLLBFu3QhWuqXgmEKBwsnXBuISL6\nUHbb1N9V0pk6VnNtRWx9JgFBtjk+eoGNEKXXEjQfE4UMNsDGmEeLx7yUzfQU\nD601QIfPvSlOzEvwn+qcNXLGpV6JkneLldcvDJ3g/Lv4YTZkM/qCSWjHuCiQ\nGE6Fk4OV2Ot0FEf1YUJra1iSYpnfl1caDKyEVuTXBtXjH4HS93uIQ9kT8/LF\nVe9o0/mFpkeNYRq0uoFNL7JS2Au43MayFbzLoyMdFmFiQnSBFw/7M+y0n1wp\ns6zh\r\n=9sXR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c1fec4246.0","@material/rtl":"8.0.0-canary.c1fec4246.0","@material/base":"8.0.0-canary.c1fec4246.0","@material/list":"8.0.0-canary.c1fec4246.0","@material/shape":"8.0.0-canary.c1fec4246.0","@material/theme":"8.0.0-canary.c1fec4246.0","@material/ripple":"8.0.0-canary.c1fec4246.0","@material/animation":"8.0.0-canary.c1fec4246.0","@material/elevation":"8.0.0-canary.c1fec4246.0","@material/typography":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.c1fec4246.0_1593451911138_0.9365784248091051","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/drawer","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.c678a9d34.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1d3db6e20941e9b7b72bb9f3feb69076643d0dd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.c678a9d34.0.tgz","fileCount":48,"integrity":"sha512-zOw/DxGoXPE65Rrrus7k7oUVyd1oa80XhdsM9Qqrg/rf7Nrl9WE8xtG7ihbK+wU3sxC1gm/Xd0VmEHYQFRoD6Q==","signatures":[{"sig":"MEUCIQD1JprU+Gx4dY8YtScV8JAEO0WNftc5RrTwhlxtyySyZQIgUZrs/4a9UWvPgrfspcbiqbxNmXhyLSK0IRD4plNiMj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+ip5CRA9TVsSAnZWagAA9cQP/2UF37hgrhswI4Iegl+b\n9q02L5xE3nf85XUoe0kFuJlk2Ed7ebljKBnD47dsHbDOeYea4y9dbZY5b7Of\nLUc8cMrgRqogxZHk6vkyvSULKd1vdQlMM966KpfTXc6dSNXPJM6DxmtdZ6wh\n3IENBIr0JzP5KRpE9AFHZKnohKkgInZpRCReL9LSWnRKqBllwQTKiT35r1WJ\nqrB7Ipp3ZL4rFcxTnYkOri5C4Isp7hRX+X0wt7UkfFf7JoeBrXTy8LL2iwcf\nQdB65GJV0RtXy8AOJcKPhvgpZVz/JnsGF5C5VkfL5brN3xcdlZCCiqQw6eQC\n/8RaCaSQxA/1M2HgAOg9jYlAABl/0B3fauNxY+wLCN8ITcspl3ndWxDwh3gh\nuSzbNpwMnR2DMi6jaq77tjuDbQ8+nhzr40spjz1N26gQnBncg5lnf5iMmqgy\ndSE12lmv0ZkLxOo6Yh3Mf8Bw4BMPzGE0eAdCAD2danyC+cOXoT3pfq8JHX1A\nTjVyJpvvHGDxQiRjmlGpY3uIVtFUhHK8dRmVUdiqXMfj6imBKUc+cN+ov+mm\nwLte/ILI8FC3zuzEWFZMN5hGiqew3a4oSt4xgrkMrPv7dRfM698mlw/+aWnI\nCZb27GBk9ac4j5FJ1aKyc37DEYsTDnAd+dkY05q+s3fWqvh7e7at26jNicZf\nIDr3\r\n=jxAt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c678a9d34.0","@material/rtl":"8.0.0-canary.c678a9d34.0","@material/base":"8.0.0-canary.c678a9d34.0","@material/list":"8.0.0-canary.c678a9d34.0","@material/shape":"8.0.0-canary.c678a9d34.0","@material/theme":"8.0.0-canary.c678a9d34.0","@material/ripple":"8.0.0-canary.c678a9d34.0","@material/animation":"8.0.0-canary.c678a9d34.0","@material/elevation":"8.0.0-canary.c678a9d34.0","@material/typography":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.c678a9d34.0_1593453177265_0.3383409361160661","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/drawer","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.521afaf6e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fbb0b0b66059ffc28545fcdb5d7c46e0ee60dfe","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.521afaf6e.0.tgz","fileCount":48,"integrity":"sha512-LjaajfdKJC676bvG5F1q6lG8YqroT2Bl+1JGEFI3D2rewcVhIjHgenho7nl1rlhxmvyrKMx7V015xg5CqWQaJw==","signatures":[{"sig":"MEQCIEp72Gb1alb5mW1nAdBoqeI+jnDW9pbYh4zvTqIDvu38AiBYgX4xOG0z6u1noJMMAimFWCWX+9eFNjQnwiV07vKd8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1UMCRA9TVsSAnZWagAAoPAP/Rd3NZLhA9cr7yukCBus\nO0YVtXQEc0lH/f3N5/LHte6I3icBzJr0SzWMt5jofsct78oqpznaQqKcwVJu\niRsGWXfJO/vkRX6Ar5zopN/lMYM4KKCgt+Ie7dtBWYy0Ec7/hgiO3uFgt3nQ\n98oHxlvyIjnIUgZQcsRg8JVjHeVpAui8YArNf7gUo2ybLtlTMD4vWFZBO3/i\n9RtkhWoDKT09qGqiktTiRwcKoWih4zFi23c2lUP4KRkKmq9uq9Vhs3IopyzH\n8vGD3k5kcyqEAq+8zZ2ZFu+yzpx/qQZokqDdO+vXQkpArP9BvnM8Motxbxz6\n+W+OAIWt25IHBurTP8nL4IbiWw4bAMTJK1+wbgF8W2aOGI9K6bYV9tHfN4eN\nC2lZSFPBSuKKNfSyh6qXBhTQgC5CgsogfyUJwYI+/ubBAiKg82C9eTevsf4O\nwSHu0lLmG0eTitYnp9HSzjiUGQqZwA4GCnAeLYg1DCQBgBbMhYM2adH4QceW\nSzTfrcXYEduK1zCHg/5roewSM8hAxriUFmiygWTih70P/bldij9LJXc1lQwM\nktw8ryTh+xY6jyH4zQM6C3NsTAlkn3eGAC3F6jo59S2aDjr7RDshT/1DiXzM\nUfS+xNO3xUsv67Fsa9oUlhPnRhXFe99/ja6OOkROsgjoL41WzvVVep0rIAm1\n0XN1\r\n=x4kt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.521afaf6e.0","@material/rtl":"8.0.0-canary.521afaf6e.0","@material/base":"8.0.0-canary.521afaf6e.0","@material/list":"8.0.0-canary.521afaf6e.0","@material/shape":"8.0.0-canary.521afaf6e.0","@material/theme":"8.0.0-canary.521afaf6e.0","@material/ripple":"8.0.0-canary.521afaf6e.0","@material/animation":"8.0.0-canary.521afaf6e.0","@material/elevation":"8.0.0-canary.521afaf6e.0","@material/typography":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.521afaf6e.0_1593529612103_0.6739127012672563","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/drawer","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.a2ad48839.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d508064ff8e4a01e420190edace89ac1e1e4bd7e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.a2ad48839.0.tgz","fileCount":48,"integrity":"sha512-7YkUT2DKtEoxXPnVdPAzqoPTg/ZvgOS1SL4wkG87Anphxy2Fbj2+x+Rrv9e6G1M4sB1W6RAvaOHfqBMrQxWm7w==","signatures":[{"sig":"MEQCH1AfgRhbdrQ9yy52WO9mYPg/7b8UvOW4a17jzAC1s/ICIQCoqive8Cr3kIPGLefHeX9+IIfKN6k8Tz13zJKlwE/ZxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+49YCRA9TVsSAnZWagAAeKUP/3MOCojGyjCDysYgn9wv\nrHuZw4AJLFI9gKfa+tYrZ/imRS9G9l+U5E114t0SZHQxccunOGN/E9cMDUJ8\noufbGcUWz4CYgAhZNgq+pwyH9NQRXcp1y4H3EKacDcKdmoEFy3Eu8CIxgCGm\n6ztPKXXbg4Lxm+z/HmVBrL39mtVjeL6E5e7G/+rsxDsNbEroTTc/NGOYBit7\nfco0xp6iQ7CndBETfqr21BO8c6wrBtL5viCtiVjKDmeplPviafNEHcpCVJkc\nFkCgx6j4LUcubFv+rd2xOj7nMU3r4cvT+I52EMOgV2gaBBAKhjPv+LxL+9tt\n+sY5HwvXgWmWmbj5dLNbp5xGyJifu7rkmS9uZoTh0Yqx79cjTtdTtgEIpbWS\ncE4+KnF+h6WpCKqD/91kyBQTcVQfY2eQKavk10Asl4HrkYQVevfqyu1Wt8HZ\nAo9PqO/67Oy/45SplrTm6W0tHGNcxYe78cz1YfYMeRd/6kKYbL6P1hGbRpOB\n0/3ZsO9KYrF+Ls6mUmF1h60xt+vbp8F82QGntJET6aiqxMimYXnT/2hWkR9N\npVi4KtIulQCcLURuB75tJt7dQX+vyik2G1jpqgX5E61cUbSAOuDAxrBfNH6f\nqX/b6+mHOh3YwP1wFAg/tFM8HyoEB1nK3032b/G5RVy8ohkxZ649NsWXy1qi\ngMUr\r\n=D37g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a2ad48839.0","@material/rtl":"8.0.0-canary.a2ad48839.0","@material/base":"8.0.0-canary.a2ad48839.0","@material/list":"8.0.0-canary.a2ad48839.0","@material/shape":"8.0.0-canary.a2ad48839.0","@material/theme":"8.0.0-canary.a2ad48839.0","@material/ripple":"8.0.0-canary.a2ad48839.0","@material/animation":"8.0.0-canary.a2ad48839.0","@material/elevation":"8.0.0-canary.a2ad48839.0","@material/typography":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.a2ad48839.0_1593544535785_0.7499948804780463","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/drawer","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.ec2385881.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7a03c6cad036ba2e1cefe8f6d72b890f169e6b3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.ec2385881.0.tgz","fileCount":48,"integrity":"sha512-3FttcNTKiMXrTf9ed9hlGukiY7wO5JuT//cVRTZ4e3rszGRJkmujauTcXecTnz2SNyIWgtuLD6aYzoUw85s15Q==","signatures":[{"sig":"MEYCIQCpmXMvAmk7228/sWKzzvQKijKvvdYd+qyLWzQAU5MN9AIhAIjGD/CbUzchBy7iSz6DXe4qucFO99qs/qdKpTMeljCo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7MfCRA9TVsSAnZWagAA0CUQAJTUEpZrhITgM8A5bqU2\ngqsqx8qLQq6NpbEzVtDJ4Pj7+oZB50SA52jRBEr2TF22PEHGIfKb3KLIMWls\nwgui1Z9Ho9iUJ57ZuyNXv31KNi3d1bCHauYrNvtIjExEw1+Trun7ipmy0bpO\ne42l26aiy461tJAQ48rox/ARhFUeoV3cEK8C4RBRWJrc8uw+0GcvSnI0N+gq\nGV0jQJ2bnCdlGFA2aIalVgR/PtTrEs/RxD389MxDZArbLhQLNoCkWiJcBc/O\nCuVitLuoIPE3onwbu1KfcYgI6h4k1S0IqTOiMEvyS1tDthJjVpN3kZUIWKny\nr2ItaNe+nPujtD5Uju1yA4SsFeTlzIjua/AZLozoNW//Qd4RjWL/UJzBKoc9\nLqqZd4PkttBT4e9OLva9p+G8g7QeuEvNWCAVmTe3HgAuUnYzvNemLm71bcCK\nnC+GWqyuRm8XC3Oszyt8knENdWxxJh1HitEs3TyG+O9SuQU3inMBqm1PRpIQ\nFLb76l8bnnPbMwIy5idVB2LFTsQLqDSMhasBF+n8QUbu29GfFbbiJW+CXNQK\n2s1Puu5n+Z8ocew6eCkFKng+zNhaXFrjPskIbdo2rwJkoIwnGfKu086Aqw9f\nq3W6DrANlT7XJQeLHDOQHlQ/wQF17C+Ozb4JwFcYO9ookaeYaLUYUXSd0igt\n7Llx\r\n=aDpn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ec2385881.0","@material/rtl":"8.0.0-canary.ec2385881.0","@material/base":"8.0.0-canary.ec2385881.0","@material/list":"8.0.0-canary.ec2385881.0","@material/shape":"8.0.0-canary.ec2385881.0","@material/theme":"8.0.0-canary.ec2385881.0","@material/ripple":"8.0.0-canary.ec2385881.0","@material/animation":"8.0.0-canary.ec2385881.0","@material/elevation":"8.0.0-canary.ec2385881.0","@material/typography":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.ec2385881.0_1593553694789_0.16247085076304124","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/drawer","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.610c26c4a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92838c5a0e23bc69e3d8687b0a790f0e05502024","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.610c26c4a.0.tgz","fileCount":48,"integrity":"sha512-szNwH1q4Gcz/JTkcGAntIzPZNByLO68eHRfhRNWMpVEPL3yZmsBWBE827v7KJNtYCQsb1Rxk9yfFBbAeQaf+rA==","signatures":[{"sig":"MEUCIDsG+BeiHA6tIjVSrm18ePh6blASJGqSb4Vk2IFyNLREAiEAh4is4cnDkUish9XeppkP398PADmzB7f87r3z5DFUNUo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KRcCRA9TVsSAnZWagAAjP0P/07E91+0Ze3QtyuykkYt\noftTjaDzubYzdS/b+J3uW85uDyOWIdEJg3V1T0wajnJSGhON03Q2b8/0A9UD\nGyYbQwrhNQX13FDaLwrN694EyRJ6mARGGbro1vlrCZxZUauPY+bznOx4YnIH\nRTCJDyTW0Mry9LARn8OoHJo+R7+JxHOmqmOkUybAWChqBd/B/ufk+OoIiXwr\n6I3D0USladLyKnWZaHbvHHFg0zqLyw8+hzEeNKIBxBCKgzjVPTEjWzH1/Zaj\nBkqefPmpUu5pGKwXhesDw8RtZrpHcvWCCdpF6IVoY4WfAMG/qqwXTAssrvyE\no4s/2fVqhUd1OADEvTsai6sRO3/UPj8y40+tOy0YksuqHuVLj1KrkhW5LSG8\nSY/Qfs81ZPGAMR1Rv2FnvJzyuGnNIjpHkilXfs0Wps3KH14cFg2VqGENhIWK\nTiIcEIKGOKa68/q72cM9e5EmDiI2ppxmmI2aUYeDf6HFP5WEDfybf29aWwwj\nWu3nDUdfpR32TaWX5nLx3pQSxnejLyc6HDXrI2IUVzf3j457nhuRQNSByjQp\ne9ulHvnCO5ASFZxILgtr000pqVh4/qYVZ/c77WWltvnZb/QH89VQF8RlnORj\nAdGvtAfUQc9t5qI29rmClKaZQJwvl7iPgYF6lLGTDlaIZsY3QUXMKBqcWbzn\nCSj2\r\n=YOu2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.610c26c4a.0","@material/rtl":"8.0.0-canary.610c26c4a.0","@material/base":"8.0.0-canary.610c26c4a.0","@material/list":"8.0.0-canary.610c26c4a.0","@material/shape":"8.0.0-canary.610c26c4a.0","@material/theme":"8.0.0-canary.610c26c4a.0","@material/ripple":"8.0.0-canary.610c26c4a.0","@material/animation":"8.0.0-canary.610c26c4a.0","@material/elevation":"8.0.0-canary.610c26c4a.0","@material/typography":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.610c26c4a.0_1593615452047_0.9315892094828193","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/drawer","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.e2ea4a99e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2d3b87619a077eb8cea1a587d5f46dbdcfdda93","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":48,"integrity":"sha512-BMHAIxHfZkyBQP8bj9jUK71uOc4k4o3jgc0BpJM2G6GGQ2B6LFj9WQwDAR3LCbxWEBDoTWvMfeZ+VSk8wJ6HWA==","signatures":[{"sig":"MEQCIGc+zMSGAvtyXCdK/EQJrbs2p7qRwwqBTSux2eHAHz5EAiB+WckojPzmu/3cV51IpjshIv/wS5ubjtekQH7Dr6oF2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OPOCRA9TVsSAnZWagAADXoQAJMVGWjfwZwcqQf642o6\nPL3DqXbWSrdTsYTnX+1RMjHk2M2P8OdBTzDimxWlC6iSGkEnScD1yFeNZgml\nANpBBHc5dbTkG5wVF4wqJffGmTySe2hwMXvHgKk0jkz5lRu7PAglHnSvHhxL\nDK4lr9qfd0VCwNYObpxDFKe7zvgsu8kjEXUVJ41fcnwMn/UMThpzYx/t430v\nF/hUYLFgfhACnaeX1xfCehrxKZJGh8yWfuRZ0NbGruV7Rej/QzzGvH+xhEj4\n3dM/1+dAKMnkZxSKmg4ak/j0NFz3z7KfsmkGVbgnpypNuj5rU0SaI1+X54Zm\nS4UDRdOnADzWZAt1TsShG596m1v/+qEp8NqFyVM8jrVfFV5If3BA6QfCR9yu\naIz46OIsxRtVojXgWcPpwCuauQ3Gzty0kxP2+q0TPsCuXuEGevawwS7oHm0Q\nDplfa2061BNpa1mUc4+Yf0D1KPBvV0sQsN5RMkp/MfGjiPB0e9FcPtgNZTnd\nmP2E3V67PhufsLLHbersT2IsTys8o2yA7SUM7nFb+kx1jwR5aIPMt6hyTyk1\nELLY4ezbbZAOU56BmzNTVlKedEePpLb2rdHbmZoMZmdRZxrE6H4G2soXa27r\n6s6X+L9TjvZCwMPyQUI8tqcy5eqf8u/wTBhhZ5WBXcjZaJKYfWKdnY9istcp\n3AOA\r\n=gKT2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e2ea4a99e.0","@material/rtl":"8.0.0-canary.e2ea4a99e.0","@material/base":"8.0.0-canary.e2ea4a99e.0","@material/list":"8.0.0-canary.e2ea4a99e.0","@material/shape":"8.0.0-canary.e2ea4a99e.0","@material/theme":"8.0.0-canary.e2ea4a99e.0","@material/ripple":"8.0.0-canary.e2ea4a99e.0","@material/animation":"8.0.0-canary.e2ea4a99e.0","@material/elevation":"8.0.0-canary.e2ea4a99e.0","@material/typography":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.e2ea4a99e.0_1593631693904_0.1769521736441304","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/drawer","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.a78ceb112.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a83bbaf07f957a91437fb4b75aebfe2e5dbfeef","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.a78ceb112.0.tgz","fileCount":48,"integrity":"sha512-+zfYyOyrS5dUA2dzuBiTFFluaV5P4coNIfXNUNWNSl8IcXBeoEIQAwviaoOKFaChh9/7s993gVU2oHfsVJ+FBA==","signatures":[{"sig":"MEUCIG7QQEQVAVX/9j622Ap+jkpY9xHXpDJaLJNfJm2ANb6RAiEA4zmLfK2c+XuklKMlmB4PCg6GtxY5/SrZzmg7IKmgL38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OaTCRA9TVsSAnZWagAAjVwQAJE9jHvqAFWnvlBoHQpW\np3uVcchdZJqQaRaeelcua0mWpPYnSe6c+LkqIBDt8lGqLpaQ4z3W3G/zUKRl\nflIJQmnkCpoCA4a7eEzVEI1SWzoJ/Ju1QJ32zMJ5FtXrbuzPLlhxnAWgWQFf\nUjh43OUWYKZIaeRr16fPhqw7tDrexHuY2VK8l7eMUlaN13U6jWB89ujrBFFh\n9hi6eHGitX51lc1/FxXRJl42alShDLAcodyQXuhlxa7Ht/P+e9EXuTJm0EvA\n4MbKS5/WkNmzHTuvgRat8wmnT1LKkhAikGEzkgm7hBJhqiaAzV3BVplDErth\nfWcuuHYitKGcIQimDnk9q0ij3wLjnLmjlimarUjRGe9Z+wX7ETwoOhA4kn8d\n00XuUKnKFdvmR5lWcY2CRldIQQqOtj05YQ8gNc/i+3wrbV+CiXoA5pPfoOQN\nExrCbgHZtLG5zfNM+c1jECOzv96GQAmBo31RuoQXwwP0ycK6ZgDEqR7c2H8Z\nc9nbSKtJL+6V97STnMRRjRDMg1LjZBFYgYkQfTZDIys7FgJa4hWHQRkZs4Vr\nPPTFvCnTsx4s0DKYx+NJ9E6elUKDrEpHV4gXO/kQKX+sgCWqxEp+R3bIoJ/W\n6acnSHizPYT70SMc08GcIftCo7QZl0dUwnVDZrr380JKgS02MertA1YnSkgb\nQQHK\r\n=xizA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a78ceb112.0","@material/rtl":"8.0.0-canary.a78ceb112.0","@material/base":"8.0.0-canary.a78ceb112.0","@material/list":"8.0.0-canary.a78ceb112.0","@material/shape":"8.0.0-canary.a78ceb112.0","@material/theme":"8.0.0-canary.a78ceb112.0","@material/ripple":"8.0.0-canary.a78ceb112.0","@material/animation":"8.0.0-canary.a78ceb112.0","@material/elevation":"8.0.0-canary.a78ceb112.0","@material/typography":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.a78ceb112.0_1593632402926_0.34924887825668893","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/drawer","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.b0c456d33.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c993423377ffae963d329bdef89a8a667e378a4b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.b0c456d33.0.tgz","fileCount":48,"integrity":"sha512-uGuHX8FQ47bsHtJ72FpJUUiJGnoOP7l4VmbSsV8YlN0YMtkz07T71PAYAM+6J1cmu5vgq+H4HyPOD7JulxXvOQ==","signatures":[{"sig":"MEYCIQDkUxJdOd5Q6nBOcxGlEJ9bmRrghlroRoaVy5DuYJKanAIhALjkItCx3hknxmo3ntfc1f3UyEcndOPVEWA9mHUeKr24","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6jZCRA9TVsSAnZWagAALJ0P/1xbIVqznEsf0vrUJpH4\nB10naofqxnp3+vV/i/4NZTfCx81CuC6INGqtsH+UXicYmYcir/nWjWzafPb0\n0PVyHRHSbbPm0/BCkVkXQwEaUF4Rn/OQPslZRAeJ+ntoeop1J1MtkMop5MWp\n2Sj7QPhqmRhOcdNoVJ+0zfE8cVo3UAgN7kOTU40W3JSIyHOs03bsPNdo1MTq\nYikNqO66USG720DhauhhOz+6ASMITX4wkE/7GOlnwmH6O994hiTSVq2FdCcs\neX9uGwlk/JQTfuFXblGiS2ln2LJhTylRC1diY/JqkPNVlsoMP4+D2Kj5m2sW\n46aZ5aekofYfp/7KbOyytKDIv2d9yE1i9BhqLcJVUc1DRa2k9EgtnaKUmcAs\n6fsdKd25ge5wR2rkD5BIk3RlJYrRGVF+DiI92nXf6wROwi5L/8BDAxzqoskM\nXqVkUDJMM6X9bM2rsb5h4F7tTBgulUB6byYo9tvWsqxjeA8+D6D8bY9bIIJ5\nxvL8r6cNjWFJIS1hF8B+pS2c5Z1RjB/5ffhM0foSy4tmiC8VyciPRf4ZHRNK\nnaMvMigB0q8uW52yCM5dPdh4mkdIikGhnMENvqRk1yy93DNFQ16xDKsVs3/+\nvLRgpKmvj6ahom1PQ0t9EQVadH4vzZ7n4EmhQ96bDgCy7BXx/H9Zi7MbErnN\nYrTy\r\n=UV9H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b0c456d33.0","@material/rtl":"8.0.0-canary.b0c456d33.0","@material/base":"8.0.0-canary.b0c456d33.0","@material/list":"8.0.0-canary.b0c456d33.0","@material/shape":"8.0.0-canary.b0c456d33.0","@material/theme":"8.0.0-canary.b0c456d33.0","@material/ripple":"8.0.0-canary.b0c456d33.0","@material/animation":"8.0.0-canary.b0c456d33.0","@material/elevation":"8.0.0-canary.b0c456d33.0","@material/typography":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.b0c456d33.0_1594075353254_0.17419293541035374","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/drawer","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.2e5711e04.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"322e76803c5db8784876ec3fcc8513f44ef6b763","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.2e5711e04.0.tgz","fileCount":48,"integrity":"sha512-VW7gYyc3Id53hyN0w2F/GjbJdUEpt5nRlERNF7WQekXb5rYvsQa6GNLG2F1WFmeoUy78ksUxy+CtkKdCB1aP4Q==","signatures":[{"sig":"MEYCIQDd82m7SB2KAhFdTfiC/YSUmMdXLv6y/c/TQQ/S0LGr5gIhAKxvQ7622l7FbEKzrs8vi1rCq5jaKKimbgk0Bz93+PH0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfkWCRA9TVsSAnZWagAA3wEQAIDc1GNfwym0y9OM+1jE\nGAawU5d0FEmkXCx9P1iycSluNykjwfk5K97R7QXwopmNjiF+Zy3bPs1OGECs\njmUYJtSC8skVwi0wa47GHJaNeQoIbWHNRTAyKRgyNxEnDoE14g50h54/GJV7\nw3OTyYOsyBeoEuo3nRIDyOb7kPNdrtvGUXjkW+lWyhJN7NdB+1jxUs5XThuD\nAq6BwMmb1hok+5kZ3bZpUjfJIxcwVhc9k5JudoW6iv1fpoBBAcFhQ+aJlNkx\nvA7W7c848qvQzo4cokdx3cJXMjsSw3siQ3A0/Bc8fDxF4x/AXJ8v6KOzrW2R\nvSIDhqwTG3iVKrtKGF3Z/OeRFP8cfiE7Cym5QJTR5dhAH5L1Lv2AUR1WOt4F\ns+UxXpHn//wf4GywMlqDrlYmNOXB6xuLq/M/yivTysGD27IUzfZy9KdWN4Pu\njwAVEKapVg5Bri1Bg/yvMHkFm9tB6KqJAYqwEqB9co4CBQwo6kb0ZVmE94wb\nNKXZ+ehl/m6R+XLWum75YnpOZXV0Bl1jvVxK/5bVxbC8sApj+wIVEovg7olh\n/BisZdY909VAPB6I21lxsqKg9BhN2CVcxLqau/9CmUgJCnvQbc/H7Bul6ZVs\nBvfCuIh5eiurlaZEZMhvALoCbhjT/o5kQ8aaY1/9eCHhCzqC7L2NyD+mnpqS\n4tGD\r\n=F8kA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2e5711e04.0","@material/rtl":"8.0.0-canary.2e5711e04.0","@material/base":"8.0.0-canary.2e5711e04.0","@material/list":"8.0.0-canary.2e5711e04.0","@material/shape":"8.0.0-canary.2e5711e04.0","@material/theme":"8.0.0-canary.2e5711e04.0","@material/ripple":"8.0.0-canary.2e5711e04.0","@material/animation":"8.0.0-canary.2e5711e04.0","@material/elevation":"8.0.0-canary.2e5711e04.0","@material/typography":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.2e5711e04.0_1594226966467_0.39749352235836355","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/drawer","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.811fc5d24.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28321fba9401585cbc12745598c589c4a8407473","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.811fc5d24.0.tgz","fileCount":48,"integrity":"sha512-MFOgUevtQBypqqL4qNtFbATet4YkrXCuFB8oL663gtoN520QI8Js4WOJGRXgGrNpUmLoCOsGk3z9UGuR9s3iaw==","signatures":[{"sig":"MEYCIQCSP5eNcEDKUdKfERQqpJlaly0Q2cCxlJBywzox+q9nHAIhAOO//20WIriYf0k1LYQ58hI4crDl4JuMkGNNvoNAURp1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf+KCRA9TVsSAnZWagAA3N4P/RcocP1tEjHqfkYH+cSV\nB981PbUCqyRFYWwq96OmR1E/oyJsCutEfS81zw8QfXZCZCfPZ+JvWlcE7Yvj\nTmx/rAQcBacP5sL4Ddpn+AVMYZo5+rlQRVYMxmd/atiA2SJJkKFvOjIaAvWd\nQ2X2EEJq+fcLJtFKcBxZ/mJm8Zv+1lmAM2OYbTPCKmU5ICbWqsIViCOZ3VAJ\nyz9ZCvpH1enVFG4PHfbO9F1q0OB5bjHI2/+y+5H+GMT8vL9heo1RuTMShDzz\nBZolajuoxBK0VRXSxMHd1OKDtRGbLGMnMkorkfSBohHOJmMxJUDC+SDyG7Np\nAHrRMxeFA0DKCuo0ar5VE834Y4rvWYboXA7d9aAkSzyOwCUoXIwVP+zVZ9fa\nevRNjHCA/K8X1NBDitFkDgjJwwCvsfDApWbHxcFf+cd2zNjZWU4eOUIumQJ6\n6Ur6iOMj3BJrT2h1RhelQ9cJuAaqkVW9NK0J0XmwzwsevXZKy7WVA5Vnel2+\n85PAg7B39Oeqipa4LvAEgoHZ7crGc/aSuqcga/tXqEdGcTUcRWqQFrNhd2Yv\nc8iQ4vYxHoSFx86VsFi9mqtndMPyCKfn37dsC/0ctjI3oTYkmOHIMOfVC6eo\nhQEYSNpNLawkyzjcJsq24dhTivaofssRA9P7RiE+ZAKRQRGmB8Xdb2dMTuP8\niPlg\r\n=CCyB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.811fc5d24.0","@material/rtl":"8.0.0-canary.811fc5d24.0","@material/base":"8.0.0-canary.811fc5d24.0","@material/list":"8.0.0-canary.811fc5d24.0","@material/shape":"8.0.0-canary.811fc5d24.0","@material/theme":"8.0.0-canary.811fc5d24.0","@material/ripple":"8.0.0-canary.811fc5d24.0","@material/animation":"8.0.0-canary.811fc5d24.0","@material/elevation":"8.0.0-canary.811fc5d24.0","@material/typography":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.811fc5d24.0_1594228617654_0.321941220270735","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/drawer","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.6ed717ddd.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d8c6bfe253fc83c7c37ba489253729f1b106386","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.6ed717ddd.0.tgz","fileCount":48,"integrity":"sha512-P6mEtAczVJNcmSe3B3mZMi+brtzWIrE3WmqPtgLvQtWVHDlCx9gTaPwtp5cIOH8inJdSjyLaLdQQ//Ti1OpRgQ==","signatures":[{"sig":"MEUCIHGmx/fVCDksTbmRULS6mgMb5+39nHdgyzR4tXymJpR+AiEAzuo/7WVhtOjlFwY/GtYG5irk2fs1IQOv0JW1E2heGc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiJJCRA9TVsSAnZWagAANRwP/1bmNj+GABtRP/9l1eGn\n7Dnr67pGyiRF6lFDdGQjAWPoliZq2rfG9FTmkjvScDSU3KPRYy3/YCnhU3lH\nsaAYW8tOk5/LSb3IcZ3xQvScgcU0lGtQde3NQPUaq1mcXF3PAbjKzJv4DVSb\nGSd+t3GmF/j9Tq0ivx3o2SVvsOwf0yP+NXBBgOWjj514pwV9SXzdEu+y1449\nXMfZXvPXlV4vgTf/KNGGYFyroA/hwNUBcrD9V/1oDClEC1Uu3vCPpF+Nyrjt\nqZy1plvAMPIkxr53/Gv3OPyOmadBfbVKSJdbAxUaAODwoW2DoMnC+s3qP/t3\nBOUhc732wxBzSAYBU6RRGoqmhk6OUfaHv8ILwnhR3nqI6QC48eZJLd/ZJeLP\nx+X73wMnVLb2oH5zPar+zXBAhvLGSue2+QRIU/Fm6M+30pBQ1erIwiZQri/h\nqo87Q0/PU5QL3DTwgn8fKnQfIWm/r1vm+anr4m2at0O/QJcY34MiXAJ0DU48\nR3tlEaWfkSFK4+x085s3tAy5YocyI3Lq+pJEQNBk6TItd2NSngEmmvdgHpa9\nHGSjiiZTWHFcYsatX5RKO0497y/0K9LluaKjTYODHLPG7JN1IO1lJpQK7X2k\ndSh8Wra99uzKgTgJtk0aMMXog7PXNX3GNIcTA+bZvVK0nAiqxTd7mgG1s2ys\nk69H\r\n=MLqB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6ed717ddd.0","@material/rtl":"8.0.0-canary.6ed717ddd.0","@material/base":"8.0.0-canary.6ed717ddd.0","@material/list":"8.0.0-canary.6ed717ddd.0","@material/shape":"8.0.0-canary.6ed717ddd.0","@material/theme":"8.0.0-canary.6ed717ddd.0","@material/ripple":"8.0.0-canary.6ed717ddd.0","@material/animation":"8.0.0-canary.6ed717ddd.0","@material/elevation":"8.0.0-canary.6ed717ddd.0","@material/typography":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.6ed717ddd.0_1594237513431_0.9107511067380938","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/drawer","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.d850de590.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d753c57b3ee887f8ab9ef49bcbacac7c9f3af2e8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.d850de590.0.tgz","fileCount":48,"integrity":"sha512-VhZMYj2DRElqaX3dhhF3JRmpnYEGUYyN1mlkHNTfY0dn7h9B8dKooatiFThwIvB4km9A+jN/nSBqW63BK/rT+A==","signatures":[{"sig":"MEUCIHKQ3FHVh5s5LPyd9iUrtsDd/Kl5a50yWS4iqvGj08TzAiEA4x9ccA5kIuvsrJfpDFq20s/QZ1FT811K+blVcLWNvP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1ypCRA9TVsSAnZWagAAaBQP/R5RBPFjQ88TuKT8Z4Ng\ntOgQya78h8ibN5ac3AiFZvi58w00CFFhPsS54Q23jhpwYAB0zBbNrwrskHzM\nV+2fZKNE+o4vtSraUga0RUgDgBwHIi/5qFjlFRVWKCS+7FtJ+2dgRoAfQMpu\nyW1v4YfzudAVVW24AYaDOMls/nKlJ+Csl4Iowtvfak3pCoOiyvevIkpZHd8z\nU2HFRyh8kth0DJXsE4zDdbNdh8vN0m/wxy8MocwxXUZcsKZiUHB2ZLCyfZjA\nNdk9WrXym+OlbUoPAZYy038BOWIL1N0pyMUPJnf3YSCXbkPN5F8W5ymIiCRM\n+7gB1MtNTiaeUd0qQ/LNYH0FEJniJpqpIh1IEN81VZLKWE/FYHbzzF4hgVkb\nJlrSKBeBkmUC4k52+I7nDYSCJk3e4Fjr2K9LdImxfoQSAxDljriHYlSLsCCF\nbHw0c0xfVX1hoGmSTKkAcIgBCL/zKGkWbe47raCpVyydX6BE66baP73mxZ7q\ny7Yy4BaMjK0X2O9ZaIYToaga3ZncJ5r8CTEqqYJLwkTJdxHnYB0klPZdnmmG\niU6uEWGxr58OI8K89ktCW4zz1jY0TBIq/slfTd2xudoAyUhLs3WO8PhaCQTI\nIvgL3W9IwFLjJk9wu0k6t4mThli/+Lixd19pOPe6oxkzWonCT+7Wv7Xmdz0M\nJMlq\r\n=i1kf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d850de590.0","@material/rtl":"8.0.0-canary.d850de590.0","@material/base":"8.0.0-canary.d850de590.0","@material/list":"8.0.0-canary.d850de590.0","@material/shape":"8.0.0-canary.d850de590.0","@material/theme":"8.0.0-canary.d850de590.0","@material/ripple":"8.0.0-canary.d850de590.0","@material/animation":"8.0.0-canary.d850de590.0","@material/elevation":"8.0.0-canary.d850de590.0","@material/typography":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.d850de590.0_1594317993521_0.1790017338344616","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/drawer","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.e07a70841.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4eb52c4079475ddd656438213ca647e5450be3dc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.e07a70841.0.tgz","fileCount":48,"integrity":"sha512-VMCGL/Kt87bBtvdNtCJaPZp1xzwbuW3eEP9XCbIyZ8+56KyVyBEPsdzlUbKN+VhKnl1F5Pg4xVd5d51lmPgM4w==","signatures":[{"sig":"MEQCIFvKsf/9qA1D89Pv+bsPpMz76c+bnOTge6jliZxqIjiAAiAWVgCsIUB6hVQk5pPraN8lC9hcs/1OVNMszSs9u2I1Fg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2OlCRA9TVsSAnZWagAA7sAQAICzRpTOvmzIaF78H7z8\nWDAQCkT53258inrAse5gbjm7Wcf+ulxli9LY5lSW2gt85FGmQxchDDySlB9P\nO+s0xGmYckuIgRmOGak90K9UnJaoMcw6jkfjPWBYrnNj8CtcLJXlTvfZFzDs\nmowVML8xXzlXZY+V3mJomzh0Dw+ooiiydMTqzYwhQ+ARsiwtDkwcP0+9sOX9\nW1UUvHdVu6SWR5nc5x1BSW5f3pbw22IHJ2uHxTV+n11wNE8fsognVs/lfWLF\nAyBRQf3o0mO4C+C99VUz4RKpVtpFYFOin+I2M70eg8ywMJ927ZUXBLGFkphv\nPSRAS0iD9v8DXeMJoUpgzFo6O75vb7b1zWdD9FtqYMbgfhl9eBTmv12+ZE65\n8IrqzaT0B3D2SIuU6nWKm6PEZtrqRFvz7ENPSkfWlC+0EVaMyuYfRKEhm+tv\nUEKW8YaX6+ixuSkhmlzdxpgDEHgy42Xwwg5lJWeiY8iWhXM0D826vFBEmCRa\nnMk7V3LP+KQBXpaYnDD8u9tXJREjZ8aPFNyPvF//dDot/mmOw/QsAm5ie7JO\n8QdqG73q991GKw0563yp33161H6yVJroPECJJhpvR3vfeimlkI9irbch8aji\nceCD38K9iX8RcVFq0iFEwy62que9oxzJ0dkRBAoS/FlFRh8htnNvZlMJ2fdf\nDXxf\r\n=ENMZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e07a70841.0","@material/rtl":"8.0.0-canary.e07a70841.0","@material/base":"8.0.0-canary.e07a70841.0","@material/list":"8.0.0-canary.e07a70841.0","@material/shape":"8.0.0-canary.e07a70841.0","@material/theme":"8.0.0-canary.e07a70841.0","@material/ripple":"8.0.0-canary.e07a70841.0","@material/animation":"8.0.0-canary.e07a70841.0","@material/elevation":"8.0.0-canary.e07a70841.0","@material/typography":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.e07a70841.0_1594319781393_0.9360823456108258","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/drawer","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.37947ed6c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80b222f107e59cb526c2fbb56acf552a09d1c41d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.37947ed6c.0.tgz","fileCount":48,"integrity":"sha512-tHs/PX1W7Q/bVSlk4APlXsDtUaoF0A+QJrI2281EEEy/mHxjhJif9HcR1Y/5UxkyomVKQjbshvgGR5AwYMLRag==","signatures":[{"sig":"MEYCIQDC3z+n9uVRMgD2RloNHIiYCes4pdSM0f0wBnecvxzzDQIhALvsmBX8Rk3FTfSttCg8wG/eYM89sX9hWVZzvys7J5SV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4AACRA9TVsSAnZWagAAVr8P/2/5dqbXAj362jlM/4nE\nvMZrr7F56CKiFdvfkJ5CxVYw0YZkQSPR/GME4AUcymMdEWCa7SMg2a/JESW6\nL0bHRGZNrq8EjsNL7wmLwARlYGHORxd2NXTUg/Api6XPYhf3d1G7gg/rjH4K\nRJiWfUedlCcNN0SHEY/R2K451znDo5G1RUQv2ejH38UUihpp4LOHLAfBeFSl\nLzLujaO50IQN1OcxBlWVji5U8abPTk74BsUrFm5M5EDzIcSU1tIJI0f3tJrq\nPQ2CfiKAeyEEU9IlBG86h98RvOUXqUuweq1xtjmz24PDfckwnPFMqJ6/OdrK\nXc+Gj6irnwQ+h4BNRNuxH2PToqYFRsRjedc8zDj9Sw2n/6eIjJhY/Mm2kDqW\nM0QTVMOwUrr8L7ClqYyAX6IPqgozEYxP6PS9areD98MFQvv2uu4vECQ0fvin\n4JQMpa3rULXNFE4Sz7wkRQhUvQgFUDJJmL4eF3GZDVOMyOU7HA1LzTM4DUb3\ngTtKAbeGxPytkkKt5/JJadPsPQwH3BghPWWPypLUNJsZLhHvxh5ylg9w0rsU\n2evwb5yxxdsQELW8oJOq+WVPAtzSCBK5IqVX62Dj1GTqqQObKj6SqeuRYBW4\nsZEm2mRdes65lrJ92Okc9dzvHhQEoJbCqtucxJ9h4psZlCXhyGXZV3nQlgrJ\npPV0\r\n=gWqQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.37947ed6c.0","@material/rtl":"8.0.0-canary.37947ed6c.0","@material/base":"8.0.0-canary.37947ed6c.0","@material/list":"8.0.0-canary.37947ed6c.0","@material/shape":"8.0.0-canary.37947ed6c.0","@material/theme":"8.0.0-canary.37947ed6c.0","@material/ripple":"8.0.0-canary.37947ed6c.0","@material/animation":"8.0.0-canary.37947ed6c.0","@material/elevation":"8.0.0-canary.37947ed6c.0","@material/typography":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.37947ed6c.0_1594327040147_0.05487502493254315","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/drawer","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.5d443afec.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2317ab63866d9fe079198a4473fa3e48c371be0e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.5d443afec.0.tgz","fileCount":48,"integrity":"sha512-SvDMppSyOTuget1RKXbZPKa5Mad7ihgYxrBr2/XlFm9ZKZCM61wFob2/nYy0sl3Bbx+kUDcXiwcTECdj5CJ2Fw==","signatures":[{"sig":"MEYCIQDRj6I9lJRQd8pebOkJUMNSvximXrQtLBXRJ5XikEXjNQIhAJl+GgSWI1HkcfkjP4JLQyJ1KR0al6xNpqikQAtIOLoq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4OiCRA9TVsSAnZWagAAamsP/jc1nMBWLrOn7waDdt5y\nj5k2JMc84o1oDfOek7i7w2gYw6ApGvCSPkOplHm8UfqRwohgD7+UKk+3NLBM\nKYHp62Rdj7uWLS410qDEdBs7TSqEyi9SR1pi7DCGncUBiB6j9Um1MfU+Bhsz\nQzjFOCyWvHKWELQkdFm6zPul6VtuaJJoDoSpkCstnsS70pok6PBTtee0bkrw\nR+QyMyW5fErKkVB6/cQwCr6kEj/RWsc//KbA52imbMWXTT3tPPhMFTyU4bOU\nDhkN6pbcsrs1iCXO0//5GZewersMe9mHg/ZEQgNCMRBiW/1afGj4aVfyrOZ/\nuribE4R4PW71AOqHW9kE8h8KTX/JLJhYC809PT2ssxB7I9NXEcza0RrwpUp8\n7hOWXYRtzNtTGWYdoxb4VzMvuTc1qIhcBJ6kRgSoOnV/xsRPR45hcJUwTCdu\nRIO+nwRsqM9BtOMCUvxcPc+ivjaWu53/o6HWfq/LNyLJxHpcT7yUE/JfR0S8\nfIx6xZqH6w96vBDMfil+Zdg5jp3MSs2OzsBKH+or48puJ0rmvgoijIfTlRrT\nhQ2g+XIxmlXdmbqge9eNYgg838sp0fBaJNhR521/R7hZylLKZkIuztEKzfzx\nq4+utdmgpvtBU+t7jzqey/gDvEd5nbTzQxJP+9PYfz1+LdEgEipjD9BlzYPj\n5VOn\r\n=3BcX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5d443afec.0","@material/rtl":"8.0.0-canary.5d443afec.0","@material/base":"8.0.0-canary.5d443afec.0","@material/list":"8.0.0-canary.5d443afec.0","@material/shape":"8.0.0-canary.5d443afec.0","@material/theme":"8.0.0-canary.5d443afec.0","@material/ripple":"8.0.0-canary.5d443afec.0","@material/animation":"8.0.0-canary.5d443afec.0","@material/elevation":"8.0.0-canary.5d443afec.0","@material/typography":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.5d443afec.0_1594327970108_0.44991775885232554","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/drawer","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.9ac1ed914.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c269c6129e1b355cff9f6bab83e586eb6658ffa0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.9ac1ed914.0.tgz","fileCount":48,"integrity":"sha512-EqDzjYIeCrzM2BMiF2o8gMt4X0EcpEm10F7374hm1rGA+GFwJBj1czOqjONUxzp0LT2+RF/RgjCEJoVX8vW7rg==","signatures":[{"sig":"MEUCIFAv82FpwvEqaj3TFIcdJW6K8ZchID7H2XLiL8unelejAiEA+3BktrHbdpqDRYXZ70EExhNDlF7hwmg83c0hIpFLuGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4ppCRA9TVsSAnZWagAA0IgQAJAOEX4F9onXw9aXsOQx\np1v6qbA9bxJA2lWj2EShuA/Iy0MfNXFGjVM+RZYmxxj/1NdA8Q42O6nXkbhW\nsExoTKM6sKyJ6pWZxRRr1m+XlNTRqo4RjOwCUEEQMYDeIaqyYx2BiuhUWrTL\nJ7RIrk93aJVbr+G9AtPT3rKv32yGq7mkiEP8W0LrkZBgnPd1UDipOosc430v\nC/No3Sona02nXXqv+i3Q/s2Q5WWK/YmDxT8kP1fnN7O2Gh3vTm0Nlol1K1I+\n+n1GSRtgIOhoMQWqWwnVuz0NMUss2JKtZqkOsjjoq8YiEIByq9GS1/kYew4S\nj3zFwMvN+hNPAyejPvF+0MmrnMIkPuITuc1qk5pwkY+Ki8JQJ8E7DWhx5SQ7\nXeDVueo1fZfkMhVm1a9H8gzLJ7RYc466H2/PBLEhgaw35awwDkFqPrI2l2fe\nRdtM+CBU8wbfe6+4x2kR1HRxJhwqKmNGdWOmRTy19Mt9IppHleRtj7pqmNEC\nOgRSuVlNWFMDfAcCvgEcehRU0MJRPyEL3x6LTZ83Y8vyQ4BIIs3UIdTbdXHQ\nDOV18md/HW4TfWJUq+0UCeRXusxeO6UL8xU9dEShvS9Ngw8fjnYqzHLfMRTD\n2Lis/Nn0Lfys4k/4CCA+5JOZFKpRoZj1RWybBvJ9LI4JYNtpIBER8hNasly4\nWMqi\r\n=/Ur0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9ac1ed914.0","@material/rtl":"8.0.0-canary.9ac1ed914.0","@material/base":"8.0.0-canary.9ac1ed914.0","@material/list":"8.0.0-canary.9ac1ed914.0","@material/shape":"8.0.0-canary.9ac1ed914.0","@material/theme":"8.0.0-canary.9ac1ed914.0","@material/ripple":"8.0.0-canary.9ac1ed914.0","@material/animation":"8.0.0-canary.9ac1ed914.0","@material/elevation":"8.0.0-canary.9ac1ed914.0","@material/typography":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.9ac1ed914.0_1594329705370_0.12147544722012871","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/drawer","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.1e7cb6198.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c15a2dfb5536ea637b32a5c1356c2075bdb0b07f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.1e7cb6198.0.tgz","fileCount":48,"integrity":"sha512-CorgqyXnbTwIhUGEb/NEbVVPGslmDTDOa5Ovf87cEGK3uXtfy83GgnA613Rz5l6NpZqtoEibf8kE2/emb08WrA==","signatures":[{"sig":"MEUCIQDqHBJBi38VKyurTcSM3metz1CaODzqsv8sGbrC2LCllQIgY+CfULH37tHadiOKCzIYQTcWEgJKus+ADYhBRfs8a64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5aOCRA9TVsSAnZWagAA620P/Rsb6jVUQfREsa/J+xTt\nRVeKlsbG7lwRLCH+V1p+mTwjnYvO2kFVl1lUF7HXuH8l0bMdM8l8F7HmZ31T\n0EHCDlYSK9IkrZBHT1ws3oHxVY3IwBEuF2DKcW+XO4JAfnCHu/65XUiO58Pn\nKBMC1CBHVOEBi5cBCgamm+iOSkg56kcKC1DvbHghAVYeVZqX+qAO8C6EKZ0D\n8LCyikhAkPzl4Yj7k2DndgQjF03eOEBZVNqmAbRKQyMgOceorQyWfDGL0gQQ\nUnlS18R3lF+Ga7LLBp3x2cs7PquUN2duiH+D3fz+IezNj+VrBLlNgSxcn8vb\nD37CjxKcQOO5CQdlReoZnG238wTzZ14zWubdK34vGozKf47qn+q/hZjvftUo\nEwiyElP2fgSWzgD7pqd6W+LH/0iKRJU/7f+25H2d5GeAmO6leIROp8xTbGQ/\nesk8aPXEk3fhPvZvdAwgf/Do5RUlNMbio+XAg2ez7Y1URwiFRhhtZum7m2Ln\nQ1JmkMle/KRzIOhhL3yZr2PO3gwwDx7w3O7dPlYd5RFZ+bbcFuAHoTCImMcq\ni3l/JdeAhJ9ewpI1U+mjWeGojua9lDx0x/4XaxpRSFmA92erNQHOCpcfyDA9\nN62vJagEL2Qa2djYflnNH8iPMHRRkci0EZbbY8s8JVD4dpCSjcymnhQdeGMP\nYvYi\r\n=xGuT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1e7cb6198.0","@material/rtl":"8.0.0-canary.1e7cb6198.0","@material/base":"8.0.0-canary.1e7cb6198.0","@material/list":"8.0.0-canary.1e7cb6198.0","@material/shape":"8.0.0-canary.1e7cb6198.0","@material/theme":"8.0.0-canary.1e7cb6198.0","@material/ripple":"8.0.0-canary.1e7cb6198.0","@material/animation":"8.0.0-canary.1e7cb6198.0","@material/elevation":"8.0.0-canary.1e7cb6198.0","@material/typography":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.1e7cb6198.0_1594332814369_0.8119761982850122","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/drawer","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.843f636c0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"954650c87a99d695a8de41e22baeb350907da15e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.843f636c0.0.tgz","fileCount":48,"integrity":"sha512-ublCPziGkXpVdM/L7btaztChzsHEiuiqP8yWDFdFWQeIK0yVo2fewQKCwH88Y6FwuPNKoqMsjois5e+4d1B9ow==","signatures":[{"sig":"MEUCIH+VHNF2nv17qXBL5WYh+s+xQ9OvVrJXyl8x2KGZVpWoAiEA1eCr4T3p96h5/LuLttF6o/SHDoBBvA74UC/5cfDKAyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKjXCRA9TVsSAnZWagAAemcP/0i9ElyJK2IWdJfSdH9F\ntqOlXnCbB4uWj4Zt8tQeSMlUWa6DWT7tUAlnidMZdtW61/yMDQ1RsRDLxk+Y\n1AaEGyYGt5Ldhrz8U75UVQNRL+ECRxJCCLcTA33ctDcZOyUZQ0LsRF4YdMGG\nK8foSmkdS7hvNS6Mw11JvgO6gZ3YB+MmOKnr2Ha8jG7jXbWhOz3G27HL3Ays\n0Cv1kSU1EdEclslH39i8gNhCDXHUHdwM/5VvtNOFO+LXEYdLfYXUqEwSQdIz\nJYlOWRy4kLrwdwZ6UewoR2JqU+NKmls+g5PKG1XEqELs8Jm7WUVCRMRgFs3s\nJiquP/PseCh1QrOMbRsWz38ycQj0LXd++jErUAbUQZHV3Ex6fAS4/nNwZvX4\ng5743JFXqZKfJ2awlEE9x8Y88aNit9c7JLYeIEPae4a/nJ4a0XslBAvEqwBg\nj8dG/PHaAuVyD9vYjF2UPNW85JuhoNNEB/f3e7xO3QsXzxc5KMjvQ+LOi+Vc\nY0Nkf7Ru+edVh3nzbgY3en4dDHgyz9jGNj1SuOfJQ2Csf1xoQRHPtHuIVPX9\n6hSoBVnSZ5UtyBiuIczVwEOm9M6m8qYJJjv74c44Hzz8X4nIw2wcOW7kLBlc\nkrEhjg6lQH7eElUe7O+G1ttc2+SicdMhhobNKZQg0mo8Ma2anxpOP76G4tQx\nODAH\r\n=bTHw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.843f636c0.0","@material/rtl":"8.0.0-canary.843f636c0.0","@material/base":"8.0.0-canary.843f636c0.0","@material/list":"8.0.0-canary.843f636c0.0","@material/shape":"8.0.0-canary.843f636c0.0","@material/theme":"8.0.0-canary.843f636c0.0","@material/ripple":"8.0.0-canary.843f636c0.0","@material/animation":"8.0.0-canary.843f636c0.0","@material/elevation":"8.0.0-canary.843f636c0.0","@material/typography":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.843f636c0.0_1594403031428_0.7169696689721283","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/drawer","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.b2edaeead.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e07c7ee5dbb8733db48936c4cea3fd737d42b7ee","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.b2edaeead.0.tgz","fileCount":48,"integrity":"sha512-NXVB/ZGIPASNeMNbDja3PcwZPt+FDHhhrQIBVt2GgmlutBqQEEnAIYTPy1Nv7+dZHqva2SS7gfLfSoq9EG7L7g==","signatures":[{"sig":"MEUCIEGGVnBq8AbG7i5n3pBgXzBHgXvaNUlFenLVybFmBx1YAiEAmmK93ELSLvgzufSohG4tb/UU7KqLjRuXXVb+FxmLMlc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK6UCRA9TVsSAnZWagAA0wwP/0yw9LGE7R13SbbxiLK5\n71DWjGcApVhqneTaACJAG9Yt3wibBwqrW5W4SJdQ/HwrvHvtYi7BLxV+9T+y\ngBwQmCFKaUpuGP8ECLPbQ54hEU10GtTHKIUTX39sn0vna0gwrZLFnZ5qRU6C\n8x+TCXmlFuX1Ymdc/6Cm63h+cIUPWaCIMjykkZAZAWjzXacgB/NV4mcHGvq7\niGxXI9fdNlDfre8MQOtbaGuL7P0RhFMrZpA6QSE9cQPkvA+4XKdolzKUXhp6\nmOcTk0X9rW8GyrWNaWscCVziJWTq0B6HV8eRSVAbXT9F+pR/8eir2ft9b1N1\nG+M9GPMAPGuWMCBG8uNmixwWrfGZuQXhrPy7SUlwAx30Z5nqfaNEinhoHOn1\nznMnkzSy1aZYXAMbTP+hyJ8K06+/aS6X9lEetn0WfY/ygof8AyMLTVLNXygE\n2vO2vZMjOYYtl4x8p0i5nUctkcLZrzdEqpblG+m1zj1XvyxbNNGaA3CW83tA\n6s0tuA4eRgrBtJuKk89kPe/jDmDH7IxbdsDS7xiL4aORJ4xWh16LbV6R7AW/\nU9su6kRdj5pyU+RKfKBrlA+cWvjJjDO7pPVWZo39KuxFgIKAKu30gyjJVT7f\n2CuNMa6CDD3cic76RAKqeFPvlLtFQLVAYA+0FEt4lfmR1elgiSgcDe820xRg\nMiqk\r\n=Nzty\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b2edaeead.0","@material/rtl":"8.0.0-canary.b2edaeead.0","@material/base":"8.0.0-canary.b2edaeead.0","@material/list":"8.0.0-canary.b2edaeead.0","@material/shape":"8.0.0-canary.b2edaeead.0","@material/theme":"8.0.0-canary.b2edaeead.0","@material/ripple":"8.0.0-canary.b2edaeead.0","@material/animation":"8.0.0-canary.b2edaeead.0","@material/elevation":"8.0.0-canary.b2edaeead.0","@material/typography":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.b2edaeead.0_1594404500450_0.7894537023554051","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/drawer","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.5dac1f624.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c30d35c1bbe4e4275f39b38935f01a875860f229","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.5dac1f624.0.tgz","fileCount":48,"integrity":"sha512-+6m+JXUmwoEDUlKDQzcUDUfXXGthjDUkQcJ4r2qVeXi4iDELmH0APjY2djN3I5zOcOTe5Ol1UCvVyZnyMy8BBQ==","signatures":[{"sig":"MEQCIE7f/LX8juTWXOnJt1Ym1L7NHq0rGAWg3nndzySP7+e4AiAz5pPuqXbeHgIMiGTBmktjIYgtZA1VcvBCxQTHlNpS4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI1MCRA9TVsSAnZWagAALPQP/j7qMiVXoJYlYO+VptaB\nV05uRsaixg5vhMH8Sx5uPhVw+LPNvUK4i5gloK/wxCsgJIXO0SCjLKZFcDKw\nQMLtxe/K2qgJRENjq9cjn6QAx2p4MBC5NixcbOHweWb9LzAgwH4Dj5CGlm4k\nt55tB8oUlXfTq6Q3HMizJdabH/DUVcXDolyIYXcezpeejESOjWGJytslLFed\nOiGMDhWMyUFGlqXLo+KDb+h/FekYil3vO9pweZZbRqm/JXtzk2pQ/FdvpiCE\nt3QCfEvAPWJDbrBi90XFYLSENwsukpQTBkaJdOT7TG+6Ag0qRD+X1IFnmoJ3\nB/hCMn4mFrsg5oAF4vl4qIpZKESfqtHsXJVtJIpXTmQOXxXzuJkzxDnTxdq6\nsMIgl8KQavBnjmUYbsxKrfU2U3Hk+uTQFuh3M1/yf0wk25eCB9rpJ44SsAql\n2Vs6ps1s5SmK0VBmUbdBGIGkDTCwkYxX6d/HTQlLRd/m8KbyR5VBQI7EoWvi\n5WSvNXQs+VWwPI/xNNRj2eTeIzxd8Ki8cvwXOIG4NUgYpXdkYzTxV2C6lbjl\ne1oC52/LrOPbl19qyD08Klh1InZF33FWkz7+AjXyJu8Djj3M+NXXHy3G83Rx\nNjIaLyMxFnCqqdV2Lo+Q9HdqduCdPvBXFqynJ6dHBi6C/3+AiqfGcKwuo35S\nCFCa\r\n=q1DV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5dac1f624.0","@material/rtl":"8.0.0-canary.5dac1f624.0","@material/base":"8.0.0-canary.5dac1f624.0","@material/list":"8.0.0-canary.5dac1f624.0","@material/shape":"8.0.0-canary.5dac1f624.0","@material/theme":"8.0.0-canary.5dac1f624.0","@material/ripple":"8.0.0-canary.5dac1f624.0","@material/animation":"8.0.0-canary.5dac1f624.0","@material/elevation":"8.0.0-canary.5dac1f624.0","@material/typography":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.5dac1f624.0_1594658123689_0.6894773932645277","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/drawer","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.4497acef8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0792c94b246fe2a5d407428cd8bc6ff561f54a67","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.4497acef8.0.tgz","fileCount":48,"integrity":"sha512-U5Gb+jSARjO0lcOudASPSPgIm8Tu0i/tcWakfsJp19mtUep4NGnK0BiyYZUR8LhQ6K/Yt73wpxPJUJephzL4Lw==","signatures":[{"sig":"MEYCIQCA0Jfw11ubBYyEbOR0NuHWqXXubTd9pK1u+2N8QGwQ1gIhAIs0qcCcWWoD+9L65Tz8TJRzkXbfW39/BgBS+S55+sT8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb9gCRA9TVsSAnZWagAAC/wP/1pcOzqLVdT9w5z/y+dn\nhS/z533upB+1MD7Ho08L+67CA2t98Pq4bopqE2IbNIHiOdwdyJs/WFiXCHaS\nQiXwxZqJIwM8+ER5rzRqbpDAKgEpVJmUIyUj64fRmmU1z0tBpdeNUwo19p+D\nzeshYUvGUKN/frzNhdXVaScp1N2BdD03YBqHpOIHhBwgNJQOcpVZe5mzvgnA\nSq2YjLPMJxiRMOO7tGnB9kDQubNDZJ4A02oat9BMgPiIigKvuFc9I6in5IcS\n4zIDGKYnwK2+qs7zIScJipdxSrfrCLqpFUOGBqvFW64qPhqMhu3EBh87Sf7C\nbRClJ7dn3TD6oSNt5vFRtFd57CANWDUzXIIoaBN879T8o1LtBI1eEgrjZKis\nACP/rsWT0Ye3Jjo02CIbxDDZkDkdt8oPYMeHztJFXU4dGztbya7SpSpCqQzE\nykQyTPbR+xUOHql5SEyKQnIbKX/llBIbl9rkNvNRjJT3VsKPEf0wwPrItGRY\n1yQfZ0bhhr30aghFcSFBqk4GipsfSzKCSdfGxMv/OFFGILlBYiP2r9BY6fsA\ns3ZbuzgtxCZNSpNNEDmFpgtgJk6SFrh+UYdmJzPhby04DAJebnYvwBzLq0d2\nA87k76vTThStKs5sVkKQ93JdhBGylc2penUNpCBv7q33ewO9qJ8waG9pt8Sw\nzCQm\r\n=c790\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4497acef8.0","@material/rtl":"8.0.0-canary.4497acef8.0","@material/base":"8.0.0-canary.4497acef8.0","@material/list":"8.0.0-canary.4497acef8.0","@material/shape":"8.0.0-canary.4497acef8.0","@material/theme":"8.0.0-canary.4497acef8.0","@material/ripple":"8.0.0-canary.4497acef8.0","@material/animation":"8.0.0-canary.4497acef8.0","@material/elevation":"8.0.0-canary.4497acef8.0","@material/typography":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.4497acef8.0_1594736479263_0.8270801712732989","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/drawer","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.e6e23019d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a453f971fb39800c802989943467c23522890591","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.e6e23019d.0.tgz","fileCount":48,"integrity":"sha512-jOCnwoTN1GgFup4ZSujLcLBHPFnZWXJ/YDxlOSj4zuZUbsjhfvWz+VtTqWFFMKOIDaXu3Gr/Of0HZe95e6F54A==","signatures":[{"sig":"MEUCIHqfw30teiJRI4UPjgnoiDYTeEXKidBEy3V0w9NmZzs3AiEAknI9od/lUSJ7rT4hE/fKRqImcEYmupz7gPgbdmR3EVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhGBCRA9TVsSAnZWagAAgIkP/jb134106FJVhTwyxm3B\n6k0xnLEiozFbxlUX2DmUXUdSM2RZ6mkLe91rLf/yWIBeYZdcjgGpXKUQG56B\nQfMt4V318oKMIaGOres9e4IEHX5zc6HA7uTLH802+RgFDON5yl+OjCXOaSIN\ndZfWN+tZmm/HykmtvzrLUK6AVQpHJ9jsL4trjgTPNyUmRow3vamw6zJjpwGB\nNRESuhg004tfM/7r64y6/kmEyrR5tTh0QGD4ucTnS9YnFBddWiALHzrhncSO\n/soGFeouN/WTVYrE+w3+XL+U+6B/ouz6zEzvdM2SO4uQEcj01grnMIG01xed\nCfEwuH9koHR/E7VwRZqgbilrI7vIhfAnc6XVbZxIBA5Dp3WoaV3DzZUjKul5\nsKMzvIy3kPX+y5VH3m6hRnPfoiUPryJi/QM892JuWRzkI+EzTaPvnvNFR5F5\nXC8mfHc8Bo8RlB2LJRMoWIAYKYn8SibekxZy7fkVUP1DQUXcaCwY88b/MCT0\nnG+jE27TSUTQSNKGHYsCtP8HAXgd97A3j1pPAR5diwUFiuMSxZIdT9R2HT2Y\ngf/Y17R15urc0KGKEAkzOWxF1dY2myhd9uRNf54lMdrrxILfOsTJBzrYwh8+\nbl56ILINpL6yzkMnwRMyGpX2CTAPiy3sdMKWEHMkbyJHdRJAIaiO5IQ1/yt7\nDoBv\r\n=QLr+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e6e23019d.0","@material/rtl":"8.0.0-canary.e6e23019d.0","@material/base":"8.0.0-canary.e6e23019d.0","@material/list":"8.0.0-canary.e6e23019d.0","@material/shape":"8.0.0-canary.e6e23019d.0","@material/theme":"8.0.0-canary.e6e23019d.0","@material/ripple":"8.0.0-canary.e6e23019d.0","@material/animation":"8.0.0-canary.e6e23019d.0","@material/elevation":"8.0.0-canary.e6e23019d.0","@material/typography":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.e6e23019d.0_1594757505483_0.664914923262371","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/drawer","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.d548d7a92.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86eab890148eb7cc48d4cdb304dcedad45d67778","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.d548d7a92.0.tgz","fileCount":48,"integrity":"sha512-1l/eSBna0zRG+B6+5ylrW/zGghOHrWNFghdakm0pMEQ6aQZS5wY/vAXCX5Ufai27XK4UFNpIH9PWGM8uJk+2TQ==","signatures":[{"sig":"MEQCICu1T3j5kAis9NBwjhGn72XEerSTSrQHuwFgm8kcp5vkAiAHGTBmZQkjpUiEogpj2iUxVK02SRadzdLbIltPwi18Nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiAiCRA9TVsSAnZWagAAU1MQAIelemNwqPnSFeP058Ph\n3GzUACsJ81LJvDQ06KZyH9GFp/igyf9Kis6xTcwBuXSQuoxYKf++br7ZrAp7\n05v5UJZ4KMDN4FeGLgAYzD5ue6S53RMDpko6I6RsfI65kPxyJHJ/1MbfkEYG\n2lCuXVuYdoU20UxErjwJacHS74ZZnKfP7L3L6C3kCWPgnafmbAxRH6jC3WI2\nXXmRTrP6I2kFaP1Fyhyp5gu6+zmyt60tgI8/8iENwK9mgGTc2e/sBEgvjfRG\ndoOkIuoyJCUMCKGM9ea20oHQ1Z9V2ecWc875ulCjtzbJANWLk2J2H9QHL2OY\nVJCnGAISNOU2hSm6gB1NIUw7Uhzq//iAwZW81WWmhIO3ag6rqN+0XvrHLLU2\nFXGmmBgk/kwAkEg5xZ/qYTVauJ1mvXf0omfnxPlzYhOyVGZGrZEsyT7jtlqA\nPx3PhPTvoiEEZFePApLIgUdCAJioJ5UJt6Ek97G/3lEbIeCWVyivB7QoJL/h\nZEN5bd3YmRPHOLoGufB94NTeUjrNAFXNlepb1YmVnAef/Mfdy9frK++bxgeP\nx7VNg5IcQQqm09Cb5+oS4Z2DrAX+wkaEGtF1IueKr2Rb+WFk7G+QT5dFNJwE\nrhbjrB1B3DN4KYcUdxfu7Cqwl2Q+8+JKKad3+WR/iz9Qccw+bjkTqnzCo2wb\nQD55\r\n=zcGO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d548d7a92.0","@material/rtl":"8.0.0-canary.d548d7a92.0","@material/base":"8.0.0-canary.d548d7a92.0","@material/list":"8.0.0-canary.d548d7a92.0","@material/shape":"8.0.0-canary.d548d7a92.0","@material/theme":"8.0.0-canary.d548d7a92.0","@material/ripple":"8.0.0-canary.d548d7a92.0","@material/animation":"8.0.0-canary.d548d7a92.0","@material/elevation":"8.0.0-canary.d548d7a92.0","@material/typography":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.d548d7a92.0_1594761250294_0.5066636139126637","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/drawer","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.58ce529cc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45a8f3aa9a44cd5cd000dee91e765c34be5deff3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.58ce529cc.0.tgz","fileCount":48,"integrity":"sha512-28hNVNMkT8n/UWWKjhw8TBKQUWkmoUpvAR8TvRAT2wgF4vwft2tD70XJpPaZLDyCWXj8G9fEkeUI7feqzI4ZBw==","signatures":[{"sig":"MEUCIQCnuaLWdsVV1pxebwCOqyEx730q/ZXfuGea0K/Buo/+MQIgES9ARc/yHFrRvVpBXgcZAMfMl4Vs2SJg2gMMR8dAh34=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiCYCRA9TVsSAnZWagAA4ZoQAKTand94CrY6CQlJksE4\n4gxiFCranVjPb2o7EYHTxarvDdFFXEGGuufYcvqte9bxW28UuQkK5/hnSRTR\nBSxtkXVwqfNch6v3xGamEmMqbnclVWb0MEx2hpk/DlI0YNmQZQJQSm7RM+Us\nHfq5VEH0mgjQp33FaXDPECSVbV0FbCd4RWsvSaz4BoKk7HG43YnWGUtJRh8Y\n1c2oxo5mL5K+YJQIowBg15Yq9T0lDiusDThExLtsSBiG8k0q/Y97XWTMyU46\nKVtRuEDS2KjjvE/zYmKTn1NC6sd/i/OgZPyTrkGdiETlAkgz+JSTf1iPyzWC\nFodXERwUrkL7a37ZG/XRr5ocVASpBln6CXu9hCtSv29mVYuxkr+/Lujn+3vx\nsji7RIHppPI2zFPVHmA2PPEz1i46oy6wn2WJzE81vsFO3LG1BZtlkErt/Ma8\n3ruCjQS2ML304oKrW2xI6N10Dv3+aiYl+Jflj1HQuXyvZJTwpOswkcIXVUSX\nk1PAgjWhtMo7kf8tL2Y703XXS4Cap5WWbr2wH8pyqZG8RSYVYq7osfT6P+Fx\nucO/KUB4oWlAd4uD//XbG+GVLfTXrCyHQo7TZV+wL/2Al+VpYAT+YK3VXdWw\nnkw7buL5jjXE+T3Wqwg4FiHR/xGL9JK14vCaOE6aMipDchPzak6S2Seph9vG\nnJoj\r\n=ymBW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.58ce529cc.0","@material/rtl":"8.0.0-canary.58ce529cc.0","@material/base":"8.0.0-canary.58ce529cc.0","@material/list":"8.0.0-canary.58ce529cc.0","@material/shape":"8.0.0-canary.58ce529cc.0","@material/theme":"8.0.0-canary.58ce529cc.0","@material/ripple":"8.0.0-canary.58ce529cc.0","@material/animation":"8.0.0-canary.58ce529cc.0","@material/elevation":"8.0.0-canary.58ce529cc.0","@material/typography":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.58ce529cc.0_1594761368076_0.5636973963866752","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/drawer","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.a0f1202dc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9385e8c620d134d6fd7f98424321d5eea4a277c7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.a0f1202dc.0.tgz","fileCount":48,"integrity":"sha512-Ki0fp/iVJL6c5hPz9H2X7Ro5uFhnzhNU53H6AS3m0wmrTwmrH3X3iEu+S1YlLQudhHSXuiXeYXcC6FgsLIaq3g==","signatures":[{"sig":"MEQCIDzUJE5MPDyZs+YQeqC/uX6xFE6wHHqAUJhJ1APmVv3oAiBNKfKH2gJcalYBMcLr0mwvWdebal5oHOBubBe+GaF0CQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiUtCRA9TVsSAnZWagAAcKQP/28UUkphmnnRCxFbtRFU\ns/88n0pZT+C68OfTnrXHxFUXWAtJ0izibmOFU40xxQcPJ5L3y6eGZjo13Ej1\nFHfmiWhp7LOOdw4XbKbLJpo/MASjqcSAtEyTZBHwnWi64NGY2vDK5r9tPPlf\nux++vjYr7yQdfROTiuwDpdlXZ/NBUgM6PwZHhR2NWnKo84zWR4q6LjBhqFDs\ns1RpaQwxsb/F6kCi9uEzRqTHR6bdxKEU8TFsFogOGLg+BJOxAOcbBL70+TNP\n0f5CUAniqhTEV+PCvyjCRnkKagE+thA4HHmAJmi3V17+TThcAaloaSoA9Y9Y\n+OfcHBMfmTGQOsazWXxXbsbQzI8XvLdtSSANeCnmBdgMm9m13MTJhAYn6KFa\n+TuUxPzYWOAyl70KDc7LaogOzvHRArjxzUdG3cUI8zYFHxd8QOOxtZUgi/KL\nev7HUTbhEs+iJXaPPPW142Pch/UwdE85DvtwbdJukASTrO6V4+62Kpn1PHad\nXr3AP3z7JQyKTZcRCQ4+DZJK9WC1bBbemSRkz+2EVNrKW4fM03pD+cW4hrs5\nqReZJCEkz9FVpHXMFObsdWM/Fa3y7BhxrUmCIGckbizYOSW62qcDrsNAFfQ6\n9dNi2G1n7goEL0o2AvD85ONKX5a7Tguwg/VYk+2EGP8Np7GbXCL7MihhPFbL\n0wjg\r\n=XpgB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a0f1202dc.0","@material/rtl":"8.0.0-canary.a0f1202dc.0","@material/base":"8.0.0-canary.a0f1202dc.0","@material/list":"8.0.0-canary.a0f1202dc.0","@material/shape":"8.0.0-canary.a0f1202dc.0","@material/theme":"8.0.0-canary.a0f1202dc.0","@material/ripple":"8.0.0-canary.a0f1202dc.0","@material/animation":"8.0.0-canary.a0f1202dc.0","@material/elevation":"8.0.0-canary.a0f1202dc.0","@material/typography":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.a0f1202dc.0_1594762540855_0.4832467109148737","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/drawer","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.ad4df58c1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ed964e559cef76e359b8a72bc12923cc6b92279","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.ad4df58c1.0.tgz","fileCount":48,"integrity":"sha512-UQjNEzlJz0W++xkTKGeBC3qe19YwjHtr61jWnnJqopiNoy21tfl62si6lU2+oI1cd4MjFAG9IuVe5NgPlvr8ow==","signatures":[{"sig":"MEUCIAPQv3ptniiEs/pSKjbFwacK5YCToCycAtrbP2DciTXhAiEAjVlGJt8HOkbKxAfVO55ZsZGBn0m3yOBbQZ8clMTfX7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDkl0CRA9TVsSAnZWagAAOZoQAIbypdh+80EcH6jbvwoH\nTYdQmAjiNOxB12f8X1IcgLIwz/KTl0cRdo5BfkjAlwVvZVVWomQn5b58W2YF\nwZe3ntTcE9CalJoMirIun9l8vWRLwCerUiInp/KXqbMWJVt+T1z5Zj8nTJw6\n39sDY2k0zYEt79B2GuYJLb9eod6OSxGZ08gF39A8Wguh1Ea7TtgBe8XDqJfH\ny2VcNcn11UAUc02H3aWweZSyRxMJt4MrMqSgpwiqxIfXMeNnzJhy+cS1qgZm\njYL2np+B6R6fiDE/EfNAhfQvMEpt0+4KhGJ+w71vyDwR1Mj2vugWQAcV5siX\nrVWm36x7Ln1+n3iX+3h5Qjzft/XN6Nz/kJVOnyGOHNx5QxnRcJIYM+pY+muY\norNu44XqxZ4UUC3SqDBoBEzPgdYBONOMZAWJAGZo/d2WjrUDqMdYBqQB/yRl\n7Ag1kbPkOn5L1iu4aAe57sILG6j6hpkeWisuO5JHhclv6rrsIl61GYcNU9NU\nGM9c//RXb+LbVyplpsDK1HcX0YtYUABwVJyQvA0ENdp65VdGb3NKQvJ2tsgP\n2ICA7h6+EFbRF5J8dR7EGz+jpRSrcmZoUF0AV4POJv/98J87+SlTXhrfAyEP\nnfzRMO6HC0gWd+BY+htbKTyODuH26tdzTeUjuFPK2JLjfnfyEFv7s/n+5EmH\n9A8R\r\n=dSJM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ad4df58c1.0","@material/rtl":"8.0.0-canary.ad4df58c1.0","@material/base":"8.0.0-canary.ad4df58c1.0","@material/list":"8.0.0-canary.ad4df58c1.0","@material/shape":"8.0.0-canary.ad4df58c1.0","@material/theme":"8.0.0-canary.ad4df58c1.0","@material/ripple":"8.0.0-canary.ad4df58c1.0","@material/animation":"8.0.0-canary.ad4df58c1.0","@material/elevation":"8.0.0-canary.ad4df58c1.0","@material/typography":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.ad4df58c1.0_1594771827944_0.43611515474700746","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/drawer","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.01db89053.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a59d07475934a01f14a20bd95c86dbfea487cafc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.01db89053.0.tgz","fileCount":48,"integrity":"sha512-wZFNpJf+0NNFUnyNcE4s7NOtzashKtD1w2PmBtb5gnDyR920rGuGV86xLDDFI3CoR2ieGCjKDvDgPCs/CtwCaA==","signatures":[{"sig":"MEQCICX3TeZXSnA+6rBi3aJiHA6NgcSyiQxYzgDUIIQhSfpdAiABTgPol8zYQhIhiQuyYttDWiyTjbQcf9HQeijNEgKrYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIMPCRA9TVsSAnZWagAAEWgP/jk/YI+As4xb66iP0U0G\n7EiIMrblnAcbCm6g4DBdisoWnqA6CP3tfeqtOZV5uEgfBiM5wRjAPc3JkCYb\nM3voN49jUmJDCeA5TvWpneyEXYAW1i928J0kku2cBz4Nryz1JujsV/CMGMXU\n0f2+UJLk6pkSPtBX5uea7pxrcrju9zjGuRK5sr005syfc6WAOE4Am0Webee1\nWdWX+tV79CAZEzZPfZWrN9/B1AbIeXN5yw5ooHvEq/JAS2scOtnnF/QgjJfI\nR2Wl3N1Sm2p01vfzAMFAOySm/SynNzvQyPEZjg1LddGXOy6J392tUl2I9mq7\nvlpXXrLhQuVumspWc0rUW6WVJg2eL6oI7xtdFKDgH+OT3C1WAKTAnSSmHUMi\nL6bBVJJV1KHhpCI3+D5CFBj9uQbX1EvFaw+hIoNGma4ih3EYvTlaT0RK4dMl\nhqdGmiwD7FoS4vTuY3NQbLjV7Fbk6ziKHOgbHNJFvsreeNH0E7J222dX9dH6\nB18rWtsac9NwO5mpYAsZqRpvhxcb7YsEoPmFeJ3DAla9jpTvWd737Bgq9l/4\nZqR6srtX7TAj5oXgalWVmdZyi1Ed8N/X1/F/tDgLgMeJRbn0yX/5XYe4Pav+\nDdIgRrF9JiSOCnErkWRJNpsYjugtUXVV1LeagmgX1XhGnv6jOx8mWLpnwLjl\ng1I9\r\n=VrMN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.01db89053.0","@material/rtl":"8.0.0-canary.01db89053.0","@material/base":"8.0.0-canary.01db89053.0","@material/list":"8.0.0-canary.01db89053.0","@material/shape":"8.0.0-canary.01db89053.0","@material/theme":"8.0.0-canary.01db89053.0","@material/ripple":"8.0.0-canary.01db89053.0","@material/animation":"8.0.0-canary.01db89053.0","@material/elevation":"8.0.0-canary.01db89053.0","@material/typography":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.01db89053.0_1594917646873_0.13563425219148528","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/drawer","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.fb5a4cdeb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6029e5ddce46a14c813980617c022968940ef407","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":48,"integrity":"sha512-OqvMqPdadELigV8EOTzq1HefQr9jxnw8VxhGiYnMb5k0U+bR+glBEMRX7FVZCNNZWbPU617pAF2j30c1kauQsQ==","signatures":[{"sig":"MEQCIBPxsQQExob1vHiRg2ifTHz3uxpdKla9Q16ThDROmt1gAiBaJxY4byhmSu5Qp3mhvJPy+FRc6evG0WTBX31/0CQn1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe6nCRA9TVsSAnZWagAAyuwP/05Q6POILBFPDf3FLrAk\nytlQ8QxapowL0IMO3SkeiypYxW4AiOAuD90frAlj4lunNqR1eR1+JyrG3Q1q\nAupAXz2cJoDIt37TQkAeDeBl37jQrG2iu1AXg6hxfmSF+bQ/+/kOmaYYLWbC\niRZ/vri3ZsTpIpDFjPG9o/3LKeu+mhEqmJAjBch371KBHmhoFGnby+8lrIJw\nw4wKkjuNpnk1Jz77k+cshePOOXWzx29fTj4k9o8YkKTTCFIyoVGC7JIPHfsE\nEW7tx9U4B+EWJwi9CWTRq7bsUKpGwRxNHFenaeRx2L+au9WvWIvW/GRl24xW\ni4kRPPiuGmampakPpLTaT1N7edrnn5ZGt3XBpG3p06Y7jfYW2jhQ1qM4YCXX\nn/HOnOxzkuq4DBvjof0Nn/rc9ra2pUHjdxO6+2ba7DRNbm+ZoIpattCq+TMH\nkJgpOtxm+yqiIt7E69C/UMLTIeNgl7bhzJ6t36S53OOYXvbsN4HuNbNkJekT\nthTSvIoRv97DWPVHsSuuhnSWOl3VJXHsKnF7nP99kWOMZIepd/c2KfW7ojEc\nrytrpdwpkxvSNSP0dq3HQohpaP3D7xRZ0D51T8QFR4nJ1v+kyNy2WN/fj0IG\nE0tJENguEgWS67BbjYf/lcjWhm1zvcUSX2/3sTMXaTQxbDgGL3DvZI00pQc7\nz2kP\r\n=iqZJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fb5a4cdeb.0","@material/rtl":"8.0.0-canary.fb5a4cdeb.0","@material/base":"8.0.0-canary.fb5a4cdeb.0","@material/list":"8.0.0-canary.fb5a4cdeb.0","@material/shape":"8.0.0-canary.fb5a4cdeb.0","@material/theme":"8.0.0-canary.fb5a4cdeb.0","@material/ripple":"8.0.0-canary.fb5a4cdeb.0","@material/animation":"8.0.0-canary.fb5a4cdeb.0","@material/elevation":"8.0.0-canary.fb5a4cdeb.0","@material/typography":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.fb5a4cdeb.0_1595272871160_0.31226799949495065","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/drawer","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.8df0f517c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4cbf59e0f5acd08b66cede3248dffbefede8bf9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.8df0f517c.0.tgz","fileCount":48,"integrity":"sha512-IxM2HM3ujPTrQVir61wkbFqBjSLZVkmB5TS4XYiyElEfST8KJ84cfXNlyAEm6epyHoaII7qYyYKMm7WG7ljUEA==","signatures":[{"sig":"MEUCIQDvO4b4KCepEB1VcfcL9ZSAj7ZQ+Uy4AH3VsU8daFT5JAIgAYHNVA+55QANoWc0P0mR2FuSm4IPSphbzSpehlTfR8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi89CRA9TVsSAnZWagAAjIsP/id7ooSpCr+gdWjb1tJW\nCjkVVo0zKCRmGmA2PvFrjnZRC42g9aDAaScMLnytgpIfDswtHm+gHODuRzVs\nnVhpfBktI3Vs2Ns3v/R8yMrNSPaKkOT+EJ54gwXAICofe87UnvuBjYfKsztv\nmk//vol48iSFx/VyEWKPiuDbHLukYzkOCniN7LdyT59QJ6gsRE0g+axgabft\n4kwzD96O9QyGEUpPaunpVvMXbamnByJCe5NIDsEpuqJ4almyncpjQkA5fyuX\n5vZn0bl9yz/jxLWqYwiS2ODhknu1+zRYRdG5b5laitBGdQKM5NyaBDLFd6M9\nR36N+Pfnp2MRnZ4dlE5xdSfiZUooLDyUaXqeSG0g4CqQkmoFERWjOLDvwkWZ\nXD7MXHGxGrcHjoomLB+4SxLFvqHQzBTHmdyr4Emz+NigT/Vs2T5Fr1uVpSIz\n8OUtoUe4NilZ+5hke/6u3/g+yUWrWRi1NUZ8QtlhWIF07jCyENBWlDDyB/a/\ne31foYX6eMRK/pQ6ycURluV8Iodoa4yD2N7bWtLvqCxDylaQR5rZLZ5R/2fl\nOrGYWS5Pa01d8w7JB56M2uAPdM1HsbBrCP+aAWM661EC5HKpjVulrmZrmrya\nuII5yGjws0HOhoPP08dZpST+6KaZxYv8InVj82bbwjja6WN/pr4fy2E2IVAW\nD+KS\r\n=0xZ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8df0f517c.0","@material/rtl":"8.0.0-canary.8df0f517c.0","@material/base":"8.0.0-canary.8df0f517c.0","@material/list":"8.0.0-canary.8df0f517c.0","@material/shape":"8.0.0-canary.8df0f517c.0","@material/theme":"8.0.0-canary.8df0f517c.0","@material/ripple":"8.0.0-canary.8df0f517c.0","@material/animation":"8.0.0-canary.8df0f517c.0","@material/elevation":"8.0.0-canary.8df0f517c.0","@material/typography":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.8df0f517c.0_1595289404884_0.1378931227453022","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/drawer","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.abcdbcfeb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"776d29cc67db80528e8049df413cf1b201e079ef","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":48,"integrity":"sha512-uc4pxhTCxPCDXmWrpkRg2R83Mk+O9uJ/zZRl4LPdkurBZVWQ2tHoVa6wLLxeJSqCV0aMfbB9QEM8WeQAc4cTkA==","signatures":[{"sig":"MEYCIQCc3VVsAghNnTlCYfFH3vxMJ3w0Yxr4gIngosdl9SBTVwIhAKTM3dvbyNi+6C3aGyp4KhpBGbvnx0Gznl6Bs32hSqU4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjwFCRA9TVsSAnZWagAA3SgQAJipECMUYCH6odn4XcJu\nttGhb7v3/swFrp5/HWQE0riE/lnNdAerruHEsHKSC6sr9l4oJLlnxiKDX/+V\n48go5yAphgRzxGBmsqqmKAZzsbLxG0OyA5dzon0amIWXpQ4VNcETgjFESsMk\nOD+Wcm+mlD+A0RkiZWTyaccoAoKspZwQ3j+9aj+JxSpNA6XUpQ3WkHA6GnxN\nWbtCQKoFYBmjedbY8rTgeD6QkQFD8uMLZEgXlgl71KQG8MTZLHeCxz5Ok/u9\nPbCLfL3L1Gv6m1hD7oo/f6QmZCt/fSNRP0f0P9rizpgQSK4M3Ya4Y6a/ZKSg\nsGjLBQlUQzCvVnIKngDr8V7zBxkB930uqE6n5Sduw7kLxYSetg4M/AopCMBa\nxkc2zS+zPrBxQWfr1A7nhvb5qo51Mgaxs4NlfSAVt/iASh8RlTX2FVVC19N+\nPuDEiulrSV/cljUjbyGP7LWpK8rCgcI3mac39kqlWSi/grN/DsIS0Fb2KAFC\nfrGyvxYqZPhc5Qve0IArsGwjL9QYwc5CMYk+tZXEkO2XgZYqe/15Lc9XBp7m\nBf5Ntazg3bcqp08kKmWMyIpj0eHQEe2bjiKUNS5JWrE1HMLVlptXta/VVlnZ\nDfLO46wjPsZLgApgGdz/nCigjnkSepd23eTZT6pkOVn3PwF4QiA5QvsMpbdv\nkM0r\r\n=yUSt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.abcdbcfeb.0","@material/rtl":"8.0.0-canary.abcdbcfeb.0","@material/base":"8.0.0-canary.abcdbcfeb.0","@material/list":"8.0.0-canary.abcdbcfeb.0","@material/shape":"8.0.0-canary.abcdbcfeb.0","@material/theme":"8.0.0-canary.abcdbcfeb.0","@material/ripple":"8.0.0-canary.abcdbcfeb.0","@material/animation":"8.0.0-canary.abcdbcfeb.0","@material/elevation":"8.0.0-canary.abcdbcfeb.0","@material/typography":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.abcdbcfeb.0_1595292677102_0.5773897214923267","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/drawer","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.7bd5075de.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15c3825120a524c00bfb38eb13ea63d6c936817a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.7bd5075de.0.tgz","fileCount":48,"integrity":"sha512-EISrEOMBpk0hWyLokftQBY8+OHicvmdgN3HSQD+1vhGT0ANYPRZtNVLmdVqtX2u6ZRxR0FhI/1G3qM+yhSc1vg==","signatures":[{"sig":"MEQCIFIuvJuJyDO8CmOO+TtNgX8fKOdeYJ28FjaqXOSXNVtCAiBbvafHPYk9+t1j0Cja9yHppppXzHvzW7KT/z5EIIIjdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzh0CRA9TVsSAnZWagAAXxUP/jcBtYqLpdD652F8OFvn\nqOQ+MWY1CHKfZXUUiPXPADLMmCALLpCmZ4OuPr4OAaV/rLBEpf8g7MfWQn4P\npDO3TcF1SClaRx9kO6cL5dEXfgN4F99rGuoDtx0fUz6+/MPuIWRLl1FOM3iH\nYiMt+AOUxpuIoEDMCHpi/1oVhTLaT/CB9kosX/CXA7f6OBa760qvZmUaudCe\nq1f3h6IwM1JzVKqrfuctzfpHjgc42QLsqgw3OieTO/9MVwwR7/JuADAJoW2p\n1UsAsIdcYPjdIwVXSFE4JjoBuYJF/x/8UHiwXbbekwqQiOmQaeAZnLcm4x+l\ne0xWeCO0754M/6It8EugoiyIcSUi0/5B7keripuSVpDbGRFVJQ0Ezj3EOmzE\nB9AgT3J13bAUTvNuVzCOqjmXwZrHxHcFlnu4W2ERrKKWNWZb7FmTW6exxyCp\njL9T15o0IViJFtw+GWr7NVDIOP8ommaQJaP4HJibeFr1KRtiTAemtyOoucAz\nfh+ZBHkwOgq/6pjFrKg1Tdo+ARNOc6IExRlIDCCiVdG6Kn40rJ/R8UNGB50R\nusT3rqa24AdV03ZqABc7PzZr0jXMNd3TN3yJ8cgRuBv170ET3L0dRflV7shb\n5JcUN1Dv+dbtjaLk984tdC5wSOgjqxHZozpIXmqnDDwzQsteAod25tlhruMA\nvkC2\r\n=WYLY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7bd5075de.0","@material/rtl":"8.0.0-canary.7bd5075de.0","@material/base":"8.0.0-canary.7bd5075de.0","@material/list":"8.0.0-canary.7bd5075de.0","@material/shape":"8.0.0-canary.7bd5075de.0","@material/theme":"8.0.0-canary.7bd5075de.0","@material/ripple":"8.0.0-canary.7bd5075de.0","@material/animation":"8.0.0-canary.7bd5075de.0","@material/elevation":"8.0.0-canary.7bd5075de.0","@material/typography":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.7bd5075de.0_1595357300234_0.38430410843489926","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/drawer","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.405a29a20.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84e0b43ddd12b70dc5a1150f08d85284185725ef","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.405a29a20.0.tgz","fileCount":48,"integrity":"sha512-funhAYyMljVd8Zu8w+b0vwHRGwaICWLgQ6rkXCCQoTTJB0tQaCQ9cC3NoROsloDV0r44B5kcEz+c3s+2eSF8SQ==","signatures":[{"sig":"MEYCIQDGMfONmfpcZi5oELl2sIsSYl0+LuoupUCBksbyzVAP+QIhAOqAsBcZf+NMh6e5uzJOxTdNKmowz7btj27TCgDTolSb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLyfCRA9TVsSAnZWagAA9EMP/jk8fIVkkOGTfE4HxUsQ\n0zUBWrCXgr69z6GpTx3S2gMOL1zHDWzps7VNEmwwXF3k9rTNxC4r+IvBdjP7\nvMw41HY9MPV3z1orvNihL+ycnXK+uFAXQbWUGS0TbLNFqy0nhJaF1GgH9Xd/\nqBPrxCtuT8KTh8jWg43NPZ7SX3CAySJlecuyCIwp5yV7DYiTTDuT5GyAx5UI\nXnj1J4gP61wuJbG4J8+e0fuxjFNchjaH7pAVjMx4C+sguOPR4neaHUHCtnMW\n7p0CvMT/EGKnGSNmvCEhOlhchjTabNjH+E1KCxcNwo/qPtm4VjhO66gl4SBO\nywYk15AGfU85AdJKHzeMgUJAldRlhE4veAxxZLf9y58AmcX4ruji+Xj9v8V4\nXhcj/UgLPhIruuObSMR7Db+qlrxjBCbM5AJltLA6MzlnwGuOqlwRSG551ScQ\n47FME+THA4sTSxeoMmv6AzNnJCt2Pn+/g9OChU5vmc0IhUxOPrkiUmknIZcR\nztqYeQ2ghbW92MbpTuppVe5soiiUUqc4exczU7AQMoCOEXTzaLV3ntwEKP72\nAv0yMeBQEB9i1c2JoRigqwIfT/9Y+2gAkG0hb8N2zD2wnfgjEEawr+sHRqBJ\nklyi+ed7IqKvX7uly8zw9dwKpJOJHOsvWDxIdglwXdknJ55GjDY7cHxHlgim\nffGT\r\n=MG6s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.405a29a20.0","@material/rtl":"8.0.0-canary.405a29a20.0","@material/base":"8.0.0-canary.405a29a20.0","@material/list":"8.0.0-canary.405a29a20.0","@material/shape":"8.0.0-canary.405a29a20.0","@material/theme":"8.0.0-canary.405a29a20.0","@material/ripple":"8.0.0-canary.405a29a20.0","@material/animation":"8.0.0-canary.405a29a20.0","@material/elevation":"8.0.0-canary.405a29a20.0","@material/typography":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.405a29a20.0_1595456670805_0.3947364269397","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/drawer","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.f3693ac4c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3e08dbc6be0c1049c8c87729e9676a14627229e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.f3693ac4c.0.tgz","fileCount":48,"integrity":"sha512-d1tOGUQklEKC0wlcPVxC9h7pyUMV5yr+Ark6eKPyWe1KRMvrfknO3uH5tI8Vkj5ITEv9l3XNlZtwG3ZSy4WMAg==","signatures":[{"sig":"MEUCIQDlpktonzndgD9n2PO3kdo3xLgHSi34pH3gryMW8FyyewIgesO0xiNnoeIIu5G1beutZ254PkmqVIhRjGzudiavBjM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL8RCRA9TVsSAnZWagAAmB0P/3+FPv7zUWuSMrh/rPBk\nnKhDQvY5sKIOr6eeujzYVvYKpoIHdjb3fDjriWPCZ/RFiqrpFBxe72CAbH5R\nwAUiOguN1+9aAhpiv8wIjHy8apuhe+zodp8rJLT0GMkcyt4yfw8sWuWQJnK/\nJzfwRpYNHTLgauQIMaaWVetWLJGgH5a3truFsy3JgVBrYJhp1JiOj8IPbkJL\nPAH+BZ+Ls5C8z4msiWsu0Z0kG00FGzRRJAtOxVbqUXeR+MyBDjfLTNVICa5r\njPYv/AJvKHmb2x0MkHPXp27HMEvDXaDKFXZg82F6rnKRuEfB8iE/8yNbba29\nnTB6RbsITDUhmAd9jb/ovqdpB25uB5ecjkusfh1+bD1KwADqA7zAWGQGX/v9\nnIoAFHUuLi5mNvX6awAi2VaQuNVnEHGO+dC+AStTmm4c4aaZ2yITL2rjrYwt\nIKNbpL4nV4qHXDH5TZ8Zwo6shqO12aSZUj8s0PrbJUXyXFcXhtqQ27PcISI0\nSwExpPq/XQ/GR9IdpixjwShErOsn76qQAGLsASr+aCF3LddKlBBK+w3utK+w\n1lIF2pILuQIJiCDDrQxevph0ZKhe5zb9s+GLGYCKXh73DLAO4XGkSSEcS0+h\ntCPowKysMnd1HO445d5qOrxNmJtGfSnFn0P4W9pyc93DCAdAT2ozIp2SYyOK\nbglK\r\n=ORoQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f3693ac4c.0","@material/rtl":"8.0.0-canary.f3693ac4c.0","@material/base":"8.0.0-canary.f3693ac4c.0","@material/list":"8.0.0-canary.f3693ac4c.0","@material/shape":"8.0.0-canary.f3693ac4c.0","@material/theme":"8.0.0-canary.f3693ac4c.0","@material/ripple":"8.0.0-canary.f3693ac4c.0","@material/animation":"8.0.0-canary.f3693ac4c.0","@material/elevation":"8.0.0-canary.f3693ac4c.0","@material/typography":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.f3693ac4c.0_1595457297025_0.4818662917371832","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/drawer","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.12a109680.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1addd3b9d459ac6c0f731bec69a186e5629f0de","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.12a109680.0.tgz","fileCount":48,"integrity":"sha512-dIS9YTUZCPILf0EzDDzmsLGm0PjS/8uxJIpgGsyiXfnNY8JabXP0xAaLUzjjYACOmn40G8TcgkAwTjiJaqm3Gg==","signatures":[{"sig":"MEUCIQDXdqJI9pxzRQm5K7VQ2oYM2B49COi/d8lY8qLqgMyKpAIgGqVZ7qKQ9Bqwxf9ij6znsrDFy1eR6cGn0CNN/amsjDU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMYKCRA9TVsSAnZWagAAAooP/3JgPOVcSk7Oj95w1Jnx\nRIAknHtJdOkvieJ0OVXdrUmTyoNNCCEqELSYC8JJsEH/XaNHokWIRLZe8VJQ\n51cpdSV0FpFy23/z4yOhq/LiYs6W5nwJ/eUEglZiLMzRbgX5+ZbObU+Pu8ky\n/aMpJcDE+aQ6z7fbNR8/gKq2zWs/tpD44JuaHlvnrxQUJe7H6SWdeGnCgxdL\nvestSL3bzlOiFTLj3dZTlX9XeklARPbm/v9K+wtOFaTA+U34dMe0mRVr0FH7\nnUEI5BAlmebiPJR+PVYbKS3NHitC2mMH8agmz6Evj+9uFPXkpOCenQvunMKR\n0qN1buRpil6vk/VCnoCOaYLkCH9joQ0RJ69rYzDAC0j7H6Oyve9cqlFiLgr+\nwIrUvDM37YXZ+m04MRDegXtLOYVEbNbwUuBIjQx6x0If7xtqsdlUzbzy8MSw\nNbQ/cyR+fzPJ+28bbXasXRbm6lq0NUeywkabc9bGPvLSWTsbrQDjk7J3Y7Yc\nK7S+8uYyQQ2w/5w7Hg/4bdWKHe2qjfOHqrQG8NULFA7r9SxjtYFL9tAx2M8F\nuHoLW+Ktg/8CjKnOeJQI8nK7/PjTNgoimQD/e+2dQmYIUeSQ2VZLWyEckdg1\nammc4Sb+bC7FE50lBp0cdeTKkwZBw0t+sYVLUOlKQaH7GBbzPmIakw8z+5Oo\ngDDS\r\n=wG12\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.12a109680.0","@material/rtl":"8.0.0-canary.12a109680.0","@material/base":"8.0.0-canary.12a109680.0","@material/list":"8.0.0-canary.12a109680.0","@material/shape":"8.0.0-canary.12a109680.0","@material/theme":"8.0.0-canary.12a109680.0","@material/ripple":"8.0.0-canary.12a109680.0","@material/animation":"8.0.0-canary.12a109680.0","@material/elevation":"8.0.0-canary.12a109680.0","@material/typography":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.12a109680.0_1595459082416_0.12526393126883084","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/drawer","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.bbd06696e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f6c9bcdfb97d1373ca10c882d726501d28a5c67","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.bbd06696e.0.tgz","fileCount":48,"integrity":"sha512-1szbjolwWV+HXWjBBxPQtEq74509sB5+3+cOwQSpKCVaIjSuDxRcRHCOVJISbUYT6HHJKT8vOO1d9ep0byBh2w==","signatures":[{"sig":"MEQCIGFdXf6+D7/7V0wmf6GrMpbfjrL+FQt1qRxFnR7H4UdHAiARY9YuOkHhRTqv1C2bl2r/j3flaPVvNi6PD5zP6vZeqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNGdCRA9TVsSAnZWagAAY2sP/jfNISvuKqxrw7uY0VI1\nx29c46M1HQvADwIeYrtvZtYQpWrXZ0tQQS+AFYSPgqpZ1/xyiEnm+HINMqoN\nmCFr4+ywJpMCKJX0c8g/52wvgPVDMawjII5JD/bZ60YzKLtbqZ+XewUA0VJu\n07+YkJfQL92wp6ROK4wG0fm7QFQbbD6Ih+tnzubd4j7cGsaiPq+BaaA8nile\n7tE7fsZS2vI0aCb49XiF81F/Z7cv8lzbntJcw/Al9ZDE7e+2L3Whwrcm+ocl\nV8p0EwlKWd/Nj3ImVzUFCrT26+oli5ocJpNLwQfNf8C1xDI+Ji+2qtTk9rcI\nALph3GPCNK8g7Oscq3AllAvVNjZDtHcvfw0h41MLX0Fhtg4OBPCQ1eor+r+x\naettmX/1XkNM3q/fzTCJEmutwvhhrn4K0RVTq5Imx3UrJ0SoyrTkqPO6syy/\nn/0nHvGf+J3yBhDIJjkN0gWRCxt5gzNwc87Q4+NZU4oP02RdOHE1LQt+9gcI\nGeQQqjYTgIHdA8IfqBkBwxiDhm4Gp0pvgmy3famFGC4STHdd/+zC1NIfEjMv\nm7mqPTdTlMm1WhGQjX8LfOR5Z0WvCQVC+uX7FgTVAj8v/DOwvXrthLHJebf4\nnSWT25yDPURUTZyPkXau/soYZiORwzQqNRTzezbGx4xORTZnRJi69HuaPV91\nlnTb\r\n=LdXB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bbd06696e.0","@material/rtl":"8.0.0-canary.bbd06696e.0","@material/base":"8.0.0-canary.bbd06696e.0","@material/list":"8.0.0-canary.bbd06696e.0","@material/shape":"8.0.0-canary.bbd06696e.0","@material/theme":"8.0.0-canary.bbd06696e.0","@material/ripple":"8.0.0-canary.bbd06696e.0","@material/animation":"8.0.0-canary.bbd06696e.0","@material/elevation":"8.0.0-canary.bbd06696e.0","@material/typography":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.bbd06696e.0_1595462045071_0.502265330581749","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/drawer","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.4951e7651.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"972ad0d925de629535de42acc1e2ffb4d78dec09","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.4951e7651.0.tgz","fileCount":48,"integrity":"sha512-CuatFNYCXwkoh1DFNzkaKm5+a3O/C/Zv7xebCBiZIJGJDMBmPdaUS+3ZFcjDA/uUKDX2JI32cUAFwsRiRO/6rw==","signatures":[{"sig":"MEUCIAFOZci1gPQaOhFGiGvqsGOPIifL1QnDskrsMb439v9VAiEAxrqfBkyIAcmI/mre+JLi/S/7lUFc7j+nXNk7c5BRTOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGO0ACRA9TVsSAnZWagAAdR8P/iHegbS7WFRht65q0AXY\nQI9HA50KsOO5r1jHuqDQGw95J8WKd/owWGv5r5CnRDVp3Y815ZQRCHEhXBAF\nJ18vMdpLr0FtFKBdnUqxRCK4ZCrRewIYVqD3ieA83ITg0Hcyvmuq5Yh1j/rm\nW1Fg1+yvDFbPKBNPLQqrNYA1w9HELWaMcjaj3nICJVElGp6RKUaxyCz0adEX\n9oo0QG69fq0fROO8jRWlq0VVAIO1w8x3fclcCGoB+4K8BqSvurmP27j4VIfm\nQO4/j7d705/R84DX7JLBxw2XZi48ZxBmjAkBcusX7qsAghZ2oXeDB5pimMVg\njDZS5BLJC0S4NBwNNEQ2gzMhFH7NqNjGpcCJ726qEQefRv9PLG3JID0iwJzY\nhmN+pZ9+5WK2ki2XcXpLw73eRjQnmBgc6c4oDTU082ma2lTGDgumfAAOWeVc\nCUFSwbTNs/crlTpC0vdU3sBvTgq3KTSGsbrMmt6JKarCBGvzzyoe3Uv07yQt\n1bBWCfmDgGdP+xhW+wu5tTq20oBAgUTV9AA0ZiwVLJZzlooXxcQo1/+PlUzW\nm0LFNFw0eJMyTxA1MfXKxFSmmv2GtM84/BlxXt5qOWynzJVmvnc+FaAUQogg\nWpWBo0BXL0YUs/kd0fAcslH/jp0lW4MwSYrln0jAt2W5uTPKCqf08iT3jPPc\n/jFb\r\n=ZF/Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4951e7651.0","@material/rtl":"8.0.0-canary.4951e7651.0","@material/base":"8.0.0-canary.4951e7651.0","@material/list":"8.0.0-canary.4951e7651.0","@material/shape":"8.0.0-canary.4951e7651.0","@material/theme":"8.0.0-canary.4951e7651.0","@material/ripple":"8.0.0-canary.4951e7651.0","@material/animation":"8.0.0-canary.4951e7651.0","@material/elevation":"8.0.0-canary.4951e7651.0","@material/typography":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.4951e7651.0_1595469055502_0.26939258272127","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/drawer","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.75deebbef.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cacd0ba76747a0656d8578f272fcdc2b53532d9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.75deebbef.0.tgz","fileCount":48,"integrity":"sha512-b1z3TpU8Z1sEI7l7i2A/k7+hx1OmHiOAw1C+PrUVab7xpgVKoYoI8qGipbW2KNhvCtdGvc2YDx/+n2rwrlRw1g==","signatures":[{"sig":"MEQCICTpNALNhCsrXKE5vW4krCgHlwiphyMZdsbDPVI3a5XkAiBBYAXL3Nj5dS2/bmzi1Zh/KnFo10YNcfFNbK+xzAtCbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGc1nCRA9TVsSAnZWagAA2QcP/jDWHE953Y6xfqpcuwcR\n8TNk0NUgz9G7OM0zMLsI/u/IPQnKbC6Au8HKm363TMrrZl52WpNrV8eJANJw\nQ6e9LtzMidNtzOA2L7U9oFB8rKDEgdCciVRpKeUJLlyyOSpVXZRSANAk4Cwz\n7ZY52q1/5D0fhtrKpl5wYfNUw4hA7gIEKTTg8tn/+YGsPz9FzqxF2pXn9CBu\nK5VaTugXp1DYIt1HuYqfMX/in2rF/+9Sb5RohSbi2HK3nw5Bq/O+upVmpwB4\nD6qlMI8Bh04OedmB++aWpMARRsDZEc9UfBtIpA/E3B5itY0Aa4BO7YmM9nxM\nJ8x+OT5sBWUFuS2kWETllYPmG+4nmBnMWoZELP6jByTHMOjX1ZZVRG/3dWLt\nfy9vfNy8Jc2B6aPJFB9wXQvThTYwqF5tMTp+DyQ+SUDryDBFR5iNgaXdkkMy\nPKZL11mN0qf3I/TRo+6s++NjprqkduO4+FkuM4qpmyRGxxa6bAXvEdr+BPWq\nR+DAJBFS5C5x+kvXu29YvIvfXgkgsxzmYBitykp96FnNk97NCTedYhjCjLXw\ncRfQOU2cWyN5qfTbZ849jmuGE0UkVSjrUXzmKbY+On5ZUSAVewGx+kthexR4\nnDdC79oyM9vSfMXe+M6znNLQHwl2nyL3MS9vRH/YoB0gbkK94Xk1Ii0AgbJg\nrkOi\r\n=hpTC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.75deebbef.0","@material/rtl":"8.0.0-canary.75deebbef.0","@material/base":"8.0.0-canary.75deebbef.0","@material/list":"8.0.0-canary.75deebbef.0","@material/shape":"8.0.0-canary.75deebbef.0","@material/theme":"8.0.0-canary.75deebbef.0","@material/ripple":"8.0.0-canary.75deebbef.0","@material/animation":"8.0.0-canary.75deebbef.0","@material/elevation":"8.0.0-canary.75deebbef.0","@material/typography":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.75deebbef.0_1595526503103_0.6231867780090177","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/drawer","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.95aff33ee.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4abc056440e4296dfb13d2306c44a4a01e27b23","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.95aff33ee.0.tgz","fileCount":48,"integrity":"sha512-Ex3ZEjSeJ/+BsOxfynpLL00+TPEIgX0SnpA+gx52v2mhgsbbRVuudJ4z7KoGFL/zG0qgTV2+aE+lnGsMqUHqQg==","signatures":[{"sig":"MEUCIEmJ29P8UHrZ36QgYpKt4RBcCZx6XOpAu3DJGzVd+snhAiEAnxFKfQ05SY0HNIHiKgSHshf22rtRmqLaSHKGL1VeSRY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGduECRA9TVsSAnZWagAAKQMP/12cTXJKkCZToYEfY1hv\nSJLXGhApXPrxeJsDQhNLghsp0vlpEf0roA4zY2Vuk13cnJrPO7mBeCj6pSQH\n0es4mWN8NJE1a1jJvSUhFEoVz1fD67azwmMtx8BKfVhf4FW6yVE9/1LWrX7e\n1Xn71I3j3/OINHNS2kN/QFqV1PfzE6jXoQ0fbRAUG14BB9NDYLRmf4Ds97M3\nf25JM88l7u1KUY9g+Q/QKD1J6FhiNi4LXcnkwXkoegisA2S49EDDlLOHEz1F\nlzTe1V9niGz89ZC6ywu4SgDVvnsQGtnnP22/LDLuce0E+MTiJ6rdpfqCtgpl\nbzesI/Nn9rv3ywkJqiobTPr0+xmG341CXU0KdwAzkZARoVtzC1E70QVjsrGh\no9+yGS+ZYMPfuWNkikVi5T99ajv42CsTEnuZq/htXd3/8pQwEUc8XwOCEXSO\n5KnosCX7+hkkjmR4fJ5zfrXBk39hSgz9FAig+VLg55AjZHkKzSwAKiEw3DrE\nQkcO92Zv3LKCQx4UgH4gLMACrby6Klt5CZl02YNsfDinf8ikgbzUiq/FHkLN\n9NMNTVIoAFbx733vsCaIsORs3WKtLHG/wvUdfmmx/pWHZ8kiNY8PIvqi6+Y0\neP0TtZ663QQsIQrZ5qxsIvHzxgHu9fVnfI2ChAGQUC5XOxu3/R3qNrCUQj4a\ndAEE\r\n=6/bd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.95aff33ee.0","@material/rtl":"8.0.0-canary.95aff33ee.0","@material/base":"8.0.0-canary.95aff33ee.0","@material/list":"8.0.0-canary.95aff33ee.0","@material/shape":"8.0.0-canary.95aff33ee.0","@material/theme":"8.0.0-canary.95aff33ee.0","@material/ripple":"8.0.0-canary.95aff33ee.0","@material/animation":"8.0.0-canary.95aff33ee.0","@material/elevation":"8.0.0-canary.95aff33ee.0","@material/typography":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.95aff33ee.0_1595530115845_0.10223412487241768","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/drawer","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.9d9f47473.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4703aee4bb391c198e721803b95d49f10c76da66","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.9d9f47473.0.tgz","fileCount":48,"integrity":"sha512-JorB3wGHDUueEBUsnxiQE2SpMYLxLQAsy7kKPzrImB6WO50ZsBCIU7tViXmcndPqrY9UBmSjW5hwXroVHI9mRQ==","signatures":[{"sig":"MEYCIQD6nn1ldcvJHjQdVahFc/4mfjMsNsZXcMfFxY79Nt6tKQIhAOesTIaL51/Yf/1cSqLHVj7cdt/kJU0cnQmU3aFafDnA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGew8CRA9TVsSAnZWagAArccP/1bk62NgLVgdoFknVbmz\nbizGsRZW1NSJDep8UE5ylTmB/F2XADF0AW6H2HgHBQ6RX9ZmhI5Lfk+gZ0h/\nvtJjWIH5OBuBXZjrKGdzhz3/ynOqK45HSOMp3lEEo/Btru+GwBTRwLXU/+eL\nl8BCBDmK3zwL4PoOAjqlchgXUWU03Tr0/HZLHb97pu4jAzoDVJ199EZ7OOZz\n/8/3pASFjAP/Qbrhzk+BOyMlxfp8KDV81oR8sG+i/qpv2+d9msO+sCgB85Dd\n5PmchQyOLmJWE0bSS85pND4KiKZf1yRjK9x4lwvRYv9guhpcg8yvxKgso0rp\nmNatWaOMENcLakxJ/ltCJRbk3xzd8SQmKWbFZ69P12dPf6/hk93hldwEffMQ\nwJ+jimT93nsG/ui1XOXfE2DAiYBZc06cnHvlP/pmybTKrf9i1Z0bkYIGpRcy\nhVESA3MFn/sMej+aMGAAF2BkyWFuC7OoCsU9DbNrld2u3pUQfwxUCL3xP9C6\nUPpQXywUD8betuiq+T9rj+khkjrr0kaGQYNlzyh2Tua1u/aPq7euVCiTR9aE\nHniyveNsZleJtyogXwCyDC1oe+JftN2JjDy/Way+gqCscFHo6ewDztkFD+Nw\nrnF7tUZohO8ov1lxqE4N1j46Z0r/gF98Zco/wADn1n+iSjxbjACkLhqJb6y+\n8VAL\r\n=DtpF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9d9f47473.0","@material/rtl":"8.0.0-canary.9d9f47473.0","@material/base":"8.0.0-canary.9d9f47473.0","@material/list":"8.0.0-canary.9d9f47473.0","@material/shape":"8.0.0-canary.9d9f47473.0","@material/theme":"8.0.0-canary.9d9f47473.0","@material/ripple":"8.0.0-canary.9d9f47473.0","@material/animation":"8.0.0-canary.9d9f47473.0","@material/elevation":"8.0.0-canary.9d9f47473.0","@material/typography":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.9d9f47473.0_1595534395922_0.005622329209660659","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/drawer","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.00dfbf6be.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49e78bc17bfb2a4b020d48f95975b6a71c82b59c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.00dfbf6be.0.tgz","fileCount":48,"integrity":"sha512-122ZWSUM+CiN5ry3p5Gn0gFCuodD7f08JajLj1BkPMd/GCJVzzSWGzjqPlVsgHsd2OfIe4Hz/eJnUIvZQhmLGQ==","signatures":[{"sig":"MEYCIQDZNDDCHZ0fQy7+ro7Q5iXe7SLlI0p7mHEl1DYJ2aQM3wIhAPjdPhNXjleWdkLZQTbdZNLMVon0cY54Mdzsa5BrtfsU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfqMCRA9TVsSAnZWagAAUz8P/R61VDadxwFa5tElNeXZ\nhb9woLqjab5g2jhVAg0SmoyHM5IB/jYWSSVfCWiLYawjcaobr2i3okcKIyf6\nCFWr2VJlriwW/j+eegVoKOhTvSTgushwxN/IsSuKdBDwhicJ7gyicX0yzFRk\nUWA7x0ufJ7TuMr3Ir0rdoqQ0f7E2WbNlJlnEUBMVIKPDDMx1v/v25v73aj5p\nXGZAl1/+xnyCeUuG4TBls24YPqLWHe4bKJl+l5wI5Xt+nzSVSBRKCuu0No2F\nv/EEW34+ZP7eavm4+KcTDpSm1ddVSIfi66R8sV29QPBupw7V/755b4mh3BrR\n0+ERJf9ytTuHK2m9n8HNNESAxx6NY85ExK9PHi+XS07nBI5GcqvzcXOhQ6aA\nqpJXJRFmLq7jpyvxyVdT5ICgqbGZ2JFF5UNEBC3hNXflgDDWa/jr1oxKtTxz\nG5LR4xndRm80/9zmsXs297qHWmz3Fd73feWL8JOLzFR5U9zb4V0azNPUnVWv\niNk0r+08ZEoHXSnb4mma1gBUeBwS1/1kDY/V1KQ1pHhv9UUblIFcTbrwuLcf\nZC07+sfrYS7gYMwu5A7gOH1wjF6RuQgl9KLRP7VgFRZKPDuepQC7UjU446vw\nH3DDa8gUOcFB4HVeykhnQoFz/cK9ZlJRZVWwLEuAs8qg1jA0/0ZXtcV8Kb7V\nuQmf\r\n=WyNK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.00dfbf6be.0","@material/rtl":"8.0.0-canary.00dfbf6be.0","@material/base":"8.0.0-canary.00dfbf6be.0","@material/list":"8.0.0-canary.00dfbf6be.0","@material/shape":"8.0.0-canary.00dfbf6be.0","@material/theme":"8.0.0-canary.00dfbf6be.0","@material/ripple":"8.0.0-canary.00dfbf6be.0","@material/animation":"8.0.0-canary.00dfbf6be.0","@material/elevation":"8.0.0-canary.00dfbf6be.0","@material/typography":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.00dfbf6be.0_1595538059770_0.05419225426567409","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/drawer","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.b87e522d2.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"505ab0e700be71aa7ce86f4c455614ef8724d374","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.b87e522d2.0.tgz","fileCount":48,"integrity":"sha512-lsFbqZSeyRz1LwRR6//yBhwTPs8fTBuJD37KvzZx2AO+U1F8i6q9//VYS3MXoYvQQdbcpddD+R2e3DyfzNonYg==","signatures":[{"sig":"MEYCIQC1ZI3f1dz/kOWQrhCu9vG+7wCewE7+rxZGVNYpYZhisQIhAJ3rfY+k7n2XwMl/b6lq/H7pGwtO81//peqbfo89OWKJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGgAmCRA9TVsSAnZWagAAnAMP/jqk3SRoJAoI1zQ4p64l\nproWQl5E9VsWv5pdd7TBxnByz0mHhdjdnq1oQ2iMOB8wWpQOGUZPoLUGRxm6\nTxeejguUfPSIRTJvmTCWEss4eWRk2hCnapbWB9QR4Co2BHA/pmULGCdPpH/Z\nyLV29gvxKZ/pOU83SuEeHb8E+ZOrdb3Ojr2drA1hiSII0dRWGllYn1rMuQEz\n+eev7a653ZUUKh7exC2z1lZi/CMgo1LGeA1OQlNhfwmOADj+Y1BaXjw4v4bD\nz/CelIeCdPnhFLYbQUniVSGhFoTV0q9fEiQh5nI8P3FRvQsFy5k1TROO1FyV\nRDQJESfixqMD46cZpGE79D1W1OIh3XBReE9rDCjkOfr9cx6jUx5S/QG+don6\nWnDI0HmR/Ssu9yKyB9l3tGUjDSloRIrSUuNJ7n9/XaD2sNMrpBDi4PMy8MHd\n957etwpOdLitdDTzJCIvgBZNQRSccbbUc4Nx4b+PBEJWB3z2nrUyqNTH68Xy\nlq+iyM5ywlnGuH6FX/ei9vEC4D2xqfbr6/bIZ7HRM4zE8mQkbVbKR38duEAi\nh1dYP179VQJZHuUNHzu1GIwCbfHZ1EnZzWuHBCcI3DwejbJsPLmAP0aTP6Bq\nG0BGd1O5S5QAfa55Q6i1PRW6hGB7q/BxC97SQQUJutPDRBNMb1tGQvJS2xyk\ndabz\r\n=yY5P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b87e522d2.0","@material/rtl":"8.0.0-canary.b87e522d2.0","@material/base":"8.0.0-canary.b87e522d2.0","@material/list":"8.0.0-canary.b87e522d2.0","@material/shape":"8.0.0-canary.b87e522d2.0","@material/theme":"8.0.0-canary.b87e522d2.0","@material/ripple":"8.0.0-canary.b87e522d2.0","@material/animation":"8.0.0-canary.b87e522d2.0","@material/elevation":"8.0.0-canary.b87e522d2.0","@material/typography":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.b87e522d2.0_1595539493459_0.21084862756519418","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/drawer","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.5b3e150e5.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5ec746392080f4d84e6b15f3fb3bf4824bfe237","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.5b3e150e5.0.tgz","fileCount":48,"integrity":"sha512-eVmDu4XzmUkeYbByMmtV3g1sNHG+fUKHeetd7T4waYj0s0/hbT6JbIv5j7NGeDgiZNN62u/La+ScGWmq+Xa4JQ==","signatures":[{"sig":"MEUCIQDtpxpN/ScsPajN9JkevpVZZnyd4B8Mre2I4tEesjjnKAIgbuB5cy05cCoY7EmbD5kYo9V75Jg1rHv6ICCz5/HKQo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjh2CRA9TVsSAnZWagAA5J8P/iYvEUmLY/sivjZvQtKd\nFnaJUrxbpmD1vtJ9PyC1X3iaWVgpged3xw8ug+7QZzMqa92ut11MOLab8NRW\n8h1l+FnL5gnF0mS3xuM2dnIjGEqjA0Wq0GxWgbxC5UMLyXbSuiMlbarOmdpj\nOfrpo74M/e3n9XZ69Dpo12jFbHyaPhzutRYH2vOTBFxHik9cTbSFtGrW9ZPC\nZvqo0cVE/LJYhESMfCOwGSOYgnLkydC9IbnKt23L0d23OCtZvA0c2ej+xOWR\neH0S128c5RjXgeJTCqBpCE72HBZzWSMpDBBJeSnJXpPnbHfGxp11uxV0+bL1\nXKFXorgcMr08vVicovVM2IGgul/MFgZW5baaFLtEPF9W3v0/RWM8vB0mH/BS\n44D3UTvHQRtD0vDxxXItDR5LhgOQZll1eYwT7uKl2eAHhxliaJcF29nmdSjS\nLWzZV9XkDV9Hvk29RBUPDi8y+ICnEimY2CKkFHFO32/jeUZvRTt/dRauqdk7\nFGhh6HElJsUk/NOTfIGnb+8NtPHUUL17N/nC+hPKzq17VQ7MdU9oT1JLmHNz\nyS3JrYr1dxF6qCUxBK7u1MxmwfekkGTQzv9nzJB+uGoCd+2LbsiQpfLWpxBM\nu7P2GbZUfn4xvh6L/w5s0waVjay3B/UbKe+Q/OpWWD7/ZR1amygi4aVvrM9N\n5jyl\r\n=TROY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5b3e150e5.0","@material/rtl":"8.0.0-canary.5b3e150e5.0","@material/base":"8.0.0-canary.5b3e150e5.0","@material/list":"8.0.0-canary.5b3e150e5.0","@material/shape":"8.0.0-canary.5b3e150e5.0","@material/theme":"8.0.0-canary.5b3e150e5.0","@material/ripple":"8.0.0-canary.5b3e150e5.0","@material/animation":"8.0.0-canary.5b3e150e5.0","@material/elevation":"8.0.0-canary.5b3e150e5.0","@material/typography":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.5b3e150e5.0_1595553909850_0.31588770905897046","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/drawer","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.f0ae11786.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3356da2bb7ade12fb6a251d3801fa9b6dec93569","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.f0ae11786.0.tgz","fileCount":48,"integrity":"sha512-68Njtt7371waeJN+lEbD0STM2mUmXfQBJlmB12nB7IgkkB6flPyqyQcr7nTbTRyRFSx8fFIPajkr07ZdGvs3pQ==","signatures":[{"sig":"MEUCIQCZ3UoKmNFMeKG23fyKVbrG0/aNo8laoHmMqAoaVMN0vgIgUNXBX36QXGZ0lPArwIrpERwyXIaO9GqYSI8O957VFuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGj0VCRA9TVsSAnZWagAAvNAP/1S92w9u4BZAIh6uskxB\nEOLGkEOtZuQJmXvKGikXkWSiKWMg5pEQlygfA7rsD/SaY1LFRTTn4bKFoZw5\nl2Pp8qcJUmlpZI01EdPxIzrknBDLkFHdKeUdetwa6eE8K4PHCSM53itEipqp\nP9iPAkoGTneDfROwVNs4Ajadv68DC1bbKWOdkpIn+hNbVcHw6uSpd+Rj62N0\nq5nQviXjv6+bzfLL5badn3nADXa5DLwRlIOw2VwceU8u9et4YQ8FdBJ9pKPM\ngBdsTnf2mDmX/kFTYesuoteC1Jj4p8k5jlkCfeWl2xMQ7Zt6GXlqa16bFJd5\nhvOGPgFXZdnhWgmD2AKvHNDpI4joPg8ujWQPG/FKAqQDhTnqG/wqPrGHTL3V\nKeIgpvk3eOZF/hQMFtv7aQ/RTD5SNVR4jXwvptfXCMJnKcVufXioSjrKT35O\neWo5DmgTeT3SPAtj8xpvPhxE+N61Gib8VYNnQhg2KJX9aOrLK6Z2zTXWVexL\nGF/2DzL+ufs6g/wAml5EhCNvF9naDNyspK/9uufDdQjvlfRY2+8ZD6nliG+E\n2hRhogGNlfjsEvQ3jZ0u/05FZTKix/mtBmc80eO8jdT9oo8YJmmWq1M3AJh4\nPL9XO5Gp7gg9Rp04zD7Eo823awDenvQJML5NwYkjRd+FJZAwpbZX+0QDGDTN\nCgSB\r\n=UjOj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f0ae11786.0","@material/rtl":"8.0.0-canary.f0ae11786.0","@material/base":"8.0.0-canary.f0ae11786.0","@material/list":"8.0.0-canary.f0ae11786.0","@material/shape":"8.0.0-canary.f0ae11786.0","@material/theme":"8.0.0-canary.f0ae11786.0","@material/ripple":"8.0.0-canary.f0ae11786.0","@material/animation":"8.0.0-canary.f0ae11786.0","@material/elevation":"8.0.0-canary.f0ae11786.0","@material/typography":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.f0ae11786.0_1595555093290_0.974468822052553","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/drawer","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.fb4ee66c0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76bddcfc6f3be93e821d0d0268ed85451c24c831","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":48,"integrity":"sha512-o4+8Yg6HYos0hVAflVFQb8J8aCWTpJmd6nrpmTD4MaeKseavPtxSQEMxIq0zk3+NP2xb4v8k5lxaS+pUnpdlSA==","signatures":[{"sig":"MEQCIDxOkm6t2T6uMR6llmEr3CIJI5NuJmyHhggo9sW+y7B+AiAcPg28WRVT8SFHrhTg5eXEuYyIrz9+s7TPNHiTW9yZ1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":903940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkNpCRA9TVsSAnZWagAABNQP+wWuwn4Gb3QywQhoRsMz\naCPXqUlNEF6yfuUHvUogqVY5xphb15eiPT45A5wPK7tqlTPDY1LFZnrdrz2t\noYHRrfLmFh7seWCW8jv3JQ1LiX4WYyfHi1dpcJ6qbqZKbcLVJhk9XAJ+j12q\nsq+a0sz/07SsdxG0WbqHvzyDSlOEi4DnTewtppDgjbtR+pOaRF/dRqE/fqhI\n2QzAiPXm5tLTHnmY4ieAVe8QZORccjwEZEkpT1o/C3wN6czEe/4iegeENWlW\niecqSt+14PRDbg9WLLnDTpoQbmmqKa0rfhLohlU13tmMozpYSZUlGx+TiHNw\neWao0z049pIaNwXxcCHsmzGTcqVGpSWg6Bm71Ea3jEkOsH1fXOpBAe0P75qJ\nXyMe/FYj0R86Tn1bnSMboL1PBjZBxK2zkX5EvvdVGCZvs3tHo6P8rD7C40TV\nXCvC+pRZ+v7iHcLZ8h8gLxLWmv+fwxEbnWrynOOfWhk5dXprJGRXTJvFGa3j\n/sKiyQBxARV9zofWIsBWm2wGDX5ovmcJeqd0FTTUpL3m/9pYAKCgtmzExdiZ\nbIyDHyfrD7A6If3RQm/Xu98RJ2G0vBSJtdf/q5YJZ0m92rCDzVfT8yXH5BV9\n+uEfsDZ07F+j2+TfTebfooCK0hqnIzVoCAm0FmiOdpmugUsW7EQVfor4VNva\nLruk\r\n=q9Sg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fb4ee66c0.0","@material/rtl":"8.0.0-canary.fb4ee66c0.0","@material/base":"8.0.0-canary.fb4ee66c0.0","@material/list":"8.0.0-canary.fb4ee66c0.0","@material/shape":"8.0.0-canary.fb4ee66c0.0","@material/theme":"8.0.0-canary.fb4ee66c0.0","@material/ripple":"8.0.0-canary.fb4ee66c0.0","@material/animation":"8.0.0-canary.fb4ee66c0.0","@material/elevation":"8.0.0-canary.fb4ee66c0.0","@material/typography":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.fb4ee66c0.0_1595556712893_0.7545428739182038","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/drawer","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.5511e0aeb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ecd62271ce36809f415b0507ccaea399da8200b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.5511e0aeb.0.tgz","fileCount":48,"integrity":"sha512-hVFh8DYEfegdVUUBfTsj2jki7zhDn/Fya30CXlA5H0XjzwGXXLGAATepwvpigDPpENL7dI9WpbA1mAxJmQu4QA==","signatures":[{"sig":"MEQCIBF9KoeCA/3j+np65J/xbYmHfgB+fW0rGFJWxxYG9nQ4AiAvvG2Nn+dgv0iMylUPnnw1B2Ej4KWiNZn7ob28ojwVLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":903940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxMcCRA9TVsSAnZWagAAgcIP/1GUI8UnaDyosPv6Sqf8\n+XDXt6hx0yqKBHJxP9SUGnhMXLRhId61a9LI/wPGsQ6lX+optKf946anLxeD\nlqVPQj3xudIADxuLsoaUa9XuXxbqq2ALRi4IFnpby1ydml1NRSa3lbJwuUbI\nnaS1+i280x0XsaYtVKpdbWjB+1e5FcGj9GF8XFIIC0k9SuH8SmRAOoZfEJCj\njGbQfiZKAybE4T5q+QGRH2WMJKCTn9aMJ8bZXnIWfIoFPj1m8W9QOL8dWcOv\nom/nh4/ihJ7ZW9Zox13DBAwP6exZ13mUWl7wnQ3aec0vxV7fAsYSxHM8eYtG\nhDX4VA3PY05QPfXBjhx2YpEkauB6qvjR1RT7gceeJdDndGnRMohRwYBws88K\nETnl6+WcHD2/14QF4/2Jz/SdyiEBiO+rlJYd8WcymER7F56aVYW6gG72C1lY\n2QBOX8eZVd+BXmZzFTaVXPqdNtfhXKLFV0d/eL2NK89R4HRwX56S2j5rgKLC\nL46FrsF4A7z6kKbyRlm+pChTBgEpmM4mpajHMzn/AIywV0E00t+xi2yLbHPg\np5NB+QaWZNM9lncNQ4ChoHskp+dWf33siqwI4235WysTJJdxPpxnpGo72oYV\npw6MT00mwmaKa3gYAwV+5fAuaXoHk3uq4vjWMJYIZLqjuxAf8pt/U4eoL9/u\ndmw8\r\n=Z6vV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5511e0aeb.0","@material/rtl":"8.0.0-canary.5511e0aeb.0","@material/base":"8.0.0-canary.5511e0aeb.0","@material/list":"8.0.0-canary.5511e0aeb.0","@material/shape":"8.0.0-canary.5511e0aeb.0","@material/theme":"8.0.0-canary.5511e0aeb.0","@material/ripple":"8.0.0-canary.5511e0aeb.0","@material/animation":"8.0.0-canary.5511e0aeb.0","@material/elevation":"8.0.0-canary.5511e0aeb.0","@material/typography":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.5511e0aeb.0_1595609883563_0.5063266694490927","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/drawer","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.8388a9bf6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7760d32d2ee0db4d00d80a4b3c105d105bb03e23","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.8388a9bf6.0.tgz","fileCount":48,"integrity":"sha512-I9Kn76w5kgSBPiC09WZklFgYso72HJcsO5uwofjZT+C2bYjObae8s7n9XLfvYzgcHTYko9cUN8e98JzSH0yWew==","signatures":[{"sig":"MEQCIGz3HkDtNW6KZ+S9BVwTfE3UwD8PZmYP+S1BJo8oL3rVAiAG+qw+P4GU5A5HT1jvpizRzFss1rDAB9s3S7VjwmVFzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0EmCRA9TVsSAnZWagAA2VYP+wSmP67JWToP5PJXkSe4\nRA0SbVnoMvq3SyYVbbb95DD8mBo30M6mIRRijHyw1ar7AsbBBwrcKih40jyx\n7veXCHUl4T+Hqn4edbM4fUh88pUAfoZ3CxRGWSELDp6yl1ZGyx0N8mvNCO4l\nboA9FEBZUM9N9H/LseMRrmvFQtHY7wXPMeMVxu6ZPdnvOOngqLhrb7+RidIu\nr4YeGAzUcxuEx8ma06b4lq0nAyVB5QFLzfXALUH+srCoMzjsk/qOOnIsXpTJ\niy4pYr4HKk3SFzSHMizAfVc31Ux0EhxWWuMnxQ536X9cebxGtb2qE1luMs+N\n69DXjnnK8fxXY2oiYOdM0JADbVYTWnguTx3bEXrvApmA/KmOf8SPmlpidtWA\n6PwWJQLhl0p8p4Kdsw/0eUTZS0t5k0C6pYBfA1P0usw38jf3XnR5I9+66m05\nsSnMZClHgr8xBF3D3QAMmBQN2RkDrAbV81xHqGk6jpGL9p2W2Vgpx9Nrgkqx\ngrdCAxLiSFoP7H7p8ExTWxkA0sLivd6jb5AbCmbwQUC3QPDowsUn9ryjKAkd\nIpPU5CRtqR45nMzHqVjiHMjNuK6JBRNc+ncL0bWZQKFqUgMaSnJXMJc3WJDJ\nunp30lOW2Vglldk2CGHmMlf6tCEb1z44+QLdoOJaj/lqa4De/sPSLsxhhET/\n4bIA\r\n=pmIE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8388a9bf6.0","@material/rtl":"8.0.0-canary.8388a9bf6.0","@material/base":"8.0.0-canary.8388a9bf6.0","@material/list":"8.0.0-canary.8388a9bf6.0","@material/shape":"8.0.0-canary.8388a9bf6.0","@material/theme":"8.0.0-canary.8388a9bf6.0","@material/ripple":"8.0.0-canary.8388a9bf6.0","@material/animation":"8.0.0-canary.8388a9bf6.0","@material/elevation":"8.0.0-canary.8388a9bf6.0","@material/typography":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.8388a9bf6.0_1595621670364_0.40861395455586713","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/drawer","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.ac405eae1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d33873b4b93dbf7a7f17e14f9269e8421d8962c9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.ac405eae1.0.tgz","fileCount":48,"integrity":"sha512-llMdngAN+O9X6PsKwg/ACZHOwzQoRLDyPzKQk1vYwrAOmDGUNMM3Hx0eDyoNUoN88pyNxbLKXQ0R77eYwsivpw==","signatures":[{"sig":"MEYCIQC6uwgaQoIsUFKaeAf/pbqMUsBNNpFLnHaVlC3nN7AkQQIhAJHo8un5uSLS+kMhTMQZ5SQAdd2AK4QKHcZ+WD9HWS1b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu3RCRA9TVsSAnZWagAAVkMP/1mi58eCK3WJX8oWkEYJ\nr3bP+hqmqPb6YvOe+uF9zOSwAnT84fSu9rHy7HPo0Os5JZkEKFlTWtKu+d/N\ntAb2g5OynENr8zv3R6QXjHPQltAT4uvfcHMB6J/4kJvFMlmvwcCrfcl4inSl\nbmeLnuPDd+qkY/nWMQVnyvzFsPvV5J4ntcfghS2tU8tMr0HurEvxfKg1L51l\nA0F+NE8QCbZ4Mip2I6R9yU8ia+JrxGdC2OPIW49CmCkjEdydxrSxpP0OsxjH\n0QzC8frh+3Jx9qeyVz59wqz7Zi10efzVHQdsyivO7IxZ3SoqZ9nYKgJSobo4\nBnHYRFf3oUAzZVLvV8KkPajxI0RpVe+Tg2LePkNJLhlNVQIMAfoWrfW/efn9\nTcgdh/qofqEfwcaCsHWb/D7/xygwRsYihNu3BH97PQdPYwh8NTx7oFSk9B1G\nJQHG1hra1roAeWOKdWw5umBfKYriN6mgJV6bwYeS5NqH3zXaeHXQcOHvHB3T\nt0f2SuRP+Pmy/fO3tq903IwqplGQs9nB07IVI612lfk81xKcAA9Ty7L7Y/g9\nQhTNhf+UHDb4NQhP7bfdALIP3kjXuEViN79SLQ6PgBwl08Ldn/nfyEI0IQjp\ngiubchL6MbsKLCjprslwuRKKYGOIKlz6AcFcFS1FLoKBQkqu6aaOgV9JTnN3\nbOw7\r\n=EbH2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ac405eae1.0","@material/rtl":"8.0.0-canary.ac405eae1.0","@material/base":"8.0.0-canary.ac405eae1.0","@material/list":"8.0.0-canary.ac405eae1.0","@material/shape":"8.0.0-canary.ac405eae1.0","@material/theme":"8.0.0-canary.ac405eae1.0","@material/ripple":"8.0.0-canary.ac405eae1.0","@material/animation":"8.0.0-canary.ac405eae1.0","@material/elevation":"8.0.0-canary.ac405eae1.0","@material/typography":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.ac405eae1.0_1595862480954_0.5067554610925931","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/drawer","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.75553837c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ce167c94d7cc46d28cf10f2df5f311cae08789c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.75553837c.0.tgz","fileCount":48,"integrity":"sha512-dSbm0+FAZXtNWgBk+9XM9Fljcz6b1X5EwfZtaQyo+o00OFp145sgQU8RhCm6UkR3WKRHxP26WvfSgDpW+HGJIA==","signatures":[{"sig":"MEUCIQCll2ES2JO7g8CaZu9fUQYt+ohbqSU9eb4c4WQjkKEQdQIgLEHdIyuzGVs42YFDm/47R7LqE3fLcOcut1FcMuvQCxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu8pCRA9TVsSAnZWagAA36gQAIUvZPu+HR6MhYun/LQZ\nZhQiVz9FtnvlDLH8B+w1pPVveoSdS8O7psJmr1MZ0to2Aa7t0DXVh7JyKDqZ\nm2PZcVS67xAAmCza6BIja6U6h3VJrfkw2Q+CCrRhmwIQTRIA7u2NBZwono7C\nUB5R1rNEyxLoh0JpG9aw3Do+Mz5Q4wgozmUoknTW5utx75EGHtj+BEC/9buq\nRf8kjMlyOUeaTmauvsmeP8kKkly8K9SLFuX71BNs1WjKPPB/EhKy+qMhez4O\n5Kugf/AhESiyIgREJZYWKBFuL4/6FUAlZ0o3Ywgqd6qv49sK0j+tfGNHH0uc\nCvdPMdfhxTI1n5kFZsjTCYK12DjS/75SvaUu3C2BNujhEimKkPl9NRJx2Ik0\nTqkgtodbLHLz8Pjj3BoU/QGpSbF4A+/eoNZ+LO2VMy9LdhXBkcUNzfyQOxDn\nQ51aXqWca4Ya8hiDaUXiLo+fnmo2/OVNBBsIF57I8K7d1OnvDeg7Rqi+hhBB\nSaLG1wnRWMOAeinfFZ5XDMKp0JNCNcidZhb9Ei3wCGf69s65mYw8+wugYTWy\njn7Ipgaf5594e+r3ktSsIz+3lthWOPN9XBTMX7dcAYfNZTcHlD2c46C2+VSW\nfCz+YADKD4S4l+al1ym9h5D4zjTkcOIrqLu426Yk0dzOAMlvi9cXX+wl/i+a\nCtVR\r\n=/+Oa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.75553837c.0","@material/rtl":"8.0.0-canary.75553837c.0","@material/base":"8.0.0-canary.75553837c.0","@material/list":"8.0.0-canary.75553837c.0","@material/shape":"8.0.0-canary.75553837c.0","@material/theme":"8.0.0-canary.75553837c.0","@material/ripple":"8.0.0-canary.75553837c.0","@material/animation":"8.0.0-canary.75553837c.0","@material/elevation":"8.0.0-canary.75553837c.0","@material/typography":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.75553837c.0_1595862825010_0.47151358622516315","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/drawer","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.b96fbfc7a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5718bec75e3757d7443a6785223f4c0adb0ec7cc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":48,"integrity":"sha512-KuU2yAr2nwnpk3DtNnNR87NbK057AVPdD40shyqVk+JRSi5fjG6/o3Dy6kwMHvpJS/YbGcSY5kD1a6T1PtxGMw==","signatures":[{"sig":"MEYCIQDN3QtrZE+cqW1U8rsKDkwpzq4F+NH4miAxkb3ky7OXAQIhALX8V8nnhTFP7vknH9eo5D3A0L8Chgei0UoZNyhfiSs1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvUmCRA9TVsSAnZWagAAYDkQAJCHAJpqzA9tx5gYlB+W\n4tShpV8HW8nlff65ZsAYNCtQrnz1AEMEdPsYqRD03cX2pAMtur9v1fwTpjzu\n98X1XSYCwBONkMDx3vElyHty0Sj83QjNBSru/J2sDr7xDea9nOYFfheezU4b\ntm8bKxTiA97eD/AOW+iQTZrXw1lYdakHblrzn7mi4Yh/5RUvXS9hTLwktwKi\nbyxIX4tKJeOkVAm9FDvOlWQ53HCV1OpOo16hqi8Eb9+cwH6VvSPNk4D5kLcn\nTKopm/DpPt0ZT8OC7A9jyVI+25RnK2Cb2pD32Jpa9rNDhb7dS12M5Zpdgwg/\nlKxToqngI2qfvE3clL+o0KUN6+r1FUeGN4RvqUBDM8Rnr8NYrbhfuQgMaHCk\nw5bjQ+2hhHe11uTg6l621tZgOYUQwIXI/n7eqW3r114o6aZT6Tj3tfncH+mw\n7PVvL17q5gyMhuHPU3q4INgsVff4z14JQhpXHrtwCa2j8F7Ztwh2MJucX5kb\n0SPxnzRY/L+61+U933++NMBjJfgLioUhRTwc6Hwh0h1BdKvSWiK5ZBOXLDvZ\nIOIjTCG6ipzM7ETitBPBSA/JZ9usAnxu7PRGcH6N5Yqh4woGwI5OW5VdtDBl\n/LLQj6tE15p4vfF5gju7+ycJm7oO8TtneA8NGNv5U2qAZjuXO5owoI52IrpK\nv45L\r\n=MKBd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b96fbfc7a.0","@material/rtl":"8.0.0-canary.b96fbfc7a.0","@material/base":"8.0.0-canary.b96fbfc7a.0","@material/list":"8.0.0-canary.b96fbfc7a.0","@material/shape":"8.0.0-canary.b96fbfc7a.0","@material/theme":"8.0.0-canary.b96fbfc7a.0","@material/ripple":"8.0.0-canary.b96fbfc7a.0","@material/animation":"8.0.0-canary.b96fbfc7a.0","@material/elevation":"8.0.0-canary.b96fbfc7a.0","@material/typography":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.b96fbfc7a.0_1595864357648_0.7310165253907335","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/drawer","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.61f1a8d85.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b9461628753b638813d15485ad59a780198e6ff","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.61f1a8d85.0.tgz","fileCount":48,"integrity":"sha512-aIMo83f1URiZQB8eSsj33zj//aLbHe9mBBapIPkM11IkcQLFmC+pi4b5iTlcPX0HvHOWaA9KmfzsVm2y0ipmUQ==","signatures":[{"sig":"MEYCIQCQjNS/5U4QnGPvWS5Ltqxb2Y9kzjij0JwffAPsaCFvLAIhAPV8tOIVdnarCEhqDygEeoqfN6FXxIFLg4TaBvCl2PNd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvdOCRA9TVsSAnZWagAAiHkQAJzn4EcKbcBinp/AS1FF\nBRACY3iZDZmSKxDDnS8I9LecVY404ZDSotY0Khes864+3pMkYLB2jCVRjShz\nlNVMAYmNjzELTMX5PpBAYEAtOWQDalpgCAEz04BaFaw11N1bV2LYDoCqAB9S\nEoqfnDZm9hfbLhIRQZTz1UWt3FTUfZgOLo94hYMl7vtSvbdkIAJawq/AuzN7\nC7LTjF1FLTwT8XgO73MJQFRqEyr2eS0gYJYBlIMzl6Dnay7kza467qQGadQH\nvoCOo3E/SqJvZny5Eh0eaT31msvvG5O29/wtUozKgNjLMZ+QMZO32EVpVV4v\nhsVsMGO3VHIV9ByvF8aJzc4t4y6OYYxi0j/+lb/4loMmF4cAh4bWkeYwO8E5\na0Oc6qO1O5S3DAXXXkbXZW+uGiSVDfPdgyU8pLUto5ZrwUoKf6+z/AFyDaid\nOUhcdKpaxvSGk3JO3fVTg0mFx3JcH2NCAvEhCkm0fy2CHEXXiAaeIZbfrZqv\n9REr4dGwAdCOn/DCgFipEy4ecrQliZyVw183NNobskLyEnxdrmEQ1TIDITKE\nOyQuF8BSeITgFoOilLzDvm5kzIFNl4rsjV1Af5Jnji7UKB7BN0P29bGOQAxe\n9+09oZdJapskOJpEN6N4dWf/vj7kho0GEJWeVUyvMWWWP/v1afFPYQqZ7qce\n6ICt\r\n=DrGn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.61f1a8d85.0","@material/rtl":"8.0.0-canary.61f1a8d85.0","@material/base":"8.0.0-canary.61f1a8d85.0","@material/list":"8.0.0-canary.61f1a8d85.0","@material/shape":"8.0.0-canary.61f1a8d85.0","@material/theme":"8.0.0-canary.61f1a8d85.0","@material/ripple":"8.0.0-canary.61f1a8d85.0","@material/animation":"8.0.0-canary.61f1a8d85.0","@material/elevation":"8.0.0-canary.61f1a8d85.0","@material/typography":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.61f1a8d85.0_1595864910034_0.17869013640993603","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/drawer","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.81dc33377.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff2e0af0c9eae1386031e77fdcfaa99b9dc9c5c8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.81dc33377.0.tgz","fileCount":48,"integrity":"sha512-NGgWxJ6kyzAZuRWStaPx5KZptlrjhJONzmUGaZ78rYrTydoILDyHCFY3ttWCnkMu32EOP3SUzQp8CKHUiEmTpg==","signatures":[{"sig":"MEUCID47jvigWFyIIPQYX1H6GpjcOsLeGcnLAOufOlfRU4GZAiEA6bLEdWzHxyw3DwSX9paCveMVidi8kvqAtY/HQruAlZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvodCRA9TVsSAnZWagAAlXMP/1DMOKbsQFCaCC8a6bbZ\nTtmaGoCsUtahK3Rx9AlwnDXHntqkLC8/KNPLLO97TfbShZTJNYznMOnNEuew\n0BZB4Oy9QlkA9jcA1UdXdv7Vb9oZta0U2Bgsvw3vWirKs/2GsYbdPzh1nOS7\nZarlWniEthr9RRhIpbagtaVTwdS7t2MMVzXRPjlpTEhzIERh1laqILEOySld\nv7yxeeLPh3RfCV+CtwTXVcZN5jmALDvTMq/RlpL9OaoVI3do1k2YDhV+10gp\nhnFVEXp53HVNzIzKDkeex4ariAy0+I+12QPwdq0NATY4IGXMQ97pOOAp8x+r\nfjg6q1cB1wv1GsLKM3NRj3LAE8Wf2m6SEO7g+dxJn8Oy/1I9xEo6WfqCvhYU\nhYJT/NjlgaTlMC/ZoHYr7C4itt6+LBZNxC75mh0s+QZE8M0XIRDWpi9fj/aC\n9FVPEdq1K22mTbQYrmf7Tq/z1GmYM4bPJyzF7/lutOzfxK9ZYlx1nVo0aYMz\n8TXebYPrq5Gf8cYzzPxV/hFhXeNenjpO+HmwT/ptq3IB3kh9DXUSM2CWftJo\nQWna0LOGcEdz7DYo84LuWzda6uEqyi+Vz8qyq6CaA0W9NNiJ2N8nv//t7ROE\n+7cvrdDDU2Y+0ZajPvMWLLowYYefFgo7OWIEeg1oIjKR19Q2yiKVlqiSiD+W\nWlY6\r\n=8EIp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.81dc33377.0","@material/rtl":"8.0.0-canary.81dc33377.0","@material/base":"8.0.0-canary.81dc33377.0","@material/list":"8.0.0-canary.81dc33377.0","@material/shape":"8.0.0-canary.81dc33377.0","@material/theme":"8.0.0-canary.81dc33377.0","@material/ripple":"8.0.0-canary.81dc33377.0","@material/animation":"8.0.0-canary.81dc33377.0","@material/elevation":"8.0.0-canary.81dc33377.0","@material/typography":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.81dc33377.0_1595865628931_0.3123362271661778","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/drawer","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.ffd9ede58.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"741c0429dfad58163139218f0778422369d466bc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.ffd9ede58.0.tgz","fileCount":48,"integrity":"sha512-G9/gc9hxfAg1KGZTySX3I6kAlCtHUluia47EGylemF0XL2zo1VUUZIMl7vW2IE5e/ibfZvkq1XuKKYlRk0mrlg==","signatures":[{"sig":"MEUCIQCaupvnoBhFeioH2pVUw/J/43YARROPfwm/Ckao7Fm+CAIgd+wfkCJf4DnrhtBS0ojdbHpmule+0kTqNRJIjb21zY4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwHsCRA9TVsSAnZWagAA3xYP/2Jx2bvS2oZbTjVJb3/j\ngkAOV1ETSBoqzDv2rQ0a81oAfvr6bPLds8b/CCgISy+qVzmyjqeKBJisRd9J\n++NOJbKfCD1ExX/Vio0EMaOp1yXwYJuQzxlbqx11ywSjP44o/OpBjth8I9EO\nBN/UDX8HE7mEG0sMxv+VJY9GXTL2HLRiRFh6/5mw10oeur54sHtGF/tBfq0o\n81b5j5Z3TWJOLtpQLlZ0YBBa+bR/rjb930Clr/gM3JSCHOy73pea68+QrSCG\n9PqsAhjFtUbDQt2DdQXbGNshTxEvxuT4dO+2Y0HuVF3sHWUQwSbwJJVvyEM+\nDKsY5t+Rxp3U/uB3ZwoilIDorR3TyKY13GyaaoRIxQe6JCrjEwa87Y6xxVUV\nXOUUq5jfv+eLNcv3+kq7MKLkOX0FhfyNedCZaMHrxS1rknX8QlVVrRnaskS7\nO08/MvgipWtK31w4+gSaDqoZoi7QiK+LOV5p0YnoRKVXeH1X5N5H42WhqhM1\naiIyODhsj7szpx6RL9DjMDIo2kYPv1jGgCkqSdxRywulqpKYvZyzxDq1fTfX\nJodG/dnpd7VY+k/p0RKPpFwzhFBhjbRtMRFTLobj6ie4DTxkGAUBd2oY/qzv\nw3xdKLMt+KXfn7siHJgTFh37BmICajyupi2LYx19yRTFO2/8KxIPf7Q+fjcN\nDc9x\r\n=vzDh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ffd9ede58.0","@material/rtl":"8.0.0-canary.ffd9ede58.0","@material/base":"8.0.0-canary.ffd9ede58.0","@material/list":"8.0.0-canary.ffd9ede58.0","@material/shape":"8.0.0-canary.ffd9ede58.0","@material/theme":"8.0.0-canary.ffd9ede58.0","@material/ripple":"8.0.0-canary.ffd9ede58.0","@material/animation":"8.0.0-canary.ffd9ede58.0","@material/elevation":"8.0.0-canary.ffd9ede58.0","@material/typography":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.ffd9ede58.0_1595867627690_0.260346060018005","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/drawer","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.52dc55acf.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a10e7aeeaa37d69dbd6090a05b824345a6a5370b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.52dc55acf.0.tgz","fileCount":48,"integrity":"sha512-UcjFTKwTe11pN1A5TNrVwVyd3yzCUGhj5RdLUN1ByN03ageFyQAK0D9ADdJNbwJzdYMOp2PHWX1ExiQU/W9t2Q==","signatures":[{"sig":"MEUCIQDD2/ZWSz3Joz21qFckUZ8m8ZNA9Lyq0b5i52APIWnejwIgAwtzQZlEZrrCDjioZGbWRgjhwFyV1ClqGoX5EzSkahw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwpXCRA9TVsSAnZWagAAofAP/jXWlC652jN3eUE+jXyP\nBf0JO+Y1ZC+8oH6pwbnPeeLpIyE0uoZNgpjlCEBdbEDSxjSPAUVoVi2dDCyo\n8sBSNXOFFvT3QxY0/y7n6Db8iLPxrwTy5RzVyVBEQOyDsKezlvrj13cNmF1P\nccmgTDoorrTaSyBHLgyNHZjTeEFGJztFaeo837e/tqygTh0Z12vsjJM/tKFa\n3yGJFm7VEnKTQZsuaP/5/sRul3sitjvRdNTohfW+TuiOaT2vKuu5PBIwUyMu\n8svRknX8VLs02dzrR1/T6Y1xQDx9C4ZEmsJkZea4aSb0oiNe64cFmog7I0Yb\nNC5+VLq8gUdd3RDH0rS77hu0FqrN22qklSuOCNxVghKsA8Tm1kZ7jTMzOY7n\nSd3mN129zj3iJuJv8GFInomkr92klcePY6KwLDKmzSE0o+9XF6AUZG/4kj/R\ndPgnlTg0wCDvZdEMbMrdarpecx0xv7oTwssGKAkoEfarJiXh/HLFL4ytOGJN\nWUIwz+j1y7f5uvpOyOqCLr+rwEhT4vAJQPZOFOLLV+pmWCyRm7CK4Znyiqud\n0hxKaG6xUfjbHi5vsJSLfIIBl5usRcu2XcDBdcilRMXXP69DV9X0wIA62Gpc\nzFv2giklyWgXb+cRMLFrhqOhlNQ6/eco2Ikj80z9SpoZcusjZNfaloCcQ7pU\n+vf2\r\n=cryq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.52dc55acf.0","@material/rtl":"8.0.0-canary.52dc55acf.0","@material/base":"8.0.0-canary.52dc55acf.0","@material/list":"8.0.0-canary.52dc55acf.0","@material/shape":"8.0.0-canary.52dc55acf.0","@material/theme":"8.0.0-canary.52dc55acf.0","@material/ripple":"8.0.0-canary.52dc55acf.0","@material/animation":"8.0.0-canary.52dc55acf.0","@material/elevation":"8.0.0-canary.52dc55acf.0","@material/typography":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.52dc55acf.0_1595869782578_0.2489989988190977","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/drawer","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.d4274ff05.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdd9ad4a745cf2194ff2f0e1686d7f35512d1f98","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.d4274ff05.0.tgz","fileCount":48,"integrity":"sha512-eQHDeHQAZrVI0gmbngBxENyUcqmMnUaF5toXJtOt9FG5yzBznOWxSutiYzPpbsMecWq20co7MaMrBPFJKgbPlw==","signatures":[{"sig":"MEYCIQCuu0a4TX4OaHe55Oh1emamWBFNV3XfmHkyV8mIJ9UOdAIhAIU9x0EAjFtcOZd63wJbAMtCh1Ne9nLnahmHs4rJI75e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzB1CRA9TVsSAnZWagAAfZ8P/3qmtB/22t3Ab8eJAw+4\ncviRcMSifBXhMzptakEt5pMcdrUG12IGrkaaA/SAZdWIUZZEuyFIXIo1VRtO\njKBncVSRoWCm87h8zcBdlyJpiocR/L6RpBFSGMvUTW6pUGVX527O/FFie18c\nWf57DiloXVsgN0d/kjPEyXaBBa49H7uLfacnfbCuVpxaVsdKI4V8Sl7Evmf3\nTwZALffrquElZXG9QV7ZPo2wMr8tLrSQDGBMVlEvn8vQwR9S5znG+igcwORY\nhjSv34VugvrfEzDenWuJ6QNu9XVtVCsq2CfneKEEQDCj1op9p0l6hyRKqQF3\nbkKtqPfyJD5Bjy5sbugos0ValLNuonKAZw7x49R5dTbENuiFMMTamVLNUmMC\n8Z8k7BB6KIKzOFXfzmThorXE8tffde+iKShGtjUa9k7etDdr2Igpc631nQWd\n7Xl50p2aqZzBWogv6hOoXlEwVyl6HLcThmdLVo6B1+KyzdSOS3xDbJGy6RDy\ne2Ots+9W6djX7BkOogyEbQF/52sxEzkPqBSr5yn0d+fIIGBvMSf/8giyDlmu\ntzV/SsWEgKvC/GM499MXAQdaaGQ7dm+4XbWOyk31n02pOWGdnjVgw6zpoJuJ\ngWcPHwRcwYneCOONV7Hb4Rm/gOt7/jlhLQJ3arFdyvQ1Y4zlmCSMNsu/l899\nEOwk\r\n=v82B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d4274ff05.0","@material/rtl":"8.0.0-canary.d4274ff05.0","@material/base":"8.0.0-canary.d4274ff05.0","@material/list":"8.0.0-canary.d4274ff05.0","@material/shape":"8.0.0-canary.d4274ff05.0","@material/theme":"8.0.0-canary.d4274ff05.0","@material/ripple":"8.0.0-canary.d4274ff05.0","@material/animation":"8.0.0-canary.d4274ff05.0","@material/elevation":"8.0.0-canary.d4274ff05.0","@material/typography":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.d4274ff05.0_1595879541036_0.21940491848293342","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/drawer","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.b82d0696d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b83888e967416d896f5697e6ab66b0b37a10181e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.b82d0696d.0.tgz","fileCount":48,"integrity":"sha512-YOkm3MalGgJFiXrB0b/LM8fZtwlAhJ2xFE8vdmlcN3mUaf6bBLgH4RAIQjD2kb0k28NqpD+FxvK622GQUIxd4A==","signatures":[{"sig":"MEYCIQCItIOCqL0avH7xrfZ5IYq76/Jj9P2PRbb2G5z8ozB3kwIhAMpn1EjwHn46o+ALCZzrOVgrzR1pVFJ2iJsHmdI8Kn1p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzIaCRA9TVsSAnZWagAA700QAJGeBXeizNKfZKO270FS\njS950mFj/VcLF0VEP32S3++6UY3+shOZzBVSGqmLJ3QLfldH7Zt4BNmNXF6m\nTsN5CARxJgHFvGU5CExLuuoo7reH0pQPEtbfR3G/NHe5IGHyJsvbRUIU0JGY\nJdpd+CVKzJfsN6qJU5LcB4dhdRTcUSUuye2azshG4+a/VfReS6gbe21gvZuh\nW3sH3BUIfk7kf286j77xMqmTNEZmn/fq1yiFo7GvIo1bevG1gj4FJ3sj19Gf\naKlby/hzaR1noxOA8t++nxL8UcVp1GyTveyNvgyPTvEkv3Jt7EuSu9m/rB/i\niMiItmvTJC4RzxXnDbOhJCCpFmoJVOS+0U+kwemdL0N/Rrxa+lrqD4hnAISB\nN0+HUjdZs3SnH4lOYlPP6VawoQEmwIPjmf9Qt8R9tAPu1f8XXe7/WTpjFeO3\n1qKV5jSIy4J6YRPFixjry9PexsA40SnCtaxHZQpmp20eIyeEzqynpF+n3c5Q\nhxjdQv8PLn9TSxyIRXtEQlUc/k2SEKSdNap0ktx/NLy/qdIbb4eGYyKwaTZN\nPtv131/7Uf7FzkjlfNEoeV3AE1boYJZ4zfbJhT5Fd0j3heQGamfDm5ZA0TEz\n+CCdaXKBnASebo4jn/dZjdJ/EKe/8UALF+8wliGA4Y3M2wDVds3XyYjSeBcL\n/19G\r\n=+VPR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b82d0696d.0","@material/rtl":"8.0.0-canary.b82d0696d.0","@material/base":"8.0.0-canary.b82d0696d.0","@material/list":"8.0.0-canary.b82d0696d.0","@material/shape":"8.0.0-canary.b82d0696d.0","@material/theme":"8.0.0-canary.b82d0696d.0","@material/ripple":"8.0.0-canary.b82d0696d.0","@material/animation":"8.0.0-canary.b82d0696d.0","@material/elevation":"8.0.0-canary.b82d0696d.0","@material/typography":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.b82d0696d.0_1595879962013_0.4235787329669103","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/drawer","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.c2852000d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a708111df59393c55d22dbdc49955c63c7ec09d1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.c2852000d.0.tgz","fileCount":48,"integrity":"sha512-1Jkhapv/QA8rpMSlYTK16yOiTt4GRNkhXL8yAkRcguiM+WRCojqERJzkwgXX4KrfVi05udVPvrP8oTtsxrVMxA==","signatures":[{"sig":"MEYCIQCS9+mDwcd2xnWrcn4/PXUUfIY4AJlEBF2O8AbxsQYxPQIhAI+w599RgQVX/9rzw0Kd1xEBLmsyneL2mhzE7QG4nMSD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0A+CRA9TVsSAnZWagAA6zQP/0KYpCPNGte2KPw2dbgH\nTUeZYw+gG6iLVglfh7/T9Bs19dnpr8Umt3JCoFkMOKAC/6IraT9TV+0CEIIl\nhjMkh0wCnTseig+MjgcpZ8YI+6ylJtKNXip9Ka+XYiMs+JL+EjG03p6op5mX\nckQdd6UWHhHBbzoUKYRxR2J6WXr0mIhv5dMfyT8uvHwcZdjjFXct448VAk74\nDcIz0sTpenl2flQapAbp9dD0+GodDp4upfdjfiRhEmTdpKYJRhk2xi369vGS\ncrVXxtCvNejIH7/0Ki4x9Lb5+McEiJrShhg1ZLn6Rx36YBikUYg+2oET7jJL\n1zOdIzVsIavPFETjbDwCtfvPHCW9o1JOV9JaDeqsoAdtispExCFDxUpVOqqi\nnALiQcPsr6jLVv56FLR8JzNyL/nLTjmhGCcebUlAa65ZQ0cGD8lLCgI1V0h3\nO/I938RzNyQioapqRiGWQtHn23ytBWN8b9h6lARt6rvbbSBRABeAwkISZ6tw\n0B1Le/cYxn8A3/OyyWtGoVOh2K8tdAZz5C7OO9nnLcs1VlOiHp6YiUv3nRch\nLREcchmrS4qXeMiS4PFVeLrPYrApgL6j+E/q/6Jr3GGFk77RafEmH9/bnnHg\nGS7p9RL7MdSxxuRQUqLNMtv0q+2mL1STXNgHhnS2Y4vt4whHDtq+apcqxrW9\n5O5c\r\n=oDxP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c2852000d.0","@material/rtl":"8.0.0-canary.c2852000d.0","@material/base":"8.0.0-canary.c2852000d.0","@material/list":"8.0.0-canary.c2852000d.0","@material/shape":"8.0.0-canary.c2852000d.0","@material/theme":"8.0.0-canary.c2852000d.0","@material/ripple":"8.0.0-canary.c2852000d.0","@material/animation":"8.0.0-canary.c2852000d.0","@material/elevation":"8.0.0-canary.c2852000d.0","@material/typography":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.c2852000d.0_1595883581613_0.7432220740468172","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/drawer","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.f86f83f54.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f50990dd96f1494410390a86fd6bef1564130c2e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.f86f83f54.0.tgz","fileCount":48,"integrity":"sha512-A5WGH/9dYh8EQWjjJBjlJ+JuQBNtSBOjLGY7a1EAvj1U97O0GYJXGxIQN+6e/q4qb3NN9mBkznp6EjzgUYds5A==","signatures":[{"sig":"MEUCIC+X1vwMZc2cJnhW2Nd8m4YHrnTry/zmTViAAlXgKlg0AiEAwcGir0TBu5NdVby2gpUXeuJav13KvaGli12eV1sYFt8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH01DCRA9TVsSAnZWagAAJSEP/0djdd5X95Ahu0gm387D\n2Lal3lusOgsUONsup5+81wZSjlUuK98b8D2zF/xWDMafuJq4UTcYWfVdGR7I\nI5/bI52tM/sDJFKIvu5g6V/XHRbhnIch+nzT7fIpXQ08hZ5qgYJ5Y1EmJ7IF\neVqvYYoFcqPMRCppVmsPsSISFymvlWt08rUyDEnYujzkmuaDEqaKFre97nLo\ndC+dnn2IAiyZVdZE6gFOJn/WgMaqoIdH2lpln/mWCY/Ez2caRFI8aoRwa480\nxktXNWM/BSuSS06gPb/gcKU1ebUp/GWi0AKFhiMpMmpOJLNMXRcDqRhDLDx8\nEf8uMra9HG3jUiHOTTLE/y4g5pyd1jrppnD0XmebECNBpK0zD/EeZQBb7MDg\n4aaek4bjA+h8nKfpIVkI15ioDpGUbjxnMIKV3Ap99/e3gdnk2dkNOyrnGD5y\ngg+rXrXyoYZ0GOBeeKFkHUuL+sGn0GuqkwnfVbv98b7F1c6mwabAXOo6+IJ6\nec1zUX+VHgj0D3Zkkn5/dwPuTo2aBUjIUeUPYepFyY4Oa2H1npsT9mUrRlAi\n4X8CpZkWwTMt109FDD2oEt9jZEA62tvLZqsSvGZOpt9LcxKy141WUdSpjRXk\nFK3+Rex+mNZC2gql/mDoP61wHah1FoNg4vpuj8kOdl7RsFhdJ+yG47dRHS/n\nQ6qT\r\n=tHby\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f86f83f54.0","@material/rtl":"8.0.0-canary.f86f83f54.0","@material/base":"8.0.0-canary.f86f83f54.0","@material/list":"8.0.0-canary.f86f83f54.0","@material/shape":"8.0.0-canary.f86f83f54.0","@material/theme":"8.0.0-canary.f86f83f54.0","@material/ripple":"8.0.0-canary.f86f83f54.0","@material/animation":"8.0.0-canary.f86f83f54.0","@material/elevation":"8.0.0-canary.f86f83f54.0","@material/typography":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.f86f83f54.0_1595886915205_0.46821385604448396","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/drawer","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.41eb1684c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f093f39f88471b44f1b5206c150f3b81f0b16ce6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.41eb1684c.0.tgz","fileCount":48,"integrity":"sha512-o8DTkpCPBQndLiRwEIvKNqiS6/guuC32krEQcTVqhW/UJF391Q0O7vV1PoLqav4GiMmkSd+xcRs3P2n9iw6Lwg==","signatures":[{"sig":"MEYCIQDfnwDbWUzek+/6/u86dK4VFBGnEzuu0fF6Tz4CufccfAIhALnmdyZtJkMWjdLOVcjrlLVIlol6leU26GLyUIBTXP1A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGWwCRA9TVsSAnZWagAAhbsP/RL+Em6SwYemDWaU8OGq\nr8ZoxBsCY5Ewzh3qRYNVEvgFD2U/DvON2LmVDynLOJ0d0ls1wHUxHGAeVM03\nT7NSMhkDlHA31SxWMWEx18Y9b6RhLd/rQrVa9a20WeVlQKX9rhiqbsBGcCGa\nXYpMiWjDG4uSwnwsQrHEhG8WBnlVSxxlW2exJWlmIos3iEAAaUuXpBcJGksy\nTb/uP78OYXDUJB8GV0DnU9pE5RHlsvtKDtOCvSyN8fLtbQXTf1+MRxsFpmsC\nhfdYoyJC3qwD8YWxGufz9YKL+oNwTPrc+AqdcFe4vJEDMuNWkeC0lRnjoXWz\nYJSByO4l5ZK9S6nz/Wi8Yr5v0KO4ru4HU6wu6I0BHEcHqV+zSHxo18NuXK5Q\nTLcC86ySqt+MyEd9AADNoM8MuavZ3X6n3WhziRuKQvmGvqSUd47WyZMd12Si\nx77lHiPx16pZui2pvGmsdf5ht8BIz8iXmleUHbnxMit0ggQvyBSuEN9y4dpX\nxX8b5EUtoJE+YF3rEvUh39LykVj9c8dm21UNJIt/Jw+jLU7aiCG2QULomprK\ndIi7TugqmqWGIna/GwoZU6jythc4qAimh6ogIFSoTN9M9CxIJQPcW24kizPh\nTdVlcThlyHQWaKB1UT2Emp7BbfgzQEqiNJTMTkvJboOEm/4ogjKxKN6EwFH5\nn0GV\r\n=4bvh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.41eb1684c.0","@material/rtl":"8.0.0-canary.41eb1684c.0","@material/base":"8.0.0-canary.41eb1684c.0","@material/list":"8.0.0-canary.41eb1684c.0","@material/shape":"8.0.0-canary.41eb1684c.0","@material/theme":"8.0.0-canary.41eb1684c.0","@material/ripple":"8.0.0-canary.41eb1684c.0","@material/animation":"8.0.0-canary.41eb1684c.0","@material/elevation":"8.0.0-canary.41eb1684c.0","@material/typography":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.41eb1684c.0_1595958703472_0.00022654664667731694","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/drawer","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.9e2f6c450.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"083f38c399d5668b1c9a7e5ef5c395e3e0f39c8b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.9e2f6c450.0.tgz","fileCount":48,"integrity":"sha512-kPKVL7cc1IaQARgilJTHhYRobeU/0zuxjoJd3Lq7sa2Wi9uWCxjD2xS7xRpI+hPsuM34NWF9Eic/OVvv707DYw==","signatures":[{"sig":"MEUCIQCPBaqQSb4oJX3InUzXup49LG8l6x9nPJGDqXVODzHNRAIgTZFzkvGFbbp7wcu4Ray3x+gVUUWpi+wYJL/jExbQ00I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKlhCRA9TVsSAnZWagAA8lQP/j070XUEsGtmcJNcGZOf\nuvvxJjhYde0KOY8rJewA2OFtUoKNWSWaEYvcyhEs5SbEsSBPP34QF6dDqdJ8\nray3jwg7v04qDzt0KP6YPlmX9mM8RPZZWT07ryfHV1lWU8aXLg+5fU8jszmf\n2uwKdLz0l3r9YKSRKUNJ3nJj8d7USN8YV0SGKaTyvZy9YRPzQ3qDZtSoAIXZ\nGCk80vsShjTVgEx+6utKIw5/ySpackfWKgdFdW95OLAVpgVhD08jA0Hh0c1P\nIRa8iRWFnYQjTrIBHdqaUM8818c3UHWaKghrMPQ39n/vfwnAC/ISFJ1bXsJs\n4KTb6vqMogyAo2ayo//T25ImYFDC5tx/uRXcfdEuymcFr4q3vPEC+LY4Hhic\n0dJux1GwnFhto3xCACZ4fsGHTP9QvqmAXttTyR8Ts/3juwJKwiRI12Jh3xMC\nAQiwshPxVpiDstqXx4vVowY/46Kg8nlqUjJ2wrUIzUgaqwoaUzQswNwTklY+\nPc7IhiK0im+rPp28MdBxFlOnD9OTauTz4WBBsBe5pNpsDDoC4swE52gcnCob\nBUK4q/um9KfxM1CzUJA/urMRxA14HIMilVeCoP5eI2Bkz7bbe5Q2D84H9pBF\n765jis3ymX8ggMVFojoIIqVypGGEwAPq+VyTiCDEPJHLu26N3ismUBdyPIUU\nrY6m\r\n=wWwU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9e2f6c450.0","@material/rtl":"8.0.0-canary.9e2f6c450.0","@material/base":"8.0.0-canary.9e2f6c450.0","@material/list":"8.0.0-canary.9e2f6c450.0","@material/shape":"8.0.0-canary.9e2f6c450.0","@material/theme":"8.0.0-canary.9e2f6c450.0","@material/ripple":"8.0.0-canary.9e2f6c450.0","@material/animation":"8.0.0-canary.9e2f6c450.0","@material/elevation":"8.0.0-canary.9e2f6c450.0","@material/typography":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.9e2f6c450.0_1595976032942_0.6793386733670148","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/drawer","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.e6950b55a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"040d09c42af1f26ec6f9ad2e0e155353911c0058","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.e6950b55a.0.tgz","fileCount":48,"integrity":"sha512-LvwQM2JvEBybeX3nZpF5ViztBy2f7JNlluIK0CZH1q0um1Ms6bvWqfLgd/X1QL7zx9GRrGtn+X8Kn6f7MOpG2A==","signatures":[{"sig":"MEUCIAbHckjQompqiH5mb7wi1NJbKsgA5B+IMHBaGPF+F5y9AiEAysU/rjBzHCmOUnwMk/E/WxatRJek+DOx2REqu9Vild0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKyJCRA9TVsSAnZWagAA2JMP/jA0MsaZd9CVzY8QMacN\nqZ4p3J3kyab6IS6s4SUNRICak2Zg9iJ6461YyITijt+qDWNwRG0+lULGOKyT\n1caje4TjeJJNY+Bz2G6AInsbsT2sl/hvI3wR3sEHWewXiPVA49/CF3Q690Ij\niLiSIxrJrfnllGZ6QJP1ardIQjPdPU9rdwp2ExRdVjLbYK4Vk41GNBWkS/ZO\nA4/xQIL8k3E1ZNRXx2bQl79pavG5UOi3eEo79hPgSCbg7r7STUgXpz9z2Y99\nV/kNBai4hQ/uXAeDxYRj5OEjIaCQ2c7zvjlMSz2yiya+dBB6MXNZJV2s86l/\naEDrhNm4UAmFy0CcMgx63if7fc6bU1gr0yx3DEfOMCzyja01nmQCgH0V3a6f\nztCaLNbnVEHfZ48PCfuKkqG93nXQo7OqWIWysxZcFisEVWk0X79IR0uX21OB\nOoekIPDY5tm//RREExaswp4BilcRisMEe4RAbYsXeLYBc/Ni6qM95iVxZ0Qm\n4rgfMs22+jKTr+juPR4q0hNO7Cqwm/N5EVZXtUd0FV0rx5znmEoBIA5HxipG\nfSZ3TquvBonZ172eo4i9C8qb6StgUb7oJtQK6oPjfWYG9ZyCJUS87zbrSXOQ\ndocVqHP6ojxv4sZi+dCQHfy9xhYMaYUSu5mB12t2uJjw6ID4zXT6oeRBYCKU\nxPs+\r\n=SBPb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e6950b55a.0","@material/rtl":"8.0.0-canary.e6950b55a.0","@material/base":"8.0.0-canary.e6950b55a.0","@material/list":"8.0.0-canary.e6950b55a.0","@material/shape":"8.0.0-canary.e6950b55a.0","@material/theme":"8.0.0-canary.e6950b55a.0","@material/ripple":"8.0.0-canary.e6950b55a.0","@material/animation":"8.0.0-canary.e6950b55a.0","@material/elevation":"8.0.0-canary.e6950b55a.0","@material/typography":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.e6950b55a.0_1595976840427_0.5577302946585905","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/drawer","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.5e51ee38e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44dc4578871cd412a960540d8c977059078ef76f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.5e51ee38e.0.tgz","fileCount":48,"integrity":"sha512-48SIb7IbERkFcHaoROH8cqQ0AC8ayJDruK0ObxXtCD3RlN7/w5UCjnHgaW/ThZJoNUtR2BOvuW034bYletdMQw==","signatures":[{"sig":"MEQCIBG02ED2+dB0mh9Y2dnVwEm5k8LQ5IlCDKniJZJbJVdWAiAVc0J51VEmOvHXlFdLkm5Zj8yg3NBGBbXZ85zHB32KVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILH5CRA9TVsSAnZWagAAdG8P/jmHK1EM6BIwSTumfixZ\nJwiJhvLHqOU5EVmGsA5fJnrv5rTIClCWXMImx8I8ljllvuHtlyhvM7Is1gCn\nI3qnqH9bSGKQWw8NB+JDtlrxu4+B5SomNnMxfKPuUJZwwX7+QtilIZPN4sgn\nhDbDS+1QkzwkFL7mBCXRLzKC4diY0qx9nwOqjqdmPYx+iElsUS9r+Q9Mf/Xb\n6Mbqae2yDZWnpYSlwwuwx+Gs9GD9+TZvTB62HUlKIwXtx9MyAbewNbQc55Q8\nEi2BXRspDYgAGVMPXj7BTvNbqnK2/i25FsaXmqhHQZVmiRN0CRHIywcfZBfr\natW2jKoTs4sC5pTV8ZzAFhWGOk+0xh3SnYtLwmr4vRPxAniKaUNSnWr/3zNM\ngEwsjPBV4MxMX0dwGEXwhUq6Hrv7EbCf8OBf09cR6+vkC/l+pydlyV8aLDjB\nN9OArwqmFEjaCbOg8EiKP3Dbpaf3m3KRqbB8tz1uGBXW3D8pJnV/1FCxhpP1\niPhsV7SKFN6lXuntA2sNzly1K4AjfOqPYo7Mo8ritTW8ptI/gCRNNsCsEAQ2\nBx9qLsliynwJqJvC5tDnnC3B4pB4FJ9RfcAEp00Br3T3IBF3e1yINmMbKzIf\nReJ3jEFDZQ2WEfXhGC0v5ogsVBDTyG6gCOf8fmvS6wWCBmmg50ClzSE4LMUS\nZyHk\r\n=++OZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5e51ee38e.0","@material/rtl":"8.0.0-canary.5e51ee38e.0","@material/base":"8.0.0-canary.5e51ee38e.0","@material/list":"8.0.0-canary.5e51ee38e.0","@material/shape":"8.0.0-canary.5e51ee38e.0","@material/theme":"8.0.0-canary.5e51ee38e.0","@material/ripple":"8.0.0-canary.5e51ee38e.0","@material/animation":"8.0.0-canary.5e51ee38e.0","@material/elevation":"8.0.0-canary.5e51ee38e.0","@material/typography":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.5e51ee38e.0_1595978232732_0.5272994500306869","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/drawer","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.a3898ffcf.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62303af40db1cccf7c89910bc056c87875bdb178","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.a3898ffcf.0.tgz","fileCount":48,"integrity":"sha512-3ui7yvmy83XiGm+xXyahvAihPYPROouOPyEWvfmp6DhPYaa/mxjxIX42+wn7cBxzSO22YA+WYWcFb8L0GWH/pg==","signatures":[{"sig":"MEYCIQDresCYhMa4A5yfZ8vOYFcdqUOw49b5wZCvipTrCWJjCwIhALytuM/od11CpDulIOJfNaejUNNAhvgEJp2IqwckLOgT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMTSCRA9TVsSAnZWagAAZhEP/2yyYd8aqQlaVMSQkjte\nbC8eYbbewWFLcYJ+3UYuD+ZHSYIYz2a5NF/iBb+BtuhPjwthg2hdFWHb2E29\nDuI+qxD5d7G6aABB9kOHbJm13kKJJ8yWDgCc02mt/68Y8LGePlzHeM6jBrro\nJLMxjufQ0AYPmYO8ORtjTIyJjHFPXSvTf1E1iB9ek+wpASl8YlS8ugTrgpJX\n9DZktO0pB06PUMK6grHwIuCwj1+J9En3Fb8xo0sqseMXVQ8ttOUC+Oc0XVUB\nzUiZ8x4MNFEbQ12T+8ipOLR9GgZkxI1RDo+3OvjRbRhDvA8cMIM4R2Dlq5ld\nb3AieqNK12iQZj0lNC8Z0NVFzNChXe1ZQPAtIVAyOGxgtue7/Cxf4vfyuBls\nGqezSvUPsTqTE2Xf5Pb/oHf6z1EXKxj9jtXkrI6FBE53npI2eibEHJ5F0nHH\n3iY2WxkoVNnrOYcWI2qhp0gvZGKvceXY1KE02nTbnPW8owX5CwPq3DYJhudd\nu5NOUvrK7jtlrzkiflek2/jBQvEHEPniQOfLt3Ag+//C5uM+hqKL5eEY6e1k\nKPrMf9Ah9uxq1nH55qV5/4f5N7QGzo892LdNn26+hhnucUFVzdfFretdaRYT\ncfyeDuETGw3Q64VYh4pgbPgK48Q+kAsX5BdGNH+SZCpqpqO3U9Oa8Rsv05kD\n4gDN\r\n=ojmf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a3898ffcf.0","@material/rtl":"8.0.0-canary.a3898ffcf.0","@material/base":"8.0.0-canary.a3898ffcf.0","@material/list":"8.0.0-canary.a3898ffcf.0","@material/shape":"8.0.0-canary.a3898ffcf.0","@material/theme":"8.0.0-canary.a3898ffcf.0","@material/ripple":"8.0.0-canary.a3898ffcf.0","@material/animation":"8.0.0-canary.a3898ffcf.0","@material/elevation":"8.0.0-canary.a3898ffcf.0","@material/typography":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.a3898ffcf.0_1595983057987_0.21292455793026543","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/drawer","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.bc5cc6c96.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4631104f85fcf16986f78ed1cc036d827f4691fb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":48,"integrity":"sha512-Nl19bsi/TajyGeMY0WpYI2DwNYimlWRnffhJfHRtIk45J8aYwDAcLOBtbA4kHoTXSceVKF9F44K1SU4lmCKedw==","signatures":[{"sig":"MEUCIFrbgAhQ+uiA4GWo3f1sHTm67xTQ+c8fw7eKHCATHXZxAiEA4ALKpkJLG/sQn5AVuZl7XBTNOPMLd01jFJn1/Oy5Pf0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMfWCRA9TVsSAnZWagAA63gP/0Its9FzRe1c4nlGcGwi\nk2yUoT9cCEfcCSQEz8A8vu2WFRjH2gCeqlnrtB3IcEFn/OxSgEfId5fOBRGv\nakl+Vm7R9KxxtI8Pqr7lfqtKGba2dDQ5dq1D0g8JKttNSmjIRuGKsUnt0EoH\n4bZvls7hfYVPg/sekMuhNEsdCid9G9Dea5scJx1EEN4E6nYYkIV7D0u+Jgi4\nz6asSGgR/Ujr7uYpjGekrOJ6mr4tX3IZYGrfdex5CfjlTNPAwFppvRqgV08M\nz2Y8sTkTa5wkdFc29T7E3f5S7NjctSmaU3Bqm20QRhXmfcowyjnOMfMpXRku\nEL5McWpO8kaisYNSSRQJmF7JbihSW4ssHEE2yMj+4YUbTkyGv0F3xk/64yKJ\nuPau4qC321q6BuSywHLL6JVabkIl9CuLY6U5e4wAuBo+ypKyT3Wa8jtlAt0l\n2lKSy800SXuXpduVs3hcRKMno+IEFl+2zxZdDt4SUS1OBZUcI5O31827dslX\nRJ692l01sjQiId8i+QQaOBYTnAIEABHHQhpE2WwJZrJT0fJhSv74zhNu2mXm\nZwHpO8BAjyhuydxlGTQ1s30pdsNX1XeMPIfwtgXCxfeKWl54zmb9Kq6a0A4N\nDfOtHdhIM2qpCgPXoS+avgjoZdJSD2mRN8kLodsgDs1rVyV/FtA3cx+IMauy\ntj/n\r\n=3sVr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bc5cc6c96.0","@material/rtl":"8.0.0-canary.bc5cc6c96.0","@material/base":"8.0.0-canary.bc5cc6c96.0","@material/list":"8.0.0-canary.bc5cc6c96.0","@material/shape":"8.0.0-canary.bc5cc6c96.0","@material/theme":"8.0.0-canary.bc5cc6c96.0","@material/ripple":"8.0.0-canary.bc5cc6c96.0","@material/animation":"8.0.0-canary.bc5cc6c96.0","@material/elevation":"8.0.0-canary.bc5cc6c96.0","@material/typography":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.bc5cc6c96.0_1595983829817_0.6432704807024516","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/drawer","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.9bdeaf928.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b07a2ce7dc31f6cb5b696236b5d75865224c3b09","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.9bdeaf928.0.tgz","fileCount":48,"integrity":"sha512-8kFH9JwmxFwWSmmco/OXv87Ufc7TxWgZxSjyCnnZl+bWH1yEx1BObDISjMxo+A4BaM/vbeW8FRflXKqHMBwBHg==","signatures":[{"sig":"MEUCIAdwUparCHiRkiCSKi9d11+g+Qzxi4JuUWjmKllXwNn6AiEA4ZVpAL9j5FZUTFV7pMJUk3CiGn+y0FVyJczNlURD454=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM88CRA9TVsSAnZWagAAEywP/1V3LJieuwc1ZTCzfZAb\nCyGCvXEwxqlS0MZveI9e1mlaq1MjgisrwpXt5Rg/U67FGhDWWpbx3r3zLEDA\nZRoGnl71engRrUFcJY2ucxPhwZ4p+6qv23r/vKpJsCn8/skHRUyVK9Gz8/tP\nKJwukGgwwIwpIrPmF3EfGONyy2qnBxQNzDm4CDj89WAExkmp/C2iyHbIPntm\nxxEHB/atRW4l28R6YwLhoIQVErhOVjE9V0uu9b8oV95/YLDYr7hPj41jTRlm\nfkW3xfwlh8QG0dVxNgUN58IF6S4Xij67MsMHmGKgYGLLgW3Sorxmr3VprSgP\nHSf3rDc7dM8aau3dM4t+wHKoHXM/cX5I/UEd07o3N+FS8z0qWAORX0axdC3C\nn8dIgwnVULdQrz/359RG1QxSbkpFKvyRNnsymXzYhzn6rjvrJzxVfsZLIAde\nUt3Uulty2zfoKb0Ftqv707GGU/5fIOpoW8VX6gzAfSEvvBzJeGKb4HI0EsF/\neKsX1nVPqjSUDqiK+1cphpHRAB1EdUB6pjMBdRZNy/y/+Uyz8LmMPxLwFe0+\n8ET5ZxkVyA/DLosD07lch8b6XPlMPbi2BOngahsEt/PlI12WjqRmGHJH2OJ0\ndS+sIAtGfcZ/wmtw1z7fqu8xPAK2QeKkl+o6clEGfLu22TmYvPo/rhpJ6LDm\ndU0s\r\n=zCR7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9bdeaf928.0","@material/rtl":"8.0.0-canary.9bdeaf928.0","@material/base":"8.0.0-canary.9bdeaf928.0","@material/list":"8.0.0-canary.9bdeaf928.0","@material/shape":"8.0.0-canary.9bdeaf928.0","@material/theme":"8.0.0-canary.9bdeaf928.0","@material/ripple":"8.0.0-canary.9bdeaf928.0","@material/animation":"8.0.0-canary.9bdeaf928.0","@material/elevation":"8.0.0-canary.9bdeaf928.0","@material/typography":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.9bdeaf928.0_1595985723525_0.5722412563730659","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/drawer","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.fde2c1f9d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ef1b88af03efbc101cab973c56d558a219c6a7a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":48,"integrity":"sha512-uc/wfIW55AVEsVvoFRbJxGU4/vLfYOyYaV6lWR5ToB3JIj0v7ycwIvbfAoWlaS+M89LeYRoMZJLHU3b1wVG9HA==","signatures":[{"sig":"MEUCIQD/fkT+azF3mVNjVmUVO8bOXbMUTIiXm1S7vGMRaUZAeQIgLWN+CG9FerkKF5LkCO6KEnu2H2LmZrZnEFtOQmfhz6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINKVCRA9TVsSAnZWagAAUA8P/1iOTe00NL+XDzUOjRKi\nZXhafgoNt/zTDYleQ7lpu+XKfy/6J1jNkyT4Vt77+GvTSGgeqSPrIcCxQ3bX\nrTlwrIhYg76ZwWmKsOLuhyO4gyRnqZYQNFf7W+x7pD9jr6IR1HAZ6lxGOjd9\nrUKR0D8NvRRe8A52ix2GWA6/OsQ/w/JU8cJkcEKx/btNpRI0QhzV7IDYQ3Vc\nixypBMLV+cPF4C9I4t54bgUCQsh5kysOjV7q8GwTc3GAZ+ORZMLZfjg0cEUv\nPTTxzz+zWU9cySsZ7Rs9XT247zm73Cm3KevlBkUgLoqQNUoAuG1vZJWDtAwV\nHgUtAOIlw0VWNzLjVbUeopOYFurj8zLnRF/yjDCWB7ckuuCrkEe9kl3cpkXB\naLkXpdP+gpEpC9KN39Hv/OTzOMNHl6Io4TL2/pJIplhy8P/zUMD2CWY37ctM\nScdEYshDGceVZUQs7CGQ+sRQUcu6lZfYY+gQmqFdzNRPLjBdu5vJI6Fo3qcm\nwqpocXUV6yN22crkhzyxF7vptF3KLx4JsoV1PHqZQ+CWjOVEfaxefZnH0sOE\npVm16tPGMnaa8M7IrG2V7G8X9ZFFSmyeXSsaqA9i8mT8QVeu7kK/mF3wGn+r\ntlQG+eLinPjZJxIAfSjlWjSnSVlY/eVqrCAYPWfmxuErQWWXjmSBNe7NH3ss\nh0Cn\r\n=uQB0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fde2c1f9d.0","@material/rtl":"8.0.0-canary.fde2c1f9d.0","@material/base":"8.0.0-canary.fde2c1f9d.0","@material/list":"8.0.0-canary.fde2c1f9d.0","@material/shape":"8.0.0-canary.fde2c1f9d.0","@material/theme":"8.0.0-canary.fde2c1f9d.0","@material/ripple":"8.0.0-canary.fde2c1f9d.0","@material/animation":"8.0.0-canary.fde2c1f9d.0","@material/elevation":"8.0.0-canary.fde2c1f9d.0","@material/typography":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.fde2c1f9d.0_1595986581025_0.5866656883363015","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/drawer","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.6b3876d5d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd5f15d28f16c31ada19fc1934bb85ac4881713f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.6b3876d5d.0.tgz","fileCount":48,"integrity":"sha512-5TY0Xzlxy1WVxGvp79NG8n3d0BMLq9U7seIfVg9OhOxsZXyoUsCR9NTOohkr6M261Kigxdwryrc9ANvwQ6xhYw==","signatures":[{"sig":"MEQCIECMl12aHs1QdXynpGbOL7Kk9fbaR3BoQUtqGnxkILa2AiASuCyBUnbA1Vb9uBTUzWJW4iMVfcu/pZ1iBqNn4Hc1ZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINN0CRA9TVsSAnZWagAAdXwP/jEOxDn1vwPTigMgaPRc\n3AdkzRqgkiAUpRF04OHOc87qE65jkGlxo4Qy9asFADt712D6lwjoSUIwcGX+\nygoujAMku4I1BZXu7uTqXUlpecOgBAALF4tFJpVUQm5vZwnEut1OkSbG7dtJ\n2iO5JH0qTiaPQx330Z4NanEIIvmIjwR8oysp0tau0DRG439i0bQkWvVUg3L8\nnOMGyiH/wO4N9AzvFPu8myhjZM+Fd3X8w6ywk3R2dLi3zeBpd0IZMz8U1tdM\n0wZOO48lcpiZGbfRH6Eq2GjL24Ut0NnP+L8A5o0ssdIXfUX5/tCNqWQsoVIa\ns57GZE2IlCCV2GBC8VsceZjM0dw63NHl6uqM8lGqayZ4oo16WkOaB5JWlRmM\nKXBZpJgfBWE1EGvB27OacM23kAIKri1eqXbG1Nla96cRnOLpJrC4a02BS7Et\nZkI0txuY7qOhqCOREQ80Kq5uny1iiMkeL2vcW+Xh4X2eHEYj+eionx8RdVMX\nAe24CZvbKFF4/+/EeTiWka2REZt4+Bl5Qa+dWF95hu/0AG2gdoX9WNuQ5vlO\nVDmyjgPbq/IbbtHZRl1dCxrW3J9U9A17jnk/V20/VnmkPq5YFgBYxZX+SOta\nYI4ASoFTXJ2iBYNucZl5M1cTCSkXDQaVmjnJ/e2AO5CNBzGvJLXf8wvXFYpX\nq0PF\r\n=s6f/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6b3876d5d.0","@material/rtl":"8.0.0-canary.6b3876d5d.0","@material/base":"8.0.0-canary.6b3876d5d.0","@material/list":"8.0.0-canary.6b3876d5d.0","@material/shape":"8.0.0-canary.6b3876d5d.0","@material/theme":"8.0.0-canary.6b3876d5d.0","@material/ripple":"8.0.0-canary.6b3876d5d.0","@material/animation":"8.0.0-canary.6b3876d5d.0","@material/elevation":"8.0.0-canary.6b3876d5d.0","@material/typography":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.6b3876d5d.0_1595986804201_0.5363398930215668","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/drawer","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.30ce17873.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b705f4e0b454f3b1bb7aec9162b3557bdadd9cf4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.30ce17873.0.tgz","fileCount":48,"integrity":"sha512-98BPSqIh/O5uFVpEVItoMM7jilcQlxoAqx8TCELHjqjos5jY5HBs7OMVxqq5/pb+uAbtseRXVDc2Pi4s23NyJA==","signatures":[{"sig":"MEUCIENyu2xKZgqSCm0LdM7fj5m+RAqtCDlCPDaqHnP7CsAGAiEA0/ouweK4Yr0TU2Qfyv2kaLwug1+aBp64oCltgyeikq0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa7kCRA9TVsSAnZWagAAvCQQAI4RzXLEVxhanmuUjE7Z\n0KQdlpa9AGAmBxyp/oFlbwgIbHY6es0Ws4e6ONVATj5tBnSgRTwbYKrwRXSZ\nITYOPD61ly1xGzuEDQ1o0onbQonJxDAt/RCGT1dXoEssZH/uug2jokMFW7SN\nTTqWx28EQrlVfDggK8SNtVVjqeuaXtXFW7FJgiNjU/HSfWf4c/EvW4BMD4pb\nWonE8frodb9l/g4wFFPp3FdF/XymLjkw0rzZmSm5VwzXV/eLJre5umI11R7E\n2NinWrj6dPzNhMJDgyblr/pjOl5JhNBHNiplnKrjMLERyQ53djWsVSYqvb3g\njVjGVWeoZg4V0IKtN/tm3ZOtqUS7OwZn0SryVzoVqkmEorRIksdd7DWf6L9l\nkfjIVT294leMfbRyaetCbp167I15KBFaRsUe2o5Kv4qNzWoqJUtuQofWThyW\nLJEIhZfWKbbAWF3/e8qjJXb8yiJ0ne8xOIP+GIde2HxbWeNrPl3rAgYamD9i\no3hRBTzHmzcIkM75YX8Tw6Yt31HCf8RRdAolgt49nb2fQNNXFs177chY7Egk\nQ8HD/k4vATFXaEBG9XYiIevkjjAhZBamMvhpbHCykP2z41PjuBbMDAWudHF+\nJ0oazamDMSiO1gbP/PNqHPFm4dnI5A2OY4edpfZHMS6uZIxCoX5HB16ccpO2\nKxR4\r\n=XgIm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.30ce17873.0","@material/rtl":"8.0.0-canary.30ce17873.0","@material/base":"8.0.0-canary.30ce17873.0","@material/list":"8.0.0-canary.30ce17873.0","@material/shape":"8.0.0-canary.30ce17873.0","@material/theme":"8.0.0-canary.30ce17873.0","@material/ripple":"8.0.0-canary.30ce17873.0","@material/animation":"8.0.0-canary.30ce17873.0","@material/elevation":"8.0.0-canary.30ce17873.0","@material/typography":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.30ce17873.0_1596042979996_0.1341349923893791","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/drawer","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.f6bb43bf0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5160aa69ca9681a87f15c75d12d74dd1a073fbbc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":48,"integrity":"sha512-sX8Mhfvbp/E1MV0xO3oCJRuAkfPYxOvRNZ2ggTy9Z6CHqkxSPmVNxv/mZVF6ThsMwsncyqikFYi6LlrzRGxR2w==","signatures":[{"sig":"MEUCIQCs07p3E9cgD+RBtGFhkf7KcSBuobI8LT8p/pp1JM0mkAIgHncHLblwIXXa/6JJqkKj2hlasv0s95WB9y3muZtMT3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb9mCRA9TVsSAnZWagAAs6EP/0ARd2Ouh2D71Kt1FJLB\n27xjQRHWZJZiBhSp8hsLmrFAuwm8M0bYoYEpZ1bo6/xW7uTHs3aeOwpgwK/3\nDi844ZpcbJQba2KQzErFO31Ln1zKodM3O9tMRiFtil7OKRsjCcqQ2OjNV2d8\nZggoNqODSvH9XtXWfWzp6x83wtBMrH24Qglyn1MPiW4Ubra53DBGVOEunUaa\ngoosTXsbOkNw5asVYjxCZcO6u14wL/UApjUO9XBteeBEzGhSXDaFAZYh980y\nDCAXARwUstMZnNTHO9nWSRIwRuCYq6g0fe6sPCB3dXlBTXI5NWUFpi0UMP/K\ndy6qHJ+bwYQ1CEqlMQb+HGTBPoEBJ8+uSRhbt+DHSqvSz3d/snfpaqfGooon\nLraXS3HG4p1L8E2q0kiAq2EX6U7wKNjZSJwA7ogz+fVNAl5xDIINQtm9SkTg\nve9KVo1WI10WrNnV4fJsXwtJFm0yzZJZQ4Cmhny8DIJCbtXsaGDEcOQwvj//\nevfCUHJSzivazx9t1tHNNF/yGDylGMo4a0ZTz055gHTQ7opf2SNV248q+gEs\nJ30xMdiO4uHw1GgPhTGeEwLhWFfug99qDeju8OK0kz/r1iMgpJShZnhqG9cs\nKmJd42oa5E9fmI7rMTF49jeoi1knnMnGPNUk45ogagmI5TM1B4eIMIydXcWw\nV6Ua\r\n=knt8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f6bb43bf0.0","@material/rtl":"8.0.0-canary.f6bb43bf0.0","@material/base":"8.0.0-canary.f6bb43bf0.0","@material/list":"8.0.0-canary.f6bb43bf0.0","@material/shape":"8.0.0-canary.f6bb43bf0.0","@material/theme":"8.0.0-canary.f6bb43bf0.0","@material/ripple":"8.0.0-canary.f6bb43bf0.0","@material/animation":"8.0.0-canary.f6bb43bf0.0","@material/elevation":"8.0.0-canary.f6bb43bf0.0","@material/typography":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.f6bb43bf0.0_1596047205541_0.7928107412105567","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/drawer","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.6af75f6ab.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4ece458913e42d0a91303caa3d990762f40bfbb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.6af75f6ab.0.tgz","fileCount":48,"integrity":"sha512-kK9jL68E79UXMa0+pHQyjZnORZJSy0HqgWJc8UaymGav/AJG9SRycNTYeKix6a1hiGsAlZK80CaBsasqfXWl6Q==","signatures":[{"sig":"MEQCIHSda/cdEIwyc9FhGYi2cWB79EFH/22iKe1GzbP+ei1cAiBDO733u5VIKL71dnoF4uTE8BctfAzuW/umylBI6iWuhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg4iCRA9TVsSAnZWagAAy/sP/AnGzfcoxws0aRlU4Eyb\no8nX274OOwBNEQMn7tA7aL6uYyHx4RJAWERUKrkCyq2+O65HDNwIdTxaSLw/\n9+ipjdAcwdUmDRjQCx/ES9xZ5y+Q1e1w5UAVv34+03+9pMsA1DclDGC34+vC\nGxZJgN2JZAt27q7u/TUpZbWXUTM1g4k9cfdfmWLa0sUcICJtXN4KXaB4fyjr\nPq8Xt5woFy+dVuh2NQPj32nL6cCKE7lKf2Wmof6r2FiPypALv3FPA8dm2U/C\njN58YWPU/9op/yjo16Xs+sGBIDyuXCvPJdRt6HqkoGxFIv3vF0MDerT3/r26\nSoglFrxAWRj0XIynPQbjnHEch+NJv5EOfuS7u/oS28Pw+FrcrxtWAGO39DIg\nP6PXLduJrj3MLdQNZxeHjGorKRlhnaEVsk38V9wX9aAADXBB8Yin3T7AFlxQ\nCIkeA76sLWzLIkKdWkG1fs5iDU7idDALbkIVc19di0ijfwQBx7RGas64NwFk\nwguu6TSwwZ6EdbiQJdtiTr3a7lWvg/w8leWVLfuNZBrlszuKkgYqxtsVsYmh\nK1HNpvaYJBPUNV5IoGBoZtseJCt039E/lCjvxvYuY7Of+W1vegrY8SMhm/VN\nf0WcqYHQtYt7TGrMoNGLr2afVGejivP2pC0bYQlKDmWd7yvoPbpdvZhxuu/F\n6elZ\r\n=Jzwo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6af75f6ab.0","@material/rtl":"8.0.0-canary.6af75f6ab.0","@material/base":"8.0.0-canary.6af75f6ab.0","@material/list":"8.0.0-canary.6af75f6ab.0","@material/shape":"8.0.0-canary.6af75f6ab.0","@material/theme":"8.0.0-canary.6af75f6ab.0","@material/ripple":"8.0.0-canary.6af75f6ab.0","@material/animation":"8.0.0-canary.6af75f6ab.0","@material/elevation":"8.0.0-canary.6af75f6ab.0","@material/typography":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.6af75f6ab.0_1596067361523_0.3528233365969835","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/drawer","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.42d7a65aa.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b487e096df7dc03ed3d9bae85cdd193aa58a8f2a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.42d7a65aa.0.tgz","fileCount":48,"integrity":"sha512-4Fw6H9BI3f6AwLbz8xBKIJ+zgyL04UKI5hWpINetzrgUrhbexmbJ7HM7kbvJ08nXNE0u0a1+XSZNiYRX9jN4gg==","signatures":[{"sig":"MEYCIQCKyScHHh/En3cVAA2vum2LivAjdcQcxDdxFWz5J486dQIhAKnzbWfqbrxyA7J/E/k1K/kstw8a7l4fnvU2fEPpm8VT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":916061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhBRCRA9TVsSAnZWagAAiNkP/iOZjA+D4gC0u6/151Qj\npcUpOBx5y2bPDq6XbPc/+OUqajHFHxlwra23fjgnnEKKVSE/9rBT2d5DCmi/\nHQXorK1TkBSjK7VEoOsZZ5uRMxWT5PW5K9ARfGEwstAep36N6Ndoy4moD1XG\nsTR5gr47Q8fcsCNPysON8EZfhWYrGwshxAI+wH1ceiVpt2nsmirHpVJKBBCq\ngkNaiAiDGReM0EtvusE8cibA9P8WkCzX2UbKO6TtSOMEI93xM00Q32Y8BaBh\noGl4sl21vOX3E8kEs2CxOVQpsPzySoBiWNxfGmldVefDFB0XmWEaMpWjNPZh\nq90adg84pLDIehnIVEIP4kcJTij6gI9TjDTUMGo5ANy9pObpxgPSBB35H3+B\nhGIY4VHKu1JVprnMO6264PrtxcK3FMnRTIJC8mzT96KmmW3Dl8PaHinf5zcS\n/krYWcHtosE4CNDEuu3SVRJj2svvkpMWVscqBiefnBfMRYHRTvQjpm6CdLAw\n/lRwq0B/RXuiRSds4/d8yzsRGRLks6ZooG+WNP/6GoUsVYiIqnAw69WcRC5x\nJNcufWNU+FjcJg+Wv4KaH2i2vjFy4axGVR2GZ+a/b4RvizIimAwXCgy82msA\nDLhVPGPoSiasXRBtUbf67APJjQ5c4sbY/pFWYimV+b8BGuCejoSU/QW/qFT5\nxjEH\r\n=aF0A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.42d7a65aa.0","@material/rtl":"8.0.0-canary.42d7a65aa.0","@material/base":"8.0.0-canary.42d7a65aa.0","@material/list":"8.0.0-canary.42d7a65aa.0","@material/shape":"8.0.0-canary.42d7a65aa.0","@material/theme":"8.0.0-canary.42d7a65aa.0","@material/ripple":"8.0.0-canary.42d7a65aa.0","@material/animation":"8.0.0-canary.42d7a65aa.0","@material/elevation":"8.0.0-canary.42d7a65aa.0","@material/typography":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.42d7a65aa.0_1596067921349_0.9267561547264183","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/drawer","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.85abdabb7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7246a6155e0bafb3903f1b3b23d01e469d5b2f81","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.85abdabb7.0.tgz","fileCount":48,"integrity":"sha512-fdCcaRXAhhewHszc42bKX3QYKDVf6GJXowGMESZHzD3mKFEKITUZC1Cc6gg8bbmMP9hoVHWvnt3V1k13XsHM1w==","signatures":[{"sig":"MEYCIQCFvzXQYAB9eVaVgyFgDuICOqPHuBNc4xHilemufApPXAIhAIv75C35fvv1P+tB84892neE9fpmZdvoLTC5GCeA+01r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":911774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhFgCRA9TVsSAnZWagAAw5sP+QBkr+bDyIVmXbwogldx\nCQJq+gfpD6WN4cJRkU4Hz6W0WNDzR2Bnwjd412+gTFR+3LRahYtEpunBXn79\nJSxnUX1KICWge4dqhaFH3nR6bdcygZxdzNucf+SBLe+Bt8aYKV3hYffSaTQS\n08+TV1yuJTxjO8syinbbl6fmpyIxWJHI26JByPfjGwuuIKjjbgioW/8zGBYg\nzznVs0v8YcGehW33JqCGbP+TZnFDa2Scgwvj4ltOC3V4mpNCDGPKMqVSXb5X\nbFidaTGzK+UWRkI4o53AuVidBwqrWD0s4lCc1QhR5jMY9XSjmNr52Aapaxfn\n9JGo3Srn+9kzqPDl+cXDnHdM6qs73HpdUYHk+OnHdvv/56e2+hTM+3BrbOqY\nbReaC6ydJdZPOo4zmY2+ZypgCficDaE13lBQs73c2Hod0/N5r0ie21f527bd\nKr1Qsw0RPKXQTVRRPfkTzhZxi4j0D8/F/8ucJ5zBEuNEmgBnFGyJYV1QWDRJ\nIL9cYCq8Q3fc2uwK0x9hLC/Lzc+KGkel50ya+wwOvK62xhhCrIUz2dZr720Q\n1AYRZZxiyFlu5IHeWQV35r4+BDbG8bPxPjXWS541IGcrxSXfWQrs2gRWrUtl\nlJvR6QQCFHb41phURN8Wk0FO+az6LmlbdIjRu20U1kt5BQ9bl+0ENtf8PR4q\nL873\r\n=pEIG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85abdabb7.0","@material/rtl":"8.0.0-canary.85abdabb7.0","@material/base":"8.0.0-canary.85abdabb7.0","@material/list":"8.0.0-canary.85abdabb7.0","@material/shape":"8.0.0-canary.85abdabb7.0","@material/theme":"8.0.0-canary.85abdabb7.0","@material/ripple":"8.0.0-canary.85abdabb7.0","@material/animation":"8.0.0-canary.85abdabb7.0","@material/elevation":"8.0.0-canary.85abdabb7.0","@material/typography":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.85abdabb7.0_1596068191819_0.8958882451474468","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/drawer","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.49fb20ca3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76952462a1837f2b5954539db416825eb34964b3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.49fb20ca3.0.tgz","fileCount":48,"integrity":"sha512-T40RBXhzbCz3NGHYJN+QxEuWe5liv4WOfbIzwXEQWNi360BOwsMpDJo5JSt/aTTQfNCVH4qfTJA63lhZEgIlqA==","signatures":[{"sig":"MEQCICFY2YJ8gpVgkipuK6URb/EgLFP1R2bNa2PGC+C275bZAiBB6PX68cnAJ82Edx2QWx594UqiKgS5MPS4co8I8vDM4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiJVCRA9TVsSAnZWagAAv+IP/RY6Od8RFmnTNfSinSfV\nh6WfL3kPtPVB51xeoZK2MniIiX8aSTH2X08JCEqu+bmvZD5Fy/J9kjY6nSuw\n97hh2w34MhyL8ZyGVg7pmwnq0+lqwcML4UzyDkV6wm+/s2pJkMAghZxFsIze\nCmE3mp+tjnMsK30841FlWK5OOIjtf7w45orNj7hP+/px5BTujabqwAqeo10o\np+GhIp6NB543njtEJAl+BQlBcmvVj0KVjSE6xVssGyAbBpfvMumuKqxTlz1+\nch16l4ZX7oQtSz/vhCKfNWazh3Z77VfMtgiZS8asu/epfONfo1N3viCgeFNa\nA+wn6fVj+L6ng1ICSGVWp0bw2SUAyTi+fDIKHDxXKUOK+ONadhgBql8H9SoO\nAlr/HBWgb9VY+M6SJ0MThDPdOiSk/X0BINDZLgfnB1d/BAemYZ7m5qsA0oHd\nFk7wO6SO0suyn5H6cLZy/n8T/3H3M78XBoR0RkXuWlpVTObK/ileS1sPZV/i\nF/Za8W1JujFHxNo1SMLu/xp23Q/HZ4h5/mRuYstZiWXarvReWMccB2VahyPq\n5MHM+gVQDZ2+SUR1LkI34x3Jmtjh0uozaHL6IbtdUz+baZ2FccZ+uhF5/WmR\nbE0EClPUC4dmJYlK7UQyn+engoPW9hc1IA6gnCZgF3FDIB74Y8Ppe35UqGFz\nWFi2\r\n=0/IJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.49fb20ca3.0","@material/rtl":"8.0.0-canary.49fb20ca3.0","@material/base":"8.0.0-canary.49fb20ca3.0","@material/list":"8.0.0-canary.49fb20ca3.0","@material/shape":"8.0.0-canary.49fb20ca3.0","@material/theme":"8.0.0-canary.49fb20ca3.0","@material/ripple":"8.0.0-canary.49fb20ca3.0","@material/animation":"8.0.0-canary.49fb20ca3.0","@material/elevation":"8.0.0-canary.49fb20ca3.0","@material/typography":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.49fb20ca3.0_1596072532787_0.30020182470052736","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/drawer","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.962d4abbb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0de7e6d79cca88311e23af2be6f7d8c4cc593c8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.962d4abbb.0.tgz","fileCount":48,"integrity":"sha512-Wr5lOwfcXCfHwj9xlF8ea6nfj5wviHCrnGgm9jolOshCdsfStEGUaQW9NXX+l6rT+5AzLiinmkaN4v/M7uM3iw==","signatures":[{"sig":"MEUCIEKeOAlQiCGFlnqe8pubIzXpSb0QRJQWfPrrmMfnWZbVAiEA8qWi87tRlW+S2WLGqj5A0yvhiM4AJkJvHCa4gMrkFpI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvEvCRA9TVsSAnZWagAA9G8P+gM7LDPqOBXtmRnstk/O\nGvBeJznbeOMD0TXi3hf7Oxlwj8NwVpOhdfCG5h/JTuf38RfpjItYpbo2IjoD\nSBeC542A46R8OG3a9VpeAXQp93/DqQcfH+WnwWXh4mMhSEaUIjb51EWl3jTC\nuGTgXiN2j9ECvQDuY32hcIcIZ0sIb2iONS/EVmc+midNesn8UUZOok7jBJzG\nonhH/tU17nX5mKbwmZE09GjxYtULofPwIptH8c0zU1634Gf6FUbDKVq4qPiL\nHqAu3wmTH62B9zB3gGb+QPgb8cX1Fgsb3FSgzk3WarL+Qyk9i5FGRVeGwBLN\nDu8YKOQx1sgWUdMvw8en59UKPxjivC5ll1SsjYiwEhBY1izY6x3XmoD10TKA\nBK2ygXyvvB2lqVRjjEbmdfwKglroVLZfbQeEsYUWJHb2YWeFayz5+0u+goND\n3TpP71pqSqGARwvzwHj6AIc9mBUmmzk+e0hjg20E/RnGKQUvyznwD0BsG5b6\nX9H0Jqcjp5r00e76C/3WS9AeVrcuj2ej2LISvpRlcGrpCx2NXcbXo/IoFV/y\n2FwoWPlAGHG6DeOIDQ12f46SQmO1pu5ySWckh/yTM0fkWod9ZWMQzxgiDtpJ\nioEvyUeHgUFrXpSfwZ9vuFMdGeIWpdHi7cKevWhwmxAtMCp5kGmu/crs2cuI\nHHpb\r\n=gBjG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.962d4abbb.0","@material/rtl":"8.0.0-canary.962d4abbb.0","@material/base":"8.0.0-canary.962d4abbb.0","@material/list":"8.0.0-canary.962d4abbb.0","@material/shape":"8.0.0-canary.962d4abbb.0","@material/theme":"8.0.0-canary.962d4abbb.0","@material/ripple":"8.0.0-canary.962d4abbb.0","@material/animation":"8.0.0-canary.962d4abbb.0","@material/elevation":"8.0.0-canary.962d4abbb.0","@material/typography":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.962d4abbb.0_1596125486642_0.11372026014035397","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/drawer","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.2fcee40cb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44861cabd3cb45a23a99f2f89d3511b4b7d7ae58","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.2fcee40cb.0.tgz","fileCount":48,"integrity":"sha512-pR4BVj0pD+HjixsbcQFIP5MvFSRw3Sg/KTQ8t+Y9iLhtW6UYqMhMzmo0jau3BiKNipKN1ItRS6YlZEu9kFb2lQ==","signatures":[{"sig":"MEUCID0CTXwGxqyEjfixrQcXEZJVC8NZSWhU9muLz10PNv7cAiEAuUl2z1edU8hXDGKPhgVH3pwFkumP2LDM3ygat6s7N3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwHgCRA9TVsSAnZWagAApUgP/AvWm/aedXLb4qko0Nve\nrL+zFEkBCEQhGs9V92FYQ/ScI0Qm3xTthQOBri587trWJIavXtPyJaKIjUKs\nAo3VKxZx7ojgEwF7plTYuhe/c6vhILOeU1ndsfLyHByXZERxQPghxiGtZ9lM\nhxwMdOTggP7sfOcrvUybX/0AJXQCwThtxdsJTVteYo+XnvIr5KdOH4rRNK5z\nie3W5fsQKgOeE+u2+Y6pYUlVONe9IpRvV3riftEJlIj5zpYYfAi2lWKsAkzF\ngZs3Ucvz/Anmar1y15U9LmGFskjpw61LoRrFHgGEB1HkgAv8QV+7rAesC4Ml\neCxULlqx7+jAKi0Ybf5oidTO2qQLSlq4xX1UKX34eA3X/rhDFoNEChgtzjbd\nkyLSaLowhVafdwxEPG6WN5M5N3mp6E6HHN7TssZ+42AtdluqpdG7UK1neXNO\nyViO5c6tt4G1CLkSJZiFps2shjZ50Ch7b5yLGHiV2f2slxtwB6YiboL6YOVp\nARWgFzdwZPDgVV0fi1L9BmCXiVDlDhxmRROmiCI4o/LvojKpuI3iwp1Z9X1v\nIwaZpyl4NgkS34WFgH4F/rdc5Dh2WOKHas724nvq0X+OHcdfLjSvS22FSbKz\n1eWw/tKdIsTkrtMEClvGtRh/8AiiCAkBJTfm57XnKI3f1PGQEYiYSSo6ySzB\nVwMf\r\n=X5tA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2fcee40cb.0","@material/rtl":"8.0.0-canary.2fcee40cb.0","@material/base":"8.0.0-canary.2fcee40cb.0","@material/list":"8.0.0-canary.2fcee40cb.0","@material/shape":"8.0.0-canary.2fcee40cb.0","@material/theme":"8.0.0-canary.2fcee40cb.0","@material/ripple":"8.0.0-canary.2fcee40cb.0","@material/animation":"8.0.0-canary.2fcee40cb.0","@material/elevation":"8.0.0-canary.2fcee40cb.0","@material/typography":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.2fcee40cb.0_1596129759622_0.6702097165276291","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/drawer","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.bd5987f5a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eec89009e3b066fce4d844f7311bf593fbe9f73c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.bd5987f5a.0.tgz","fileCount":48,"integrity":"sha512-YQwurkPvZtU0RLZoZD5LNUYpZlwt2YFVyh5qFI0oLku/IAJvkfcix/1UTZXp7DaOr0DMxwLNBT93xBLHPc2ZlA==","signatures":[{"sig":"MEUCIHwiurSmOz/ta/H9BSQ5jrmmiJ9iSTQ+DlN+bWb+yEbIAiEAtFcaBDVpcOBtc6gY9pCUXQJ7GQEYuZtselNrJoBQhyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwezCRA9TVsSAnZWagAAyaMP/AqDUkvZuIA9ppNBl0Xo\n4JKtLnNrTwdJG7mnY/ITbtBNEWKvnylUB6AVP6Qwzrg7fFwS4p4L/k/tW/55\nh+iddoqJdcW5AS9Aar3rrJjEhWGTtko4wBx5+HPk0Xg04M0POJySc4+9as4P\ncmSHpba2mdDLN89llpF5ZYMKzXdI9H0Yl3jhqpZxGb9G0ANVL1jRpyVgYFXl\nu4pI4umzWFKt7eyXe7k0W5pt2eY3yC5BwV33QXSVw0+4sHVTcX2cps6eUiWo\nSRYOpf6blRkfBQidgWldtuWVNdE34eK3Qw8HLCqJqhZP9uvoLaA5HU/Kg30u\nVqnmW/+Ag5phcw2MRfyvQix1sQyEWZ0Z6bSSw3Dvl7EqxElGJJWPPL9fyE/+\nMbFt302rPe67UmXXyxxY9qszM8PfyWMtQyPTzjPHI5PWoQLvMRmSJyEWRb+o\nik0ikM1lPqDbZjv4ec5SRcWtiVNkFrAvg4ukaNvI3iL9AbYeeLnCHagJcP87\nRx/Ybz0YYPXTIvoeZcndyn8zEp4nFC9M1mm42m0hBPJ34hZJgEOJlaZw+gWM\nL5hffABl20Fb8Lb23pyID0hQodY+zpb15xXjpphpuHrtoyLwG02fsM0l5MQq\nU/skOyowJJgW9YHOITEbLHcR6qxVvyvGZ5JEICyu61oLvtr/PVY4DFNaudov\nyCjT\r\n=l2Ay\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bd5987f5a.0","@material/rtl":"8.0.0-canary.bd5987f5a.0","@material/base":"8.0.0-canary.bd5987f5a.0","@material/list":"8.0.0-canary.bd5987f5a.0","@material/shape":"8.0.0-canary.bd5987f5a.0","@material/theme":"8.0.0-canary.bd5987f5a.0","@material/ripple":"8.0.0-canary.bd5987f5a.0","@material/animation":"8.0.0-canary.bd5987f5a.0","@material/elevation":"8.0.0-canary.bd5987f5a.0","@material/typography":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.bd5987f5a.0_1596131250578_0.516939432952116","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/drawer","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.005e86a9b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8af5323933292dae1a0a4f3320aff2cec8021e08","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.005e86a9b.0.tgz","fileCount":48,"integrity":"sha512-boI4n28DixgieZ4FTdQYgcU2VeQ4ss27LA3tGp0WT+CdYs3KaUq6U9c/d+Rv2+o/ogR6V3bTB4E+i+rHdoZKLQ==","signatures":[{"sig":"MEUCIDFP9o6vwzjnA1LrjM7nIhUTab5hpDEHcMwq9E/UR7qCAiEAzLWcxAMZDtptrlmEdAbZGsGIdaAHk4/eq7JwaBU9QLM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwrzCRA9TVsSAnZWagAATG8P/jwssusradQ6vmFD0x+U\nyMN/lUvL7WlSfn6D43ADomOCPgES1tl3wsDFb2dxt7N3KU/lEM7PXQgs+J/k\nEX05NMFxT3pqptgMlssdMLje6wau9RmJnYPMLTP9t8mCRfljFZwWSEgcu48E\nWV1bdKbn8PuSyzeNuyJGzhDpoeFjFWDF6uj4qGx2aMw+pGc4oMVvVuxs+M5N\nM4aYlQ8XeAmZLA65IrSpJmUVFotye2ItNQZ6HR2W1WOPvVeF/cI5NFgeqAca\n/XAjzuJDgJHi9NU8yE3+/tz3yiC9sbdR+1bYOMMcA+OVLJntCRuJANa4Ijvh\nuR6sqTVfybZFJ1mOgRlnAD0GdS7gd1tgrv8GDP88e1yGQeaQgHRucdR3YkDS\nZ179dyQ5GU91X7J570cUoE17fCiZKt910VEGtpM6UKXWTqMyZpsq+pTS7FMH\nvabyBuchR6+N868ZcCdJ32qsEktbA9g2mesmq7LcV5SgYSmuuiEODviKI7bN\nVAa/fHCHowJdX8O4uCNMcSd1p+Km9OJ92s3K2UU6lj8sgIBobiCHpnrEfUfW\nHP1HJXrZzXmJQ9BeUT82VNmcVvKkUfaSvjgk8oxBGv3GeNItMOjNtoUWJUn3\nl/4BYNPNLrF0VcgLqbwaiicVMSCQ6Uq9SZ6+04HBrS4WptGYau3YNvhv3rUB\nyged\r\n=6Rvy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.005e86a9b.0","@material/rtl":"8.0.0-canary.005e86a9b.0","@material/base":"8.0.0-canary.005e86a9b.0","@material/list":"8.0.0-canary.005e86a9b.0","@material/shape":"8.0.0-canary.005e86a9b.0","@material/theme":"8.0.0-canary.005e86a9b.0","@material/ripple":"8.0.0-canary.005e86a9b.0","@material/animation":"8.0.0-canary.005e86a9b.0","@material/elevation":"8.0.0-canary.005e86a9b.0","@material/typography":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.005e86a9b.0_1596132082656_0.8922745228187092","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/drawer","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.e309c7c68.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d9120e8c449ed6ea39bb378dbba7a4327fff1bb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.e309c7c68.0.tgz","fileCount":48,"integrity":"sha512-ie4doFy2PiHOseUJmI5pOmnrV0iXVdRw078upRNyN2tRLQgAdr3nOvfu35Jiu524dNiD9r4YM7V1gWhp2DmpGw==","signatures":[{"sig":"MEQCIDtqE+4LBT6zWmT2/rGTteaOP/JtdmfPPP/jYycMOjANAiBkIfVNtNzkJYScZBgE2B5D8znP3Tce2H2XPWzb3rKV6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwzzCRA9TVsSAnZWagAA/+YP/1ZnbIAE4IM9LCsGMu8I\n2JuBTeJx+nUDCPGsFdDRprQRfcyxrDIL0VIb0BSMtcaufA40Tsf9WosbS8RN\nxSUTgL+MG+vbCzg34AYA0iDz8T3Dxb2OtjdvXahBG/kLonZ1YjIDl19OENfB\nnKGCVWOu6Ic2OcZAXUKRqeGi288B9iPzKpWMZI7ElnJLRR9rmJstg0D2zxRP\n7dKj5vPmcER1kUVHY9M5s2aToQ+dAvzycNkhGajC1BVC4qLSVcXMInh6Tie1\nAI1eGGDUcXGnTMnasXJYzErEwisQTAhsK1kfZPojRGGTMqcvMga7dw9fNq5w\nCkXKzbrahgifd90wVk+CufdSLE8xG6YN1zX/fI84vPUvP9ieTf5I8XESRhX0\nupVzyQx10mJW4nwyaatHAcS4QmlQfhXItbrp4e3dhu5BPWafz7Hs7p0MRnQM\n9TdQEiJii08gXMbbEpzgLpSnnF6G8rphQ9V01DRINeNKZUAg8JdEyAKVkpV4\ntXuOWKUjFYYySyLpt+Aij79SEOdifbvY5QR019SJj/5mK3o9uw0VFxHLrLfj\nnwVGlB4mSAenogbRcnSbdNJWaqNJyIOmb8E4UB6G4YBRjgKsJRiVzt4uzYBT\n8TUhA7EHvy6AcQMGWep4FCOwVcDr3zIRhGuVmxZPtd3sO0AYzEEtR5IFiCte\nF9Q1\r\n=tWHc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e309c7c68.0","@material/rtl":"8.0.0-canary.e309c7c68.0","@material/base":"8.0.0-canary.e309c7c68.0","@material/list":"8.0.0-canary.e309c7c68.0","@material/shape":"8.0.0-canary.e309c7c68.0","@material/theme":"8.0.0-canary.e309c7c68.0","@material/ripple":"8.0.0-canary.e309c7c68.0","@material/animation":"8.0.0-canary.e309c7c68.0","@material/elevation":"8.0.0-canary.e309c7c68.0","@material/typography":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.e309c7c68.0_1596132594690_0.27767970705319667","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/drawer","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.935a51cc0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b3464d35466012e20044b99c6061bb9f9c5ab8d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.935a51cc0.0.tgz","fileCount":48,"integrity":"sha512-utf2kzmFW7Mw6COcBw5hFAl/XGUjooYo+Gvm/jYUdSjBZqLEEiWMiWrcqI40NssFrzBZE7kgweNWsR1O3w7nzg==","signatures":[{"sig":"MEQCIDkyxfyXGCip0rqmqM0e7ijiYZyxpdYj4hqyvpoARYApAiAllLd6Kth8ImEiFhacYwkdRq+LkjevRiW/aT5Dzb0h7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw+yCRA9TVsSAnZWagAAk3IQAJIJCTnGYst6DTHuvzvb\nYeagjfylKhCGuQeLGh0Lw6Dlxx1S/EJEo6sjOQXRNfUIhgherPOQlIVDqQCW\nsw/H0JfaoVloy57as05UaZe8Om7ptbkD844c9wxtnhTlQdRCVQ056YF4ImzI\nJwHD36bWpnkCvEFyxhH55jgZC+mwyCjPm0R6M+aqYL9Yyw1bVpZ05ximsfGo\nz2b3BqA+68Iq+GvCpztWMXq9w7wCxgbkfTdn9k+HSAJKZDJ4qJfwZrKqXJf/\nDMpGw7zRlZW/67FYs6SCohgs6YIWMdo6LWAsa8KX4Hk/Ui5qUlpv7Lh02wR9\nn2prLugrpNUTzwRXqfm0t1KunPtdVY7j0Z/Nzix3XkYbaUE86xhVozuYgU08\nV2um6+eLnP3jRSTxwcXHvyfoT08K24eERmJ9bMcGuPhDQsch4oNv4MTC++fK\nrdCBHypCZCN+dbbhkRXLD87uSpjlm85bwkKDECYFCBOhLiwGdqB07vgvGQwZ\n7fgJxFxOrljrHS0e8/mYVWk/wwFkujp5yjhdRDzWHRj6Nug3pI/BbOIp7MU2\nqq+NY1JAzoZI9+3HVD8Gq2tIDUVxxTsnOXULuIjYcBCJJX+GYJH2jiPf2kvr\nKhTZNs/BC+9n/uFot2+IJKmA5W9OxdNrqaX9ER7UoOyKsmrTC7yvctpgiZYu\nOUWW\r\n=7kY4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.935a51cc0.0","@material/rtl":"8.0.0-canary.935a51cc0.0","@material/base":"8.0.0-canary.935a51cc0.0","@material/list":"8.0.0-canary.935a51cc0.0","@material/shape":"8.0.0-canary.935a51cc0.0","@material/theme":"8.0.0-canary.935a51cc0.0","@material/ripple":"8.0.0-canary.935a51cc0.0","@material/animation":"8.0.0-canary.935a51cc0.0","@material/elevation":"8.0.0-canary.935a51cc0.0","@material/typography":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.935a51cc0.0_1596133298508_0.12130807139116184","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/drawer","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.74839da7b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcc2ac20aa06c05547ac2a839b2e2d2c28ca4c21","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.74839da7b.0.tgz","fileCount":48,"integrity":"sha512-MoabJawF1ltiHcSSvYRCVVFpTtAalxcER/7fPUqytVVQF1bKidfk8MHw93xmwWyFi/0be7X84zRsofEiGRzdaw==","signatures":[{"sig":"MEUCIQDnSh3IJJr4LfPpOJZHP/DD9Zxij6kU54ggew3uUCk6qwIgV6VulIrugW7YYKimurFjXt97g36p+eT7fxj/XlNvzKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxJPCRA9TVsSAnZWagAAvHkP/j6ArGZ/+Wbb+CwSQ0cN\nCl420GVezUrP7j+96evU9/bSf2TVlByK8/RPWfKmaQpxSCuWhTDTLaNRbcFI\n/6XSo+iMeXjDDJbdZqrU47VpZMnXe04KTh3Sta8rClTmiyfV5n8rbvkICgPS\nNB2idQ/0z3D0tqj4tvVd9rrrV6zdVURXm03I2oi4M5rqhqUAuCT8DqnK7g3e\n5X/rKpr/R5TJn5XOe82U3HqfpYwWuUICtZ/FQXmwfMVZ8X0+o7TH4mdb6Iky\nOTUpCic25Z20ArLFX10J7sDlKV/FLWYX/PvEJNPFGQJS40vdjv69tiZA5YbR\nn7PBop1DGz2Aob7kSnqcIGQICpiP3LTk1J99E/03spZCRkDowo7Xdib54GzK\nAsHXTL+OvHNeJjyHFhD2UNZSqm1IL3hdVc3LWSmQF9llnQc3YPd/6kYGOTNV\njQHty2ZgjwXIfMSI+d+QsV66YS5Wmo/c2oPIZzmLlfSMKEESf7w/XQj8PW8z\nmBdjwZBqOJEaxwInNE3tdZPn/qPP5EAMVqq76vKQzvTjPIGhU/YvLi+TIzeC\noNGFkzy81QTwZUJh71YqyoWwekv6Tp3/zRb1+Ln7M3mp5nQgiVYAefMT7TZc\nSODrpWZPRH1sk/bOnB2CPTdSFmtZ8oSuQhCn4mnhpZPBIW7NLcaUaexVgdH0\n/HRJ\r\n=XR+y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.74839da7b.0","@material/rtl":"8.0.0-canary.74839da7b.0","@material/base":"8.0.0-canary.74839da7b.0","@material/list":"8.0.0-canary.74839da7b.0","@material/shape":"8.0.0-canary.74839da7b.0","@material/theme":"8.0.0-canary.74839da7b.0","@material/ripple":"8.0.0-canary.74839da7b.0","@material/animation":"8.0.0-canary.74839da7b.0","@material/elevation":"8.0.0-canary.74839da7b.0","@material/typography":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.74839da7b.0_1596133966508_0.224797563016069","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/drawer","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.f041a48c9.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cdf986914ab3de6c96a3b34b0c737db5c633450","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.f041a48c9.0.tgz","fileCount":48,"integrity":"sha512-rzNqnxYUl6+7x1W6BSTTGkDzX6lQjO7jkc5uiSnqLlwOA4/ZPiTE+rUIttVTCsE/DCGXKH628gXKu/9juvgiyA==","signatures":[{"sig":"MEQCIEi0aIik8JM8zC13D1Wk1L7bzvWVsASHc9uOw6upz3WQAiAW/JYSQ5PNAz4LvwhAggNyVkNqFIRR5kNMHkxsOkmXwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1EvCRA9TVsSAnZWagAAJIQP/1d5qGImiLBIauh0KInn\ns38iQb0sGt8nPlkQ3kUaj0J9S85aPvOTXMWekb88i9bHuFhmpgrwWPCf26rK\noI8AHX4XvOeqRa8OPqRndVsZG5AwoQNlmjZfs/ImZ7pVWWS+Z6VujdsrIgOn\nnM4zxTgPXQV2xVpNx4iS+OteChgIIGqUFHmaoMOnguRgc8sBNuyA521suAon\ntRYab1/W0eyZPXdOISkrlexfTz1Yguaa9uVLxJYvy+a8mrAVnBPc7JyKfQET\nLRZ7hrr60vRhdEDfcPJ6FqoFT4zMz6PVYP7bBDz+48VmCu7g0qzv1H3wDv1N\nFF+ZyAvHyPXCUz/kg8OVHcDrM5SCAY5c7Ro+aXiLcZkx1W7xq+NbQtj0l97O\nMbZyYOUeUMSEswSSnKqOAo077SFJobFEw7jD3N1xYmjwPMr4SAZPGfNlRf8u\nm+SNU/JVI+BST5ea9rIzzdUS1DRcW8FqEB+bxBEDGgVs9AEiAI+yw0ZOmw2Z\nhxvEnZHSfytvh7wh2KXYK2LPc7Yx9Yb73ruCy1nA6b/q8m8XnqOtrlgG9fJz\nkiqT/Edw8sxFFCgmKn8iCnTJyWi8DS5SOzXtwzMStWCLRiMIvOHaqzUFGw7Z\ne4DrK8hC+WAcJkmOzYfCdXE0SvzC6x8q+3hJJp0iEoQaFtY87N+elGCb6W4G\nPqyv\r\n=IbcJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f041a48c9.0","@material/rtl":"8.0.0-canary.f041a48c9.0","@material/base":"8.0.0-canary.f041a48c9.0","@material/list":"8.0.0-canary.f041a48c9.0","@material/shape":"8.0.0-canary.f041a48c9.0","@material/theme":"8.0.0-canary.f041a48c9.0","@material/ripple":"8.0.0-canary.f041a48c9.0","@material/animation":"8.0.0-canary.f041a48c9.0","@material/elevation":"8.0.0-canary.f041a48c9.0","@material/typography":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.f041a48c9.0_1596150063288_0.47218785520868867","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/drawer","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.fbb1381e1.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c691afd7cbc82edb5bf4288a90d18e763ea0e11","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.fbb1381e1.0.tgz","fileCount":48,"integrity":"sha512-rZlgAcmOaF+bU4sH8cWvk4L6jFPIKXA4GtwBKFWxaVoOuzr9FZbYZEYWQ/xHsPlSC3A/IMKWSq8eBw3lp3yE7A==","signatures":[{"sig":"MEUCIE4lg+ML8kGKyDSyAlDv5iSOnQiHmwy36Lk2BV0pEB+uAiEA2hB2exqCLIMKkyZBEVRYOwA1OhAk7jmLyPCUa0hu7Nc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD4MCRA9TVsSAnZWagAA7H4P/RByTs+HKaAQgqOoAmai\nsmKnW5LflC9d6nRVDBarVL6dXdqwpTWVHqw1jRQf2verJcDE09RTuRQgQ5gU\nOXYvSTVCyn6IaTAc0IpnVj/pC4HnNjQELqG/VYqNji17evrWaYxARwXiycnZ\nUXCLKiU2N7FyziZxsNUkYrKf8rE3zjne2d6cac2jn+0e3ZhM+00NBIKH7MLS\n7C5xgwdM59hKkm0rSGyk1DANHIbueKAXGshJzChRqrW74BiY4y1DDBsxvmOq\nZX9fSnTnDnmDgSt6kABmNmv7rjibzkvR6DxBp6bpCyiYeC3SEs0DTXLWo969\nc1hFQBHW0DIcT/yzcLj94vx+M6Isl/kzI2zp6Mk8WtDQGpof2XqAoVv6lA6Y\nyrDOTRbiFrLJcnLxZBl5AXNXfN3lDdKbeMApWdNaBotLOqztpx53oUGvW8ar\ns8FA7sOK82IWWgy5s4liAVXbO2g6Qrj0DK2GLyAQHqKSs/R08sN0oIKQ58Qh\ntETdJvJtzxZ9FOgxxqqZCL+MIIkTCNP/VMKS4IPXKOsdQOwRifLzyWdG96Ea\nWvC9KtdIOqFMTRQ2BIMiNWjGbmTOsEYQ0aAjbxMnPD3EWwRsyc6fzthpQuTX\nYe9F67J+u4aKCX+scrHO0u4l1Ky1EkPsikjLrZyJo2fDId468g/WPnpJ9C1N\nUh1D\r\n=0Lmn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fbb1381e1.0","@material/rtl":"8.0.0-canary.fbb1381e1.0","@material/base":"8.0.0-canary.fbb1381e1.0","@material/list":"8.0.0-canary.fbb1381e1.0","@material/shape":"8.0.0-canary.fbb1381e1.0","@material/theme":"8.0.0-canary.fbb1381e1.0","@material/ripple":"8.0.0-canary.fbb1381e1.0","@material/animation":"8.0.0-canary.fbb1381e1.0","@material/elevation":"8.0.0-canary.fbb1381e1.0","@material/typography":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.fbb1381e1.0_1596210700283_0.39353296217640277","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/drawer","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.7f61d5785.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b3a5fcd33287b133513b2777c8d28ba642f7083","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.7f61d5785.0.tgz","fileCount":48,"integrity":"sha512-zVw3C6QAJdV80esecA+k50avTjLYQLWTN7yJAoj/zkGXqUgdtLNTAiN3hJRWd3DMk96ZN1V6kj/thm18jqtTbg==","signatures":[{"sig":"MEYCIQDHa/Y3O8FtX+rwqeWDUGlhMsmRnqX9mgpBxkjWIrrd3wIhAMbR6XxFf2oq/sg53IXcP2dnrNmvg9jTptr2v+079Zu3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFO+CRA9TVsSAnZWagAAr+EP/jnDsKGwyYDVuMfNQM2B\nk4yLWy2zN1szmzryUzojMUcKsrfk1INNd8Ge9mCNwdMNw+w1J+RUiY2gvMYt\n+VPkoVUyo1rhVbVvAJG4h8knsdm9gP3QA6uvqWPORMhQeGdFIh3pEBqlNhyl\nNTgyLOZ/PC0MoSKMWTCqqdKD7fhS23Uciw2CyO80hJLpcjpTnQZiHXVQCkJ8\ne9KboP1Ew6jv7dcWrOKOItm8tUqqa/+q6fLX9w/bfgIlpB1v3Gh9/rf5riwi\nRMgY7LSohTn7JoyKIoa48ecQurc156BuchyXLUlDP2vZmKdXlx3H3O5bJ9QL\nzLGscMdNxp5LXZ8Jm2bSusWl3TFPqt4tZG/ZmlV5ELJIh2eQDYP/Q9j57V46\nZ8ReU/6F0wU0brXBeJuFFbJnK2jmBxP6vk+t4640ng8Y/XFBrfctnfCeNWuH\nV1xBhy51W4pPqeGP4nU3St6n664oilpTC/YrCcBaX376/VIOPlHJ8wybgu8u\nXbQ6SzB1Q7fy30Eqx0OkoZlH9L/rCXuGn0tFESF/qslQPt/5zXOvQj+4b/ud\nPDTMKn0tETMFMsNZ2Z7Zjqmtn7Ji3lNcxVHiowuomTjuSDCe0rcu7K5ih9Rb\n189am1A+7YfShJ2rz/Hmam47o42tkgcggSaDcxRSxKRhJS1y4t7AG058h7ei\nwDC4\r\n=Iqiw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7f61d5785.0","@material/rtl":"8.0.0-canary.7f61d5785.0","@material/base":"8.0.0-canary.7f61d5785.0","@material/list":"8.0.0-canary.7f61d5785.0","@material/shape":"8.0.0-canary.7f61d5785.0","@material/theme":"8.0.0-canary.7f61d5785.0","@material/ripple":"8.0.0-canary.7f61d5785.0","@material/animation":"8.0.0-canary.7f61d5785.0","@material/elevation":"8.0.0-canary.7f61d5785.0","@material/typography":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.7f61d5785.0_1596216253814_0.4953534669735642","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/drawer","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.e1bc84d10.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c709871336c95606a2813da9074992f883019a41","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.e1bc84d10.0.tgz","fileCount":48,"integrity":"sha512-9HPoVrlXNPR+Fs7cjMhC+yiWwGKmpy+4rQ+kcMDyP+IbYO1Yt+5BZXs/LMwKi3lCMYgJIHf0vqvjqmxENWTVrg==","signatures":[{"sig":"MEQCICmUyGXOWzc/pE4iu7zYtYOUngk50b4zhi6pGQLPamSZAiBQcX7h+zaLmm62QQb/GQjeL2ua/gswpjWnRwEeh8PMgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE7ECRA9TVsSAnZWagAAMEsP/39VNJKyPjxGqWk9PZPe\nqIZ3TipTpordLdegUxN+10BKWOdkt4L6gJfr0k3YYMGVIGEmkQIc95KQqNnd\nMH00yYqNOSiBNfzGeRuTNxnfeHUbcXmLvUAH61BMM5hbhgqZDkrG9LyWUnsP\n5sSsI+0ys7JaTuv4wF6hzECEG8e4p5sjPCEY7DCNE8nUm3zzSjPy0m94LJ6q\nu2H1a0FiEmfYieZrB3aUH9s8t+FcTmdsmk5vBQefGyPDysM2MtVrvc82Aeoi\nfiKq6Po2s4y2clLzvaJKggI6m46ocRINupOF5sfSaasSefaGHfCdb/jbHZjA\nlUuSOXeypwcPhe0Ae8TfylYi2/lbQiIJGnUcC872yMUKMSlAYfdvwiJ/IzBr\nVowYvL62ljQ8CuOfRBuC6yjiaU9ny9y48zBugvr/5WVlQ9DH4pbzbYZbfmp4\nfmeHVV7dDinPbK1/QN+mGG3M9I2P4MKnj8gxlyw6Lkt3Y1xc2fr4+/9Q77Iu\n+ADRWUVNrWG4dsobQ9/kNp3fz12y29BYeyHvv3c6EpyfePFbLdbLYU/gfWoL\nTMIkHQ0xxXDDROpXT+3XzI4BqragmxtfVpx7ul92OGItY+qVh9BpFuuU776T\nsXxFPNdrh2JVRvb6YqkZ7dvd/Ld614rx8ZeLz855LM/tRYjMFHavbbD3Iz3B\nMdNm\r\n=RpPb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e1bc84d10.0","@material/rtl":"8.0.0-canary.e1bc84d10.0","@material/base":"8.0.0-canary.e1bc84d10.0","@material/list":"8.0.0-canary.e1bc84d10.0","@material/shape":"8.0.0-canary.e1bc84d10.0","@material/theme":"8.0.0-canary.e1bc84d10.0","@material/ripple":"8.0.0-canary.e1bc84d10.0","@material/animation":"8.0.0-canary.e1bc84d10.0","@material/elevation":"8.0.0-canary.e1bc84d10.0","@material/typography":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.e1bc84d10.0_1596477123332_0.19026817948249075","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/drawer","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.096a7a066.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06e82eaffd4d1de31e7ccd64446b7a899a2ad029","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.096a7a066.0.tgz","fileCount":48,"integrity":"sha512-S1KAqzo7pUSEvgw0tIfnaidw3QlrzDE2pVPO/Eiz87E1L748yM7AJxjSvP+6JzlNFoxXK27JyehqdMSVD8Abag==","signatures":[{"sig":"MEYCIQCkdOKrDuCO0aowyJHKrufH6QFAU4mfAYFV0oqif0r6XQIhAJIJ6uVvKu8j5/dbI/gX7/L/D44vQuc/7aUYpiciYir6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+JCRA9TVsSAnZWagAAM78P/08c4CZl395UPglpJy8X\nuAOc7u6YCZwP5QXR+v7OZKbrAvXDKxKCZztYil0tLd+ry4/Zp9Vu/2vB0Azk\nnzgq1hTxKDQEb6fxvZyqoVUlz19Tf+XAifXpqr3vy5NuhbLNDuPv/fgdadIA\nQy5/+gK8REER8sMD3G+2ADJu4QD09d8xz+CMS5PCC1d8SFPGYOsKfXiNi4wl\nzlv74VXB2DYAUKnpX6shGJyvbxGpm/V8dqTlASt/MHorHWND8q9cAGlWYlvZ\niqGQhoAwRYnrrcTUqA33f6igIYJK2QuAXG3ERi6Gnm3p+EVn6T0YYqI4zW/B\nYIFvlFEQBUAf6CmXHsB1m2ifYuUOKwEu6g8mPp7BHy9DXxU4V/iqmqjirrVr\nT7mfvvwxD4sokHgq1iBx/hQApvjzhJZDEdRsphdGo403FWJmWqjMi7D6oP3u\nP+OMXa0UO88by6NoJg1t6PwOJ1XAx+hOfOzDCmK6u4U+OiOjzdCdRWV9t1U0\nrYkjp3dMFT5c4XZcr6+5c8tC7KrRZbe94tm1C6DQGIKQdTXrfHLZn7nWfsps\nOzowaOGn6GPjDxS8PNteuGhFR5Db873tk/xjp/0ZDKiFlqMO9I/3DAy1yXVW\nxBwF/4MbMB+yzMRv2rBvKIDldghEMZE4qFAdbjDBxe1V42wRRj4CD1V7Kpuk\nHEzo\r\n=rC6/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.096a7a066.0","@material/rtl":"8.0.0-canary.096a7a066.0","@material/base":"8.0.0-canary.096a7a066.0","@material/list":"8.0.0-canary.096a7a066.0","@material/shape":"8.0.0-canary.096a7a066.0","@material/theme":"8.0.0-canary.096a7a066.0","@material/ripple":"8.0.0-canary.096a7a066.0","@material/animation":"8.0.0-canary.096a7a066.0","@material/elevation":"8.0.0-canary.096a7a066.0","@material/typography":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.096a7a066.0_1596477320639_0.5229195996262441","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/drawer","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.aa3a3e5a4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9858d8d2918ca52d85875584f207e0ff33bde659","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":48,"integrity":"sha512-sHRRvxbC8JgQJGe4d7BFTxszz2SgrqSkzAWjKSRpAsfEJ7HW00fZJN5qzovMr6zd0fwzXaEK6RAkUjwLLr0wUw==","signatures":[{"sig":"MEUCIC2O7jYKEllQdRI/QZAn1JmvVhRt7TcpWnHmEP3jvkjUAiEAw0Fav6OEH597AUF5FV8h4f4QFkc9ajdJeWdxv6Jdf9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+qCRA9TVsSAnZWagAAW4EQAIDnUxkdBoK/Dw2nBLNE\nL0ufCduY+QDYSpUyXMYoM/AGUj3JyfSPX/HzpPHX5EF+G1+HPuHcTu5/rNAD\nIXxsvGXRguJ6jk6sE0giTsU7yQGPnJcZyfc9lSslOXTJXkX+hryYufbr3mlt\nOllx9J8aS5Ze37ChMr3elk/0a0pAJbci9meDVJaLBNUHvVYSGn4NC5t2pfq7\niuXkVGqpqMlkW8feYQWRxe5QMU9Qs1M+SfwJ1c672eAb/0PZPmZ09NiNspX6\nH2tNT5k/MZY+CaAgm1rMGtJVpxAQA3irp5IaZJHNApY53wWC4IW/FbjXhI4A\nGOT27LKwO7U3TiZAUgo0MpzAGN62tn/MUw0Zf6hWFLGpW09RX0vqdhpM6uy9\nrIL1YyTqUPaSv/81NGf7FWjGO0/n63EJnvXD5O9r8gY3nJIgPedsXOvA4Wnv\nuMLhSucagfnxmQo/odasymPq1WAkLZG2u+Wt+6DdnSnGW6UeH64GwR4aTcha\neJhgLgqtIjbRA0K292BFGAouU7iEY9Mj7ftPzYJSmkNhnQ54wSpQzmSZTXy4\n5mUJL7Wz6cmw2ipEefsZhD9EIlAfwx7hVX6cclf2KL928SelIRNtFR9ETNuv\nM0aq18wkQFWiTdR2zBrMyRrStA0c9MmA2zOmPIgLywIjW+0ri5ZvKZO8C+W9\nbWhF\r\n=2Yz9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.aa3a3e5a4.0","@material/rtl":"8.0.0-canary.aa3a3e5a4.0","@material/base":"8.0.0-canary.aa3a3e5a4.0","@material/list":"8.0.0-canary.aa3a3e5a4.0","@material/shape":"8.0.0-canary.aa3a3e5a4.0","@material/theme":"8.0.0-canary.aa3a3e5a4.0","@material/ripple":"8.0.0-canary.aa3a3e5a4.0","@material/animation":"8.0.0-canary.aa3a3e5a4.0","@material/elevation":"8.0.0-canary.aa3a3e5a4.0","@material/typography":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.aa3a3e5a4.0_1596477353883_0.5648754200991064","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/drawer","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.5903d39af.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a1ac2a6d3e633acb252ca5e58c2926a02ca99ae","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.5903d39af.0.tgz","fileCount":48,"integrity":"sha512-iMJYvXtB8mobFCQeTaovaHaDBGpOmpeRyBHnzqHf+JNAfYj8Nd4ECZ+8KVdwowtZuQ/kunK4y0McLBvEKSOpuQ==","signatures":[{"sig":"MEYCIQCGPUr6Y4X+KuWlLfqR+3wMHsQ93dKsVAouQbbXtQf+NQIhAImmiR43kvnmLFKYf8TNH6Jdh1uwKs1Pu1mWc0X9ufDp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE++CRA9TVsSAnZWagAAxW0QAJE1BfPLLDzvv6/hddEd\nDj74NaM6cOPNctcs5nPEKCNm3CgPm9QcJxFFjyZy7tKEN/jsCQ2L3X4wSLPQ\nRh3umOGPZ7WqYxu1ZGnaydGhSgqP07s1itkIqdAih/WBsO+Cz8dsYsSpxi2w\nv1eqEOatzk+imCSye5E+PsDWzl1VwHS0HHSZY5VT1Cu7MmS4GrK/vRRBTLiZ\noc1qbnYmMWX03UicXog43FN+FAucxZkJi6ARnvFscxB+VInT1kqaytEYW16Q\nmjVRoiaxxUpQVmW90AjTpCtlwDPOE+Ss5nSNrIgfgC2pkgQD+aHXZDbXrEeP\nWp2ce0Dcwg4KcME0HG1BEUyBVCLMdcsBFKBaT5P44owN7jUKqiBuKroox4i4\nhtVTNZGNrpPPFrBFtSfueF9FGATCAT6DjoVJuP2XlLf1GDdtPYMFV83SULpW\n81wNS0Hm+uzb0+EfS6uIwDTeX4M5Jl8xmova7LIuiU6kXFDIpqa89Ze9kRok\nxAWjonuEI8OjpT/K3PI7LWLB3vHFUCGqwPemuhdMPnfuD+qTMpWj4b5Z7o9i\nF/TTRug9R3y4Xj3vAsQ+QEgT56fVjy0a/Ca2doKC/PL2WmiP5hVBr33atc0d\nkmvk45r3NtPfgVIYuj9GG7BDZMAZFvuGb9pOo+mDvlux2R9fQ7LyOdB+ofhD\n4I2e\r\n=WmOg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5903d39af.0","@material/rtl":"8.0.0-canary.5903d39af.0","@material/base":"8.0.0-canary.5903d39af.0","@material/list":"8.0.0-canary.5903d39af.0","@material/shape":"8.0.0-canary.5903d39af.0","@material/theme":"8.0.0-canary.5903d39af.0","@material/ripple":"8.0.0-canary.5903d39af.0","@material/animation":"8.0.0-canary.5903d39af.0","@material/elevation":"8.0.0-canary.5903d39af.0","@material/typography":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.5903d39af.0_1596477373518_0.08229688668606272","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/drawer","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.72258f898.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0072f7063491b5ebf269ffdadc43187de0c3eba5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.72258f898.0.tgz","fileCount":48,"integrity":"sha512-M4mvxJMogGbQOueNJGdiIKTkAHAg81DDB4EDY7HcHgNkMwftl6guEE4pbbiPiR0a2aPGwaueSjdjpF5AULviJQ==","signatures":[{"sig":"MEQCIF5zZfNW9M6eahjYKtMbKv9PctOnguE5vlR00A/3Anl4AiB+ceEEcO62TNa87SrRB+l/s5gecbwEBUEP1d2S/kQmuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLdwCRA9TVsSAnZWagAA3xwP/072Uzh6eBMuk+qDW3R0\nQIIE/cR//WsK3LKe57GFs63x9Gwa+FGJLy8wfN44ScU6HHyUMfkzuCS8VJ3b\nQToKj1EXOblMIaGqCeLXvcZVrZgkjIvmuBrTRJYCZQmZDW55sr9gFsBC+MO2\n5YMa+5X5ooINn4BEoJ5DaclOoKEUXsxySOo5TkouB0zm7C9lEM838Y2S10+Y\nuewXALZIgqftfUurH3gjRTKTGCuhXFgGJeTVkzuc7mCPDbjqYXunA2RvExYm\nlcSqw7n2R0S0BKm0OC7hGjAYPWlwZctFJW2X/Ia/hUpGGhKZMiHNQQ0AMmaQ\ns3F6whnAMgQr6gi6FQuqnTLqNEIasApSlcUFe4MDsSbDvuc6uSNWo0XZ8KMv\nLIW7AsUmb68p65TOxC0lLPBwCEdgmqM+tSKSjiRYIP9lz6IIjuB2lZ3dk7o5\nam7cxXG5SOZlDWEpQ+L99+iLmt/oVLDufRevvjzopSXCu3OXPqANYGq1LVPx\nB0ipvxuKq+/xPLJ6NDRRptK8/xdZ8cYi6mgwRlWrbSIWqoqlMIYzLPqQ8wQE\nCzAciqwzLfyvNuM1XkdqZU4nqO3veoxkS5HNVaYLUGz1b7V8s6LMChLsw5k4\nE7tkLP/5rWZvfQPcnje2ldqy1d1lw7fEVBrb2Qxasyui+RhuvDW8whQm58VB\nhArr\r\n=1UCO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.72258f898.0","@material/rtl":"8.0.0-canary.72258f898.0","@material/base":"8.0.0-canary.72258f898.0","@material/list":"8.0.0-canary.72258f898.0","@material/shape":"8.0.0-canary.72258f898.0","@material/theme":"8.0.0-canary.72258f898.0","@material/ripple":"8.0.0-canary.72258f898.0","@material/animation":"8.0.0-canary.72258f898.0","@material/elevation":"8.0.0-canary.72258f898.0","@material/typography":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.72258f898.0_1596503920106_0.007216713534429209","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/drawer","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.1b44b43c8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f836002936035aa7aa48cd807a275118486ae15","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.1b44b43c8.0.tgz","fileCount":48,"integrity":"sha512-QUhXmBRjoalOAIWAc+uMcwCWuniFKi3BYrlsC2IJxY7+LSJowDhqtZT8JKWlAHhu1hE/bb1LVOEFGxxDfCjP1w==","signatures":[{"sig":"MEQCIG8qP4vFywhFIVFZWznc/cOVRT8QvxenePEN/9ZcFszWAiAm2wiUpP3aYIdjKpiToVA23zZKVsPSYXO1OgswHcZXYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZG0CRA9TVsSAnZWagAAU+0P/jOvQfhXyLZmFiCIKOl3\nrfaGlFO/6LtOOeaY+Pt5v5SRDdCW8j+KePAvDuGBS+qGnDfw+8QrUqJUjD3x\n3u+frYJRuNHbHTICLOD4WPX4bUqEddYmg8fA6+sCXM46XMp0dbw1rOLLOw4L\n2CeurBZUu6txgIuwWsMtg9izUZ9hUL3xDc+I1OyutrHPS8RX1hUtTQrpHTOe\nagUsTQ5I9XVb45uwuvKBOdTbHwIMLQQbLPwCmyL+Gh+zR8E8g2kALJDP84C9\nmGsQdKdQKV9i/qR5PlS9A5o2XsH8rOODGzQsQv1jTc8CnnEbWuQRdjibjpYn\njchZd/TDyBMK2Idns7G9h5ofQx7Y8i99703b6V3mAGtyXHew0LgQrOsde7OS\nhtUmvjjDqzrI6YEu9VGILbMwhMGeWVP3VGr2u6WFDkXh8tvnf1EXPRMSi92J\n2+chVQojwWsvNewfRL/cOdIM1DlEbgA3ZxHzziFVR+nn4QCNjsibL9VFUNnj\nm8EGcGR/z+yu0evSKK3LVdT1XMjsJ+yr5R3FqsThaG3q3OJA964xWtj2JNlW\nvf07GN6Zuk6QLHm/glZ9CfEIJMQSOsaSEKns+swvtfDW5DTtUz7cxhNVJJsu\nOMBA01jpMIv/yN+YIVZIYnETvKg+MHVA7Gd4aVWL1kiSYwRWqpPmYHy44vQg\n/Dxi\r\n=BsgA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1b44b43c8.0","@material/rtl":"8.0.0-canary.1b44b43c8.0","@material/base":"8.0.0-canary.1b44b43c8.0","@material/list":"8.0.0-canary.1b44b43c8.0","@material/shape":"8.0.0-canary.1b44b43c8.0","@material/theme":"8.0.0-canary.1b44b43c8.0","@material/ripple":"8.0.0-canary.1b44b43c8.0","@material/animation":"8.0.0-canary.1b44b43c8.0","@material/elevation":"8.0.0-canary.1b44b43c8.0","@material/typography":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.1b44b43c8.0_1596559795464_0.22584424709878914","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/drawer","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.e9d2e2f96.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"601418cff6d5d529d381165370b09a5f00b8f881","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":48,"integrity":"sha512-OEng52d7EmvymB7k1jmerbMy4fLX/1EqMuhr3pPsF11Hdp7GyqU+rchffMUlydho9Xmuez5igi99Q0Ij/tuVcg==","signatures":[{"sig":"MEYCIQD17QAkHNJ5DnjSBCNdkyGWvA2ErvBZPH9YopaZynbGMAIhAJ2wN4PSIDiA8KNAtE9c+9/hjJUXe0KextC9VyHc+2jr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcQ7CRA9TVsSAnZWagAAvDsQAKNFIo12ybIiXX7+mN5O\nQuwxKp1R1ujJG/D+uvnuA7Du4LAalYhgm6YczIVr6dVljtQVbZEC/IIG4VUE\n3BMwR0R4utyfzp/K77ricG18rfW1BgFYvprbHRWJcEvwiLRHjuieWVvANBIf\nioV8nFJwJXBMEPvWIqQeLR63kGCYfzlu1Grm6w3G57Btt9KYdDcedEEwFdiL\n0gYbL1U20pMkQN8mHgUREGU9GFpcfaGmwvsK3q1fcTn1D4afd4xZH6fTbN8Z\nwdumPltQahkrKqD1lLwoGFqnqrdqCbGpzaQHJFaYaz2Cm07cU4ICtJf42FdS\nadxbQdsps9effKupV35B3JQGwvETfSNv333XFcVvKbTG9YDfuzHkwkvoTRaR\n3m0TQr/4THFHJz447JqvXWHw+pG0TijOCjMlV7nnIVDcHRhWtC5tqIeJTGwb\nxHerLWCwwE0DDNZnoG9DUr5+q0ymgQRBxq9ScECRsgmEnG9wcwjyq9ZwdG5j\nmChkEVn59D9sQhrV51TrNppg/ElQnTEdS/f0PmTLm73KjXUAMVkaFL5lyW/L\ngywvCN14zXkcGsJZ95ECOVI7442LUiiPab7BD+NfKVtxzaZI7ljOF/N5hxWa\npEzBN2kc2NVZgCNhgHJQWnIYJbxKPTgfm8hULvE0xXmDPZYUxw0qm8lCkkDG\n3rAv\r\n=xjdW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e9d2e2f96.0","@material/rtl":"8.0.0-canary.e9d2e2f96.0","@material/base":"8.0.0-canary.e9d2e2f96.0","@material/list":"8.0.0-canary.e9d2e2f96.0","@material/shape":"8.0.0-canary.e9d2e2f96.0","@material/theme":"8.0.0-canary.e9d2e2f96.0","@material/ripple":"8.0.0-canary.e9d2e2f96.0","@material/animation":"8.0.0-canary.e9d2e2f96.0","@material/elevation":"8.0.0-canary.e9d2e2f96.0","@material/typography":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.e9d2e2f96.0_1596572731180_0.46168163799569295","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/drawer","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.b9dff0a19.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeab1a71a8054cdae1e0d4e77cb035bb1aaa5cd0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.b9dff0a19.0.tgz","fileCount":48,"integrity":"sha512-8+QCbv4+Ky3xar1N91Oo4UPEVNcnYLJo2XBsQSOsGOFAkVQBhVpJl9PMojtzgF9Y3fhRmGI5hhfrXDBzWH5b6A==","signatures":[{"sig":"MEQCIA5u0Inlu0kIXCILudcuHBNrAA14ywkkx+U7G3Gtlx9JAiAllETr91E7otktgMBKaOBkubIIkKkoJAHwQHHSFiarQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKix2CRA9TVsSAnZWagAAVNUP/04WB26kz+1eK96Q8TRl\nrOwDWwXOzjUMpsuvut4QS7+Owl9d2wKxk3KCciQ/jvDmg8gGV/JqMtpMUVVC\ngBDVgTUq7f+3G4qRdw/YiQ4Z/uHRHR7hKtaWon3a97QbVR39LpV+lWtoUcO5\nr4os3pZavwrcI7JrKIX886neWGcuJc2Yg8sCU0HhgRPle1Q6r3unGKfx72eh\n6yvoqJT/dDwg+EPBvboySrMhny/C5vG95HoQnA0tlwNS7Wx4LL8r+bvdKrXU\nGudKjzkCaRIx2Ijo/vP/Och0szAc9mGWtfm9s4M4o3NmwHeo0EEMAJdTGwt3\nxiGlEUvwso+USpFaS+7xBpQeIaQoNU3S48ugVhqT3iyR4yIxzWjcHS/m1oaI\nCksOXgvNUE2xfELd5NsW4irOEo2UT/l8n2MUk6rZFddYtP9Mkt230Tn0x3XO\nBhVsX0/xw0bR2b7ZzwDiQBtWBj1GcNh4GO81KbsvdGfqBQkMUU3my88K4fJc\no9tZj/b89benZhQg5H7cfF43MNaiHW4jNroCFb0uhBSZSLnfIsZQDvzpsQls\nN09vMqIONMaIDP0RRKf6kTpGy6i3IpsTf75k1GSo+Ytcdrpv2EglHCTDmUmh\nxqGg1EbiNslPC6GvkluzPZCACTGrEXxzQmVItchXql04FEdKMEibJ4BgBdVK\njwjT\r\n=kwQ9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b9dff0a19.0","@material/rtl":"8.0.0-canary.b9dff0a19.0","@material/base":"8.0.0-canary.b9dff0a19.0","@material/list":"8.0.0-canary.b9dff0a19.0","@material/shape":"8.0.0-canary.b9dff0a19.0","@material/theme":"8.0.0-canary.b9dff0a19.0","@material/ripple":"8.0.0-canary.b9dff0a19.0","@material/animation":"8.0.0-canary.b9dff0a19.0","@material/elevation":"8.0.0-canary.b9dff0a19.0","@material/typography":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.b9dff0a19.0_1596599413693_0.9710591135757924","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/drawer","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.2bd09a706.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa60071c1b5c6ae298132cbcfa686b0803d1a999","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.2bd09a706.0.tgz","fileCount":48,"integrity":"sha512-x8y/UKFTB0nuk7vAu/h6HbvpYQo918NoPO7dVVXU+LloosHu3aLlJ4TkV7+5v9C2t7S5Zwe1zSmkwL0A9TDMgg==","signatures":[{"sig":"MEYCIQCCzQ739zU0LtFZFIiE5t0z5u2Mez1C6zKswDucjHhH4AIhAKVlG5ISUSN/5n3E2vwsLNeksODZgr6xh8oQHIUbx1sq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi2wCRA9TVsSAnZWagAA6KUQAJiIX/llVKN6icCgBvsl\nW0yzzMEsEX85BKIzk5+7ep3Ez/oGACggUNeurTFG15MX2uzOrC+9ScFhOtti\nX9IF4WpUIar/xJj6eeis48JUumbwN9CjYTbaxbqHB0+eEMkZzLmzyDHl7M0v\nLmtoFd/uRVvm+CHIUGfvwzDqeqKN23rLMyF6pUxII2fGovo8tr2S8zrqne2x\nBWeFleo9B22l7XDpDYDrkvEM2nSAaXZFxQI7oUi/rNpgYPMmaTvexL78AFQK\nj1ZOSy4OxgpRPyKKjUHD2oVl9eyxwhRL/vab5phTTdXTsP0iPEu3jVAsYCJD\nKwHpTQR+Tw/zrcqeeq7sn/1s9QsU0e+Y38QTH0g96BAvBymisimm2P+901Zh\nIG1O9lEtnCQSF1PvPPh9ddRdTP9SvqWIAaTEWYofWPZHTNjYjiWkJi64oYEk\n9is6mGUqkROiE97RjBOW2Pe4omUT4qKR0rugXPkk4Bf29sWxwdFBSY/VQb8l\nW0DrknrR8GpIkiZ2+Gh/6ksN1TpRM5GFP/PQ7DsKUj2qRJ8ZNLiQrX4IeP9J\nccQIEO1kwKPTQ8XCbO6ZFlFvQKo1ZncnyPHnPC8FuNx6QJLNcFV29zEzmag5\nKEQI7nG9eYdkXHSWC0omGjGwOlNQRtZFBCb5de7I1WPMXe2wTyIFnuCcYPWl\ngQXK\r\n=SCqC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2bd09a706.0","@material/rtl":"8.0.0-canary.2bd09a706.0","@material/base":"8.0.0-canary.2bd09a706.0","@material/list":"8.0.0-canary.2bd09a706.0","@material/shape":"8.0.0-canary.2bd09a706.0","@material/theme":"8.0.0-canary.2bd09a706.0","@material/ripple":"8.0.0-canary.2bd09a706.0","@material/animation":"8.0.0-canary.2bd09a706.0","@material/elevation":"8.0.0-canary.2bd09a706.0","@material/typography":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.2bd09a706.0_1596599727661_0.6296795071191574","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/drawer","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.e0560522f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89424fae09d5f8158d8ca05e0a59885d5a1c40b8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.e0560522f.0.tgz","fileCount":48,"integrity":"sha512-rV2o3mPYRqT0/3dm9Ku1HLwXtVyo69kDHe/A6m5rtKmJIg/Qcv9LAZjyh3pWVV4NWlhaOI7drIXTFlAufhxKJQ==","signatures":[{"sig":"MEUCICaD95nejh3YpICJ0PAJE9uA0Gx7br8LMEHOf1m4TuazAiEAnfzcbnLMjT+DimJwm4mWuL43TcL0VyeSEqUN1mSt2HI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKuqTCRA9TVsSAnZWagAAlyEP/0+Un1lzVfPHzCz+Z6N2\nDcN2Djk5/RPSp6tzrjh74kJ1NaOB+eIdmzY261ltzZO/HpUaLQBECX9dpeu5\n7VudF8XdbsVBp8UStB1ilumoWqGNlPTyHvx/SXv7odcJktRE2jUbHqWTmvfy\nf+k+G96xkp71Mgf1aOr/w6+4+lD+x/f/j4BR9QfN1Jmb9lmLyreAs5cvyyle\nZX0NBawV37F0cic6rHp90igvmNoOamq4OFGjNv4zZkl+Xgy3ukil4ig+na3I\neGyZWwlK/g/IP7QkwKN2Uz/HsAtHYzwx4L80E7C+c7HueryyoWXxmnSoX/3L\nsEhuJj8QQ0bKUlhm1ihsBlXZJFaX58kk55wui8PHaE5t1iqPK3HgnFxPKgMX\n9huCjwAU3AbuTFGVrp7poI9UTHSyOxO7FKd5AAA4BZR6jFDm0eB+/VZUF7//\nLSFiqIfam64isQpAYr2sk0nbxhy77YkUz1U97MQ/IVZ/HeApTGRSLY2yTkbw\nmv3BgFwEww0rSvqMJaKc+ksQCtVn+Wwv+B8LLSdl2TgnPPiOcOZFuZ9QH21p\nvNTrvSW1NqLJ8PwzUEujSAsPqSQtcqFcZcze3SHd3+FsQmLFa+wxNoSBkAzh\ntjABltgkAp2KOHwApdMjqmH768bDjxJf00YD8fvDQc9olPv1EI9HnPqlf7a6\nMZ3a\r\n=+LXp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e0560522f.0","@material/rtl":"8.0.0-canary.e0560522f.0","@material/base":"8.0.0-canary.e0560522f.0","@material/list":"8.0.0-canary.e0560522f.0","@material/shape":"8.0.0-canary.e0560522f.0","@material/theme":"8.0.0-canary.e0560522f.0","@material/ripple":"8.0.0-canary.e0560522f.0","@material/animation":"8.0.0-canary.e0560522f.0","@material/elevation":"8.0.0-canary.e0560522f.0","@material/typography":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.e0560522f.0_1596648082381_0.9731645379690603","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/drawer","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.08ca4d0ec.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67c9ff5e356dfec193e91f4ed1c0d3e4644c8c34","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":48,"integrity":"sha512-H6iWgvUN03lQCy+BVtAsHLvLMGcZZtK9dIZFS8fz5NswpGIeEXMH1auZy4hwfqENlMYAb4lGKTEv0sO36Al6ig==","signatures":[{"sig":"MEYCIQCD2rZvn0uuANToyN2zf4ftCZCkkk0RsJqdDu0lDEbrnQIhAKHAWJSqddrmcbBzfj+SPM4LVIuL62OLQ02YTpknLBmY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu8VCRA9TVsSAnZWagAA8vQP/3iMDVTCgkpqELDSGuB/\n0WBwso/ylr98vUwRIrNjU+BuXohsApxsifzFc5++XRh/+NrcGw7Ofo19UcOD\nT1Z+PAohRlUSLphwth+4pZvBs0KAIMzQpAlUCYb53Ox0zVeSGZol1JGH9ldb\nxa9/WSrD3pBZvB1smzeE58MKNse7fIPLDGUldiMLxPef8ZtFF4id9kd3W6AV\nrW6VWhqpDzYc5CO8lsacXwWjSni50dg1B5GQqIeXEVKlpIB79Ly2zetyFTKX\nvdQW1ZymwnIzDOblo+E2okzv7/bumO5b563Or9MLR7NjidtN5c9TOU3BuCF9\nc7jkVykcmHTzI4FJxWCMGLB3v2Q/u6PNu/q91SiJcL5200PEPMGj5krrU1T2\nMxcn65gr3YX7WhphhoFXfL54M7Qqo8qcIqOwSxdP82gbvjlYOdK9ujcAjmrC\nRcWQbTWmhQjgVgRX3nDs2O/0ja0kEZBdVvQCX/xdcuX7aR91XuhnZJFplPv0\nZP8m6PmKelwrM9xXrZGHrummcs8mxLALNcryJ6w6ihWHTcGJOuIwRabV7yd5\nbBF9R+HkL2eAm55bV2JmASScSGFdBzxm9n1yMhQAMpP1OUT5SCOWA0xPVAhz\nqUou7Qrw/lQtkRrxEMZD067KycoKu0ikuSm9v9d/pKKbQxSqIgHbav5sADcl\naoDo\r\n=GM1M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.08ca4d0ec.0","@material/rtl":"8.0.0-canary.08ca4d0ec.0","@material/base":"8.0.0-canary.08ca4d0ec.0","@material/list":"8.0.0-canary.08ca4d0ec.0","@material/shape":"8.0.0-canary.08ca4d0ec.0","@material/theme":"8.0.0-canary.08ca4d0ec.0","@material/ripple":"8.0.0-canary.08ca4d0ec.0","@material/animation":"8.0.0-canary.08ca4d0ec.0","@material/elevation":"8.0.0-canary.08ca4d0ec.0","@material/typography":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.08ca4d0ec.0_1596649236705_0.9520554378005277","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/drawer","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.08090126b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6744225a59842b923bfd6cb08421a422f43388d0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.08090126b.0.tgz","fileCount":48,"integrity":"sha512-jbV3l72Ic8NdGeOKpknMi7BLqxgEj4Orrz/22TNTYVVMVHkzVsGt9m1NMexYn858SXHhbwzddOENBaTcNCOWTg==","signatures":[{"sig":"MEUCIDZGevxwRfKy91CJVkOqVqvS6NVoflQQ4/soYvg0fibLAiEAvFS0FsR0Drce3aVewk2RX6SU3GrJ+0jxT05SMoiJ3Uo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFskCRA9TVsSAnZWagAA9xsP/jzx4bU6itMgDEIoqtf/\nBvqDwoLXgpw5edbt1PSZjvbJ2cd4QXTONEnoa40sBZU23M7hFV60GXhqjjPw\nyTGgGw+zbgZeJCpg/R+oOce43WQWPabdPRHTywJ65r3WsqtHDt7NujxdVVPh\nvL/bfo0PwS1VW4gHnTz5wUAePFaS1xYYlRQwcEXaO7YI3coaP9SnsoV5HseN\nUDkKCQwiu6Ged39kpemwj/eDbJ8jqGcioZ13jK+L1lyS+jQmUC15I5jSnNL5\n8pIkN5ZKIYVtO4ac/YzzxU/7UNcjRqZjn8uhXUNjxqIN2wixDEY02ve9djNb\nnsbiPIdwMRu7VWKZ8ZvGA/Uj/LIn+0MZ0MrZtrg2EW32XYNVmbIdzlnUsG4j\nSz3+bht1Ira5e311qLFTOLhHp0SO3kY2FsA3Q9KtUoONF/Oi6YxewF6hxaK6\nGOqbBfePP58FiZQx9Fkjb2YVXmzotoevoXUhsXOD7bdHTOaGeknRs807pQHS\nX+jhsnMbThfXvmZCL2VBF+pu4O+Depf0uf07eaqTyexzqC0tLyJMDIm34Azm\nIF7lrQZcYCL21z8yndVqkpsJnSOrasVuctdUZXZRnWCeRLjNce8lAM/fDDWA\nLCaXkZOw2u7HXGwyrppVeBDEYcwA+9grEM3oETa7xFELAWz61yewq4SBfMt6\nYipH\r\n=8Z2T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.08090126b.0","@material/rtl":"8.0.0-canary.08090126b.0","@material/base":"8.0.0-canary.08090126b.0","@material/list":"8.0.0-canary.08090126b.0","@material/shape":"8.0.0-canary.08090126b.0","@material/theme":"8.0.0-canary.08090126b.0","@material/ripple":"8.0.0-canary.08090126b.0","@material/animation":"8.0.0-canary.08090126b.0","@material/elevation":"8.0.0-canary.08090126b.0","@material/typography":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.08090126b.0_1596742436215_0.6215828135268202","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/drawer","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.e8bf5b2ac.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e41d5a236cd99bad091ff2c57a88e78864ca19a3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":48,"integrity":"sha512-TMK7DGTlEdXrL5EQqojako/ROsM2BnLII3bkrvteIV6p76I7NY2Sk4qcNB+ucpYtUxphpAd9Vc3AyWRlgdX+jA==","signatures":[{"sig":"MEUCICJ6PyFb1b843GyK+/EnsIsM6T6NkMzjxlQDnG7atfoBAiEAzT49O7330E6ZGW3EoW6AL5BBpUiJJfLVAiT4lvlcWuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHtWCRA9TVsSAnZWagAAIM8P/RPVRXpU4T91rVgU6c4j\ntS+zSqkDR1q/YqBVS9RkEPMTGvyMmGOEoRnbjG7D6AzzbHl7D9rQkBOyN1o2\nOUIeUjjf1ekOcDJ11LEhxTPqntartqvdYmf/6MkBrkUqDHLvl78HFAJ7bWuH\n1/tydL+ZlSsbpCLxt41cJVuIwTsIcisyz2Q5wJ115wwWlgw934waMuoFXuuU\nZwHZymEZRr/yG6eFYzQH7XFe50rdTDvqrr9Z0TY1NWPPYgTp/U86qEQQhfaE\n8KYnu9GCJ8h0TXu2c1xDoct2AcWhgcEvvrI2hd5WXw+TWbufcfTz/UqXqfok\nCJllUuBSgLipTgMp2IbNrWIT1HlotrLh0vk8+yKaEtR7tpOcLclNqtpRvogs\n+o9p4d5lAk2xtwpaJyhw+cr9twvf9CD79DJSNZkWzcczU90XmA4ELGeV5p13\n6GFQUHQawnEMFhIguw16VQa0BhozgweuUqHloEmk0lHq0l0y66zotQ74Jvm0\n9iyvKUPHJS9vQbmS6wclSZn1GxvXr5e1SVb+V/F7kO0Z9dVyDYWft79Gjmxs\n84OdbMfGS/dnkJWbpex3BrGG3F9QCuKv/Geufm7wk2U8q7sQRqhfRq2DW6TP\n1fl9Rg3gtIPuLLk2reqxIel7YingebLQVINn42cPauMNnsP5wIARGc+qmAxz\nwsXT\r\n=ABbe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e8bf5b2ac.0","@material/rtl":"8.0.0-canary.e8bf5b2ac.0","@material/base":"8.0.0-canary.e8bf5b2ac.0","@material/list":"8.0.0-canary.e8bf5b2ac.0","@material/shape":"8.0.0-canary.e8bf5b2ac.0","@material/theme":"8.0.0-canary.e8bf5b2ac.0","@material/ripple":"8.0.0-canary.e8bf5b2ac.0","@material/animation":"8.0.0-canary.e8bf5b2ac.0","@material/elevation":"8.0.0-canary.e8bf5b2ac.0","@material/typography":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.e8bf5b2ac.0_1596750677995_0.608355937939205","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/drawer","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.e3b746208.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32b5ea9962fea9e75fb41202d68befec70d5dc40","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.e3b746208.0.tgz","fileCount":48,"integrity":"sha512-/LEGfjcKJSwoRnOfEhjE3eyhItHGWM3em4+rqvTYoLfhQ8PF85YAT1qwoeBRXu8UUPhAO4PLvUOfrjZVuCLEoQ==","signatures":[{"sig":"MEUCIQCYKmiOzdHPipDrTRPnIXTjYIZbPmo5iHro7/l2Greu1AIgCIIpXRmv1UMQ/C1DYdKlIG+qOBUKVJ1BdF/YGRGFHE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":922150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIP1CRA9TVsSAnZWagAAtt0P/As3MRMgue07UsCRCjn8\nDr8MhBvIGF2+hTWKATW4pYpW61L7LMz+vnk6TPgvodroL82OWEoZ/fHEpwgH\nAtRnwp7Lvyu/X63VO0ibHBlvFlRDYoAMCiakktonMZmIbfIrqEt2EyjZjNBi\nBZfZgIK/8+3dP+y9LMA/RDFvw33DiaNVnN2WubNgZQY9iITzuZJxk8Fkky1A\n8j8oveZeWPoKio5v9o+C4TjbFixvOCygPPlyIGFkqzn3BkNG/gy7x+JhAfSY\neRwZwiLWF8MUceF6ZE+iI90dl6G0Z/SX4vssj8dGi1BiWiGzfglzRYulY/T6\nvYAZVcehOW9mxd1H9UvqPOpwKByh/s0NcbLkcA9WMDKIiZON02UL5RfbRntX\n1/XOlLWuYracuAf1u/zBXgXfp67gmjr5K0csvm2qjSGzDjHlf4sbh1eic2gs\niUS70YGYtdgBVSBAMh6tGA+tPVX1oonoDR1MJNeumYiMw/xLe4M2R6rWmpWX\nj+B3UDmEBDJv6HUPZoli212+igf7BchHBeH9tzrcNVCj+RzF5Q7A2UgO7MR2\nBJ9U8tNmQEUPvtBRqRzCJAUXeUSzufrwGJNrEdDe+jBPxApUMWPufcfZEpie\nCWpbmttJMgxBFLFyodYwuOLqW/EEDwGbpkjTmsubtT6BUttatCrV9C4dGxDB\nrEan\r\n=tAx4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e3b746208.0","@material/rtl":"8.0.0-canary.e3b746208.0","@material/base":"8.0.0-canary.e3b746208.0","@material/list":"8.0.0-canary.e3b746208.0","@material/shape":"8.0.0-canary.e3b746208.0","@material/theme":"8.0.0-canary.e3b746208.0","@material/ripple":"8.0.0-canary.e3b746208.0","@material/animation":"8.0.0-canary.e3b746208.0","@material/elevation":"8.0.0-canary.e3b746208.0","@material/typography":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.e3b746208.0_1596752884742_0.9092139529160121","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/drawer","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.96a640534.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d397f2d13847449784179cf5eb74498bc6ac2336","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.96a640534.0.tgz","fileCount":48,"integrity":"sha512-DWffYG9r8/A47vGJMfXuCYlezoMGGYznnnqiER0zbpn+3Vp2+HtVLO8MQ3xgTm8ycCbIjHA0369ssgl2QmhGew==","signatures":[{"sig":"MEYCIQCzRnX0oQfL6Jx4S/L5Go4YlJerU1L4nuZ7KCKnrHoIXAIhAPEReRB/JCTQ/uTfv+xVm+dyQ9kYvLEhAnsPYe/GM4On","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIdnCRA9TVsSAnZWagAAQR4P+wdq45FH4jeh5NBdyKpD\n33nE7ePiWLV2iWBshrXfzJ6VevBFnjaiQtHQlv982ZYGDnPdsUBDpEQy+6T5\n5mKdqhTVVO2xF0qX8A6N0h4DALm0dCaIzYFAOHynVbBXau6fx3jdeFds13+W\nk0LCsvYlpQ9dPn6BJhjOLPnwqBXDUsLEtrdiC465+iTY8KPaaU6wPrHOig0G\nmEIXlboXYINu/siR+nxklFzPqzY2HIC8Zp/8VS18Mj7pZ/JbdhJSQT/5AQ85\nzUu2QPK6LYBp06LFpghlBve27g66Zfppvsdy+MrjleFhFhIOnHGhp7AF+OzI\nAi7WB8skCG7d48ZLJUQ7dPuvHiUhSind0SpL4ZukSZGstjG3KvItn5RupKeb\nuj+lqVn1Hg/aDg9YwAKn+GX2CpJA7Fy3eNo4vY/THXhL/Miz+uRnP9xdSVq4\ntl7YD6fWB/7/G+YugKmANwQY1WT+UNY4q3A9yWz6KXCNmLDFYGJyUIH+5pd8\nDQ69O5KgavxjaFelDOq3gwdKYR/dyUCpLEn9K1rPG39HlrCaHn2S0smybdZI\nNiW+2t3dgbMBhpTuLMvWZYrrN4j8kRTEut6RD2jDPFpmlmveCoisI4+jTKHs\nX8e3wPyY37BsoIwx+rE84LBHl6Y2L6haw+jJqvbOmK3e6cZ7n+l/A//kIqHO\nfypq\r\n=Fo3+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.96a640534.0","@material/rtl":"8.0.0-canary.96a640534.0","@material/base":"8.0.0-canary.96a640534.0","@material/list":"8.0.0-canary.96a640534.0","@material/shape":"8.0.0-canary.96a640534.0","@material/theme":"8.0.0-canary.96a640534.0","@material/ripple":"8.0.0-canary.96a640534.0","@material/animation":"8.0.0-canary.96a640534.0","@material/elevation":"8.0.0-canary.96a640534.0","@material/typography":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.96a640534.0_1596753766677_0.5920770630903005","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/drawer","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.9f9aac825.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03ab38553ee0688875e90e70b2c3f0e4428b0cda","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.9f9aac825.0.tgz","fileCount":48,"integrity":"sha512-elxkAICgzaCrOLklWqBbDy1NCcndvY0osb8tWcN7gcxjfDD8lrSRvsDl8gkWWeCFbmN2kPjp0u9s4a+SbBKWtA==","signatures":[{"sig":"MEYCIQCMGH5z+BxfDOip/69vezNvGC/m+jzjDP4RPrOphjWo2QIhAIcqO8yjIdYs2XUUcfZhKTyb5sv0a1rTxZXpOIVmY/Ya","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb8VCRA9TVsSAnZWagAABoEP/1LTnrQkv+Hrb/4C1lHl\nNSTL14eGp6WCFrECuGh0Ak5uizjTiz/PSXmOjqw8LI5MV5toD/zYa1aNe4Ih\nAYR60D6C7KemgQYcCfcGJR4fCWEkwI7p7IZ4B4s7mpNIBhMGy3wwzzvLzU6r\nP9hJaN5YlM+2u7Y6NNdTOfMpLp4+n9Hc3ztWAEO7CL93unVbypKtvv6euuKu\nxecLoSjIO6zsRLFwc2PXszlUwlxS2vuM5U8QBVqyldQxZtUYcVRDtWtWdYcW\n2opWhQBfct5XbxGQLR13KELU2S2ZDuwCu9CUcnEoSXiv37W4noMSuNQLwagt\n3WdReCN5ElKaivz2/uSrEjVtSJ8kdkbccNYb0VQZm3pXXN7tZ/I1XFDkMfL7\nX4f5oJVRZPjjiVsaY/jbVIxI4FuLW7yN3jZOU4rmAaKZCwMViJ/w9ZKvVoeW\ntsRpGn6z6Ys5N4vxXSRSJz0I2CkTXPqE6gH0J0eTZDpNpYTcZURTW9J86WLK\neB82w9xmh8EPhJOmJ/UKDxCPaaz/g4EYcke19rmBo1IZnmIOanLQeaUTTkQK\neaVI5Nz5knnS2uwM5adJZIiL81s7MHFscVrcmOt6UHEm3eXKV5fU90H0sQlr\nEWNQbQGVksUeUPKIG2/GOEY0eR8hH+DHVecTgz3dNpkr1mly1BDnEZ6Qdnz9\nj11c\r\n=HJ/8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9f9aac825.0","@material/rtl":"8.0.0-canary.9f9aac825.0","@material/base":"8.0.0-canary.9f9aac825.0","@material/list":"8.0.0-canary.9f9aac825.0","@material/shape":"8.0.0-canary.9f9aac825.0","@material/theme":"8.0.0-canary.9f9aac825.0","@material/ripple":"8.0.0-canary.9f9aac825.0","@material/animation":"8.0.0-canary.9f9aac825.0","@material/elevation":"8.0.0-canary.9f9aac825.0","@material/typography":"8.0.0-canary.9f9aac825.0","@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.9f9aac825.0_1596833556779_0.04652848835740597","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/drawer","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.fc65fd00b.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc5cb359fca15c1da56a1c5774eb7a3c06377ff3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.fc65fd00b.0.tgz","fileCount":48,"integrity":"sha512-q5/HP0SmNc1QXX+uzaUF0ynjLrzKNI5T2ZhJd8jc6LTv/Ca3wLIOYk9lhoH65SnLtf5tUpTlbTsH1gmIbClYoQ==","signatures":[{"sig":"MEUCIQC5uttN+A7BSq64js/xLRMF/DR4VZ6jmaKINtfVrSmVCAIgDAEGuwFV6pqJFnyBiSJUg1eWAQkKqNrZDgqg/KzI010=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWYvCRA9TVsSAnZWagAArDoP/A9cwhHIYRp+5ioVPsXy\nGt+nUlVn4NgwOU8N3M4trsjzcM0mF6036YmI4LnbTmB9O/MPRtXwiGBlcTZy\nalXVNdlSJy93S7AmtE9YuCC8e+MEkSEFl7VZa6DhmgmqcDY9vBGQqIyV1dYz\n+YFSgMMLmB6nvNpcAjZjwK6cOubzJwLfBCgGHgyGm/dubdtUzn2NtKeVjWuR\n3AlEGW0LpHomJmRCk5m6b7CyQcz5l/Igc1oxB/okQ8QY+y4gg6dvu653duF/\n8YvJm4yUv7QMb1UQqrd2h0baqn6JBynI0LAEbAUm8m2u/NJOMY6h4s2pSY8q\nv6LFQlwf4brOSgsHPoZ/CJ3QCM5H1MBBpMocxgFwppaVsP6XHZBC4XKv7qgf\nM1UMCytHp2WBVQYTDMpXITu4CvHtSz6Tf9B2r2ZPyaRNd9ourniHj8tH2Ro/\nDYztZzvIq5FFPde5bNoGtNcHMFWmdNHPzc7rnLi5ooKrv2lHkcKPKAnMMmFy\n61N5+uWNO4wwIc2RUWAcCljVt7ViTujXFHpJ8zLV0PFcAnEywBU6Rqn9XzQk\nn8D2QXqLgAWgR/f+E10gCU7srWeiwCry22DklUo7UyOwoiz4doped9P17bmc\noO7IQSWDFNCqMjpRInVZvWIQ9qriVlGMwuJ2HJ7PYykLPsWo+6Itsj+1PPdL\nJUlD\r\n=IKnK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fc65fd00b.0","@material/rtl":"8.0.0-canary.fc65fd00b.0","@material/base":"8.0.0-canary.fc65fd00b.0","@material/list":"8.0.0-canary.fc65fd00b.0","@material/shape":"8.0.0-canary.fc65fd00b.0","@material/theme":"8.0.0-canary.fc65fd00b.0","@material/ripple":"8.0.0-canary.fc65fd00b.0","@material/animation":"8.0.0-canary.fc65fd00b.0","@material/elevation":"8.0.0-canary.fc65fd00b.0","@material/typography":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.fc65fd00b.0_1597072942490_0.03406319737897334","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/drawer","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.02e372c5f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d0dc3507163e08f445c7079b95c8723a434b2cd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.02e372c5f.0.tgz","fileCount":48,"integrity":"sha512-eybZXzIKRB3iNN5zUOTDtOx418yLI2sH9X1eoVj/VVUiGYOqc6t3EVCHxTA4wLCYHL9HIBU/JSHqRAmYY2Oa7A==","signatures":[{"sig":"MEUCIQCotnZXV0ZqiZYmwmNl4+IZfhyp5NY3XtHjbLXa/ZYbAgIgeojyMFqWqkQqyME56NJoLeQQGGZCB6XJauTxojKx8p8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWynCRA9TVsSAnZWagAAwVAP/0x6my70VWR8uX0zW54m\nVZL15sBRycs5fcsnW/vlWIpyuqcw/+diRJfFA+pLqW+Mi59EEGrq49WVPP4g\nZiT0UvpN1Gdw6LBgckiT+g6EF0AG58xRaxZjH9aezgbu/Cp/uqpTu26qFcuI\n0H6wJLFf+FzRcg+NA44jmjV+tmR9NeJwh/4KPoiDqJy9b4uN0/Bd/bRyXRvP\nBZhqBPBiHszmZEDPM4eqCDdL7yw2uCMWkOrQ/kKC6QOWe6WnlrirjGZMCfVt\ntCROfv1tPrsb2Ajekkq4PrFNlIJ5ayMvkZ7kD+ZyDthiZZWQHWjOOBvrUguu\ntOceCEi0sFjtga07EdQAHzZHhtfv0Od5NKYqVZOpftbLhOiSfLKzVYuoI5D3\nDXgyukv/s7ZNE89XN7NMk40Iz6j03y0zO8C50gE4gN2G+pyGXyFHVu/44Qw3\nAP+13oB05NyNponCavqDavH6P/00ZDvfv5Xzd2GCMqEFdZPCmqAvlmth05P4\nNhrP79RKkKZfkbIJLRz4gbU9aQvbZJhyNB4f1Uuy9irnHDjycV7B5QKJK5G3\nDzHzr31FRdw097c+rJLP4YsyZVWmM2ZCX+7GJLkOyQtl2bnPJ3GxDibVAiBt\njQHe5lzPZyW3vGnLJXXzab7Pihjt7xdIBsZhIpo+SsJAJZHGApl3jUu9VKSB\nFWkn\r\n=edAq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.02e372c5f.0","@material/rtl":"8.0.0-canary.02e372c5f.0","@material/base":"8.0.0-canary.02e372c5f.0","@material/list":"8.0.0-canary.02e372c5f.0","@material/shape":"8.0.0-canary.02e372c5f.0","@material/theme":"8.0.0-canary.02e372c5f.0","@material/ripple":"8.0.0-canary.02e372c5f.0","@material/animation":"8.0.0-canary.02e372c5f.0","@material/elevation":"8.0.0-canary.02e372c5f.0","@material/typography":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.02e372c5f.0_1597074598771_0.3132512485922929","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/drawer","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.66669e3b6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01d907cd56f1e75c786336a2f53d2fa8bb685beb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.66669e3b6.0.tgz","fileCount":48,"integrity":"sha512-Z7vSnr5tFOztb1E8W86A7OkqeVJ/MiAZnJ7AVJaL4UEBSx5ELnQqUT99D9mUV7j7yAXe0+51T4ALUDIK/PpPjA==","signatures":[{"sig":"MEUCIQCWNXMF1CACOX3ctDpuuGNwi9yDPmNRUIC4M4H28YBiqwIgJhrlwoJTcsbKwWXbU/VVfmrH58rzwAc7LEGFMndq+Ho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW2XCRA9TVsSAnZWagAATDMP/1A3/7vp62iG0bnA33k6\nyrzt6Rm54SKrtEQ47VHswT+nvDEGUQ2Vn5GnveMnnQO1WNHpbRVGsSY7Rh7h\nWW6lvCpFZgTz4s6faKtLuvQ7p1vyK3smSfiFEF8KUq3ChbBDn/lzMT5lAeZb\ns1mZYEUtM5QdaI8mr3S5wwy30q6pZV/zuoeXZ5pmvCDs7wpUKbEikvMrlEg7\nwzbutuWHdEOYVymKoZJtuNLML/tkGjvt9qwxTMXYMhJl/pGGBoNyHI66sc6L\n0A1EDmulbgNCO9+aURMZEIBibMGiVwggz6hil6aXgXUGGETbuQji/nP2U+dl\nfWv1rtG4x0dRW+d6jKCS2mwZug+XjhE3gCiCW92Qp4Q3eiTQz8lOeJ1ntxZG\nsX+vCdQdcKDnAoj9ScQhfYVIr38X4/Lk8ZxfZ3bz30/UKkUIgLuSKCFQxBNc\n3TDuYgElDwfAWq1HvSYbZ86E3FLRZ3YdZsowCLXTEF0jN+bBZuDGkadcpr14\n2TG0WqXyWfGg0Sw09vhaCVmOIr1MRfm6R06goxwiYn1nQVShDrtO/i78Gpuq\nYO6cqOCQ8bht04AG5+qbfsxamd15xEQeVzoOhOgUMmpoV4zwe4WlniysTe5l\nm6sT/z3bhmuTpquXxqqCGlgHCZ5LVIzAYYPUtzqLcA+NYepReZJPzGJrM5Wh\nhmll\r\n=4+od\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.66669e3b6.0","@material/rtl":"8.0.0-canary.66669e3b6.0","@material/base":"8.0.0-canary.66669e3b6.0","@material/list":"8.0.0-canary.66669e3b6.0","@material/shape":"8.0.0-canary.66669e3b6.0","@material/theme":"8.0.0-canary.66669e3b6.0","@material/ripple":"8.0.0-canary.66669e3b6.0","@material/animation":"8.0.0-canary.66669e3b6.0","@material/elevation":"8.0.0-canary.66669e3b6.0","@material/typography":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.66669e3b6.0_1597074838528_0.550104656550519","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/drawer","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.6d1ea9761.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"891a8878c4540323ae3309a7a5306f0151755aac","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.6d1ea9761.0.tgz","fileCount":48,"integrity":"sha512-16oraT24fwWnndeNcflAxU+MxObq6SSH/25NXFfCCaubrTRoEHyoL/7kRnUXoQ6z8vdoZDDYU9C/xsCA+ZKLNg==","signatures":[{"sig":"MEQCIFEOd01nTy9snm7DIMmXsn5fVaEuBtrnTHYzsRTfJ9sXAiBpfJhwm6QMb8kehRIN38CpgeDz0DG/V2f1vYS/o6EU7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":904247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqvoCRA9TVsSAnZWagAArXUP/2upnas7rxToyhsUjHkb\nclxG4+iXsWiGUiwakWSq0SF45dtgXKOTgl9KZ6ZbN+Hsh4er1ZzNXyrrTPru\n7KlUZgEm4DStIfL19I2Oyp/bbM2C9ZVr18bcXEP+ujpvOpa80dTIpiPrI3Wr\nuOmgeWLoMUpLEMPDjqDg1Z+1GUJewVlvNFzfZv8m1ycaDhiTjWessTX29oj0\nfgyrP2pdLXFkpqWRMaY0VxbOR+LFcN1yfuIPmm5sm5RUKblzWbeyFcGcNdna\nSpxNx6V1uMtLsoL3ppYFVQz11dHIY086DWlfE3LQRu5VFdBunbXyZLc2Lj3p\nyRXACHH1e9/BE4QwZ/pp0dDOKIBB5d8eh0g9L73l4lj2OwdE2zv7cPhK+NaT\n7fBxHkC4dooJ4tBeKkc2j4Dv9/syUVIuKqEtYhT5afK46QME7jskTxmD3pwJ\nTzgQ82NuZXtEcCYjrN3Jp34CP2jyInXdf7dcX2tvj/R26A5ZRgWoABbJZRty\nF7IIEzrYd1f9DBb+zSIOanPeT3tmuvpRCJYPo7UJUEViZ6pidAowRT2vkjlf\nxe6TEfTA97jgYMTxjD0uete7LJXzQOJjea576aLieVCrr82ReKaj8nZ3osoN\nh0UUX1HEGvCuL2wnpCSwKYVlTY3ETElwO/CVV0vqCN1XR6PDYLF83RmB40S5\ntZdF\r\n=d7Zd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6d1ea9761.0","@material/rtl":"8.0.0-canary.6d1ea9761.0","@material/base":"8.0.0-canary.6d1ea9761.0","@material/list":"8.0.0-canary.6d1ea9761.0","@material/shape":"8.0.0-canary.6d1ea9761.0","@material/theme":"8.0.0-canary.6d1ea9761.0","@material/ripple":"8.0.0-canary.6d1ea9761.0","@material/animation":"8.0.0-canary.6d1ea9761.0","@material/elevation":"8.0.0-canary.6d1ea9761.0","@material/typography":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.6d1ea9761.0_1597156327745_0.9160195379125318","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/drawer","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.79414bf9f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8e4a01afb0fd0f555c7a5ffd98f4609fc20df1b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.79414bf9f.0.tgz","fileCount":48,"integrity":"sha512-UphgZ1HV5DE7uOpiVAJSPpmD1059MadBXgndCwhng5G886ra41k3zrbiBshBRKjKvkmqnTkUt8DFPYot4woNgw==","signatures":[{"sig":"MEUCIQCRC51DGyZr2zB7W78hJQcQdMrWacx85LGMk355rGaDEQIgddYetyjZcUoJ8oydLOpi8Trv5lfi0sdwczpEIb52hJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":905887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMut4CRA9TVsSAnZWagAAb10P/jEE+/eREsiXzysY3Xd+\nvfOxfXA3oSxuHYJqY4xpdFiefnVKjLtkwwC5HzL3PK6ImfMt/kSNB4QfFq3f\njNdIvXznCwrCRTF3VkVstW30mPyXX0sYcbsIbPnsX0XIWW1JS9I5SU5dk7Qb\n5ZONWMFCddp1BUDFPB7hZVycCiss3tyVsPLAOfDFLsxHl39vYpHBYX7zbWQE\nnHJPwCtPqKK6YXhSSkVabNpcTN4JsqhtUmINgJ6o0icES82OffpYkuTt6I3Z\nRrAn3RCx16C1vgoo0SVPX4a4Uit8VQ1Nt70GGPwp3d2en9C09Y8fCLLaQ3Q0\nH0koEx4O3bQZ9rXnEBD/vkNV0pHplzU3aIJ6wVsCjMgacVNBUJxXcPKQhVzR\n7Nh8JLmLZBDUsBNGfn/yUCF+aq7EEIuhsQb5f94ycIYQDbW76lfshDPUKRD7\na+Ls8hQ7dtzaInr/befjFkKGIZY7hSwU4hc2+qrDoFj+08IkgmYqwn4dpGkh\ncM0dpsF7q1trJV8Xpbrt1Q5t5azF36soxGuIgfjxa+H2FavMIsUOljka2AX/\nvrvQByhQazXe3MT2FOJyOR5mHKPT+XWtAptULRAG6AhBJLxNsOPN8Csk0gEc\nILUQGac/nJq2S5TOszOCBK4Yl0ldablKEsiKywiYbfL8ixDoDpzym3/5XxAL\ntIaU\r\n=/FsQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.79414bf9f.0","@material/rtl":"8.0.0-canary.79414bf9f.0","@material/base":"8.0.0-canary.79414bf9f.0","@material/list":"8.0.0-canary.79414bf9f.0","@material/shape":"8.0.0-canary.79414bf9f.0","@material/theme":"8.0.0-canary.79414bf9f.0","@material/ripple":"8.0.0-canary.79414bf9f.0","@material/animation":"8.0.0-canary.79414bf9f.0","@material/elevation":"8.0.0-canary.79414bf9f.0","@material/typography":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.79414bf9f.0_1597172599551_0.7146331400485557","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/drawer","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.85a5272df.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a1b4b3d097cab90b3046958db4fb6b5f8b7b596","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.85a5272df.0.tgz","fileCount":48,"integrity":"sha512-5+IPUtrtpC4WkqbQzCrUbNiPrdzf87WB0hmjxt/oA63TxWhaJo6I59lvxl98q5UHYeOdmFRXOaYHfY8JMfAGNw==","signatures":[{"sig":"MEUCIQDIrsNiwI8Jk8UfIA/0EgrmL1OjHmFgxc37DUG6agMhdAIgDsd1D9JPa3T+yX17ynAo5FHPA2SDdC+I6qBRHk4sSDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvr8CRA9TVsSAnZWagAAldsQAKMmtzEWEbeMn88/aBJj\n+9Ub/YVhvcSSeDltIG1xatoNto+tMMv0ERUQZY2uS8yBt7qbNE436hspl6cQ\n1mvrfizazrJpz2/XNLgRKXFBjKS7iRZyemOb6rGpNdWQwM8Hgi/cLpYFMIWk\nyCBczzMPzW8j2jqOriEd+ezENbUaYbBTtlGEf1UuKsgRsHknr7qEsqhfrClC\n2oR35NOcElKIbWBmN5fYKrYZpPrU+Ilktw8Fmia+1X5Ezi2n+akrStEeTf98\nvSLaoQf3w68uT2X30Oye8uHlgUvNWC+RalMyWJf5euVbWWMEhnkkAUgEUwrm\nbJE2lESNVyCAKC2K5yNh2oRZQ6tr5j86npKr+Eqqz4xNgcLD9eyJm9g5Dr6+\nLsiIS8gAbEQ1CE4N75JY81mXk7IjCjZ1MI/m+6KqGHumgIffY7tt8gc9ESo5\nFFL52tZRcYtzE7GTdX+MSaxVywOV3sV1GbLIFh9AgZNd9HSFxYOTBx4apR7G\nVkRk7v0JvwV/wbJ/Bqi0TDdNDtWIkF35AyimEk7ylUcSeKyJ4mFjQcbRbdd1\n+rqvIhmKkMxxYXZBDj1yGeBMdJ2QPjZqd5b6Dp0jjY5VTKiZpjPL2xnromfn\n5yH4tAuworufjey34VegAA1/StoFTMgb9lwrfYBOjmTgzAYfRg7goNbB+K7a\n+jHA\r\n=WB77\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85a5272df.0","@material/rtl":"8.0.0-canary.85a5272df.0","@material/base":"8.0.0-canary.85a5272df.0","@material/list":"8.0.0-canary.85a5272df.0","@material/shape":"8.0.0-canary.85a5272df.0","@material/theme":"8.0.0-canary.85a5272df.0","@material/ripple":"8.0.0-canary.85a5272df.0","@material/animation":"8.0.0-canary.85a5272df.0","@material/elevation":"8.0.0-canary.85a5272df.0","@material/typography":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.85a5272df.0_1597176571393_0.689077402214703","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/drawer","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.fda053eb8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfe97c15ae29cbe02d063236364f4e233deafbb7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.fda053eb8.0.tgz","fileCount":48,"integrity":"sha512-Z/tM5SoBt9vB6gG28vefpx0jM7XWhk1uZWGWhc4+pzKSZoqCl0vHnklGgLPAc0wDZ7obwdDVRg59zVmsnuP27g==","signatures":[{"sig":"MEUCIH+6A0MyqOSpCqFiHD2/2T0sbSohDvsqf/fXDhyUFhyMAiEAl7hrRQFTI1QRKCWYl9riDO+B0vPdPdT1WkkgX0qTaoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEuICRA9TVsSAnZWagAAOWgP/R02XxdE2SX0l9/5zRBK\n6WbGObMfTAJBNaxrfh7WA1KTsh1002IL5m4EUuIxr+SHxJVj8oXGtHH15PjZ\no9OiRmj93azOKhTs7pQmeTCwwDNWpM8K9oimr1Wwo3HC9LZ2He6uREMqmh25\nsknBvghJ0LskVPIgikFSUpeJNNREErEaGb01xI1Ay+sjmF0A0K8U1TkNEwGL\n6y7BH4gOFBR98TcgKWaBhxlJKRIkHrreFvd5gQIk10K/oXSdg35AVth8QgPN\nSNfWiPuKJpmSCr06RXtRZOBy1uZGgGTwNFWmkO4xTZ1fQcWXe2VyQyIumsAD\nfeTYl3gLtIDByYV/AnGI5Uiw8EN9UTUayV2SL0TBV6WKZTTtu+LWXQpnEeC0\naT1UIw9LzJIFt2kgHxSa0KR04UmPMlE+ZDB38f2jWrL+V5RqVI+Y3HIRXWIl\n3y2DUngpNLAVpzn/Y3B5PqB459mUwYYAld2/BPkrWEjWanPS//b2yxytz3Rk\nfSW69HGiwmyX37Wm2KgQeeYQG3zrJPNuhpS2gxuOuJL8wXjhnh1nIZWsxVRE\n2pJ6yE4vERhIquJmffsJLafW1FhLMrXwAcBaDRDvlVo21VxJKNkZdKL3tFju\nDvxbyYMsueBL2Bx47F4IiXugVCaMUUb/ia1ZIX1JA2VusEc3JVRejyuq4OZp\nbv6T\r\n=9ueq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fda053eb8.0","@material/rtl":"8.0.0-canary.fda053eb8.0","@material/base":"8.0.0-canary.fda053eb8.0","@material/list":"8.0.0-canary.fda053eb8.0","@material/shape":"8.0.0-canary.fda053eb8.0","@material/theme":"8.0.0-canary.fda053eb8.0","@material/ripple":"8.0.0-canary.fda053eb8.0","@material/animation":"8.0.0-canary.fda053eb8.0","@material/elevation":"8.0.0-canary.fda053eb8.0","@material/typography":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.fda053eb8.0_1597262727721_0.8808063659927039","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/drawer","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.760873445.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88a5c723a16b2f347fb42dc595feb2b4637be3d0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.760873445.0.tgz","fileCount":48,"integrity":"sha512-zU86QMUmPNNGnjeI/Hz9qGqgGI6X5X04GykjaO1YnsGNYXh2Y3eCzREKwNHCycsf+Dt8XtY7c1xVBchmsah9xA==","signatures":[{"sig":"MEYCIQDd7AAbsgWMV3wzzyRnlbjm9sHI9D6PrtPIQLpD+/itcgIhALi/uG9Q0hngx6xlarv4O0zj0RBznknJfiUuMvDUsehX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGLACRA9TVsSAnZWagAAsuwP/2e6pAyfMn736OexcMjh\n4jCijsbXvU9OogqKWZu2xM+MZaN4rADJzgSgMSQc+8enXPIF9Gar2v0bpTNu\nUEhxi2SBvpiiKc1RgjfxLr1mRBhXv09oxvRGohBFL6HiZurIs5mjUDWYcO3b\nv4uzNGvUsTqI/IknvxXCqdqz9FZ+1K42ddmAMiskd1q2LBi+HFwLWgKMTP5Y\neUaxMjnPv/qlK1a7U5TXGngq5iGZIyN6p8KnQ9tVUazOuxbw/9Wqj9OycAr6\nmLtv/keJXVwIM569srLfGtLrYkGSbicPFRuOaPJRtG2yUI0OvPIsXvZ0ZL9l\nDFb7evqkCvSCMUagDMq+tA+5UuLEulxU9QLOpBC6LTz4FXMhINgGld8yWcN/\n+cZXOi9f+9DspoO+aBAqnPeYOO3qwZbJufyx/sarqCJxD1uty6oj3dInKc/N\nh7FhZ6QkuBlQPePyxv95wvLwCf0SsKtl/dVl1hig3pYJJKXNHtOVkrmTdNwv\nrFDWEVleb1ySbHLnj/ipX9p/Rm0g4J94JXeoZNJU/1HrJ1iJjR8cpxtnkB4s\n98gfvGH3TQAZa83TsIgGqH/jC0UFwCrH6ldYFxnKdRy3qe9eGpMXytS0wANx\nzV0xiZab4KHE1SzsIOkWw0Ol0Viqrk/1kBoLmtR7uGDCKBBA8iFhODm/up9i\nsW/f\r\n=bLTy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.760873445.0","@material/rtl":"8.0.0-canary.760873445.0","@material/base":"8.0.0-canary.760873445.0","@material/list":"8.0.0-canary.760873445.0","@material/shape":"8.0.0-canary.760873445.0","@material/theme":"8.0.0-canary.760873445.0","@material/ripple":"8.0.0-canary.760873445.0","@material/animation":"8.0.0-canary.760873445.0","@material/elevation":"8.0.0-canary.760873445.0","@material/typography":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.760873445.0_1597268672076_0.707879818087654","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/drawer","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.2f4711a30.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"823ac73b2489ef2bdf379b7adb43ee7355e2f8f1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.2f4711a30.0.tgz","fileCount":48,"integrity":"sha512-VCMe2f8xPWSOOk6XNkQVHNFp4zzIhN0NByYwsu7J0Y6rchyap6D2ZLQRVje5HLHcI9Txuh7vQ3E97ydf8zlNiw==","signatures":[{"sig":"MEUCIB91k7elMNw7c58u1X9eVALBeSXGglKJmdfheFC0hEIgAiEAvxiyQpdW4trtO8LB7ED3XT3IiHiPZEgv6DVD8XvqofM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGUZCRA9TVsSAnZWagAAmKAP+QHgVMrXh7CNrUP7wyKT\nnst1g+LUTCVNDj+Skb16wst/vJS5T7TAcZmRfkSvYjEiW7EA+/WdUP8xSx6q\nPwG57CyZWl9vMbi3u+kfqf47m8GSQxPyo3UsGwdCKGFtVchAXkZFcCkWQsNB\njNA1MdWsRuNZ1yS0hFNcKJZgIphVef/BNlH0HmvEuerLZWF/56AWq6A/9cVr\nkYgvux5EzyH7Lb0+nZ7kBTN2LbFkQwRUQbOJN5O+ilK3cdw+T+LXfggwxkeV\nLNLFEhZInXvaCaqIEWqMhVakMBAtiNN+W9FBkLqRzrxT8PFYJPEcLJz1qHAy\n+ruzeLd8dRK7JcRC9oyJKQuR8Ba5a4Mq+4kZ/KnRe9spiylRjgnN2y8uehFo\nVQk1OUAQBh2Xcx7vwey+bZa5PgcKHEAEJZkV73ZKcdkFS0E+dwG3yY0bf5Jz\nldqVTUWDr++9t/xvDQ1uxPr/N091SFKULBFXlLhp1aZaWrTNKVJgTq8FSVCz\nlQ9TQb0tQmta9b7BuAVWJ+Uoo0LeFf3gIcsvyxociJNYHAuKtBndcSC7Z/n/\nhSJZWjAunoqYCf6KRKRfsDNNsTVqd22bVsUUotKgzIC3t69RifhDBMjd9coB\n+jqLJ+J0lzZaJNRyA+EYWU9GLUh0lOymrML96/9xobpzl+7ghOJlhLlkODsm\nywg3\r\n=mZTM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2f4711a30.0","@material/rtl":"8.0.0-canary.2f4711a30.0","@material/base":"8.0.0-canary.2f4711a30.0","@material/list":"8.0.0-canary.2f4711a30.0","@material/shape":"8.0.0-canary.2f4711a30.0","@material/theme":"8.0.0-canary.2f4711a30.0","@material/ripple":"8.0.0-canary.2f4711a30.0","@material/animation":"8.0.0-canary.2f4711a30.0","@material/elevation":"8.0.0-canary.2f4711a30.0","@material/typography":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.2f4711a30.0_1597269272683_0.3316456836087509","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/drawer","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.2d72f3659.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f6a002c778bd44574c05f1c9fec7ff6a305d4f7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.2d72f3659.0.tgz","fileCount":48,"integrity":"sha512-5qKQFcu4iSXXrispzjX+6irDaWhS4DXvH/8I+836jerqcxVM7LK6gUM44+CP9Z1DqB/I8HukVnGpOL3AocHqkA==","signatures":[{"sig":"MEYCIQCgQDfD475Q27EmhPdxDDmRZkwd/rGR1yXSRKxobZXSjQIhAIr7JrokoNrcd3awaCIxQhzonOGIJhLoz88LpvNx6jcM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGbdCRA9TVsSAnZWagAAOd4QAI8ZrT5XFDQP94RXi0Bt\nHWYSM4rYKTHq9k4jnMNXFYkl66HM8WKE1+xzeiB4kO2W08Ydzs2TfY5j/iWz\nn3YqZvN4dKx06gS6Afw+v1ErMPhqpPk6wNgOfHBN2tZsoqi1Q0CBs2KuMBw8\nPXTu9bD3TPxEk13tDrUB8PFINuDbpgrZzmzdEEevYWD2AMmaQj1dzvGL7M9c\nECbaPbBrZXnwwrVVd2BYiPjuWFA3v/s+Gb7xdR4BDzwFG4xjaHdEEMacu6if\neNOg2pCqDHo47t0VnHA+B/7q4sFV1O14vQmuBquBLCqUUmSSiOCOH1CBKgf+\ngzq4+n8LkJq1GGRkn+qMTpGugQbnOHco31T8+BMRd0Bu8d9D5uMqDjWPnFM/\nrxOprYna04sjrZco8vVwttPhPpFMpAWfbsTLE9fnR41p34KLOczPrc1/OcJm\nh4OODM0yphE+YYnGHMzfoTNMUP2y9lxLlRm+LD3Mbmn3yYJFGPO81k+z1rHF\nPun9oD47ssut4Ndo0K7BPNeNbqedenlS4hnlqB71Z76xGNhUhOuwHHUSdzic\nL4xhagfsNhfzWMOxhRm7AHHMw98p6PuI6wklZ0rj5S42wo3cpV2mjr8Bvf/7\nm3UZ5igm6zaCLRcTmlAgiVaaQXGsZDlYZVBkZrB8f0vO53NndNv2XjYfbD48\nJtpy\r\n=FVfi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2d72f3659.0","@material/rtl":"8.0.0-canary.2d72f3659.0","@material/base":"8.0.0-canary.2d72f3659.0","@material/list":"8.0.0-canary.2d72f3659.0","@material/shape":"8.0.0-canary.2d72f3659.0","@material/theme":"8.0.0-canary.2d72f3659.0","@material/ripple":"8.0.0-canary.2d72f3659.0","@material/animation":"8.0.0-canary.2d72f3659.0","@material/elevation":"8.0.0-canary.2d72f3659.0","@material/typography":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.2d72f3659.0_1597269724708_0.7647110785636415","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/drawer","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.1fee70a5e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bbdb93ac91e9418ef9242492a46cfd8b9f3db7f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.1fee70a5e.0.tgz","fileCount":48,"integrity":"sha512-9vp5vdgVUKrKllD0sQJmeuhFfLXXpN5DSedOtifrfeNy5rWxYuuNGm/ZFvzfd3//Gz1+LoM4QhRUnwjxpfXjWw==","signatures":[{"sig":"MEQCICeqsJ27kRB7lFnxcGz/QaaI5AcrGgX+gGfcbuyS/aEzAiAKabAOKdJ9CJUhY/C1Vn5ERvUQL43u20r7rW4KBiO5+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHt7CRA9TVsSAnZWagAAThUQAJXHpVwadzt59vCh1ahD\nx1SD7Vbcd2nYlKs4fHgfjA4vrAY3fbK62y0c6HD8jZgZzyG3d1eK9OQnrFXY\nJex+9dNAYPa/iIpv2ffJm08dnMLsYU2VrA7M3dqyrmjGxgbCWIvGMkGRnBtI\nQ2onjteywfArABV7fILSXv+NZ5kzp4KwVnVjJi0rlumdADC/ohdFsA6CzM7h\nBcx4P9SAegcE25t77nOOUJqC68N1BLJPRXC7nwzvEYp5PSKbOv6AEspqEmrl\nXXIXXo8tUKvzkXr4jzccrJ34IDFs595c1shOzRz3x2qTOvX7X87rcrTXy+YY\nKtLKZuBMKI2eKsKzLY/cpaCNf1YOIjA5R9gUi0rirGCn9q7lIXQnrFA6Bi/F\nXl1PreCsxompn4aWkbC/NEbzxh0aQMjrMuajxQ5iPDv/bIQH6/w6hIGo0SbM\ndRywzwqzlzFQ1LT2EgVqfV/c2LRN020d2/M9ZT2hSly3wnoEa6rslniHf0Cd\nnwlqE4lHzuMu53odz6IEw9ei9lNmKhe4o9ucO5cFN3wKzJHLejpZJkhhzeWR\n7l8W+0WpL6qtvVk28A5HG6SL/wzUqLZq3jZ7TOT9i07/j6poptZ/USgtMWVf\nLyBh+6lFrX3mXkR1dYiLZE/rdnUqH9jNyE5GVedGXYTIk+4WRxU0dkJwK1FD\nzjxL\r\n=hoyF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1fee70a5e.0","@material/rtl":"8.0.0-canary.1fee70a5e.0","@material/base":"8.0.0-canary.1fee70a5e.0","@material/list":"8.0.0-canary.1fee70a5e.0","@material/shape":"8.0.0-canary.1fee70a5e.0","@material/theme":"8.0.0-canary.1fee70a5e.0","@material/ripple":"8.0.0-canary.1fee70a5e.0","@material/animation":"8.0.0-canary.1fee70a5e.0","@material/elevation":"8.0.0-canary.1fee70a5e.0","@material/typography":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.1fee70a5e.0_1597275001863_0.8263553417599208","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/drawer","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.023f3fa34.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"801f15a877fa549d83eaa39b885b634682307fcf","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.023f3fa34.0.tgz","fileCount":48,"integrity":"sha512-v3wf+5R/5jUxqKf9nzx2PNxKkGZ3ljlSevt0bMB2ZJg328ov5odGluApF5P7uHvW2BpiIJ0cmTsGVIDzvtkrmw==","signatures":[{"sig":"MEUCIQCSb3pR1pgJsm0Xl3uBBwkTxyGAprKRn2EpiFY41db7swIgUY0TFQY+Wy3e0vBJaA3xRKbHQRMogb/75ZWbwzXywXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJPFCRA9TVsSAnZWagAAwioP/33YDsF2ofatibBtvwYw\nEsYn2IMdmVbQCfJlNQj2R5PNeV4sK2Qt2drraTEe+c+LJcFTp7I75FI/FEYI\nKycKKdQ3Zlj69Bvz918MQiJ2XVQ2fBp5j09jjareoydfevKn+ih4dQIeihzx\nBChhk/uhhMx/uXLnDj5wZI3KBlI0RxkQQ61/O76wCOXWpyBB0CikqbrdNGss\nTMqxfG75MwUISfu0/6jyqZGBgniSAd6lQsua0AkIv8S2PctNBOHaTZSIzkAv\nMXbwBZH3gnnSnu6UFmQxwvS7Wj4injdgWrmKgSX+/TM3xbloISjGB0BS/Jia\nyOWFMzTbGiZ2dm5RUYuRFMP4eQz+56hbR0P56d2ssZnRmNVRiSQ2JXWB0g51\n9j1qWrlJXafvHJmbdf3pDGQLlnpRGKS+D3AM9PoiXCB5kmMFHXEjzIcUji7B\nHxKmDU9VPY5VKgIVC0A4YnqtPilM0oa8gbPRqchwWDOJktULN/Pl2f3h8Pre\nLlo1z3hZ5KskSa27DpKO4tI3GsLv+XSOmKV0qEhwOnOLerzx9DAVHK7mfMzi\nd41k3BhcfAA5u6Qr++InThu9CRYRtVQG1jiFBb7iu8XtRsD/t3vlrJAtc7kN\nTidG4MgblheD+10xbaN0vhvI5fDVArddPMWW9echg2k4H4i8rLt8v9OwZnc6\nQh0Q\r\n=8mDM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.023f3fa34.0","@material/rtl":"8.0.0-canary.023f3fa34.0","@material/base":"8.0.0-canary.023f3fa34.0","@material/list":"8.0.0-canary.023f3fa34.0","@material/shape":"8.0.0-canary.023f3fa34.0","@material/theme":"8.0.0-canary.023f3fa34.0","@material/ripple":"8.0.0-canary.023f3fa34.0","@material/animation":"8.0.0-canary.023f3fa34.0","@material/elevation":"8.0.0-canary.023f3fa34.0","@material/typography":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.023f3fa34.0_1597281220896_0.6465783659356186","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/drawer","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.80f3a9e5d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e149d671cb8229eb5791d586760b278b682bc6b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":48,"integrity":"sha512-LaQtu903+/G8OP17WlVvTBjmUQwLeWLYEddi+tHc7zdSSWsX8mGB9v4gN5MJrvaHOhILKjHWJavKIfljaPPqow==","signatures":[{"sig":"MEUCIQCO3fhKOcLkpAjTJ1Xo/UV7Fb4qU58AOhB5t37EcKAojwIgdIQLfGDrYQqbAm0SJiL0LpP3W24MJAVnd6eI6iBHGS4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJeuCRA9TVsSAnZWagAAMmYP/Rx+zkWqoM4qkH5SRxOY\nwhICLKrWqZ0Mafj4DRsgmuQQW0RnsCuAjsgz4GFe9j3ET3yZWACoIg4xmUcx\n0+6k8MaVoqfLpYJ572KjWGXq8tackWU8YpouwisCdaTpuk1s9Y4jyG7+tRbp\nIphiuUbRDEJ/HI6XSjmdbeUsYoeRWCceYaJQZV6sFtX8lILpZcTSqg2kL88E\nuHr0IXmpG8uz8lWjwFW1TXjjbpqvh5BAnYbYzjwoToZn7+uTVbh17jyn80oc\niz1Q8Kewg8k5eDjD0gnmq9zUy/uW8de1aYIKyhIQ0WooA1sH+/Obe3q4KASV\nMT+WtGcl+idvMUZbW5/620Ww39LrQv+QBByqojL47G2f+BuYcgAwBmKUwwSj\nAeH3jrYY7hWQ03PxxVA+CWILDQtZ/IFy6tHxM/KzoS4kYD/DZAOkYEda1pDy\n3SOCKW7tuOg/tSZ8qFbwvMouCQfXxlMsIWLTCKWT18VmM5DhtNE8WLW4Y6ER\nqGIw9AGBt1o7TxyJwwfV+6YzJiZogBcmuAUu5iTfjDqVNsi2/dWpOFYuAUCI\n5YXBYt7Ttk0buLoltu600SuKLqsH1EMMLrSaBL4bSD8Gw6DSib9srLoY4cKc\nHnokHAttE6iTG+O4EdSypF4kLNBs3c/pNVaW+lQtKnDq5yxk6G0cykvBrXCH\nTBCo\r\n=ZCB5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.80f3a9e5d.0","@material/rtl":"8.0.0-canary.80f3a9e5d.0","@material/base":"8.0.0-canary.80f3a9e5d.0","@material/list":"8.0.0-canary.80f3a9e5d.0","@material/shape":"8.0.0-canary.80f3a9e5d.0","@material/theme":"8.0.0-canary.80f3a9e5d.0","@material/ripple":"8.0.0-canary.80f3a9e5d.0","@material/animation":"8.0.0-canary.80f3a9e5d.0","@material/elevation":"8.0.0-canary.80f3a9e5d.0","@material/typography":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.80f3a9e5d.0_1597282222041_0.9014409029160495","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/drawer","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.a1dcfe97c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97c7f4ca36c21f779d481a76282a9bc2056039e7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":48,"integrity":"sha512-VkHAcbEmqS4mICupT4z0q7kgyw2WXfveCd/zXtdwdio7JV/ffX77lZS4WplU8KrsVebSTSbiKs292LYBKru0Wg==","signatures":[{"sig":"MEUCIQCB0rfxN7eXf9Bio83XwI7d+Nd/sEqPbUqVv2Gk4AJSKQIgWl8okirHjxSBGff7XvTxNGjhPz7BPA+KMTpXM1MSDbk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP8tCRA9TVsSAnZWagAAZYYP/ibFYtX+PQ7O5sBzlxkX\nF81Iu4WYz3XZzxvyeuQjh8b/eBUD0Z+qZfCHHUUaL+tDki7Tw/rKiq7dLKKS\ndFxTvXnuF3b502XJIFwgqik3Qi02z7eZOpniO9vIgWl5gL0L/begCB0vh0hf\njuPFNJxb5IdNjhw/PyCNl1OzFLbL9G2f1V7UBk5ocmow9lPKjzl9hV8cqTvY\n0sCc28+ywWmJgZfkcOtx+dglh3IBJ5UR5CBDQ3WB4o2/a2Iza5iCISV1qapJ\nGQEwRw8fG7NPE0Y8el3mSMh3brcVwU9PvJv0il6hJZT9a7kkh9B+eBvpOlL4\nJjsZSbBRKPTHGQYuEcR2l14YGY+zTqvi/ETEqVYjVf++kkoGlKqFCkt7fyx2\nEShFfXTKAoFsGvPyH9siFz9WAcaDhIpgZDTKNhcnCjTtJ61JtPwephP/PeRm\n84xT/qYAxg+MqjjDuy1LAYkhH3SkvjPUSSTc4L90UxsqQEpLfLC37sO5rkj2\nHHUK1igLUQH6kDBwUSnEDlI9eJZQoRxgj8TyTYLrFvRLmj0Q111LVrQL0EuA\n+Q5xnb0SRQ6m85J0K1X7SygRXxdKh4ebNIozi1TUofhtvY0S3Aec/AEieTJ8\nAFG/4t/QahHa0L64C9TWrg+s/n5RejRAWfaWL2abYf3fn7pdTP6Rl4pkFoVS\n0EpA\r\n=wJpL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a1dcfe97c.0","@material/rtl":"8.0.0-canary.a1dcfe97c.0","@material/base":"8.0.0-canary.a1dcfe97c.0","@material/list":"8.0.0-canary.a1dcfe97c.0","@material/shape":"8.0.0-canary.a1dcfe97c.0","@material/theme":"8.0.0-canary.a1dcfe97c.0","@material/ripple":"8.0.0-canary.a1dcfe97c.0","@material/animation":"8.0.0-canary.a1dcfe97c.0","@material/elevation":"8.0.0-canary.a1dcfe97c.0","@material/typography":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.a1dcfe97c.0_1597308717274_0.4466910347955322","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/drawer","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.af332d5be.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44bf8a58a6f2986eff4e99003ab6290624bc6cee","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.af332d5be.0.tgz","fileCount":48,"integrity":"sha512-hvEm9PngrILWaWZZ6ROd0K477C5JFZ+lLD1MvRFx8nSQxxbfR6hycL5j5VGDUmsGXqsIvCIW1vR4EU5TlKegoA==","signatures":[{"sig":"MEYCIQCiXcDCDnJT+BqhdIcYFGkRcvM5D30tY6vMQAxskloy0QIhAKHQAjp2DHZyJdH3KCMnI1h5g4JyFAHu766FkMhYgdWx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa5LCRA9TVsSAnZWagAAjgkP/A/0uORnG+ix/6cx9miY\ng5/+PSugYsoVQfJ2EyY6rUPJdJEESJSsVACLCJAXA4DdwdgcINAn1Dxgovr0\nmt4CdfkNaPj0OYBPv/pDAOcKPLTBDv2YKO0SYlyHkl/N1HohoURM5OaTg0+l\ndj75sYg2iog0n24qUDTa+bKYnC92cRgMENo+fTIgXWB6aaIPUclpVsmNw4+n\nOaq9D9ZPOtNnQihmZ20G7776FdzC0O4LiCKEOMKWvO3+S0sIaoUbS2fr1WgW\nPUJgYS5m00Se4ubONEB3uYLS/dauSFftB3V3qQDIuIgET5Lk1zkQzlR3slFh\nMSouWi04uVXrPVHPNJ6mgD4VZofRt59xSRXRyvUE/KXT5Rtn8u8TXDWnvZWD\np8CjylZgvtXSBkyWmRt8mjUQKp53eWev2i+8ETyrZMOq27u5yzNCOLeWP6zY\nxPlYv2sdHBBfpei9Vg32lVJxpcokTnivckChhkpbGHJmNL5JxFxZl8yRM6kK\nVWJKWcPK0yl/OyeoHNK1kWde7bmi1v/bw36JxXLyNFpZ6QDCyDT+5L5Qagsj\nc0k/0V5/7i9XrjWpX5UhxDhOxI8dZsWbrTd8V5A2oJY1bdpDf6bgot+Vtu54\ntf5gfgIxEb3wPDxuydidQoqUQRLybblW8bCbTNNhBWxgsVoUfU9FkmPI9Hut\nQr8w\r\n=ZadU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.af332d5be.0","@material/rtl":"8.0.0-canary.af332d5be.0","@material/base":"8.0.0-canary.af332d5be.0","@material/list":"8.0.0-canary.af332d5be.0","@material/shape":"8.0.0-canary.af332d5be.0","@material/theme":"8.0.0-canary.af332d5be.0","@material/ripple":"8.0.0-canary.af332d5be.0","@material/animation":"8.0.0-canary.af332d5be.0","@material/elevation":"8.0.0-canary.af332d5be.0","@material/typography":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.af332d5be.0_1597353547183_0.3750915910746646","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/drawer","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.7dd4567c4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"940549ba74c4729f3000cad0f2ce09b8b2df53de","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.7dd4567c4.0.tgz","fileCount":48,"integrity":"sha512-+DdYFX/VjoTPyXRVsvNGPpLM7oISV+/1bMhN50gAWaYww1opQwbtz5/tveub9R4fYx5ogleEoBdNL+sopI5pbg==","signatures":[{"sig":"MEYCIQDj/Yi0Amoqcl6zC8EvefS2ls2UgC/mbpOnK+TqUDb7OwIhAOfklWK92pNVlqE3o7ot7jYkQCQRAm1N0tMYT1dVMmyL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeBHCRA9TVsSAnZWagAA018P/3w7BkCLJNucu+zLEmy4\nuNceOzPeEHMbMbnyzNQa5gB2oweaGdQJa91JxLPELAUcZF0aamHsqETC6IXD\nxDKaet/c22Ab9ocnrV6+j61GL8k9YX0ic5ufONAWc+UgZB2SoTvXzILQ1Kht\ni2mG7jVv3+oBry4hiYebNUK43CRS3FB55EMwi/5W+ZKcd/wQYjybZNKOkr9X\nzLKJzlGQdy9vM3WdXwEZcMwhE2Y7SFdNfV8kfCxuC2GMST+aww7HTgYXsg+A\nLua1NM0vpvtoprvXZ1jTIEhmASJzqkZUc/Ah3I9qWEmRlz1hUXXbRk/f05Yq\nVykV0j6zqjH1ZwzVyequyEDydLUI2F1gFSeD3kbeywk4Fc2jTq51wfeWVrd+\nyACUrwWMXHlqw/xu7ThKjJzZcLSvM1cdlIOdKy7Qbw1IcnKwTfWRQLLEFpFQ\nvJ8ADzvyDzYgKZ1n2GJmUpgRkh8ZqdBKpltZRKo+f1mJeLy7Nmlk/Q2nNR7d\nWDxUfxU1Paa/ONBdcfnBGlN/9BWG/1a7V5pP4oUYKJyiOvx1xvqLlBYEKYa7\ndMmhnP/nJQPNkR6JqfvyAoqTOki5bPcJH8PPBcB2kwpyvPr2S6g8bqxbET/9\ngFGGcwyLLrNcLP3MoB6wVCZWEOx6BPbGB0vsnwrbYKWNFufkcqtos80/pbDZ\nvxQV\r\n=m6Ag\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7dd4567c4.0","@material/rtl":"8.0.0-canary.7dd4567c4.0","@material/base":"8.0.0-canary.7dd4567c4.0","@material/list":"8.0.0-canary.7dd4567c4.0","@material/shape":"8.0.0-canary.7dd4567c4.0","@material/theme":"8.0.0-canary.7dd4567c4.0","@material/ripple":"8.0.0-canary.7dd4567c4.0","@material/animation":"8.0.0-canary.7dd4567c4.0","@material/elevation":"8.0.0-canary.7dd4567c4.0","@material/typography":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.7dd4567c4.0_1597366343118_0.2085192286390003","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/drawer","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.ff870005a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ce1745d30f43744d9ce9bb2e981866b4e787a77","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.ff870005a.0.tgz","fileCount":48,"integrity":"sha512-4rrI0Am4z4ANJVYpoN/kLab8oqbs9lFktqvS7ECIu9LkojB2J4MT9rzCg+OtYbDZB81CpXk1rDPL5g1qiU8DAg==","signatures":[{"sig":"MEQCIAbvHtGl9OzhynLg7lGtxOL8EH39O6xjDmd1ZEZwqMyNAiBEq1CTqCvz38nSFZlyvcQbPqK5ob3DIVZ8pcFm0JviRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeYqCRA9TVsSAnZWagAAvjAP/jq2wUIxOpW06+XsMTen\nImBsCLIf9WSnDbEYvoA0g8h6xdxm3P7f0z3ijXtJj6NtYeL3I8s0ZqLWLudF\nkjiUYl9A/X1ljUT3T1N/65uAK9b8dQLatp0JqSED5JEHHRGiCKiBv3soVvqh\nSj3Lm0vgZTq3ldBTGqR1jlQBc/xNLVxhql71/aNN5Y1a0WFRBL9A5eFVcNhC\nvSEprb6YioUXZ5LbxXhVxJ822OSJlUdBg2IJxIXZ6TZjmLlJJdTw/FQ86tzH\naJd448x+TFu1fLoglWRBsklkHCFwFC3a3J5BvEwGFNLzzmdiO3LL/ef5ZASI\n4lb5S1K8U+BZp4DT/N/bvT96GRGR645d9mgaA9itgwN5XBGcwA7rbDIMNzL8\ndlqFsEEoIEjybCck+QI+hH6CuS0YHJZlAJ4FJsD2pUUwnF/nUG+EBLOndAZR\nEmazOGv1LcmrgX/ChNqUy037cqDWM9Jzzf3iedMdmjQAy/jRZp4Rw6JVYGsx\nDLf32BMnvamaxSE63/2z2lct14FfY7Ho1YhuT+pCoUV29ZUS7y6UtcxPOlDm\njoNZ3OpKQLqbjG+dGhqidQaKaYdt9VC1S46ft9uRdh+rpFFQUKdYAEzCEBWw\npWOqBanCyKF16IOJdl+Ccdl3A31rU5Bqyxe5QHqJWRz59WsLshR54v15QAq6\nYfi9\r\n=OzVc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ff870005a.0","@material/rtl":"8.0.0-canary.ff870005a.0","@material/base":"8.0.0-canary.ff870005a.0","@material/list":"8.0.0-canary.ff870005a.0","@material/shape":"8.0.0-canary.ff870005a.0","@material/theme":"8.0.0-canary.ff870005a.0","@material/ripple":"8.0.0-canary.ff870005a.0","@material/animation":"8.0.0-canary.ff870005a.0","@material/elevation":"8.0.0-canary.ff870005a.0","@material/typography":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.ff870005a.0_1597367849503_0.9945637724056169","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/drawer","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.150f427a0.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"920a8ae6679778d35d341c7b432b2e979eaa9604","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.150f427a0.0.tgz","fileCount":48,"integrity":"sha512-af95z/GspbKjN0Wy+jd/KlGG10OYrzaJVKkAAQ1DNr26KtkAMsara5aczKbiYQBlzX64KWNAEIT42pO3kUUkLg==","signatures":[{"sig":"MEUCIE7C7twNL3z9LEyzrFuUu2qMYUJ/qzYWcoV+d8UXw6qSAiEAkNB7fun5HDhhdzQKmncEWzlTNqvTpuM+XUlMEkbinFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpIyCRA9TVsSAnZWagAAlD8QAKQOJr0cUddoMzDiJOUq\nkxjGQX0YXQ/F61yMKc2O3AuFc/1PqMZ3K5o1ty0XCaIQlEe1Vz5cvS7WZFgm\nCzFvY+MLhqgf6/5uGYoW3bwqvrvUxFcmIui6OQZSzts0Ejr0vPUgJQ3vm5ol\nXzQyLR/EBfRJFW4QfJOGsh4zo0B3IKEmQdVDG5bwapy8sD/v5A/JSR2azJ4r\nCPQtJuAFcFVnnSYKQ4BPieFt8gvTBlCQxvQqnrJesO9yq+9EGQGYnmPgKK/D\nXmW/M5S37NnWOcuLRT5fkU5HQ/OPzUmF/eXx6shx4I3l4VQFMHJ9FQxCTIBH\nUxIXgh0B58j/Z23FtrbOggHxwOCOkAgjAcV9IyXq/f8Muk+BOmQ+GQQyFuhP\nMCs8zb7DZQSy6xJDeVz4Bu3cG/ccXcz+HMNXr/qPMs7NTobX6aPY+Rqvo/uF\nkmxNJ1sdQQJD4B6xwetVkIzP6s9RAlcDSaLBthHttdNl/gJD18vJF89Qd0+C\nx2o3gnPIyUnTH/zUbJ4Sjr9F704qNOi8aUgxyjMqO26thFRaF76vjBN4GCJ3\n0W0m0W3AaR5YZpdQfkD/p/OYNmaHoeudsbvWMdYzuzWE8CSs/Z3/VoWa9vtb\nL/N6WbyFt40+L0Wmiudld8/VhZzafdIrA05SV1EnT9COmo2pt14B9ToGHsnz\nLrzn\r\n=c4wu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.150f427a0.0","@material/rtl":"8.0.0-canary.150f427a0.0","@material/base":"8.0.0-canary.150f427a0.0","@material/list":"8.0.0-canary.150f427a0.0","@material/shape":"8.0.0-canary.150f427a0.0","@material/theme":"8.0.0-canary.150f427a0.0","@material/ripple":"8.0.0-canary.150f427a0.0","@material/animation":"8.0.0-canary.150f427a0.0","@material/elevation":"8.0.0-canary.150f427a0.0","@material/typography":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.150f427a0.0_1597411889687_0.46747682383780886","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/drawer","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.bcc58290a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3458ba428eec6de1486ac1a54af03facb37d5277","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.bcc58290a.0.tgz","fileCount":48,"integrity":"sha512-QIfhtkC+Qw7OL1/FACg69CD+7EXTrdiKXF52ijhOganDwDX11HX8mq0BKEoXj5zn25CIXk7JmvN1gv6FZc4RIA==","signatures":[{"sig":"MEUCIBgFwHB76EQOJCXT52NtqwZ1U9AhBKLjzUAojJX4f1ZfAiEA3bg4tMd8h3UefYv6tmBKc3WUzSAyiK7bGfaGjeZBVTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNx0BCRA9TVsSAnZWagAAoEcQAJ/QAaH2YPU83CUtIeCu\nyxRT3+MbJ/id3h6d0Mo0uu5V8sl+AQBWxOeJjuqvIyDofy+u9T7FMpKwSwyT\nEioLC+QEjQdOZIjvk1JQQEtIN4WdW1V6uNctP1d886vt5gFc/74QQM/wDWDH\nIlS92gP9EwqdrlDbyVx3qaMAa1A7nFCUQsqSBWEVQZDU9hfzQ8UIwEDsI5h2\nQtg/zD8vqgw6jvdOUBQP8jE2PCl+0TBYVC+rKYXBbESS5Am/LnnEkSz2cNJW\nicIRGPcaeUUHH3TTtz4kuBs2uysGIpLdBGbnyvkQThG+xYEvvGPYa0561UGb\nqQ5YlKUWn8ktnfplOMm4ToxCMQ1PrY5CBwpBCLcKMrBlyQ+spSxBKY8Ewust\n6nRolWKcc0q340ukynpkkkonFohEsf0yZczp5IdGZvEsZpYNMJcGwwS5c5k4\nNJ79eRCjFomrJOFy4UbZQa/5knk0SvvvZuI4+mlAPaczi+9hMLDEW9LdYHJX\nJ3yX/cWbxVVmKXUTq5CuNkxpupx0cxKTqZd2SsJ0BQRpjg1PPfw2YviwoHvp\necEC1Am99rqEd45dlW+VGdJfiY58+CK4aHlDnwTZcqkUURcCPWlXXBB2kN09\n1KRhdHlYOBxCALD12iULcytlsmqDziencSMxBp/Y3YjHXrHFwuCs1fwpNdfm\nM2dE\r\n=lv+6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bcc58290a.0","@material/rtl":"8.0.0-canary.bcc58290a.0","@material/base":"8.0.0-canary.bcc58290a.0","@material/list":"8.0.0-canary.bcc58290a.0","@material/shape":"8.0.0-canary.bcc58290a.0","@material/theme":"8.0.0-canary.bcc58290a.0","@material/ripple":"8.0.0-canary.bcc58290a.0","@material/animation":"8.0.0-canary.bcc58290a.0","@material/elevation":"8.0.0-canary.bcc58290a.0","@material/typography":"8.0.0-canary.bcc58290a.0","@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.bcc58290a.0_1597447424836_0.033285504856152004","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/drawer","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.4f55400bb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9e0693a547f2627afdc6c5d96f33e43e8c33fe8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.4f55400bb.0.tgz","fileCount":48,"integrity":"sha512-TNZ1pBGIBLEEu7yuzIzgSG29impXCNdwZ/uuT/6N/5huCFokGZcRijQ8ZTIvq2fKbpsRoaOjByoz3EGUdTS/PA==","signatures":[{"sig":"MEUCIEb0zQ/Wfy4iIJ5rgxx6qCqkVD0i0RWhgtv6pJL8J1c3AiEAzTnETxNgkon2O5thErlBygl7KSfqAmSbMgqdKwiC94Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrLVCRA9TVsSAnZWagAAdB0QAJmEUwshnulRDnwjoAfH\noegniHsdLvjirZmk3QLUvY/JML3A/rJL7QM/eSqkp7EctbcGsTTQmq4mssDt\nh810mzGv70TjSzkvd4pIO+IPT9Q5PDW8dHPy7MV/GeafU0O8qtNadKaXPqDB\n3wC5VGoDVxU2A2Hs5Afu30rwnCXeUCODta8yGIWvqvE96TleSOZ++FXRQWIx\nm2WlAGtNvhbj5rWGNL0t6iaYwZMPlkuWjY/fuyPBwi+xofTOrp+5InDpcBV/\nbWUpyQwgZQrjxjUFd20Q/Ez2wgdvToHkujXxsTWTzqPjD4y3MznE7aJPELGj\nh0iyxcHvh7laG47FM9J5y8IsEB1RBsSdul2CgRv/qJWOnJ/0GOMfl2H+pmZR\nrnMe8o0g5IM/nwCB1n9b6mTsi9TBPT7m+oyNWEPBHG6M5SzPtPw0CfhQ+g3L\nTmXF0NtIQyRmKCVfdlZYN/obRBKSoR5dr6YKq/PIfxbs+5JWdN7msrgjsU/k\ndoIwE8Y3XYWwAFQ6kxV1ONTKSYXTSNKXEIFuQThhPkGgSKlY6ACxIyltI7tC\nubMkeUirkWZqbamlkaAt58F3Hqq3uukJWbfsHytwffBYQW9XZyU/8AjZ1T/V\noyNCqDWdcxfN0svC9E/shWZh02v+Md07u21IpPzA7n2GN5Ia28S48Pjngdqd\nPJYl\r\n=zQLS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4f55400bb.0","@material/rtl":"8.0.0-canary.4f55400bb.0","@material/base":"8.0.0-canary.4f55400bb.0","@material/list":"8.0.0-canary.4f55400bb.0","@material/shape":"8.0.0-canary.4f55400bb.0","@material/theme":"8.0.0-canary.4f55400bb.0","@material/ripple":"8.0.0-canary.4f55400bb.0","@material/animation":"8.0.0-canary.4f55400bb.0","@material/elevation":"8.0.0-canary.4f55400bb.0","@material/typography":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.4f55400bb.0_1597682388884_0.8057225731823472","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/drawer","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.000d64815.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af46d839f9f79399da0d2ccb83fda6ed7c2e6540","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.000d64815.0.tgz","fileCount":48,"integrity":"sha512-M4u3V0cfhggGlR9XvLFPtzxHkTjwDWoPB5MVLIM8k4MyGhAu6xn2WvZoeXS2VXIohSsIalBp0qFoQf9+Y43HuA==","signatures":[{"sig":"MEUCIQC7vbBTfJBbuzNXhFVjPYK5fSaZmadj2In1yVTEMsUuMAIgFoYYd5wHU6ciNpO3EKUDt8HYPcnguUeR2Mtx3QqIDcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrjhCRA9TVsSAnZWagAAggIP/R7mtiqnV5e2yVUZPHjM\nVaNXVtx7ApplQq/TeG6OOyz6lD/zQ4NnJFRp3jLYhUwBl0uliZSni1bFjdYK\no+7B6bOBSkfq67Oc7y8Bd6xfVy4bxlb/+DbUYQ/Uqq8Plw4LAicbwkmzntzY\nvGG8T/LrKVgi16J8h+lxdRIn2rLufI2G+bEiBWvCEqzCSjZP/So4b49rVdUn\nL4nJSgzBwnbuzaqpGFLrKO2MnHhTDjG6pGB6HamPzg973AejuOwxELBKSeiQ\nhwGCcxpakLa7khzg1OmyKzNaM9JDgfThZEgHc453idAFZQEpn+r2Wu/39L08\nYgmXLr9B21XVyCPYbdV9Dau5BdME9skH6i7Sgto4fHXIyS33hZQrkHbRakgK\noFAnwmO23NdBfFugqDf/ovB6jo+qmgswZ0XuQ3uiY1kq09atktFo6POUiY3F\nQ+Tl/uBqZZjmkWbDahuZ/8jPWbOnOrJLnCJ6Scs0Eos//HiLeFEho8zRD3c6\nb/yKnKGYwltAThapfA5hfEzgQN/MYaBLmpcz4EGSYYulDZPqv3Qwkm8OKdAb\nhMKEnFk2WSNJ0JcIyDAmvTdNioEPE0t08hjQ4IOuLDE/USfL0e+h7vH7KtFS\nxp1UTCz8OA8gPdJjdnRFj19tMDCXqsVpo7kuKrlvu5XM4V0GYq70bCA1h6tv\nrHuu\r\n=PBfd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.000d64815.0","@material/rtl":"8.0.0-canary.000d64815.0","@material/base":"8.0.0-canary.000d64815.0","@material/list":"8.0.0-canary.000d64815.0","@material/shape":"8.0.0-canary.000d64815.0","@material/theme":"8.0.0-canary.000d64815.0","@material/ripple":"8.0.0-canary.000d64815.0","@material/animation":"8.0.0-canary.000d64815.0","@material/elevation":"8.0.0-canary.000d64815.0","@material/typography":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.000d64815.0_1597683936606_0.5195528420877853","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/drawer","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.defa599a8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1016dd355fa66ff015c419a9ed7078dbdba11d08","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.defa599a8.0.tgz","fileCount":48,"integrity":"sha512-/autP0AsRypSLfI6SNCryGP8UWenxRbtItjSzaf35qKiTixeXFj+kf4D7+6tadRD8baZlnrD8D87yAhVxhEOYg==","signatures":[{"sig":"MEYCIQCvIj3SvesAu5Nj9dPPNkmgf6E1HY7/lODJaSS9aVy1MQIhANTJylh8HnH+t1MNgiDxR45YTjg7YWG3s55/N7O5nrhd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOumNCRA9TVsSAnZWagAA6bwP/iI9AHZOgoQSHJt5JWgB\nLZQgH8BuYPBsmqMpnSwZoisf4rWY+3wFFp7/ZJyAQ8+9lHGhN+HnqNTeiuOI\n7+01qifNMl5WxwY7XFiwuExEDSb1a1tc8gEoX3M+Kf4RmwRfDHuIwJrSv6n/\ndjqa1dqsfDVCw9837zK0yTst+7wPhZUoBQHCmEKBfXnfnzExTrmpgoLlHtFB\nGH/uw8y7Ov2l9WxxAcn9eH64OeQQsOuClsUnzmDONfCsRfL9lQGz6DmSwRkW\nZh2CIPitFhhyFsC57T80lcOLN1EReT1td6LKiAr77Kkm2KH5mHOoaOiQuNFw\nfgbR4YiWteaWqEUwCSakTjWrOpQ9Gk+P5JDB7DNPAjSrDMQC8bKJg8Q70f4V\nqI+HyIB0WT1uV8AKh5TvL9VMLKxLj3FMwM9YiiBiOBqKEKhVLV0yJ33KN9ft\nAvYFu7oKf4GYxRuQU31uuNp0y1MQUaK9/y03FoQImS5DdVXrZxOHH6fywlje\nGeXiQiUkYIqH+GQlsQuT/j9yr55xAeDZylGM9aJwj8EBagDmENz/J0j5h9KZ\nsPpyUi+BkaLc+qlnVdfDOceHLp98z4e70Qjy8+SqtcI+KClL9WPivSrSxVPD\ndEMsI73M+r6z/q4MJWCyisEz52tndO5D5ZyKcuceUc9zckvVN36p3qFiyyr3\nvcGT\r\n=hIYe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.defa599a8.0","@material/rtl":"8.0.0-canary.defa599a8.0","@material/base":"8.0.0-canary.defa599a8.0","@material/list":"8.0.0-canary.defa599a8.0","@material/shape":"8.0.0-canary.defa599a8.0","@material/theme":"8.0.0-canary.defa599a8.0","@material/ripple":"8.0.0-canary.defa599a8.0","@material/animation":"8.0.0-canary.defa599a8.0","@material/elevation":"8.0.0-canary.defa599a8.0","@material/typography":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.defa599a8.0_1597696397476_0.8701810439024271","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/drawer","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.66b8ed7e6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96123efa99f5f7797f8b8611a060b8a318b01d49","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":48,"integrity":"sha512-dhQGANqk4VHr9nClkgONpY3H8KlHBUA/wDnLBKGApeUcSJqomAIVgWcTQCZi31qF191mH2Kcll4/+ft9qoslMw==","signatures":[{"sig":"MEUCIB6luoX39waptSCADxJabpjUKQQgvPREzyu2cTWlyV9aAiEAlamgrbD5OpsEQpvfhH4AwFSdIvA42vWnwg3j3O7MRwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPCARCRA9TVsSAnZWagAA+I0P+QEKaoG40X/L+qbJeICe\nWJX4G0WNlEpDOHQo4lG8TKF73sMHc5DXyAjK430BShsVmIyIpkTn+LrDRKEI\nPsuYpm0alGpVbw4chVhX187xcYqBenBZt2TbiHqgBv+zhnczMmq7ppary2Yt\n1FvVathDrPi74O/JC1oG7SDqigR6zAFc1wRuY8R//smfweRvy72cHO9wdO+D\nLvQ4EN0W4OPb79Wwb9MC97kWECCciLIahdod+uy2iHosg6ElSK8JjcyC4tYC\ndioV7xgaA3K3FL2QmiXvcvKY4O/N0EPyp1ppwkjewsFhyQCsVW5fXjOLemC3\nsYFZ0gUyi5hxU1qhxIV+ICXPHTSn4qVBiCKdGGOTIQDcXawy9/mGro3Q4/05\nRjSgSxsknPVmMyLKNIs8D+X27TACb7THsnJH1I/myWAYwgRVrSZqd2SIE7iJ\nTNZSVPBafy2xaeqVXHNN6gEGYSGsvh4z0AkU/Ok3hNBbbPqD1gP0MTklk10g\nkjykOTkANILptsrOlJ+8aD+wEUT26RyBmSa/KTbLPOkVgLfUQk8R1XPITrJr\nnwGs7j95A84I5E11qqv6Ycndc/w1WriXj+XbEAmV1wy8IGvUCnv42DRfQbLI\niPWMqLrL/mQwKLbaKgSEpUd3j3+7MrRXqlfShhIg2fe3SKKwkiak6PLzRsRQ\nSSX2\r\n=s509\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.66b8ed7e6.0","@material/rtl":"8.0.0-canary.66b8ed7e6.0","@material/base":"8.0.0-canary.66b8ed7e6.0","@material/list":"8.0.0-canary.66b8ed7e6.0","@material/shape":"8.0.0-canary.66b8ed7e6.0","@material/theme":"8.0.0-canary.66b8ed7e6.0","@material/ripple":"8.0.0-canary.66b8ed7e6.0","@material/animation":"8.0.0-canary.66b8ed7e6.0","@material/elevation":"8.0.0-canary.66b8ed7e6.0","@material/typography":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.66b8ed7e6.0_1597775888769_0.25190237568677976","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/drawer","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.e2b1033df.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3beca57ce769b77639ff6b23784e465ea72a0bf","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.e2b1033df.0.tgz","fileCount":48,"integrity":"sha512-rqx0ou3fVKMJKLPfnUQgbn7gaXbmrGIOmO9zZdgJg5I8FWwY1Znc8yKEAqpLFib0gyRbNqFuhDb1dfmqBnkX3A==","signatures":[{"sig":"MEUCIBj33fEWttk6VS985L4XrWuvBYOklv8DQheCzYpi8c2+AiEAgejf/Ab843o9DtCrYVuFgBVShCHe4maHiUj+SIfDKJA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXLPCRA9TVsSAnZWagAAE64P/1JeyEImy7GT5+UJmD26\nipQf2qYZBi43dbOEALIvorO7hagaahv2ztCjBbf1moNn4bnROccxLT8a04ym\nlBkY7GLJFjJcMS3YYcHdSHnErRieBelaeHhFhzomtTFnqYSHNt/jSL4vAUJf\nSPyJiZsWzmYzo7woL4egjqwe4GxG/zdRQiLT7pRh3R/wtDGZIpD4XknQQcM6\niE7re6kZfFiAn4DqJCLuhH4yo8dYx5n5vjxU83elljtHYlNC5auQbUbcFzJ7\n4t3X/mOdGR1K3lcK5taFRl9pVx91TQeFSjf3xjbXyyyTQSzPKohtSAyK8PH+\nEU+iDUw1s4s4dNVpU+ms4kcCBhP1XHQ55E8FmEDK/xfgSkPlNGUdNx3IM1Gp\ndX13E3Bn3sH88Od3EPrpGInwon+K6RsMw8ftHI6le8L2sSm9HZxQv8RBl/Jd\ne1YP2gYhbcnBNLf+Y/azwtdiwNd4KxB6qWa44fWbgNq9tMbvkBKnGBwhvJXT\n6liN2f+Ok612B+DD6B51Old5xF/MKaS8TIxTuUPhXki2DQuQVkFrzkOsL1VC\nv+I1Km4Qaqp8Ex5xbaCv18TAzpCC1LWtKRuOfIC2vwg8QTabAToqkorHxLU4\nvY2u/tN2HzCm8xL9qoiVIM1O/kGCKITOd92JSVZJMSXQqc8zN0Zwe4vODcRb\nSUMC\r\n=d1bK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e2b1033df.0","@material/rtl":"8.0.0-canary.e2b1033df.0","@material/base":"8.0.0-canary.e2b1033df.0","@material/list":"8.0.0-canary.e2b1033df.0","@material/shape":"8.0.0-canary.e2b1033df.0","@material/theme":"8.0.0-canary.e2b1033df.0","@material/ripple":"8.0.0-canary.e2b1033df.0","@material/animation":"8.0.0-canary.e2b1033df.0","@material/elevation":"8.0.0-canary.e2b1033df.0","@material/typography":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.e2b1033df.0_1597862606539_0.9060406998760948","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/drawer","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.2e8c3dd2e.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18fa7cf249a90deeb359c00f8726ebee4eeec572","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":48,"integrity":"sha512-G1oPQ8nKrb1Lta2jwOggjVqxQlaZv+lUgL3VYwom/F1dgGaCtN8xvGnDHunE/Pxnf1RHhE7x4s3rammB/46aVw==","signatures":[{"sig":"MEUCIQDTCklzNc6bd/+v8rp5zT49ZESw1hvVACEwPfuojET1TgIgJbifgZwxed6wu6uEnL1c1nRI6RtFPGRDzYob4Rtk7vk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXyeCRA9TVsSAnZWagAAyc0P/RjopGMkJOCOG5VGcuxh\nIhbbtEgx9MFlnWTf6CXjNAixaZ6IbnlzjjzqLzH/JMYtd1arD/On7Wu6vtRS\n1JvylA5OCK3BZt/BHkbscczDjnFtP6K1Mg/1C0+Ol005jz4pMpQ4OolM8sHh\ntj8QpR5l3ata/53IQ07lEC/Yyw1ejh49hrNjAmuPmn9HRiQO3NcevBBa9+eX\nsPCD7VUUmHlVoCZ/Kbvsl1S1EN73s50s9K09ZWEp/EfK0mDHDB2f9BSO4k6t\nxts7aDe7C5KjG3xcZTtV7Sa2mX/bFCqQNXSxc+l5ed4sFA3A5B0qJBWv7G+z\n0DWamJLHmn2xGsWKXi9xQBuGuFrG0iUMZxYhsHd4uHKs7j5l2v4VgXT8IybG\n0n0KVGwAVh/1pxvmjLzkDCYl4eoB2UmoK/vMHRl7bPmRT6fCFqwD5nyGG/xC\nYpS2+CQr3yXl+Sj+OFouFO/SQGDFRF50BuMvtmJOwPdeR8JGuQyf53cI85yg\nHGtDmK/H/Ih6CUtsfUPeHnUMO8tr5g8LjV3ZgA9bqLBiee32Mt5dg5ojFP7a\npb09ap9VZQRwdNnQDooZ5NPPzSvnZb85Ocyp1WZRe33OOz0qWgSpPmV6C4+d\nB1bohBvcD0QrBUDOrW1lVMW5vYC36HVEm17qnNsB3uDRQYHiuGYFllvcvjAa\n3+oH\r\n=k4FR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2e8c3dd2e.0","@material/rtl":"8.0.0-canary.2e8c3dd2e.0","@material/base":"8.0.0-canary.2e8c3dd2e.0","@material/list":"8.0.0-canary.2e8c3dd2e.0","@material/shape":"8.0.0-canary.2e8c3dd2e.0","@material/theme":"8.0.0-canary.2e8c3dd2e.0","@material/ripple":"8.0.0-canary.2e8c3dd2e.0","@material/animation":"8.0.0-canary.2e8c3dd2e.0","@material/elevation":"8.0.0-canary.2e8c3dd2e.0","@material/typography":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.2e8c3dd2e.0_1597865117569_0.7337937584795069","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/drawer","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.b2e80a5d9.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d5a8ac52bf9f9d4a9ed0261e539ac2d5c686bd2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":48,"integrity":"sha512-XLL0EJOOXNjP3RxxXjjMuppiGR0w2ek7ssZqpv5DrxvRTji69XDUELpiUu4rNWxK3i8XpUBb9po6aESJgWvesw==","signatures":[{"sig":"MEUCIAPhgBVNqMTlxk3LeVwri1iZbQdg6l5lWpayreGoSTUqAiEA8dStpNqLdEfSH9oRLY37rpjVHxnjc09h3wHtslGf4nM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaYcCRA9TVsSAnZWagAAjtgP/04r9gMLAnourlmXBoM2\nYbDTKACC3gYomC9I1EwvQ5nXDlqNdB4AvfAqqQGwMkaznTAlNzIq57Rxpvpg\nxUCtn51LvlQArrr2HOSnZZeG0x0RmiOPbOhCLnsbjI2gNQ8U8U1zqGtZ8lUS\n05FYvLXzqdphEQ5UJMpZyr2DYeQW/xq45icZVP7ixI89rHPPfWgbMxM+4uKr\n8bPIsmqbfFO0yZpLhn3c8PxDPwgD1iJBdC5a01T6nxbo0W2B+dbTi1vO8Y2M\n9l9d2pMl5/m4LhKGwevlFbS5qjO+9YXTTUMYdgdRZpTwcybt2GxSbHHNXw0s\njSAHjEVXuj79mWfnxaKMk/rnqXWVObZC3ls4nou4+dhAe6ttU7PQPNFU0LFz\nQGHntyLq5cQjRXJGQKUekPUChuk4VJ3z6zyaQdOaKfF/9DVF80V8CdvH2iLc\nR9k7shY1nCY4NsAW5IMcJ7cFjQStjFO8t/wJac1XmiKq5S/ORVjWWaIoxQgE\nza3h6d6Ogmi4N8aI5KJhUYw8u4A825YdA0hrRAgBDos4hOATApAuvzByRJEl\n/8XTo61uLBF/JVY1HZ9bGPbYGnmLbLhGk+4X4LWL0/NA+XVt1wPHdcJ0a0dU\nYy0CXlVs4sappL7WimNS62EVyt7AgwJ80nDqv9IvM1YknWAUqTv5hcEw4RFP\njxCJ\r\n=bej7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b2e80a5d9.0","@material/rtl":"8.0.0-canary.b2e80a5d9.0","@material/base":"8.0.0-canary.b2e80a5d9.0","@material/list":"8.0.0-canary.b2e80a5d9.0","@material/shape":"8.0.0-canary.b2e80a5d9.0","@material/theme":"8.0.0-canary.b2e80a5d9.0","@material/ripple":"8.0.0-canary.b2e80a5d9.0","@material/animation":"8.0.0-canary.b2e80a5d9.0","@material/elevation":"8.0.0-canary.b2e80a5d9.0","@material/typography":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.b2e80a5d9.0_1597875739359_0.7601456237485407","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/drawer","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.ff88df637.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ffd6fa26631ec72716ea341ac0bb336c194ee86","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.ff88df637.0.tgz","fileCount":48,"integrity":"sha512-XlU+bY5l2SiRTiezZTodRZ8BJvykVEVWWEScTvN1S/em0cguSdRPxomAFYTdxQXF/Xr1Jb9CWEiHHHK6rtVtHQ==","signatures":[{"sig":"MEUCIHDd3b6Uh2Q7z4DIWRGQgk0TJgonfoTewpguL8p18+t9AiEA8HKDKWyBSRIGMh3BUHs3Nvh27p7VLrHnb/uzLMTBhYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPajzCRA9TVsSAnZWagAAwY4P/RBWLv4U1oBTZJCLtCL5\nm+b/a8ncjPwd+df2un/ZhnEMnqDpayBuji0dFBH1F5RFpnGfX9NTI6hV+cg+\nhf9WzEdEbDWun/owG0iGOfgII2WVeA6U/a3YTfztAkaUnnceo7hOOXC9e/bs\niovCdj8MFkNZ7SiGO1o1wrafiIAsXV5AxPFb8OCBnlqT6aya7j0YElqaTfx6\nMvbqcbiNtHPf9VPEZhwP5SwXjoLcchLtmsP0ZRakf25/mhzfP5iHWxP9zyma\nTSIU6Qn21Vp+H8YmzRDD3iaR4Dp/oVXg/vFbe5bLx52po7y/gArtAmars9I2\n7aXBqVxEmxK4VgN6aFTUIlTlM7yruh94qprE5LqNO6JNveyttpRxVR3upuCV\nKJD9yLANnw5piuaGsE78FscopLqnwIW96h7Iu6CsNkNaSNqhtxeFwDZe9h6x\nKm+6BMT9u4DnVbSi9U6H/4US7/FWDDw0U031ag/KEplxBs1MuvDPPG+YJoHd\n7pA0tkQRxeoFEh0iNMtyjO9thX88xoac9yLXfetSezfe0oyuURJCdGJc9wOx\ns8v8bxg44FGBqARDro7oOPR43x2DTGqyud/wlDjiOMXmfk7BJASB4MkfiwLm\nAP32titmE7b2ohOWNxuzNVTRN/gL5CxGpuCLbaWt9Q80nHcDaSH4jY+ScUsu\nWKJy\r\n=sskp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ff88df637.0","@material/rtl":"8.0.0-canary.ff88df637.0","@material/base":"8.0.0-canary.ff88df637.0","@material/list":"8.0.0-canary.ff88df637.0","@material/shape":"8.0.0-canary.ff88df637.0","@material/theme":"8.0.0-canary.ff88df637.0","@material/ripple":"8.0.0-canary.ff88df637.0","@material/animation":"8.0.0-canary.ff88df637.0","@material/elevation":"8.0.0-canary.ff88df637.0","@material/typography":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.ff88df637.0_1597876466971_0.2919978564190757","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/drawer","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.32fb314cd.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c6787acb12979a7d5008496eec64c3166e26511","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.32fb314cd.0.tgz","fileCount":48,"integrity":"sha512-qMcluHBke6zwI85Sq2HksyrEuP8ZeRO9Dejebx3AQ6m+aFiU9GCfiAy7PyXCcr8dYcRMMkukyDSDwFYqPa5w0Q==","signatures":[{"sig":"MEUCIHBBi9kZf+yKUFISH7y1xwPjIGGBa0TtbFaBKSzsCr0SAiEAoRRZX0mAPMe7yKifY6/WGVx6+eku4LbpoOUoUe2RBAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlLKCRA9TVsSAnZWagAAB1sP/R1Rld0cEjrTksetiyOI\n05V2FR5CVusobpCNrGHkn2q54nTpVUSFR4ytLzeqaTWiWefbc3cJlAUtX85t\n5FW+fDnOeeJDRIJDW1C3nZy7rjWNlBAzJ6wd5zyoJqMzPxOgDla5aplFltb0\nKmaru2XaRH56K7CJiB1T37TCT+aMiYsDoWfTVFzXbwZk1WPZRCuNaWl/1tEG\nqFyMa3zzKg2cBUK7mxDXTmxHsOnHhsnXIvugXxKEkyCEG2//+k7kKWaz/JEu\ny2sQ2UuDkzbiiDxXUilLwe3X3BktRUdSsUmiucWhEs4pif1p7ZDyHH0H6KiJ\nHkxNdrAE4JrEMQhJ43hMJBv0ifnl7JlSDGMbG+d2et26ZW6lQujADPDL7Ms3\nSucqgQbXCrJzs72hBT/I6C86Z3Cvu9WQS+pk6nG0BHB7/mrzqsXoH/mvPdw7\nFRz9AcEWPpWwaKK7OLyqWPutTG6pG9ixlRygw45SS5AVLJN9LFwEpp7k9Gii\nQ9eVZF4TzdIvulXhlcHdWWNEutnsN2+VcSCaZRWVkfow8cbunEZd14j15a7W\n77Epdy9rnMfV8ztjmNfwGHyPAngLwW6cXhqwKATsL5b42Lh/f76FJs4vTVkn\nKQUTPTQitGdS/K4Bdfg+4lObUfQ0/z5qLL1eThhavCEiO5OhzUGedlOxNznY\nJt1b\r\n=j+El\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.32fb314cd.0","@material/rtl":"8.0.0-canary.32fb314cd.0","@material/base":"8.0.0-canary.32fb314cd.0","@material/list":"8.0.0-canary.32fb314cd.0","@material/shape":"8.0.0-canary.32fb314cd.0","@material/theme":"8.0.0-canary.32fb314cd.0","@material/ripple":"8.0.0-canary.32fb314cd.0","@material/animation":"8.0.0-canary.32fb314cd.0","@material/elevation":"8.0.0-canary.32fb314cd.0","@material/typography":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.32fb314cd.0_1597919945535_0.9047223835959943","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/drawer","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.546277d32.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bee0ebbeb3c323347d9d0e77f9b3831e2aa7aac","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.546277d32.0.tgz","fileCount":48,"integrity":"sha512-CL2EkJYPW1yuQez2vPwbR9ZUpuIJ5JwFbfYU2fomGDX8XWcRtxzGKQXmkpRSY3mbGqnWxgfzDN511+rYUGaWOQ==","signatures":[{"sig":"MEUCIFjWMiHUdJzGOV7wFa7jW5i0e39TBcXExWcriqTJOG5cAiEAw+b9kYfoDY3Co+PbrkB1vrIlqxO+g3mOcbeUDprjqdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqi0CRA9TVsSAnZWagAAJ0YP/jXgTLpBvNP3+bzQwXva\nHd126P6s470gvDHxuhWro0nwCodFF9641TCkB2wk5p9pFeINmybKovbbMw6a\nGzcTCllQ/qtnx/rxIclhXOqt6yW4qG7SzBKzn5Z7iRDFQhPxt0FwRBvQvusM\nEp5Rca6Ea6fGrA3j+VFBCM4aLyfVhubPBvJFJzY9DxPseQ9n0Z1Ho4xDmFd4\nGew+ydkaEFxR4UdxY+GDL+gBxamuLjpe7F9C5bpWLqAY/Gpa4z4XAnPs6k6M\npyI9dK2Tg6doCpAAPYbCQ+wmxcKLjCB5v0fHG9EAnfak+vlSfiqn0kzkjwau\nyaG/REVo6liYowt0toi7pxdRdBoYIHELfXEcLfYho13nOolmDffdNeNGmMHG\npFuDzbMKl7N4gA8iJyWZrOzcnzCCw26oGtfu7HH80xbeOrkRze+gWRVoyxk8\nfhPnyE75IIP6CXRmU8vpXBK/lGKTQpuLkarPjEdqCvBj0prYW0J1ebeU2UyN\nhkaDYf1Mxe+xlUdZ2cAa4zG1TwaXCr7qF6DpWDurBcmCS8NQkefw4qWBOPP1\nRfW2dw2oLodRnpoO4Ycos4IQh0T+iD6yiJFIPbwycgJ7NQx/fyhLifVV6GE8\nOBqiFIC0j7zy7UolN1bTsRBYdL5bLkpfSBkD22stZ8CrS7qYWc9SborNDQh/\nO7I/\r\n=hToS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.546277d32.0","@material/rtl":"8.0.0-canary.546277d32.0","@material/base":"8.0.0-canary.546277d32.0","@material/list":"8.0.0-canary.546277d32.0","@material/shape":"8.0.0-canary.546277d32.0","@material/theme":"8.0.0-canary.546277d32.0","@material/ripple":"8.0.0-canary.546277d32.0","@material/animation":"8.0.0-canary.546277d32.0","@material/elevation":"8.0.0-canary.546277d32.0","@material/typography":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.546277d32.0_1597941939355_0.3844460619580332","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/drawer","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.da72839f4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d868901cb9a19aaf831e7d23b7b0abbe3e738a1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.da72839f4.0.tgz","fileCount":48,"integrity":"sha512-LMe/d5brgFN+bni9AtxVHlalZp/D9n19OiOcihinOugTDdZFHmVIIrbU9+mtYQVTmpYWVAi5dH6pwVU7rzQVlw==","signatures":[{"sig":"MEUCIAEDTb88Z03o2wdJoNlGjin/6PFan8cfn6nAWkfbpkqDAiEAz3jjdhHYpMfoDx5+Hh/ELmKNpNcgiBrU+7oRy/9UiZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPrp4CRA9TVsSAnZWagAAZg0P/2MIUrwDvN27DU/MldnT\nkDa37bmbPQIUqsnzozeb0MXdMvQ3FQBP+sgsaqxzOv8adKPi4jWIxq678beL\nz6YJhOyYfe4xNHkJtt0MtPJFTS7kZJCPkcwObvzPCdw5UIKgkW5/nvSTmE3C\nQ1zDdrEcj694o3hCY8wcU/3DhwqiEXDQ+orceKE0+X/CzJUh2WN5UlVdtmDC\nPeJgg1SH390vRZ+elXV5VawhilNCGe+NPGGc6ly+TTc7kUfR4+KSWOBxsADc\nlMXsWmm21fpCiGovOAMffQDQPq6q+VoJO6joLyDm40rQ37XD2d/DkT59drU+\nAZ5JFXNYHjV8r/rZeEk+z8Dwndzi0FmAmhvjlE9Chwkqe5sqB0ogs6+GG/Pp\nxe+nJ4szDK22dnebYVK5BiDEkk7KdT4KpG1FXwcV3cgAmi4ap/+wLOlDFYLj\nByYWic0/PJhxhTbAXCsr4VZvFV3mf/PC1bbfHRXr8btFNtcSCPqip506K8YE\n42hDx0hh6NUnVCnMx9oiu2giQ2GLK8K+29NauX5oq+3RywQFFmzvnzGTncR6\n3mwO+G9ghQ+nSfpkX5YJE0EL3ilYEa8U1M9M+LmrCvE8LAiDvrltGjnA2Npj\nkx3YQslmpdZofdRt73S0Jt0PJR9RvmtyqK8yCP1Oi+PiWNapAH4jvNTqsTi3\nY3NX\r\n=TSkD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.da72839f4.0","@material/rtl":"8.0.0-canary.da72839f4.0","@material/base":"8.0.0-canary.da72839f4.0","@material/list":"8.0.0-canary.da72839f4.0","@material/shape":"8.0.0-canary.da72839f4.0","@material/theme":"8.0.0-canary.da72839f4.0","@material/ripple":"8.0.0-canary.da72839f4.0","@material/animation":"8.0.0-canary.da72839f4.0","@material/elevation":"8.0.0-canary.da72839f4.0","@material/typography":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.da72839f4.0_1597946487498_0.5453739895293845","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/drawer","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.346069ccb.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ff59fb93661fed12efd7c7aa799a82b54d7dae9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.346069ccb.0.tgz","fileCount":48,"integrity":"sha512-/kg6kdAe5ynlO3egm/M9QzOC1mgmKxmVqDX3stTaNJQQ/n90pTwr8PU26EfYIv3kjL9wwVYhQ5Zk0+h0xzfL9Q==","signatures":[{"sig":"MEYCIQDJ88LzHFbx7CKdrwWIqOflRsfkqJQO2i/KLhxMzXglIAIhALx7NXzb8btVKdD+vi3y9NhjDD4mqqYWqw3P8jgqvj6k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr7GCRA9TVsSAnZWagAAuDQP/1vddbgZv8ZyHdOjF1Xf\nCv36GxEKbHXv04cNaDeLIl6JKv9/2Oa2DkBkfnxXmRFWLgnyxOFPUb0QxjS+\n83X3h3fq+034FGgR7QRVElXB601dwXKYz1s5ZUc0dgL2PsmD052Oha8SyIHQ\nibVbIqCpAsfyneA9E4xkvvSZBCFbjlkeP4eT8QiTv9/wkV5PxW9Q7QqsTjmG\njW4MLffrtoeWi2+4iOr5Io2Ea9aYtZKDskrDwixD8AjsYH6i/fYOVcrnWKFr\nd0+zuVMFcLQV+z4VFdb3nfYx31bximNw6MS5YIFiZvkv4jQr0WR0Fy73SDnh\naiahw8yGNXPU9CNMg/ah3pPFaGxCR+kf9g9L/fxu/RNiib/2OTytAkoIYDcI\nRXWPuLhJyTPO1r4kZTDjMhnOqMB1OT2QXYbAfpvQkV23Jo2yJvIzjUxLkdxW\n7//yhRnDPv9LefEX/9OCxvulZr4Ps0eq239C3vq/085kjQ+o8x+iSfsVXQfK\nBhuzEhx4aP+I+lgempqMV7IsoU4HX/GgbP0HokcRR75jTYmU836xwpFo0uft\nE9KjWm56bk1Sfn+RidLi566GpsZzZ/PrpolMs3KmfD+UtPJHQZS54UmlcmeW\neEpJ+zF6FpdFsbArWPKzPtxqJU6+SR49dC3Kuza5rLvBr7vumO1NBXiOfovS\nuEdI\r\n=nkzj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.346069ccb.0","@material/rtl":"8.0.0-canary.346069ccb.0","@material/base":"8.0.0-canary.346069ccb.0","@material/list":"8.0.0-canary.346069ccb.0","@material/shape":"8.0.0-canary.346069ccb.0","@material/theme":"8.0.0-canary.346069ccb.0","@material/ripple":"8.0.0-canary.346069ccb.0","@material/animation":"8.0.0-canary.346069ccb.0","@material/elevation":"8.0.0-canary.346069ccb.0","@material/typography":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.346069ccb.0_1597947590212_0.3887289062509214","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/drawer","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.e27c5802f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edde131d19dbc9590ace0b869baea06703e894df","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.e27c5802f.0.tgz","fileCount":48,"integrity":"sha512-z/U8ymO8yFDYiN2raQzV427ApP6rRVT5haKcUGSiknkeB4RizjZbTdsR+NhlF2SVa28ZoBkEjQBJs42H5nfhiA==","signatures":[{"sig":"MEUCIQDNLBB6D0eGdd9EKHy953YdWS8JhsHNpzyZ3ig0NBz6EAIgWHYZRa5xWuBTJjQDXqR9vHPxhxoGFq7AvMGnYcMGD44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPswRCRA9TVsSAnZWagAAsKYP/jf81lGTGedzajbkUtbe\n8iyVYWJSLnqwU9mj2n1iTYBPK1i/owo29OcU2bK8JqoS7iX5ckzItepDspnz\nrFofvbGmn9lJFOA6lyWgyQaF5spTOOfBx0XWIZejyxVL68xi9Jq3lpel74qW\nqwIXDLNalrJtUsck2bWBLBwcRVPlq2wdFvuP8ddPTqxpbFjxlEA9B0cMmRKc\nP4pv6Bi6ReYpgsqqkpQMWX1/DIM+qEdKYcyAm74MA8ybZrEuthXeVairRnkZ\nV7eFTZjXx5SxwHQg88J/ktxaWqZS6P56QNv6kdAf37x+kvz98Ed2A+YN1SCP\nFa+4PKm0J0tW/4T6/ZL39iEIcdYZOiPXZ/xME7i9Q87x//Fz7wECs9M9kKrp\nkloWS3rH0Y4tMXWhR9mqpXaD3ig1T6X8kFhoNl2IftyN7OAkKQomYof4gsbB\nYzuviYgyb+hTpykxWLNvlG6nfLe6IZp2Is59qhJaQMqNebh7t0qvhwAP8k6a\ndn3R7VUl69SfTE6D4WWXQ+SLXTVk+CRepE3/IA2YDkbpwIfTPbHGSmpLMQc6\n7f14E0oOerULLuSc7NJkQlpDj11i7vcYXvQPHntCX+u+k4vbkMRfCpE4Byri\n6ent9JIWdi0Z06FeNuvMq3XrF3jNB16WvtOUbBItpApMpD4RGBk/Tt9YvLr/\naHrc\r\n=b3C3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e27c5802f.0","@material/rtl":"8.0.0-canary.e27c5802f.0","@material/base":"8.0.0-canary.e27c5802f.0","@material/list":"8.0.0-canary.e27c5802f.0","@material/shape":"8.0.0-canary.e27c5802f.0","@material/theme":"8.0.0-canary.e27c5802f.0","@material/ripple":"8.0.0-canary.e27c5802f.0","@material/animation":"8.0.0-canary.e27c5802f.0","@material/elevation":"8.0.0-canary.e27c5802f.0","@material/typography":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.e27c5802f.0_1597950992560_0.1387747539566777","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/drawer","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.f4532b9c8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3e75a78844e7ac4176e6c6d73406a5ba9eeabfb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.f4532b9c8.0.tgz","fileCount":48,"integrity":"sha512-dDtOUEPrqGSoVym8RPQ4FakxOptOoo9A+QZkCVyfMrdeF9HjR3adv1KA1KAf1lfdWUsPhM5iGsIk4RAqDQeKnA==","signatures":[{"sig":"MEUCIDDyKk/eottZUi+8yHG9t3CqVjgpUq157tG+DUiL8DRYAiEAk8uHgMha3qEg4YVCpR3daM0+vZHL4eZcw/2PapGkiwQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtYECRA9TVsSAnZWagAAvdQP/iiOgL2aFj01Uz+/5NsC\nmzlzCKcPgQ4HgsLF0A2ZJtu93f4Fl/Nf3i0exU5jLH6SQcd5f3jlweStSxJL\nwkUz7dzj7mBunYp5KyniMm1Uw0jpfcEgj5vgd4x8JjVP8i3S/QhGyFOrLCCF\nL8IZPzzpw5xSzMnPIVB1QzCAHXE8g6Rnrr4DfR6b8asEfAkxft271NHGQSdk\nw1r9sX3qUJaSAyysLYOUfgaOwfi05Iv9vVCF4LId7OwE0qKBZ9Uma0DKepFl\nXPw9vujKhUIh0cj6jbhKQEciTLx1hsRNZbSy30oc9WHGHDEX2Q7CRnuEUqRQ\nsq6/+4VWOoD5ApVcvmGMJILpDTnLeWZokffrZQDubBtpcfFiEz+oxjULL1MD\nMmxEx9+Jv+Uk3zlF/HtgNnyD6Cr0Wiuex1NAnskrChcL4eUnctwDWl5go30R\nboVim83Ev6xwi1vkvW0Lak06+8ROGbr5+FH4rcj+CKuoNyNiqludn2ncAhdb\nWO9lxCMJiUWa+60lhkda/blzdyaAcQvZK7RgZgy2f1GeKKQNJKJPUjczKTgB\ngN6RhjdkQHqrK0tUNea+GDtAXAaQjZGIfQejIGRGSKluzySJAz1YB0qNZGQ2\nVxc/4Z37ENc35ySGl44yRKQN663Ss4cwptiQPeACfMJmlbuXJOir5Y4h8NUS\nYFWq\r\n=Nij9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f4532b9c8.0","@material/rtl":"8.0.0-canary.f4532b9c8.0","@material/base":"8.0.0-canary.f4532b9c8.0","@material/list":"8.0.0-canary.f4532b9c8.0","@material/shape":"8.0.0-canary.f4532b9c8.0","@material/theme":"8.0.0-canary.f4532b9c8.0","@material/ripple":"8.0.0-canary.f4532b9c8.0","@material/animation":"8.0.0-canary.f4532b9c8.0","@material/elevation":"8.0.0-canary.f4532b9c8.0","@material/typography":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.f4532b9c8.0_1597953539728_0.5265457951071859","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/drawer","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.fbf73c2a6.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab7125e801977b0362e6f592a68f9ced02cc7841","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":48,"integrity":"sha512-ZXjRvF2RJ+3q4nMhF7WE5zJFnzcH0aU3NwYmVx2ReigYLxBkXDB9Qx6ZSdTCn3TG2I8IT6Le6pSFjwAGQza5qw==","signatures":[{"sig":"MEUCIEcQz42HFOb5fBBCax2cYuuKlINddE3w8Z3EHwYKkxg5AiEAzWuyHguH33ikd/yfvqOSDPTP9Vj7fh8gKTItDvHILVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuYiCRA9TVsSAnZWagAABqIP/Az43gy5Gwp2svfoU/Vq\n0e0tkOc0h9WxvIucJny7zh56yj5bTm2uAvHKcVO63nihYmIw2UwkQpT+faYr\nZvWyQ+Fn/NFJTilHU4LCg8mmrU1lWM0s/MM9qeDP9eWwSP8twbZGTF08ZLbY\nBp4oJNNkdE000nvyRPT+1zj2bOxeVkdISzkVceeVQujMy9OTn69nkKk61wlz\nonIMhUE4G2/6L6UtOdU8aa0XhGxpo6X4PeuHGY5THnqiZBh0z1snCbvqLMtm\nTqWGfHFCrJvnTEhx/OaCvJLD1DYQH5nxX9ggZ0nMNFIm0UMX0aK0BTETI4NF\nBRx2sVHkLiki3NxAE7mZ7SzAXxVXbwvD31UIYW/uqP8e5sEqBzYbzcWxi737\ngASXTl4Uvbm6OktSSVzEyyNfmMcn6ZCsST/uL7nK0U1GXgo3SLpxs9TeO8MW\ntjjNhxVXnxpiuzqRU3fo1wzmSeRW5beuzvE7WGWQwxMSvCNTrlk+ETP5t++8\nJjeHp+/55VdrulE8v7hdDiCR4R/Gvj7Plq5oSBEktVZ10YwWS30frHBHMLv/\nlqwKhYW+yYRwYRJS15cFHkQ48VwsKlEC6zfxIDHTtXVBR0bRNzGLEQRmVr1d\npvpHe7ze/2kh6S+AQSEX485iLxu3dKfiKJXMhmJ4zNnzRxpwlVUNvCykswH1\nf5Vv\r\n=fQ3Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fbf73c2a6.0","@material/rtl":"8.0.0-canary.fbf73c2a6.0","@material/base":"8.0.0-canary.fbf73c2a6.0","@material/list":"8.0.0-canary.fbf73c2a6.0","@material/shape":"8.0.0-canary.fbf73c2a6.0","@material/theme":"8.0.0-canary.fbf73c2a6.0","@material/ripple":"8.0.0-canary.fbf73c2a6.0","@material/animation":"8.0.0-canary.fbf73c2a6.0","@material/elevation":"8.0.0-canary.fbf73c2a6.0","@material/typography":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.fbf73c2a6.0_1597957666463_0.8629809799949988","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/drawer","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.cf800124f.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbcfd33c66118cfe0da4105e711d11d618738279","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.cf800124f.0.tgz","fileCount":48,"integrity":"sha512-bfQxE9BR6qEK9oOwkmKENKfxP2iHpa3IVYFcvw+EQv7zTpJYloe9LLY2ArmA2oEUXeiNWGu1jJBMbgzRK4Z/GA==","signatures":[{"sig":"MEQCIFcZLBh7vL76CZJ4AjktrSDE6RnV1H0g8MvlZ+6SCP0KAiAWx4VqQkPEIlTomIrz5niKIMf911rq0KeVqmN1UMvE5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvD7CRA9TVsSAnZWagAAXLAQAIsZKp4d/Us7JBd2hrvH\nJXv03OzFmw6OK0kypBhRV8+aiAF3uEuK50OSyQhkduPuOFVS9AWa1VhBedrA\niWZRCurgngQ5h6FsdJJDaraLvxLk7ix2P0kAnZbWx61fX0gff8St7rjEjEW9\nN8/ImvNnaoupxsMinDNUi46IVHA2tASs8MmgQ7LaV+G0aFJQHSbVoV/LXszn\nx3uwIH2TpKw3NkXyuqxx/RVfxYk7a5bEjH1guH+kenoZw+sYbbDDYzmNNXck\nYla7+fsC5UwdEnOF0eXn8gSo9Qq2eod3hhj7PYj0EOUFiNajmg0nlVdqZelE\nfnc9vFMNk6T50jDmC7jwCL5i9GOf4BwW2q60+3jIcCAGsvQjA+3+/FnTqoIZ\nvlXu+ACgTX3XHnbm5F2d3jHp+dKOqXaM0T0MyJ+x8AhioO/FFJotaGQqosi8\n1DZy5CKGGkcn5OG2+bxQsSNqOlDinCZpCFeTZp8Ia5a1LTS6lGNpAvuLGsc8\n21Ke7cV7BoCsiVJvVybSwyh25Apa+vdHHHIQXq5RSnpQHUsRMq2k3vRCidoC\n4JX67h71jVGhZ08ixZD/Wn6YfJm3X25lg8RPUyiZJQyL/YW45VoTno03bLEt\nBOThk/lRFzn0FMH0E6+UsD7J1EeYxAuvIGYPOsleNR9M/fIuruYeddqd/5lW\n0+CU\r\n=gyVf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.cf800124f.0","@material/rtl":"8.0.0-canary.cf800124f.0","@material/base":"8.0.0-canary.cf800124f.0","@material/list":"8.0.0-canary.cf800124f.0","@material/shape":"8.0.0-canary.cf800124f.0","@material/theme":"8.0.0-canary.cf800124f.0","@material/ripple":"8.0.0-canary.cf800124f.0","@material/animation":"8.0.0-canary.cf800124f.0","@material/elevation":"8.0.0-canary.cf800124f.0","@material/typography":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.cf800124f.0_1597960442460_0.07495210207676761","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/drawer","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.95e4eeea7.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e38a98b03f0fae34619830c467a475489c923f8c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.95e4eeea7.0.tgz","fileCount":48,"integrity":"sha512-/EkrBWtZNR8kzFN7XPB8JaTuC8Uug7I9JeElfi6vY8SpBkgyG9uKxM6nZaX+xTkGlLqALkbNcukCnrgYZcDNoQ==","signatures":[{"sig":"MEUCIQC1mPMDOEJOcXfQ/DKipAR5puAseBKyXpBC3+wUB6bJtgIgYKMh8XqEEXXgOFHfagVcOFYRAsJPhlSx0AdvHaS4T6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPweACRA9TVsSAnZWagAAIzgP/jyuaQwDOYj2QhGd1iVq\nmGbsppKQFZ/yca0KemMjnQjqrL6eG+Gt6UkyXoHqyEwF+LYGEZ2Q36wHWIfY\ny78Cq5NnrsUtXnLtIFxjTBp1qgiZQiTovWwNjdc4j5aBIgcVprXyo8ADcNSf\nTYCj5e9RgNkt/8E+wlAyfIJIm+L0CkOIWROrvv6bKatkeiSvse97c2rPg2zc\nWA1/6coWOl7qkk9JkAluimyycFQelZLnHaDFMgVKEPmITySz5dUSYPYPGB+u\nK9CQ3n9kMLqQEukeFjwoqIcWi/J+V8bVL80MKN3TboAs09Iam0AgFPaUWJfM\njn7lfKegWZylV9KRzNk5IRi9nmQDDtFEePx2ywN94X/M/H//ouIhcNNiWAtQ\nxMgdPIz9ChpAQVwkddxLxhbsG6CllQgLvwNUT/K6e3p34mNNtSEIPZhjV4Jm\nWzvqstdNN4fQ/fYEt2AUEbY7RyCM9rn4b6g7+vV7zoS0kHU8aoNZIpvU7odV\nHZQCMqROnFI7ApvCdRL63dnbWvs1O0Olq37xJxxwNgQmysXJDA34PX9BEyHi\nX8VHSq3dwCjjPJCpC3ONlSeVCiuUu8GTnNLy2L2EnZwjQmmjIEW7q8nhpQ1t\nURnRtUM9Vm1371okfAh40wqu7OaCLk9A9h6Jn0MOjf1pMGKBWFDyi9DVltwu\npVUi\r\n=tkTn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.95e4eeea7.0","@material/rtl":"8.0.0-canary.95e4eeea7.0","@material/base":"8.0.0-canary.95e4eeea7.0","@material/list":"8.0.0-canary.95e4eeea7.0","@material/shape":"8.0.0-canary.95e4eeea7.0","@material/theme":"8.0.0-canary.95e4eeea7.0","@material/ripple":"8.0.0-canary.95e4eeea7.0","@material/animation":"8.0.0-canary.95e4eeea7.0","@material/elevation":"8.0.0-canary.95e4eeea7.0","@material/typography":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.95e4eeea7.0_1597966207881_0.5303039973657491","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/drawer","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.91ab1c62a.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9ec058143b43ecc0a4ba230f9d51449bf886286","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.91ab1c62a.0.tgz","fileCount":48,"integrity":"sha512-2mkEvH0GiM6pXJ11EYWxDXMXAu3dIwdHhtjulBt3BlqMyS4RiFlwU1pKZeBkbnYfdSFU7ak9eJv/QfDOG4aOZw==","signatures":[{"sig":"MEYCIQDhDw9Oj/gV1s/tqkbNK1SYBxzduUnVnrpbLEyASuBMrwIhAOYGe0LM50a4NVVDQnjg/ueoJbbS/TjcHrqZqmiwpdc9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+SGCRA9TVsSAnZWagAAn/AP/31MICXpnCtakAVYmAF1\nQDr+OCdNmxIcBbyN8StGUJX2M4ncTmWXxr/A21CZsNLDmEstqSi2qtgaFSS+\nCZDHnpo7gnP/ko8VQZt4XA0HceNiNTEFCz4XD0pLEG4IaSFPDpQMFP2rOtQB\nHWYEXKfwzyxUfRuJXwG8hIfncGXrSpU2qb3426e03cnXpIuO3WvX3uR1xOQT\ndW6CBlQftGxLXPOr408XSA+Ksy+kHYHZEj0mU8T9F0lgq5h2KriZUuNIKovP\nSpc6MAbuBFGhHm1nzfSQc6LLs7NuHAbfS0CmU70FIWx8iNW6UGXwQcYbBxXm\njUnvTj+IB5MZDY1pfaCbRxQQ5e1A4YSJOLwRGUWBz0lec+FH3/LlLFXJHE0Q\nFkrxm7fUsfEQzM4QgbLxBswfCIlhJcHaFxRCz8XkGKKf40K1jVmRZcI97ZBO\n04spHY0BcJPQUmpuB+0EB797UwmhNpSma4K6QNIZd+gMoDgqEy8bjMqh0OqC\niDrBRhgNgsiCuE2GBLejbquhat3f8ap1C3xI9RNdu+AJ+t6aUI7DpgsKsPWV\nM4V+0XnXUBfpqAGstqWTizddvNIyyLgHoc0+2eS4UoAyYyGcs9U9WtGBwSOi\nZdYGLuxu/7ndKCawOJC7a1AjwPwuqU0z39AkDaAxpuGqkkX9kYGRuwEcmPgT\nM6Vw\r\n=W0UD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.91ab1c62a.0","@material/rtl":"8.0.0-canary.91ab1c62a.0","@material/base":"8.0.0-canary.91ab1c62a.0","@material/list":"8.0.0-canary.91ab1c62a.0","@material/shape":"8.0.0-canary.91ab1c62a.0","@material/theme":"8.0.0-canary.91ab1c62a.0","@material/ripple":"8.0.0-canary.91ab1c62a.0","@material/animation":"8.0.0-canary.91ab1c62a.0","@material/elevation":"8.0.0-canary.91ab1c62a.0","@material/typography":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.91ab1c62a.0_1598022789650_0.19698923704517535","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/drawer","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.58eaa9f02.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd8a546b43207477837dc14176c4a760bc56f3a0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.58eaa9f02.0.tgz","fileCount":48,"integrity":"sha512-KZ5eA19A4X5f63UGx/5asrD3Mj04OqKqc18WarDXSL7oAe4An/yiU4uNn8SFv+efgVyBxc9t7C2IL8SxIbZuhw==","signatures":[{"sig":"MEUCIQCQujw4HWXIjr5Ci9ERPntnEbic3dk5sTyAae4Lc9vnjAIgWRU8ZhRGmDdts07CnKFAkl3H4kH8cOdS0amzYLqSbH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCgnCRA9TVsSAnZWagAAg94P/1626EQe8XNLC5sRPCOy\n+nmLaKveNA9iKzndgcCJtpYZK2p6IwSAe84zxXhC7BXNfznzrG22Q1DfGXne\nxe23eJrZ2Ra8GF7mumqzDr62fqM2UAYdDtp5qDNYe0iC8bzUZy+sSPvqk7jn\nrgihWT2YthAbReWFMeJtv4KTRZwyzwkOxZ429eurFFjstH6BV0uHsw8F7UWW\n8jsCDhir38oYut9C9qNQ0elLWhwSAum+mwTTOOADNfWy/oQNw/JBaeiNGc+t\nmhzcNELdvkx4ItP/82JAD1CXirkGvSlyjzDtxttVSHsYIMBvSHPj24BoaIHt\nwoJr4LYSbgfv+Ke1KCzt7MZ2xB2ztMBOIjfa3uVg2VbR9qie6xJQuHi2OiNX\nKmfJIrwt5yJQquHKqF1cttAri/I6DmsEUyVqtq+xYsaaEGxNgf+5IyAWDLnY\nCQi1f3cDRKnAOMxnvCov08/saPEIwMvjuHJLUc6cR9tTLCgvl0/okQI1Pf0W\nr018xINcoAH5p5KEDx3KNnoJoFvjjQtYvBnPVjgqTuinBymBHI01Q8UqK2e9\nVCh7mC13K6gBJSnvcLE6tKGhY78qj21ObpJsFZczh1A3xPXFqdKfam1mrZp2\n0eV0fbksMyqXj3hDVCoOMleT+qRIApVdnHqRB411pWGU+86sdp1N8S7uS12q\nCMYk\r\n=TXgh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.58eaa9f02.0","@material/rtl":"8.0.0-canary.58eaa9f02.0","@material/base":"8.0.0-canary.58eaa9f02.0","@material/list":"8.0.0-canary.58eaa9f02.0","@material/shape":"8.0.0-canary.58eaa9f02.0","@material/theme":"8.0.0-canary.58eaa9f02.0","@material/ripple":"8.0.0-canary.58eaa9f02.0","@material/animation":"8.0.0-canary.58eaa9f02.0","@material/elevation":"8.0.0-canary.58eaa9f02.0","@material/typography":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.58eaa9f02.0_1598040102960_0.34961463638404244","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/drawer","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.238216fc4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7af50447ce80dfc0f6a0f588fb7b1b8733e37ee6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.238216fc4.0.tgz","fileCount":48,"integrity":"sha512-xb6vd19SKnDAo6rtZ8oOHyXhAc/pi7RDSRSutEpS3RTfZnee2kxL/0NdxEMvZedIylntQB2WZtVQrMd9tAs0dw==","signatures":[{"sig":"MEUCIQDUdQcQ0IWxxUjEZI3/pVCbhcMVLxTpTOLRfwYvkczrOAIgVvQgvEKN9+rViq2QKUDu0UXCiuBg4apnMQ2Tnj08K7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9/TCRA9TVsSAnZWagAAQdEQAImbGcFREi03uv0syoar\nCZDMJ7x4iLr5LJP6y3zvXSticQq29ydX+JeGAkkOUBfDkMPqLJR65rakUVXn\nvvzo/qDgxjFuAdNqYeB2EVfg1gACHRDOz7de+0r30FLyiIzcFL9p+NS20uss\nQA4JH/dKBjgxAuqSgWX39aK+f2GLuL9Z/Jm742foDE3J2W5ZXIiryBoBnZEs\ndb18Nmy+nRh6oPu1xhGien7AKYtyT2fBcBWoXoVnf9Iz1RiTnQp9MtUQ9MbA\nXdEMBFsouQzmyFoBKWBluENrdVV4jx+lFRlqLlhJL6MOgTO0Vmt7/R6ULXvY\nZmJ49fH3XMZaUH6j9OZRtBrINWJPZTV8AAUE1nWjPl4dhabHzvegV66UHXCi\np7vwEZgtQjasykmrSXyUKLoh9vZ0vEwceyxO0K9sawqUtYl+z7eBECx+hPx2\nu8TRFhgzIkAbqwvpToJqgv8j7dKPLhcm+R7fP0x9xNzuABq2JrzP9BfMHFs8\nVx6uKl9biz27mc2KbOtZOmJRleVpS7sCUkrhd2FO6zUlSSVGDHbvha+dHEQA\nKLQsiS0X2Oep/R4gyA2JsaGQ4QxCEhtvWnSG0J4rlT4QZHDUzASUVKlJ8Cyf\nwUMl66vIDs50h7HVDEIXHo25apD0G5YPBxnrpOwgwpKn/iseviK664Bdu+op\nG+hV\r\n=7U4z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.238216fc4.0","@material/rtl":"8.0.0-canary.238216fc4.0","@material/base":"8.0.0-canary.238216fc4.0","@material/list":"8.0.0-canary.238216fc4.0","@material/shape":"8.0.0-canary.238216fc4.0","@material/theme":"8.0.0-canary.238216fc4.0","@material/ripple":"8.0.0-canary.238216fc4.0","@material/animation":"8.0.0-canary.238216fc4.0","@material/elevation":"8.0.0-canary.238216fc4.0","@material/typography":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.238216fc4.0_1598283730550_0.35905518056053287","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/drawer","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.a1c65593d.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb2f6d04f298450b535d859c82445c1872ae37c5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.a1c65593d.0.tgz","fileCount":48,"integrity":"sha512-pXd2v8X6UxnFT6coPktf7LZLpQybRipcHNKXCuh9eU9xeOKfcHfqgw6Y3eZSVJf8d7w26R47SW14ECuxPczBBA==","signatures":[{"sig":"MEQCIGXlvTebweoyoUqdPj08alFBrGk4jBgbA9e/V1BzOGA0AiA08NCjbJTeCrNDh4rCsyacN5lI3Ig5l4XABZEfiWUzqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH/jCRA9TVsSAnZWagAAUSsP/03eIhi/aVuNxaExAnbG\nvG3eNEm+co8TZlVdLsdL44eNhRzE99jkiIK64rskb5Jwaf09jJeRBahM5kbZ\neADl9Yi4xXtWe2pceZWfF08q+3ohl6OyHdfq4SZYit7hR9CNvtFAnYfwvWsL\nea/0/KAz00a8nwnesNGfycEXOMxZ11BrHZNGB17JNMTYZFsSkFCWGNEivMUY\npLJ3+PZ9raT7L8iPR2jYKkCw1FYSfzS3UNmhidJjEjLwDosOWqB7xooQsPyh\ns+fusvkK/5h/3FH5h4A4nuGIckx74JqKOrviZoxC9LiTNKaKhLR/NhxtJcfV\nig3oVUy8Rl2V6/mB4F3ZZJhJd1WRI2Dlz+6hlgiQYDnXb28IXbhxk2EDEjYa\nx+jX7l3aa1X58nfivZVakow78BAVDYUQgwccHtcgljjbUOjFtNATzIUc4XIv\n3gmzdECYQdWEqFULx30C869gte2g6bA08PPjgSaRL4p8yLO9C7IT9ZadzrRo\njuikjIlUDBLdpR0UVZKSulC06xWZAep/i/sfMDkom1gLVOITD41Eddmjf2dZ\nciSJSBajjJMph+gX8ZNYEwbRotTBraPB3a+VFkD9HUyD1Jvdsw0zLeWOixDb\n9e7PUhQ9ZyCUp/CB9QgN0F/5vx3v/F4wh2Sm+iT/oxFt1MVPmMUVGH5ab7DR\nRKma\r\n=aA83\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a1c65593d.0","@material/rtl":"8.0.0-canary.a1c65593d.0","@material/base":"8.0.0-canary.a1c65593d.0","@material/list":"8.0.0-canary.a1c65593d.0","@material/shape":"8.0.0-canary.a1c65593d.0","@material/theme":"8.0.0-canary.a1c65593d.0","@material/ripple":"8.0.0-canary.a1c65593d.0","@material/animation":"8.0.0-canary.a1c65593d.0","@material/elevation":"8.0.0-canary.a1c65593d.0","@material/typography":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.a1c65593d.0_1598324707221_0.45399096562830477","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/drawer","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.708cc09c4.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b06cf1904e77c3433be828f2c5f5d02da43b51be","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.708cc09c4.0.tgz","fileCount":48,"integrity":"sha512-UCK6K6UPXSUgvhSCgbmX9w9CDm+txyHoIDmVn0zxPodB+eAg840eSus4wOiugT508f+R1iwFrFDPUxI/Tu3fxg==","signatures":[{"sig":"MEUCIBxHYybvYOA07c2ioFn9bUxwl2NhGghunxwNdEhlmKFlAiEApeZn9ssHzYjcMMdoflWdElCporrS6wc1Yp7KFIVmTU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTT3CRA9TVsSAnZWagAAfqUP/2wMwPdieFGx6t37UJfa\nBJnuf/FWtc1qQXmmYewUvnbXdT0jVA4G0dU85gZQ1ZtflQxe/qGWsyh7sy0l\n8tAK4jMbuiWJgpbjcESgAfqvtB95fE+eyHjnNnmPMgpvuFK5ES/xqovJvntG\n0HSLPy3nkUVWxq2AoMS6P0A/uEGgESo3wK1hcxldy9vA/H47mr07jnKsLFzK\nwf0lAqqUh89RCAhRQnufEgRd8hrBXLZhDAldVewxqH+2L51G0gzoQYFl9dDS\nzAi8feO0I2yfhp9kFFvTphYtghBO5mdQGoEzg5UjHEbcQttSE4fz/w+Of4bl\nNmCAC32JgYnrns9sUdyG2NlHhxBDc7JoLeCCQ3bZGwhaTHOTega0Z5nk3Bb9\nC5vPyyt/5viXDufR30UbSnXdmguq5/u+ApmeQx9KTqBXzBlXjfbkvpc450Jn\nN6Iwc04LkCnRp/StEXNlL8ciMbYxJxDyYj8qlemT98gbc9xsRLdM6Jnrpypz\ngeBR5TFDcT+JLhIveGCb+w9d6dumJvg3Rkv4+C7SsiRVBj2JT+a6+FWy63Ub\nz2HScYZmUAj/pe8tXXd6ZSQy3TohfmRGZX15C3AvjTvW8jhCj0vZmEPnCnY5\ndCudqsHFZA+2SitfeeBNMFGKP3Aniw42g53/6sHXm/4u0bX5PLhtWh8u5GRV\nkbCh\r\n=ZBRX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.708cc09c4.0","@material/rtl":"8.0.0-canary.708cc09c4.0","@material/base":"8.0.0-canary.708cc09c4.0","@material/list":"8.0.0-canary.708cc09c4.0","@material/shape":"8.0.0-canary.708cc09c4.0","@material/theme":"8.0.0-canary.708cc09c4.0","@material/ripple":"8.0.0-canary.708cc09c4.0","@material/animation":"8.0.0-canary.708cc09c4.0","@material/elevation":"8.0.0-canary.708cc09c4.0","@material/typography":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.708cc09c4.0_1598371063434_0.6496674302109513","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/drawer","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.19bea2ad3.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69c9fb3acd25bb90fe3f9769257da165d33fae3a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.19bea2ad3.0.tgz","fileCount":48,"integrity":"sha512-8DqtUTfTg8FlBtopxjf6WZqA/6gjyalqMr+aHkK9mWJGYoipij1Mf1hFGIo6wRO1Igs2QpTk8TG3zYVv6OzrRQ==","signatures":[{"sig":"MEQCIFtsnWnXprIoPsxQR4KLzYtP2trzvTuZShvsvDU+8iyXAiBcpOIyREhf2iR2tcHa9zf9gHaNBgYb+M7SBaGesJsKbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq8DCRA9TVsSAnZWagAAz1wP/0sn8FPqM6WWQN4wX8p9\nzlG6jEjTAcaEW8C3WDMwOJouYWOSbNPdoqdqMmCtTGok5q8f5LdPfB/irokm\nlab0NVPvQkS2NZwH1+xkINVvm0AFCuFa/HKCk8NHp2LW5gum6uZ9Z5Y75d+d\nFauaiPhOUcBj8KAeVm6+by03tGXUuTYMmKYNZflbBblD/p900kr4W8WtRvOq\ntmyhRbzI97RXguc5W1O3ExF5SNUiaJ+C9LQlvSbqtCJx0GQektTy2fL67600\nwEbyNtq5V9zBovzYaqp9NyenKtpiqBLOtnv/o99pRkZDjLryUXVn7hUaDEnx\naO8rDujA5JoxuzpPMaVEbI+1HPzzsxdbpDmeGTPh0fr0cr+F0EckWpNoDgAP\nrbSa3mpyhKLy16ky/C32iOLh7vGv6yeE7R77TbXq+kqWq5Vau8bH0kDHFPmH\nlm+tp8mIvhMJkMbdVZPsC/FFBBLtp4MsBnOpANvuxnKcCnGxu5kH93A5Km6/\nhzagLfKFbFIlFmpRcXUmXhCla2YozXwARUPbP16VRAeUIjYcFFG6hPfWmqlB\n6suwk/s1XZkVhYzLBIsmXuN97+p9FlDeA+Y0701kyXXsYQgqlqJRuEbzUfql\namA3ae7hbBpz0Ruweja2b5BgH3JUi5DZCGW/25jXHwNAby0r8sRdWjiup0fI\nda9F\r\n=h9ZJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.19bea2ad3.0","@material/rtl":"8.0.0-canary.19bea2ad3.0","@material/base":"8.0.0-canary.19bea2ad3.0","@material/list":"8.0.0-canary.19bea2ad3.0","@material/shape":"8.0.0-canary.19bea2ad3.0","@material/theme":"8.0.0-canary.19bea2ad3.0","@material/ripple":"8.0.0-canary.19bea2ad3.0","@material/animation":"8.0.0-canary.19bea2ad3.0","@material/elevation":"8.0.0-canary.19bea2ad3.0","@material/typography":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.19bea2ad3.0_1598467843125_0.5643419645128656","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/drawer","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.911014711.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dae1131e7084d2aedee6b088a15b6a1ecc269cee","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.911014711.0.tgz","fileCount":48,"integrity":"sha512-b4uHHgMNsZYAFjGUFqBJpO5/fyIOnurk4ZxAo+OX7XRXRGaVwKNg10pd4cw4Sbc+/CXjl2bVLbfZdfbCR0HpqA==","signatures":[{"sig":"MEUCIDmb9uUjGcsAxdjGv0x0ympeGzfQawSm5kRsR0vPaASAAiEAlWpU/1XLaExjxd2eDqq3dWDM0Mr2s0k6AcIkZzxAuH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9q+CRA9TVsSAnZWagAAB7oP/0q0EBO7gtCa5BOEx1QU\nZeajo2anqGYpMjvDrINQHaVJgYUvv7rk9GOQOL732k51L3onAwwJhFhJr9qN\nQMUunAuBFaDerkWhuU9mhETeD5zjPkhJ5Y3MAuFVbHasjykyVhu2KpTiD29a\nweA48GpRNQuyAS/vwZjhZB5776f5jZdeC4bf7jjdaMjJ30ykokRT/Y2/Job8\nppGtJjUWIgL9vh6zi+XBQi3a7dtlSY2fL6QCqHzJYRFbqiHonrUfM2JrO8O3\nQm/b8bXMviCbipMLIx/G8YgWT65CzE//ZL2T8BK9NzesH6go3GvmlrlfLdMN\nDYkBcPEP6S7emrXq65lSzECWgFjsYvQzFa2umV2Zdbngub/1MGuZevIptsY3\nKWJyBxGfXmMFf+fbeMo05Snf71YWq6vB5qsopSeqHUxL6onAAHdrmD5nzFf/\n7MlpAoiTIyTskQAW64zoqpFPPLZC0wRXQDEY/vih0+GkDSxcGfP7y4QBz/xX\nzJ4cMAlOo+2G4s+rWx9Mxti65WOEvOJJo0KlI+qOBhhd2SLNv8jrpOYqcdqm\nhbb23HLV7ww4grujtvKASJhMN8X4bkMP30RaPKl5/y+9Vk80ipXEAh/EPKtL\ncFo14/iWsa5pNQdI1qByY5nS6qtASatp0d7dL5F+4fwRSnEkijLhPOXIoEV7\n6sRh\r\n=YRia\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.911014711.0","@material/rtl":"8.0.0-canary.911014711.0","@material/base":"8.0.0-canary.911014711.0","@material/list":"8.0.0-canary.911014711.0","@material/shape":"8.0.0-canary.911014711.0","@material/theme":"8.0.0-canary.911014711.0","@material/ripple":"8.0.0-canary.911014711.0","@material/animation":"8.0.0-canary.911014711.0","@material/elevation":"8.0.0-canary.911014711.0","@material/typography":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.911014711.0_1598544573932_0.14942862599903717","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/drawer","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.d3387f54c.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43cbf1709a0ad981a0724e110845d6be9d562879","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.d3387f54c.0.tgz","fileCount":48,"integrity":"sha512-lY/ycN+qWY+hGFJ4JDW60Iqy89Erh+8spF68n/3HNTFUIqd1vOnz6WHGq9qdff3hFj5sjkZE9RFzC8RtjXkI2A==","signatures":[{"sig":"MEUCIQDJQoG7EfiNCRjzpDKZy+gDSkuKSnWf2lMrAxlbwrXVpgIgXhdcc6VV87bmEq0DUp/J4qhZLQJWKdVoNo5bx7IrAQY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVi0CRA9TVsSAnZWagAA2loQAJjsDYevduBJfdSFlGh9\njzbhiiYFXnXnbPjVXX3+9k/l8sJw1/S0TmrOs5826fBiyxqq4FVw/gT4OGDf\n4Q5CQT7/5BLSgHpdngF/3qhmkHUMfQ1PVZL7zO+0h4zymakq+8w0ou/TEJzp\nHg0jKSvcVI6PPa1TW7MhDD2vksd+nCF4DSNsootVhlPy/HeyQxCgUlsaqLWP\n71xFFUpAq55dlMhQTMsnmq2EhURq/p9cdVNpg/rEA0/MOtUShCN/DKU0fkJn\nCkDRXdohOZvs/A2ycs7F4uygTSlmvwfM2kub4GL3iEAe1qZ+qedMr23OhjID\nELTZC0Zmf7eYmhoqxSoT9ioNXqHbaZJd77HBKGu4EtmxmCktJxRT46AF09Ck\nEhlxG1w48S28gAE1+xa/wMLxHTGKBK0GPylP3p43z7TVdNGRB9q25H8EEPU2\nEUlV38Lowu7AOFYuBQEWau3J81JIM3fOfZ1xowXyIAh/mXw6l5Oj0HLN20e5\nAjvHQOpMD8vWKb9T80+olnQ0r4che5bOjULhKsc1OP0INOnf+zEEgRQgpFsn\nEqCPWDnTO1oNzIOJqg4B+1A2I3YsPVW+4D6QRVRU1gUaER8Vu7Vt/ja7q16b\nA52fEFEL4xdR2eH9qeQWs/8HqofXKjhd0GfOccNtyCHrIUUOzOnvBxQnZi+G\nEqVA\r\n=g2bC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d3387f54c.0","@material/rtl":"8.0.0-canary.d3387f54c.0","@material/base":"8.0.0-canary.d3387f54c.0","@material/list":"8.0.0-canary.d3387f54c.0","@material/shape":"8.0.0-canary.d3387f54c.0","@material/theme":"8.0.0-canary.d3387f54c.0","@material/ripple":"8.0.0-canary.d3387f54c.0","@material/animation":"8.0.0-canary.d3387f54c.0","@material/elevation":"8.0.0-canary.d3387f54c.0","@material/typography":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.d3387f54c.0_1599166643927_0.7877638473395492","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/drawer","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.2ccf996cc.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc2e992f73790030289c93a13e47cc86eefdeb7b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.2ccf996cc.0.tgz","fileCount":48,"integrity":"sha512-tV13Tv2an+6r/HaPuQCxt7n7/7vrJrm59iYL1VIBzMchcdgaJxRRiS7vNV+43/Jux9BBgRDk30WVtsTB4foj4w==","signatures":[{"sig":"MEUCIQD/WxFoaA5C1Mm6EAdI0tB5TxdXmInTWW2z8L3nrLOcpgIgJZX1ocM2u5peD3H317hYIzb7EpVTnL/GVTI5jEpQvgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVjhCRA9TVsSAnZWagAAb1YP/Ro6hSG1ceT4+LyTt4HY\nDJ6cvnZ7L6DYRUGzax5FM3u8jCpGCr82ysSiqa1JPfWbi0zOx8g/93mxynQd\nTqoYMi0OjkCRvips0ZydzO+NospmN0IhvGFQh4OOWMrc2n3zHPYei81hqpwW\n/JC1hSoi3pL+mZC8gjelwAD04DJgKRFVF+Dtq05S8gC7sgrBTBQlYWJo20vO\neNbDUxnfPFqnkjBjS6jku/TiGcHDAlyXtLMdfdDgUqO8h+VC/yq0VBDKQOfK\nIH+oq0GwJ9fiAgq1B+yTILvqtUDlzOnCOevWSTKjZ0dK+Vuy9QuWClH5CW1V\nZ99B4+q5bocvKj7lbqzshgN1Z/udAE/FQJgqoQy8z2yLx9oD8svM6kJcST38\nqvmY50QoeXLO2aMP8PrDbYtbKk5a66dL9M4qS1EKH/uTYhQB4YSUgrZMg5Pv\nmDzKCxs/jI7FVmcRMQ6nFXloEAahhQXQCChzXTiyI1ZyLmqVqX4ioe3tjp6L\nE+aVqsb6yTNYcjx9CMRi4a9UtxPqXbM2acP7o2SXeiEtlULwTPZHMAXMwEVe\nVNzsDz8n6W5aDqS/Oh/XF8TYmrDC5WHoNIPfrARVwRkj19bssDjMlTdUSYu1\nhgXSRs6xCmIu/tA1yZyU7tR8EZfaHpbq02NgUwuu14COubuJ6lm4Yt0Cfey7\n9pca\r\n=ap/9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2ccf996cc.0","@material/rtl":"8.0.0-canary.2ccf996cc.0","@material/base":"8.0.0-canary.2ccf996cc.0","@material/list":"8.0.0-canary.2ccf996cc.0","@material/shape":"8.0.0-canary.2ccf996cc.0","@material/theme":"8.0.0-canary.2ccf996cc.0","@material/ripple":"8.0.0-canary.2ccf996cc.0","@material/animation":"8.0.0-canary.2ccf996cc.0","@material/elevation":"8.0.0-canary.2ccf996cc.0","@material/typography":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.2ccf996cc.0_1599166688823_0.5078678339502432","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/drawer","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.744bfe5d8.0","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":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@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":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02f39ecc308217c705e4d619075e8c0659e46df8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.744bfe5d8.0.tgz","fileCount":48,"integrity":"sha512-jdZrREGP/CMGWvDbW/ifNQJRR+a7YlLXomMkVn4gqcMuodcqHaJ18FPO9GS39tEyyNM7/wJiKfGXlh+f1SNdLg==","signatures":[{"sig":"MEUCIGhRjsGYIKvf3ELu2pqsE2c5QFJd7lSlsylZZm1G54zQAiEA8B54VE3H5k6i3tRGTDWZr3eI3EiVZmCFkPuI3Z4Q3Ew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVkACRA9TVsSAnZWagAAVssP+QBir0YCbNJWVI7RIQX5\nEztgP7HGFf9DQER8TUPkJH385aJpfBjCJ6uXytYPBs91CZQwwZS3sxXQncem\nBGDJKgaA4FeVlyc0Covy2DQsQoRodn5dWQpI8RzU5eRnsCvOLZiVGPDeROQ0\n9ueC88fny/PiPeMCvqv67azj1vZMC98I6rUMw9TymL5ZtLAXDPb08g743TdT\nBSde957mpzx131q8r1vKFgeoIuTPfeWPsVFFQ0a4zxr5hU4PpT1YGQsd89r1\nHjudQO4aaDKvJd4BmGc413H7H1687UL/uKJwFPwT0Y3yhhYWsAzXmVUKYio7\nlNc4R4W+ZwiEh4pRUK7c0nvr0Lt2mrfa4xyRL8iGz3R4RV02UU76MC1+5qhf\nCswgsEWnN1auYi/WJBy6JBpL944NKolMA5vuNFYhcMACXvTaGDJK8IYNPQ+k\ny6b+tXfwwhQUMVTacKir51h3LpR64N7WP9RBNojvm0NWAdPz8go+AqS/3a1a\nZJeTcWEc1M+1rEbG4yviC675WtuJ5PRtfCq9SnsZqm2rl/vtDyUM2TDFVlio\nFXf3IMSxGI30Hr0iDTZ7dm/p+PerdpfW2CIKBc58hNpEbTNuxWVoPeP8g/nS\n2ny3mEl2qLtXszBpeCMiQvaqrtqhr/fMoSp5B0qQzEc6ICpgGSLgh6kWVGHw\nUTvs\r\n=DwJb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.744bfe5d8.0","@material/rtl":"8.0.0-canary.744bfe5d8.0","@material/base":"8.0.0-canary.744bfe5d8.0","@material/list":"8.0.0-canary.744bfe5d8.0","@material/shape":"8.0.0-canary.744bfe5d8.0","@material/theme":"8.0.0-canary.744bfe5d8.0","@material/ripple":"8.0.0-canary.744bfe5d8.0","@material/animation":"8.0.0-canary.744bfe5d8.0","@material/elevation":"8.0.0-canary.744bfe5d8.0","@material/typography":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.744bfe5d8.0_1599166719537_0.9935697920298361","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/drawer","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f671750c39a5122a676879655c6490d8a3f4b6ac","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.78da96eaf.0.tgz","fileCount":48,"integrity":"sha512-4XcZHJU3diSfhEWMb6foX6UHc7q4h5DMSi+irKgkxvsbr+SSRlHFzfZQ9c4EWNGRB59m18knuW0xmnNMCmCc1A==","signatures":[{"sig":"MEUCIQDlMMviP/JfpvJ4KVoaynFc814HbXNGXzPUxyHDcHaePgIgJqw73jA5eOMbpS1TAiljv7A6MliEuEgoUKvmlg4kREs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9gDCRA9TVsSAnZWagAAiN0P/2CUEkEic/ndGzVGXK0U\nxhuqqnoKLCkE2NzPctAbpokDW+d2+3BIOBtRilwPusTySfQFZ0ysdtuhTQQB\ngqd6Aux27DV1pmjo6FvfzLtfpLdpa4Oh6VwBivJAh3Qab4d5OL8NCnNQUD9j\nyrfbEpGoX34bDTfP6e2r37+ug0AaWV9uZeO0b1PbjDlnWubWCD0BO+OLNCrM\nwN0bG3XCE+h63MxO6xbkBFDPPNYZ/fTCGIo9W+Xm2RJ6r7ZtQybdGU1FwaIj\npRr4b8rBT5vAlQ+DGEsGDOhhJSn2kfRUtk4AuR/kFkzU2Er3/IOiDsUWDpIH\nq92uMi4JRUVurthphYv9lolaQBbS61LazsJ6UvVevY1JvlBc2WWrx5GRPePe\n6AGXHZzaRb4YbldM4k5Ds6ZomFf0L8Re0bAIe1kCOWyfW02aYx4UQkumpUoS\nf3K19Gc9fk3cFhLXo3l3mNnFv9S+XQhKUTEXh4sBb3hRwiUbrsVmekj9wsTH\n1hEVcAIhNKZ7NMMptv5cOQObmWZmJHrHLunOfUa3A7+AQtVr+zuHXwOEtjmY\nBKORcnNPofNhMEmDSzCapw+Bq56PtIXF4merHFR+ZzQxeTQQB53XU/4mMykG\nesrkQ3O5SHBEkKTBquDMLdHOdtjMO4TchHB/m7eJUEgCWKKPsuTinM1z2V4E\nqrYU\r\n=64gd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.78da96eaf.0","@material/rtl":"8.0.0-canary.78da96eaf.0","@material/base":"8.0.0-canary.78da96eaf.0","@material/list":"8.0.0-canary.78da96eaf.0","@material/shape":"8.0.0-canary.78da96eaf.0","@material/theme":"8.0.0-canary.78da96eaf.0","@material/ripple":"8.0.0-canary.78da96eaf.0","@material/animation":"8.0.0-canary.78da96eaf.0","@material/elevation":"8.0.0-canary.78da96eaf.0","@material/typography":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.78da96eaf.0_1599592451040_0.9217256956624376","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/drawer","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a9189f3ca863a6a71c2436d51da33bdcfe0cc2e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.b0ed593cc.0.tgz","fileCount":48,"integrity":"sha512-8UQ2qqyl/RS2pCTdrjs1VhYY443qqyRk7qVYEhYHiDOvXbHFMF8mqEJRVafIRypdYlzn2xK7CcnDnvXOc3CoFQ==","signatures":[{"sig":"MEYCIQCh+e8BX/nmeo84MO4RM6JSOAQRpFTRa95gMo0qvYipWAIhAL+peVWAOWNG+gX4LmRteYExDPfGCP4k0b2R2cJVvo2+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHNyCRA9TVsSAnZWagAAt8YP/3czO5WLMDCUPpkRz+0X\nGZTFltoYja72ReP8f5Xs1y6dlfrpsmCJlvecSJ4LjQUoEwJy0DjL2YVPbKXu\nTMsROLuwtAtuz5jzMWU18dIVa7dCZ8x2+czJ5iZZlZ2vtD8hIdmzVl5OPWyF\n2Dl+eJplxYuozBgdAIqaNtwLLYkITl7f7htyFe11AFum5w53oWiFunbhTRnO\nwRyLUDAHzdo7r8zMkebXk3DKTRP2pLtL4RWB247I6F604Tl0EnmSIffz5vxd\n3AbNAs7wjEXYzswiU8e0Xfg4KZ2EgVEYMWBVzxBcQtn2N3phU9WLx+kcTLM+\nEI3iTceCNdK2gyFDWUg2M2jKB2yJABqsnzBJtXAuXT/4Q4/9bPc3ZpVXhQ9I\nu0k965nLX/invd0wkXmj7ZNPaqzLGUcSz69md92dzHDXSMZcsWnw5ur4sXFO\nYkqOHxd3STDkjzmZQyXYKKB6EWANXTF8aHUbXVRh078Z+5f3kXfuFFla4etP\n0/9FVfnf3VVhLjoofKzLdxxusjS4oFuw1k+r1vJBTUQAald0gWVOZQcN8WlI\nO5lwqOuZJf/bZOKWQwpIYH7DeUBO6tCuvop3tkP8ZKQJUxmyjGrtxvY5paRA\neNFxwy6164apqkPgwcct6zZDZjRGr8cyoM7B5n5/mx+8MWuEivmWPgDIodOL\nQ1l7\r\n=8IX6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b0ed593cc.0","@material/rtl":"8.0.0-canary.b0ed593cc.0","@material/base":"8.0.0-canary.b0ed593cc.0","@material/list":"8.0.0-canary.b0ed593cc.0","@material/shape":"8.0.0-canary.b0ed593cc.0","@material/theme":"8.0.0-canary.b0ed593cc.0","@material/ripple":"8.0.0-canary.b0ed593cc.0","@material/animation":"8.0.0-canary.b0ed593cc.0","@material/elevation":"8.0.0-canary.b0ed593cc.0","@material/typography":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.b0ed593cc.0_1599632241777_0.02255704311336504","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/drawer","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be51ca7d13a7873172816e15498171fa17ead64d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":48,"integrity":"sha512-lN5+wjeJXpS2TjXRw836AJ3Qx/EP0qkgxsLTSGdM5awH3+BFhHCNZegkAbKRGjNE1JjKOUMzDFbI8IlnQrvwRA==","signatures":[{"sig":"MEUCIDAKj0k3AbpQIjodwcZbbKMKBlxlzIsGxid88MGTLY0oAiEAnii3uaJFutlvxbGD6leELQXz76BeZrcmjJRqtr4OIfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpafCRA9TVsSAnZWagAAyV0P/RZZb3+RdL2/4Hvj837r\nhINOWE2lNp9HAkx7vdA3DG4BXOvR9YX8IAZhOaLx2eJIP4iN6HYSyMARX62K\n6lBU3r8BoA0CMK/HKodgptRJpJVizjlV2BhOZYMoxgEXDLEU8kSU0GkL/Afc\nF/D53JGWHunCYxqNPFiFgkrOVieL6LnVdfN6e9zqR2UnYoCZFQ8NfmG6yCp2\nzJWxV4xyzLZTYEuif0bGCi7mf/oOqBqGNZUiMCIPU9rNHBq9UQDiOceyDVsq\nzonLIa5EDmMMcQXIwVxUvrb8qCrehFtJsSpilnCT7lKDs55XIh9JCrtaiLXS\nAxAQT/rswfhlTKfUeAmbAENmypVCQzJQrh2kHDwPQ4HAV17R2LHWaC/t8TAY\n2EuxKpFJH4ndk9KWP9fbGz1suzhrxqhiuin4HHWgpsL3GMc2zMrT9HTPE+4Q\nCh3YTkkUpCyHwVL9lTlumoC+ADicWRo7ak/+B9v6NByhevLUPGJRq8yV0cP7\nL2V6rgTzruTH1yTq8IsIPaaLPL1Tgx08fxFFJZwxJNHTZchfnq1h8+ziZfHr\niF6xpBhY3nxSCiPCWkOPyRVbU2X/UYQSTBSDNfe3TTpsSEMLO183SjyUsyOg\ninwuEz9EtjzjA+SzCG9bjMW6k5IkgrHLOKVa6WChLQ0FlHju8FccaLs0JGc5\nlz3Y\r\n=h3OW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85a1fa9ea.0","@material/rtl":"8.0.0-canary.85a1fa9ea.0","@material/base":"8.0.0-canary.85a1fa9ea.0","@material/list":"8.0.0-canary.85a1fa9ea.0","@material/shape":"8.0.0-canary.85a1fa9ea.0","@material/theme":"8.0.0-canary.85a1fa9ea.0","@material/ripple":"8.0.0-canary.85a1fa9ea.0","@material/animation":"8.0.0-canary.85a1fa9ea.0","@material/elevation":"8.0.0-canary.85a1fa9ea.0","@material/typography":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.85a1fa9ea.0_1599772318729_0.9510606992315191","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/drawer","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ccdcf13d32d3ae240aba844c89c7675f598c342","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":48,"integrity":"sha512-x+rBaL2sptEUZ/Ba4dBZS4eZfRjwywfqryOQsDNk0/vx9CTjf+W9EDCZDk9gWuvYx33rxuihUsLXL56QbQ+KXQ==","signatures":[{"sig":"MEYCIQD9hstTNLOoCQjzAXfe6Sk2WkFJ+RuEtuXA0k5mWS4+cQIhAI490QXpglq+8AGGZWZys8cmbMMHLyOHpSFiacWCOtp9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7kPCRA9TVsSAnZWagAABkEP/3Dbk4oG4ELI0xONx0uw\ne4KCUc8+zHbaD3qnhgvIyumTxfw1f8qYBOdTIENwEpsYutdPiWPITV5x8+y6\nOlr3wf5rM5x1t6F0BgeZVMwbrkRJtTtIaqm+w1V7BIfEGMUBVW6eVB/xQaGI\nRVyVFgZB3zmvgyYJX0Zna4yYxjPhaeQINt3h+uFS9eeQO0Kr/ncgVq+xXL6Z\n4RC/0j8Kuwzrv/UDLWrQpylxnS2E1jDhp2WA75MWofhSrzxT2Z1Cl/FINHc2\nQZkWnFXhI7JD8lj2jZ3dyZYixTB3wmlopXXdzlRRxkTdkTsOUhPDjPQAxFme\nmswW40KU/8KKxLfedWrBDRr8J2uEhi6lcPWNP6nIMeYz3X6Mj9wv9u4JDP0G\n4WZOp0nSIQo0Xc5qQ4ntWhv8Xq09qmfvuYZ/wn7q/opZ6yP5RVETt1OL7poT\nULchF+n5dXoFLPPfJkZgZVuWLLbZWIzTAQre2lxwb7QbreYyUGjRyWPAFmg/\nXj9obWk8NXfOzYWAfUJb8SVzSArtJkmSYWO4niBHX+ijvSFejGg3kh+pGbF6\nxZMzPe6u8YN9LK697ABtn7Mrz8xmknJp9nmrzWVIR8E0dHvB4T52Nyjzawxc\nf2xGLnFCHPia7sPSe61llbgdwLWLF9TWxOxEtKK2ocnOEfDIyepkkaowLhMI\ngFK3\r\n=vGMF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0bc41a9c7.0","@material/rtl":"8.0.0-canary.0bc41a9c7.0","@material/base":"8.0.0-canary.0bc41a9c7.0","@material/list":"8.0.0-canary.0bc41a9c7.0","@material/shape":"8.0.0-canary.0bc41a9c7.0","@material/theme":"8.0.0-canary.0bc41a9c7.0","@material/ripple":"8.0.0-canary.0bc41a9c7.0","@material/animation":"8.0.0-canary.0bc41a9c7.0","@material/elevation":"8.0.0-canary.0bc41a9c7.0","@material/typography":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.0bc41a9c7.0_1599846670605_0.7135847502555683","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/drawer","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"985aa632e730ad3bf81e0beb58c705bcd58357f7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.fc0eb5013.0.tgz","fileCount":48,"integrity":"sha512-jwhkxwGe1dqrZPLzHLDm5jHmZHG63JzWQdEb3aWNQvyRRfcbc93tNDkaB8CerawJsXU4zXCMKNJRY6l7IJF8XQ==","signatures":[{"sig":"MEUCIHc2GAK4dV/7M0dTr/HrUOmxDiwO556qmny6Xeg0DD5kAiEA8bxOAXYnTz8r9A5CNnoIGDicRNiIYE4oY8UuB5mUT1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9aJCRA9TVsSAnZWagAAfDkP/0S0AeQ/v8R/MT204y8C\nvMpEdamMtQBjSGXLeCB22G7Amngq4yNc/0Z4r/4KXHK5LSSAmBc09u+cw4V1\neuw6+GlBPg+IYASn/MDziAeV6qW98WTo3wUjieU0i1Ttbjw+li5L1BgJGfBy\nlan/Sz7wVOMsxfp7gL37q+TnqNYCKlYPd29s177O0LBCUDBrle09Ni05H6/T\n9KBpzlGtNGwoZJCAs+7auEujo2zvh9x+M6dPQNsRfNH1PC4Br1t/qDaXFnUl\nvml9BKdKpaiX6yuGyAdClGZXksqnIWnE9eXa827m0fAkIoGWqm/qEcohVize\nRSADv+DWXeo7F1QhnejY5+c1SD3LuNkC2l2Ka5lBKSw6HAcfM53kVVoarUMJ\n6+03/Y1lKNDQcofKLetqX/q9GFXz/4SvR5tDxVVZIlhI5OXLwLkbUTjdkiUE\nq5sQjnEIE506t/Z851CLepwmOhTZ+iNRDi18Nynv5p71qHQ+O1szuCJnyr9C\nviRMUG8vLnLUDCmz83z1j1Sr9W6s6Vd4JEI1AFOSBUhl+RvK0MVIoRN47mzh\nmW+hzJB4uwYXwFP/qcMb6SFKmjQusSsZFppng0hzujFD5eRwLB3mNcuEAt0n\nkooSYhT+dqbbPBezSAXoh5qS4aLl3lxicOZBaUV3hy5Yysl9TazhbeUoln3d\nS4Jp\r\n=UC+9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fc0eb5013.0","@material/rtl":"8.0.0-canary.fc0eb5013.0","@material/base":"8.0.0-canary.fc0eb5013.0","@material/list":"8.0.0-canary.fc0eb5013.0","@material/shape":"8.0.0-canary.fc0eb5013.0","@material/theme":"8.0.0-canary.fc0eb5013.0","@material/ripple":"8.0.0-canary.fc0eb5013.0","@material/animation":"8.0.0-canary.fc0eb5013.0","@material/elevation":"8.0.0-canary.fc0eb5013.0","@material/typography":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.fc0eb5013.0_1599854217321_0.6242518699979587","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/drawer","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.319bf66de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67e6cd77f74f133d859da01ae7f70d6c98c2fa8d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.319bf66de.0.tgz","fileCount":48,"integrity":"sha512-+0eXn6OKse0j2LSSDYy6iuCuB7LKEQpvZTIZF63Lr4qH+8EfTVF74XfotD0tG9ouCFE5bMJl76ZkYku1RY/eCQ==","signatures":[{"sig":"MEQCIHUUVywdt21e8ZeJA13a+XwtDCqdGNcelQAebnkJ0H0yAiA9Xgew2MqmWJWOp/ZTiPOFdQ4c+qAOnaoLMJia4V3Hyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":906808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAQ0CRA9TVsSAnZWagAAcG8P/A5zxaC4Bntn5AOrQpWw\n4Xwrrhts0XtqGapDdqgMTA7Lmfp2FSIRij/sQbYQAO6Eu0JuowOpjRNCmry4\nGydYXDKJvt30x+ENRBI7AwUA/Lmc8iCiRHLHWhIlEL1LLgt5/gRsLHyVf9Q+\n6t8atcRRTcSwDY204j2E6BO1Z19lLgXvpwHGNYaUqbblhMVMwy7DTl+B7RPW\ns4bQt53HubHvsbNZijg4g5Pa7vE17hVNtGHGRcCsf2w7ZoxBeqLyVj3WpUZz\nAkZcSMbFCKKTYFr9hxjvAJA8YLDW7gW+pubq5jrfEbK1PpVMNTobjeRF1hTP\nVe8Wo7UUHKtf0n/8qqGZ784Q4dm1JyVxusxnXkXNURjx41vjeaU7F8i3kO8N\ndeJHThYSMFmOG1dZ0KGwJuUzD46ahyvQ89n/IQEJnXY8+lipsS1lJc/iLwOr\nTr8MPeRr5o0H2vyIqKGq5NT1Jvz3LJ95Bgur9QcYzVHBhu4LqhL/EZRc3sAg\nJam7s4ifm8AYigPRaemTrOOfionLE2KMA3rHmJT5XtiVbP2KA4sVZA5YqbPu\ns69U/+REwDGkImTd+juimgIcWyhJlndGXbTYS+LuwmgZV8GOFiW7Kfs26YS5\nN/0Qtl/JfCa/9D5prn+I7N5+czyFHJmtzFs5Mk4mrtl2hIK26TTWOXO8fj0Y\nivSp\r\n=Kr/r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.319bf66de.0","@material/rtl":"8.0.0-canary.319bf66de.0","@material/base":"8.0.0-canary.319bf66de.0","@material/list":"8.0.0-canary.319bf66de.0","@material/shape":"8.0.0-canary.319bf66de.0","@material/theme":"8.0.0-canary.319bf66de.0","@material/ripple":"8.0.0-canary.319bf66de.0","@material/animation":"8.0.0-canary.319bf66de.0","@material/elevation":"8.0.0-canary.319bf66de.0","@material/typography":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.319bf66de.0_1599865907800_0.4203583411916916","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/drawer","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34377433d0d38141c79f2f457403120e840efb5b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.5bfc305ec.0.tgz","fileCount":48,"integrity":"sha512-F8E0MNDyXscbjbtoGcspCvKXf1Mt6bwkyzbsIPnBpD6msmLqhF8LsYXlOkr20H0XnVFsDHA3HwAZGtN1RJNTnw==","signatures":[{"sig":"MEYCIQCYGfHlr5sPnICkZe414t4iLHw0TZS7HnxY4z7djM5mlwIhAJCspYeSTHAx5fMMvYTS2g87eRNjkrnd6JCAxx+GfEyr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":931966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqTNCRA9TVsSAnZWagAA5boP/1riXkn84SsttYnATN93\ncsPktVaDBDXlSiKgy1pGszje1yKj2d2PKfP9MzefHNTOj0CZ+GT5kQPXrHTq\n+TWlYj0NBxti+UATFVMdy88GSioVPirdZCf9Xu966LSsh/HhCUbBRA8tq75r\nE5DeVis/97MgMuWkSZzbGYOdptg1jOzO/AELPJtaqTwqUqmG2YCTBvIGbQ5Y\nbf6n48Qs/Sc/hCq67UWWRU5aH+SmKGARCRyXy0/45BdJ1+KE9NEcZjXsc/aM\nVPfbxvLFCiCxOOCoX/hRv2AN69u2/EO61eZbLWXuxBXhCRbZUiQZ3RKogb/h\nJjBQDSsFTOFy0nEd2+xRhU8eD+A/9Ru2kCGYjVjKc/wNnJTUNGZSsTqfU676\nvlYepsGNS9Au6yg/JXTkMSQlDAp3RB5aDt8nHamM1mr1c3cnxQxwZJBEb4uM\nnlXpD08mUSSZCXFGdPwQpKbBJcl4rM3Gs97mAv7MYLTYdx7nr6f/7WZRlLSX\nQaUVTvWwb0SjkoF0zUvf3b8bp7islbxBx5kM1mCVvh8/YmSnIoDP7hG/ykHn\nLymGkw42dJrCmAV9fY08iXfo+tuuUG8FhM7LLOAtHhkfxLTu1c6tzXxussPa\nL5NWakOjfaTxGVwMh+zQbfcKmFyRTpP0WS9/TPT6HnqPiv7UIcnDj7gHBIjk\nbQGz\r\n=7Yt2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5bfc305ec.0","@material/rtl":"8.0.0-canary.5bfc305ec.0","@material/base":"8.0.0-canary.5bfc305ec.0","@material/list":"8.0.0-canary.5bfc305ec.0","@material/shape":"8.0.0-canary.5bfc305ec.0","@material/theme":"8.0.0-canary.5bfc305ec.0","@material/ripple":"8.0.0-canary.5bfc305ec.0","@material/animation":"8.0.0-canary.5bfc305ec.0","@material/elevation":"8.0.0-canary.5bfc305ec.0","@material/typography":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.5bfc305ec.0_1600038092963_0.9967292557783873","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/drawer","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.83d83f131.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a07b73e81a185d4670166fb5ba79c2fedb7a01b3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.83d83f131.0.tgz","fileCount":48,"integrity":"sha512-sweNPRcGl64i+No0bmy1GjuFTSP1P5k2e6Pm1xBBm74zzzugwHY7o5bUM9Nr6+WtVF6ZS9Gjfdo34/QP0z/U6Q==","signatures":[{"sig":"MEYCIQDt9eRIyfcbZqXYu6KsWFIEzlWVdqsNPMr0HjbIyvoG0wIhALuvx3bP9y8quHOfD8ExPAREW6vA+XfyGL0w53GErpVc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":931966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrp+CRA9TVsSAnZWagAAVIsP/if/lJqja38UHkjiUT+d\nBglTZSI4ig7nFV5JwrixMgDUAj8F2b1oDPStvH7y0dBvhm3zywQu3xWpKWIB\nJM9CWEauYOekf2UdaghfttOIIeW08evSUABcAG4Qgb++Pm9tbtfrmf+EsMNN\njbX28pNCVzLKvZ1DpcuwtXuk+ISyYzZoKKHrE3RCM/gkszkMrHO3YkONYIO8\nJV256SnPbjAFTzJokWRi7PiD3wfnJglWiI+Bq11NWgtTXpbjlJ+jnwHsD1PS\nZnY643gbeqiKbzhx/IqMPWKg9PwPhKxQQD184n5GrABGpCyVWDdeXzEETm+J\nQxCiXahEN4M8iBIAZprAo0pjOjqaSaEAT7AxylWA0PKtEpYifdXr/HPvgMOs\nEbKxEM6QxMLYCb2HRslPCVraOJS2bSb+sNoJFMTkxCIW3m5vn3tRhNSatuOW\nxuTPeaE9YbPdT5JvMk2Ha3Fh0IB4HaK/qCd6n8sRhe08GU3mC9nPMXl81GZe\nbZzMIwH1rwZlFEnA+N5KFTHES++ZXiVAJnNmqN74MmPjJgYhXVzAA6rO+ot2\nYjPt9qFCOvtcg97q5tI+2z9PCq2HfxSrWfMy6zzD1eN1vhtJ8CCZa4Tgl2pZ\nVH5ANyi5mi/RdTOeSArRfJWVqua8yZtKcoNvLQteCRT+y/c1aBja0Qf3Pu5Y\nHKTL\r\n=VXms\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.83d83f131.0","@material/rtl":"8.0.0-canary.83d83f131.0","@material/base":"8.0.0-canary.83d83f131.0","@material/list":"8.0.0-canary.83d83f131.0","@material/shape":"8.0.0-canary.83d83f131.0","@material/theme":"8.0.0-canary.83d83f131.0","@material/ripple":"8.0.0-canary.83d83f131.0","@material/animation":"8.0.0-canary.83d83f131.0","@material/elevation":"8.0.0-canary.83d83f131.0","@material/typography":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.83d83f131.0_1600043646157_0.08923848940554313","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/drawer","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a71c854af9f743c8271fd5faf79d07d8bca2e64","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.d52b165b5.0.tgz","fileCount":48,"integrity":"sha512-kp6oAlrhfmU77/Ycd9Q/0m4FiWktOW1+qRL/D3UpURYhrFSs0+0pMSeq+kolLhoNq4LVK+0w6a1Nh8ytp4YA8w==","signatures":[{"sig":"MEYCIQCTLJPAu1relsnfkDPesl8dk2+xriZcNbDc9tufLICSIAIhAOXxEPxfS7NUcL0S9eM2tIy5Y2I0JIejMsTxERiStM2l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":937578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNX4CRA9TVsSAnZWagAAA6gP/1BmCggTRqaHUU4J3hc4\nVagAsbKnVnn1p6XaG2h2FjrXaTt7PwLYH5gQ5a/VkOgX9/ZZd2aKQhpSpx/4\nSSQYyTUL7bHO1fL1FrbE2Psb3Bk0cWgNhvzTFs5oUcOn3sEXu3UXY216uA95\nW5iEpirCuCzScLij6Hc5w29KsLHvrj+iNI+BgwaDFOHQf8Rwb3TSAZNLmmzo\nscqcngFULpUgo07eQYeSnLUPnlN2dzv6AEFkR0NoJ29Wt04hfMTaUlu+LcJc\ntnMO3PYFuPM7Bo6xGmNI1e6V1sD1ciPZ+6w+75uAJQ7QKod0v+3MFLM+VWaq\nHb5iFOZzvnaeo8Vupm/INDd2D4OIiYB6MsAPuZcGQci4SkHmlAEoHj3DjMOR\nA8cdTkWLxHUkRVprG+DubFHi3SSCv4HJBG1yI+MJdEy2P1qEls204dn1mdU7\ncOgKasSAPmUDoPK0OBvANnMECi/vNYJaL9i9WBsHU/tdvOtZi8g+yOmj/+w/\nDbztGuYTnWCRYSMIU5h/iy0gEB39yvqcGgoe0a0NCKG4jJvZVauXHz/C+qvJ\nq78dP5gZ04vtRTW+yd/7CvjQ5ZdcKC59kzhr8aZ7URrL5m8RM4MSylKN8k9a\ndr0ZBMDkYdU8Ln1R/Z+NgEvgZj0ZgGSvl0vwH1xXVY3bMdlEMEF1mcxXdJ4D\nT1bR\r\n=hHFD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d52b165b5.0","@material/rtl":"8.0.0-canary.d52b165b5.0","@material/base":"8.0.0-canary.d52b165b5.0","@material/list":"8.0.0-canary.d52b165b5.0","@material/shape":"8.0.0-canary.d52b165b5.0","@material/theme":"8.0.0-canary.d52b165b5.0","@material/ripple":"8.0.0-canary.d52b165b5.0","@material/animation":"8.0.0-canary.d52b165b5.0","@material/elevation":"8.0.0-canary.d52b165b5.0","@material/typography":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.d52b165b5.0_1600181751998_0.45657671631380725","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/drawer","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.a831d4799.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f43719959c1523c859a75ba6b59cab11929a4bfc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.a831d4799.0.tgz","fileCount":48,"integrity":"sha512-bSOmUN+ioP6b4urh9vf8zVJhvVIJ3mYIDbgEB1OUPv52RzIS7XeS4U7ej/HdK+0KOQf2z5okdKjC+Ry6QZf+Aw==","signatures":[{"sig":"MEUCIQCrgQQnvcd0qFf1j/AacY/YKnMiDizzqDqqD410HK4lGwIgKypqx14fJAKEJAXzMMJWSxHaMu8ABP76yfTJl9XlYgs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":937578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP+OCRA9TVsSAnZWagAA35oQAKGTvmy9u+yc41yGWV08\nI6YVhfoBDnemhsRHYXOK1uAhQmrpQgsGv6XwC1pKfBn/Amcz60S7U7ea1Gd5\n4NGJ5ZCIeq2VQmFtzC4XTB/KLWD0S9Q5erKN+wOYqar8dmm4dRgSi/oa5Nc0\n5OvNvW2PRHhT5oMbSS/OFZ4mVrqpVc9qWZY6VjBj+4Dl64+dfuT0uawj0QuB\nnDfeX6s3yh3yg7slNiGke4wnnwO0cnrm47QbOE8Vr14y09ZxNr5WQEwyj+HX\n4ObUWG4QffEUYmLwPo55/9+/8bdVI/47Y0oACm3kwluLxge5GJt7vhh1krwp\nBVT1DwBb7EuMjUVb7HKdLit/ule0KECVhSz8nXD7j/qDlJh8dZeNGNF8HmYo\nmeQBKBx8KX2mlAnuEth5n1AXtKuya385dOmii+qmU6ziWDOpuFHjOgr56TSz\ndaVX7buc1Nqe+wRCfqMBWi7f4JgTR6t6UHNdJ/tQ+/oJRSNx+nYnzfM6tdnE\nJ5+nU58/LgCJzcAMWZizZyk6QvCRflbBpOoIQl0dl/KA39P/zp80Umnp39Nj\n/z+DxzhTYnJ/2a+2Yv/5S9EW6VN/nuwx0gp01pQNvZwEb3FJkJ36KsyoiD09\n6607SpbPlkwhjyRwDpIGMtk2Pink/LDXuNg1EpyLpSmU+3weQj2O7GAUNNpT\n3aoz\r\n=ZF3w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a831d4799.0","@material/rtl":"8.0.0-canary.a831d4799.0","@material/base":"8.0.0-canary.a831d4799.0","@material/list":"8.0.0-canary.a831d4799.0","@material/shape":"8.0.0-canary.a831d4799.0","@material/theme":"8.0.0-canary.a831d4799.0","@material/ripple":"8.0.0-canary.a831d4799.0","@material/animation":"8.0.0-canary.a831d4799.0","@material/elevation":"8.0.0-canary.a831d4799.0","@material/typography":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.a831d4799.0_1600192397818_0.5050395454682635","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/drawer","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.a306aa488.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c2f97622625c14b293ffd3633d62f4d9ce95568","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.a306aa488.0.tgz","fileCount":48,"integrity":"sha512-V3Edw8YRhtImnCUgVT39xc+yBsaRENXs+8EBP+/QK/8qtOc9plkWsC8LFqmDvsW0DPRgSKAkxxdi9MEwj7FSAQ==","signatures":[{"sig":"MEYCIQDKD37T8aU43cgfZWAJSH8EMDxxIbRiPkti7Me0WDWfNAIhANEemTM0TV2hK7N7AZlqwP9OjNvY+2IJxBZ4/eqiDmYf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrUjCRA9TVsSAnZWagAAkZYP/ivH19s3XjUObOVDuX97\nbioKgXFfpzl0WR4rlJk72/U7XpO0uZ3rzMNC5sW0u5ujg6Cg/qi2BrMREc0E\ngEMH6O/mfcNOSZFRmMG+AvXZZVRESBLeSMXx4PFc5ovExM8xtJ8Nni1xLeRg\n8CjMyRbOp/yx/qBnfAzzxSUOfF5XfRH6lHpBpEJK+kDQ8sLLtNydW4AdO5eB\nDZazsQLV9CeOOzZiJxCMYmnoTHOqXLw3FWhFJMDAIMfdMKL3L9tBZwpyD5rH\nUcKW5aM7evYef0VVXorg5hWiqdINQhEg+fDetAlXms9Z5jRubhT5T4IeMnyJ\nKgUYBsMvTM5ZQVkGLuyaK+mLnNVy/igSBCnl6aJcDU/uWZfYrp06+zVyEAbU\nRMMWpnhmSKzASLmPUg0qYBaTTvqiyVlTLl7zykF/HskB03yyb7z3T10pemI2\nn4gUonpygla+NrsgLk9ozZ5qfZ946oy6gamHBquIcqxWRIkOra43P9tVKK9b\nrOTAfJxPZLViqnbbF0QRWTYIhV5J6gc7f6bBWCbuMlKlZ4sbDke+9h3K46QZ\naBfghDw4SC1T6DZVIDyB+VIsfSv4IRMkcsiT1KCNg2I4ToRhyAJxW9Y4dmp4\nDrxxzj3AZc6Lsb2ALFu2M2N9xvxCFivpo27pP87ZEALmxLahM7HOlBF/tPiZ\n7yaM\r\n=+C2Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a306aa488.0","@material/rtl":"8.0.0-canary.a306aa488.0","@material/base":"8.0.0-canary.a306aa488.0","@material/list":"8.0.0-canary.a306aa488.0","@material/shape":"8.0.0-canary.a306aa488.0","@material/theme":"8.0.0-canary.a306aa488.0","@material/ripple":"8.0.0-canary.a306aa488.0","@material/animation":"8.0.0-canary.a306aa488.0","@material/elevation":"8.0.0-canary.a306aa488.0","@material/typography":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.a306aa488.0_1600304418592_0.04365400836837052","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/drawer","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62fe5161c2dec50ed55564a2b0c07311183e7d99","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.fd608ff66.0.tgz","fileCount":48,"integrity":"sha512-sSAmDtH7ggO7sUkI9krnp1CyaiTBDRZTDiJraAg+FOMgHC7Agm0aULjwh4EyAXx/CpJMl7GWSxUGSJlyr3+PqQ==","signatures":[{"sig":"MEUCIFqUWLtNGsIDrd+2YDeZeCHL8p/vDDbbv/KfVgwplJakAiEAywO0xngw9kG5xRxI8KTx7aRmopaqSn+VZlPnUeFa99s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3JICRA9TVsSAnZWagAA62wP/2TRH/2XzHnngJ9lAFGz\n6t/PhKIRN9vdLkh4gjhCjBtK4rtHiqRU04XZ5Oyl3rmfSAzQ0XIFiwnwvOgs\n3A+ktqeGE98t3IKXeWtIkrYb9+LgtLhgnfviZgL1ZILo6/ZaUcw4fFxnTRVN\n47L2003wOMWT4ShZ4y/TrL8m9zjWp8KRstd8hVX7kXmJtGpzv5y/XtBWRSSE\nNf6lsFrSFCkp2yiBhy9t4PbxZY5Sp4qDhs018yztl0l/DRUeODAnAuZlrNi1\nj+eGGIu5u8S+6f0teXSlZWgEFQ+RkDyFSb/MuuzS+JTaqPRlYjw25rTWShlu\n8nCGmthHsWaTMS07Qx6To3SGxRxG+vA6h+o5C7RrBV5JljwvQuW7KeEaMpQ4\n5Y4CKd+rdh+HtRCysizaU1qWX4H9VVImF1tP8n48o+6vgVXCLExGk+MrArC8\nowmNPHkWyaiB1A4ZgGoW1lEkMHqfDx0uFFLgUydUWuAK+qUDkgKNemQqftXs\ndT457j6zM5fzVfiorRYr5JLf7HEHP0+TqvvCv2fbhJ+pVB8g8zru0KHKpOnU\nMOlMRbXZn5NO3kQe3M2P8OsC+BDDFqJgHLn6w/yvgIURva8R2weJJnZbE0W3\nHucRhpPqqXeKz3n12pVFNg9DOoJ7ruRhblu+8mHRPW3XmHESw86yzLXcLeoF\nDRsT\r\n=1WrH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fd608ff66.0","@material/rtl":"8.0.0-canary.fd608ff66.0","@material/base":"8.0.0-canary.fd608ff66.0","@material/list":"8.0.0-canary.fd608ff66.0","@material/shape":"8.0.0-canary.fd608ff66.0","@material/theme":"8.0.0-canary.fd608ff66.0","@material/ripple":"8.0.0-canary.fd608ff66.0","@material/animation":"8.0.0-canary.fd608ff66.0","@material/elevation":"8.0.0-canary.fd608ff66.0","@material/typography":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.fd608ff66.0_1600352839426_0.1494295597111952","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/drawer","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1c0996420cbb4c23de19773df87ccfd6ab47a10","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.3e435ba57.0.tgz","fileCount":48,"integrity":"sha512-GkbIcPN9ySQIzLQWnxF779HEU+UOI2KOV6XWiugR+L/5fCQdjMT6VZWPr2/jhtfmBrM9tx2GAmrTXhFxUCoikg==","signatures":[{"sig":"MEQCIAXUYNWtiT/2k070zOdC6oeaIw3Pnv41rGOmRE6hmhT5AiBEyesTS6TzRLhwCeb83GMmA++g11HCkWoFpMmU1oj1SA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3ZWCRA9TVsSAnZWagAATjkP/2RwPoVoEKPDxlo3UdcY\n2NZLEzA8HPrSlfCSCe0/iEg0lTtTJG3Iti+mXyxclSNn09KQuFMTnm31gVmK\nVLV0f+m+WGUTjM3xW5RRvJcN5XuouQEmwzvrTEzlZ1GYR6zqufR5nHo2Rk0g\nG3j8WY2GmYu9yAM1dpJTSaYmN73nDxW+EERMzRyUMEjcl3asexl3TYP9P6+3\nkd+vrAPQiahkE/GYChGEVViha/nXney0LTWqZssqGu0vkaVLcNb0qWETT4q2\n6XO6DDdYn7Hzd8i7B/8rCPaTVL8yEsgvnLcyQR49NQ4a26goY4yllfHbBS0J\nhEVtzf4Mjj5IZol8yrk0J2nEl/gJmAu7lpzxq52+uBTtFm8ohvEoTs+TT3wc\ncgbzF1ZDGjL6mdOnLl4UgcNIavvLU0mzh+Lf9u01BLSknMU/mMmHjdq0mYhE\nHIurb7IXiSC59/8uoKwzZ1jBiHklakNqz1wZ/0JgoMofTn+Skd5WR49P5Vi9\nkF7Z9oh80XI8A1MU8QiDpPJCgWRlVQ3MYmM393b1cHrcKyG6RHbGymURZUi6\nU2nC+MYFiF0KUpb7HrPfM9wjujWJZ0vw5KrfSf7AW/POnOywlkW2iQfNEKhn\nItreY0iRH7yERzhLkz90gIxA+A8Jo2Q5Fzd5v8rd1ak1mNmr/sEhHfSB/bq6\n4pm/\r\n=rjpo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.3e435ba57.0","@material/rtl":"8.0.0-canary.3e435ba57.0","@material/base":"8.0.0-canary.3e435ba57.0","@material/list":"8.0.0-canary.3e435ba57.0","@material/shape":"8.0.0-canary.3e435ba57.0","@material/theme":"8.0.0-canary.3e435ba57.0","@material/ripple":"8.0.0-canary.3e435ba57.0","@material/animation":"8.0.0-canary.3e435ba57.0","@material/elevation":"8.0.0-canary.3e435ba57.0","@material/typography":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.3e435ba57.0_1600353878445_0.034452308905303264","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/drawer","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec999ea91e7e3013107e1663a77afe565eb5ef7a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.c250ec52a.0.tgz","fileCount":48,"integrity":"sha512-OgoCE0CoYjjATAloam1yPapuGRscFnZwasAJKhZzrlzeiLBoKAATbXmIb08IPHDZh3UHEZ34MFZNvksfbGcq9A==","signatures":[{"sig":"MEUCIDXCQW6pbaMV83BBkuaiE85bhi/ZTVoxJKUV6LZykdV0AiEApBePprVvPvgLUw3Ue9wgcd7jnSGdQlAKcdp5u+5DBMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8MJCRA9TVsSAnZWagAAoaEP/RDSohCbsL0h5pTci4P6\nLuOqZbNaUgxOg3djjt9os1BnzNVnGMTIKHDZvjIhhdmyFHgz/erlDYGdhKpt\nPa6p1R/dPBGesd8TV3zlOHV1ypsKnu/Bp3OfjPpEu4Xe3EAZJkuxWpYGiNIB\nzhQnpcsZy4wVFlUTyQW/R2rliDp9NvCGZPrIpzy5b3rMwP33r9idA+fR5OWW\nKskXMqcEScEms3+cFm0llrZGN+90+Jgsrxnx1GcITf6WHGwP3p5LX3YlRLPT\n141XQFAkKfhYkhdnuDeycOMRuB930lBSTEYHLvQmNW6ixVUpbySQB4oF53hL\nQnLQKOIVcWx7F6mMCjtnadh5Kq+EL/3EYIUlq3Du+qHK2k+08sK4AR1KbJMP\ndLu+zz3x4YSH2emp1w8Vo9MC7nB5VIYrQ2X5oAvJ7lBqkDpmkjRqP+vuLbTz\nJrr3YOcpBB9UqvZYn6HEstub5J3S30xqMYvxcdOEjIDSqVL9GRC8GDOwPDjw\nrLe9CJklQabNrXvz4hLDxu3MRb1IXFvGclHNU5ed8TgEBR2WoiiI48ZlbMtL\nLGfedphFrjKdwe+diruoRq9GO/0NKqcMbHjEx/oNCzXZ2AkAcUdkKvucljBD\nce0ThWD+4+wnO7V8i2sS7sHWE5KoBe3/iA+U/Q9yItUqkZEQok2+sL7zFlYV\nZkLL\r\n=Ad/C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c250ec52a.0","@material/rtl":"8.0.0-canary.c250ec52a.0","@material/base":"8.0.0-canary.c250ec52a.0","@material/list":"8.0.0-canary.c250ec52a.0","@material/shape":"8.0.0-canary.c250ec52a.0","@material/theme":"8.0.0-canary.c250ec52a.0","@material/ripple":"8.0.0-canary.c250ec52a.0","@material/animation":"8.0.0-canary.c250ec52a.0","@material/elevation":"8.0.0-canary.c250ec52a.0","@material/typography":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.c250ec52a.0_1600373512474_0.010786904252518825","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/drawer","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9442f53deb145c59d848361579a289411d8913a4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.e34e411b1.0.tgz","fileCount":48,"integrity":"sha512-PMBMEby6NR8HeggWBB9ouvVD3q0BXxz4dL56/+QqK3Sj2TrX5EqD81/NVf6LYl0cOsCzz/HIUKBc+zbh4e62kw==","signatures":[{"sig":"MEUCIGAzpzo8T02FHkPxOd31qT5Ef1+S17FSkfcj4SN/pdZcAiEAv1eQn8HPu1Xd2PXDqeNO4u1WKpqDMQTvwdqHfYUBlsQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8TBCRA9TVsSAnZWagAANvsP/3+oVqYjzHRlQCewKzVy\nuRDYxUrfXt3OiEc9XSG2EMGIod4XIa+9Ntb0/CucWz9rPqyJjClzWToTS6uW\nIVHMpPD0980LscNJ/kNeDxEmyI4KfG34TpTRWn+dSV4SH52n7JK9qNiquZub\nuKmPgpXE1b4ZQMNCPA9CMsZ2XZpmU0Hy7cFMp80v01DUey7seizTBDjlz8Qo\nZgdyz/8b3eaOwEIpfYa7NhQk6CSvYIFPfMrkIJz6CMo+4AK46FD4oWV4zqD3\nVKhcxj7uxxeKsybCaP1ZI9vFpBg8Q9tOpJb0A4TZqjRb6HQX1OSfA/ocGN8a\nOnKIRjlKcc7cxnohrlLq5y8gMrzAhPW2KC+O9V1kNtfQoROe6G1+fzgrqcCN\nAOs/xSeW2RExcnpHQpMDfUz4PkHpN6XL3DZ7jfJYzGyP+inBXQNOKAOMpVla\nSLX0wu2YaTd5AnWpsIpPmNwIpZjluwEhKxs2iiYwFRKAlWXHtz3LCoEU9Tyg\nUYJLakroXsmq+XeWqF0eDZQYQF5hLlNYkik3Qt1n3vHD51kmBj3l53CFWXPG\nz7CHnmUtwHRaeZWqzcBnYH632DQPVazCjJ4b3A0QFdRxhtsLlezRomc7YsLR\nm7dAfMbDJmPAvMqLmX25DEVZZRkK14wGQcFy4cP2peAX1p6hro9hPmMOz35a\nJGra\r\n=8Kbc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e34e411b1.0","@material/rtl":"8.0.0-canary.e34e411b1.0","@material/base":"8.0.0-canary.e34e411b1.0","@material/list":"8.0.0-canary.e34e411b1.0","@material/shape":"8.0.0-canary.e34e411b1.0","@material/theme":"8.0.0-canary.e34e411b1.0","@material/ripple":"8.0.0-canary.e34e411b1.0","@material/animation":"8.0.0-canary.e34e411b1.0","@material/elevation":"8.0.0-canary.e34e411b1.0","@material/typography":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.e34e411b1.0_1600373953215_0.3635967621716276","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/drawer","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.4e9343929.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73f659c10abdc2a96cf6bd5e12a0af4a7fbe509c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.4e9343929.0.tgz","fileCount":48,"integrity":"sha512-q0JMAoqt/BM3YpcOmnTsu+kUPFEsbr5aXD0cEn3CrRLAdNiuPm/KiW20qZWqgmbAKor77BNDS3mym5RPN36cHw==","signatures":[{"sig":"MEYCIQDv6HWBIa/7IABtVk1GCzHEcuSUGHYd5gDSWkkGGfN/MAIhAPh++1VktnY1SnhhXUzSMwMaex9HYz9tgQL2PO4LqyhL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8quCRA9TVsSAnZWagAAoPMP/jgGRX5YEK9i7k3eZQbi\nz6LEivwXm6ecyGKNDp0x1i4FTnZT1jGi2PZdAtI1xOeYfNosHJGA1bSqp6EC\nujrn621TBzGIdS/Bs5Jti+eIOyycfG+R78LAah6wlzCfRDNKghyb5ghw821Q\nRycQRddpMZ/ecY5YUR1+KKdruWtmq0yg5BR/R/JzB8E0CN4IcWKiK58zzN6+\ni7J7ykEAJhb1dysm9/ISiSUoixOM4WnHpCOv+pvhF1oWFrdcXtumAm7K0QCN\nuzN0pEW0wPb1Fi+5aUQli6FOe3+3rT0hkJuhqbKLSx7CAjHIxc/labKFHHq4\nsG7xPSH1ohhg766/MXEnx55PS+zmq98tqQlb2MRiVjinxZ0+q0FTkLVOps1s\nel8a36YGshgqYhnI39L9PVOxiv22gK+7PL7ZMtIdsEx050FOfqBTmclPpEzE\nzzTbpLae5zvabxWH9ha4rh5Vow0ZW0hYrt7qGqV+l7j7UuyZE7amc4k9nBnN\nJ7MIABEPAvqJqeP/AcA5l+r/7ljCtfr2MBR+K/8FORxSQtPsV3LxEh6y1mmU\nj9TIsVcuJJ124HKy5BKMvDm/uqKr7OKaQ+yAA7XdnZ5p/9Tts9x62xw3OB7U\n0E3lphYbNx/CO8HGrIji/FzdWbrNRPU4y60p2vTSHXCAJULQCW3G3YLFhxa4\nUehi\r\n=9p9I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4e9343929.0","@material/rtl":"8.0.0-canary.4e9343929.0","@material/base":"8.0.0-canary.4e9343929.0","@material/list":"8.0.0-canary.4e9343929.0","@material/shape":"8.0.0-canary.4e9343929.0","@material/theme":"8.0.0-canary.4e9343929.0","@material/ripple":"8.0.0-canary.4e9343929.0","@material/animation":"8.0.0-canary.4e9343929.0","@material/elevation":"8.0.0-canary.4e9343929.0","@material/typography":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.4e9343929.0_1600375470003_0.30620473161010797","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/drawer","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d58872300dba1226e7cf78256d3501e95979c8e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.4e5c350c2.0.tgz","fileCount":48,"integrity":"sha512-zVNBCx5i5Qyznk8i2cnNeYYaVF/6hpL7uYJEStCecDyLwL8HE1Snh0vYMBqAhHr3MNgN67+tb3VJ4vxzbxOphQ==","signatures":[{"sig":"MEQCIHXxV7Dhi70JaAwbBJ2XMEJafga49HfUIfe7z0xVC5TdAiBeDoURRmxf2BceiW9+EVvcWYQxbbc2g32CDRG2pKgtlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRf7CRA9TVsSAnZWagAAjtkP/0hAFYhcpZBXhVKYtqYP\nfM6UlOrduAyZmrq011e9rDtbrq2y+htfwBCZ9d15r88dlVtmKt8TnmzsqWOF\njvTP/bSdw/wLCqM8b4wOR5I9skCGBV9Ps2hiE8E4W8ANBtMnSjlzz/rbFfrD\n+AUNPhBoxZ5wc+CIn4KfwIfMltDbB3DTm4rV4g49oEwZp/2zhqQQSaoTg0kl\nsic0QhYgiHD5jGxdv7PtFF4x+L7ODNh3XyRz+P6V3TprDMF9PMASEiSZpNVW\n2c+a5A2j1uk/EdOZgBxtcexNjk/GnH2GAckQ4D53usvegoBFjuo7otrvNihP\nZc8Sa6XYIH2xnKslruHw82p6v35RlnhxO9+gxKUV/Kl4p87XTNkx2BV1o3H3\n94Wbse0FP2UYrbP+iD85zu9ZdP2MNFmDuVJNjF4dbhQ5U2K8pcWRA5LH6P8m\np7j944kLJU7Gx+2Y7FK+HdWR8TraP9wlML4pOLD+iRVgOeDwkCzd9wmsh9cA\nDIVMzIBbgIslebqGmC/dGwb4mWtRtpdWg5psUMjquRQ+ZmQ+T7koncFc2FnN\nPhJ9TxN0zTWOoqKRAVwquS2N5h2ZI9fZP4aHSCHDjq24Hnhwh+0gJ9CXbpv/\ncFYP/jKiefB/QbSWhOa36qxv2A0WAVeWj2qdxH8ZF0dZmH1ADk1dpyNsD2zO\nXrn+\r\n=godp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4e5c350c2.0","@material/rtl":"8.0.0-canary.4e5c350c2.0","@material/base":"8.0.0-canary.4e5c350c2.0","@material/list":"8.0.0-canary.4e5c350c2.0","@material/shape":"8.0.0-canary.4e5c350c2.0","@material/theme":"8.0.0-canary.4e5c350c2.0","@material/ripple":"8.0.0-canary.4e5c350c2.0","@material/animation":"8.0.0-canary.4e5c350c2.0","@material/elevation":"8.0.0-canary.4e5c350c2.0","@material/typography":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.4e5c350c2.0_1600722938563_0.7711183771567796","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/drawer","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d776ca61e747c310e9ab6aee3ee24bfb929daf0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.16c563ef7.0.tgz","fileCount":48,"integrity":"sha512-KZMylVUbYkDU9vvWtcgUX769D36PeukLWntcXFEroTFNbfy3xtCToRyF/8tsKFqsv2Kb5tUb5p61/EORbIcJwA==","signatures":[{"sig":"MEYCIQC2JLQv2DxlaI6Gf+IreiGtGNDvS7bJVmc02R3pO1eAEQIhAIsER1BNCAn4C3UBjHtNP2GA9w7azGI89Xxnzi18epz3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalTiCRA9TVsSAnZWagAA1scP/3rTxJXn385FYb6DU6F2\n5g6pA6dVNERZd28MyHjj7eHk1kAG8ynUrHho1pVi5zuK99+4iscSNciiMQYW\n7mrfPok9epJxGVYPr4YgG2vh+Psc0B4JCJ3Vqu1E9SQT/wWO2hxunQZz5VOJ\ndgG3I6cI6vHWwdTldT39PUuYfpTXf8XrYjlc+aw/TIryLlcqT/x0PvEno49J\nx2R8a1GLYhzYWgBsLlS9qJRhfdyZh8Tn40AIHOL6hz6hbpbY346g9pfmfRz9\noLv8cwNPxHwFR6TcHYgCs16cTA5b4zwbvqWf9QblEXUZiNkjqtR9hBCiuDAg\nbnb+bO05zPNPF1mnkL41mqJSq1Tg9dmg0x80NIzJ7DKMA/ak21xXLzskIoEC\ncelyOqY+wlYHHw4fuRbDIn4ynLxNiRZD9HYf+FkyXT1Isgxtc2Myy60dTlxa\nUWbF9fzht11GhOVIhTO6ObuBC8r4wbV1r/FTHqnFM0F52/91wcc3HtEXKExU\nIcpOVAiqp/QVGG/w1n+3tCnxJVy/YhUvKfFMolf8QNXDtXwECc39hEpz9Ll3\ndZPidvnOtaz3mRzjAZ9wLPWHxlwOsBoqFgMr/4vkusjHCp8t/q1M2rlKFgYD\nxUOc6TpdbQwlcU8w9LImFAn5hA2Q92LUJocVBcakrP71A+UFU2DNlCHdM8CJ\nL7/y\r\n=jsrf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.16c563ef7.0","@material/rtl":"8.0.0-canary.16c563ef7.0","@material/base":"8.0.0-canary.16c563ef7.0","@material/list":"8.0.0-canary.16c563ef7.0","@material/shape":"8.0.0-canary.16c563ef7.0","@material/theme":"8.0.0-canary.16c563ef7.0","@material/ripple":"8.0.0-canary.16c563ef7.0","@material/animation":"8.0.0-canary.16c563ef7.0","@material/elevation":"8.0.0-canary.16c563ef7.0","@material/typography":"8.0.0-canary.16c563ef7.0","@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.16c563ef7.0_1600804066166_0.21232543745938415","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/drawer","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90c3dbeaf6c587472ee3bb2b9790fbfea6afa0ab","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.fd8af3d43.0.tgz","fileCount":48,"integrity":"sha512-Kb7p5ThT9OzHWG9PRA4oHFWGIPHwnSrrtuO81p+7Ve/g5GXX/Lgi+6TUSI/R07lMB4CEDXSZpDXEQ0Vj7LRHAw==","signatures":[{"sig":"MEQCIF7ZCTEHZcMzxG51SJ2ArdUrVuYxufWdK3b0xEQPZu3cAiAjpgs1bKPyTeMytDfKd7wqvhLHwHRWInbRxtDqUCgL+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6MfCRA9TVsSAnZWagAA5KsP/1U9XEeCA4QfqRONJUOD\nEWzgl11/RsYzqNpY3d9TLTrmyPOKHVoQYaFIj6mfET2HCq5RI/7eUMBtVOxm\nmM0uctq/hpZvSe4VGAB9dXkfrJ/eJkgsfHXlhhGl8KErBdiKJ/P+gidZVbjN\nycEGLgZfz42U8HfbF5m326c57iQ1pEvZ7XL9cAvWQe9qC3ZRe0HV8/gZRZv5\nNvWSCrhmeQaru9swqzl2Tyc++NQz6nIH4l6CkHIdGho1E8USt5uxWbLobylu\nwNE29p/KhtEOkAfTr8SFKeruHF+WAOp0ujOLQ8aW7U2nQ6w1EDpeIymjfLeH\n72wpAZP4YeFesukJd6Tmiu11oLg25HqFObQNBO6z3XAt3kVrEEGFdZoo65QP\nIPnuk8p9G1R7Lsn9iyBs2ZG5tHA6TDWGAhmD2C+pz35SVw+aRkNi05kf+CM6\nMF5Mw5XRLZldWozvkOgcjhBV6w5wy40DSVPIuoSlddWWGcvlu/bSBBq6Zpb5\naZcWC7EL/giN/aYtYmVdNsk5pcSRnQinQ79OUYFZdEtheolt1p8YXe0L17/D\nJG3sBvteGkoi/CYeDsQWnq5jNi78aGSJyHpHBkEeOWj91ne/25SZNP1Rh/FE\nm6qpB8tLLSYbYLnZ/4OQ06qWC9do9nPyTju8MIYy/o/2fMH63sDQOMDY1C28\nsd6q\r\n=pgmD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fd8af3d43.0","@material/rtl":"8.0.0-canary.fd8af3d43.0","@material/base":"8.0.0-canary.fd8af3d43.0","@material/list":"8.0.0-canary.fd8af3d43.0","@material/shape":"8.0.0-canary.fd8af3d43.0","@material/theme":"8.0.0-canary.fd8af3d43.0","@material/ripple":"8.0.0-canary.fd8af3d43.0","@material/animation":"8.0.0-canary.fd8af3d43.0","@material/elevation":"8.0.0-canary.fd8af3d43.0","@material/typography":"8.0.0-canary.fd8af3d43.0","@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.fd8af3d43.0_1600889631479_0.20179015615270846","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/drawer","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"643865c382a3515794e5a3cbdb7752174c1813e1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.d4cd83a85.0.tgz","fileCount":48,"integrity":"sha512-rszifFGkMRBXDTNjQib69glvnU2hYSd1k4t8Fneg5P80jzDicqo+fm2qhausC1EOyHExUgZTFtah4HinE+jPzw==","signatures":[{"sig":"MEUCIQCrOjUo0klEuxKzKlTz0VfffFS+V44V+GIOW+fSdQ/zKwIgaYDtnsJnGVlywAUOJZwCfZdiqEI+pb0b0idgSIvnhpw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTvGCRA9TVsSAnZWagAAVj4QAIOYFxGjKo8TYDW9pKhO\nfUkfL8xDvpgnJv5MMwa3tLqVDsvptch4qDdhTODrKzgEw1Ak0bj1y2S+4z9X\na7x5GLty+vKSo1GyC16501qfISvn5eh+zbF3tWEakuzdOPU8LYvRuQgooHeq\nAwUmLueEcYlyrooEB7NHOG2/pkj6ahqsDtySRg9ASfpoAGxhUfosA9siWRVz\n278khzpSgvS4z25MxbfdhPVVQmoe3wE170bjFBbhEi3VEtNgte9P+Ih//LIF\n9D+ER3FyHi/4ypdvRhc1dc76xruXFDHrcfIt0W3t0oY99CtEW0d98b3rl1yE\nzEmDR9Sv7UDv2pRdx82lL6UNUM9wkr/vVZS5J/8y8GmReyKkTzJPytBNGowU\nA29SuIWYypPyn3LNRpozCMnm12oi9S6D67+HneKstTIM3OxLqY9m/sjJqOJA\nvvTtAC5+TlcHDCQilQm1aJL90uf9RpkX9CGXvLD61cK7/ziKh6e5MjQPee3j\nVdaEN4hR9gK5dwkUhBWj+pV0KCXTS1fQxgQhD6iZtuuTjIC9Rkr7px/F/lg1\nUcBjQ476gXgd7NUq30d30G9srBZLT/3wfWPwhRzyLlMd7DfSIf/sifwxKJ/5\nNPv3UvpaZNzY9xRnq8UtBySRUuHLSX/B4oqhM+8ZReXHxjwORb3A9pNvwlbF\nQ5Ue\r\n=8BLv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d4cd83a85.0","@material/rtl":"8.0.0-canary.d4cd83a85.0","@material/base":"8.0.0-canary.d4cd83a85.0","@material/list":"8.0.0-canary.d4cd83a85.0","@material/shape":"8.0.0-canary.d4cd83a85.0","@material/theme":"8.0.0-canary.d4cd83a85.0","@material/ripple":"8.0.0-canary.d4cd83a85.0","@material/animation":"8.0.0-canary.d4cd83a85.0","@material/elevation":"8.0.0-canary.d4cd83a85.0","@material/typography":"8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.d4cd83a85.0_1600994246402_0.5090810790408034","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/drawer","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"136561f91404919f9467a9e4fa5586d646ade9d0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.199aecdfb.0.tgz","fileCount":48,"integrity":"sha512-IiUgr4J5z5+gQWOrogK/1eNFmsN7L7gNOqEU1JnnBbkS1BHBm0rt94wxd0ll+iDJ827HV6hIQyoY/WftHwgf5g==","signatures":[{"sig":"MEYCIQDNHNjPQGhCYSnFD28M6vPH4685dNH8ZQ0lUQ8hOuHBfgIhAP186PxG927xmkY/C3B8PyGetJi44emZrQllS9qdb3Wp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhJTCRA9TVsSAnZWagAA1l4QAJSziSLQVo5Hax8MOfxx\ndcmwI5z7Eb7zwPErFO28wRF4W4Vb2Bf8RqJ8zAPfHy4FrDSqdznJfpf5qwNE\n4UVmrZgFKN5avW+rUh2390GPPAqkPHAodObvt+TIRY7nyjaJMrrL3Z85HoZl\nW1j9e6oPRHm9VbIoKaXZpcA3uchQeeFwfo5r/MGKcYDFRlXUPfZixHgif/GB\nXDJPUMwFVbEAeGzJv30ufWcxTp9FaUILIvLl04tRxohA10rO2lc1ExVKi6nm\nk2WMUDNpudi/DXnT3I2pIPZSbDRWxGhB7A/i1au3mMwLI0kFDcBUJhddDcke\nAUaCVQzufWLzZKRMOK0thkbAkj3yvA9swsi1xwQ5otVqizO92BI+Ze/whovX\nuCZw++AFSDiSRhCnQA2PjWpe2iTiS4LrbfvpYGJGKx8V2/S7Oo0BOxZmcJEM\nfNgvOK4oDiau+uRWUdbmeR1jpqn3Bnsfeq/LY2u8ER31SqUXL/AXp78Et6rY\nTh5XW8eDgQVFKaREjr1gsK+25Oz2qvD56YTiJ64ID6j2A0FV8wx7n4ln2aez\n5YKHrNgSvaf3RV065RwVlI2Ri3g56LMrCSoKJGCvGiAQ0TdyjhUxtakxXATr\n63LR0jzPW8VMy+IlNGUOrk4OvV3tz5+4Mc/8tSPCybHEGJ1E2Gfgn/YFp+w4\nYx7g\r\n=hRA5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.199aecdfb.0","@material/rtl":"8.0.0-canary.199aecdfb.0","@material/base":"8.0.0-canary.199aecdfb.0","@material/list":"8.0.0-canary.199aecdfb.0","@material/shape":"8.0.0-canary.199aecdfb.0","@material/theme":"8.0.0-canary.199aecdfb.0","@material/ripple":"8.0.0-canary.199aecdfb.0","@material/animation":"8.0.0-canary.199aecdfb.0","@material/elevation":"8.0.0-canary.199aecdfb.0","@material/typography":"8.0.0-canary.199aecdfb.0","@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.199aecdfb.0_1601049171093_0.9973916716386577","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/drawer","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"533c40782aa35685240c5cef95424b9d8a8e0100","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.38ef4501f.0.tgz","fileCount":48,"integrity":"sha512-N3ASMJaQfHsspaWu+ZnA3+VEhMW6ol1UeuYuFA+YdcpQARmDleDkq/2AtOQ0xOKy6kk05myNlVg3joltQKrlpg==","signatures":[{"sig":"MEYCIQCwnYTU0kq38v0ZBljApqtfchDWAzieS0+ftxSrexWqCQIhAIaEQymqmUyM6MM/aTHTvyhnASIeR4VtbTwJnnHA4oAW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM3FCRA9TVsSAnZWagAAcvgP/idLSpSw+Q5bL3XsW80s\nWmnQN3SKpgazNuHorLKAKDKOkIx0HqT0nJ4N6/Z12nQe9XHuDpbWWI498O6o\n4z48WBg12KJFY41AQJ2qzJyn81rps8bsrPpuU2n6YEeLW1adYtdLs5wrZpTT\nuewsz8kJ4E6ZsmjNgQNbB/woZ51IyzE9zlAevtBlA8RlRffg6aDXnNk2Gc4H\nZ4HS9i8Tx8OakSx/skFTAHSk6eePsrFtgdVxMDUp44zuoIr8arB36UglYV6E\n2oR7dw/u6Iep3Y73VohF9GvTEMrdqBMtuQmOXqSRYKt/LVn9qh2Sm64sFKju\nb5BiHXCfB3QCr6BDqana4rhTt03aAdybWhgXXSFiczUAqDqEUkEhkZZQ8Rwo\n5iCzBbJ5fWCdKX3GSLrhM5mYGyrmWK7KI4gM9TxQnOh/CFEyB1LRkATTDIUG\n/w3TSzObTY8LFOM0IpuvrIKhKMXEV+H97uDXOPAWlNacu9KI4dLWGcAPV7fw\nY0x7VoyPhwLZD/YH4wqcs2/BQoa6ucEnWxloJ6HQ3v6MQlTVOg7NR2RAGfCE\nVglaJ8tRffFC8EOH5IxvMZKNmZLVSEjp76HJqbpAg7deeRV1zIqI6woiFOLy\nSLWcQHWEGEdSDGGedw18mTjKcmKoqlpTq5+6i5X/G4kvtnTGPI5aW4PUQT+h\nAu0G\r\n=HKQd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.38ef4501f.0","@material/rtl":"8.0.0-canary.38ef4501f.0","@material/base":"8.0.0-canary.38ef4501f.0","@material/list":"8.0.0-canary.38ef4501f.0","@material/shape":"8.0.0-canary.38ef4501f.0","@material/theme":"8.0.0-canary.38ef4501f.0","@material/ripple":"8.0.0-canary.38ef4501f.0","@material/animation":"8.0.0-canary.38ef4501f.0","@material/elevation":"8.0.0-canary.38ef4501f.0","@material/typography":"8.0.0-canary.38ef4501f.0","@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.38ef4501f.0_1601490372522_0.5464764251133538","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/drawer","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc1af61c21cab72a57152eface9888bf2e9f121d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.774dcfc8e.0.tgz","fileCount":48,"integrity":"sha512-zJvSPfu9PAtAPsHoJYB9svvKUItug+ZffJEng8hgWJaQ+HrM4TTRmoeulgZSebsx5BZ5JfN8GfAYDskJkoUTeA==","signatures":[{"sig":"MEQCIDYBhEI95wIWCyJIK9D6H0Wc0/Ca/2+FPjJLoq86DznZAiBuTp/7gQlt3odR2ySXJw426csqmZ8SIx7hYBj+cQ1pyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":907294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdaelCRA9TVsSAnZWagAAqAUP/38hvTpiGIm+za4BxgXx\ns0ntGdXXjiXX2DZtdEnF/ACYnq1gQ2CFdJUa9OOQZ8OBXWxgEPySgXR+KVNo\ncG2EkMTYtVPP7g3sCTGli4CoJK9R5vG1hiPnTjwwh70NfCq6+RjN5vy65Up+\nPfE1bLo4pbNlpbpKumWk8bYZoVpGaV4luf9SnhzG07fbDzyf9glBNMQxhNMK\nal+F+o9A8RM4uG0EzvXOcSUsxNLmSJxcsHATFHcV9keZD64wYWk5UAsy/n/c\n3qm7agGSRfRIMS6NMAjAW23sUbdx1LKNwv/9EziVsAqHUkZ+FSK+95eUPdww\nRZncX/o2rFMX3B6d2jfUqQj61n/29pANCEeZpbOhW6+O2rPq3Y70vGOqwIeb\nLZ3huz/yVqh0N8GUaoLeHqwMxjRgDRUGgtvpjD/hHkXeG298u9U//G12LVSW\ngdzv4234Buv0VqR4pF9Hn2SLD1Er154lL+uGjAYRMa6EQAOXxf3cHQofYV/K\nc5zRD3tlvLqv4mGdakIrYQLnyWZcWwATP8Nu8woArLBKfDNtKTaxMiTXgUaR\nwabKu29R7ojg6VAzVj4bCGkkmYO2w3MA5ZLyyfX6WQiq3DawQ83wTLYUhsUl\nj/LbkMkxzaohhEBQZHIRIwY+9SVHw8G76DmYxzAQdKBmMMWH3OZa3LcX9WRV\njXwX\r\n=hGXU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.774dcfc8e.0","@material/rtl":"8.0.0-canary.774dcfc8e.0","@material/base":"8.0.0-canary.774dcfc8e.0","@material/list":"8.0.0-canary.774dcfc8e.0","@material/shape":"8.0.0-canary.774dcfc8e.0","@material/theme":"8.0.0-canary.774dcfc8e.0","@material/ripple":"8.0.0-canary.774dcfc8e.0","@material/animation":"8.0.0-canary.774dcfc8e.0","@material/elevation":"8.0.0-canary.774dcfc8e.0","@material/typography":"8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.774dcfc8e.0_1601546148693_0.16406011232085382","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/drawer","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e03317b12d24b528b1faca4c4161a234c5b6bd8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.0f60323a8.0.tgz","fileCount":48,"integrity":"sha512-vFjymrO5DgepB0etgvXrucPzLSirXCLPDEFYc9/ZrVcClpoNOm+hhOujBHOnDkeVFdJonPKMPY7+0o6zZ0Cz+A==","signatures":[{"sig":"MEYCIQDQnrJvn2etVpzo2VWszzS1WT18NJN3Cnq/nvz9gOjLjAIhALbcmeYE1HASAJ7VGqwMWUC0SpMdf2+kBZeHCZNhBHGk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4CMCRA9TVsSAnZWagAAMZoP/2HMwJqc98nbHew/2jjp\nUt67bg6SSlZ0q8Y6wFNBGV55QAr/eBCn89S9IM23ihMaoAISol8zk/51b1f3\nFIZZ3e9N/quy3TNiqzhfB+MKrVQSLYUHoPViiKx0X9oKJmF+2SQNQhYFs47+\nL8ml1KRPp83+VIVXcgYHsBHJ2qr73z/KgkGGhu3da6FtdZH0qIDMu//9kpiq\nSR5IggZ1o9wnWXpPHekuXMLB9u2Q8LkREgGkUSMn5nt01zSA3QQ6ll/a8azZ\n/hUuE4HDsZIhKf7IfQkVvQjozvx6Jdc8Jt0/UmXY4pluZKlIdJaemwOMqsCO\nZrxW0sh6f2AaW2NmBpS7A7J5RG+5vjnuhb6D5geShfsl0jQFKzGBGY+c/IRa\nKHDqHUH2ORIc4hnIBT3fdTt4hMWn9+5nC3E8Qcg7Vxp0WBXpTZkQFf5UHyfH\nWPyu+ywjinu2qTKdzNYJ48OZQDCGaMWNiU0eQF6HVXumwSxBDm8gjjbx93bd\nJzZkyr5kmjXxf7mYdg1SuMPHVAoiroPEUTpZsgL6fo8G6QNidXdyZiLmBDXC\nw03Hs8cAzXVupBYuH4BogIbuhR4UH28EzSv9YXOR2DVUlaIrx3oZNjH1GxPW\nHfWqmtl/+HRO4S/4jM5BSqpLaCSYH76cJ41huAjBwH9YFzcCriTNkcKlvBRk\n3n3Z\r\n=4L/r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0f60323a8.0","@material/rtl":"8.0.0-canary.0f60323a8.0","@material/base":"8.0.0-canary.0f60323a8.0","@material/list":"8.0.0-canary.0f60323a8.0","@material/shape":"8.0.0-canary.0f60323a8.0","@material/theme":"8.0.0-canary.0f60323a8.0","@material/ripple":"8.0.0-canary.0f60323a8.0","@material/animation":"8.0.0-canary.0f60323a8.0","@material/elevation":"8.0.0-canary.0f60323a8.0","@material/typography":"8.0.0-canary.0f60323a8.0","@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.0f60323a8.0_1602191500159_0.2787212620415884","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/drawer","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.d71622574.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42f8516264f3bce29b15d0bb4c541e4c37db3186","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.d71622574.0.tgz","fileCount":48,"integrity":"sha512-nXOWSy9rhOkeQ4sfzqbsFvKL8hK8HF9MbdkeaFPPJ4a6pU7sWHJ24PyKMuVWkiPHHhVdodrIv8n4gdKaEEtmdQ==","signatures":[{"sig":"MEUCICfNmHkyu1iplj1JRMO+aLGF66Fh1U5+wK8CYQlHr4wdAiEAjoR3NM3r/+Mm4VaVvZGWyj2gXfe9XDdKpKgPYYH0B9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJDRCRA9TVsSAnZWagAAqOoP/3VyeOx4eAUDk+eYIVGL\nZkQ0GM9/g7kijSYSbaEp6ZHkCSvs+zLgmh1763bgoZHsJWvHUles5RxDASGk\nV5mMsy6rzoCOuxMgwnaf7NeX4cbAZiKFSsC8T9V8H4ppXJQ4UrTEeOjO776q\nYADoMgE3tSAuz9yLwYV6/NBzvVpc/PTUXopsWrffZx1HvfjM2bkRfN/i8dTi\nXdDXTxAw/WxH1dZVSnmwpgFm7X3grGjNzhXedg30AuLvnRumeU8Owdox+0lL\niayMZFZnM3TzSvVWUGSV1bYDW3raYzPdX2+gjaEWp8Xcq2YQ4Qh1hVquMqdp\n4KFkgfQ3pB8oxYFk8B6bBSGQKq4NulYFFFcqpVw718rFo82xeS5LtOkLcP64\nHU6E1XDpCbChOy1tg5FOOIZR2avIwfErpe6ZhqrucwYgH7Dded9J653SoROA\nn+w7RKHnoJAqPQOOMY3JIhtJBDhLWj/PL2alGwR6G5wo0mfTVLNQzlZQ/L3B\niUdMP9jICj+awmNygqFU0Fxsy7MOh0Zva1gUIrWCXe5xnvWUCiYFvmxQyEkO\npzJ/fZ1VLjaBWJN5om7NZgp5srIuN8lSPz+uT9L46B5E+uvsBueBWBns7NsI\nlDGj9i4Df1tEB5t3ukmqSDygiXoy0TwQOJO5IbpfAwo9pMMFHoycnzvGA/JF\nMsGw\r\n=P4gl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d71622574.0","@material/rtl":"8.0.0-canary.d71622574.0","@material/base":"8.0.0-canary.d71622574.0","@material/list":"8.0.0-canary.d71622574.0","@material/shape":"8.0.0-canary.d71622574.0","@material/theme":"8.0.0-canary.d71622574.0","@material/ripple":"8.0.0-canary.d71622574.0","@material/animation":"8.0.0-canary.d71622574.0","@material/elevation":"8.0.0-canary.d71622574.0","@material/typography":"8.0.0-canary.d71622574.0","@material/feature-targeting":"8.0.0-canary.d71622574.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.d71622574.0_1602261201254_0.2947978672091267","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/drawer","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"926d86a78634d266ec18f076208d82187478aa5b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":48,"integrity":"sha512-vHDRlOgEDsSX9mcnTenVvs9kuu/qUK7ICJAjNqffGN8WoHk5AnW2WliFp8I9zYTXWUyzf8bwBFKyJ10luzkK5A==","signatures":[{"sig":"MEUCIQDMOPYVeOXPixcsXV0PtyyQr/FOf0opfN2V9bmqex5UDwIgGUaQ5NKWXRLdx+DdrfLgK3DUfB5EmzHgL2wL3v+W4Xg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOpgCRA9TVsSAnZWagAAJlEP/jGXF859lfhydbt2J4uq\nZGNs4HNyw0yaAhFxHJ+yzPDwm15LJud65y3adbjaIqgWVh5erQgb1DpVeHAR\nl1Rsx83F7g+dk0tfJ4EGQD3PdHJFlo+pTKxfNC2g2F37lLkFCL3lbx/RSCG4\neXS48l99c1VaI+s4fLv1RmR9WR2Qk2USrFnPS3rnflax1AxXbFasb05kegNf\n+6Wff/7dJNPYNzTGAX/uTMK6nFZLoYCx326MvIzhugHsFfDvZwZaJ2jUxx4N\nhbFgstsrKeUOnX9aO9OXNejM+bhve6eU+SNa73RHraHu/AkT9eGUzSSM9qn8\nYEKev61djA4CSxZdMY6Ljfb38CxDR3xvuPeTJqtdJ93lM1VGZnIgJpkDX8Eg\n/vQ9OCu3ANHrDxIWAbnVbCmLZzXprl4/K3gnWZhFzYSpMLvYQi8L/WScVFox\nX5BjZOBntjIwNdpFS+6ylPGVwgNOj29FKMSaIqTo7UyR6BuCUiCCJK4IssLR\n9PoXNcGInRl9Jhq0PS5iyX66NXWdrSmLJ/FS+dp6LBmgyQUZf4bFxatUIcbp\n/Es5cy1qdm/4hj0b0uqr5o6j9fIB+gJ9h/zIt76rGGH2L9KwzG9q8d5pDQaH\ndOukyMH/KTPMORgAyD2WC2o5zvKv2v9lk4wV25ahLj+Kyrknv9aWiOcafJBd\n1Mlx\r\n=3380\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7a9afaf4b.0","@material/rtl":"8.0.0-canary.7a9afaf4b.0","@material/base":"8.0.0-canary.7a9afaf4b.0","@material/list":"8.0.0-canary.7a9afaf4b.0","@material/shape":"8.0.0-canary.7a9afaf4b.0","@material/theme":"8.0.0-canary.7a9afaf4b.0","@material/ripple":"8.0.0-canary.7a9afaf4b.0","@material/animation":"8.0.0-canary.7a9afaf4b.0","@material/elevation":"8.0.0-canary.7a9afaf4b.0","@material/typography":"8.0.0-canary.7a9afaf4b.0","@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.7a9afaf4b.0_1602284127697_0.20340373147691326","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/drawer","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c50dfcd34087a552ed3cff8da9e20c6e9be4954","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.8a39352c8.0.tgz","fileCount":48,"integrity":"sha512-ZM486NhGNqbQe0AUpHCiIZdUzEZqW753kt8c4twMADXzK4ybNIVjS5DxxSgeA6123ys9fNg5W4iU6GSpxC3iYw==","signatures":[{"sig":"MEQCIFaK3WWQ9XZT3n4QPKnAreTpzmexQ+KWPVeC23RQPHYrAiB8cDEMPF6LSDUy+Amc0B/SSgqLXr5RUBC/vebsEgqNZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJbYCRA9TVsSAnZWagAAuwsP/iiplevchjEUFo2GsoS0\nQuayv7Mxd5LhmEqckREO6BQkhqHRmXx7pPWQ2RHSeqM6sZtuA5WNQs4jiBQc\naEsWnvsCmlpVJVdo+XBx2/N0faF83rSKq0kzhBg3IzsDjJfwnKsVATdrnEZ8\nballHfEipbN1optwywx7Pa8nGC1tq1CjnHCWYqt/P7dIhczGTwJlu0B/gQtU\nYPW5qPoHo0oTAftpSjzlVts3qkW4bhwClG/QrXOhDMI473q01wOeH3TWFPtj\naEQq7sDCd5qHnPNIQkkJbvI2xqrxLcic6mcy0P0fZFIu/dje4chykxLln9za\n0hgO+bRGZuui6RkxWv53SzM7xwLww1VHO8uonTqDgkPCmOHKK8lZg9ibLvq4\nVGTvAPKmnU9Xb9V8mx88IV7Esr03htLpRR9+SNFg5mIVXsNZvQe+Qjpt08cb\ns8PUfXZc8sn+D1isufjtCcjq9UBpPDCR6/BwHp5c3eTB7b6YbEUqomvrTvje\n/m5yrh+80Sbl/ZAs1MGBGbQRNlFrBCcWpF5Nfo7gGz2E3AN1o6oxxNpC+ndk\nCW/Cj5F+ttLqgWdnq9HOGg8dR8bXN0PWEQ+KLQ3LG0yFrduWor3Y/z+JppiS\nv6w0Jc+z3k4MOk68Z/qV+jV0VuaD1fYdJj1sfT5gyQwwM+Ncj949CLCciYcT\n9QXp\r\n=yh+6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8a39352c8.0","@material/rtl":"8.0.0-canary.8a39352c8.0","@material/base":"8.0.0-canary.8a39352c8.0","@material/list":"8.0.0-canary.8a39352c8.0","@material/shape":"8.0.0-canary.8a39352c8.0","@material/theme":"8.0.0-canary.8a39352c8.0","@material/ripple":"8.0.0-canary.8a39352c8.0","@material/animation":"8.0.0-canary.8a39352c8.0","@material/elevation":"8.0.0-canary.8a39352c8.0","@material/typography":"8.0.0-canary.8a39352c8.0","@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.8a39352c8.0_1602524887952_0.9488436400488929","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/drawer","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b413785265678e04047f8cf266b80713f246b0a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.790ca85fd.0.tgz","fileCount":48,"integrity":"sha512-1Quguimal+SyeJBSP+Ad24IMP1nkLpmsdS+Tocpjd8F5HeDEEjk+w1G/QfrAkGU8ggg1TcXbuDndo7xbpQFz/A==","signatures":[{"sig":"MEUCIEeYSD/m7F3r4Eg3AMZBSv+zots8bsTaQ71F1q3HStv7AiEA7ERjwzwQLomCUmqYYzFeHcJYRGulWRQmnL78GDzZyZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNF0CRA9TVsSAnZWagAABD8P/0M2ZKInpWsUR94Z+h9h\n1qHTK1QSU6pfum850uNKmAbwUcYal1p8/AleCRElrmM09Y8Jv4GINS54I5zG\ndLAuf498jrTnqvkvt93DdOkPHPHXigjJdp2PmgQmhIyk+n6cS2+z9ws963OQ\nJrQFxY6ngCUvidckMZAJqnU1oR9vR7eQbAPncFsXnSxJIP/WNBm3kBDErmHS\nMASKfROnSz5x5pMUn4YY11Mx/B8hiKv7nR55tsBFFDfbWfDOb9xr3Z/dgJRz\n52uxOrDITB90zpl2k4FmNAaozqu6ZiVr6RvnqJrk56cI0YYJP0KswyWTTl9g\nEZSDDjuI1wMvEsn9D5rsOsOWFkvx8q/Hq3RCA/dkLNSPjAPZUV5Ch2c9+rbg\n/9BJymXnlaZlem4WJqTYiyZWdacf4tHCfD5vWbNqpGx3dbRAS8rr/gof3/Z9\nhuaWhUqWy0OlK3XK6zHsm4xD4QJXKW7QKKcomEOGlwJqfXcDqd73KqhaLWLM\nSHAcL9nEBozJtaW8B5BjLoqeYL4FdEVCoQUROPR/R83GruO002rHebPhvmQN\nmI6DHB1V7uI6DzdWTLH7kM+NJcUwK+FNjT/QhWdnMtzcTeI0aNOJTU6Eu3Yg\nnLVNr7M0o1t+yieHH2cBHAaBF/tXpXGxQB69LKnqt865pJ7bO5a9eyvw9ZKf\nyucg\r\n=Yke1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.790ca85fd.0","@material/rtl":"8.0.0-canary.790ca85fd.0","@material/base":"8.0.0-canary.790ca85fd.0","@material/list":"8.0.0-canary.790ca85fd.0","@material/shape":"8.0.0-canary.790ca85fd.0","@material/theme":"8.0.0-canary.790ca85fd.0","@material/ripple":"8.0.0-canary.790ca85fd.0","@material/animation":"8.0.0-canary.790ca85fd.0","@material/elevation":"8.0.0-canary.790ca85fd.0","@material/typography":"8.0.0-canary.790ca85fd.0","@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.790ca85fd.0_1602539891469_0.048250361354912785","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/drawer","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.174c0becf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84ce1d526109a598076ad632fb2dc781161af591","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.174c0becf.0.tgz","fileCount":48,"integrity":"sha512-hx04AbSEDDdabj31Q/OrBXA95UpFnUrDD1w8ysm+Gp6jsn4Wof+1fkyoXQOqqnh3DpMKEfbVZ97XVhYZKLv90g==","signatures":[{"sig":"MEUCIQCatpTEylRknS9DXb5ZorrZoGDLnHpq+Vv5t7euzLG88AIgWQ3UblVtpUujvqZcCqbbrRuQnYGgu7onceUXaSlQKjk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl+nCRA9TVsSAnZWagAAnQcP/iyUfcvv+h178E9a6vWH\nnLPs8koAV1Ri7FK21knz3q75Y42AbXawCc+QVDYf8bTQH/kWx+VIxzSHIePf\nPwJMNKTRakHK4BV/AaoIaoPqjbEeJTg4u9SjxkyvYsR7LBueZSDd5TdF4u3K\nKsBJRWebk48Vk16g9aaZcXSQyOJpXGAnK3ehCCckXe/8zNMY1rE1Duz4pAul\n5W3V+Vk5dcX8W1+6v3lj6C2g6SFo6aZ1EVKuELedXCLuygyr9fpWwWykxMLe\nhKk24X56EBWR4UaFepnobHov7OR/zyEvavKVvx1f3xeZ/6yI8vXxWJwlXu9H\n5vmzmRNKqIdqAnD2LlpO3yFiceAecTtgvn3vSQLdnsurkaXNEdjguO8nYQFA\nX13vjMaekIVdPkzb/zkmSY298GtlXuUZ4Jn4SaojWMqeR9LF7hn4uSLqJ8+n\ngSVAxbQrpEkVLZfM61zZi+QhuwruoongNf3+kObHGZxIf1FqV8ggz2sWC+p3\nYjIPVWn/Lv6w9Tz4lLB/Yayj5o19saXMXpCRqE6w2pJMQpX//YDw186XLl+a\nhjO9ooX7bhuojYF06SvGJjBsRPkBKPWH1DnyBAgDGK0w8dz0rf1j1Ciq6qqp\nIH+3T6yyQERSiPAigPNMk+0K+lZdcKgVvTHVJ2VMEmFPc7Ku3pO3AvMfIOZX\n4J7C\r\n=ngH3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.174c0becf.0","@material/rtl":"8.0.0-canary.174c0becf.0","@material/base":"8.0.0-canary.174c0becf.0","@material/list":"8.0.0-canary.174c0becf.0","@material/shape":"8.0.0-canary.174c0becf.0","@material/theme":"8.0.0-canary.174c0becf.0","@material/ripple":"8.0.0-canary.174c0becf.0","@material/animation":"8.0.0-canary.174c0becf.0","@material/elevation":"8.0.0-canary.174c0becf.0","@material/typography":"8.0.0-canary.174c0becf.0","@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.174c0becf.0_1602641831200_0.8560280644888922","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/drawer","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c538523b046fd482ce6ce4bf3178673292d344d1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.c71ebfa02.0.tgz","fileCount":48,"integrity":"sha512-8vmZ4B2MlKWK6ghlSlFnlpHmgheO4Jsd0WBsNlPiDqvicb5IIkuHXvioAm93LMVx/5WmRH76pz8xSOOjUSw2nQ==","signatures":[{"sig":"MEUCIQC2rG4ILWge5TxHd0yEPON/uTORIIFj/+EYmc/HXRq9DAIgZ3gaCVx7Vav+REKEEZTN1ZssvPq9JtF8GFQklVR6NNI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnw6CRA9TVsSAnZWagAAu0QQAIXR1aaCoNQm6PE4RgCT\n8f8OHugBnhV4F3Tk0hRpFUuGi8R1+Y+5tVPJOpBTxphggF3l1qeGZ/074vaq\n+d8h07dkiDtdv57RX2tZRkY5WNcaKI92vGge6I9aPVg9rGaKGwuegYfgccr5\nRyffXQ21VkP4qiH7zymSW4IcFwcLKfI0RhSiNzY+a3tqMflaChGifE94oGhm\nmjEc0ZlWgNAagEkNYCs4Qxb/rYecBvHO7pLPabTN2NljMMxSWU/thD49rHQG\n2iPukzNDGH5+JaDCrBG5kBPF9nyg9+KX39iiBdNCu6gJazV89eplaDHZWyW6\nPQQzAEONOYq2lJCFVu8sIg87f0pP6nGNO2doaexaQg6FzDfvdPUL0dgLN1gU\nhH447DBHOub0VvVgeO5xpeM94Sjz9mkf6DxZepEC9ndfoDA7aboWSqtpnWVy\ncRv7wVxjb8lBKrTfAiDngUWolWeD64f8O+2X5QnL66/8s+/k2UBb+UpjRX3E\nPAHkJQYhSRQm+k1vjb/yr3sm6/xh0nXgLGdMN3ZtVGAvVsiXvhs0xCB1kywK\nNCqtRveYzgzWqMjzHHu2BnuiDs9MF3/TYbX0u0T2B3Ln3gNy1TtH76B2dHqd\nxWEG94OndBLDfUFa5va3tjz1fONc0J9OmqWa4zYWK2I8QpcKmU8A1zfh+W9T\nKreQ\r\n=0vAP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c71ebfa02.0","@material/rtl":"8.0.0-canary.c71ebfa02.0","@material/base":"8.0.0-canary.c71ebfa02.0","@material/list":"8.0.0-canary.c71ebfa02.0","@material/shape":"8.0.0-canary.c71ebfa02.0","@material/theme":"8.0.0-canary.c71ebfa02.0","@material/ripple":"8.0.0-canary.c71ebfa02.0","@material/animation":"8.0.0-canary.c71ebfa02.0","@material/elevation":"8.0.0-canary.c71ebfa02.0","@material/typography":"8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.c71ebfa02.0_1602649145961_0.19158197776284114","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/drawer","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b3433babff5d1c7a8515f52ad68e5ca37a42fda","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.2ab716cbd.0.tgz","fileCount":48,"integrity":"sha512-LUjf3iydyqbP4NnGFgb8R453jgu8Y7czJAMCW/bqXgTw1Qbj5hhC3WImTBr869CY7SSIeNEVeZfgBzUA3caVhw==","signatures":[{"sig":"MEQCIF+RzCM3qraZ3HKvRm3X9kxNjfyDZX5+tyqnau6hIDYuAiAJZDM1XuOH0jtuTl9EZSXTuUDebyIVF3L3+LNLmox6/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOPdCRA9TVsSAnZWagAAstAP/3LK9P48oCfo5wpWIPIm\npnh5S23xQ5kie4W7baP2Up7jGBQ6BK1FEX+KKku+enaPd5MfbMk5YqgquW0m\nUrEoRJLjwN09dMfxaAEpiGNDs8ZmK06vryibJanA5EKq/VftWNgN3HV0K0wu\nzkKeO/GOcxJG9j7SPYc3mpt3ziJLr6X2pMaYAHOepKaig9YsVRq4Tr52siFb\nOH30IYrrXVKZ/6oUiFr2aXl2Q/AOormzwEpSC14JZ8qjJIJG2xcnnSacsfxf\ni5j+RBvRLLAyctJqPD9TOIyffHyzXHz6ta5SEa94KxsQK8m9/FwbPT2V/Fef\nT8l0RCtFaugDWbUV9TVS+Wzv0RyWD20b8LS30Jzy+8yNgBewdYQj7P6dcRAr\niCnMVqzracI3PzkxLwAo7u4lq/RTNQqNedfbbMmApWA/QqhmvSXqPQmlmdNJ\nsDSD6u/+bWgH4ckZMvnREThq0Es+AnZcp3VJrHRdKKQVw7/erWvjcswkzmEh\npK4NStgTEgZPovf2z/5ypYT4xPaVuADvqFewUnjNKBTlioobhBrvSM98RpLP\nCrHWHsu94mLYiIjiNhEwxqOqswZjKjrEpE4ihAbJEh+hIx21vxXWQe6LOmb9\nvE+XI1HM21aES9dv4SB5vGbm/QtFODGkjN2b2DWz8P3epiWnlz8vgTJble8z\nfH7g\r\n=F91G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2ab716cbd.0","@material/rtl":"8.0.0-canary.2ab716cbd.0","@material/base":"8.0.0-canary.2ab716cbd.0","@material/list":"8.0.0-canary.2ab716cbd.0","@material/shape":"8.0.0-canary.2ab716cbd.0","@material/theme":"8.0.0-canary.2ab716cbd.0","@material/ripple":"8.0.0-canary.2ab716cbd.0","@material/animation":"8.0.0-canary.2ab716cbd.0","@material/elevation":"8.0.0-canary.2ab716cbd.0","@material/typography":"8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.2ab716cbd.0_1602806748709_0.893062892637684","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/drawer","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4be0aa65f6cd8c4ea37645352800a822030021e8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":48,"integrity":"sha512-nBDFf6yZYdG5p+EU3fcFsQGI9BFFGFKDfOuHj6bC/7PKxvBJ8G3cnrRaqpg4NtTCKoRpjGUDZHKSrkN6AnaQgQ==","signatures":[{"sig":"MEUCIQDfJf8TRX0UeNDQLoeCzncbe+/rVok0DSHYN0u+Slz+fwIgcwUq3o4iGDCcF9DwPPLD/w1PhBjHGaJ14+G+Sku7ZMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ4zCRA9TVsSAnZWagAAsm8QAIoX69e7SMvrN2//4IbY\nOK8GiK5RbZmdJ0RDcdL0rmWyDwmchUnBHIwoW8AEvie+PIN4F4+xqqtEXKYf\nCFqR0AamUoOdtOTQNgq98PF7ERNysKTrTbFmd82VZMaJ3Hj0D33AcUGQ+IHC\neuWmRh3MVor2rVerrLKCFwl3OynjAGmX+ihchLOVBv2dJFODzTdEOAvmJWe4\nk1V3Kng72isHSSyM8XifBq8yOVSD+j8kErDDpEG1GD7OFvqCeJ5xswg3AU/8\nRb4W0eCR0q9zNQqizPRVifw8CV2jmK9YygE0DP/5bAT0Ta2uTLNEE5utrgZr\nW3eIfms5uxsNsHi1t3PDubb5UwR/+jJUfJUJS9UiVpJqPYcoF8/kwxjZaVQl\nVWGR6P1PSL0HYH8uC6kO+8GLhEkJ3MR0XW1JfBLqxCo5l2u8wjvEMs/TaxmX\nJ3+QHEHKV1xkz8FBK85aTO5X4W/Vu1dVX1zVEUg6MlmnIy3DqTur2Q6TqcaZ\n7pWju1WzAa7Se+xM9C+rbY+b7C0mSGznU9fCWHzueEnSphHK/ijQDsGEeIVB\nEf2HURy4vV8m9BZayiho2vh1ci2glgPAM2UIsqaPi72/I7+MCJ8DtssZnA9D\ndyDi5qtAznu87HMT8ELi+xqUqkFcdt+98wFNyXw5fAyK2orkvXWc4+lMOAlX\nZs7K\r\n=CMX7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.43c1c5e2f.0","@material/rtl":"8.0.0-canary.43c1c5e2f.0","@material/base":"8.0.0-canary.43c1c5e2f.0","@material/list":"8.0.0-canary.43c1c5e2f.0","@material/shape":"8.0.0-canary.43c1c5e2f.0","@material/theme":"8.0.0-canary.43c1c5e2f.0","@material/ripple":"8.0.0-canary.43c1c5e2f.0","@material/animation":"8.0.0-canary.43c1c5e2f.0","@material/elevation":"8.0.0-canary.43c1c5e2f.0","@material/typography":"8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.43c1c5e2f.0_1603116594779_0.19460118031330853","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/drawer","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c500eab81ba68a62e74ec83ecb82f6bda4553f27","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.ccc64eea3.0.tgz","fileCount":48,"integrity":"sha512-Md3YShzXkMp1xB6P44FGzEEzcBLrYM3bnqXkwt24/Wo0FiZPQEUt1YtJrMkZ/g0CxJ5SwqI39E8qpxcZRfYFzg==","signatures":[{"sig":"MEUCIQDL6aPED/ojongbgWsf/cIakGR/jWDduHOgTtGsbC2YdQIgFV3/S5HdiCWNr+Y9ov6o8VET/D2PsMBHeFfzRMB4fvc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1NVCRA9TVsSAnZWagAAyEkP/jD4wiB7JwiRGYDrUe+/\nbIMxveo4rhVgq6AqsEgEJ3Juw0VTYzG6gjgAoX1Nh3MGRog29CA5bIownGC6\nJ8C1TqCCVXDSkK69QsMVJy/ZVCxsjydW3f1ia3wBKL/64EPmfyRJUu/Wa7sO\naISw7d09LRkD7cvFTnnH1YUviNajFNJLjrFzetHa20DbTciExXUcKfBjJQJT\naVJGaVqL+xY7VTxKv7kOCBSMWLfuuph/z+kUqlBW4LiMhnpVOtjM17T/1QOB\ns1MZ1tz1BpQoi8UAyI0OqhWzAQOLT/1vZsQLppPXkuCPlnbvmxnL6+sPmpm0\naOakx7th6EnmhSzNoTY8hCvXuB1xy9gkLyOBIaB3b0dNABcb79cLphEbqGyv\nfFZZ9aMHepCowLTQPV0JjhxsH/35BGx9+pNIoT8Y5K5HUo9aNaye1C4njkj9\nJNKaG5dVKOQfH1iJqNvQisfTRFQGopTwZSNhYUGt1BBxe7kGa17k9bkT/ad2\nk3I5IIw3sEn8/Miiz5549hXDVZKBzoJQlSlE6I0ybR/z/yeFaPdwhf1MfadI\nftgcpfOWK87ysooOlE+4UNVzRkJRnoveVUChNEvuRHXcMN2KeohowfQLsyGB\naAQmSAy8thEHt92NJKd4lp+yy/40emDKhxNn7lRPif83I6HMk1qoY421VjrS\nRbSq\r\n=J62m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ccc64eea3.0","@material/rtl":"8.0.0-canary.ccc64eea3.0","@material/base":"8.0.0-canary.ccc64eea3.0","@material/list":"8.0.0-canary.ccc64eea3.0","@material/shape":"8.0.0-canary.ccc64eea3.0","@material/theme":"8.0.0-canary.ccc64eea3.0","@material/ripple":"8.0.0-canary.ccc64eea3.0","@material/animation":"8.0.0-canary.ccc64eea3.0","@material/elevation":"8.0.0-canary.ccc64eea3.0","@material/typography":"8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.ccc64eea3.0_1603752788509_0.39570282189620976","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/drawer","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0930351f690630c56419f4a1a51834ee706144b9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.a79cdd019.0.tgz","fileCount":48,"integrity":"sha512-0N1eLhDp1mFQnb7jhMgSmmy1Po9ANDGPVy/p4e67wlP9W+Pn3yMxFG1YydDkUeJ/5P3sLD1WWotw9/nhtv58Zw==","signatures":[{"sig":"MEYCIQD8dNsxOZeDa0a57CP38fOYql1GF60JEcRriXS0T0qUugIhALXaiwSsJ/VRZPJHAKN3wT9yb67tXVbrwamGsgNhe2QM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEvSCRA9TVsSAnZWagAAtdYP/1lRR7OoQbkBNbWrrH2f\naEdLGOkSv5ixpg1n1tQ4g8XJrqVtO9DXln9BWYTBp9F/MjsYAylgJaAqqhON\ngbNcGXh9gqdCY8GN36x/ltkTkbu8IZvRYyGlhUi8NmavssUFQyh1aBqSo7/y\nCE7X8FMfitbcUfremLgyeJmo3Z9w+5kk1Muzo3QMfx4Ojxy2Eaaq3DCqoctY\n3H6WD6h/e8AxWn9SPPe+/o7Bh7aWGQLsJxnAvI9SHkN7miMR8hcLkMGcEXIC\nQ+uwNcI1bFmeX29y0Vjd67485oNdpsZgSUMxlsQ1/EEsF+LCWnePquHdBnV6\nyfEhXY3ZG/sc1ISTM7wL98GiUj1S1GceEfUJ4MEDXtCbkJQbGA4qaD+NaQUA\n7dzxePre/sYsh+itAyO/WK6aTY/VTMzlQcRld4v8Bj9ZaGdEBU+CWBXyqsRk\nMHeknijOID1XLY/2HyvrRsqcWwA0S4aLZrkoSMFITK0AsRq8FZ4kxX6TG6iR\nkMKZzYnN8zNjdyzeV5PG4rChqiiW6uAbDdWmVXHx5hqXaL/KXrFEeC54xCix\nl3bjyXlySIu5lxiN2v4x0sKXdjOPXZMuyGouYp0CkVsmi6uvuOQF7Okuv8Gg\n/bm/LdY07NyWA/hUhT5slb5oAAqy+1mpAt0EnbPCXcpIbqklqgSJpsgx7HNL\nMMqh\r\n=7ZBA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a79cdd019.0","@material/rtl":"8.0.0-canary.a79cdd019.0","@material/base":"8.0.0-canary.a79cdd019.0","@material/list":"8.0.0-canary.a79cdd019.0","@material/shape":"8.0.0-canary.a79cdd019.0","@material/theme":"8.0.0-canary.a79cdd019.0","@material/ripple":"8.0.0-canary.a79cdd019.0","@material/animation":"8.0.0-canary.a79cdd019.0","@material/elevation":"8.0.0-canary.a79cdd019.0","@material/typography":"8.0.0-canary.a79cdd019.0","@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.a79cdd019.0_1603816402364_0.5933938318140408","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/drawer","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.596e98424.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"388330f2fc9ee157ce95afecca8354e4f821ea41","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.596e98424.0.tgz","fileCount":48,"integrity":"sha512-Es1plDrGxZf5VHtRoZdJ64mS+QR07tTG/FA1Yed7jM/aoovBkpu5I/DPIRwSSzoYZFNrgYRdlMghlGHdsw7Lcw==","signatures":[{"sig":"MEUCIEidqLSL9KgIoyUj9Ajw0RAYj+XK1p7JXp8xRy1Hv9x2AiEAqVKG+JIsJkzpwmv2NP8E9yRc9XD9ZM0v+irvfjjh99w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZbECRA9TVsSAnZWagAAtHgQAJs6o+Bfuv2O95ecO2HB\nyRBFYx04JECnE5VVL+zJUGZNPQY6GHqXT0XGtC5TwOQZ1BI5pW12DZS/gzCV\njkrUjiWg51H3L0JmGabyRtssyhPU7CBYCLlCqPlbuXnX6Q9PiJpDQpGPHkuV\nbCzfJEgE7s8DH8PK8mrdUOEjrJt1WYICgawXWTapd0JVlct1Cfc5FwNzrGkV\nemJ3X3eOh4v7B4cgd3DFKpR2Y1Tu84ED7xlEkSujBUt16byRMgrrQ8vNT+Zm\nLRWwPCZeSp/iYwXOK/ifJR0X0bBQgFV3j1sufRCr/AgcgsJOCqwORhDQ8dvh\nzJ7OJuqEkf+K7z+14P75LG5btFK5tKnYgvZKhy6s50xnQhAeWgXBtuzU+uAB\nGLIQPF05LKdhjpxxqsht44aq5a5nOFFDxcYhazKbL4DzeJQtUtqUHqH5yz6L\niQ9CuRKiubM8wS1SKe6x/fL3Bwjz8lu8feAm8948WFiIZw3vvHezEmtxQ1LT\ncgRJ0wq6YUw0pjHTZ1N1fX8PxXWsrYoAIR1Qn0udadr9almKkscvcMDmkyl5\n3VNOWIiJ+PDwDVxvAoqBQIUGMYOWHyF4QgoHcU0YMSgxK4trgoM3Z/AbbySz\n40Jh32fkZH3GyeKBVIsk8z7mQffIZGz8Ld0yS84h5btMgBtQkIoIkTTYLvE8\ndSuU\r\n=kaUP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.596e98424.0","@material/rtl":"8.0.0-canary.596e98424.0","@material/base":"8.0.0-canary.596e98424.0","@material/list":"8.0.0-canary.596e98424.0","@material/shape":"8.0.0-canary.596e98424.0","@material/theme":"8.0.0-canary.596e98424.0","@material/ripple":"8.0.0-canary.596e98424.0","@material/animation":"8.0.0-canary.596e98424.0","@material/elevation":"8.0.0-canary.596e98424.0","@material/typography":"8.0.0-canary.596e98424.0","@material/feature-targeting":"8.0.0-canary.596e98424.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.596e98424.0_1603901123488_0.2692866699907308","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/drawer","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6a1ff89a6e565755cb130be9daaa632678d115a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.05d5facc2.0.tgz","fileCount":48,"integrity":"sha512-FgfoSYCadOEgDRybOXu3ozGpPjOhE9BC06D19xdPI8R7OOi2/AXFEN8XFJT/9NHEom7LKw9xM2wyMeeQh/11gA==","signatures":[{"sig":"MEQCIAGE2Yw+4+AuOtU8oY6pSa4tbyt++TICcHAM/dAmoVkDAiBm5UhuBXhx0ukou06VJcxmgCXhzHvP1S3QtTl07h4xjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZjECRA9TVsSAnZWagAAKU0QAI0qVej4moA/Pd7Y6nem\nuD0U/AYGaBObWJ/6Oiee00zKl6Jp6Z69OT/on65bFirHhbvztAbT5t+ZJIri\nf8ynhAnf5FIw3P3gJVqaSfNmbod3ngAzDfljNOON9hTL8kS4v9fP1A1IBlTS\nCukfVxa0CjN6JKAbcPPg9SKBQBOzgD25Eiue75kCm9UtudWJeH6qYfJuJQzb\n+iDEsATot3vhJk+aF5/1zNre3MLBMGIWIl9rNibhmVY0guUo9xcKkMbkJFra\n8i2Hon74fLbl+qvnb0dQdsoJTNzlFTkMl2rwKiTe4UoebTfOA3sSwio1SfH8\nErIJ2CR1OWt2d4p6fovw0tduzC14v9IijN5VQ0hZebM37uFANA5WatzS3kqv\nxaz8sHZHeYfSdoiXtOCUij/vImJ02OGZkumUmZw40MIBBsrekdj/xgl3qSvZ\ntoz8rKis8dsdTtX3T1gZTMqYxOGj2Q+O/79Kg+7Zj0GYg8ZdiGzdXgC/pcwP\nVlHjQWE9MkMWxhGQZR06pplOcfjQ7kL2hViP+5fo4T5sq1IoR4Xm/QWvHfKO\nbFHbS8wPWN4pdaBGtWekBAYYt3w8+riiDvDEIexN2TjljqCk0yqQDwJ+Rje5\njlrbyKmDHMGOLzMexdjckiEDNDFn9wEa19dnLQ6WWrk2V+2QF8cZEg4SGtZ/\n507E\r\n=AIvt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.05d5facc2.0","@material/rtl":"8.0.0-canary.05d5facc2.0","@material/base":"8.0.0-canary.05d5facc2.0","@material/list":"8.0.0-canary.05d5facc2.0","@material/shape":"8.0.0-canary.05d5facc2.0","@material/theme":"8.0.0-canary.05d5facc2.0","@material/ripple":"8.0.0-canary.05d5facc2.0","@material/animation":"8.0.0-canary.05d5facc2.0","@material/elevation":"8.0.0-canary.05d5facc2.0","@material/typography":"8.0.0-canary.05d5facc2.0","@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.05d5facc2.0_1603901635717_0.015457202786343771","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/drawer","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.291b3553d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26da0eba67014251bf0f957a9b2e957f23c365ef","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.291b3553d.0.tgz","fileCount":48,"integrity":"sha512-QWXrbLBkKyV9q66q8WACjateBSTq0k2QIGuGa3C3OzAMYEL4dSvY0KScMfpEQ6paK4QVGJM5TLVl24WGELOgcg==","signatures":[{"sig":"MEYCIQCGyI5/3Z6pY6nrvh28f4UzdANlPFozIhpESr1zcu+O3wIhAMxqL1DZOc06632VrByQXbYI7mwdSVPgT8Q7NSios/sp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma6ECRA9TVsSAnZWagAANCgP/0lVZCGq8RafEJd5WuDj\n8eI2guZzk0kBEigCrO1QOTglD6n0PD7MtZ7axyJOFJoe53Q7jOZBgSTHbRgv\ntuIKNxdeWDHF4b0Kk9P2R7wmrTKG5h9Do/u6AXPCvo3vFGlwD+tJ2YnFWQ07\n8WxoFP+8xilkxZuEusub3/jIKTdQoQrJB3+pSKsGI4mc1PRbI1NIjkoY7tmK\nuoIUrczcVmNaeBGQ42LPPDJn9QDiSLJqQGxHyBFl8Q/4fDq+9jlOZn/BD3jy\n4CZCrJAyd6sOSh0vANaRkFV10d3ZtCBvJdopIkczvLILiJ3XMWc9zwUdwWjY\ntVb8PfzN9L1Du+mHH7su0KzExWliFqyhFqHPLlY1K92VjHKnrPkFkiGCVPR9\nHDTZWdeYHQ9qWpi0OAOiifST4d2/LecfL4RjhiWIg8n3g/BKGElBvMcT9qM1\nGhJE60iTSwLrHogOWpSBKHyU4dUIE8mIJmhUUg5SYqnt/wprmyMianZc+5/l\nlYDQrClagyh7bkY5U9YO0M7iCJRg7dhKs9SCRbSGJq+bY7P4XJgdOe25GBzL\nbdgmJd6up2kdG3R0/tJnDD3/7hrhgIl5CNUZw9rwYpPQHY7aURauUfk8oz8e\nfcSkjvFarE9iOHkingX6hzck/lbrSiN+q8PM0ISRbz2v0b/4/MdbHKcJKmXO\nVcwq\r\n=8Ulr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.291b3553d.0","@material/rtl":"8.0.0-canary.291b3553d.0","@material/base":"8.0.0-canary.291b3553d.0","@material/list":"8.0.0-canary.291b3553d.0","@material/shape":"8.0.0-canary.291b3553d.0","@material/theme":"8.0.0-canary.291b3553d.0","@material/ripple":"8.0.0-canary.291b3553d.0","@material/animation":"8.0.0-canary.291b3553d.0","@material/elevation":"8.0.0-canary.291b3553d.0","@material/typography":"8.0.0-canary.291b3553d.0","@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.291b3553d.0_1603907203683_0.1445108563775297","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/drawer","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b66a117d0d6f313652d1ffb73f4f31cd4233668","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.dbc449b09.0.tgz","fileCount":48,"integrity":"sha512-kAMyhmG3uIGmxQGx8XbOC4DtibpnNksfBFm+/3pZbUrm5haAB7YmpNH5JyNk6SGKgl3fDaSRIs8SHZ87ZrtqcA==","signatures":[{"sig":"MEYCIQCIuGkhSkKYV/ZWC4ifwNG9rGue0c3jMZFi2kWK0P/lVwIhAIdZcD0o4CSfQEGa6OLG4yTAxJ6jkEYYAXcYeUsFUa70","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbT/CRA9TVsSAnZWagAA/TEP/2EVwqmqOxqxKHiS8xcy\nKNTi5nbrnaJhBRa5o2o9QB1zY+3874BCYr5fyDSxOAMDxYq4VtGbCHXTEXaZ\naayrFLABdEWEpYJOBs1ANXcS53zzSmfOqORelX70MTNdcopn5aQ1WPvTWSpB\ngUQ0xad4MGgGuD91aWJkcobNUatWNnBszELfnUAVBAm4YQnZzE/6pu/Vnqb+\n8394WDzNYa1/xAv+hCtdxKQDYq/qYYH5H3n63e21B+3gWseMw8qY1bVJu76R\ncJl6GHpl1yyuWPfR7CiVxVb69uuPZzUFSk0HRW3HcsolHQR4hLJanWbXdiOt\nmKxiDdDojzvzg3dcjbXnkXBVjP/OVz8Iu6he3j2sqA09ywCPavPH1XTzmmd4\nCRvCdexGri7pn0IBnwRdVQFNZn5neb01YTtYtHhHRmwvPzW73e6m3jxwDvaZ\nMBe/guhExcV8noU7y/AWfs9tgBBX8gPuejL9HYitYJfcfDCNS0Cn9peFwfe3\ndAVXDMOtuQivKNDELVVOoIoHCRIj9j3c3sfTgyzdT7/9LlCqJtgzmAHaCn4a\nMCDY2u8aPBa1+ltASKO5+Y5+clCB0LpNPxec9Q66cHklECtpBLprARkbz0XG\ns8R+T4SOX5yCgBaG1Ys/dAb7fZyvMsxuU1pXLECP+jI3ERpWnA8G3W6qZal4\n5E19\r\n=+DGY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.dbc449b09.0","@material/rtl":"8.0.0-canary.dbc449b09.0","@material/base":"8.0.0-canary.dbc449b09.0","@material/list":"8.0.0-canary.dbc449b09.0","@material/shape":"8.0.0-canary.dbc449b09.0","@material/theme":"8.0.0-canary.dbc449b09.0","@material/ripple":"8.0.0-canary.dbc449b09.0","@material/animation":"8.0.0-canary.dbc449b09.0","@material/elevation":"8.0.0-canary.dbc449b09.0","@material/typography":"8.0.0-canary.dbc449b09.0","@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.dbc449b09.0_1603908862661_0.09754063631144372","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/drawer","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.4794b25da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9c2dd15aef49b58ec627abe5d0941102dd0f5d9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.4794b25da.0.tgz","fileCount":48,"integrity":"sha512-ehQikApSSvY2X/F1G3YpjY6B5PWCfJV4F17ywwajVD38aOSRwAzdOIy2UqQORcjosCuK5M+FIQNyU2enAQWE8w==","signatures":[{"sig":"MEQCIHNv/HXTdN3AExHIzbJDhwVptDEYW3BfjoIKnENngiKfAiAfLPcToiPblygu/ij0cAoealRtrYwM62ufrDLWDFFSow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbukCRA9TVsSAnZWagAADUgP/1SWhBmV7OVecpRq1n9d\nEcTKWLrWPOuTpyUrbOz/pD3kBAK9OB/BA+XkjbvMkK759XnlkWowwX9Gq/jh\nQvUOYQ6xomBKRO38/fUJ3jgUM4C4spqjhU2S+4VriWSTaDuDao3dPpV3QuLi\nc7R+LUR38YYdmCJ8yKEymhniaRLmkMRluDORQMfzz+KvHjq3Zq7BiWzHJQxf\naatlgea+9Q2CVY07pAYIaNkjM9N0USvQDAqJA2BGf10jCax1lqqPFTlukNyn\nQg8kCG7DzeG3GcsuA2aMLGzVMlCMgV/UfHbbceuub80ALLhTK265QhN7i43Q\nJPRx87AMHwOui6WuAACeGjOVImSDbrD4J208whck+szNtimrRHmbaOsj8HIg\nan2MIDnqzKcvQymBKbRF8fMnmjFxGM09++r5rPz6RpRhtPlqTCo6vgTqLXhZ\nG0wvK61fFJPariPKxMyGAIGmhhF1bvkWoFAui0tIXP8kAF60k44rwyAeXAxP\nwFnESWAqC472fWWfTpKH3hxPNUMCLmUaVaMjldJPLPNDbZ9pty7O7CshEoLI\njoDjPqlA6/9WzTwFtxu/rlvWZnbNh5V1WlFPtm/HOVVw8pMIW9B3+Z6P2t87\nKcufp4M7vKkgo7QYQUfkGk59Xl4f4bxhP6BQ+80lMBoKHELwlsWz44tmB/pj\nUz7D\r\n=bdYt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4794b25da.0","@material/rtl":"8.0.0-canary.4794b25da.0","@material/base":"8.0.0-canary.4794b25da.0","@material/list":"8.0.0-canary.4794b25da.0","@material/shape":"8.0.0-canary.4794b25da.0","@material/theme":"8.0.0-canary.4794b25da.0","@material/ripple":"8.0.0-canary.4794b25da.0","@material/animation":"8.0.0-canary.4794b25da.0","@material/elevation":"8.0.0-canary.4794b25da.0","@material/typography":"8.0.0-canary.4794b25da.0","@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.4794b25da.0_1603910563477_0.18440364058688363","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/drawer","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"412ec7abf11006421f49df2aece05da4fcb72e17","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.c61db90a5.0.tgz","fileCount":48,"integrity":"sha512-Hv2/qbglgWTY/KKVwBfaEz9A9Sb+Fy+BYFv0sEyFw8kAVhDIaYZWN0M/8SfNmrjeui7h2Cw3tyHwPBOT9MmI1A==","signatures":[{"sig":"MEUCIQC0NxFFvx4nXfLgm3KB0YTquibOC27D5sTLosPBaol10AIgVpqrx691ZPmMIELN6XK8kphQfs2JklLEfJuDT6IA/9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmcAXCRA9TVsSAnZWagAAZTwQAJqUjkS4XXGQPfe1bZ57\nJsQn8HCvHrhC59u7HDCBpl3vOLJ1g6f157GikcsbXQ2hp8Og1GKy8aiK9EiV\nmj1S2bDGP6LpdhQ/FKMyqYgczDIsD1wbOWUjD/je1CRQTW1mObZuXPjte2/y\nBDqqHIzHgWtrAcyaei+rWrZAv4EoHSf8b77BsNG2OuFjGYNbjMSvU3xn1DIV\nqWyeDM7xiey3z1UCi85CYudB4zzUb70qipAvym5v1l/jEJHjThecm7mJ1Gjo\n63rsUozi1LjxlVNlGOAE/bQcz6QyBeFOG9jkLhJM14fAYjFTzMBspt5oxkGj\nE/6fl6Xtb8iIRg/hnUK0sqLrSbFSOs7n7I6STMsyu9EsofeUHy+LQojbw4Ph\nHcigIHiJZ1XM9ZF8AwMXg56AL2mx41wLtSUjGBg9RwUB4rCr+3tJy3ya2jCO\nbBmHVan9lQWEAsjmxKdSIipQ0cLBwCA6d3XlV8qUjsqlfQIc9pBBzmCcnKjp\n+2E7VuThqjhGAx62M0twdMfHf2lT0LMkxC8diBu/t+LowWk25gcPHTyJafwq\nKDgGddDcxSx0j47iDpcl6CL19OPq1r627Q21vl821L035+hMFWHmG0+FbXyx\n+sE8JyVlbPhrWY7AADzoDZhP/apyL3DFoHWqIe2gfjcbiLT76YpSK4jDmkHL\nM1w/\r\n=osoq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c61db90a5.0","@material/rtl":"8.0.0-canary.c61db90a5.0","@material/base":"8.0.0-canary.c61db90a5.0","@material/list":"8.0.0-canary.c61db90a5.0","@material/shape":"8.0.0-canary.c61db90a5.0","@material/theme":"8.0.0-canary.c61db90a5.0","@material/ripple":"8.0.0-canary.c61db90a5.0","@material/animation":"8.0.0-canary.c61db90a5.0","@material/elevation":"8.0.0-canary.c61db90a5.0","@material/typography":"8.0.0-canary.c61db90a5.0","@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.c61db90a5.0_1603911703426_0.7429605561399317","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/drawer","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c94d830d3bb41f39c339ed009481a99df0037d77","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.6d9648ab2.0.tgz","fileCount":48,"integrity":"sha512-0Gv5w68InkxCzMeiXVH8z9xlLiB4lfypqKR09E/8o5nhHsmgeeW7dT3YCbBjAino1/dKXxWzQgogYnyXKPA+Zg==","signatures":[{"sig":"MEUCIQCfVezRHHuW0g8LbxeWZUuVKreAI09M9e6xbU+3aNVs1QIgY/NvPngGYaUJ6BiwX6D2jDbb6K1wUBoIL1I11LOXj9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmydGCRA9TVsSAnZWagAADyUP/2HuyjPLtUZGrGG7nKjq\nwKWKxXv5x7r6GPht8zMZ8Z24tXQ3WD5EkbbHNuiQAGeHYThkjxbhhhjgCP8F\nOLYs23bfQYB26LDzQg1M7BKOxFC1L5CaunF7kjhIkE0A8MPZtyBja1RXz9rd\noxxn4YhGrV/xR58uEa1P/kvEueSRh9CP9bJqNUXLyz5/0IUqV8oiGtr1Zt7d\nOVirwZhr5a7xxjz2CjWs2PgxARf1zDd1ugkNC8GZheoXWqKftdvqzMpLtGA4\ntqq5maXfkd0aoCSt8qfP0Actvy4ErqVQioAc/wvL03PeQdZ8iAMhE6m3P2jm\nx5IIQvSFUMi96VXaYgPQVWNKO4TgOeHQWjDR3R14wsRSR15wHU89YeOmzCpl\ne3mYXYMC6Nwr/Cb9N8FPmZqiuYpxzUWzRZzjYx8lAR4zhjPQL75bjT3N17rC\nnzi0OEtJtg4dgvMlszoMmxpJguemJz4kO0rvT6OErOm8O5JZUiL97jmzZRGF\n14oHBoVOfjT9FUyXtEOl6IbtRItAi/XR8+LN5dV2DkOLEvjx4qgUtWNikKdC\n+6nHP13SO8iqD+zOquUnsuzvc4EWr9rrO5CKz1kRvgv2s1lpa936DsF4XPGd\nSs6AV2GlhrDm7MvbdFJ/SX27x7LoaxYbtvgjAXlwJ5+9qerDezuNvjtM6Xd3\nYxpy\r\n=++u+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6d9648ab2.0","@material/rtl":"8.0.0-canary.6d9648ab2.0","@material/base":"8.0.0-canary.6d9648ab2.0","@material/list":"8.0.0-canary.6d9648ab2.0","@material/shape":"8.0.0-canary.6d9648ab2.0","@material/theme":"8.0.0-canary.6d9648ab2.0","@material/ripple":"8.0.0-canary.6d9648ab2.0","@material/animation":"8.0.0-canary.6d9648ab2.0","@material/elevation":"8.0.0-canary.6d9648ab2.0","@material/typography":"8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.6d9648ab2.0_1604003653969_0.646414499808311","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/drawer","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.5511c5254.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b87a2a046f5e457045ede2bbbb12667e86dafe9c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.5511c5254.0.tgz","fileCount":48,"integrity":"sha512-HqEImUJoHOYZ0M/Z9OFd7mpkvHpLs5e1lO5LC5Tm6UwQBsYHXDaCJ6cnbKJFag3xgIUdJKjKkhAebJZCubdJkA==","signatures":[{"sig":"MEQCIDnel7JsPFDmM3HqlF18n6tmL5iIKWLxUIIWAuWjCjGjAiAXD0/J65qQe2ZtnA2ML6fLQQZMfXJK7tuzu/GDPWphnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFUKCRA9TVsSAnZWagAANGUP/1z0Az+2rdjs49HLX0FC\nRpFHAT+LaCi++5cT4cL/FkAEHjO78fsaBBmhMkc++K2xNhtQdtCiHW70zf0R\nRKPz7YIQbE6IDGJ5CWPnLSvkcpb5ZW2LhiU8S4tym2nj53ZLBY9Qg2aNF+bv\nDvDhlNalZVv0DvSR0Nga7MNN31DXHrzJTqCrbJaO5XuJnirgCM0I+I0GYOzh\nMr7hU54VF/f8jev438gP4RkMVN34nIBidq5xVVsMzjRXknbhOPw46g6hgCEM\nzoMe1bsZNqnS5eNM/23Vj8EoNLDtxBLkpTrpi4ifzWPNI8b6emDLgWNXk3hd\nnbzZDanPUmhK8JKY/3zg2aZQiYw9cGQ0imx66tRt75T9HJQWeuMKZthbLN/Q\nQRFO/zNLzTAzlzwn2XSjfroZ91DTlVDW57+RVR1CPrUeJTd4ckSJ3AsYH2Jm\nMP06nujU9qeNs14kCMUMhrgfjg7D273LWWhrvO8JEqbsY8pcQcugOYKBHso/\nSaS5u28eXzyW8Czvgb6nh94qESBP1YoIvv2LG6NzKGI7Yo6C819+GkY6H4Gh\nNRe5tnVeU1zlQAEaewB//45kprjllyy3yIYD0oOwKJWF2m4OGPl4NDCfhrnJ\nzacHaWy1OJyhPDBnS+hoJkb8HoLgWXkmlmlM3SqZyrbYJIuf27SrBCte88nY\ntdJz\r\n=bthd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5511c5254.0","@material/rtl":"8.0.0-canary.5511c5254.0","@material/base":"8.0.0-canary.5511c5254.0","@material/list":"8.0.0-canary.5511c5254.0","@material/shape":"8.0.0-canary.5511c5254.0","@material/theme":"8.0.0-canary.5511c5254.0","@material/ripple":"8.0.0-canary.5511c5254.0","@material/animation":"8.0.0-canary.5511c5254.0","@material/elevation":"8.0.0-canary.5511c5254.0","@material/typography":"8.0.0-canary.5511c5254.0","@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.5511c5254.0_1604080905984_0.6454314406215786","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/drawer","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b928e2bf44d92a8e2a9be35395b7b3026a989de","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0-canary.bd6e302a4.0.tgz","fileCount":48,"integrity":"sha512-y5m2ujtc963WX8OFbt1VdmLMdacQCeO1vZAA+6r+zs73PPq/4IwIsfaJ9keoEqfus5kPYmj7q8r50sRD3OWYxw==","signatures":[{"sig":"MEQCIEaCV0cnllzy429RHSiDMX6ii8QmMuczn0VPt9QhPt08AiB5ek3gw4mmafWd6wIRaAZzK0709n2Bh8igwoXJI0cCXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDyYCRA9TVsSAnZWagAAEUIQAIGgnmfleBnyT+InXeD4\n33iKXLB542xDzQht0dxuSnovQXuXV71S71P8tqC7M7T56NrQxkeAALw355C4\n3xU3fRbE9ejR9mx3WDiCluNRHauErRBQhvR5gTbEKQcFhqW4Se8b2gFDNRyU\nzmhLfokffWylniRxbtY75Npleb4VarLuZEBp80ko3UpTF8KUsCQvhdjNUTom\nLUdKrkySMb3LamvsoAdcoSr2gH4i3HqIN2X+I+vf+xCRJXCL5YjvC+F44VB9\nD1TVagR1PXubh0pNA73q7gwQ/pi9YBhOG6G1rtXGHD4t/0FL1Bb+wH/ut6FI\nZ6oEceylrA7hTzkjl77jiKSPVjcjr9Pfl4RCcaDVA6WleYUfiyeQGWKpHpoi\nxriM7BbzHfWpZoDBoM84SajJRF5YeoLsH38ghMMOkadh/kQXVBwfPM+GRzXk\nfX7v7CAcQ0/zoz13ajhlZ1PdL/9V4DMxohNbTF0Uf+iRXMRwDvcC/lcb7F08\nwqiERWFK9mmcPcxEeRP/1mp7/LEnnEsWUr4I/iwhLPhba3OtSaJLz32asJkU\netHDgad6y+ycwVuJgTUb0nEI1saQAqaJMTHysuGgeJBI4n6nHb5+6NV2FmW+\nYnNazEcKlH3woC4fcB5tSEgBDeNgYoNC3VsH2xN1IdLPUfPcZl86+9MoutIF\nX3Pp\r\n=AIde\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bd6e302a4.0","@material/rtl":"8.0.0-canary.bd6e302a4.0","@material/base":"8.0.0-canary.bd6e302a4.0","@material/list":"8.0.0-canary.bd6e302a4.0","@material/shape":"8.0.0-canary.bd6e302a4.0","@material/theme":"8.0.0-canary.bd6e302a4.0","@material/ripple":"8.0.0-canary.bd6e302a4.0","@material/animation":"8.0.0-canary.bd6e302a4.0","@material/elevation":"8.0.0-canary.bd6e302a4.0","@material/typography":"8.0.0-canary.bd6e302a4.0","@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0-canary.bd6e302a4.0_1604336791686_0.3274042584071133","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/drawer","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe1a556f2a40e2237d7d477bb2390e5116416cef","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.d6b5cd418.0.tgz","fileCount":48,"integrity":"sha512-xLOfW/CYJEKygfIvNrVrs4vuQA6NvdzNiU0So0nkMLTfuKuPrC03i86dkfIld8WEd7wq4Kn8pI1k+roXwm5mLg==","signatures":[{"sig":"MEQCIAWR4UOBWUZZUkQyo1UazXiRUZw8wo7YpAYvjmJyCnv+AiAujqildbj98z1XPaQDRce4jHw9IPA0PQ8254ECnBNUVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI+1CRA9TVsSAnZWagAAuPkP/Ay21n0M5M6qLfHFL9WW\narBt9ik6vU5JuuLx++i3UXgqIk+WHMd3V+D9dGdv+zAnJoTSJCpBSU1ZjzOU\ncAGZaIwgyEoJanqN3Cy5QxUC2ePxlJ/sQ35rh7ZzstYiVhFLfDoON4cEdBrL\n9uOEAGIPY+c/o3hmLwM94jDJBKXB4TsLs7qnHJNys2V1kilIGsl7KVDO6otB\n/jMgspBGpTGAfSWHK9ir2d+DcDjqTAUeJKnJuMjND2CRB0guBDmcQt5sRaKs\nqKfWQOXwm+3d27nfY3KCKuxPBX20IhQYLlxRWuPaWE4mExJvAECWKdIaiJv1\nn2mTPvV1HrrQtjkyPBr+WvfBmwUtaHhbupGzGoeEQDb+ZBNFEB/0GsIEj7VA\nQGqqAyKECQF+FJLCaUnmAccgQyZcLA2JS9zvevyrtRsI3CuxjcApFDHhJMdx\nTBnPhAyhhJ091bZPLXdwXXJKrni+7fCdfu+Kz8a+Vf+YO+8G2wI5sHu7HkIa\nsprUVdMd774I9KvCmG2h8Us9EHtG3b9EXlXcJVZh08P5HFebHbIKCrfzsw2i\nK72k4d0Z51mwh3TGnXUAXMVG+Cj0MUFCrfS9gzaA9v1ODnHqSIMaeXlUuGri\nXleAOTPgrszJUX1S4sYEzlOA+HT/uPOziSF7VEz/0llcBKKweuoqUUoKpM5j\n9dE6\r\n=ofEh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.d6b5cd418.0","@material/rtl":"9.0.0-canary.d6b5cd418.0","@material/base":"9.0.0-canary.d6b5cd418.0","@material/list":"9.0.0-canary.d6b5cd418.0","@material/shape":"9.0.0-canary.d6b5cd418.0","@material/theme":"9.0.0-canary.d6b5cd418.0","@material/ripple":"9.0.0-canary.d6b5cd418.0","@material/animation":"9.0.0-canary.d6b5cd418.0","@material/elevation":"9.0.0-canary.d6b5cd418.0","@material/typography":"9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.d6b5cd418.0_1604358068728_0.42488150342009634","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/drawer","version":"8.0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@8.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"654d459454a2ceb959d33c840e247203700d4a76","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-8.0.0.tgz","fileCount":47,"integrity":"sha512-vBeMgavv5aYgx1KQAFhlKr3W1+BGJoQQiNnPgDLtxBBkgfdaNxHo1DJz8cgYp1X6p3moRUqgzdKxAMj+pewL0g==","signatures":[{"sig":"MEQCIFr7JxJkKPIGcnI26gS/w0LhI4QHOnG1skV+qSN5XWKIAiAzEoNjq/2BaWgEvkOy4chSZDesFaEdxo1tj7u1hS3SfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":908660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI/NCRA9TVsSAnZWagAA44AP/3PXzOz1Otfmsm33IGvT\nf1yBOBKhPs6s2mAXcv8Payl1H0oK9MGFMt0TDJSDOlUUbzOGRHK/QfeU8vP6\n4AsaJLs/MIqCwhRrVvY8zdw+X2vfDMyh915fbZax9AD6gFl2U0AbXNoNc3+o\nV6s6WiXgwKwwfjA2Ot6XiTsRBlR86CAVZn1VrBeahNwisnf0em8Gq7kO92SO\nmpFilL9DVbz4UDLHpcpbqKyBEIusCSCQrol0I6xA6Y6igicW9uye+lnhqumb\natpU0+u0iKYwU9ChpIhUKRfJoERRNHDPqv1E6p66C4hhbXBHjHkGd1dXNkLq\n+y6L+PAQSE5xQN2t5Ho0LLkzUTKZftgut0908kDO8XQtkB0AOiAVybgurY0n\nHogk7LV7+ybgWvuuny2ng+UTsdw8/K9UnNf3tcbqunIDgXOLSG4WgEyzOt7P\n8WYWlUqmaRNJyMr7sV2lhxYc/YtELraG5E8Ecm13HGrVnCIhTEMoMMZAfizW\nbrnWayi9Nj5mYllp1kRZ0jc+QWMJsvHDmcxhvEQts2H1eT42ndGUpjgolhUh\nFDA+lF2VjJ/KmKQ7sGgPgLbpvmoeF0Rqqap4ohAlWbqZwl0eGSEh0PyBppRu\nvMLzHggA9xznF8OsY/yMMM8ZekmHCs5idG9ZrU/Hy/07XN07V8LXMU0X2zLt\nrcg1\r\n=gaoP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^8.0.0","@material/rtl":"^8.0.0","@material/base":"^8.0.0","@material/list":"^8.0.0","@material/shape":"^8.0.0","@material/theme":"^8.0.0","@material/ripple":"^8.0.0","@material/animation":"^8.0.0","@material/elevation":"^8.0.0","@material/typography":"^8.0.0","@material/feature-targeting":"^8.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_8.0.0_1604358093077_0.49100319460440445","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/drawer","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e71befc23c2208302c5da73485f6002b68174fa1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.fdf9a2634.0.tgz","fileCount":48,"integrity":"sha512-XWxB7pI4wTHb/xnwfyuifcuXn4MZybNCz+FRe8GfipC94/O3srdaCne/uNus6tXfG7HfKyAc+8P5fLbxXYAJVA==","signatures":[{"sig":"MEUCIBMQbJsseKIyWNJ/T3Q3Q1zPB69q1kMT47ppFSnFI4InAiEAyA2Sw2QiiQTHcRqvigC8tbrrt/zRtFxTSwtQxEqiOYw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":909263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeZQCRA9TVsSAnZWagAAeQYP/jdnZ1aNDun05y98eoiV\nGRcdDPnYzj7naTEpzkw/oti5GdK+RFQ6oeQhoqgi0fkmI89kAKad+KruIw6t\nutnms8jvBvjaG7uQpJcKf0/18p/VZzAE/4mMfW+IhyzadLake3pzBljy0v7r\ngCdp1g7YJXJ6cAfIS/IrU2DFfk/xKMW1u1KPIrSWDbdQChXG7mbYgETXvMjx\n+Xe9BNl2kpay8S1nlOjvH7yAohqvCpClaNjziPndF3zJ43K/um9I2dVCYrXl\n82GzA749YSV3XDvagTKhTyOpYGwuAl6xNzFEK2k8ISxz+dW+nF6gyksTAgc1\nRsJsVjKmLQbQJPBQVgo7p5+OBMa9sL/rW2TeY+Ac6zn4N0QH4PFlhtN2hunv\nbQjWBKsD87z1HqzMsCwEH3qs+VFaxIW8oNJmLcW3YIkOEhMhTFtu+8hUj9eL\nnoDwttx2kizEVpz4OXlNj4Z42SkawDcDBvqPJjWLuW+I/+tjtVIHAilwG1lZ\nXbnUa8t7ogjrTh9qyJ/vFbrrAkZL21zHu2hPhtCbyC7o7A7EtY+lcW2i5SuP\nQ86uc7AJiX0k1nF+rKYEcKbtgLG/0b120v6eC+dKUmYZVc8OzXUQArdTMyiD\nmojfaUUXUooGtwJxM0jfUERG0XEeijebs8+I1nnJnaP8WnujOQbx+jagpO3+\n/PPj\r\n=jMsQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fdf9a2634.0","@material/rtl":"9.0.0-canary.fdf9a2634.0","@material/base":"9.0.0-canary.fdf9a2634.0","@material/list":"9.0.0-canary.fdf9a2634.0","@material/shape":"9.0.0-canary.fdf9a2634.0","@material/theme":"9.0.0-canary.fdf9a2634.0","@material/ripple":"9.0.0-canary.fdf9a2634.0","@material/animation":"9.0.0-canary.fdf9a2634.0","@material/elevation":"9.0.0-canary.fdf9a2634.0","@material/typography":"9.0.0-canary.fdf9a2634.0","@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.fdf9a2634.0_1604445776038_0.511146233350487","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/drawer","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12b80245a7eca30850fc35944295acbace7adf54","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.4a86f30a0.0.tgz","fileCount":48,"integrity":"sha512-epHqMWmeQ+qqfEApU6jpSPSoJpkRGslCEwWLsVaZlDWkZhfuNxigQvPbgyvrKnBZ1IfMOU31nL+PKEfXiCI1fg==","signatures":[{"sig":"MEYCIQCiefi3UzIE0uNkYYOTo8gUnERRiPf6bM8EWdFsedn15wIhAPiENZL8h9GAiVhzP1JzTRauKlMVlCDKVB2sTqitjCaz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":910643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoefoCRA9TVsSAnZWagAAySgP/020yx7qTED/rsNSAwwx\nH/5RwA9fN2UK00mJFND8QK+geKRom7J276n9bk+TeNa5qDzvXp49XvfJ3BMj\nHbYu8EPl+olv09BnxfrQg1nY1v6y6P3Z3PdYW1cUvGcTvP5Z4e2CJGQIwEFU\nT3FSE6KJMA7BM58QjsvOH2VVeGLidz3DXeFqkHoqWE+5m21RJwnDxXm5h0Us\nHatHuIf53rBfHBboUeKeiWGLmlhX+NcOGAUwBk9OvrAqOhNL+HogVpEkz/Tv\nJsbGcPSpufkyN4oHVzjbCw2ShBk/m7G1Mg0P0JVfL4JpBIy6tW2ds7Y5DU60\n0Fym8+PYymS0sIMWYRObl9P18C74IoP9vYKRIIzb2Nrhm4+lJGmeCyz3zMMk\nL1+RsQn1BbxVc6BSe9pvSPeMkoCeeIZAesOIhGdziH28cQGILnBozoa8wQLS\nBdIK4YmUqGnSRaf+pCjZAkTbWM4bsuoITui8n2q0ZeKte3MrIL5Es2wtg0KC\nUAr8zdJTqTU1HaYatoJEf1HKUmemRc02Pc5Ty8ECIuiEtc4j8gnnzbre1dZs\ng05i1q8ZvQblmFVNaDfiSpXQ7xW4Xzjdxy0qGVnofQIwAAOPjXLzU8muaI6B\nxODNuT+9EADN3jMufwPjBqgkJklZmJrY9QBxjqgMEuZCSyPZoXzxlvqzdU1v\nThaL\r\n=6jw/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4a86f30a0.0","@material/rtl":"9.0.0-canary.4a86f30a0.0","@material/base":"9.0.0-canary.4a86f30a0.0","@material/list":"9.0.0-canary.4a86f30a0.0","@material/shape":"9.0.0-canary.4a86f30a0.0","@material/theme":"9.0.0-canary.4a86f30a0.0","@material/ripple":"9.0.0-canary.4a86f30a0.0","@material/animation":"9.0.0-canary.4a86f30a0.0","@material/elevation":"9.0.0-canary.4a86f30a0.0","@material/typography":"9.0.0-canary.4a86f30a0.0","@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.4a86f30a0.0_1604446184442_0.7013439497530478","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/drawer","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"662c71574892871f81f9c10ddbf281dcdc9b99cb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.fc8b045f1.0.tgz","fileCount":48,"integrity":"sha512-YO1PBoIHfT4KBodns2MTnlfcaGOLnenVTgRsu/ORnZWeuYIhMk3S7DMkBWGLLgMPmCKZtkJI3M7p5sqQsFwrOA==","signatures":[{"sig":"MEUCIHniLv5vBoKdVpXLfERzQW2hxwFGGZBZ75ssuCPzbWhlAiEAlEEISkPIhMnAUVurmsvtzJHght5MOJSEFu4M+Wkkl4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":910643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeoCCRA9TVsSAnZWagAAA1UP/3cfXpyzju/a8gneBXe5\nppL/dO1k9Q592bVt4OWD3s7eFI90O2KwOHMUYB6h0AFqMQElH+Rup5mPBQN6\nXeMIylY78xSoKP8/5lnp4wlfZqplQ5tp74x+D2KHs16WZ/lQ75/9NsDGhT4M\ngbDI/EmIK2pbanFb4kYWfClgHhlcKcTDTeIeGTV+Cr0gcmiji+aJsxZGEsP9\nXvxO4wgUWsfp6sm6vjH9aKX3Co2RWCMc2EX+J6P201lydFfkn8kYhOl5y0go\nfmFJdHofAg2KvQwByH9tB8jZAwc+xQ/QigJfeA1RhTFWbMx4/uTao03bJi4O\nIKS15324QrPasbwfbdjgyIePHZ61oxOhtUBi04/ZZdfA5im5KNO/lvIqIbVk\nb8oHUoFIqpm5tuTTV5JsqtGxA6GmVANZf1uVMOgiu5YdjuEY72bln3iS28GY\n1FTX5AeDQky5GLlJ9YCJGLaPDqCXrbw58QoykphTo2Q9kKRsHJ61ZpRdo5pp\nIOQF8OlCgIbNh9fIPOIe2nNuQA7ZqZjDHNYcS/x0HZwGx3tqSyVFeTbsUGz/\nv7yizvapC2UiDK5wHRpH1Kh9VstHk0CnvKHOPVs+w/cL8+16kXkMk4IBjji9\nJBrw2ijugoCjzJrGHox02Cz2jV1g/2uXrW39j3+N6+UXwD7TbU7sHczQG9sF\nlJg/\r\n=yLZW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fc8b045f1.0","@material/rtl":"9.0.0-canary.fc8b045f1.0","@material/base":"9.0.0-canary.fc8b045f1.0","@material/list":"9.0.0-canary.fc8b045f1.0","@material/shape":"9.0.0-canary.fc8b045f1.0","@material/theme":"9.0.0-canary.fc8b045f1.0","@material/ripple":"9.0.0-canary.fc8b045f1.0","@material/animation":"9.0.0-canary.fc8b045f1.0","@material/elevation":"9.0.0-canary.fc8b045f1.0","@material/typography":"9.0.0-canary.fc8b045f1.0","@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.fc8b045f1.0_1604446722031_0.6044466329217133","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/drawer","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fff29cbca6aedff19517dee78fe6f2f4aa670efe","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.a0b2db26b.0.tgz","fileCount":48,"integrity":"sha512-PzPtBH968BZsShqe5vdc6NNJE6jif1dCVMtOAZV79cFgRL40NqGXMPzCIP/c/2XfdcAXDsjNU7EyhiCMOC5Qlg==","signatures":[{"sig":"MEYCIQC05DOU2ZrGG4ZWCxKHBp7Bb44f+IDldc3Fd4fQHVFA9gIhAOX1Vo9YQp61bAAbTOzTIXZ5LrWX3Ql0XJCSaNslKbR4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":910643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofGKCRA9TVsSAnZWagAABIoP/jzT2u0+coTXrU2j62r/\nkpJukA+FkOULZstTx/p3wczjtRkLSoAC4B1VTpmF/+qBXkAcuEY4g0KWSK3t\nkI7vVctMsDvrccJL4jC5zRER2n+wyQwe/XwCttTLy0TstaTw8HEjuIxEqLu/\nNEKs6HTLBOGj6V+eVPBeKvyI2z52FLSRAyzt4WnDZhIvE30c6QpHL7if9DbG\nMDF7Aw745bS80pqaB7pfpwENYskqPERWKfbs8YPplOZReyhSBMVoH0bhm/k1\n+TB7qDIBIADFZrZsoPyfNb3VPRUWA9c4XDGWi97Vsiv5PuTFoBE768HbCoR+\nv1kVDt8f3/crP1aIqmcAvx9jbQm0NlWdFSXYTeFcdbIyC4AYxQEiTlBJH6wQ\npcJtGOUZiwlLOXaPFVBq0cZhI/AbJAa6XMVbWvgF5s3dTgTf2s/khDEgeTBV\nJKjNwDiqoNk3lUCLZ4QwlvfBP/gW0rJ6VBN5qxfGdlmIqFzIGmsjqgr2rEk4\nu1OdE4HKw1MREKiF0XhJLJij1IgO9gpTRopj3dfYr2Jf0e0wgFozAjG7hon1\nSxBi+0xXGjUD0ZJ+BHa6bUJU9zjDCII8unANiwbfLrDpnXcn1gDqdJ0XDeNq\n4xTi2XIJJxaKnIklxhD8CSiroOTVUT04892Ya9UfgJHIy2oV+DoQ+f6NHtqF\npyzA\r\n=MSNQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a0b2db26b.0","@material/rtl":"9.0.0-canary.a0b2db26b.0","@material/base":"9.0.0-canary.a0b2db26b.0","@material/list":"9.0.0-canary.a0b2db26b.0","@material/shape":"9.0.0-canary.a0b2db26b.0","@material/theme":"9.0.0-canary.a0b2db26b.0","@material/ripple":"9.0.0-canary.a0b2db26b.0","@material/animation":"9.0.0-canary.a0b2db26b.0","@material/elevation":"9.0.0-canary.a0b2db26b.0","@material/typography":"9.0.0-canary.a0b2db26b.0","@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.a0b2db26b.0_1604448649938_0.3655478079346741","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/drawer","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.419e03572.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b195f7716c3988cd44d3d61318379335744b879","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.419e03572.0.tgz","fileCount":48,"integrity":"sha512-bivuH3zA01Sxhy00hx4aceE3jxWUFxuxg15cvNLtGzMf1Yxl/S4Xh4i0EyKu8ERSGDymjet5RCYuIUyl0+PmOw==","signatures":[{"sig":"MEUCIQCseAPTFOcddjz77RWvqCIFUE73BuXNCi2MiyJvUTVweQIgSY6LTPl53EKbyqbXfVApglOP0Rf7BHAQYQb541GjK18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":910643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogUsCRA9TVsSAnZWagAAZLUP/j5xPd71ceA53YtBRHcx\nQHvnRifdSBwrJsdGwVDt40nafCCVQf9lInkPa1tsO2xIzPWum7PW7HbiwBL5\nQncNC4QJiFPjGETNUX5tQUl4lXh4FVAvoRhPByfZMDpKZB18tocS/M7isZBP\nWgdo37Jmu3ANtm3xmElY6gBqSqM3/1Ru85XGdF+CWnL+th8+7u456ZDP4Dct\nO8u6HOv5C/im7jOcLrC7i8tfO/e7j+VPBnUCqcLMudWKxc5S9LhVgeHMhTms\nli6ozHvSggDx+skYN0MzaxPxhvKnTH+3Y9Cmc2Pf6rZd3fo5XMoG3Lj3UeX2\nRdwD2vmhCYo3b8+y61330el2J1W2uuKMVxBGJ2FJUGrT5A3Mf/e4Dm93OjYj\nVpafqZ04IhMWdwMRQf7TQshiAE8RJhA5hveZUa4YK/ygOL1qiv/jxAEw1MSK\n8jRCT9XsE79+yfERwdrigIlaKeQ9TnAYn3Lp8Gk9+BPz9oif4cUfRu7Jj1uK\nv++oPXMw+/nP6tUlRigE2S2pJ5N5A0e1Kbpd+1TREz7U+XyX6DWy+E85UDLi\nQFQwc4lItQZOxvBrtxER5a3TcDXukTiPRQa3jeHtKAZ/X40wIhfD2pxWke8g\nCp5xmS8UE5CEiW/jr3Qp1ya9/e/vPjq25eOk6fznf45od8MVp+FNHXb7IK32\nSwqJ\r\n=yfCR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.419e03572.0","@material/rtl":"9.0.0-canary.419e03572.0","@material/base":"9.0.0-canary.419e03572.0","@material/list":"9.0.0-canary.419e03572.0","@material/shape":"9.0.0-canary.419e03572.0","@material/theme":"9.0.0-canary.419e03572.0","@material/ripple":"9.0.0-canary.419e03572.0","@material/animation":"9.0.0-canary.419e03572.0","@material/elevation":"9.0.0-canary.419e03572.0","@material/typography":"9.0.0-canary.419e03572.0","@material/feature-targeting":"9.0.0-canary.419e03572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.419e03572.0_1604453675818_0.11117762264976738","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/drawer","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.a432ad542.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d77df97063046da349a8ae947ddb7724c2530f3a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.a432ad542.0.tgz","fileCount":48,"integrity":"sha512-UWhoNkIx7YODHHWfP28BykZqlPl61hWBDNlI/FCpAjq3cNIXCyhXDEbZfkG/X/RU9vbrTlLvMSEgor2YVojrKw==","signatures":[{"sig":"MEYCIQCah5na04ARUnRq2iBaf7BA0viAoRfkmrMcLSBwN2ZVygIhAMXV36KXKbKPkSodjMIMffIBUIfD9QHJSL/5hImpEB8y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":910643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKspCRA9TVsSAnZWagAAmnIP/0/QxZOdcbrRtbuBR3wB\nlEgQI8pEgMt26d5SBGYNsDdgZQMlupDdKv5HexFSpHsuYNKK97UAChO/97J4\nfj8JuDlP6+4Y25dELFzxMxQzoahrWZBms1kFRMFB0Yf4U86Zir+R25L9J5fT\nHT+Kuk8Cbqm0AH5Q/pv0r6wB/Fqth5IcB0f1hl/Bq1lDxt4AsGcihcDxpEbw\nqDk+WPWQ33dh2yMX5IFMqPj/kbu24HFZD8tA6/sMSZWtDQtmeBO8UtnjkH0L\nPoeovAjOwKSvKRROtzo+/TO9UvDjbMZozd3diANHfknOFzt55PU8b7hdHFns\nvoeNJQaw+THO29sNaQX0YwiaL1InOrsNsdFewuZaXyBZv8OhP18GRgysNSh/\nVg2KgCWAsuPv4VI8H0xRv0eqCvTWABS0DrkuOvkUX0BJRi9JA6VjqTxsG09i\nXUCYNj0Tj1a9v9rxGZBLjMxQXNu4KcUFNTwYW5svsQVoS8B04YXa3LZF3rHE\nZxAGfpEy8muGXgT/bV+w44B2Q1x7nwPdN4XF4FyC37A5/7FmFbxuVIZquzPW\nO4HY8QR2t/GssVspeFBoEMPuz0MjPF8j4TlJdxc4rsjYoRqqMMq1SQm//hVx\n9vCupYpG49qZP9iJ7fAwdfjlz3pgnkztTMoec2gXOS0e9sXef3aYXuK5wGT5\n63wK\r\n=8+MA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a432ad542.0","@material/rtl":"9.0.0-canary.a432ad542.0","@material/base":"9.0.0-canary.a432ad542.0","@material/list":"9.0.0-canary.a432ad542.0","@material/shape":"9.0.0-canary.a432ad542.0","@material/theme":"9.0.0-canary.a432ad542.0","@material/ripple":"9.0.0-canary.a432ad542.0","@material/animation":"9.0.0-canary.a432ad542.0","@material/elevation":"9.0.0-canary.a432ad542.0","@material/typography":"9.0.0-canary.a432ad542.0","@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.a432ad542.0_1604627241209_0.03349858631472791","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/drawer","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91be34c189057c479b30da50fc6467827ea345d7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":48,"integrity":"sha512-RbxE2/Y3IZikn8goKDPYXJEED18mMFUWZ4+eRpRkZyih5Bm7d7QGjdTeDb16e0dgCjvMlY+v3Ikl54mbazvOmQ==","signatures":[{"sig":"MEUCICT+WzuEoc9VGi5PClA9sqA21BfxoDs+P//KvdiCQwLHAiEAmRgVUc3qsZUOHYvoRAWSFCAJn5jxw+gsfN6i/NLztlQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK++CRA9TVsSAnZWagAAzMEP/1e9nCTb+8Kq8VLMR/Ct\n5DptcH61iPspw2GFg1wXh/SPnjKqMC2aY29OzuGnVm3SkAXSeUcVtBr12LF5\nkPvBGfNODjOB9A7O1lLtpSipHwp5+VMYOcBG6c1PrP71g8cKkYryiXYxmqcT\nXRL4PFz6GSZ/wE3eNJ2B8gsNw14OqsBFkr/c82dPpXw+zAfdW3zU/NScEu5b\nrpJEmoDP4ljRav4Js2XaYud2PsW+R02onJHnxCii5YlG+0FWUda43jicMcGb\nDBmDOR3xk7US67DJL9tTKg/1QOs20ObURnr8k5bJbrLpgI4ErDrCF2GLHhqf\n8hsMfmqC5DIzrPzKfnHeQOhY/nwrmovrSd/c6YJLnK5HXy2itPcw+g6IMvkv\nsN7kn9JYVQ93IOAZWpWp2FTRY+sX4E30+hR1kk0dBSF5jy7tahi0w1YCcOzo\n43EVNTb7N4+m48zH4OBpyNIlySrXYm6AN3ePCTm6wcUgAEd74Pq9S03134G0\nVDSdNvog+uNmv+5hdLvfMCa+7bwqrFrmIYAESui5BUpq5k5TQfO6UD6Ux+8i\np80PQIafgUOsHc09lWX/7STUSw5zZgO01bQ8eSXihHHvpBjMlQIFIJpQ7ZGM\n/5ZSLbPAUzeFYBqJAns1qxNxfmv+bfYGXOMUGihyyf9wbxRfpLkTfFvcCdhh\nvurG\r\n=J3Tz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.e2e8aef1e.0","@material/rtl":"9.0.0-canary.e2e8aef1e.0","@material/base":"9.0.0-canary.e2e8aef1e.0","@material/list":"9.0.0-canary.e2e8aef1e.0","@material/shape":"9.0.0-canary.e2e8aef1e.0","@material/theme":"9.0.0-canary.e2e8aef1e.0","@material/ripple":"9.0.0-canary.e2e8aef1e.0","@material/animation":"9.0.0-canary.e2e8aef1e.0","@material/elevation":"9.0.0-canary.e2e8aef1e.0","@material/typography":"9.0.0-canary.e2e8aef1e.0","@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.e2e8aef1e.0_1604628414015_0.7409103935996177","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/drawer","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7aa673046b31bee991865eea9696e0ada60286b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.ec6b68b34.0.tgz","fileCount":48,"integrity":"sha512-l50StF0dYI63Ge/UOCLXZ3r6f4T4CQVHgIxTy7zS09S0zbq0vlG1/p6N8+8ay9uhIzC1EHTHlni5A1G3Q7v41g==","signatures":[{"sig":"MEYCIQCNBbApYpJxaX/zDNkmbfY40LB3PZihYy2HBFC0J6DsGAIhAPtRb4hU4e5L/zvdRZ5hkFomIo7qdUkbt+6ZT1PZ2K85","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZy8CRA9TVsSAnZWagAAKdkP/3U8ShldKwWjPF3A13Eu\nStCjIzyfnyCkVK4crQwAfKR27gQzAThMU/9eSmBQjXnMWugKRFifWWtQFyrb\nIfwO9Vl5LE8+JQ1bYSYS2YmCPAGGsM3osloLoFBY3RdaTgVRgS+/AliQOHV7\nu0mzDt6Z5ANvuJNGLsqPQ+mk+JWAWg2xLHja6Yh3R5xJnVp6vgRt3aFf7k9k\nKQCbmdT8D3nCLXAixT+cRoAncw6H7BVtKhF5d4D8eD95c4r+aYlyGCmuUU3O\ngSq7ymZ3BdoUzqPpyrewbW18BWT3cK5x+CmIBdFxjkQaFyvqx/tiMMmFLAck\nJz8qvkonyirXw3fwcnD8tFklx7smisGDAU5o1aW+FBBKxAiiDVgtBcKV0FNK\nlciwfBgqt9JdU/vXxsCcE/qm6yTmxYPCy7ftswFE6wGqE1QcuAJlzlstzuue\nFxgLjU5Vx+vs8aHPPNosAyTJw6DrORjbocGsBpiiI6oUyQvoF9IThtGZy4BZ\n122sZhNLsB1yTIEz75uNaX0QaEkaCqMwZTgQJLJ1hqEZmtCRUNjvbgtH6Ezl\ncj2/uB7mh+rl8bf5s4jxp821O6VjgP13Z8ymT5uHt1pIGV9aQe+3NkxoB1f2\nHVLUChpFRs0c2uxhci66VX4hFc/pGsdKzbW/8gjhodBakFVhMrlltRmImlTf\nbzc2\r\n=qOYb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ec6b68b34.0","@material/rtl":"9.0.0-canary.ec6b68b34.0","@material/base":"9.0.0-canary.ec6b68b34.0","@material/list":"9.0.0-canary.ec6b68b34.0","@material/shape":"9.0.0-canary.ec6b68b34.0","@material/theme":"9.0.0-canary.ec6b68b34.0","@material/ripple":"9.0.0-canary.ec6b68b34.0","@material/animation":"9.0.0-canary.ec6b68b34.0","@material/elevation":"9.0.0-canary.ec6b68b34.0","@material/typography":"9.0.0-canary.ec6b68b34.0","@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.ec6b68b34.0_1604689084033_0.8699900111076397","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/drawer","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.b39094d14.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94e239bbcfc6c487c2826dff00a52268814a0b8b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.b39094d14.0.tgz","fileCount":48,"integrity":"sha512-EzjIucrLoWZYtxqi5MGbiJI37OVjbvCGCcCKmNzU0wpH2mC5iaa5EcngryqfI/XS91j1KSlspldG3oMbOTxlOw==","signatures":[{"sig":"MEYCIQDitpcDqPZ30VJBt9OaowRvvptrQ1vqaVu8F8ewgtYELwIhAPux9G8ilmfpay94E2DOuYmqg9S7HNFXUuRM3htOg13x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb1sCRA9TVsSAnZWagAAMO4P/0kKAjtp2DvKsRPtCryj\ndbCgBpEG6uit1mBAIj5cXyP7okCIb76LgrXiOFtdqhwXcRnZyv9FY4zegHpt\nww3mZ9h5pyuZUcXvXIwdCsDBpKytjQDK58u3jbVivsLh3AXRatsM1/jmOJ7W\nBIvsaIUSZJzwHzE5xiNwwCM2Oe+EWRc4g+hMIJ1Ac5oiJdfNKCiUInA/0RoO\npxawtWQ40+7TzBUwpfNoOrGIrhLgj31LcTJ2NMRitgX3IkuDfQE0MJ51zMqV\n1y2yAvCdLmfDljr5d8Mt/7bIGjAYMTpxFlqLeIhCT8T6PTxgUb3LGv98tPEq\nq2qlRUlOym/3VfLi8uf7ehueyggc7uYDqKYhII6xnp7WVvzH/TvkvlamCg6C\nQ6oeBX+Zk6aee9B7EgUffSJ2gZpVcX+GQF1Vu7mLYMBEc8Ur6sG5eZaIi8yP\nnw9SHRArN66VuFqnKFqi/Zmn0Ojw4IOY7VUKARubDfmbo4ArQQ2z/I9V4mDy\nPXWYJoYH4Olvuw7oPKv+6zhtGGnr9DrDm2/+PbcF3ojOiXSGcLqT/Seomba8\nLqZQmF0d9Iad/0kTljIfUP00lwnO8xTi3Z2UNLIdrbNG+8HopozzpluL7AS5\nc5Q6CrLRvOHEHIXwcdNfiw60Lho7kSrGaMp1dkycA/ow/1QHi0JXOJHpwNus\nKg1F\r\n=T6+h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b39094d14.0","@material/rtl":"9.0.0-canary.b39094d14.0","@material/base":"9.0.0-canary.b39094d14.0","@material/list":"9.0.0-canary.b39094d14.0","@material/shape":"9.0.0-canary.b39094d14.0","@material/theme":"9.0.0-canary.b39094d14.0","@material/ripple":"9.0.0-canary.b39094d14.0","@material/animation":"9.0.0-canary.b39094d14.0","@material/elevation":"9.0.0-canary.b39094d14.0","@material/typography":"9.0.0-canary.b39094d14.0","@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.b39094d14.0_1604697451789_0.1832671050230934","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/drawer","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.8648b8258.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8573ac659b3e00ebef4aab4eb70b8c3b45434a9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.8648b8258.0.tgz","fileCount":48,"integrity":"sha512-ea9ePPFmzKgB7e/Z5y21ivdWvxqq1ypqXia4wUpSeulXtokXRpvVfHiTp3IS06KzWDIy4bBAeIidIPY62M5CyQ==","signatures":[{"sig":"MEUCIBsTjKW9IpR4fecRvt8UfYuWKyWFE64rtHO0iAZa91WfAiEAvDNoDPTCh1Q437JtWFMedJe6R+y8NwE97BN7kRohbQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRJ/CRA9TVsSAnZWagAAgSwP/R3FSGjA8aJ78fH0GsBJ\nOzdI2X+tbVpsq98YMzSi8+AcEJGhB4VQNTpWRT7+edKdqgxftOOHgL/pj6MG\ndH6gWTrDcuE3xX1DAZ2mAslfCbYpwe8GngglRZsTqRKLeMQwQiZq0MpIMwpw\nJ4+VbBgoP9y7vC0Id/cGwKmpgsJu0BsXrsVVA0WLR70dA2x5whwWsE+iH7+1\nDQAkx6W6fSzJ5Doe41dV9pkBX8VvNC5ScaKsUcZUffi/x1oMYnt90IZjbGdI\nCzHPWm5KoryAARhHszuG8wX4Ss4X++pPfrslPs2SxgoylPhbms/TRyjYbDG3\nTQU4/GAyCY5WIrL45LMOKy4GzU3f6NMchK8a3CQgxGOTtHuR4x6oN/KCVvmU\nSz48NaHC9Fqq2vc/WUbJ8SStcOdcFKR7847umeq899tKSXaP01ga7Ql+LHlZ\neXfMBS0thoFdTtkSqxojPPnFrgCM2ECio8aVj8CaG1vGbd+1dj6nCIBm8zea\nAi8gF8m41p+Jn8+FLVj6VmarxvV2NEWRWNOvZ67tB6ylLNpNDXRscw43fCzD\n0840OpZhfzB3e0DqM8OMLTU/Gi027VgzGnzeQWl/gHXyEaVTk0InrJhyG/Rc\nTa11raJ4SzmE26hp+0/BxCf5n04ZeoZRI1L0i9TIOG20VxxE+vv6Lomlul5M\nyy9C\r\n=HC8o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.8648b8258.0","@material/rtl":"9.0.0-canary.8648b8258.0","@material/base":"9.0.0-canary.8648b8258.0","@material/list":"9.0.0-canary.8648b8258.0","@material/shape":"9.0.0-canary.8648b8258.0","@material/theme":"9.0.0-canary.8648b8258.0","@material/ripple":"9.0.0-canary.8648b8258.0","@material/animation":"9.0.0-canary.8648b8258.0","@material/elevation":"9.0.0-canary.8648b8258.0","@material/typography":"9.0.0-canary.8648b8258.0","@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.8648b8258.0_1605177983435_0.7916334334248454","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/drawer","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.240c5f74f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d1f0ae7517c4f9bdeac89b4bca67fdc14450a2d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.240c5f74f.0.tgz","fileCount":48,"integrity":"sha512-B8gTlb5EH/3GN/IqOpLqdBLrgFl7BbD1JjMR5nl6LP/vMa0vBMRaGN/ldBbw8BcdqI65x4n5l/UAWmr59DNKXQ==","signatures":[{"sig":"MEQCIE8mTsikmM+f+o3fTE3dROySYxC5n3p9BY9lCQDLALqsAiBnmTTYCAJd/r7gDaeoowpyqQfFNbnEG/Z6Tadw7Dc2xA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZl7CRA9TVsSAnZWagAA+b8P/3Q50QY+Mj6TwTyWt0z1\nIYQSMzPfIarMRDk07wN2sSeSVbQjY3OO38bs98FV37XUYj6j5i3aCs+4wpqB\nGJfW1z/wzkUuTusPSslvlUD2qHQpEqGRnps6UMyhcrfPnBjuodrRVpsKqElf\nN4khLe30GOVDo9mRdOLyIKiVEI7ZeGXyc9f07MnfZHUze+2fnxDpXYZmpDAV\ndohfA0VLJ9brKmpMJHTB5/uuQL7mk066pEOIILXKIb3UiUcfRExMeJ6nzhHw\nPTQbsEl6ozd+txKjF+DXp3QmX/k7degTC0PGhfwLzBRc/cKAq3STloXvrxRh\nz6jsHJJcX1n1lciHldoaCGhfFezbEjSBInuW7mL7Yc9pzl+9s1paWSFDzP3A\ncghibDLdx1f5TFRKFPimUnILyygzTbt3d2od47peduzcEJyg0/rQqTy2pF2m\nNRPU2qt2JNRFB0H6q1nls3rptBiUuguZiPWw4rf5YC3pdNbCLsvDSjTpnadW\nkLnZHKMshr9EDtb4VVaEW30OwRinb5FUd7ax7fl3l10G3hpn8q7lUFMUiQ/T\noER4vs4crIvs4Cr+MSSomuZt/xQcLZTn4pzf08P5BTs3Sw1thgbfG/oiKrbR\nHD2qZWaCsu5KYIoOkHlDjy1HRX/l2GEFxceJ2XqJRbEnPlGbcRRiF0W6mIeL\nBW0O\r\n=Dheg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.240c5f74f.0","@material/rtl":"9.0.0-canary.240c5f74f.0","@material/base":"9.0.0-canary.240c5f74f.0","@material/list":"9.0.0-canary.240c5f74f.0","@material/shape":"9.0.0-canary.240c5f74f.0","@material/theme":"9.0.0-canary.240c5f74f.0","@material/ripple":"9.0.0-canary.240c5f74f.0","@material/animation":"9.0.0-canary.240c5f74f.0","@material/elevation":"9.0.0-canary.240c5f74f.0","@material/typography":"9.0.0-canary.240c5f74f.0","@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.240c5f74f.0_1605212538535_0.12291571041933724","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/drawer","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cc77536b9c410a0bf58d9ffce1533ac1cb007d3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":48,"integrity":"sha512-c+JWfFIiTpPKy/j+Q+NSaKGw5iUa9sdS83ixl2dEU6so9Xg/BE7eFbQzFt9dau+O3LHZW4SSz96BG/IGtUpMGw==","signatures":[{"sig":"MEYCIQDo7ytafFpucyE8yfc0Xq+JMWEV6YWJV+4MsWjuB406pQIhAPkudFffn2jZplgsVa5i/+/JD+HCCrwNEp6RTN2fHZX6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsso1CRA9TVsSAnZWagAAiVQQAIX7Q38rBvqsuDAp1GX0\na0jevOdV7gPEjnIsbd2uu85Vp/shECspAm4nXNGdAubvGMo6r3KGaks0BB5K\n0u/GROQsOnm3AtNHli7D3gYLVSqa003yizqCuk2ejv/WLKdRSjzjF04oXPuA\nxpZMeZoW8hQ5ihy/koPLYm9qXGpeXhNk90F/s1r3x53Iv3pwIeIROOsI+G0r\nFemksPTsTOGaveo+gO9eOrV2zwEHo5xlsLfduGyZjg/FFciKOEXrzj2ZjaqQ\nY76LYylWlrIrVetsvhV4UBDhQyiBf5Owv5lWrM0ebkgKMbOko7KDkBIVXeTA\ns1aK30bqIAHzxr9keCyWJ9B/B67g0LMlPT78fMrUpsehgF/nyzpiM8xFhZPW\ni1jfxhpWJhkaKdmMTHqjG0L1vDL91yx4qhdWePxw+D/b/85zfsod2oLvyzMh\n+h3f7Y+WUGSEpLx8smGnUiXg235wEe8/SLilO+mDp9Q4iNPdQWAKD5YuS+Il\nVq6aeVGOPrzHvaiys1OuiArloxOp3/mS7DPsNy6B/Iv7W4ehbRHqI+pJdjvU\nlUUkLbsvNp7zbmQ0PJ5iuB/u9NWBUVITS8rzFI46R7sOfJsd/QAavY1z0hAh\nKwWYGvbBBlMyFRPsfPWVadhEoU5dl3TFMXYY0on/06mmOBPPT2WzS3jAvHru\nXdgl\r\n=GBJM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6cf6ba4f4.0","@material/rtl":"9.0.0-canary.6cf6ba4f4.0","@material/base":"9.0.0-canary.6cf6ba4f4.0","@material/list":"9.0.0-canary.6cf6ba4f4.0","@material/shape":"9.0.0-canary.6cf6ba4f4.0","@material/theme":"9.0.0-canary.6cf6ba4f4.0","@material/ripple":"9.0.0-canary.6cf6ba4f4.0","@material/animation":"9.0.0-canary.6cf6ba4f4.0","@material/elevation":"9.0.0-canary.6cf6ba4f4.0","@material/typography":"9.0.0-canary.6cf6ba4f4.0","@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.6cf6ba4f4.0_1605552692658_0.6738740578797768","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/drawer","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.07f3e01b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e46119c4a49271cc146276d8073a85a6eb994b70","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.07f3e01b7.0.tgz","fileCount":48,"integrity":"sha512-BsKa7IKu1MSgUYgisHs1RjKHtSM/pNhLv8rU71MPMv+0y2PGkOBv0YBGheMSVAhK938FfbRTy8vwSiUKHxfHMg==","signatures":[{"sig":"MEYCIQCp18T1TEXYI6EjAaW11xX4+KnSxpVeo5DAtAIjvpETZAIhAIdRwiXEc4hZr75Q004UbW/ZenXk6IcAVZGsERkMnFPZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvNnCRA9TVsSAnZWagAAvYMQAJGF6ecDDAOAPTPeSDRe\nUWwDaTMghIOVUpzofWDqsoSmNy8+fB23qOSWeNWsQrz0w4d/qPGRr5XWW74I\nH1LY2wMEgnjhl7VnsFgEBWBEpPViJ6fKEy4kEHwB5pnOcqqGLiiDME/cAPVq\n1RKEY86tpOtJsOQy1RwvFztM/i1dWrfsmveBtzUtmBg58tMsCB3BFw8C3jKl\nGGVc02u2Ai6Gg273kAUGMa7eHWjAs1GqL/1xBTdyhX99kEjnpVQB47FSO7LC\n6/Fgi350Tv6G29CJchwGyCruLZKI/cBMJYHFf3s9rKDWgMafHDVl85prLufy\nnKwh5RpArVch7svMr73kP5EB1yVThW7BhcuLbnWGccljw7TDLV6LmSd/r3TO\nbDuQbZdxSXGxXDhZYcDaboG8DNiL9EMSyGz0BpER74P5Ur/oItvP6xLVP8aY\nv7zlnt8POScWjcSYJaFA1h+c+wo8qoP1PuUlS5Dsb040w1SoFlDrWy/WzB/v\n4rmbqVuf3DeHpQiKjg1dOrIJwKL7ZTtg8eqv8OhevNPIcZtPYLGQW33CFzIr\nRNe+niGsPCHQkKMd7gnm54GWkIYYYp/rWDgStFsaNsta4CDBEBBLjGmOeaEX\nP0MujeP+lPjOf9ud1qQmCoiD5gzIZY1OnllBKPdBzpZoLLcuwYaLi2i9MeMa\nw5LY\r\n=n/cF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.07f3e01b7.0","@material/rtl":"9.0.0-canary.07f3e01b7.0","@material/base":"9.0.0-canary.07f3e01b7.0","@material/list":"9.0.0-canary.07f3e01b7.0","@material/shape":"9.0.0-canary.07f3e01b7.0","@material/theme":"9.0.0-canary.07f3e01b7.0","@material/ripple":"9.0.0-canary.07f3e01b7.0","@material/animation":"9.0.0-canary.07f3e01b7.0","@material/elevation":"9.0.0-canary.07f3e01b7.0","@material/typography":"9.0.0-canary.07f3e01b7.0","@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.07f3e01b7.0_1605563239284_0.4366060071989164","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/drawer","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.23491cf85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d29f7f44a0ea796081f1884de2f04ca42d91ea2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.23491cf85.0.tgz","fileCount":48,"integrity":"sha512-vc6UW8TXMwynkMwHeXGR5JieOuX8AE2t5h9pa1/hBpLAxgd+kcl/vhr9xHgiDvZy9ukg3ZjVcZGDFwhZ3/nS/A==","signatures":[{"sig":"MEYCIQDbMP8whuvFACX0CK23gJ0EgZGXR0yUMiQZyZkR4uNKEAIhAIfjiZovS4dDllDFknF2GMIz6hdpe7945nKvB1iQaeko","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":912468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxbmCRA9TVsSAnZWagAAQcsP/iTD9t2mUeFHtx5h4CHC\n2Pdtlb2tDZLi7iVzFQwaw3rJ5A2Qp3iSyCvl0G3BitVQPfFXdvnkekwP04u9\nA40TtZiii2xrA9vzs8dpa2N6yUX2PpkBXCaZxzotjpvGRosxQ7N5DkhfCDfC\nCjCKYVJ39a7hKHne6xj16ijrs8x/KL4hnWXAvN7D4NaMgAij7Da1FH/Uu9t5\nJfHnSkb+7hadq//BnLvZ+Qtf7ynZrlj7lVu9HhfZ+2C4jyEeYN7zAoKR43rr\nf/qAtVimirdkbmCy5YZ7kyVvEVeVy1qfROqhACJ5c1roE4QBLi6atK/NPU8u\n39947Bmeg0rUMOu5MWXoyRiGzI1jECNiTJz+JcY35oPcpuPwN/4FL6V1jtws\nlkCWQMxPdNECmf8iPlmh2b5KQcVsdgFnSlrAgj5962LVGMEjaAp1DMvUYE7Q\nElOOmv2Tz9rdab/ERTB6Z4M9gWA9X/5FeITeAXdIYnc6XlKFLXYyjnLkLqOA\naYfZq/lbv57dgJGKfz7qNwCtSj1sthluf/5o+CkdGFbhB8WmKANee2NwDzXF\n4Ug7JMoYZcOSklIakvriSPHU3uqYucN1ib3WBE0TDwV0+KMcz1Ql97WDkIjp\n0I8CW6BTmwPghBcit8pyiahEPFpqFKN9UxFxPSmp5tnVICcy0cD/QyHdbYr7\nNen6\r\n=V9JI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.23491cf85.0","@material/rtl":"9.0.0-canary.23491cf85.0","@material/base":"9.0.0-canary.23491cf85.0","@material/list":"9.0.0-canary.23491cf85.0","@material/shape":"9.0.0-canary.23491cf85.0","@material/theme":"9.0.0-canary.23491cf85.0","@material/ripple":"9.0.0-canary.23491cf85.0","@material/animation":"9.0.0-canary.23491cf85.0","@material/elevation":"9.0.0-canary.23491cf85.0","@material/typography":"9.0.0-canary.23491cf85.0","@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.23491cf85.0_1605572325832_0.6436514309408243","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/drawer","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.b659d4fc3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6ae418e8d0ca2ff2c53220acebaf857ced55e9f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.b659d4fc3.0.tgz","fileCount":48,"integrity":"sha512-yI5o1m1B80ezNiquty0/mX4Q8vL6RiJhN4T1l9vcBtko20nFTYq7JLKVKm9mQfHz3tDaW6bcKy63aa/a72rkDA==","signatures":[{"sig":"MEYCIQCymlR4smFg8TQJTRL0CISd+paIFes2puPFpmPBGanutAIhAPJtEAyH3N4ZY9rAmnay7GAUP3amykzi/tRLEdOH1shw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxi6CRA9TVsSAnZWagAALhEP/2PSLYjMyn+KLU4/HQtn\nQL8LQ5O3rgKb10fID3tmSW74+upC/u7ixc3rG6wW4SbwyF1ZJQiQPbfAj1c4\nZZN510OlaP36rAB9pgYtW9LsJFJ5X6JfwZuKlJlsi8q2xau86loXp3oeTfRo\nKoH31fBjc4SOKykumElfsllnRs5xYyQ8lnZ4P9ffZ4qUAuZS/3Ne1BhW3gye\nS2WHbC7Xxx0C9KgdhHJRZGpJZ74/21otKuM6SlRsqLKvAuXBM2gdlgLM5xxg\nn/SnbHSh8KLug2Ie0M5eTCE4ER8nsR2pG1jsdtsUk5lrwRxZRLHxxoL1zzQV\nTlUojFyaLhuYHFNAAEmonzNRrcbBHeclOoOLKliWI2ujnTQi/mLOMHAKL5Kk\nQ3fN72VgMCJW8SPW+pvMtSYAfsrw+UwjMEEFsEjyfTlCrjXGjX6dUhhH7Yz+\ncWOVZx++6bp731mi+uxtTrfy07+KkA9QeQrFYe6E5Oe6dt9P4SYRY6EVG2zl\nDiyNTgzbjM+/lB4CiQoTGRaWH6wKj4dGqOtt6wcfXc/Pspeu87ZZn73vEvks\numSa2AUZLkDbLvUNdtbQMGFGAXOjuXqgg3tKvj0imrlAIV5uMq0thVq/L3//\ndwlR17OSlg+uAPGLLHp9Zr98eYCpIFzAXMELVRegaAdc0fEbKLIhXZo6CZA3\nHfQM\r\n=juxx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b659d4fc3.0","@material/rtl":"9.0.0-canary.b659d4fc3.0","@material/base":"9.0.0-canary.b659d4fc3.0","@material/list":"9.0.0-canary.b659d4fc3.0","@material/shape":"9.0.0-canary.b659d4fc3.0","@material/theme":"9.0.0-canary.b659d4fc3.0","@material/ripple":"9.0.0-canary.b659d4fc3.0","@material/animation":"9.0.0-canary.b659d4fc3.0","@material/elevation":"9.0.0-canary.b659d4fc3.0","@material/typography":"9.0.0-canary.b659d4fc3.0","@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.b659d4fc3.0_1605572794153_0.9805007590732564","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/drawer","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.d8a3aed67.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c56bfe2872ff0ec7218db6ef0b5f8104bdb0f4f2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.d8a3aed67.0.tgz","fileCount":48,"integrity":"sha512-/1nxZFGD5PDjOUfsPLyEdsnJ9yci/pQDK0R16r4vtYa1vcgffV+onA7Wy7ZAuP5I+4t8oUoLVpNcxqVTWU7M9A==","signatures":[{"sig":"MEUCIAbMBggSYoLMOdO75PHmjTjs5M+VWlpDxXFcPnjvtQM6AiEA0L6MC/7ON4LcLl0lYXsxZXVSEf2Ryfoxi/uy9OhPNYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+xBCRA9TVsSAnZWagAAuHMP/3lDJcEMlxJBEw1DEylS\nxaB41R+vYL8JKlUw2LynUkT6sEE0MBjW/EAwdPoDmsut3zjVZQSOmu8dwUUH\nkqTKKNt6gMPqmkyFqJC02dXcFV0mhb2g7DpCbpmJ/0JuSXA6nq7ERbDMB54r\nTJq+5MHaSu4yFEnz6s/VlPef5BFbsViWpoG7KO9RoKqLa+2nFILuHGcXmyTS\nDwegKcxquGVzKJWVGMMXLtlOBxAGRYBBQ5T8/65jlinVgvMyRqs/31CeXFTR\nADH0Y5+8k+uwPoygZU2q0hQF54rnf8jE+xzQxsFvzsqlPziPAocVbvJwUX7W\nG5xsltB0m/6QMNlkh+0+jOI0tXMg5PdOeA5YYIx37Q99NrpQd5Wn4/enxYLF\ndnTyjayxgEFVovBOPihKZQiLZM7U5DVTEoXrpd5xkM2STmqVUQufim/B8X/3\n44OvB2MuniqGpLMhMITtFhWlecWerRIwPfcORsfvJwSUOBDbF5OFvElhYSp2\nFIqtYg4+R7v9geTdcyoNZ4sdrafPUvz8wTLUB/tLKWRi4pB6/805hz/q3Tkb\nmomqyJpeHbk5j1hG9caSex4aRFGIodf7QVENCmAVRTVfTR5qyk4PgDfW20da\nLC+65/9yw6+HgfMGUWAilus2bPzCh6Ipe1qvOkOAgRRge1aL4zZ5pKLUJyFt\nQqoy\r\n=8iZ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.d8a3aed67.0","@material/rtl":"9.0.0-canary.d8a3aed67.0","@material/base":"9.0.0-canary.d8a3aed67.0","@material/list":"9.0.0-canary.d8a3aed67.0","@material/shape":"9.0.0-canary.d8a3aed67.0","@material/theme":"9.0.0-canary.d8a3aed67.0","@material/ripple":"9.0.0-canary.d8a3aed67.0","@material/animation":"9.0.0-canary.d8a3aed67.0","@material/elevation":"9.0.0-canary.d8a3aed67.0","@material/typography":"9.0.0-canary.d8a3aed67.0","@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.d8a3aed67.0_1605626944548_0.97548956870139","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/drawer","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.482ff9091.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b02bc3af9aee8f8b45f4a2bf97f6faf71d12ead7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.482ff9091.0.tgz","fileCount":48,"integrity":"sha512-WKUGSGnUHRZSEBQbd/rsbrmuBunsWLDtJt7gyGfgkACe5/dko3Z5f8M4MfDE5onXfi8lP3LE63mOjYxtvwG/Sw==","signatures":[{"sig":"MEUCIQCuCSApnCvpGyarifukGkgf6rq8pA0Tp2O+3fdB6r1ZXgIgUIGITVIjBpBFDFbiRAAtA5A3Ze/WsmBvCdqiHNGeH0s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA+PCRA9TVsSAnZWagAA2pUP/3XoKtNjM9A9v1cKrU8K\nRIzFLHvcRYocRVJsxdCBQrI4/C7kaZqI1eXQOubnPjAcDFPkXl8kXGJ9cU4x\nzOBRVYYHNm+4QS2pVt9fIRoP1ghsKF1a9j7MLbW6CRyB5xoMifbrIz13ye65\nD4m3WfgWjBz64sCAjnw0nxrChsAv7BW1Hy0c/yvroLkNyqgxcwbKVLrrAc+m\nbvrzVvRa7squuTGnxX6mEAdnPzHbOk3bIScqrBGY5A9P2pVLXSZsUTPr/ufe\nvJCtCdKwGlV3Smz96gWY+2SGgSHxkAjl+TKyCRvgcTm8AUXG+EGeVhiCaewQ\n52ZxdGk5JOQaLmgMbwZSoONxOm6zd7AITZQd4tdqXgdcQ2HYDGyxzBbnDWpR\n5BJARuk3P4NE/kU18o7rsKzAqLAHEE0bd0ouTwdjHhmcIms3+0Jx0lGLnwSE\nsQ0GAWPanY7E1wR1LfteSVitkFX9Lzf1Aj5U4Jrb7V0DBu4Gj4QDIuXj5y3C\ngFCWm8dhfMNofIAUOItMohurdrZg0w9Vbe4gmbdgRpQ1eX3kXZgrLL4yV3jZ\n2vrKhxkbwVmXV+SRTmSQx6S6rlaMQHBq5K3g//3AzjZghAj7DSyZ7eemN1kb\n1HW8RFgJZYmXvirREIitXE0P8FH6RNjhju0PLlOQv5T3IvmU4GOR4ZlVl9ws\nSrqA\r\n=Xy5h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.482ff9091.0","@material/rtl":"9.0.0-canary.482ff9091.0","@material/base":"9.0.0-canary.482ff9091.0","@material/list":"9.0.0-canary.482ff9091.0","@material/shape":"9.0.0-canary.482ff9091.0","@material/theme":"9.0.0-canary.482ff9091.0","@material/ripple":"9.0.0-canary.482ff9091.0","@material/animation":"9.0.0-canary.482ff9091.0","@material/elevation":"9.0.0-canary.482ff9091.0","@material/typography":"9.0.0-canary.482ff9091.0","@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.482ff9091.0_1605635983191_0.8305830661729627","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/drawer","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.99cfb6bd5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"716ec7c0c4d6c42f8e5c82a6fb433f2d8b4ea84c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":48,"integrity":"sha512-NSqbVKQtmXvMB+A/8Y10xqAQss7vK64s4PPmILmLIudGlXh1AkYmyb0aduTE9xA4vFgBBQV1/iA/kEmtAgPYgQ==","signatures":[{"sig":"MEUCIQCbzEO6P/WzNPlMnyGhu16BNvzALBGB+cPfM+x3q4DefAIga5Pqp9Z9xjP4fRrdahP1Ev9QJe5t35ITPupASZRvLkw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWvVCRA9TVsSAnZWagAA/yQP/3qunF/r8OC6w+VovNg3\n4wZl2t3X0pi+J9R08MzepwBzYhXCgkFniUHrg/Do+AKQjf1s1eNXNMgBqoTX\n26tomiMtX+8gHf79pFbh4U7LnhaO+nSMUwEq+qn4jlyc7dWCiTEMp/RJt8P5\nx/Ir0KSBa0++XBYjc9mfE/QtTCIeKPUn/lOUCnM4veCa0bgVMnti9MvA287p\nyAcmwzVjzXms68R3UDmjXcVagxuXFZ3Khpot4VYORDIchwWjpuXfRyGkEecr\n38nOpeOT+JZRw1GuG/BiRAXHNVdpdwYwMSOAgBveHJRQIaM2RWLYIEIeQ7fT\ntu8YlgeOl7SeF6Hk7NUmvi7QCIX9EX91gptU6VgjhPpBo6FbbGdzuxClHEiu\nR+trdlR5ytjeLJGYDwGzqs5EIk2bXtcslqcLgtBpe50vVmApfhBpqEEE6kby\npnwHGKvVEuxthE4PumkLHsylokzdspLdzfLi5CT+BCE5aiR7vzjdYLduRSBQ\n9v0g9EVR98Jl2idfzBhWQF/xnrhdGoCqVt8EbkSA8XRjrrL7hL2gGMsouiNQ\nvrxsB7rEoY3HU7i9lmcL567YoIcyCoL0km1wUQ4jxp4VrrH+q1Ho+z/TffoX\nSJqD2HVCO+es9oLV9beckiNDsXFz/XQvcJmYjPOqs5sENFNJGHhBkuS/0f6o\nC5pB\r\n=hWHs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.99cfb6bd5.0","@material/rtl":"9.0.0-canary.99cfb6bd5.0","@material/base":"9.0.0-canary.99cfb6bd5.0","@material/list":"9.0.0-canary.99cfb6bd5.0","@material/shape":"9.0.0-canary.99cfb6bd5.0","@material/theme":"9.0.0-canary.99cfb6bd5.0","@material/ripple":"9.0.0-canary.99cfb6bd5.0","@material/animation":"9.0.0-canary.99cfb6bd5.0","@material/elevation":"9.0.0-canary.99cfb6bd5.0","@material/typography":"9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.99cfb6bd5.0_1605725140517_0.1833472536056342","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/drawer","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.b98d15d90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47e59d90c83ef0f7762482af08e5d33b542373c0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.b98d15d90.0.tgz","fileCount":48,"integrity":"sha512-06r0WyxLg5h04GnmmSAksDs5YbZO3ZNa+cW/PAYdlfeSMbs0Jt6eyRBdTeWxcTympc3dOGRlW6x6EvYbzBTS/g==","signatures":[{"sig":"MEQCIFk5+iw8Ypd2LN6ozGHzHgwLLBB+hlQtjbCSoZkHYeAmAiBdQO75UCxCHEP8pUR4NwNmdqrQRRmWydDLRRlGFckHbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaHjCRA9TVsSAnZWagAAR70QAJIEOmw/BmV4SHo5TSVT\n3LfRCedKN7WzqeTI3stXpYmiHT7RQcvE4FWSV0cea1WNCXwISEZgU3Ei3sUO\n3RCxzwl+d+RvlY6Vrbq1w2Lj/x561HJGnOG9UA9kb84UM8b26pcGQRCKf7Rf\nS8IXNcWjF1olnx9n+vaUvINxHHpxtxaCEjbZoqMdOs4g2IcX7InazThbbO+n\nODb6xJ79pnUTWCScANywq+Q877BowSMuK/IcoF6Sse4F+4wD73tLE0oBHxMQ\nvEe8VPCmcvI5xxA/47oJFrI83XMEAekg3jOWQr5aYdt4ybB6LgNnwZdEX4mu\nIIm18oakNo+px2DpmpHKNMxbVykNLp7b5jW2l1w7anEsaJYVR9vc5H9RbiBL\n4mWsfX57nxuFmZtC7eDKTenE3ww7nZa9fckuanuAHrbOyq9HDii6GX7qBEWY\nKTkary1EPsK1j/kv/RTPmrvka7uBrf3Jn/wzFsekWmFJuhfgnHL+46dwkHw8\nu6birrKGmDCJBAPiKso2FJlLq1WR10hWYvTe6cTdOk8GHO7LVQy85TymfYPM\n8N2qJwWDY9nTRbLq4K1Drh+nEwuAsqjdSGpnSE/ZEPKpbM2EIHA0DbTUJ+nA\nXnFnE7NS4rQIstKNm24puIG8qb+q0YIvNmDS7UFXr0bsk4Xo62OxSgx8kJem\nPeRn\r\n=63Qq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b98d15d90.0","@material/rtl":"9.0.0-canary.b98d15d90.0","@material/base":"9.0.0-canary.b98d15d90.0","@material/list":"9.0.0-canary.b98d15d90.0","@material/shape":"9.0.0-canary.b98d15d90.0","@material/theme":"9.0.0-canary.b98d15d90.0","@material/ripple":"9.0.0-canary.b98d15d90.0","@material/animation":"9.0.0-canary.b98d15d90.0","@material/elevation":"9.0.0-canary.b98d15d90.0","@material/typography":"9.0.0-canary.b98d15d90.0","@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.b98d15d90.0_1605738979302_0.15396335169344488","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/drawer","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.30c11bfc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25a24f82883c5b77bb5d4f0c1b5bee6de92f5572","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.30c11bfc2.0.tgz","fileCount":48,"integrity":"sha512-nLLen4qtAAHPgv/qi3OG/8iv3sBhcLiiPW41MJLTL5I60ZuOfrSsq0fhiTG8QG1g11AbAg5Xejg6c7RZRpGHEQ==","signatures":[{"sig":"MEQCIHxxHPFUmofINYjDz7BZVDGV9IfcF7Z+ycRUEC0TZgk4AiAfsZsd6HvcaqTkFsKA/J+NrOZakOlF4hYvcDGDSZIk1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcoNCRA9TVsSAnZWagAA9aUP/iMN/05Mx6RSnHRP8I+k\n2akQwyoUmaPel8o4gK9WuHqf+H+U+RxTwQ+qR+q0ZkkegmoswEgT2LWnxI54\nIpMjhhOKkkC5DP+4kMisZlci5JznGpWX6heaTyN+JhkQzvBeJau/15r0nJRW\nPHNnhehUdahN0S3yMMVXORIf+579oNc+z8U43Y6ydGi4ndoyFypNw4FRgogr\nR6pN2TDtBdnwHWhh4TyzhiGwATyrgruSMKDQ9uZD7theBAbkPJbGv98xsNj8\npxnYlRwh3qbSLHTTiVXRmbPZQXUc4Oa7GvH+Ekzgp/aUfdo29NnlR5Le4SUk\nPCTG0EL+btpk7KCafQ2IJ2UOjTF6JZGFxXQXoJeC82jbSGrUUIi8GgDHg0Dt\nyBOxSFaxwbI7Lod52zoBPlRdWikWmXJ6SWMd104Fbp9fDhKRl0N51GVpqLA3\n9bC09ej2kiDCy4cFhT2UXChKFqZhk0OORn0McUnCDjozZywAM33Auzy5lVbc\nNep1dDZ7lrXNa74Y6Q7FFtArBgbuXPMuiHQF44aP+pbRfXbzHrUIUn3rYN9O\n4fEj09oRUoxN0p8QZ6sQFMcrVqdnwfeCgQP99OVOiZrgW+vW0yM1zRFxZQ08\nNIrcEST94jtmkj6InuGAu+pfZhrwMwFsN7hgJ2rs1fI+CarYpJpfqtpfFFx5\nwN8p\r\n=GCyL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.30c11bfc2.0","@material/rtl":"9.0.0-canary.30c11bfc2.0","@material/base":"9.0.0-canary.30c11bfc2.0","@material/list":"9.0.0-canary.30c11bfc2.0","@material/shape":"9.0.0-canary.30c11bfc2.0","@material/theme":"9.0.0-canary.30c11bfc2.0","@material/ripple":"9.0.0-canary.30c11bfc2.0","@material/animation":"9.0.0-canary.30c11bfc2.0","@material/elevation":"9.0.0-canary.30c11bfc2.0","@material/typography":"9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.30c11bfc2.0_1605749260479_0.3730586489435497","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/drawer","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.1b731d51b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ddd522199a0303da2b99e99590162fbe65c6076","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.1b731d51b.0.tgz","fileCount":48,"integrity":"sha512-9tkaMFYr6zFmI76NFqFUHRAcBAKa9kPj8aNSalYS+eZMIJdr9YC+XKNrZZbQSFst0mBZDVyDfw9dyU+whrh98g==","signatures":[{"sig":"MEYCIQCkhhJVEqap/iJsttkhZs6SIBm+p9Nxm4OZbpe/B2vDqwIhAOTdnOF0BZPhx8r8G8HNdqdmexFR1bzIcTuZAusdGqM+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr9CCRA9TVsSAnZWagAAbn8P/ju/UepqI2gyXaZ3j+rt\nLMq5rfq/6ukVxARVhhA1v8T6xWK1wKxqMSCbtWe8FdTmoRMDUXCR1TkDl2Dz\nU+9/HR8+V6CgaUeWso7dP0qifd72UBnfF2IXnHVWW4yrRfAQ8lJpyFEx/IJI\n4igCCP7NYot5VzajsJ1a9yaiGP6RieT1Ktylvp44KWS+bkEJuJmurZqDLlRF\n9uhY1wQ0olP8svQ2AA5/f4hYv3WuRvcYWHHuI7SMilOk7MyQcTweRDzgXSYm\nt+YHFoBTplmY52u4sJcBwC1WNYbe+aChGWLRHwIxA5czIu7lnCPxBKrfr6En\niojbiNVgoFSOucGmf0niJ7mwqvFXKqcoFqplkllS0nTb0VVTjuRkOBp/GEXa\nRs1mM5llfZaNBMgs2o59/uS0S/28sV+M5hp3A+WyRnfeCRPhbbWFnKMF9rKR\nH0hjaf6a1M60jWiB64eMX6p4Cofwyl4LnQ369itNPheH4RyQvwQpH2ukdRuq\nwKcaHPvK7NoiPOYUijhzsS6dEInHa8nOg0kgwIpc9cKJ0mu+TsrXw1qxNQU7\ncj37kVVE4fVMq1wTT+pbfVqT11cCEA25LtsOvRZBiOdnLoQsY4YbjsyCe3bR\n8W2rYdXOZfsXqu5WJz5qQlE58KiZAqMXUlz2czcWaMksy6V3D7WI7ksHvo/I\nsJI3\r\n=vmds\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1b731d51b.0","@material/rtl":"9.0.0-canary.1b731d51b.0","@material/base":"9.0.0-canary.1b731d51b.0","@material/list":"9.0.0-canary.1b731d51b.0","@material/shape":"9.0.0-canary.1b731d51b.0","@material/theme":"9.0.0-canary.1b731d51b.0","@material/ripple":"9.0.0-canary.1b731d51b.0","@material/animation":"9.0.0-canary.1b731d51b.0","@material/elevation":"9.0.0-canary.1b731d51b.0","@material/typography":"9.0.0-canary.1b731d51b.0","@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.1b731d51b.0_1605812034175_0.9297954212815804","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/drawer","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.4ae94ff78.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1aedb495467656bc31a513a48c4995f2252fe5f8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.4ae94ff78.0.tgz","fileCount":48,"integrity":"sha512-cB5TLemVh6ZvkyeWSQBKPQRiZqOX/7K6WF7t+VB4c/pO/ZveVSFeAATR17icCxEAWsPQni4Frtn/y3fC8dSsSw==","signatures":[{"sig":"MEUCIQCT+WlsTKMrVfHroZdN0MFEb1TcfUi9icTVqMMBpZWNZAIgKx/GAnFChEfLUEQc8ctibWV+jDYb5eqtbPTvm4PPt6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr/vCRA9TVsSAnZWagAAvH8P/1vqwd3PhvME+vUwWiVq\n7kmL9qFETfhncWPu18b/DH9fc3wg/rQl5rzIwHWxhBneXZkkexBRKh6e+cAr\nwoz13eqyaIdC9LbMfOiSMExvhkkg8P1zQRQwikhABiz1PddBgZukIcEa+itw\nt/U3R+KV2D+YhdobEK3uadxMGlhBjZ1UjRsNek+oydsIvUWqGc7iGwbIe3WS\nrfVCOuL1LDAUfjqDRGQL3a28nLrH0SIxrZC+ma+gyzfOS4L4Y7R7ubBLDNLU\n8O1E0TWQebIOtEgOiEB0q3fFITmaXbqVOHVQRy1rCJtPaolxm59GGVaUZNEk\nAAUwHtE3T+AbpBZdfk0zza42kI75L1MkN8d0SDjEFw2d2ahppTyVmG0GYhPF\nW8Q3GmfMvlAZbFg4+lyLFd/UuVxxDtnouxu6Hn5nwxi/uPVBZFZbyzH9Wj/d\nbyofA2HSbVCOyVlWn2HIWk0AmCv4hsgCTsls67LTyIAdLoCQw3054VUXSVC+\nQnPmNAxj5yeCTJpuEIkQ5LP9Nc9Zh8TAZPbPUdNY8BVCPahEWH8Si6L3rg4H\nh6voS+Wor/RjENdPnteRH93vy25pzueLdMguhPzM4zY/4xW1nzwtPnoblEDL\nSzHssOEtBrNfoPofPRCIIDHZJ1PI/0lTMv3a9jYyINqOzc8AG5E9D0zz3ISU\nlDjp\r\n=sXBx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4ae94ff78.0","@material/rtl":"9.0.0-canary.4ae94ff78.0","@material/base":"9.0.0-canary.4ae94ff78.0","@material/list":"9.0.0-canary.4ae94ff78.0","@material/shape":"9.0.0-canary.4ae94ff78.0","@material/theme":"9.0.0-canary.4ae94ff78.0","@material/ripple":"9.0.0-canary.4ae94ff78.0","@material/animation":"9.0.0-canary.4ae94ff78.0","@material/elevation":"9.0.0-canary.4ae94ff78.0","@material/typography":"9.0.0-canary.4ae94ff78.0","@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.4ae94ff78.0_1605812206978_0.315421042372495","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/drawer","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.7ad038e1d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63d7da30ee6a2033f98c4ea1a3bfe55aec5ce253","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.7ad038e1d.0.tgz","fileCount":48,"integrity":"sha512-9zmebpQLDMVQDmjiwk0vuONKnxbuTuIdjhIPI2hre/UM1hs4mPlwam+v0p3zg4bryFbYXzB+U7UfEeDBNQX0mA==","signatures":[{"sig":"MEYCIQChK7iCZKcOp/IPM6dLOpZ9xlS1IrRXVVL1U4EUxHNHgwIhAObhp5/Ua4mVoqngcxFZcNiUWzEQBPIPIRd8cpGMZbgd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsVdCRA9TVsSAnZWagAALKsP/0A9s8Ly2GBt+DA7pJS0\nKEU3LOKdprsK++AdIROoft0joAKd69TET5VH6ohZWC5ZaZha0w+IJJ/evlRQ\nzc1oq/nDe/J5FE+Xhx5xjlIrGmjBdp4+N4EnUn3cu5Gu/Z/UF81zGPkCbusN\nyD5bDSpvhTB8+ZO3M6A/quY1yE9EpB3GRZYdNPZDGeRxCwPnGPCozAvTEnl1\nzZ3lQiaZdz9TI3uI6H8qW1SJuxa6EPz4TKU9v5XBk/nx6fg0t1DZLpStY9hf\nDM4DnuRb/S2/pY9xsA9DS47Do7RlW2PS+mW0qJ17A/RTIwXSpHHmGR8llZdZ\nLycxlaPvZyKagU4T48CjXPcOqFcg4IChHTW7yTXLqqos7QwiMG8uQzDO7JOb\nocYHjs3XHQRDCvc8WuVVr8yvTy07oWiZqevxHec46AGj5cIvcJei+ukxe+qB\nwF2B8pRSnG6o5G5R3w/DxSs+z791y+iOzJmFdOmUMMBt02gBXitW/yHjOh37\n44gRXIQQjTqiExLAbcGhOpYotMsSatOS+po9H1uVPmul/1jN1MA78GB+5L2s\nQ3xOR1fKyglTbOF8Ottkdieaq8Pz2NeuIQsQHFV1S0TI4XZfwvCdKaRLFJut\n3P8ZHsMXEaKS8nG8SbH50V8c42qn2UYyQ8AeWSma7zhHEGHMI19HIJIuMdsu\neXvP\r\n=Fpb0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7ad038e1d.0","@material/rtl":"9.0.0-canary.7ad038e1d.0","@material/base":"9.0.0-canary.7ad038e1d.0","@material/list":"9.0.0-canary.7ad038e1d.0","@material/shape":"9.0.0-canary.7ad038e1d.0","@material/theme":"9.0.0-canary.7ad038e1d.0","@material/ripple":"9.0.0-canary.7ad038e1d.0","@material/animation":"9.0.0-canary.7ad038e1d.0","@material/elevation":"9.0.0-canary.7ad038e1d.0","@material/typography":"9.0.0-canary.7ad038e1d.0","@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.7ad038e1d.0_1605813597530_0.17349434866153035","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/drawer","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.a41527604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a286f5b4eab205e66923e8d58f3f7e5243c05e1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.a41527604.0.tgz","fileCount":48,"integrity":"sha512-4z4jp5N9i9B+3gDxweIgJbWmSR8o+Ll1bWbTlE69FH/57xSsSDYif7GawKNRI4hllwTA//Yg1c2gByr+dKybWw==","signatures":[{"sig":"MEUCIHLqAgwRzsn6ty0xva3dGaGtVTuRzoLicuU/pg9m2jRFAiEAvp3pZmzaNWfQPOKQYxy9PTIY4ihsUNs+lvi344TsAYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts9gCRA9TVsSAnZWagAA68gQAKA+ovI6XI15gPFMvAIR\nxDCcxBCNeAES0CIWBlUga1CSrKvUx4QfxAhLPOFa6E/BWhHxewij9e5/2ISm\nWJg8TH52p8e7VTp5+O7NtKyTJH2VLm+6aetLgeUVYU8OL8wnL1FyIFbfXp01\nDvCYjGOibzXJMdI565eHdUOhCZRecHjG9z/8lsWin14koj7kLADYjuuqwNQX\n2EAfBR4xyivFGIQZkHAA6qQrEcOWZnAKLUh7w68Vs4EOCH0r+jmGwNSo4yht\nL/I0XGAnRnFdTK9oCDNGnlOBE+kWoQOCSMHJS6zQHZ8oUO+4Zcde6qFBbN12\nuMVA2a9Vlw2TNxNA7QXhiIqOLM419295R6EluoWja9Vv/nW6IubG0mPw5m2A\n9xNU7tTv9/AIbCedSncfZpP2/ugawAOllcOSuQphht4WSLAaYt166LkfwvTE\nfdRjwgSEdLQ/n6e6wgSyUPPbKvEXYFtHqFwWBf6DIPRhMZRbvWw1Kz8EmcvS\n3pznVux2KN6auDZIJ/UuARPV69e13gZrVjZe4bYCoKrl19VMgN11dUuD8DS9\ni+XeP1TWqgCMHIAHzgS45/efdbwmVgk1yiPgQQv0MW/kCHEoCxRMQhV1go+e\nquNK0lscq7IYRzwvMcANVqTWPVu7tDmD0BsTfxc+yIj6LzQvEqt5cn2ecmJ6\n/kNR\r\n=byRt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a41527604.0","@material/rtl":"9.0.0-canary.a41527604.0","@material/base":"9.0.0-canary.a41527604.0","@material/list":"9.0.0-canary.a41527604.0","@material/shape":"9.0.0-canary.a41527604.0","@material/theme":"9.0.0-canary.a41527604.0","@material/ripple":"9.0.0-canary.a41527604.0","@material/animation":"9.0.0-canary.a41527604.0","@material/elevation":"9.0.0-canary.a41527604.0","@material/typography":"9.0.0-canary.a41527604.0","@material/feature-targeting":"9.0.0-canary.a41527604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.a41527604.0_1605816159529_0.5426121831277524","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/drawer","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.7b0e2b377.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73f17d102741a092cf58ecb80b014cb60cb8b1d0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.7b0e2b377.0.tgz","fileCount":48,"integrity":"sha512-tVesyk39oQmFZw8rKtnWmuY0vMNjBbzC9ii0cssRVNtW2hu6TKW/7LHoPLMtA7TlnKt/4DHz7O6xTJOl3D/zRQ==","signatures":[{"sig":"MEUCIQDNj9NW4H93R51llrQ0PWDP7t47Ez5Z4AXfi30yUHaXHwIgcJ9loIyMJJtbT58CFpkSWl3gFXzgaZlgmCtujE2+Ntw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEneCRA9TVsSAnZWagAACv0P/3wHOypxSWztDKzIVcmq\noUCSZXozGvJeX0wfKJY40HbMcMIvkuuz8YPOM4ObdAwhlBDVpBjfqUiv9sy4\nbHusZatlOt0LY9sd635Kf8fFPCtGyUhnPLzSNnKzCWMQxlB8Z+bWXqVYzNg/\n0kLdlUJSzGoVNAuk/E+bqfGfvSpsMmUWumjrEXjtHNhumw1n/18th1tihkAB\ncBe4Cj4Uhxq7Qt8I3Tudgp5aKERNr53YqnZDRkGo9CJcNmyQ3pcX2b6WFEfk\nB1TUqkNCssul5KVVTssmFvBUqpkq75GDTZresY9HP2tTQxCcM0wGsUZ+1Q6a\nmoqRJ9I1AmKaXcuEBPoonoPwaJHFTp1RLFDngGWAYAsL99pBhZ3ucffRKlSb\n9tbHaUl41OAc7qkUhSyyIRup4K3wUBYKGzVl3rBdmaz3XicPXnoRRgKaMsBA\n1X5Ypau/t+JhObj7LQcTt0/O7AdB6wceGyhm5eVnKFqlYGkA7Ir+NaCSV+Kq\ne0zPUsTRli6VsrvbPusW8sV9RWdR4pMastpLDvL0eXDaI9ZGMAV6TnTV3Ess\n4mX1/1O6yqRghzfg52jjfrLFsbiAqIqWSb+h+6NXT4GJDxwwR+mCIQvMKR/d\noy+q3WGs4/VvhV2epBuA44cHsqqgVPMcGu3ZWBDbGV3qvo9DgMPzpvsXZrwd\na0bk\r\n=o8q2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7b0e2b377.0","@material/rtl":"9.0.0-canary.7b0e2b377.0","@material/base":"9.0.0-canary.7b0e2b377.0","@material/list":"9.0.0-canary.7b0e2b377.0","@material/shape":"9.0.0-canary.7b0e2b377.0","@material/theme":"9.0.0-canary.7b0e2b377.0","@material/ripple":"9.0.0-canary.7b0e2b377.0","@material/animation":"9.0.0-canary.7b0e2b377.0","@material/elevation":"9.0.0-canary.7b0e2b377.0","@material/typography":"9.0.0-canary.7b0e2b377.0","@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.7b0e2b377.0_1605913053891_0.12386971068236408","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/drawer","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.c927a5d05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83ceb650da6824bf77bae0c766705af5f19de392","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.c927a5d05.0.tgz","fileCount":48,"integrity":"sha512-o0e7fGnqCU9TSZaTETYyHAIpzzRMJYc39KgPHLENH0/2kLmsDtyS5OZWZI0enH7Y/nVcSs0g8gKky/9x097Wig==","signatures":[{"sig":"MEYCIQC+4maJqnM6oFrFsUQQhNFY9TWOskLWokLMIoLAD9oHPQIhANbFez7xbrpYuHvtTOkrQy9gnQ6+kwUxfMUtIly5fA1B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBI2CRA9TVsSAnZWagAAJCwP/jtnG+kzg+mf0vLiZFmd\nPxzuHMiAp5YdcroqGE6evEh3aQThb4xoCjH0jfrw+h+2/ESWodXtEbgCfdvQ\nEW5bsBofx8Z5z1gU/ek3kenToTcpGIX5jjM3M6AWCaZtgPTMPGNEBgecHRHv\niqSpQISN+W9uBinzQetWUdPWs8N0ABsTtUWgV6Z03ktdDIb5DrmSawpCjbN0\nFg9UWY7hheLGDacjaoMNrO7Cr3pqsByYXtTwrOoz1t1sKhmZH68QkC3jlJgK\nhfx6xg8PU9ppzU2seSzNXW9fGX5yzI3EtlWCmYcWBTcWdQssvNdzbNTSEEXE\nI4d9PcTXtH9CtPVjdN+W8zuajKvCXS9vcIT1DNw74daDDHDdiQjum0MICUhk\nrI8pJV2KkLcd66xRB3xhFz6ZMlSEeEQ6pOYnjQKk6gAPCwiaU6tZ/ikoVmEE\n9hFu4mXeywbUwHm3V9Mg0Sej+1oAJxLFD2YafJ+0jQ1nTRX0FYbdmKjyquwz\ni2ov+TMXbI8U408cHa22vz4JIRLX5mJ8EgTF9zoyQ6TgdCOQZkZTw3gmDVNm\nbsloOZtx9f1TqOHbHz9fX/VzvUE7ilRhiMgt9HfjDdlTL1W+C2n8OXaE9XGq\nJ5hkyINwt8E7riHtHlU4tCIv4wYV6pwEQW9Fy00AXakJhE6Jh8o5hgzGohcs\nouqL\r\n=bZjw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c927a5d05.0","@material/rtl":"9.0.0-canary.c927a5d05.0","@material/base":"9.0.0-canary.c927a5d05.0","@material/list":"9.0.0-canary.c927a5d05.0","@material/shape":"9.0.0-canary.c927a5d05.0","@material/theme":"9.0.0-canary.c927a5d05.0","@material/ripple":"9.0.0-canary.c927a5d05.0","@material/animation":"9.0.0-canary.c927a5d05.0","@material/elevation":"9.0.0-canary.c927a5d05.0","@material/typography":"9.0.0-canary.c927a5d05.0","@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.c927a5d05.0_1606160949796_0.9252673883097584","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/drawer","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.b349b5185.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6593fe6bc8d0bdd1ef4c65d6079da48a91d0f124","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.b349b5185.0.tgz","fileCount":48,"integrity":"sha512-34QpsnP8LvhLT93DKEUtseiHeU0tcfJixvus7R+HGYIdh1y1pNU10dRc2ngEO38bmj3imOZ4nWznC/zn4E+ZPg==","signatures":[{"sig":"MEUCIC97/xnrDKuX64As91ZLYjt4ZUnKhhfIQeXfNwJ83uqjAiEA1AQMast3+WuSTRDeVCqcc/aa9cCujVFzc8LawlNJ00Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT6FCRA9TVsSAnZWagAAEQIP/AtCnxAIVZ/0s0E8ovV4\nnNOWQ19PZXZLDGU2NvnBjOkJF7MubamQ3oHI0TIQqFGY/GTEqvCDDTL/pUP0\nO5Pou/0P3iXVTrkMHE33Xd4XfrvrFCQbbArr7KhO90xwM7eGr/Q9xCamImPj\nFePBB1tRGeg7fzNBEiATCEcYiq66suE090QPgAEUL/q+vcUAdJ0i4UIgId3n\ng5I5LHhvhWmeaIemX+L1w3pO8QBAcFyEBA6dt5WgWZ8+RcxBZHRVTkjqoKFi\nTn35ougLXaUw2vJIZ4LvdxPljAEITJ+XP+ETflTnF51BpMwQEifeWbPBssUp\nNexN7tPVPGlgCrV807SXld7xTSPaZdzyzLroAmQmE88X2dpsGKdQ5BUPhG5R\n/16bYxHglLBy0CBg3T/DpnJfvB5zQVP6Ewbq1KX+2POYv7xedtExY2oCih5X\njIkDt1VpJDbJ/YopYvTyMvE9L6XjJdKKXLOHYXNGi0j5qK1nvCdqUBN/PlzZ\ndMC0SCjrOGo79rr5aVgU67sj+bK54bfQOAuHK0AbLJo9MXeVSQHZJI8KdUQs\nwvxohgEFVR0trjwS8OvG4BqDvQ5UtMXDZKfzFtPPJr99/ymASCFpw9FHiOIa\ndSZEin+GNOpCvXD9w1GAKIwP/bfc6bKWvJ3BwThhqe4ubz74tbQ/sLZhoRPe\n8VA1\r\n=gcUm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b349b5185.0","@material/rtl":"9.0.0-canary.b349b5185.0","@material/base":"9.0.0-canary.b349b5185.0","@material/list":"9.0.0-canary.b349b5185.0","@material/shape":"9.0.0-canary.b349b5185.0","@material/theme":"9.0.0-canary.b349b5185.0","@material/ripple":"9.0.0-canary.b349b5185.0","@material/animation":"9.0.0-canary.b349b5185.0","@material/elevation":"9.0.0-canary.b349b5185.0","@material/typography":"9.0.0-canary.b349b5185.0","@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.b349b5185.0_1606237829333_0.2999187366404954","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/drawer","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.9083b7d61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf66fa321320f352678179ecfb77ed9d0adb6daa","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.9083b7d61.0.tgz","fileCount":48,"integrity":"sha512-5MdH1f/xfabnClZFab91KBIJ4aN2TXnk+kc84MDxzzw4R6oraEiCOyprtpxB+vsYtBtBS/lgE34ODQ5+YrOoaw==","signatures":[{"sig":"MEQCIBOBfj2ds1m1YK0QG3P9zoWtyJdRGngwTlQxBZwNlxvZAiBPLROFdaR2uncqVbQRUL7sDc4DVw0Rc4NW1JNG2a0x+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXhQCRA9TVsSAnZWagAAKgUP/39f7eP9MzjpF1j2dgto\ntNCkwTlOityJFhg7U/whcvFE6e+pFg8IdOXeZNxk6wbwt+3BPx0wudP4S9D4\nRWRvP+50ZlDV7ozRhh5A1kAMp6zbFc119NrkrBvt8DhQlpu5g1vOEJ3jfiAC\nbBD1Kuiu15Zzq/Rh2XEYTjzI6FfUeyXRagg+pb2Sg++TbYavSEepDAFiSrSS\nia47PPZtXVimasNQ4D/97I55o8Jt7T9rnm8p1hoCL+sxz5OsLe0c7Yy1g4fH\nSCQ1q3N2Z38ZLw3scrjeYOV3b5ItbEiOxvTGEK9UOOwRgBOBqp/j2YiQ3RrR\nhVz1xgkYcVyM7GAJE2ME9bYWHM26J4A4EYiI4KCPco9hUcYgl9vSoLfH+z6x\n0RbLqKxLslzb7NvDXwvGEcJEYU6mkLTlwxvC2o0ZsjnlUdgwPDI+UDLhQaF4\nagJOeg3aGCSSZyVpblylyfVx0SwE/dl/F6pbESLU0zx9nkSlTdaG4jggyy8G\nZzC8oHRa/PpOb4ceHuMWacGW7E7D3RBzo0U1pNm+C3ki18AvKgUjCqdqhMqC\nOsriKirV+IbrBk230vepurQC7q+aFboq0ly/M0pLDYOdV/aB+ons3LVWsBEw\nx1Bzf9Loth+DyTa1Cb6toqzTpuIHNJPUkt1Ehk5PLRskAR0QXduaXPrmfGb0\nrwcE\r\n=iF1K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9083b7d61.0","@material/rtl":"9.0.0-canary.9083b7d61.0","@material/base":"9.0.0-canary.9083b7d61.0","@material/list":"9.0.0-canary.9083b7d61.0","@material/shape":"9.0.0-canary.9083b7d61.0","@material/theme":"9.0.0-canary.9083b7d61.0","@material/ripple":"9.0.0-canary.9083b7d61.0","@material/animation":"9.0.0-canary.9083b7d61.0","@material/elevation":"9.0.0-canary.9083b7d61.0","@material/typography":"9.0.0-canary.9083b7d61.0","@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.9083b7d61.0_1606252624180_0.08113137184249353","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/drawer","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.eff7b46ac.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"174b6951f814db15409f0cfea89b635bb1c3d087","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.eff7b46ac.0.tgz","fileCount":48,"integrity":"sha512-E6BTWhum/B3LpdzKNcDKY5CucriZvIFZm/K7hC1s7m9NWLcT1rVtD6LbwtR41bMSU2XLp+17ZkLZ2pDfOYnCgw==","signatures":[{"sig":"MEQCIHFiMpOU0PKdgRKwEW/RXAXCuVtzwqXYcLo51BKE9SV0AiBUvZrR+B+UXGT9w44l0FOCozLwsyb2Sq1De/1p2ctL0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZgRCRA9TVsSAnZWagAAMbwP/2wxFyF2/fUUiiPDP43f\nZ7X2Dz6jp6ppdQwg7/94eAf5pRMrUTK7cToOhX2EzLAJjvgDr2pDUdUerG2z\nXMtQ+Z5D7QJ2tiFdd5A3KofP4HE846K4SFGiCnrZsxHI2oPB0mqEla5ooovw\nPXBOD3hi+mVktrkW1pYPW5UPk2/+qCO/YLjkrnOp97swBW70c8averBfTugf\nIf3uXrHPlRxQPXOdGKGE5FbrdUQlvhdNtKASmavP+6Oaw/LxWZobc+TrGDRo\nitFPpvPltUnKFPBVWDYevCf+1UXrmtXjdJdgP4f/I/3rIAkmxh8djkFYYK5Z\n3f+cpIGBK6Za6WG9OLeSSlb/9XcEhCWTkrgOmgMSW7gt6AQMSVfLIMgr448Y\nHuHsEjmX4pBttRMDEBdsfrgxxG8QBKi+eskriy0Vpb9M81+GennshRm6FTJK\njoogCqpdK0quQvb3+pbJ9lBmWMNbEbKnqemepEJM+o+/rHOJb6OJVqTdpVts\niGZ9iTcrqLrHyNV4YwP/eRYHP+0S3Fj6jsDMNxVkxci4F33IPzw+1rHUhJ6O\nvJj1VqmTwkJb6GO+IMybEMDHhOZvfOClZauDhDbPLn03gPDp1mA3/1uDTqkG\nvQArm/S3cDsjLkcTClq/ngZ0eCZLplBXEMRpAKKubWNb/wBra3xfgEuPXZNc\nS9U3\r\n=1SLZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eff7b46ac.0","@material/rtl":"9.0.0-canary.eff7b46ac.0","@material/base":"9.0.0-canary.eff7b46ac.0","@material/list":"9.0.0-canary.eff7b46ac.0","@material/shape":"9.0.0-canary.eff7b46ac.0","@material/theme":"9.0.0-canary.eff7b46ac.0","@material/ripple":"9.0.0-canary.eff7b46ac.0","@material/animation":"9.0.0-canary.eff7b46ac.0","@material/elevation":"9.0.0-canary.eff7b46ac.0","@material/typography":"9.0.0-canary.eff7b46ac.0","@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.eff7b46ac.0_1606260753425_0.3063817294622513","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/drawer","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.ae27b44b0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e44b158e9f38a86e9f35fa65f64aa7f27422ca7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.ae27b44b0.0.tgz","fileCount":48,"integrity":"sha512-gQp1gpGmliv2/553s441mCwQwKdD/fzNE4gRDKoVztyf87r9L4IDVitiBLju5v+dCZwuNhp7bnZQIp6ijG887Q==","signatures":[{"sig":"MEYCIQD5EDMUPAhPBcrCT2+SkYHtGQPs0h8vhPRq1tmFs35rCQIhAP75o1AI0VA1LyzA5SGMkd/X1M+HyOasJ67wMDYmYMYb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnndCRA9TVsSAnZWagAAofwP/RaTv9rMsb0DSSYP8UNC\nkLvVsRwJTs09D/x/32iUIt7wLcR1UcY9naU+z1dNiHJMNur9H0Tl+4ZcEeqN\nzWGOGxfu5Yvai83sZrzJ10C792QXxeQoUngBP/21zA2HDynZLJa2gbrkFIdu\nESeK+OCmydwJNgBLJiABTMDZO/wG8p0yoxTDSkX0xNC9WMobDoJaETUGGJ8H\nAzUmjK1KotyCPxdFIb0ja2CJrvctFd/7AxRot0dRCV9MzcgKIuwCdDdPLVSn\nscKCh67venVbbvz2QojFtwaLt+/xuyWkz30UwLFdLuSp6HvG3dSUweBWgmWd\noZbkgQ7pkbea04srziPDlYXDA2kIaezjlEgR7Xzc8snBJIfSDwhEfCdxHZyQ\nsJWESrKzgHSu5XXtnrE7P48M7WlW8K7nGg5k07X0gJ6QqR5Kby2jY4eggZpG\nveubaQw3TT5MdOOSCZEUe67xs4w0nQT7EuWFsQU4RBDB1STh4IygJ6d7kuxm\n8jLDUY6d1+Va1aFyUga223eEZR6MOT5MBfDUOzBUF4VbICtQpdMv0zxsjNA1\n1nwHKFtcFOMD1pMN1u9jtM8fq9K+HHwetdwLQ+hMRvuOEpswdZ3oEe1qM1Qf\ndsntAFBHXkgipqunmDr5B3f9ywYCmzxPB/5LKi7hWEffEMZJjMdQBxtDi3nL\nfh7D\r\n=7K84\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ae27b44b0.0","@material/rtl":"9.0.0-canary.ae27b44b0.0","@material/base":"9.0.0-canary.ae27b44b0.0","@material/list":"9.0.0-canary.ae27b44b0.0","@material/shape":"9.0.0-canary.ae27b44b0.0","@material/theme":"9.0.0-canary.ae27b44b0.0","@material/ripple":"9.0.0-canary.ae27b44b0.0","@material/animation":"9.0.0-canary.ae27b44b0.0","@material/elevation":"9.0.0-canary.ae27b44b0.0","@material/typography":"9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.ae27b44b0.0_1606318556862_0.7798910640062293","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/drawer","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.2fbba2554.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b48390b15896c89fd0d6ee9781a4bc2628342505","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.2fbba2554.0.tgz","fileCount":48,"integrity":"sha512-dq53mdJR2ReQGZDKqgmPgk2fUnSf7/ecriei2fVdzk8p6mCF6zpiX6BWNOVuRu4ivTYXORrzNBMoimFqZ/dlew==","signatures":[{"sig":"MEUCIQDjvjC6+FdliV62r/n+7Er7z3SD26o+p9MiP+GwXpy7BwIganM71EQ6T5/OV+38gvH4eA0cKYlF2hFJP4Buzjymlyw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS7kCRA9TVsSAnZWagAAdjIQAIqCpy+3P3UrL5GQOOAA\nbcwXaCALbInNtVTE/Hrut1gOuE6luOI5XEkmOaiGY0KINlz2OGBzxnuEX0TY\nUfjNIwGDNlPVoMKM8fWKmwiuJDtHAFCH0+e09Hi1QWutnfko2tgturXEWwlY\nNsWrPIQy5Hjz+ihRxOCnRKldKC0dWbe+7wgnkKSvKAz2yNH795doq+I4KdP8\nZxOnzzAbw8Qf+iKVrsQr1OjqTSB4MSvJO0n8kxwLIPftBG0nEYwHYNoKMvt0\nOF/rerQamB1EwhW9Yx6UPuwQt3Yc687kvVe5KWUFdqTxPukr41UO29OjRsYn\nQl3XNy1rolNLJL5qtucWSENkVIEyKvXbZNt5nbYQaaocr47MZ+3MZZ9s+x1X\nhAoxgT+zkl9huPA48EydnHU9ckhN4089IEjh23hXOWheykLU1svPPgQAIkj4\nG67qO8Qpy1c0Z2Tx1998dsAHcLiu2OP4zAf2PaOidleTr2QjPSxzhELkJy7r\nKSh0Mk03hlEJy/JscG0jwCwvmsiuuKyifCXfxjgSKZyBt5aF70OBCBGagX+T\nN5yKERT20raTyobz7gvMFcVH7J3JRlSDiLdD7KEzRYa6nqMlDgf1gI+j+fVO\nBtDGuT2A0Lkd91ExMiaFkSlrpoZKD2A8fHFrCa4eiiaK49dBCR98WqRCSMCh\nrhiS\r\n=OT97\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.2fbba2554.0","@material/rtl":"9.0.0-canary.2fbba2554.0","@material/base":"9.0.0-canary.2fbba2554.0","@material/list":"9.0.0-canary.2fbba2554.0","@material/shape":"9.0.0-canary.2fbba2554.0","@material/theme":"9.0.0-canary.2fbba2554.0","@material/ripple":"9.0.0-canary.2fbba2554.0","@material/animation":"9.0.0-canary.2fbba2554.0","@material/elevation":"9.0.0-canary.2fbba2554.0","@material/typography":"9.0.0-canary.2fbba2554.0","@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.2fbba2554.0_1606758115163_0.7164942882570466","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/drawer","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.6d8574fe1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a89102f82c815859aa264456a6df3c84b7a651f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.6d8574fe1.0.tgz","fileCount":48,"integrity":"sha512-cbFP1U2l7TftjUUzypuCjzII1Lyb6y25CaMDT+HiHuaxgoRwQ8e8TQg2BHpaVo2aWkfODjvTeIIlWXDfTJ1Imw==","signatures":[{"sig":"MEUCICOVVVmkX4yz9QrjpYW46c/jIDEJqImJR/SSEqszvdTPAiEAw15MAJXX/L0PGK1nX8Ts/or4vSoy4JVCRgultdQeI34=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTFvCRA9TVsSAnZWagAAOMQQAI1dxbZBkt3n/iVQRZFa\nMXV2tZ5uv7EIxddJu01Ha25nFx0lewRkYdjrCGP3vSQmWfJ78pb/5uxahr1m\n1orZDOHYei6/0j4ILWyCRStTIwcwbI81jHVqcJqV5Z0P1kQfj+LsK7eN/fr9\n+ge89ji5cn32+DwqWYSvQTWhR8HqTQqbxs9eI4XhnNZ8wAelSylNSe+cdTlK\n9/x2PiXAa7Cnr1abwwQsqk935Fs+GZ9y6EP05UmX8jIbt4tVHFQbVfjqkFXV\ngMD7q8/OxU70oR5fk+V3fy1lAexLz/2JeGuc85tyOExDsP/pNRDLgYZ1OLIG\nY+KUi5eS6Gl9MNaMsap3PHllfadtVvzmjGU/opi+rJiTDDM2qZBFHh+akhsU\nt6l+VpUzl/pdfpGoIHnXkMe9DIAcbavutKxS746U77q1cgLCvX2IztChZ9An\nTHv7GjFYW4b3ceZ/JrHdD4CqOp3rAQiD80Kl3BIwtRx6Q20yL0NXDLCMrZ7M\n2+rLMAHUzwxMGpsUUCFXL54wu1t2At8ceZ6dYPW3aTmFmWDhXykpiqZjMVgr\nf2Zo1tOJIRfnNPtCArGT+2IQw0WYn/hMyrS9stUC0xAflTNxkQrTfnungweu\ngr5klL+0EPCD/afvmi4FCgQxaNnZKglfOUuqGxLzxPOrBQxBcVzONdYeJJOf\nQ6cx\r\n=GXNi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6d8574fe1.0","@material/rtl":"9.0.0-canary.6d8574fe1.0","@material/base":"9.0.0-canary.6d8574fe1.0","@material/list":"9.0.0-canary.6d8574fe1.0","@material/shape":"9.0.0-canary.6d8574fe1.0","@material/theme":"9.0.0-canary.6d8574fe1.0","@material/ripple":"9.0.0-canary.6d8574fe1.0","@material/animation":"9.0.0-canary.6d8574fe1.0","@material/elevation":"9.0.0-canary.6d8574fe1.0","@material/typography":"9.0.0-canary.6d8574fe1.0","@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.6d8574fe1.0_1606758766846_0.22697504036808058","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/drawer","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.fd22355f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1120ace2ea4b42be4ec3c14bdb109ad44c268054","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.fd22355f7.0.tgz","fileCount":48,"integrity":"sha512-FCphQsUqm6YToS7MAHTZNxut/igaPVN7CX10psxghZ884K26JPwRF2XH6++R+Neh07K5Y9oX3IoL/MpLk/icuA==","signatures":[{"sig":"MEUCIHWj3d2YNvm+Jw05YsS+IjFBD3+QIbS+1zITP8Q/uKa5AiEAlkcwPECdYk+rSRdcRAgMmz9ebB0cuHyNijVxi5yAy84=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXm3CRA9TVsSAnZWagAAghUP/1ZROWTJTS4GevDCr/Jr\nYLXgGyJ5V8GewzwFzXgE+k75KESXaUOIYlqszblVcovRtO5Lx1mJPMq2gEiR\napc6OAC0tHA0uaOEcT3++DVL6j3PouewsUOPbEnAsOTt1Qd70hIzuijh6ZHv\nII1/KjyhhfDG+S44tLwuFovDxfHDLOE84m0wl4E2X/B9TL8tSSI4YyWDQwKm\n5CAdCCDmTs0hzfSECVlFHW+OouxCcyyPTfpc3aZrBlq6okfcGRFgtaUM6Zb+\niV05MeuapRnmq9JmVPbi1UvnsHQ5AVEqBzk0qpkUPAhzWBE8IseldO/6mWU1\nLcVPwfTth2sgbtxrVD4KSe/OjhysM6URwdF0nslqbwnU6HVL1c/fMcua6odq\nzFL3okccjb4cq3KSlMVE2//KzHJQ3T0XY+ibSqcOrm+wTLq4Aby8VoiBnd8p\n8U0jwtG3oPhBTbU19X97GHgkbXs/lnEXv4AujfmVrpY1bhkUtekB/ir8zG/J\nH9LeRiAEuGm/hlId9PtHmi0otKplsUV8T2rNU6Ub5gXi+RUFUNaljAtqiyUD\n55hd0P7DLANEmL9JyljAS1ePutQyedvXnVHSBG4hgopQ/ugWH+DVntBILgXn\n/CnJL8LWUHr/gp85wXpobtZELSoU30LK/5cA9DaX3DnEgrxWnpIu/eRiND1/\nJk2m\r\n=gTwo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fd22355f7.0","@material/rtl":"9.0.0-canary.fd22355f7.0","@material/base":"9.0.0-canary.fd22355f7.0","@material/list":"9.0.0-canary.fd22355f7.0","@material/shape":"9.0.0-canary.fd22355f7.0","@material/theme":"9.0.0-canary.fd22355f7.0","@material/ripple":"9.0.0-canary.fd22355f7.0","@material/animation":"9.0.0-canary.fd22355f7.0","@material/elevation":"9.0.0-canary.fd22355f7.0","@material/typography":"9.0.0-canary.fd22355f7.0","@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.fd22355f7.0_1606777271172_0.5067507968579366","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/drawer","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.c4ab98722.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2e89c98695cbc0cac2196e0be1a377d95c6fd8a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.c4ab98722.0.tgz","fileCount":48,"integrity":"sha512-H0IM0x4EQhUZz4rxuwyukxHp6BwhwWQO8PZw3aRtrJpB4dpKKUjA+ozUARCM8DCT1Jx3scZebe2l+OrM3r//Lg==","signatures":[{"sig":"MEUCIQCX/OwR/zKNDYTYvnyNDTATFFpLgLek+Fr5lRLB6sNp8AIgGzjUv9hma4tucZVhULDyyP9u1YSsbJkLhNZT01GWRRs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxua5CRA9TVsSAnZWagAA4pUQAJhjobMcxLWQDhjVhZIX\nLTrp0oY+QQiMGvM6HDbstkzhTOzYEiQ8lExyaR2glVlMLN9/f+GFYxJYpa3c\nLcjug/E1RcDg5WGnLaerJbZoQrhqe0V3pUrV186vDhF2j3c38yPni4ll5Ulj\nHXbBVaWpplDaCJ0FcMy2eRmg8DUgFH/6FGri516Xo55fKpniF/g2KtKfZfjw\n2j5krCcG+tycEKfmHRxRzEz2oYlSNHEXJHrjiIV5btiBFWqd6ghIbftSbV3M\niSxGNaBEtQ6UnvxLHJ4UAlrqvU1IhfvU67q8m8t8bRUUXlVWngZ4+bbxf4Zp\nxPTOLn3Exn9pOqLMYas6gWqOisppJ2S72foR8Wl6k5QjrR3FYs4709g1gvv3\nwDXbd3bMs7gyq2pW1zzf/d/KBTW4kjagLGfTMme/ncDpmv5HZRtdKXTtud84\n7rropcgu3kvX8sTNLH8eJ6PssuVAMN8uk+OH3vpJelGKOnu2t7gwjg/7RL5G\nb9D/WfKxBSB15UeGkbn2UiLQkjzn05zDWZEVNCX0xi1L29etgmeWlLE+NLTE\nD0ywnOyh6qJ4uBxkrXrCEOrO0rI4uvOWXzPKe9Ho5eNnCAR5PZgnSiwASZVx\nSl58eKqHK8EQo13Rm8aU9b60hNTdX32aBbuQI6Gih27ncB55rlkuQrZDZ6oB\nsdbN\r\n=22Gi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c4ab98722.0","@material/rtl":"9.0.0-canary.c4ab98722.0","@material/base":"9.0.0-canary.c4ab98722.0","@material/list":"9.0.0-canary.c4ab98722.0","@material/shape":"9.0.0-canary.c4ab98722.0","@material/theme":"9.0.0-canary.c4ab98722.0","@material/ripple":"9.0.0-canary.c4ab98722.0","@material/animation":"9.0.0-canary.c4ab98722.0","@material/elevation":"9.0.0-canary.c4ab98722.0","@material/typography":"9.0.0-canary.c4ab98722.0","@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.c4ab98722.0_1606870713041_0.02448927446808713","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/drawer","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.977585650.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00354fd55e1867f2029e564b6e435fa90d7003d8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.977585650.0.tgz","fileCount":48,"integrity":"sha512-eEqFf/H1av6cukmi4vYyWxMkjEyApgXEe2dEb3qEEZ1VLwxD1COXvGIzEspqdLZJwF8Gd9FVBRhX+jEGANeMag==","signatures":[{"sig":"MEUCIQCmPe+L0l4Sg+H0njDr1yZFES80Hvi21e6unL7lfWgIaQIgOoLaglNhcAPTXEHAe9mSrHXVYbs077dIJhJHMujmFG4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6guCRA9TVsSAnZWagAAII8P/imkTC8OZ063k9pC3UFW\nvzhARop6N8aNFMgejB+0RPzKROJeXFzIjaOERCCR5fh6Lx6HmUyDJjxuVRsR\nUf31wpijCtKrg3QyTtOLtLDOdnA/AS6KEqa8rFbqcFAKnfflCD60pMeK3wO6\nP6ELIYvuLK5US9v8rQhEFgwHcLlUGVWBLg5J28MZsvirU0af5hrvfTle6LSx\nrZng8USjfpVgnVPejo5hs8YLxTyM2OiVbbSTqbs/7s4DLwVokHCI+tD9HpmC\njnrWSLGf/AiKX9QiC+cRBZYcu6tN3LE+8XMNf637tB940Izw7kHDCtp+V6w4\nTP/lELIyg0NpTnBz49Pn16z9IFeFYQTJHHwQQVEjHU5Qz+0w3oPTXpb8YUFT\nWn8xTvxso/G7YnmEp/GSflYV49avuA5+gfESc24j0JnlUXb2bchVax2Kp5WS\nmkbErwLUvoH+THS4M+hPtSp5GGrju3CmlgEg8fl4qFM3cDhGpkjDYqFaeo96\nNaoZz1RBSBbsDXyknyWzY+96h1irz0i+kUrdtFnf4PfdqB+U9W2U/YtsOu0B\njDRpBgImKGNV4Rg2qof3pnKT8UfkLJyYckl9koHvAPNkRmgfPEe26QQjGgbu\njXhOAY9h2bY/wxN1rvsHIMHAITm/ULEQ/VAJ+PwG1P14mu4KNbbV+X7FSR+i\nKkkn\r\n=6V56\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.977585650.0","@material/rtl":"9.0.0-canary.977585650.0","@material/base":"9.0.0-canary.977585650.0","@material/list":"9.0.0-canary.977585650.0","@material/shape":"9.0.0-canary.977585650.0","@material/theme":"9.0.0-canary.977585650.0","@material/ripple":"9.0.0-canary.977585650.0","@material/animation":"9.0.0-canary.977585650.0","@material/elevation":"9.0.0-canary.977585650.0","@material/typography":"9.0.0-canary.977585650.0","@material/feature-targeting":"9.0.0-canary.977585650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.977585650.0_1606920237649_0.06550908909900133","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/drawer","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.c7edfc7b6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7451e9e710e9be17a33afea4529ea37cf7fa384d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":48,"integrity":"sha512-OdkQQFf9d1bB8ZHQydYrHcwqzfwO3yOtxAEUMq3Wprtzelpw8xbxqtlWCwp3mJ+ZTkTwLURxuM0Z9f99nbRPVQ==","signatures":[{"sig":"MEUCIQCtWm69+go48a9FL2mRFnJ3peOsgxg6i17qvyv1uoFf6QIgHAaxXM01e8pvQuWpWgaMVULrviCuvBqQ/nMLA4ycpdI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6nZCRA9TVsSAnZWagAAk80P/i8W6HQankyaOmVPy4nw\nJ2j++ZjvNte0savG3bKZ+3+4KRh+FLcFm2rPtLTfUyMrJ3wVblFpO8rQPNty\nTYHvsRDAAHtLfTnjpaqeJiJAAIAJlhZm9j8vN2Zd42h3ym77TZJRP8E0Ztcs\nxqwubdzzpPt3R/jBcHoT5c4BoFsLcjMhhSJS98XrrzU4TRGfg6qT9I2QCFti\nSt3hAiyzWr9Pn2vi/q+EL4EVoFWDx5uhKHwM+saUZZbnud0u1e2w/3s6Dssq\nkjJmkVr0A7eLK22elWNUncYteYBYkjzwHjMzmCBUJRqobesoM3WqKR/+rKzQ\nM624ENA3bmyNZJciZtyP3KyBFFaECJzwiLMzI2Ch6ijJN/456vmIUBIVEuSM\n8yGSS8C9X8GOrXdSnWCquS9mLpgTI0xiwxnfO/5iC1km/I+oYkBe/+OY3FZm\nDGPPOqKHMTkMGpMsx0S1dltI5xbPeaKBQshkoY8uCJOcXem/68Ij4iSc1Fwf\nkAyC6VgEr7KLNwvV1R4Qf1DJVJd4Q+NlBpG8GT4i8DPMIGs+GLiA+d7mgw3l\nckSs3D8+PS4n0YWO79cfW/6XaDeAsX7RswtPvAqp+d3BJ4/pmiOJr5pTsRvM\nGY+KJvE6EtVMcTRP7ab4To3XLt7w6xeWmrwvLfT4hLLY66z9OzM3Srw3gz/b\nWz3u\r\n=1dOd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c7edfc7b6.0","@material/rtl":"9.0.0-canary.c7edfc7b6.0","@material/base":"9.0.0-canary.c7edfc7b6.0","@material/list":"9.0.0-canary.c7edfc7b6.0","@material/shape":"9.0.0-canary.c7edfc7b6.0","@material/theme":"9.0.0-canary.c7edfc7b6.0","@material/ripple":"9.0.0-canary.c7edfc7b6.0","@material/animation":"9.0.0-canary.c7edfc7b6.0","@material/elevation":"9.0.0-canary.c7edfc7b6.0","@material/typography":"9.0.0-canary.c7edfc7b6.0","@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.c7edfc7b6.0_1606920665221_0.30956157635255366","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/drawer","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.4f3347306.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8753e4df693170db04e7ed8886821ee5d0ad96dc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.4f3347306.0.tgz","fileCount":48,"integrity":"sha512-vS8MgiJRvtI4Aef+ZQcU/+hVMVWbfS0F5SrMIzZ/vUvplccz7L/xtX22zrDzKgyGkpLbfpEIAkN0rGJaIlkNLw==","signatures":[{"sig":"MEUCIEiLTj5o0tExaZoKykM2iFRcQkIRL71WXqa22xSnRi4xAiEArGSl/DTkbY77pzpTsawl0rr7JPqi1lfnZO2S7njYlNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx64RCRA9TVsSAnZWagAAkX8P/R/YvJJt6Jp8/bNTogan\nG8BshxtS+xqC+GL93rrDdsHfauuwc0HHs9n75pInN9kaHVi/DARpYStY1req\nxrc5L8/LFXXw9GJ0vcoQTd5oQayYkJvO6FJaaYBiHqe2GUOcMqmWD3cyNzW4\nLJAlQJgZe5RTiH/lIZsEjOG8L23JeFP+QWDINbMuweiBQVUBnR5IuVDc1zdk\nQG9nk6JWyMchqk8nav1L/8bPfWyxy9Jpp4Ei1L0KHgrLf+UozmQajgDqh7mc\nQWPKz4o8Q8At+uvDnLv5VwkewpyYOqnXm1gwEztsqiXx5zKCaWZxsk530PfG\n2/vsB+EdK1r1QeEPzRCutjBxK7qzZ8fyqSjdpm5ReVCa4VtVOBlWq89H/2XM\n5RIXRNPn4A58CJtY2GHe94ieU7/Hfx1sPGRE5I8GJ1KZ0Eeo3X6ZA+ScW7I4\nVsKLwouWiqB5x5bVvp1dvP+9UZUyJXtO30VuyFqECSAexUFtXi4znboVoJNg\n6iV8lv/zJsQQFbv9oAnu6HdhyHk/ngSotlBm1gFu94sxD9ghKScF/CDLbWf+\n05zdbCjYlUIMjmgUpH589v0MdOFOucZwakC3EHJ+gtjytxIK0XSevTIhcwEr\nTZ6DzTon8cZ7SgzByTLuS16RMlqIniUL+fHTk/xEqnq3y4o2MD7FnT+V9FBx\nLSc7\r\n=jc7a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4f3347306.0","@material/rtl":"9.0.0-canary.4f3347306.0","@material/base":"9.0.0-canary.4f3347306.0","@material/list":"9.0.0-canary.4f3347306.0","@material/shape":"9.0.0-canary.4f3347306.0","@material/theme":"9.0.0-canary.4f3347306.0","@material/ripple":"9.0.0-canary.4f3347306.0","@material/animation":"9.0.0-canary.4f3347306.0","@material/elevation":"9.0.0-canary.4f3347306.0","@material/typography":"9.0.0-canary.4f3347306.0","@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.4f3347306.0_1606921744997_0.5172428756084477","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/drawer","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.37fbae10d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2850033d23207995d06593edf57fd49bde8d339d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.37fbae10d.0.tgz","fileCount":48,"integrity":"sha512-QtMRlm17ZkAfEi+lup5IfFYZTmRjsZgnN25mJJLYzI4iq8sld9SzlQI/gQ/wKhYN2C2N42scVm8mluDF2nOgxQ==","signatures":[{"sig":"MEYCIQCd04nJiN7p7EBap6NaVJYXpayCMakAhPpugMtXl0xahAIhANUIS5LZpv4Yx5tcUse763vDLSJ/7jA3D9F3quNzsfMI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9pcCRA9TVsSAnZWagAARq8P/1YZQZYXOncrEn8FgoU+\nAWkka+bAuqtWv420ql+HH5QPXafmUfwX06LOTfP36DeeqWkZDOb95/fInt/H\nzpjIsutcyNbrH0VLLFmDLj+u/cijv8SZ70R6xtBCIEwr0SW3Xed/hzgquLnK\nWxcoNvNjoxK3sAvAgqWIhi7WnysSOlI5IR2J3jrj8sQWSKxQ0lqqRM4vyQdf\nJiqcLRZSjjjVskyb7GfLQ/TVdoeXA8g45mZ3sOPvy3lVOis61AGUb7dgIBR5\n89u6IJQgjW1FHD1NiwmLtXeIOBC1QbQg/sHPIdB7y9iVHyCCIZPy+LeFVPCR\n9CEC+/wDDll9r/crww2zkTGRVXRbJjUEASNXYyWVfJyvCIR+kzuVjIvRXGMU\nNosG3Tgs19Wl6LJ3bUH/yRYXq8Rdnf91oJkBM9hRWCmxuBr++KB7nv8PWwg6\nr32aR8JnIxAGPEqBeZHpLrY6hmvQ4lo90n5mbQ61E7YSE49ZAOLneURDVl2m\n4BJzVZ/Y1FQlo9zPFw5opnozJLqThpQOY1Q/Lh+SdMD8tKWLwJPpboOV/LFy\nhQtSYUeey5rWYc+T2GtwHEMSxTbQAH7uN74DIOZh8SkD0fILi8rlj88o+0TO\nVuShht+BToZoS63jOj7bCV3qVmGi01C2CEnILVBwQG+YF2qC/CVtUP0N4zQt\nMYEi\r\n=v5XY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.37fbae10d.0","@material/rtl":"9.0.0-canary.37fbae10d.0","@material/base":"9.0.0-canary.37fbae10d.0","@material/list":"9.0.0-canary.37fbae10d.0","@material/shape":"9.0.0-canary.37fbae10d.0","@material/theme":"9.0.0-canary.37fbae10d.0","@material/ripple":"9.0.0-canary.37fbae10d.0","@material/animation":"9.0.0-canary.37fbae10d.0","@material/elevation":"9.0.0-canary.37fbae10d.0","@material/typography":"9.0.0-canary.37fbae10d.0","@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.37fbae10d.0_1606933083758_0.20791352143124575","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/drawer","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.11da3c0db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"996de7f7581c88bbe7c4afcce8c66e311cb62ceb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.11da3c0db.0.tgz","fileCount":48,"integrity":"sha512-c/fL8WXMRqFIK18uTDxe+DNyny+yRZ/MxVaOGqzzTTNNarg7SOrFws6995J6zJGD6R+2OWnTUqZj4p62e6nh9A==","signatures":[{"sig":"MEUCIQD6vCOL9tD2gY4qEJ9WOvJ/T4nab9ADpuKhtSn3vkCRHwIgC1n84l+jmtaq2WKThWi8lsyD6C2XyDmJxqtQ6KQw4A4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/fjCRA9TVsSAnZWagAA9EkP/0NGCwkuHRiyERllTvrf\nVOi2IyLI0me5IOR5lrrYFRgpYnZRx9Yr0DGlfS6M45Cdl5dzFjte1lGawoGS\nQ7VqgAVUrn2VSaCVLh3CkXGy1wUTmW/oaXoqZlueTWf5eQN6xXSQU/8mH5ZN\n8Bt8XUjeYZrWGG1PdQbylt9BuQYBZ5loK4rHGYKCYAbYIdoAMoVNTv3cjpee\nVIxeF/e+ntbMixWt92/zJiDyxYZJyOVJQii8F+RsFFZZIeCl0gOkMYWnrjKR\nnDV0F72CQCZweiUIt/VjUcT9g8kahsHhUNe0oXJJwcuisBvzH1XcXxBIf10p\nKidbvzt1GjCzP7OojGAgymnPSiCcceFXvuCmT0xpZQMcp0a56h24ho0ec8IT\nLwNmglZ5ZY0Ij6yeIs1vrhYMHF7JGI+0ThRVscNuQ/NXh1NUMgaOvzFotkAY\n7JqGGb9MJRb/vbTh4U4ApWk1N8HDtA3fKnq+44BaKVRvXaMQxpIkAGr607yX\nWRgCovgpPyokZj42BChnJnAfE+HzuSm0hoLwKs7xILr+NZ9Mws9O29JbyxdQ\n/LzHPn2ccdhNQpxw0pV8mtmiUnwReNOAyi3DdmPcUYZjsEtebBEjgPSHr4qP\nWkcLMyc3CWmNre5m1GVJlosAtVQM5L6fVPOMaQWGoJ2oJrCx11erYyRBMJWY\nZ/cy\r\n=HKua\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.11da3c0db.0","@material/rtl":"9.0.0-canary.11da3c0db.0","@material/base":"9.0.0-canary.11da3c0db.0","@material/list":"9.0.0-canary.11da3c0db.0","@material/shape":"9.0.0-canary.11da3c0db.0","@material/theme":"9.0.0-canary.11da3c0db.0","@material/ripple":"9.0.0-canary.11da3c0db.0","@material/animation":"9.0.0-canary.11da3c0db.0","@material/elevation":"9.0.0-canary.11da3c0db.0","@material/typography":"9.0.0-canary.11da3c0db.0","@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.11da3c0db.0_1606940642675_0.3796642440951279","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/drawer","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.489d4c219.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fedff8cc00031c457126e1d929926c41328763d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.489d4c219.0.tgz","fileCount":48,"integrity":"sha512-AlFZKDE0XiQxYOLKfwKR26IzsEzKc4zDkK8tZ9xHtw4gxVCOsVLuMyLHsebwhgP2NyfnR57av174nBvIDZ8Ynw==","signatures":[{"sig":"MEYCIQCkrXFGEF1ikoed7ot7v9upKfM0+D+NOc9OPO7RjNmBtQIhAO2re0zKPfsRoNJS61RJE2LPu7MfjMy8Uuy3UlVXNWJB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQTGCRA9TVsSAnZWagAAczkQAJwlNQdTosntjpH4WB8D\n6cNp5PyqY6H4Zl6H7wjqFPQK9TiNqtOwZWipFobk82eWISkhbwf4Yq6IoJJV\nwhQCdgkztPLKtKzgFzKbtXVYWwcl1qPVj4FCp28Ng0IJgd9pmwwNdLvYrWkG\nf35sBHe2/XM4FWAjVfR2t0fYu6NJL6zx3+KqGezl3Xap6ofpVv/J6boEFHSy\nughL3RmOlT3jbV16w6TYDAQuwZsWTRafoYHlDCH6bw846AK0+1j98t8aBvhI\nJheZb/+tF4Dpo3nfEACDkKTJp/jWFrPapTZWSGfeFXGY+hca3Fu6l7BrF9di\n3MEhRSPkp4QKwaG/EkoiIA29XsokfRlcyy/Rj85FJJlgcDrcN8zD/MtdkCaU\nhAVYg0exWkvk/nYtukn3f8n8naeKjhEwrThyz7ryXQDMS4s0Bv+b2s+ucj64\nA10n+AmAhDYAQoSxhTZfjTtKUR5VawUVpVfr0MfLJ87/I2OW0vsNxpe8qKwD\nTFmOwBJBE2UUZcWeFYbBf8jFsw9jDHnSFpv9tLMMD7HzmP3bCSnQ0wj0LJ74\nhDr6ozKSmVcQiq9xJ0yFRHeSKaA+e6yKHFFTvyhdMb8oWLgZ06EJaqmzDy/e\nJSe89Sft3tIi+aWtRgZ296fa9H9GK1k97Bl/1TklPgZ+syKS1oJiK44ovDK1\nBZlb\r\n=YMUi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.489d4c219.0","@material/rtl":"9.0.0-canary.489d4c219.0","@material/base":"9.0.0-canary.489d4c219.0","@material/list":"9.0.0-canary.489d4c219.0","@material/shape":"9.0.0-canary.489d4c219.0","@material/theme":"9.0.0-canary.489d4c219.0","@material/ripple":"9.0.0-canary.489d4c219.0","@material/animation":"9.0.0-canary.489d4c219.0","@material/elevation":"9.0.0-canary.489d4c219.0","@material/typography":"9.0.0-canary.489d4c219.0","@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.489d4c219.0_1607009478020_0.35753008460034263","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/drawer","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.6557a69d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c2dde2851c315a31cf766081a27f48b06f85e3b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.6557a69d9.0.tgz","fileCount":48,"integrity":"sha512-wIiSvWaty9UHc4QD40ykKhnqtwOauiWgd8EMFVG4YGLUweEyUjAERgDAVfnB2zPXxfqCWQ4j+YnwML7tOUJVtA==","signatures":[{"sig":"MEQCIHIc8eSL6UXhU8bJsrAFkeEDNVPn5Ha8EnOCyFqxz/BAAiBEnb3SFllj/OUhFb1GpEBvv79hPSElvUzTBpJlH50dyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQeSCRA9TVsSAnZWagAAl24QAJhQdLS5OWPNkSGrsG8r\n7n8e0e7gmnLcDtKEPFFPVgsymhylfu6y8C/rv4r7MqNoGnI/7h/bQ+diFTO8\nq00R9w7kh33n14xe8zlNrI0/HD4tmg73/aIIGql19uQLvQNvI5/n37e5YV8E\nxHxvtILQt7k7Ev/iCTnP7ZFeCL6L+4UPECQJu7re1MTFG/EAmd/TcxaNf8Sz\nKhDtHHNZqfkaLD+44jlyk/yxY+XFUSEf5DW03POKXk4DG3G0mHWGPXb+adh/\nfQygb4gvAFLbeL16SU0Jy8iRdhYJPNVs1pvuZgKEvTOpV7j3tCQyuGk/Vs5U\nE3qAgPmKTS32DdQvrdQOEPKg66Yuq8hwaz6De1QNutLYtydnSYcku9J3HPQT\ncbVZch9wTiKreE4uIJ0LnO+2/4v4pVVcs3cvHKwY+PaiIU7nzuNTFFw/Nsg3\nkAGrnBUO6jUTxGHNEE8Xm3cJVHbVioiJNlgrtvNwiBUiPkPb2nUdj4qmFGTw\nnvSaw3VBE1HGuCZ9AdKVdXL46uyqxkhZ6+LY0b+BT0e1ziBXctkpdG6mKma4\nBqS9y4nfQkAyteMOzSGAM8acJ1gW3yNa8LyI4DnZp5fzSxNbpnuNRs3D5wcK\n5SXqTFr6YEu6hxEHGOzCztklMvWwj2t8WTUzNiweDT/VuPcei1Tk0zUQracm\n4hR6\r\n=5Xie\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6557a69d9.0","@material/rtl":"9.0.0-canary.6557a69d9.0","@material/base":"9.0.0-canary.6557a69d9.0","@material/list":"9.0.0-canary.6557a69d9.0","@material/shape":"9.0.0-canary.6557a69d9.0","@material/theme":"9.0.0-canary.6557a69d9.0","@material/ripple":"9.0.0-canary.6557a69d9.0","@material/animation":"9.0.0-canary.6557a69d9.0","@material/elevation":"9.0.0-canary.6557a69d9.0","@material/typography":"9.0.0-canary.6557a69d9.0","@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.6557a69d9.0_1607010193404_0.7341646567516147","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/drawer","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.4ea1b7c69.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d3489a64752355f76f0666b2cae04ff7790f68d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":48,"integrity":"sha512-0D3tN/GSHwN5UjGjXw0nERylc1L2dec2yPON9tULhFONjkrnWqS1clRkDDatAGjpZW9c0ap0b9kDlibtFP9VUQ==","signatures":[{"sig":"MEYCIQCtwiJ1BCe4w4VnTKqShc42d5AG4NxlFRmYbFRHbiYgQwIhAJ9h0+OILDY089oel5Muc8Y1awX/Xt5Nw+Zdz2Q15K2w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQubCRA9TVsSAnZWagAAxhAP/j9OfYQrKA/K/avOZUk0\nqPpUfWlMNAWjXYPDA3UYfJA5xNWmHKPoMhlX8gd7p1EzDEoYDYTcCjwumCAt\nmPBPgXwlkavI/3j1+zjzskwJ/+tRkAMkq37UcOCryzV+dj/0lODCowTDx4mX\nKF15DGisQdM68d0SxInJlEAT7SB6ejVGi/wqJw72XAoDjOw/Hthmenhe/6nk\nIUMM/cb2yze6mQAJc7+5I8a/3Wbrec+jmDM1qSDFgn/D2z9C29noki6Sl5Ug\nvo0gdw0TVehwwKUkr9jeUNf5CHEjzDCCup6sT1aKcER37AR1LONzo+aPvRXy\n/N2nN8n+pgUDchk7eR1G6MKpVu7f7EWJABIOXvIqrMz35ahCCkLcEk5i8J/L\n2kyK6SMCbXa7MysrRNrHvyR36iBqCAcwX3wWIvrFQSdhigWhZz/500xZ0m5M\nGWawmjUdv4iKNQk41IreYyYdrdyYdJS61kclVJ1YTzDpHnlt4LDGIiVV/H/o\nG0eCAGQdCOzqk/OoNv6hH720y3b+RYGQ6ki+Wm5YXgiwzbU5KPM5xSyHphb7\njQVO0L8rOcbVoT7UHaVS3fH3ZTxEUDGekfgf52iLUFE3sXQouZtvcL08lG22\n+oSFmLG9d/HxJChYlqDQh4N2HvdQGeIlFpYQcE2we/eB0uM4PSA93qPiysWy\nNal4\r\n=z0h4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4ea1b7c69.0","@material/rtl":"9.0.0-canary.4ea1b7c69.0","@material/base":"9.0.0-canary.4ea1b7c69.0","@material/list":"9.0.0-canary.4ea1b7c69.0","@material/shape":"9.0.0-canary.4ea1b7c69.0","@material/theme":"9.0.0-canary.4ea1b7c69.0","@material/ripple":"9.0.0-canary.4ea1b7c69.0","@material/animation":"9.0.0-canary.4ea1b7c69.0","@material/elevation":"9.0.0-canary.4ea1b7c69.0","@material/typography":"9.0.0-canary.4ea1b7c69.0","@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.4ea1b7c69.0_1607011227111_0.047605530076736846","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/drawer","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.eaeb78ce3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bf22d1ddf49523edeade4bab90fac45050689dc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":48,"integrity":"sha512-Pk9JuJtpUxyUY8AA6pVMY7LJHH/mPCejuYPmrSzGH+UAW4/t27V/we+0fea7m0ua3ikeZOLn3f+Hhu96JcSdRQ==","signatures":[{"sig":"MEUCIQC6oH+qP0cxFTs2DtfmJ6KSTMshpSp1gdZSVD88vLZBrgIgdNhTcETNaXtXQlZrKnfGsVGGC8Z8w2yWQ4NcHwyRaJA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRpBCRA9TVsSAnZWagAAbv0QAIY2qE4EgC4GQe6sRjPd\n7tH2570j+Wb9ZC2yBHjpCbf996XFw4GGVvpp4uYgDveN7yJKy9o3v5EdYnR+\nrXb/NEDHuWP15qy/xSFmoafW3N4+GmTl+HJZ2Seb8dlbbX+kTmkmI56FCRb0\n/EkpB6g9AGPUjue92CfpsaSskebw9sYofnnZwvfBHBMw1cz2IHJssnLSu9Mp\nakUQKHXsISDPd6pbddcPAnpC2xKm3CYWH/KlbMqbUfhtWF4CIs+ChPyHJol8\n6nM9uMUJihj7O4O57A5Iy1Z9hjIUMX3PON5rjYooe0MA5fhI4JwLUlkw1lox\nz4sTtvFOpYFyrlHsvUhX278C3wi8s6IYTXykoQ8yjtefFxzJPp4dh3sBnaHM\nX9EeZqc2m/56LM82svLKpVNCofJovoaXpAmbObaMJkSDRv7b27NYaTRR2fT5\nicAvYGRCNGxZurwicftQ5JFT3aG4LUB5cwNhevpw2a+vdfiW2OJGib5jDmIX\nVxTOOErQdIFcnlvIzkjJNmtWNvC89Jh30nHcVuQ2j6WnCHS2pFUiBeY6yL9m\ntCtc+0WgAlV3uW42juLbVdtJhqLXDQc0R05oNcUu2doN8rdNG5nDOFG0/NPJ\nNIfVRIaFpArhelq2ThBteEnNCfRb6snHynqnbzm5TVcz/Jhx1oaj0ks9pxSv\nXKxr\r\n=uVpL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n## Contents\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eaeb78ce3.0","@material/rtl":"9.0.0-canary.eaeb78ce3.0","@material/base":"9.0.0-canary.eaeb78ce3.0","@material/list":"9.0.0-canary.eaeb78ce3.0","@material/shape":"9.0.0-canary.eaeb78ce3.0","@material/theme":"9.0.0-canary.eaeb78ce3.0","@material/ripple":"9.0.0-canary.eaeb78ce3.0","@material/animation":"9.0.0-canary.eaeb78ce3.0","@material/elevation":"9.0.0-canary.eaeb78ce3.0","@material/typography":"9.0.0-canary.eaeb78ce3.0","@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.eaeb78ce3.0_1607014976717_0.20456724835175666","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/drawer","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.1c156d69d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"674e5b3fb3dee4ee86eb348f601f2d54576c8c7d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.1c156d69d.0.tgz","fileCount":48,"integrity":"sha512-T7k8sgXKE+01geMmuMlnWsJ2NolabPcn9Mf42nO6Qc+OA2hMtuvuGt836407pl97XudqF4kpr+Ckbxicxl7ulg==","signatures":[{"sig":"MEUCIQCXQEEpkvzNgxkFxhmst/LxBN/YcgLewbrRAhDYsp/WiAIgAWdQGLU3Y0XCSqE/L78/oDGjQP6s+q4YdTbkByfjeIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU67CRA9TVsSAnZWagAAu9QP/jYMD+RmDGIuIsqYIwr9\ngLB8sNawgnnIqSjJGzGqvwAnyvalyaamceUZLcmEzI3MxGguNWWJ+oHLOlgO\nDfHHUvix5pt3brH6UigLu2feE+djSsHvOeud/YA0rzIBmomh/3hcdYJtYc5y\nKLq4E+GQriMhuNG04Z5ou0iyoSmE1IxcHgAhRbFfVLDpD9UNrYb1PafgUwu7\nIy9aT5Q2BmdU62b1KmLC7wIiGhLQBuBtzgVRoi44wghBiffmVvV15GKhinWL\nxeB/0S/hvPCHme7MugQAmr9stD/ylq9S3Nl7ILsoEzRK83R/hkEamwVlHUf6\nNiWNX7teIN6cO+LBxPNA0vgLkcfHi8uNYAu3fBmpZRKjSwaayxSwbXoXa1Az\nj/vdX6tS6yZj3xlZAoKF8PEFOwwdsR1htY36/2F8j572QYJtfo9tQZKqI8rE\nvpPj6uO8gcn6W8AZTrp78kJp0KJ+J1LYzpSohsL2S9e+gGfCPyovwskNFbyH\nJ7wNsVfotTiRBtHeQk/Q89odtsOJzFMcNVFVsEv8K6dRs4X4x1B4CR+wJIW3\n7QeNqKKRAd5P+hx7hW4xwzRE4I9i6GaGnzQsV7+avsnE0Z8MH5q+LJUu+0d5\nifyFP5LuPadPMwpJjyG8ZI8WkHGzJc3BOxgkB+qWOGxS7eIM8nUXr/l0D+M9\nnnIV\r\n=FLk1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1c156d69d.0","@material/rtl":"9.0.0-canary.1c156d69d.0","@material/base":"9.0.0-canary.1c156d69d.0","@material/list":"9.0.0-canary.1c156d69d.0","@material/shape":"9.0.0-canary.1c156d69d.0","@material/theme":"9.0.0-canary.1c156d69d.0","@material/ripple":"9.0.0-canary.1c156d69d.0","@material/animation":"9.0.0-canary.1c156d69d.0","@material/elevation":"9.0.0-canary.1c156d69d.0","@material/typography":"9.0.0-canary.1c156d69d.0","@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.1c156d69d.0_1607028410604_0.9415676395943695","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/drawer","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.832668d33.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"930aead5628953c2e9b51835cd8dc6129e52f26d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.832668d33.0.tgz","fileCount":48,"integrity":"sha512-iafNg8tyL26Fqu82KSLsXW9GAuotrOTGJU2J7Y31sdeeFoj4jrQQztz1UpZAXKmU9tjOMJGHkIzeJ3AoEWSknA==","signatures":[{"sig":"MEQCIChNmyYaHm6YwYPyLi6GG1MSMlcSDGvhR1gh037HDWTeAiBF1totwPVEBA9axy450tMVJgwP6nav1p8IgzDHsXs4xg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynrkCRA9TVsSAnZWagAAtAwQAJO8OwIBDoSXeiyUcRa+\nInMTKcuOSVD9B+gNnmqCfv7QMLfMoAwaKXOybxmQA2E+wn8bWCrW899Br5ya\nzEUeA8E4yWrUYLDzP0EfjQpBiFuqaMRSxR5JHnMRkNv8Ee4Bl4VP2Q/DuYxe\niAicBSp8Vv/+1arfJKL15Ubu2whW73KWUu8YAULXCBvb9o4YBifyQmQ0nEYS\nchEj6P24NNCOWOl8cYDJ1GOFwxAhHZbq0DGBqngWYH7XqeHTftk6NkW7LiyD\n0gM7GbBfofqUwYtoxi7l4+N6zVjT4bD574mJS6sd6EjnrG75WVxsd2A8i0fD\nYwA9CS4MVQsfaTep7UGlv9X4/55vavtcd2sAtARiniqHCaJsKJNIWlVYpay2\n4AQ1qMaVy6aSgqn8tpvt83UsNMDqbjnGxS1pkhpHhLvdajIJZWEON66aLi4U\nsPngrQ1ug8IBWj8UAVNiFZ8lxOlX5baepyaUVtQt5IlKY2hkJAclhQKq1cB2\nKmFIdDHUnjkj9cdX6TnUnUug1vtopsKCmMEokXlO48MCSxDcsHpFaruawozg\nBsSa1KchIqsTkTSgHYV9dfePmW5yobcoCNjO7mrB0qOR9uAh9fadXz41mzo2\nJo824Yyb6h87ffq9+ButJ2hYNEBXMXiWxAlsODy/VDeq7/X4ojMPdvUaaBAU\nQcBC\r\n=uU56\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.832668d33.0","@material/rtl":"9.0.0-canary.832668d33.0","@material/base":"9.0.0-canary.832668d33.0","@material/list":"9.0.0-canary.832668d33.0","@material/shape":"9.0.0-canary.832668d33.0","@material/theme":"9.0.0-canary.832668d33.0","@material/ripple":"9.0.0-canary.832668d33.0","@material/animation":"9.0.0-canary.832668d33.0","@material/elevation":"9.0.0-canary.832668d33.0","@material/typography":"9.0.0-canary.832668d33.0","@material/feature-targeting":"9.0.0-canary.832668d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.832668d33.0_1607105251142_0.17314088757665314","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/drawer","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.4321323e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6d20e633ba71258c8085b744f62d5aa360f3676","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.4321323e4.0.tgz","fileCount":48,"integrity":"sha512-I4Ju/pPl57BMY9MBN51Qke6lYtnCfg/yaP8Wu7NrmaP2G2IGhu5N7ARJCS96p1/Ib1VqYqltD6mUif57F43CVw==","signatures":[{"sig":"MEUCIE5aULRtw0Ql5w9RN/A5OtaKsry7B9wj49/33k+pY/FtAiEAx86MuCuNXnbuZYi++L30OIiUWlgtd7EcQf3bRglE9h4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhJTCRA9TVsSAnZWagAApkgP/0zfLcTJhKtdiUT3EGQB\nqpBtwHW/arDDvfJthWdODvNPXaZd5cprTPXC90CSI2uQ/jM18jvvl5YAWDfk\njxOsZkNcAqOOG3QytbUzXm5Ubeajp5w27rMNB1y8PHyI+0QoenxlcQvOhHcF\n6HHK4MEE/xQ7mnqc7Q1Cbc+gOegyJQyzJsr6dsTdROFR5r11sKOjfSO3Q1Kf\n4vvsRUftZBz9ToJt0TmusgvhhNyugr4bW8rSK1sz4gra8z5QI68k6yA7anWe\nc7UJufK7/INH1PuCzNvNONG3cSAAFVyASDahjdGuq3TUKyQ3hajsyT2Hd7Sw\nh8qECTyhN51pkAxZlnLS2mP0BYT1uV1z6nzxHzwe9u3QVGPHoxKV2sXlrnPK\ntRHQQwZzsiPkxKvzAVcI5qMYwqQpcPUdVtCQRxAJRW+rS6ukrelUvmeauzUg\nsyWAWlw3IhGeZ1tRej8tmUArgLJYs1xY8bBtLzsTgUTNMn7UwSyLP5/oYn3s\njOIqrRdBdc/0tLr2cL8la9x1aXodZqwUUmyxEeSBW3a+A7H4c5XhXzDGb3kX\nnMz3W8xo8CTpMcd4SP0DnR0bUO/19a4/VBPmWfrIYHKAc1Q4FZUIfcB8VIuu\n1r8KpaPq9eDma3FoNQfPN0QwQ3evpnw26H2VJYWPbihY1Bl3K72QbEmJed99\nQMw5\r\n=M6HI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4321323e4.0","@material/rtl":"9.0.0-canary.4321323e4.0","@material/base":"9.0.0-canary.4321323e4.0","@material/list":"9.0.0-canary.4321323e4.0","@material/shape":"9.0.0-canary.4321323e4.0","@material/theme":"9.0.0-canary.4321323e4.0","@material/ripple":"9.0.0-canary.4321323e4.0","@material/animation":"9.0.0-canary.4321323e4.0","@material/elevation":"9.0.0-canary.4321323e4.0","@material/typography":"9.0.0-canary.4321323e4.0","@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.4321323e4.0_1607340627141_0.7003642291869705","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/drawer","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.2d5f32d41.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7e947fc54192e3c9dd33993e061c7575c0ade05","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.2d5f32d41.0.tgz","fileCount":48,"integrity":"sha512-KLgGL57z2wd2if///GtEbvpAgOgYMHcxvme9R5JQRJ45yxAjryET3Ssi+hJ0w0gcjWTYmSp6IPcKQOXmvLuvtA==","signatures":[{"sig":"MEUCIFj5aCVOqaCJSzbMBh3nkqzHPRsbvmqtyD33y9Cx2lm0AiEAwik4vK4SG4gF63Y2enlKi+2G7hftbJw0TGYYueb2MZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzlu4CRA9TVsSAnZWagAAXq0P/02+59nvQV9YAundTQoF\nQvXkN4QnRBDinSo6i4Wy23g2dWq6G7JRd16J8zjvTFb1bSmz1i7ossN2xGVl\ngQaS++FCKr4Z79x8NDv3YdUV88GZF3SYow0PIcOUf1kKYejVtNWeXxlDSe6v\nwg6jkPyd/BDTB3z6PPu7JNwNgPAARjVYoAbJtn+5b1VusnBJ+cVEI4V4tIyA\nkgf+FnHtHeIDZfoJs42C5Ke6THEkFnmGDxJ9ACVbaexvN5D6NCWUIs7cgw1l\n2nVm3Uq9BYL+X5i45uCJtj7it2Jv7n2EFRATvNvzYB2OGZEF0GKTQY44ynGk\nR8GTpPISCpJy+CaVbvtZ3DlTNtP99giXkEOScQC/7AZAtOtmV2igB9RL46Pw\nMJzlqWvCbefyG5DKmAjySANWnoNkub3nSsfIURK2py9KinahMYdwAmlifSy7\n4oncyq7qhwhQtloqI4t88ficC+uPz3QFMzixu95e2fJpRM59zeGCJgxvenBR\nPNtaiHXvuNvylbEZpFVHefeiJCC1QUBTCi6maKvBPs/t50z00YAMlmLO3j0p\nH1E65DNtsvkdwAm3ON/lZKoq4Oq/uciFjZahrhp+QuD8k1OIWETS8b8cjXCo\n7Icn1gryb9vO78s4VZ2qNxh3fjLI+gaehJ3XI09Z+N5A4P+02LqUNKQkus/P\nNu/V\r\n=+6To\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.2d5f32d41.0","@material/rtl":"9.0.0-canary.2d5f32d41.0","@material/base":"9.0.0-canary.2d5f32d41.0","@material/list":"9.0.0-canary.2d5f32d41.0","@material/shape":"9.0.0-canary.2d5f32d41.0","@material/theme":"9.0.0-canary.2d5f32d41.0","@material/ripple":"9.0.0-canary.2d5f32d41.0","@material/animation":"9.0.0-canary.2d5f32d41.0","@material/elevation":"9.0.0-canary.2d5f32d41.0","@material/typography":"9.0.0-canary.2d5f32d41.0","@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.2d5f32d41.0_1607359415619_0.9217666214536715","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/drawer","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.8239afc64.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09edb74d4134df9888918af2b22a1b2c265e210f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.8239afc64.0.tgz","fileCount":48,"integrity":"sha512-EDSkuHefbSmyGkSeSFaTWfGC+oLvdIO5YabJuDztoW//BKBjZMk/pAn5kBgqYY67BbW6V+qrDrUip6CqmVV+kA==","signatures":[{"sig":"MEYCIQCpCHPzQfPIEfdjOawx+bNIPUn+000bJH5GRyOzv9L8hQIhALZPfIse5BAGecbPicTTp5slFUOlg9W4Bd3+eDruXvds","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzoeqCRA9TVsSAnZWagAAKkUQAI05caGfz9lC6u6tSIul\nyUkAG3PHZWzjLcICBy61iliSxGNn00cH3cPh3YV6lKaZjDTZR4MQTXRhv3YA\nQXYvnhV5gwewTs9lsha8vJYvvU4N9Z5mFNVz6k9sWoXBRXp5B/uGbDtuRbSo\ndyVVCeyDY5PXsfgac2IipPfbmQkXwFG/Hc/KahtVfnadzn0CiAemFGyfLiqR\n/SvRtAdD9NHvpbcVsm4G+/1P2ErAvk5tAo6qJLAlf6nV+WeAo39U/zEVrj/m\nApZQrmwNY6JyPFTVFKqKSSuv3VXeEDH7zEhHuAnrl8JLn5xWHWjB13Iod13R\nJj8tGVcyzhyU9/3Wbtf/D8UHAGrufBleSATSAgQoOVYgg9Nd0FrQ45Y6ns2/\n+Sh9Puz5FWTTY47nKxPLYFbja8yQE1tFPYqBjt9NpqcgUbng8PPWiK0meq3R\n6bR7L6byi4dwFPHv9w8EoAuBdLVZfCy+aNEtU+FZOazTQY1KPl2dDzkB7KYr\nTjOoYxCt3dGqWqidsUGdNv+8XdsfAyenG9Dbl42nmSIpf1A48aZA1oC3ac4l\nkHsv3oMVcK+pITD/wLkw+0+SoMEMrIoKV57R4c6y92ErUDgsm/NT84mO5/06\nBVBaO8zOw2OxrV2ld5v/BLI9YdSvoueFQBr5bIOOdLID/LHIArcJw2azmV4q\nse74\r\n=/KNC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.8239afc64.0","@material/rtl":"9.0.0-canary.8239afc64.0","@material/base":"9.0.0-canary.8239afc64.0","@material/list":"9.0.0-canary.8239afc64.0","@material/shape":"9.0.0-canary.8239afc64.0","@material/theme":"9.0.0-canary.8239afc64.0","@material/ripple":"9.0.0-canary.8239afc64.0","@material/animation":"9.0.0-canary.8239afc64.0","@material/elevation":"9.0.0-canary.8239afc64.0","@material/typography":"9.0.0-canary.8239afc64.0","@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.8239afc64.0_1607370665680_0.08664591328107374","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/drawer","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.6871336f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fce9d70827d810e9377476b540034d29c5016b9d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.6871336f1.0.tgz","fileCount":48,"integrity":"sha512-DFTnb85cFnTgYcYzWZ9PWm5FB2Qil3+LlPW/2R5wOAuWCAya0cK/OlfPdcFv/YVfyIR2j35LpJhf8/fM98ef8A==","signatures":[{"sig":"MEUCIFlxeuSDHVlB681z6ghUrzeAOH8gHf736vLYdtA2MjMCAiEAnf+YjPGMQpOydoTunDU4Wgp/WM+djuOTuvus0EkDYZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6O9CRA9TVsSAnZWagAAiw0P+gPpHDwJwL8u5h/v0icJ\nMI0z1gDUOBQoSrlzRESfK/DWWh7BAYM0kkH8PECM5EvZMnqwmnvB1zLWGQa5\ncUgMmWl+K2TK7x5O35PrenMwABroemyz6gVsL/BY4m0N6YpuPVlxSEpKq7Yx\nHCkY9YyT2QVWL/cc4ZapNhN2uaMruU6Ljdu0TQwZ7o+0eEM3MTuJ+RqAYiuB\nSvlqJrmA0/rdjZomSnhUrpqohN9K0RoimGyLtWEoKp43u3QWbNz4dDDjd88Z\nAn2S1I4uSISHBZ3tE6/IkDxcpo03NK2v4mljxcGTNmDidJwnbMAZxUHm5Mmq\nLKMsXvDTibu8oNHJfYhlQXpAbmt+l3NWTkdTFTchfpQ9kP52BXmQRL9EoyNy\nEHM4wSUuSpvDBcteIxUnhd1hVNCn7ZXdfyVuMuFKZi4/MjI1DjWKPDbSmKoO\nzpMLjxMknyeROEPXpna0oBJx9eBoDVX2NLyKfITrfLV4dfT7Fxrkh1zFFUQR\nSmPsQMFTN7e43cF7EdzDaLj87HXu8mCKxdg+e60cBy9WliXewM8VLhNaIYb0\nyI/d4zfLd0JFbh3UUyyfBT1NbLzlvBzX5EOJwG3xtF0Qprmo4/uBSIJcQfT7\n0ez3BGgzqHlXMEdt95TKDFfJd9EVSO6MQFxxlF9PoaJMwLb4tqUtQqp9BCJ/\nwdhc\r\n=EKVJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6871336f1.0","@material/rtl":"9.0.0-canary.6871336f1.0","@material/base":"9.0.0-canary.6871336f1.0","@material/list":"9.0.0-canary.6871336f1.0","@material/shape":"9.0.0-canary.6871336f1.0","@material/theme":"9.0.0-canary.6871336f1.0","@material/ripple":"9.0.0-canary.6871336f1.0","@material/animation":"9.0.0-canary.6871336f1.0","@material/elevation":"9.0.0-canary.6871336f1.0","@material/typography":"9.0.0-canary.6871336f1.0","@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.6871336f1.0_1607443389045_0.1840356236686742","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/drawer","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.9f718da94.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1c473ce8d4e9ee5e1e7ffd8d96eba7e8cd5a579","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.9f718da94.0.tgz","fileCount":48,"integrity":"sha512-ZIdq0L4mUwNgm/MY6j/mfPNfgse4cWvsj/f9Xa6dDzByQ3H3RkG8lQABCgguq6bss+AZxJ/VIpvcVqPgKA7+zw==","signatures":[{"sig":"MEUCIQDw1hTUHVTrIESDwsk/nafqZx0aQN30pmyCjEb7uHuwnwIgG38GkKAa38NisWhXPXq0RgNvSvnZLsUbL2RTmihnDRs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6Z+CRA9TVsSAnZWagAArKUP/0eVbuS6bHc5iOWLTL4f\n0L2m3UKW6gvFg2FSDtvhBUBKvyB+5/azBR27TW6RjoSdIDqaGQPDuG0ctAZY\nU6RwMvRggHvFCkxqjN/37N5+JnQwuH1pVwqNb/DY+UxoSe92oHy6r7DCik6q\nnUh9fkH8iyhMFsc13K9tg2I8VJ7fJjTnYs6VciimXuMUkemGOtWFgYEMJjBZ\nRV/5OqEbhkA885PUWunvfiUaQ+q3ngsDinDgEuhDwdW49+2Ury4gtCY5yqlU\ncBo9XU/3+ZW//I7corYKA1NnwzKXxCKtYKQxJ+G+dZewf/DYXJ0IBRTgdUQt\n2ttmPaVsjSppJcqHXAnI/5kRhfAgwonMulF5dItgPO+YfdGjrip6mf1EEA83\nO4vnjjZLXsWFtkjn6+GanXFXAAxWFzLx27GKgZ/OJyae5YsuEMrX+MXQKakt\nZ1XFNaMLz9FrkSdAbZfdHDseUiIYVcwt30pHGLUVDRJS7LxfXNk2ULIM1R1O\nIIyLyQ+b0LK+GVYRkbsOmlTAxvIHt9WjLmCRr5Sg8O5GDvr38i0/mZ975oHD\neqHMnYcBmkuKBH9d2ZpFUZtnBGyXxx+IwRIFL1Vx7MgYnjxkjZJZBGuajzZn\nLM1vmjbPdz0l7YfrKimAZVY0JoitnY/fWarHD+hiqLVS3nUAv4NlLEFNWwqT\nMr1t\r\n=ccyD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9f718da94.0","@material/rtl":"9.0.0-canary.9f718da94.0","@material/base":"9.0.0-canary.9f718da94.0","@material/list":"9.0.0-canary.9f718da94.0","@material/shape":"9.0.0-canary.9f718da94.0","@material/theme":"9.0.0-canary.9f718da94.0","@material/ripple":"9.0.0-canary.9f718da94.0","@material/animation":"9.0.0-canary.9f718da94.0","@material/elevation":"9.0.0-canary.9f718da94.0","@material/typography":"9.0.0-canary.9f718da94.0","@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.9f718da94.0_1607444094534_0.9132190409611829","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/drawer","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.1fccb1418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa083ba656f64f5327184c687a3afe564da95527","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.1fccb1418.0.tgz","fileCount":48,"integrity":"sha512-tXYEBlhOa3ljL7e248bYOkEdW1HmvGvlIsjHZapDTKLvxxwAEp7UhVcWKtDpEhP6qOAzYqQ6Xz1pKV5eQrEVcQ==","signatures":[{"sig":"MEYCIQD4Eu9ozOixXCozmicNdhl6/rlBhEmZEq2FPWTlIfeS8AIhAPj7I8XoKlYytbjGyMfz/ugcD8P1bsIrOhQoPEf1T8vv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6n/CRA9TVsSAnZWagAA6vUP/jUJeH9ZSsBZJARm5F2h\ngvGgxA931ZRRq5neVvqGnEK5HFB5EQ0CtuJtwRtfwCGZIXbKoaCkRYBQgrJI\nhnhFk1oCc4m1/JYCFQBmxFO/N8NNVaYNO9K8rXSxAxBvOwSS+oamDVuN8NSe\nR26Ee4qDMoCBzNxMMcioo7Q+g4d/rQlB70PWlZBUw+uVYd9QgrTYUUZLIehb\nfCHhm+XjTBJDEp7jyd3zGvatBxy6+qQ8B5giKaGuQtJdn2pVFuaqga6fd8vU\nWEHBBU1iKdK9RrEhCMFGMpHaszeWfBQLwATnvlJNLtJ1rE28PaKXTW+0WEvp\n2CFq5VlqFBdPDTKXg6Rc/aB1HCCMJl82qegkFftxLSRqJYRqsVwJuVsAei1n\n17GRIT3e/8HOBtwL1BLI8RLOcyjsZFAZ4haG2bk3i5xNI3JmSjheovdN8ROb\nmN5zQBlePijjdIGqhjMQD3wAMrHRJqwweXtfGoFeIZcOsvgoEsOrDJvcg2Q5\n6S4TF/n+so9IiUTywultvPly7NrinkSnGHO/EGslR4fHi4O/620G9nvpDCW7\nTrMCXNv1UcYQOPMBShjYumqvk9+Bs2jpNUQW2T1uRkuldweeYfPiGSv04qRU\nw910P7MGsN9i5eaLkNJ45OkqneNnmIxlxEV+YaYgjV7D8Z0ff22SD+86Q40T\n6vsc\r\n=RF0S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1fccb1418.0","@material/rtl":"9.0.0-canary.1fccb1418.0","@material/base":"9.0.0-canary.1fccb1418.0","@material/list":"9.0.0-canary.1fccb1418.0","@material/shape":"9.0.0-canary.1fccb1418.0","@material/theme":"9.0.0-canary.1fccb1418.0","@material/ripple":"9.0.0-canary.1fccb1418.0","@material/animation":"9.0.0-canary.1fccb1418.0","@material/elevation":"9.0.0-canary.1fccb1418.0","@material/typography":"9.0.0-canary.1fccb1418.0","@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.1fccb1418.0_1607444991378_0.9100337882771561","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/drawer","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.afb68894e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"383a9b1b9f1ca4f9c0fc10e61746a06aca50101e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.afb68894e.0.tgz","fileCount":48,"integrity":"sha512-Tv6pCD4604Po+1e6Gh27AS2PsVndhZUvw9G8D1G1ZECUgAdiNPB30PvFbqiQ631wIY/sPngzjVwTOEv/Avomcw==","signatures":[{"sig":"MEUCIAU2cPlMlCuGqcC/FXgN86BVzihC7OYL4HqJwhRB9jG6AiEAyEVrw9ZzIBw4IQVhPixqqk4Ma6GOSh6krolnsiFIQJo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6rxCRA9TVsSAnZWagAAR+UP/00iX/N3be1qx8dBxlKG\nO5oKAcJGloA/RtsJMnzNSkg8zvcci2orVjM+SA6Dwcl/HAjl8YwsmpxY1Kes\nJ5PY6iGM4Hj4jT6qbcft16T6M+Jx1lRQHj1FcXDMYLEwhJcVazrNPsRWzj54\n2VDZ9DQNEIXwyQ+fv8cGCIDNCO5c+dAX7lHi0Ux0TEAT+KC7m9OS56cdt+LO\nXOiepPfRE1di2ami6/WCejk5DOeYCuWX6N8aF4g5DrmX36KxS2rflcxWxB65\nIQLR7RyzfVhfgRFggBeoEJW+p9BT0O76jJTHdd0SgGZn/OXBl7toMu0zi0Se\nk52TqUE0YYQMTX5H2hz/dc1L5Ae+d7ZLEdq5uipVjSj9k8F2ryL18jWP5ix2\nssTyuXurJ0fnvx3UMDPF75SvwyU+uogs2BDtACnnzkuVUdNMOIVV07xBTm2j\npofcS4GaIOeA4AvmK5T7LQ3onaqiE6ChPH3peMgczViK/YQkT2VXo2YaiU+B\nq2lwHvWmJUNy62oqDaMTIdxsV3fh3McAPqKC+P1Git3iBwp/A1jy7i+Ttu58\ndo8bo4T8/qO95LUO77rzZMEUZSrB3bu2I6uRV+Dje3KaAmp1VZp2cPTsnEHn\n1zr3F/SWGpLpkHwlUBcdL4IAWRMl7or+kxPmkpNKb7akAtKcu/udaxxboInm\nJyYK\r\n=UeDT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.afb68894e.0","@material/rtl":"9.0.0-canary.afb68894e.0","@material/base":"9.0.0-canary.afb68894e.0","@material/list":"9.0.0-canary.afb68894e.0","@material/shape":"9.0.0-canary.afb68894e.0","@material/theme":"9.0.0-canary.afb68894e.0","@material/ripple":"9.0.0-canary.afb68894e.0","@material/animation":"9.0.0-canary.afb68894e.0","@material/elevation":"9.0.0-canary.afb68894e.0","@material/typography":"9.0.0-canary.afb68894e.0","@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.afb68894e.0_1607445233256_0.28684008387649573","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/drawer","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.fd88d40c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08f430c729e03d76d883a0a4c752e8a48f3ba41b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.fd88d40c2.0.tgz","fileCount":48,"integrity":"sha512-j3HQY/6ZHZdRKO1CypDpPnk4ZYinTwa5ra2Mo9XCllD4AeAZQQhTC1A+1AUUEPXLvj4H6iDrBGnFEV8F27zRow==","signatures":[{"sig":"MEUCIQCnKLYr5pg/SRXYOaqTePvmyuvjj23r7Ysu8ID9WgQPqgIgBGHPm82AELzFuRfIhGkS/mR30JR6/A9ufae+Yh7yCUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz64nCRA9TVsSAnZWagAA6QEP/R9of8iD8EPscBS7O6sg\nLVUmA4Z9OZZDGeUdePBgj1zVp2eRvpUJaqt4xRvH7a/EBXkTKdHotgAQw+0p\nzIG7mcjcoiA4l1qHQ/0rzUg/q3vegX7Rpiq+Q1bItn98kNEud6FbET4DSydq\nnBPxnfV33iL1ZHAPstDmw/PRdQA75Ver4tkKLija8EkT+37N3Nj2pvAtmZca\n++bBr9nQdqlOChtUssK9ehTJNZ5KGT7yXKnmn7tndbS1NlZIsS9Z7xGNI6Ar\nb8mp6vwgb/tC1g+uM8VlEbBktc0jgJtrPm3btjbpRQt1wMEQPwlyw5NPjjKk\n5Y5J2UNrTtjbAr3q58E4WPZR7scUQWfx2okmpvWjQJE12C9J3Y7QVw1HNTQ8\nfmGzQvffwsbtJq9khN6ysekfYnSDyb6DxVnSQm3Rp1t06ilAU+KA9XWfmjDb\nZ/uMJU9KauY/3mXjZVFiBtBhpLHz7+hHyV76ncJfOeusMC947XknN0omL0Dm\nUEqPCxpUp9efU3TJfnqIv5cO0EtTOkFdF5Q1BVzSpZDfElpjQx6iKNB12864\npqweTCI0nciJUNY1XwReo/41LIPVR22hIuNOJGTDxihYdk/vrOAdyfdWyevp\ny47mgVrRL3KogD4Gi+Y9vNLmbmdviFy9cbu+08pzt+wYaMYjcbmCz8U43vXU\n5I8Q\r\n=vVPU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fd88d40c2.0","@material/rtl":"9.0.0-canary.fd88d40c2.0","@material/base":"9.0.0-canary.fd88d40c2.0","@material/list":"9.0.0-canary.fd88d40c2.0","@material/shape":"9.0.0-canary.fd88d40c2.0","@material/theme":"9.0.0-canary.fd88d40c2.0","@material/ripple":"9.0.0-canary.fd88d40c2.0","@material/animation":"9.0.0-canary.fd88d40c2.0","@material/elevation":"9.0.0-canary.fd88d40c2.0","@material/typography":"9.0.0-canary.fd88d40c2.0","@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.fd88d40c2.0_1607446054648_0.4210630607550412","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/drawer","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.ba9e3109c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f7a9cd303b5020b3f751fe4c252ff8e07b7953a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.ba9e3109c.0.tgz","fileCount":48,"integrity":"sha512-PHyHboaBaBBJovM3poXOULJ3XVGJt1YHdTL2WAKlYuEQWiG25R9veowclQw2V5bNwEyJskk5jYzYg2q+rAcwrw==","signatures":[{"sig":"MEYCIQDyVVwb+SOxBnKHrBYqQM83YnO/fE6VhTchEG6PivPFiwIhALCeG7cDKBpNzdG3tJ444FJiLY7OUULY2UqTUa8vH8Vl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz87WCRA9TVsSAnZWagAAh2YP+QHew6aVpMuc34xCXyPy\nG0WRnVq3U1ynEhDvxhZW2tU5Qu7HnMlUFGpcrSK7sqNEPliWwbALN2ir0ISA\nnWpuF7S5pwh3J7fSwS8iLtWWZiRWiWXQtS2efdURRYllgp05S49gRCAv5cNu\nY1HLmikknGTiapvrup9+pmljBzNP+o9JSj6mO+BuMlChuPqAxEqVH4MHlVA0\nbQoG15dwN34knCT7nXu8+41UpSV8XOxzYlHENmirKrBTUSdhSTfnFxE6iKrx\n1O4thZ0MaiHDj34rS3L5f0k1meMR2MoCG6GwJQXJJ0ogLtvJypkIS1LsCWt8\ngodZaX57tL+NSepdbUSHR5Bl7e+K9iQPNClqg0p4NZEmFhGIVZ12F99hJQnw\n0nUwvNE9ggRo17LeTC9TQipmjgWdkqjDoMorQsHtd8PFGlAcbkHBALOWwyHM\nNJm3WJwxnR5ohmbVCVqUMb9s/sElJJj2hhVNRgc6WZhJ8zXqerT3TmY/7nxD\nyfBHgc4hDa+UbtfFpz+TLHT+zJKMFbyX7PiYV7HeDcb6SqPGFLcUA/Nb/KJR\nanJjTC0+jZhukMUTlM4+VnTsX8uHSQiAA07KmLRpsWJpOE1SzyapbCKzxLy1\nZ3aoiwBTtIRETwMNTLeJE1SDmcQ3qUHgwX2ZCBO5tXyuj759kyovmvoYAoQt\n/ie1\r\n=Spy7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ba9e3109c.0","@material/rtl":"9.0.0-canary.ba9e3109c.0","@material/base":"9.0.0-canary.ba9e3109c.0","@material/list":"9.0.0-canary.ba9e3109c.0","@material/shape":"9.0.0-canary.ba9e3109c.0","@material/theme":"9.0.0-canary.ba9e3109c.0","@material/ripple":"9.0.0-canary.ba9e3109c.0","@material/animation":"9.0.0-canary.ba9e3109c.0","@material/elevation":"9.0.0-canary.ba9e3109c.0","@material/typography":"9.0.0-canary.ba9e3109c.0","@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.ba9e3109c.0_1607454421994_0.9901773687709103","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/drawer","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.1085c3b2d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6749e6be37c226f0c31322bddf54b81bc752c6ca","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.1085c3b2d.0.tgz","fileCount":48,"integrity":"sha512-YMcwe2DH4mlr0QQryqj/u+4YDxbi5PHVc1ViGgrO0dbUFwci38058a0ZjlEveKxMw6ZJCbn+Nn7LbMg2MJ1arA==","signatures":[{"sig":"MEYCIQCUeMOZ7rTqK2qVGbg52Ybge7+W55NW44aCFzuA+k3Z7AIhAMguIg/Y2zVHfsrtsWEKX7RIGRul9akkCaaUl0pDdJ1b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SGlCRA9TVsSAnZWagAA4HUP/3GqxQX70L6OdJGJ3qEF\nlTaFPPEGn+WxQkPF8qvLJkm3WYwES0Gx/84tqJaOVcXkJt5+jcIOEAhVQ0al\ndVrGYcTstxIpx52ZvtEdjm1/X/9yoc0+tT/694SImCb/OWViqg75aHgPHlMj\nx9zllKC5wmBMi6yijj/iaxUKnLol6kvLuSZfDW/ZirXtYHgLbCF7j+8M00EA\nW/H2ZOtGG3URZbeQ6SSNU2XlwJMBFUhCQlC0cEW6HjRaD6dxZ9BY/ckGwrUI\ngSdfon3e+jYJuvLU8CLq43McwnUjOAct6mJcCWh+Nv/yxXt7p2bOd4NRm/5J\nZlBeBMyyjcO3/N8PRVHp4Mykq4ALDs9X0zb2IhQID0js78iVTY/4i6ouy6CT\nnw4D6sZUUMmXacLHAW9HSnpxPW6oCcmO3RKWLtBbQJEnOULphqEhHtMCeTWF\npfrleyL8uu0yO/Nj9O1EckOMbkAdv+B7AO3KzWrNqWhQVjHqGFvzyk7e2+Dy\ntwFn3eZf1XKcZo5I5gMaTV4I199YxeSbfu5A0Y5+Cvd+A/W304eEY+An9IXR\n2dThC/etOpJRiV7hPBGCnykey2n6PTJhnP/enq0Ny2gDy5EupX1VoqrwixRF\nzbZb0ntEbA7j746ZQuL4CbVewmSTDSugSm7bcrS1IgWbskWZ5CN/4tUcVS6m\n1Ton\r\n=nBdB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1085c3b2d.0","@material/rtl":"9.0.0-canary.1085c3b2d.0","@material/base":"9.0.0-canary.1085c3b2d.0","@material/list":"9.0.0-canary.1085c3b2d.0","@material/shape":"9.0.0-canary.1085c3b2d.0","@material/theme":"9.0.0-canary.1085c3b2d.0","@material/ripple":"9.0.0-canary.1085c3b2d.0","@material/animation":"9.0.0-canary.1085c3b2d.0","@material/elevation":"9.0.0-canary.1085c3b2d.0","@material/typography":"9.0.0-canary.1085c3b2d.0","@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.1085c3b2d.0_1607541156593_0.9656416145940443","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/drawer","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.c5dda809d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17dca994aa7fcce3f87adac0bf70284e414c288c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.c5dda809d.0.tgz","fileCount":48,"integrity":"sha512-+WABLeHkzy97TgKgylE/2iYY8QuOhlT0aWmDDCn+5eBK7oB14d/aeJ7HhelsPZ5xLNwlE+Vj3KrnkzzLurZ1Pg==","signatures":[{"sig":"MEUCIQD+9Ekt6/mLkaQdM1Gj4XTYeBo8tkW6h0sCueBPac2NJAIgGQt7jSH3GlFKxlrvENCK81mMZOGtGnmvtCMu9iKD3ZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TjcCRA9TVsSAnZWagAA6FUQAKC90oDXh9Kthohrj8zi\n8bA0vI24DZ/VJ+G7PkF6wcmbPAJEmwurhluYswAGhFtpcb2bYsUXZATLHRoY\nwrZAk6LqzeI7ym1QeQzryuAmQoJHCj+7rltZRtOFkeq99+10Xy0tibcbcH+Q\nIY8lKqnDIMZNvpUBGEJS0XWX0jD+evkctE7fjIa/46+V9/s+jfF0J+t0JhQI\nBPeEvf5GEDiGvbeYxlB6qcwJBN/v0HPa6STPRwmLwFvScU1RfiiccRXbdjdv\nH2XiqO90mZNWMw8Wof0cQZOVtQASxo8cuOLmfmL3cfa0Uu7y3nOGC9rXI6xd\nUeICg7RLIha78XbkO9JVKBCI5F+hHAqswvj3P328OMkHrFC6JA3xrG6jpWZC\nqZ0EhLrRoB7lhvSESljRdBdev4aCB2fE/uy5sO1cTGMkjNjYjhbtxm6vUbuY\nkwKOj8ZRq51jdwCdBEU2u/K+ALwSmrtbYvF8anvJLfQIazH1FBrGsux9fjEx\nelkVmllN8Hv7cdJLAJWPvt8dppaImWGBHYYf4n4P4mX0iZloGBklu3vZxh3m\nZoBuWth0GqaAGumwlyz9zaqU5sZ0xzuG0gZMvoCHoSHtLE4SgaoBNycqFBa3\nVIrm/kTOkYAaxu+wWgSOnuwRM1qoFI2kf5D2of/SWMZYv0p3XDmGHgvt9DKB\nvfyC\r\n=gQ8/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c5dda809d.0","@material/rtl":"9.0.0-canary.c5dda809d.0","@material/base":"9.0.0-canary.c5dda809d.0","@material/list":"9.0.0-canary.c5dda809d.0","@material/shape":"9.0.0-canary.c5dda809d.0","@material/theme":"9.0.0-canary.c5dda809d.0","@material/ripple":"9.0.0-canary.c5dda809d.0","@material/animation":"9.0.0-canary.c5dda809d.0","@material/elevation":"9.0.0-canary.c5dda809d.0","@material/typography":"9.0.0-canary.c5dda809d.0","@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.c5dda809d.0_1607547099981_0.8881932580925156","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/drawer","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.f5f1bd86a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8886b79c9a79666d63ea1cb25cbc3c10b9775df3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":48,"integrity":"sha512-0BLUUOBoGdECHxbf8KiaTlC3soLKvg6hmoflicKFATbNeXjRqfWHzFE3qQzt8GEeOvWB0DuhM+ZiGaWgvquOKA==","signatures":[{"sig":"MEQCIGIjBXsyPnmPTBMky79YZSo+v3pQmrCH1kfeeovW+UI7AiAaDWOa8RvrVuiXtbvYAVDIz6ikkOY08NMlQgElDbuW2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0Tz5CRA9TVsSAnZWagAAlOIP/REZfWvwUqmEGafiDr3D\nIUCc974EiikTGBHPEEfkE30SxC6M9uvTEgTIkiKJ5LkQooSY5FGVvf1H6psN\nHsrUFWc0on0mm8uVJQquhkqWBNAVlN9DeTNAfH8N/bVLhfwS6+2ImEY/eB3L\nBNqe9DpmTBIjS1A/xzIkg0HbptxtxB+fi5Y7zYX60Re+7YnvcV4sdEIhxyPz\nEhjM4WLO3CCSujglL3zCSV9e0fOJkweeUTite3UYz79E5q+LPoe4y9wpRH9j\nsZBQWcV9cI0a007mecFRCIMQFuDZp6/coRMABvfbjyTOv5vNorHNfoyIjiSM\njBI5KmuKwAZNWyAIQtW/V0PGXiqd2BkPTnuwqKQq5c6Bn3Sn6HsceNmxesEL\ninxoHD+2QD7W9I+/MUEAp0xLfRNZ7HO3wmeQnvKwuubhymPwT6X+4L0iaXP+\nGo3qn+4byYioLuz5rw0LNaVGZMOl7RNTQRKOOHzj9oIEbAz5VvjevZl0nOHt\nX8Aq/KqueeqHWZzlUTrdd34hhTumb8ko6gl4ZYNEV4qOOr1BQ1h5O4gI/zRU\nPqhtBrb8Wj7gzd8qp22BRXSA4naLoyLWYa2Im8p1zL0F5WXffuSphRRipfuJ\nyDsyoPwmAZUZgIHF9H33CZOkxlChheLZ+pup7NUcJEM1rs/KP5xaKjZwkgiG\n9CWv\r\n=VMn8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.f5f1bd86a.0","@material/rtl":"9.0.0-canary.f5f1bd86a.0","@material/base":"9.0.0-canary.f5f1bd86a.0","@material/list":"9.0.0-canary.f5f1bd86a.0","@material/shape":"9.0.0-canary.f5f1bd86a.0","@material/theme":"9.0.0-canary.f5f1bd86a.0","@material/ripple":"9.0.0-canary.f5f1bd86a.0","@material/animation":"9.0.0-canary.f5f1bd86a.0","@material/elevation":"9.0.0-canary.f5f1bd86a.0","@material/typography":"9.0.0-canary.f5f1bd86a.0","@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.f5f1bd86a.0_1607548153383_0.4534969225318981","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/drawer","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.00f38200f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6c20768d9ae709e470d8d080cb7f7ed1706a1e4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.00f38200f.0.tgz","fileCount":48,"integrity":"sha512-/yfDfMIIF/5u7i7bMURJAQB82n2p1sJ/LiScNR54G9dk/+dOErmfPkxpn402AEPcWgzNkfBKS00Wfo5C8TfPpQ==","signatures":[{"sig":"MEUCIAQ3pfzTW790j0ml0oteWeUI2NK9gTh6+CRJ0hxn71ZzAiEAvTxe6AMG3j+PDMo9GfnPemgrZ4KQ0aaOoOPPJov+gGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05SrCRA9TVsSAnZWagAAgyYP/i23VOfkiLPcF6/1TsnX\nX9vc/pZs4ASxdCu0hQvafmokzkIvyDfWjUKSoZeNJ/OCQWS0VgnWXz/6paP2\n7YQMXt6xeKXp2CNcVj8qZ60HUHZX/ZipbHW+eyCd6SO50qm8dpfadNh5e3ut\nIEkbQ1QvoD7NHj+UucJRlxrYbENYyYvbTSb85yyQzc8HJPmW1nwHLNs/IUS5\nY6wpamsxM5KnSi+gW/nsRTZfPOqyfFOckDS0gPeawRjiqegMlhyTtMtIScbq\ng24wNWGJHuLyIGORfopw6weAUTag4OOR9Y4GDav9eYfVaX+zHEaJm7mASOO3\nimSmNRowVI2/YujzX11p9cCv4r4vyHHv6w8FgfTeZo1ZBoCnavYqNUpoOcG6\n3XuxO8cKgczZfTmRYlo1nrahMtxFkj5y8tr6XylUGIqWHx+U5mQ5N52lamQa\nkUHEGJ7XUpmFT4Pr5906g43k4wk+5p2KCC9Pp2AqnUEyafNKn250wSFMlHtH\nooolzpyvqfsbVtjIZ0rxzTTOSZVTxHTablQIuBbDlLIMOv139t48Xt3GK2+Q\nT5moXAbSwXBiSdM4G5gMoiN6i9b7TY47R0neLl12hFDZF7mBUUUHT0IfTzC1\neHQTtmlL3kPewJ2ldnZE0mS7AqGX/UAGfcfCJJlHkH9qgSU1oe84RaXJQkbC\nqFXQ\r\n=8lC2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.00f38200f.0","@material/rtl":"9.0.0-canary.00f38200f.0","@material/base":"9.0.0-canary.00f38200f.0","@material/list":"9.0.0-canary.00f38200f.0","@material/shape":"9.0.0-canary.00f38200f.0","@material/theme":"9.0.0-canary.00f38200f.0","@material/ripple":"9.0.0-canary.00f38200f.0","@material/animation":"9.0.0-canary.00f38200f.0","@material/elevation":"9.0.0-canary.00f38200f.0","@material/typography":"9.0.0-canary.00f38200f.0","@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.00f38200f.0_1607701674792_0.4971359050409556","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/drawer","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.ac41a5729.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24f00432afc259daca4536c98d77b041bcea182e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.ac41a5729.0.tgz","fileCount":48,"integrity":"sha512-sZftGdHe42cNXSRi8O8auhi9/3Hww64155/NTHMyHBz5m8mdQc6weRJXODvMQoYwRKpcFSqXpRtIj0McdEvrCg==","signatures":[{"sig":"MEQCIHP9jDqKIVHQZeovqQzxSNtudYFvolgj/JzWkvHGopobAiB9COtvUTN1tHn8GRBobB9zEGhNGmSz/nwzN15jiM7OIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf056KCRA9TVsSAnZWagAAxHAP/3bg1ONonCj/tgWq5KCv\nGyUytcDkVb070YNLEJYufocAF3YGUVB7Sxjk9Z21mfrZVghEhtECenMMMnwx\ne++1RxlLt0at4O/aHj5jwXP9Jam5iyRF6NK9FwyaJSzBMlRW1CnRzV9ESeWo\nvaZHMR4B3C2Nj2aIs3ROSnRf7t1rmP+/EuXUUWxiU69WdLdYzYDdJkuAqGV4\nwPkandSX7AK9TRCYZrEFFfOQ/iN8wNSJpkOMV3acGjqmaJSj1K5bJ4nYtp9I\nnsuZTGoKdMQSVPleDdZo4vN0TJYJ04BcMtLMKGJP+6iQnd03CrGP1n+1WyYu\ns+zkZxUKsachW/nfQ+a410P49jmB0f7JcdNwiiHuETwYUFMxwbl78b4BEpT4\nU41mZgXwt7Adl5zQF/4TTiwQWKUNz7wpGO+07TYCtVqagqS1nfvmSd00cgMq\nb+rN/MPUnIl/GmsMKJdY0C8pnV0BAlxDMMZWnFvg+afSUxIG57wzDCJs0v9C\nfzwyJTGttH6C3qebd2/s8/B6Kyt11T066rEIY1oWkoPjtPMOn1o5yVUjpXbc\nxpZVxSmm0tmVu66VgxgUrHk9xgZrrxGfIwYLrTL+f1C/DSq24BEQKUyDAc3r\nYISY+T8asMfoP5p703+2L2969vKlWMbLxrhEEV6BzXRPK5cZ0hnsZQS46nn3\nXUq5\r\n=SRHR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ac41a5729.0","@material/rtl":"9.0.0-canary.ac41a5729.0","@material/base":"9.0.0-canary.ac41a5729.0","@material/list":"9.0.0-canary.ac41a5729.0","@material/shape":"9.0.0-canary.ac41a5729.0","@material/theme":"9.0.0-canary.ac41a5729.0","@material/ripple":"9.0.0-canary.ac41a5729.0","@material/animation":"9.0.0-canary.ac41a5729.0","@material/elevation":"9.0.0-canary.ac41a5729.0","@material/typography":"9.0.0-canary.ac41a5729.0","@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.ac41a5729.0_1607704201794_0.401785492278411","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/drawer","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.7fe0e4f05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c768fd4a067655068e7ef9d96c7d67c73ebc300c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":48,"integrity":"sha512-CY5Aj9F+TkNyTK4x9U+J1nvjKq+hhNeRnHYueY1IDHH4y9DOdiWOArzv+4ykdWEzH0dbVNc++USKBTfieDZE9w==","signatures":[{"sig":"MEYCIQCBgUBjT9Di4LmZm9W3STEaz/rn0pNg0+kn+xhMjXHifQIhANT4/L2xN6Ba2TkfxVEH59o4slIM7fGe8tStbemboL6/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06c4CRA9TVsSAnZWagAASckQAJ40GmR0YcAQo/bqVrHp\nC1Q0E7yphdKvdgCmfU4wDVlQVAMMxocsCfFdgRADtMnkM3jHtu1/yBgVKr1z\n8pdOO9r3QGMI6tPwsrXLBNAbMtV2Oa+72py5cB2wKD7b4UBIKQEdNNxDFd9n\nqCio4ZWRKak6aglo2NmmaB3v+GQ7kWd748OYibTpEQYSrQptiv3MWfWvfwgM\nv3V9H1ln6YwKa0tgQOwUSFFwMFHwA8R+oqkXXC1sfoZVvJGAFWU/G+rawKoX\n8zsweX8bMkRblk0NcE/RuykRbcmZtgNF9FL1gDv91L2OexA+uebRc6ur6K+1\nC3b4opUoAJIsF3VppV1sbeA44B+wIvsQDiZsQCWKmukkQ8+f3X77OQ8HBh59\nmiVmwZTGzJpQKQBXYnokg5J2mlcs/Oy6JBmL1IkEt69lBmb2dAkqAwYHcGSM\nlfA4RPbsZEBwGsiUll62BoUr759nEtcvpPevH7Z4TVfG1CpaTubiOx4qTbD+\nnrMhDH16C0injCJdJgov+rog+F6cft76mAT19YalQ7Y3LAjhh2bxQqahJJlH\nOFz8nZEY7JKxr+FxY0q05Nf/IN/K0nadP/f0mSiGIAIDELooEuL/Z2DVHsE0\nysU3+9dNZ8BRLsyOuGSqQc/7h7ixusmiAn8FWuvKXaEj1kwcmEaBedyftZeb\nLhp1\r\n=QVg9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7fe0e4f05.0","@material/rtl":"9.0.0-canary.7fe0e4f05.0","@material/base":"9.0.0-canary.7fe0e4f05.0","@material/list":"9.0.0-canary.7fe0e4f05.0","@material/shape":"9.0.0-canary.7fe0e4f05.0","@material/theme":"9.0.0-canary.7fe0e4f05.0","@material/ripple":"9.0.0-canary.7fe0e4f05.0","@material/animation":"9.0.0-canary.7fe0e4f05.0","@material/elevation":"9.0.0-canary.7fe0e4f05.0","@material/typography":"9.0.0-canary.7fe0e4f05.0","@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.7fe0e4f05.0_1607706423531_0.6822229566197313","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/drawer","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.9244508bd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be491305cdbb96f198b157fd5eb44b20bc1b3d40","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.9244508bd.0.tgz","fileCount":48,"integrity":"sha512-ZLrjR27S8l4B0OcORVY2CCAYsyizQ0c+gDSPPrXgpZ4JHKXN3f/z9/3eJjzWnA1Mz6QcGL5wKU54G9g2NxMoBw==","signatures":[{"sig":"MEUCIDof+BizT0JkvAJgqcYffsSqS9/mHc4Z80BRXDX0FVR7AiEA2466kcIas2cVvlxCR3A5zOhVFXLDIi739+7uyk59bT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08PECRA9TVsSAnZWagAAYj8P/jfjiAOIsZj4VUL4xkWL\ndWBSfCEh3d0PoQKabDwMtPKBJPULavCHW2P+EBfUWp9wZj9Z7P81p+xT74MI\npdrS5697ubHPERRT+U3tUnJ//vu1URvBZuV+PES7mRYftXMFYOo1sk32W9c5\nUD8Si8VYuFkPjntKZUmVyVsb3qUkstCmvTqk+YkyVFqwhUuNdbxNiZWMiRn/\nhye10ZilZL2gBYAk3bO4+ZrZHkSYMmtPsUDdZV9pSK5hcEgV9GdNQgg3dx1E\n2mfXN9HVdaBsTQYu3EVzFUfkH5Dp9gSu7+9/gcq/8vZbQgVftZIohMBF8moe\n6Tz/N9AxJVT1rBzWGAvPo6CrHouncqmSN+XpTdgoeMq47OKzAZECvL9jVlZb\nSPLb3gk+oJNZPlVda8w1TcNEVP0bXeTaGLHeF0SnoKEjGa9I74teKhAfudsl\n2aTS7MSwyDNRXJthriF9j42urMkuIB6XwEk1OAOPcDIQk5X6GwQRt6osVVry\nVE68A74cTNtEIV4I2lC3MJXn+PLlJHSwecFPkFB1EnfF4acaxk+nJ9SEyEAt\nqEJLt5U9HhxhC/tqbrYOsw0OoFPj6uB3elG05mKl9UDMALR/UwZgp5gDRNb+\nnL/rnGqVlfAXr25ddtr//W7NWnpAgA/PhDVjDNsUlbhX46P1KXSF8d8Pg7Op\nTp5+\r\n=aSBj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9244508bd.0","@material/rtl":"9.0.0-canary.9244508bd.0","@material/base":"9.0.0-canary.9244508bd.0","@material/list":"9.0.0-canary.9244508bd.0","@material/shape":"9.0.0-canary.9244508bd.0","@material/theme":"9.0.0-canary.9244508bd.0","@material/ripple":"9.0.0-canary.9244508bd.0","@material/animation":"9.0.0-canary.9244508bd.0","@material/elevation":"9.0.0-canary.9244508bd.0","@material/typography":"9.0.0-canary.9244508bd.0","@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.9244508bd.0_1607713731954_0.8224776715505182","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/drawer","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd014e3790367800c8b6bfefd33522a72c57546b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.384a8eeb1.0.tgz","fileCount":48,"integrity":"sha512-ZAQEJd/56hy3pDKr7a/mjG0IOi3/u7S8OeLW7sKbRY1ndvEFHb3V7m5aqOeSrE+1pWYxA663skZKL8hKQxxJKg==","signatures":[{"sig":"MEYCIQDDLfU687B8Rcylpb7c7VKY3uEf9KSMIAA0kfz6ZsLygwIhAP63/L+nMRroFd2a4towRrwbVryMMWHIlI2GlsuRu1ty","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j3WCRA9TVsSAnZWagAATx0P/RrkYYdfMofvDOCiPrk1\ngs2u/1r8m6bFQXprhSKKd3wTa/AVcaMpfH3q8Kxd3ald0JJell3v4GmX2mj7\nbD5lPTgGQulXDUyTYl+GdqHpnPQGHnWcqzZ3x7gJCOexzoO4lLMKKjxVRvv4\nirOEyRM1IGtxk0/WHGsWYWAtKo0ltqQEgoIYOjJu17Anwjsi5LPSmOFuV/kM\nF6dooyqNbvmyVfGcwGNYit91QBVe4jqhQS8cQ+SgiFJfUmYKg7oxAcXrVSti\n0JecmOUDGPGwJ8laVTKK63VXR2n216izBUBwFoCZ4ctO7RpkREEmvmlI0iSb\nCCErQAmdkSdI+bGaBJZU1zt7koyrvCLxodiHX+4M4JfeiK1j2QMoPbdqDxxq\ny5g9TWQqsVsFC9Nu4KTjtX1ec1CVaBr8yvEqVDhZfZQlTXBmRn3SOVgOiadM\nQkS0EDZkeGNCsnTGdFZ90iLBfuA9S+pPnoPLrxNe3cmhWN6YmaP+u9+b/y11\nl/33LSKqSyNadPS1z0r7sIpq9VRS/PQijhMg6W57bncZM89LMzGZoYVhlMUZ\nbGSCoeziv/nNMtn1QZGG5X+T3IrqUWGSbRqM861lp5bweu2GovrSBhjz4ixl\ngACywC2ykNYIF69taJHSKOXg7T1RyBWJyYTXHfrzE0J+voMVtGr1pY7lMMkI\n8aeE\r\n=iR4U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.384a8eeb1.0","@material/rtl":"9.0.0-canary.384a8eeb1.0","@material/base":"9.0.0-canary.384a8eeb1.0","@material/list":"9.0.0-canary.384a8eeb1.0","@material/shape":"9.0.0-canary.384a8eeb1.0","@material/theme":"9.0.0-canary.384a8eeb1.0","@material/ripple":"9.0.0-canary.384a8eeb1.0","@material/animation":"9.0.0-canary.384a8eeb1.0","@material/elevation":"9.0.0-canary.384a8eeb1.0","@material/typography":"9.0.0-canary.384a8eeb1.0","@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.384a8eeb1.0_1608138198428_0.4093228278078911","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/drawer","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5e1fdd81acb5bca7585fe9ebf4187c21fd41270","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":48,"integrity":"sha512-sIA/2UjHOGfu+h+jQJKT/lXgdrI2beEyg9PVtIpNAdRgzoG0pyeLsNhH7SdkfTpdJfe2kTKUS++XRrzJijAicg==","signatures":[{"sig":"MEUCIDBnIUvcyg8nRVNRaWJRCNsMgEh6BD7+ydP6d5tFY814AiEA4/txm4z3/zzZUofiViILrUuuPv8if4Hc3gjyX3m+4nc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lH0CRA9TVsSAnZWagAAQZ0P/0fRLtDjP1EzXzmIVck6\nMGZUW0RTIdEpCelNvJEWwpwCDN+qutW2/aN4zU7U48IGTFWwm4D675YOpucN\n5ru+N4Vwy+Ryt8ZRz+GjvYLRxb/iuaRM0/KuSDNtqnHQ63tJdluWFAM0tGl8\nDoGQE4ZyKn+r97f15qpIQ/arrs6vWQwUu226YRyywtdu/XRHROAlh0gnxwTN\nPgF2Jj0AiMkCYvxG9HLx7ilCPm/+MePQSHWZ3nznOzCR3cj6Q8Fei21a2c/v\nu5/y9o+v6mKM2b+i/2SSWQWylCTtPuESAsatM68u0SRXa/UmsURMdxtI6yxa\nEflt4Wy8BA5HOZhj6V8NPMPgYOKS1/7ohIoCeyjad6EQJRKBqCTSimnEAOWm\nYnHx6FQCI3LBnpKK8T3OzqEJvKGa9KHXnNSD3y2dE13Vm6Yx6+j3SwPl0B05\nICMhp8gyT2hSPoImonSBimuVayjAzMm/yFsS7af0QVQQP8xRvT1/oCDLHjo2\nQjB5Mi1JiihaD8QHajxpnJgeM3apUcUjQ7JXT29Qn+RG9DJ4JCTNeLwJIiD6\ne8K7SFdMQOf9akUg0+W+v2gbL/4SqF8JECO4eGCGCNWfYcEGEvS48SvD7xYG\nj7mNIkIEmarnKxHlwoevGrjhd/M9uxU3P1CcP3hi9dxVKnuMTfX/1InYYXuc\nMjcH\r\n=bn+A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eabf9d5c2.0","@material/rtl":"9.0.0-canary.eabf9d5c2.0","@material/base":"9.0.0-canary.eabf9d5c2.0","@material/list":"9.0.0-canary.eabf9d5c2.0","@material/shape":"9.0.0-canary.eabf9d5c2.0","@material/theme":"9.0.0-canary.eabf9d5c2.0","@material/ripple":"9.0.0-canary.eabf9d5c2.0","@material/animation":"9.0.0-canary.eabf9d5c2.0","@material/elevation":"9.0.0-canary.eabf9d5c2.0","@material/typography":"9.0.0-canary.eabf9d5c2.0","@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.eabf9d5c2.0_1608143348211_0.294960366647683","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/drawer","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ebbf61b42a1e3e2730ee7fc7ae4fde81f46641a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.30fdfd06e.0.tgz","fileCount":48,"integrity":"sha512-NKLwnlk85M+jZGaZ8cxVlbJjJW8DKmLOODmx6wpWTL1UJ+8z7NpSKPWc/Rqgq3p4wo6nU3c+P7Tq3cDsq56NEg==","signatures":[{"sig":"MEUCIQC3KMdzTXXyfG2xlx+hhGqGZChuH1uycxBo7eydfyIT6QIgfwMxKexnBji1An2KTdmy8gygS6Q7Ybhtq9aQ90GP9jI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2ltOCRA9TVsSAnZWagAAyHoP/2tfeaEPhhW2RqiuFde5\naJCH4wFdGR1v1SHTMRtM21fesEPSZZeqA9sEZlAUtdhNfm2aHOQXaIzvX3ar\nYb2A662dL2xgS8mVoxoptpkbMsa76PwyCDGliZQBVwb9Wry0bR9RQNspKJfD\n9RQ0gCcK/51NgqlrVyYROv6LQC4C0XbKGFYNJ9CEdinRbrMZ9IOe8SvUan5M\nlokaCXHM3m2Bx+Hhvy8eNexDJsYgpWP71g5dRmqCgSi5YiTq2YP7FuqEHueU\nK42mD4LE4jM3NUNu8i14PARdCJ10IEOogcffnzyzqHZqseBitYZwH10ddrxS\nue/t4LHTVx8KeuzOAfE+5QZIfkbzaesHT/ySmv72E8wuNMEZGJOSxUKcnyTP\nqoBagzHO5SGo9hICtkprSPJWsjKYJgVLMtgWzAsCFbcqMW5mGDhBTCHsudj+\n/tgq/rYaEp5+u2pfaNVKSRcn3OVLFd9W3P1tdkbEzPI4bxbW738nPFbIifD0\nQoBGKmNUamBOekWQcVeu689f688hgkh/JtNn77oOyvv76+2teX0zbLZKpSkq\nUbweO/JrnXN+u8UB6XolDlwlbljCG0szkmxrz1GwZ9FcKMxxW3T+krNneJsy\nFS2VYRz+ZVTpQS3Qhiv5EQcj7oAMvls2xEb3b61I3YRHj45AUK4LXM8/tiQN\nVGbZ\r\n=FhSW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.30fdfd06e.0","@material/rtl":"9.0.0-canary.30fdfd06e.0","@material/base":"9.0.0-canary.30fdfd06e.0","@material/list":"9.0.0-canary.30fdfd06e.0","@material/shape":"9.0.0-canary.30fdfd06e.0","@material/theme":"9.0.0-canary.30fdfd06e.0","@material/ripple":"9.0.0-canary.30fdfd06e.0","@material/animation":"9.0.0-canary.30fdfd06e.0","@material/elevation":"9.0.0-canary.30fdfd06e.0","@material/typography":"9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.30fdfd06e.0_1608145742064_0.4460228867309184","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/drawer","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e9d921a642e4a94e272b1a86ea83d0482f62893","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.9590a8f90.0.tgz","fileCount":48,"integrity":"sha512-XXj0Eb5cO1QUsFhJXyUCDj1YFZEmjYRA+AIFknwIzYEW2r8zZgkTTY8n1hzcG0mlR6yT9ENShvlB1Ud2y8DyLw==","signatures":[{"sig":"MEQCIGOL05q6lPQfepthKf+K3GDtEoWtUquiWOBWZ5bpWxdAAiAtSLoZhz772FYzlfGDSK3cY5KGghFwhbbqAqezaFYp/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4jBICRA9TVsSAnZWagAAXgoQAJn0MS4PfiGqMGb/B5He\nSZb/E7jzQsh/+pjSffZ1QT9PzveR/SzsRuBz644sULQ8OyHErQbwV/jv3UFS\nWwQzSANndEcGsps02pBv8T0BUL/4fkCOvgzVgJFsv0v/OBP6dc8z5x/PNmhQ\nsG6T3/we4LBkhIuT+EooxpC92SzNfH3SCdmVb0WE6fn6Sk+FE16mE0jOnsL/\nZQYfeAvbHRsi6TOB1MAJTfrrfiRfgfL0v1qSciknm0HIMeGFCU1oPSM70qFu\nidOS2VsffZ0QUFkV1a8v5h8AwhV9iru08rXmA/xtpZ8sqPwy9HuLH/hiTh51\nKt7OBSO/2xSZ7iWz1qOkRRA9XYD3BfF12qhDvtGedxMkw0y4W/wW3ke04+Y0\n5MroY497D0N1VE5TyEw45xez0B6Tn0eJwZ4FdFTSgy3Gh2+LRZpEbHd1AQJh\nDbtZLiMOuQWQ/2qyi7kQNy9ui25ORbGc4nFyLsPMAHPiWHk9QuCwMxGlAiVW\noolJ3Pl6E+eyj8FlyfHALc2k1nOJ2R+9/qWjexqqcsvDb0rYstzXRKFYRcgW\nSwo6c5uBcdndeSuSj4zZ1+tIJDw4eFgm5b4/hyzoopbqPXXzLIBxiKPhfNCI\n5TU5abVB9wdfCTyt+IZzUI3+LqwyNUPGscTPQ4nYnVoJ74KIh+tgqRPqYW/F\nZDBy\r\n=FCL1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9590a8f90.0","@material/rtl":"9.0.0-canary.9590a8f90.0","@material/base":"9.0.0-canary.9590a8f90.0","@material/list":"9.0.0-canary.9590a8f90.0","@material/shape":"9.0.0-canary.9590a8f90.0","@material/theme":"9.0.0-canary.9590a8f90.0","@material/ripple":"9.0.0-canary.9590a8f90.0","@material/animation":"9.0.0-canary.9590a8f90.0","@material/elevation":"9.0.0-canary.9590a8f90.0","@material/typography":"9.0.0-canary.9590a8f90.0","@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.9590a8f90.0_1608659015896_0.8533968354999824","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/drawer","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a05ffb58749e75858356dea9f4ca6f974d15810a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":48,"integrity":"sha512-fvYrKAqV0rXZbXRoTpF9vy9g0shd8Giw4n87wTmVKxrntF+Z7pebI2gNjRus5Aflb69HvZRzKxZGUBcgpwTfvg==","signatures":[{"sig":"MEQCIEc2nSx/U0j5m2pgekyi2YhJ1Yuf2v3RXJIcZufMtY8BAiA0VervhGNKIR2ribLuF93GiDxjvXxNeeNDlThj077KbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nwECRA9TVsSAnZWagAA6vAP/3sU328PHmyjiBFxbgjf\n2gxZlBjkcaUPoXTv/VwQWMgdWH3ZTVmOdyEcUpiMcOt256ENw0xdCBjAce6a\nFxQM434XHGWu/jGEecR+6uYC078rvZsUDa6/6KAOiQUcVbckKNL7OCyOFIvc\n5YUWPhcvZIdx0sZec4CzdC55Z02KQLwdKOM4shTbc5SHiG5bk8utwv2FvchV\n8VDm0aSDm8WGKu1f2xNdNLEJpRJvvnSNkDMErfKEq04A5gk+pJcyigBKIAeX\nC7yv113vgQTcvQY6l+3O4GXiX2f85mlHqsJe19MwjjzHTYD7wQwerYJSrRAe\n7OuLVXgcMNuVxLKOooA6x818q8+BiJ8jYjRo56INXra3ZKRjdKOUR3afyW37\nrs6nUb7bVeFzy0uGI4g9h9oW6e2G9QaycFW+pB6hmM/zXB4/ZaLNj45xijDi\nDCHYjb1uL47+MKZYEvLAPs2LVc+ZNLwmKmGKSUR2H/gL/fzmR8tamPlWbol8\nAyuEJEFdh+A9weiDm8Bzi7BuNuSRJkj6NPUG4F9nCJVhnNlFSJh+pYJHuU/9\nwM9aAQSJRKRV9z7rZFXfX1DvhcDrz97RdcXkXQhpJjS5ekplErteoSX2z24s\nC/j6U+QbjNeQxfZ9UGg+q8G+3PVkyoD2IFq82QN0u6RMr4pG2+0zazwY5BzE\npw86\r\n=Wybn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.f89d8b8f2.0","@material/rtl":"9.0.0-canary.f89d8b8f2.0","@material/base":"9.0.0-canary.f89d8b8f2.0","@material/list":"9.0.0-canary.f89d8b8f2.0","@material/shape":"9.0.0-canary.f89d8b8f2.0","@material/theme":"9.0.0-canary.f89d8b8f2.0","@material/ripple":"9.0.0-canary.f89d8b8f2.0","@material/animation":"9.0.0-canary.f89d8b8f2.0","@material/elevation":"9.0.0-canary.f89d8b8f2.0","@material/typography":"9.0.0-canary.f89d8b8f2.0","@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.f89d8b8f2.0_1608678404043_0.562874990022389","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/drawer","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51c2fb8b32b0d9ac3aed9d19be9537a41477099e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.fb194dd35.0.tgz","fileCount":48,"integrity":"sha512-h3MZOg2I+9gt6yqdA9Jn4+ga2FCcpEf/jh50mfU6vOQAXuDZDjT9R2acCjkduLUQG2r3J2qFcd30a/24AihwuQ==","signatures":[{"sig":"MEUCIAI8vIKHo+HVMUodUMWTx+Qr/h0M+9+28q10FfqSXFHiAiEAyRLdP1bc2ZVxepkuCLmg5eGPFG058swufzPbCqxQ+n8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kRGCRA9TVsSAnZWagAAxxYP/3/eah7TNpDrlbDczQLt\nb7pn1FMBMWTXgLZuSwogTWjGK/fYlz1EKXb2eJmMmSI82Gf6niNT1DZrF9Cw\nnDNA1WAePQa1HY5uo/p3vQqx20IoHJn2p5S4JLtCAteSrx6zIwD78IeWwS0n\nFZt5uoRJgl7cOB5BvIFCmyG6L75gVcHF/nC6zCld6GiowTZfo7KPXuv5aPS2\nJLrFH79gFBFmp5rJf2XjFQ+zNCrbqvQuYxnUmD5rUH/l0CLA2IRlzBSaQ6x2\nBIKVgTYy56GKmAXCowE9Vv/65wteoE7MbQdqsBlNW4YTvhvy84bCyXLbROFn\n4wCrNsd4i+prXQLBt6EpP/D4ntU6jTk2jYErP83TndqsvVX3cQh+F7lQn3Xq\nGqgO7cThSBIw3buc6R+tqxX9uWfQNpZd68ObmF7Lo4t+YqT+XDDB6XTXLvnL\nDwySLEATWKpRAD8LzNk7tyAf4PEHuJzrLFU5lxmSA5Qir0+47pZpHZZv+DV9\n1Nv5UwLH49R9Zo6JPQY5UOoncyNoQnMlJpkjjtatgF3rOK8C4xM5BvbC1DI0\nsZ8gN9gI9iRAl7hQBxpKUIg60Qb2HoOTOovqlxlb+x/BQ6QSZmyroj0ecHCO\npIG86/qX1euaYkfj4O5AHfqWKgqrV8TCnrzC9DPfXvDRh5UJaWEKR2aBje/D\nI6H3\r\n=btZZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fb194dd35.0","@material/rtl":"9.0.0-canary.fb194dd35.0","@material/base":"9.0.0-canary.fb194dd35.0","@material/list":"9.0.0-canary.fb194dd35.0","@material/shape":"9.0.0-canary.fb194dd35.0","@material/theme":"9.0.0-canary.fb194dd35.0","@material/ripple":"9.0.0-canary.fb194dd35.0","@material/animation":"9.0.0-canary.fb194dd35.0","@material/elevation":"9.0.0-canary.fb194dd35.0","@material/typography":"9.0.0-canary.fb194dd35.0","@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.fb194dd35.0_1609188421797_0.5554622768355542","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/drawer","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.64f36e287.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94f606709ba5a58f8cc89cdbec49bd7b2ebaab93","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.64f36e287.0.tgz","fileCount":48,"integrity":"sha512-yUoHIQgAovdtEgdbQIp1ts9FLJnlqmLCSowr0txi6x87+dsUJnrHDlxcQgqDVmvPtujr+t77nh1i6PIPSwKKkg==","signatures":[{"sig":"MEQCIBPZa6kmyCOyVjkeTiUXDqfoBhpa17jM8hnlfqs/pJmKAiBMHoZqM7JMgl6Cosk8md6/sqpSbzE8UQep5aNFW2PmRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kmlCRA9TVsSAnZWagAAOxoP+gIvFpuQQafq6mysZ34J\nnNXHFjqQ9Y3W9FtxoCkBhic2CsXtbM/5nHcbN/fvBesMhngu/kLvwM2YToqa\nA+zfeXrHbJm0EiBJ5rpRvL5B6spgMXuk/I2OQZX/rKfnlgD18ckD302jK3u2\nlXsJOErHi1mG51nHyx3c0fwqTbdIPG9Kv7gTfWSAbHX0XNTF5azHTJteQhCu\nPTVx9zefCpJ/PstKfcEJvMdsw3dywQtpAibJxWEjzaS1s+3fhlWRgB4kb2Bd\nzVQpg5GAlyZ6yrLrn3G1jkGJ2GboxxCMARcSYeb4DDZ7O4MPpZ4XVD/55Zxo\nGpNS6uM4cdiVtSeEQkTRPCj214kxCm7AHcsntK6KMS1R2CctUr6HPPjSBj5O\ngH4kR82B/9fkNcQtepWTuopQRSIEeXz3+XeLM17bgPBHE7oDPmneYczHP7X6\nGNYApubqUlMbkKEFBNIItQqIncsHMNM0LakjwCkbrsUZfYAE4Z0IT77z5PEe\nb/ZiIn12Oiqc9CTgAEckOeZoHulCZC8HnayUvy0+7bDKPHL2MIUAktUmz7EK\nGjXMloKV6/kKBhy8mw1H7y6Jgcd1Ei539lOko5tp5xVSHs4riQTQMKyj4vku\nEqVGKIB4ETlQMM5zFOAf3JpzcVYOQwSEMUAaSYVm6O2YaIaOfUchGUenuhIX\nW4q5\r\n=LKnQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.64f36e287.0","@material/rtl":"9.0.0-canary.64f36e287.0","@material/base":"9.0.0-canary.64f36e287.0","@material/list":"9.0.0-canary.64f36e287.0","@material/shape":"9.0.0-canary.64f36e287.0","@material/theme":"9.0.0-canary.64f36e287.0","@material/ripple":"9.0.0-canary.64f36e287.0","@material/animation":"9.0.0-canary.64f36e287.0","@material/elevation":"9.0.0-canary.64f36e287.0","@material/typography":"9.0.0-canary.64f36e287.0","@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.64f36e287.0_1609189796792_0.6163946271262106","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/drawer","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cd7a84e4a99bc3618f7e5bad5f653df595a4134","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0-canary.b7bbe7022.0.tgz","fileCount":48,"integrity":"sha512-LnMHOj0ILRD/XxiULn6BKpy/OAjAT1cvhyBU3sRRUZFvriUBuAKPfacDpr9i7Uin80ArEnRNbGRWnXi7Twm2hQ==","signatures":[{"sig":"MEUCIG+VRWz6mILmg+M+kgxJGPj8bSWZ+wTNlBG+hO0aPICdAiEAlKDxmO+SxVenjLoqbKN2LN8n2JsfX2lCKPQSjrZXbhc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63o1CRA9TVsSAnZWagAA2KgP/R0DKLyXOmiiukfTVCG8\n1tjwDWhZeprZ2kKC9gvtRXrq3YBnoIPwoWLjVT/Bq8KXMNqDNHmSE/yVBjAV\nVxxWSsF3P+zNgdntCQk8T1dWsqsdxoQ4+OGBD0FxxYqDBoHwR9jXdDaIJeAe\nCZF07rMFWKlwERcRswH563qUIJJPAwm/oQ7+HmDhMH6C2dVPLz5wViYSdaYl\nklY6ylN9qIe8ADdblBZN93pmSXovBhOAwqds2PYf/QWGGMi3y2ZDVksUSjV6\noX+D0Noh91Q95Wl+GcDT+kqAIM0SP9avBVZgSXeW7p6bFcbWS06qtsIU1XgL\nx1PQ33einn7XqKVfQrkP0q8rfAvhHV40O5uX1pb+34wyhj2KIVAg5Y8kN1YX\np0Okjs4HvvoP2x37iJx1E5TgZx/w5tt0cma3PYUXcUqLVdT1GsGB0zaf/dBd\nV5CJMo0FGYuOHOBmMP+m6Jl1jGKkGc6Eexyrnt8seWNJOcg3I+iyVcs47sh3\n3MLdTLd6D5h5hXH1d4fb6kznZaFIREdD4elsFOkwYF24gDB43V/jFCjhbnKl\nJ5xCxA3zZw7CT1AtbQFwsW0IgQJbuJ6AJoU/hRJUJzBezOac/wMc1U4XB/RG\nOee2yUDWH03G/eLlGIna2kVKKWd+MvO106Bi5dx36Q51QCI5UHG8Tv+937eF\n/LZ8\r\n=gTzM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b7bbe7022.0","@material/rtl":"9.0.0-canary.b7bbe7022.0","@material/base":"9.0.0-canary.b7bbe7022.0","@material/list":"9.0.0-canary.b7bbe7022.0","@material/shape":"9.0.0-canary.b7bbe7022.0","@material/theme":"9.0.0-canary.b7bbe7022.0","@material/ripple":"9.0.0-canary.b7bbe7022.0","@material/animation":"9.0.0-canary.b7bbe7022.0","@material/elevation":"9.0.0-canary.b7bbe7022.0","@material/typography":"9.0.0-canary.b7bbe7022.0","@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0-canary.b7bbe7022.0_1609267764706_0.135155892054585","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/drawer","version":"9.0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@9.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfbd640b843d34521209e3c2d3fb3465335146e5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-9.0.0.tgz","fileCount":47,"integrity":"sha512-ijqfuxCrt0TMdkD4ajA09OA/3GR8kXt676872CE0gmbS8HIWg9LsZwAnD2gHS8WDN7Fgj5o9WmoI6QnPih3X/Q==","signatures":[{"sig":"MEQCIAwaQe3sjilCulVbqyk7oKMEK4ciHJoUkqL5vWlv/6YeAiBZknW2usMwuTieBmpXot32rqlnLuq7mlW0hVXf8uj81w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":914968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64fWCRA9TVsSAnZWagAASfoP/0SPPydVYXorVsDe6xaL\nTcROGEfnpDo9qHDOABiOSh894tu+SK1ZQH0fx0squedq3NiNoqWqVeLx08je\nmA0LY89OOX/Oo0IclJHvf55lB8Ktzn0zfGH9uWzsgV4EYdVyBTXAIk4zMT+B\n/STQCvNQAlk1KMrtkXYHHbTapDJ8BoBCJm4xIot10NX7UcviWZBdYEjHZJcm\n1/iNMXTGmD/hMhAmBW5XQzjOKNq6G/HHLRob/K/j7J0pzZGdO1BLaXiyaWu+\nZn+pwyhDOhKGHEk4QvJrlec3Kovt8Akon7ioyehAsedFOkbeCARFiIMi7UPe\nqS4NtPQt1TMm1H7gxODABUVcTFogh+B76mJfYDvYVg9fSTB7mSArqK5m3Gv6\n21WOocSOEJckOJ86dVaZa/G9/A+TM1wjPSR108MnYhfKQsYuCFec8dt1SbxG\nT+hK4Z1l9M6loCSX78j17v+NgqKRS1qvZOXiAU/2sXkRjl7Hg/sKZIYIxc6S\n7Q3WL7YoNPnCU5FQLp2BdmHRXs015ZRut3ZS4PS1xYoxJuN7Ti939W325UFQ\nlfeHj/Mgq8k9S5tjeMggAoHMNhbHQ6qYflRd1D+W1b2eTcRUvgg5Ul8MQAKs\nboOmJ5OhygKA5PWfgFvvVVFOZ8HqCDTCCvzucqavkEIs8Rs1Uwwd//2YFl7Y\nD2I0\r\n=qVag\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^9.0.0","@material/rtl":"^9.0.0","@material/base":"^9.0.0","@material/list":"^9.0.0","@material/shape":"^9.0.0","@material/theme":"^9.0.0","@material/ripple":"^9.0.0","@material/animation":"^9.0.0","@material/elevation":"^9.0.0","@material/typography":"^9.0.0","@material/feature-targeting":"^9.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_9.0.0_1609271253929_0.6758409134306784","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/drawer","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.776c18681.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a9ce9d739c8254222d623f0e0a28a077605a784","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.776c18681.0.tgz","fileCount":48,"integrity":"sha512-HxZAvrC9ISYCGNUvYSOeniw9kh0+joXKy4bXtmJD4lI76ojMeOE4GZEo2JuzyZbyZy8bzcgYRaZ82Xdvcc/v3g==","signatures":[{"sig":"MEUCIQDenRi6SBMERAPcsO6448E9m+Ud2SrS9EbPsvKGej+h9AIgB6MgZJNup/OZmtAq4zp4iwGOtj8ZFuQZJS/zVAUMA4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68zDCRA9TVsSAnZWagAAYmYQAKIqIjdM65z8DwBz9YxB\noLR1sBY6AD4u4UlGDVHDHqClCr1laHgCZGYHy8OB4QmVQw1lryYiP1rFkUTs\n8gAVDpQfZu5MkgENUOFVoL+GNHct4MO1Y7WCIgJaAUH8doFUlYTG79bgK6Mt\nSCPHH0T8vdzbOz38fHjkE62RsK0Ljk9buM4+R6kpXU6WgRECOSiNfirVpb/X\nMpPYpDMCJXmt6rsriIf5gMeP/vql+yzYsnIFdc8StnFmNrw2aPPfY2RBpLTd\nKcYfOMW5o/3P2zhNazVng3/BImrxajIrTaF8jrUg2L7IYRcyhPfJKGbReiue\nmmjk1p7QWNI0IcRNlqaH9UiJufay0aySWnKITp5Q7OmFQ4yQ6FIUKIWPBjHd\ncTVt8KPuEHD2IRZcPfjIQKSUrUKWWoPVRzWkEqlYT7qlZiyvRU4T7zn5EB5m\nJuUL8HdtF0K7M7BtEHlpyw2xQZ+0Lk0IiiXHCT+b9DoWRptJST4CtEqql3r8\nYssh8MLuNPW6PU5aCYPRoLlyPKPd+WR1U+J6LM8HEIYzMjo1LMGFuLKGHa2x\nYs0WUHmNGBLrZchKPWZqKBTDlxxlEjHLHBt6ASxwibgN+o/z32MBA3B+Z2tN\nxjhULMH5g6Oir2TrJv0I+xyVEdplW7Jz1vTNskrH4fZGFh5IFht4YInJB1f8\n5wa/\r\n=zW/S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.776c18681.0","@material/rtl":"10.0.0-canary.776c18681.0","@material/base":"10.0.0-canary.776c18681.0","@material/list":"10.0.0-canary.776c18681.0","@material/shape":"10.0.0-canary.776c18681.0","@material/theme":"10.0.0-canary.776c18681.0","@material/ripple":"10.0.0-canary.776c18681.0","@material/animation":"10.0.0-canary.776c18681.0","@material/elevation":"10.0.0-canary.776c18681.0","@material/typography":"10.0.0-canary.776c18681.0","@material/feature-targeting":"10.0.0-canary.776c18681.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.776c18681.0_1609288898753_0.3789696382773189","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/drawer","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.671d72d95.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8924110246874740b003d62679aa1cb79277bbae","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.671d72d95.0.tgz","fileCount":48,"integrity":"sha512-dvvkMEujpbJIuuV9nJZVZhwZfhM7MoLKEsnRYVeyWun0sCVpGChcvCoc0yHSaaCLbREeH6uIRTbB6m9Po/nUiA==","signatures":[{"sig":"MEYCIQDrtSwAq4u89/XPQiw6PMFlKsHDSyj0ceuJyBqbyxO80AIhAMtaog641eQZYIDx2wQYY2eFgl+Lxafq7thzaCy0aiJu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N9lCRA9TVsSAnZWagAAY8EP+gJ/TDn8wkAE3k5EuBF1\nxu9LV367McfdLaV39c8l/h8qKbJqspwukUgJ7P+PGZS0EjbqAEzpYD6qbwxU\nzfz0hTYYU/d1SUiVC6hpS9he3eGCNpUIQmaa0R/eLCSKa3UgmPHWfTCEUbaL\nmZneXyPaeEfvX19F4h9VLUrnICjNy5Wk91iD4CxuwG1xqcz49WTGNwk2jWC4\nRcNhwvY5tfmY0+vLr3CvB1OYSlpn+9PiZaX+ntGI6sahe2LSJojc/nQiuJm5\nVxVV69PRx5qF8WL3n9KEywxPbZIM//OQ+wpTTxVdUdCqdII0RwKxSYrkwLRp\n9uhVj1Q9rTybYokQTggkaea7tYeMGMSqVJP7FFXlUn/1VuluL0cDSapQ1XO0\nER8bt2crK7DvvFmM8pCmIWYLn9nGU7Co9mf37KEfkBLzwiqB9l6hnkWvbYN1\nCGlDaqtOtBbtNE0eUCgBYaWusb7EV8Na6Vj6g+hQ/sEebWJmZHmYgOuhtK6r\nw5CFDtFeNULyAeRK86pQ2uaYOI5Oc8KevC/3XQ/3H73lC2eIOqqY+zBXDcDY\nLK1Jw8639Qftu+a/awkzxs1yueJDqvQYXG0fUVCUsO7Qw8qU1ASWzckD/qtp\nBAsopu9U9Q/5NFbEjAmFccp+2LE8HYa4YUOF3oE9SnRTGnJHAFpRwOYSDHv7\nqnLW\r\n=oN5G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.671d72d95.0","@material/rtl":"10.0.0-canary.671d72d95.0","@material/base":"10.0.0-canary.671d72d95.0","@material/list":"10.0.0-canary.671d72d95.0","@material/shape":"10.0.0-canary.671d72d95.0","@material/theme":"10.0.0-canary.671d72d95.0","@material/ripple":"10.0.0-canary.671d72d95.0","@material/animation":"10.0.0-canary.671d72d95.0","@material/elevation":"10.0.0-canary.671d72d95.0","@material/typography":"10.0.0-canary.671d72d95.0","@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.671d72d95.0_1609359204749_0.6497992086411748","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/drawer","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4597005ac7d803b03f3b1744bffc1cf7218062f7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":48,"integrity":"sha512-1bPKsB4NpBcDtHUeSOyH0wU+4T7I+/byWTJYAMsWOOMHMujoqRSJzX2o2zMzdZtYqhwZPCAnTdtQJwSndo17uw==","signatures":[{"sig":"MEUCIHDWBgym91HzkdprcrkHF6z1q+oHxHsD7DjGeaVbWERjAiEAw46d1tngkVFAkR6QpDDrtN18cIVNRoiBUfNSgt1Hc5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PWRCRA9TVsSAnZWagAA8FYP/3D/vVE0HQUs8uoUlETw\n8xSo6yFx5Friop3/OeIyAMlSeQeFtIZTP1RpjhyNhwxjiPgqn0zV8lixbtDC\n934zm7Ak84yHRxo1aWT5Z4dGHZvJP7pugeBllW9LspXOZmhtkwIPsoopouD9\nSUras9eOZMKJ+caUT8+zNiGJo8ET39KAVpv/12Rq/6Vyotzbn4c1dT/cFWSv\nxpJYGprW5M2ej7F275sYTc3lTRsyBkJeoWGR+zV93MLwWPhdZ/6UMVpVIENU\nnY9jFIp4itiPPSvZ3vKdYXaGMpronmnqhz2r93mc8hWSVPBMHOU81i5Vv6H3\n/pVnKsgW1PT487p93x3j8T8kvHi6ZbalPNhlJ9Jg1Nhy16nqBfGDJ3pBQlr6\nmyUGfeCCkWzl/7p2Zr6iFy4Z0ViVWkl6zUmVXY5bFMsFP5pTFGtb0Vf2zsgC\nP6CSplZ+qLiShCmfi/E5kQgQ7vCuX72XjgDyzdqKVL7xHw8ARgmuopqaAj13\ncbImP/aM8daIlbG9DUB4Pk6c1ISYlFZYP/DBfHimkF1Ays1BX50uflScDITY\nkVg/sgPF1DM4hZ+049cVfY0Hm4nUbD3sZEUe2RAWoZPhGDVBckiyFEql/uwG\nuSwS5fq+tbLjejJUnDOf3fmvnLT73MUtGLXXb65swv+Ld0RTEOJDSmiGWRZl\ng8jQ\r\n=FIWh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b4f5a1c9e.0","@material/rtl":"10.0.0-canary.b4f5a1c9e.0","@material/base":"10.0.0-canary.b4f5a1c9e.0","@material/list":"10.0.0-canary.b4f5a1c9e.0","@material/shape":"10.0.0-canary.b4f5a1c9e.0","@material/theme":"10.0.0-canary.b4f5a1c9e.0","@material/ripple":"10.0.0-canary.b4f5a1c9e.0","@material/animation":"10.0.0-canary.b4f5a1c9e.0","@material/elevation":"10.0.0-canary.b4f5a1c9e.0","@material/typography":"10.0.0-canary.b4f5a1c9e.0","@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.b4f5a1c9e.0_1609364880760_0.010295052436836594","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/drawer","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a693e78eab8d3b6607d886d8dfaa489d8f092582","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.a94bd8deb.0.tgz","fileCount":48,"integrity":"sha512-+V6LKNp1W4GXi3r2p0pYqVlLeRLVzsEs7Q4wShqa/dkHzG+B9aKaUCOiZpwuTfi7VNUGmv7MINWfMnZLQI6Ubg==","signatures":[{"sig":"MEUCIGqhvtDraHbqWNKpoHYpEwEVU/nqmEQYPiGqg/47asG1AiEAhZfQ4tE1zaU8l5RD9lAmOZWIZQ8uLoi0qHO/dbNsG4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PnECRA9TVsSAnZWagAA/0QP/0xzwkZuuwIixXuJulzS\nWnucRr1ztLzG1lYJx4dfeX1/79kbVdq9SdRv8K2ObN9OT0GLi9Sn8e5Ce8j2\nRUFwXah0LfIXR5zOCg3wGdjMiM7S2DfAzsl9F3mj+wcD05IC1zMu8a0XYvjC\n8azF/WBzHXM9ufE94Z3n+etl0d3rq8TiPQzMipXUeE22uscIWM7Ru35Kf5O+\niIxE61aovXvcyOhZLREepHMqrBU9egmswFXjTk9rojfrClNQai0pnjhTSBNa\nLRQeC8HFUlu+DkMTEJEGAa8d/55vWKT79lv94QZIi+906h3mJ5DfZDHIAtPE\nYNuCidGh7WJntmEuX+ukT5MuwpejtiiS82f4bfz8kz/4gd1wuzBa5cKrEpnl\nNsihGpt7SYr/ppGwN9MOMnj4tH5gn54OSniLf2IFcDrzRjPNzinxWmz3ccTZ\n3BNJYoV+sPUcKG81a7S0IHMNMpwwEew2cbs/TLhENiPZuX1VK8ouW/5O6ACx\nig1xb3QtDwXS/7DWMgFjhBrT5U/jQhkzE9s5Q4+4/vvfWAORgcMe3vdbiK5L\nTmLUKm+mBdA0UMqCbdkgWFx4b141upQM91UYlvQ3/fk/kjyomCVnEDBX70UE\nqAtnIZaIDeLzxzeAOjIfewg0jP4ffKzwEZszDeTulUUDnNwGetj5X6h5tXMJ\nKUwN\r\n=LIRR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.a94bd8deb.0","@material/rtl":"10.0.0-canary.a94bd8deb.0","@material/base":"10.0.0-canary.a94bd8deb.0","@material/list":"10.0.0-canary.a94bd8deb.0","@material/shape":"10.0.0-canary.a94bd8deb.0","@material/theme":"10.0.0-canary.a94bd8deb.0","@material/ripple":"10.0.0-canary.a94bd8deb.0","@material/animation":"10.0.0-canary.a94bd8deb.0","@material/elevation":"10.0.0-canary.a94bd8deb.0","@material/typography":"10.0.0-canary.a94bd8deb.0","@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.a94bd8deb.0_1609365956096_0.3389503950242547","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/drawer","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.5d128511b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cce9d9987e0c806f85b7bf1bb09ff0d5ca04de09","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.5d128511b.0.tgz","fileCount":48,"integrity":"sha512-okC3QfVH3pdF8Ssqj1HofmWt27i/RREkffDWFrGhxXreIkepC7GHp7MpuN/NJon19ZdLJBVR3fsibQBxj05QKw==","signatures":[{"sig":"MEQCIA9YHcQycItUq1nJM9t6oVmUq6eVp3zIOhCNuzN1rPdFAiBULWHj+FYDOZBCNt1+k/bmiRBJMVXQAlBOaMHa8EhMLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7Pr7CRA9TVsSAnZWagAA90kP/jFgnx1DcyXaI2bgFtEX\neub2BzwJpzcGQlOxEx8Xx9U0sCOSHGyRuObSUFvrdSLBVwQcgP6a/Qcm6RH9\ny3HIaaL4dfpHBpUN5on24tttuIYAQqOxop8CQlzyiqWSRRF+EVeF3akfNQs+\nujnw5p12tzERKgqvjNpN3/nGqgaCyF3IpUNJL528kd5OujnYx0s34O5ZBn2Q\npXbYpsJIKuWsr5zOzb1u6SdQbY9e9s1brXLuFSbLN33LN1FIinS0YtdCNCUW\nctgWFPWmdATXClsHuDp9H8lmEpNQbjV2O8oPk0R+vz7frn9J5gTdYu6IKYTr\nUxZXxvOeo+sDQywiOvzSgoSg82CWHWECbbWtTMoks0lx6DKhiqw29NH0x/PR\nBWJ9T73uP7vE8NUJ6jcy3zdLg1GXqMPLj451ehtqAT2WF04nh4FTetAhE3JI\npyZvzkGkUwlYAtntmMnBm7DlUGib0eAiF0a53/mFiawypGLiymsSviV6fY4M\nJ+Zx5jL+n+NAWiA8SwM3n2r2re3+YXMh9aYR5EHlcyM4eqj7JI5R0bnoiK+X\n03/NWkjpKqOjn5sNCd3JgJ94gZ7k4XgcmhxQT44BW/5e1vjkVyFyYj8hmhLs\nzTTsxcdcVN/S96eKRHCo22ltQObwk+roE6pcAo1+AooM0+62cJwIxuNROQpn\nAwSt\r\n=oAOf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.5d128511b.0","@material/rtl":"10.0.0-canary.5d128511b.0","@material/base":"10.0.0-canary.5d128511b.0","@material/list":"10.0.0-canary.5d128511b.0","@material/shape":"10.0.0-canary.5d128511b.0","@material/theme":"10.0.0-canary.5d128511b.0","@material/ripple":"10.0.0-canary.5d128511b.0","@material/animation":"10.0.0-canary.5d128511b.0","@material/elevation":"10.0.0-canary.5d128511b.0","@material/typography":"10.0.0-canary.5d128511b.0","@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.5d128511b.0_1609366267034_0.021393787633110728","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/drawer","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.365c69360.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4a29358a5dc7c457e7441d490ad33b46096b58a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.365c69360.0.tgz","fileCount":48,"integrity":"sha512-7Uo1Az0tknKukvjg39QFDrvCoU7U1b6a11qnaY/0lp3aXtrfp0eHicRGl8ijDKT7eWrZ3DUJQBKIcMK3GINQmA==","signatures":[{"sig":"MEUCIQCJqWTwWacRHcqGA+V4jM3UCuqo2FRpm1J2TvfyHhTTRwIgZPgL0Be/Xi9nzYqVd0griGJE+G5e8LHXGK9mfHT/xVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KbHCRA9TVsSAnZWagAAbPwP/0jv9Pnj4uekgdN8wH34\nj1G289iompo5ikFIaae31BEth7L02sL4xjLRY6TwOGh7JoUc+LNt1f60QX0G\niPTcGSNZsZSD9PMQuQ9mLP6L20vjcpp1jYnLFIcuVGSZmoM2UpCWNour5dwF\nxU2iPgjIeGMgBABjnolnKWX/R3f+eHYXB7dNGAKRmFVPB9rrRbhl5HOppscz\nFnyY36K/aBduSJNtPM/PMVNOxtkDfbU23JhfXYePNGPqAPn/HIVkiRYN+aOh\ns4xNk2cKdcYNbsvVdyAa9ZwGcyNcI123OxUn0Qnd+cofKwbUI+06cL+NfDeG\nKifOPEbqPTUAfwGYmzmytdum/k5PFndmfTVMukPsUq6HlKMiVgltt4H0WaMB\ncfTbT4CEyjPLn+EXOv+sRIG3W0qwJYIndHaiEmuy36HqwbuHiRcJBepodqD4\nUh75alwqRb7PigQwTsDXz+jcuUpJ4M3DidYsTewbxyLhKtvHurDg2TbYbMok\nTyZ9jXDtwZHTISvThOrfFPTEueoL5Sicj1SyD4X2mCQ1LwOWYoTjyLpPu1HX\n1nMphhgcCk0PPveUAgNQVW0d8/rnfFASvTJn913Snh/lPe2xIhJjleFVcvLz\n6SVfmI3VQ/UedPCZUoPIydtVvsWgSXInnhvGeVXda6+vh1MX4D/ut0UaNyEB\n2Srt\r\n=GzVl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.365c69360.0","@material/rtl":"10.0.0-canary.365c69360.0","@material/base":"10.0.0-canary.365c69360.0","@material/list":"10.0.0-canary.365c69360.0","@material/shape":"10.0.0-canary.365c69360.0","@material/theme":"10.0.0-canary.365c69360.0","@material/ripple":"10.0.0-canary.365c69360.0","@material/animation":"10.0.0-canary.365c69360.0","@material/elevation":"10.0.0-canary.365c69360.0","@material/typography":"10.0.0-canary.365c69360.0","@material/feature-targeting":"10.0.0-canary.365c69360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.365c69360.0_1609868999357_0.24044867129129877","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/drawer","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.700a8261a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"311ee1d1fc9519e6ecc2ba7d8c537e371f1f215f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.700a8261a.0.tgz","fileCount":48,"integrity":"sha512-JW2wMBHR2/LM4U1l975xZoKcK9TroQSTzsnAK0S20zDPGXFQvNcZA1eY+u6vGNEMqORzufNvInK4aFiPB0Rh4Q==","signatures":[{"sig":"MEYCIQD4tnZJPwOls+e7bmrKUT9h6kZaTAukVqD15wOYFdj1EAIhAJsieU/lPy/xHuRzJro96MDwZbwn6QP8bS4uniz+ZExb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":915573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NPYCRA9TVsSAnZWagAAugsQAIaqkdRHQXPTpNpFVP2u\nE+iHhyB/s7IgZFoCgETsecogT4aodvRTmgiPxa/OldSrTWLf0WnRpcrvqi5S\ndZOuG1pH0dcxDsTPhq4V1pSAwHYHsRWH/2Tyu902gGxJ4m1QOO/j+wb+IKfr\nf77PQhPdn+mRdbU5UQwnRwo2g8c+MUvGy3VkNGH7yEU+fHFYGdsSbEgBkhsm\nob+GcakV3EDf8dBxGNKh68xiSuaMizVsy+GAC9ACGoDMbvLA4Uv7yBDu26zz\nHJBePh+8TADLECy5e3lW0WO91+DIXzx2pIN3VDwWUlausopiJczovhu+fDxO\n2QU558QUMQcO2PX4MqF+RVBMXwfyMU3UxTjY5YNRvbKDFKFrMk29v0GJMeEM\nkeoiDhZrgyDJ5p1kTzwEZGRDjkyYsKcxjRacNPwvfRrnBbJ496Dqj5HA7tkE\nJ0GKHLah0NtXHwlHV4QujUiwCnmHiVvvaaT8DVoQ8F2deXd1M3oyiT9t6RdG\nC7fZ7OHLjsMPY0M3JchgKgC5Y7qbHUQ9t39vV9L7//N3MKjt5XJ140dN+qZv\nQ62DEy8b97XLvjxQccwjv9MM4rbZRQYnJnVTw7ozQQgv6rGTN/W3uC7SU6jX\n0kmqc+sESLA7Mm6z/EGiWx3XsD01UPrS07+VCC6JnwZuOpwOvg4PZqlQ8gTz\nHkGT\r\n=CaFI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.700a8261a.0","@material/rtl":"10.0.0-canary.700a8261a.0","@material/base":"10.0.0-canary.700a8261a.0","@material/list":"10.0.0-canary.700a8261a.0","@material/shape":"10.0.0-canary.700a8261a.0","@material/theme":"10.0.0-canary.700a8261a.0","@material/ripple":"10.0.0-canary.700a8261a.0","@material/animation":"10.0.0-canary.700a8261a.0","@material/elevation":"10.0.0-canary.700a8261a.0","@material/typography":"10.0.0-canary.700a8261a.0","@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.700a8261a.0_1609880535889_0.9029193364344406","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/drawer","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.766981c15.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f882995f69480cf77128f196da5a9b79b9bb9f95","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.766981c15.0.tgz","fileCount":48,"integrity":"sha512-0QvXnvmY1i71kxHSV2JcirsCwV7GMWVfWqhMAlAr8RJbwguq8VTGDM6k+UXw5ds6abe2esDFUQZ6AYJB8mWKBw==","signatures":[{"sig":"MEQCIBd1LHXSBIZ5nEJZ16a6wJxw+XaQBAs/948tZlhL8FYYAiANpGkEDqlMHv1PKFjbbSPxnRNKEjUuCCfwLKXEbIUqdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OsxCRA9TVsSAnZWagAA44oP/A9agcRlAZlYinH9wjL/\nZmKge7QhReecP+1lHL9Tau+ZrFPULQDKZ3J5JuWLQ3ZdlTizRUnnGo49HU5F\n4lMO4mCPqjuFoOQH9+bOEhR9ZkdtjGDd1TeedQP/i7Fbp9d+uNE8qMbXm5ni\n9H+F1bpqPDYAbbdPsGPhTRP0W++qmEaSsH7BHPLhPzktPhuc1FCVqTMDzlmo\nX9vwsKCPITErinGbcvC5o7DOlzbUG3uGG6SE5mkigDkuZ8K3tTLqJNaxqa2Q\n+z7hNvgIjPU3VvtMz5/SHJcr8nHTqbjCfXc+8VZ0EbeEhA7Ao7Eee10CHT9j\nWflXqNV0jSAYYTWTVQ8UPzOH4iKx7EsCb4B3rN4x1FwwGqt4CGg4XVoazBJu\n//wRKc8KrR8tNzjaMfgcUsOzcVcL48eyjn70jhoel2nlcGtWOyVMrKsbAmAf\nAwMB/HFcNbSDJfabdOOm2+EO+3uyJvUEF5Bed58Lk6fDuOdycs1T0Z8fryuE\n904I6PrBd9wGoNgPYE83kSvtVrqxgUyesCgHx4rm/qVVLcMAnkNSsw7VTvk1\nsfS/OfUGd8DgZhDJlzXr5mT01F1krpG1PUVNe5AZ7cMr8Waam4wVAr6Fe81H\na6r1auZuiMTy9wkVVXwvIDQW3tC9YhKA6qjZUaZkeb0k7hAqcSLIreyh0fsX\n7Emq\r\n=XoQl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.766981c15.0","@material/rtl":"10.0.0-canary.766981c15.0","@material/base":"10.0.0-canary.766981c15.0","@material/list":"10.0.0-canary.766981c15.0","@material/shape":"10.0.0-canary.766981c15.0","@material/theme":"10.0.0-canary.766981c15.0","@material/ripple":"10.0.0-canary.766981c15.0","@material/animation":"10.0.0-canary.766981c15.0","@material/elevation":"10.0.0-canary.766981c15.0","@material/typography":"10.0.0-canary.766981c15.0","@material/feature-targeting":"10.0.0-canary.766981c15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.766981c15.0_1609886513214_0.05543015207157809","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/drawer","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b257f8f1c7179f7e234936483f0384760f02cb9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.b28c576d9.0.tgz","fileCount":48,"integrity":"sha512-owDBXe0xdplIWjsHtezmKkZKfgitxLkA4ARUQ7yaMwRhyJddW9GxxKppTJHTtqNzRhhfHurEA1jRazeRgjALbw==","signatures":[{"sig":"MEQCIAH+ba4Axoh8ci8rcF6YjKjsUKerbyQEJ/Z+NBPwcIzQAiBO1csO9udU4nuNYut8EHPhNuQLh1Tx5WeYIZJa4EFlIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O1wCRA9TVsSAnZWagAA8rkP/ik7DfQHi7sknmXBDZyq\nJmKmrJ3MtoBN10QQaLru33qlhkZqj/Ou8EczqFg6OPysots05Th6narohHmb\nmcJxoQw47Ncm9eiPhcFE1tdx2lNUB+LVON65slnVI4hFJ7J9bFYoB+R6XTQq\nMYW1QDLgOdlpFZH+hwpRxdDOmsSBJcDI/aC1KXXgdNDRYYw5ya171AtOpXeY\nIwcQveGiHpEUsMHgDWPk/aAvWcSPLyvoVjJ+XWQofk6w/tRnuR2TG/Rp6owk\nqIpOS6fEc9R/nzlBJ8W8GyZRk6B+XBLvmgBZT9nCngVHHsv1oSO+3pfQOHLr\nBzE4ExZmZVHVnl9at5PacCBlKDrCEOhV5UH7pRZyfh0/LsaCzZCRaAFxKQq+\n8LGBXLBFS9/rFMR04hyF7X+ampk6+mnJkrB4EGSTwxkIph7SMymGJL5etsoj\nncyWNq9vFDf1VffnkqKcxhYeOZY/wEcDyjRd4o/41GlL1iArrlVzDgUDyZNL\nIBnx/m70KkUB/sinUzC29qrBtYVLwXbeiGmufpgHejeNv43Ooii3/MJr9sXK\n/m/soP/5caMze8fyLDlrqz2VsTU1ZnOk65P7RvwsLlmm7RksGFwQp1FofkRZ\nyuOe53KOIujn6+l5nJdMQkaXDY2tywkObjtlIkfLBYQRl9GIHkBqywBmlgvl\neeV5\r\n=u05u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b28c576d9.0","@material/rtl":"10.0.0-canary.b28c576d9.0","@material/base":"10.0.0-canary.b28c576d9.0","@material/list":"10.0.0-canary.b28c576d9.0","@material/shape":"10.0.0-canary.b28c576d9.0","@material/theme":"10.0.0-canary.b28c576d9.0","@material/ripple":"10.0.0-canary.b28c576d9.0","@material/animation":"10.0.0-canary.b28c576d9.0","@material/elevation":"10.0.0-canary.b28c576d9.0","@material/typography":"10.0.0-canary.b28c576d9.0","@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.b28c576d9.0_1609887088018_0.645947125570062","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/drawer","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.968735356.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e29682fe3bde68b42e6511346bead8e07b1dae71","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.968735356.0.tgz","fileCount":48,"integrity":"sha512-zEq9+eMeTPu1Ei7Gmak5f55m+R1gVAoHwgljzyGs4cUOFKZfQ069Oiu2U+M5ov8VVlPePGxBVFB5Q81cQhZmmw==","signatures":[{"sig":"MEYCIQCxDGsfCI/lVMB7NGGM6JWOwnrHxKdjNRoUvxrgwBlXpQIhAOX8tURHu8YvIQdBV1//fWMIUB2hFr0WWFrZxx2NGMR9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dy/CRA9TVsSAnZWagAAqBwP/j1T7tDDih6/NsFRmIx3\ntRYZn//zf0CBnNbLfDJMeRdczMZcdz93xKANE7MsfdVgfThlF4O52D/Uqus4\nzm1QG/k3PZ7i/r6YpobF5Txo55n2k9E2hIO+3XlNmgpmApTqqfs4BuXoxCr+\nKPkjllDSnpKh59UxdtvCUWhy69fFwfWU3ig+yCXxlB77XDVll8KFY0sCiGjB\nBXUON2qPn4c95OQMCULFeiUO+AvgfQAI2tPjWw8wE1/NA1//BncezGeqPOD/\ncO9z0kKQmNZ7tK7IAtywU7U6jR16f+3A66uev7D76Y0sbe1ty1QpZ/veBZKj\nge1atOZ6wICbbA2B8Q7XGUyE8WHv8aAJN9tx1+6hU7NWZDlfVd1pBNN28Scb\nLATsOdyK+aCWXdfo5UDgpR0ODYjoXeHM1Y82TGsdT3gz33pyG2cdIE7AEyqT\niMNTwGQt07qvuopHFU9st/DIzuGJ4T3blVKhdMekYRqMt8xnY4Ftib3RiGn6\nJ01SqkroPLqMbM+BZkLarj4rcxLXmTRb/YR6Y6p8hIxfIMe4dUVM4FowLlr6\nk3d0OGN5Kebh7tB+e8/33BrX15GzPUwjy1udiw6Vach29LhQRzKH7A3ejDvR\nRO4nnYn34MCY8rMhwHLubRxNYheNt37vvHcJ9kjkTKy/GDJbhezXdcve+xip\n8gIn\r\n=Iv8m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.968735356.0","@material/rtl":"10.0.0-canary.968735356.0","@material/base":"10.0.0-canary.968735356.0","@material/list":"10.0.0-canary.968735356.0","@material/shape":"10.0.0-canary.968735356.0","@material/theme":"10.0.0-canary.968735356.0","@material/ripple":"10.0.0-canary.968735356.0","@material/animation":"10.0.0-canary.968735356.0","@material/elevation":"10.0.0-canary.968735356.0","@material/typography":"10.0.0-canary.968735356.0","@material/feature-targeting":"10.0.0-canary.968735356.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.968735356.0_1609948351041_0.6576081615550737","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/drawer","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1abecb1ad5ce1c281686549e9ccc41948071d30f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.c5e18b020.0.tgz","fileCount":48,"integrity":"sha512-s3H79V/zNtCycxm/Diz/2EC0uJpiFVHV2qw3wzR13UKt8G0o3MNNIBvlGXBgOgR7+y8mlLLlZ3olQcupY4M5hQ==","signatures":[{"sig":"MEQCIErb1E7g2nuFCrTU6i8siOg7iYNGGT8Y5JY3sz6YanetAiBzWPKLDu0xyF2/aePUQOpQH4gHfwfeBGMeGg7GTUri9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hNoCRA9TVsSAnZWagAAFpEP/3xtwvMp89l2SQiPrOSi\nIfb+OmqU3+UEwJaZtAPsP6u8Tz38+hnG5mbLe/0R9T5y2mh0rHlSCk6fs/vo\nTIViXgava6997DpUYoOZPuZjC8644oipPaRdWUNmwT9jCeFW6GxOBPMeFXN4\nyYVxma+kq6vjvFZHHRUs1YysrelbgVmPjm/UcL1T+wK+ndqor8U0QUJhn31V\nMgUysnXFfDft+MPj6K3aTVkgamuAf9R3kQRFjcQr4iEA+xgsmKTa0N/BBcNy\npFv/95V03/myxYicYqOpKAuKd8XZV40VVJgB18FVylJC52DI4OY/sZMnTafy\nX+63FbibPyxAirCJl68DAJ3W/mPyjKdd+vF5ecxvWhyPCoIA92s9z2t8OkFU\ngXazmFdx8SA/z5/UuMoCyCP3BUPmTYtpqwaj4QUGMDbledxwS8Gp+HHV7+Ir\na3GNXT8H4kp+8niuiD95yS/bRzQF5SciZ2CQp/48/njSpJncwdVVxb2Je/lp\nDcsjiWE+qCiEhsAsbSOdzyeEmMMKOpSlh97mW4gO3XITDmxVKA+c6o87G3be\nd4r6HGC4vxrbYsXNPKe1vI3dElwT/kBFIT6iZqAc7PHfPUNdZpx+IFKCG+NH\nqE78snPYHTBkN1GT1m696ENeyl4juuEx2vqI4YpDcSik3+/Hd0QwEyhVq+jV\noLy5\r\n=fY3v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.c5e18b020.0","@material/rtl":"10.0.0-canary.c5e18b020.0","@material/base":"10.0.0-canary.c5e18b020.0","@material/list":"10.0.0-canary.c5e18b020.0","@material/shape":"10.0.0-canary.c5e18b020.0","@material/theme":"10.0.0-canary.c5e18b020.0","@material/ripple":"10.0.0-canary.c5e18b020.0","@material/animation":"10.0.0-canary.c5e18b020.0","@material/elevation":"10.0.0-canary.c5e18b020.0","@material/typography":"10.0.0-canary.c5e18b020.0","@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.c5e18b020.0_1609962344253_0.9637015905362896","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/drawer","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67b65129c3ff832ad24571c2e1ee4b1d917264f6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.bcff8a66a.0.tgz","fileCount":48,"integrity":"sha512-NnwFG3Z6ryF9nluzhroFDiICm/u+ryW/o5hgKhjOPdcI0dmYRoHuKJbxmXr9zUqbdOe92kWRsPTODnzBklxQWw==","signatures":[{"sig":"MEUCICLX2CnL/8PtyxDQe8v532rX5kNvn0DGVmWc9M9ZiNGTAiEAmln4H1oZB7n1hF23GQzkn1tvGIsNdIIQLjX4RYJZi5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9h1dCRA9TVsSAnZWagAAPwUQAJvJlMCU+qqrC+IBn8+K\ne4P+rMp6lPV3cUrOHD4r1EUGgiEDmdJ28hF80+2CYVDdJZ32hsU3RVbBW8Ak\n3UzKvvAuDxRhpoijBA5LHsTztVd1CZLulwYJ7ddT7Ddw4jjx0DCkxEaVGp6E\nOFQmD8W8qekpVDZsO76uKDc9Ol0ISTY/vUl74tM47bsUclODkNxsc9qI1y0S\nf39K3PNgyCN/wLHYQmDtADH6LLJf4SXfsjLQrZK9mwLK5WNFX9f8OKNDWiwa\niGaHmrIj0U51HX/ul8dipiq+I6LwgPobIgJ6IaVLLnYPQQ6FtnERNtGw8cgF\nh26j0p+5tjh7XLIHSWjwh78dq/kEZYsxUPnouzTfFrqJNpGiIARv7itcw652\nW0Gb/jsDKY/1jv5E04swBlpV8QXQRFKU74qcxBb+IeXIi0Fd3kUxMiOJ7Pzu\nRIeNTbKk0ketRHUhCxh0LEVCw0KCnBHeuUlBh/VGigzJMC9FU6FZx9SSkQtU\nhQRpTyNEATtVAkmaAr6xpKgAx9OIUL4FeUvlRPg5pwm3ky+sc832OoOD4i2r\nVyMYuCbs+bykNi9SniU09/ti3ybxEjJswCWn//+VyEdClx6t5ISvg4mwGRY/\nUVg+tDlgJcytyPoewM/NQ06rLxe5Q9ZbsdzU/Tk7FFVGuueStBTK24YKxQIq\nipVn\r\n=dYoc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.bcff8a66a.0","@material/rtl":"10.0.0-canary.bcff8a66a.0","@material/base":"10.0.0-canary.bcff8a66a.0","@material/list":"10.0.0-canary.bcff8a66a.0","@material/shape":"10.0.0-canary.bcff8a66a.0","@material/theme":"10.0.0-canary.bcff8a66a.0","@material/ripple":"10.0.0-canary.bcff8a66a.0","@material/animation":"10.0.0-canary.bcff8a66a.0","@material/elevation":"10.0.0-canary.bcff8a66a.0","@material/typography":"10.0.0-canary.bcff8a66a.0","@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.bcff8a66a.0_1609964892325_0.3585357725937719","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/drawer","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97479c08d4c67cc7968f78c27cd418854145bfe2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.79328c9ff.0.tgz","fileCount":48,"integrity":"sha512-T4QquFMN0mtf+GYuNZ3JP8QEE5NBori46fi6pNLUiA+Mx/n2gi/297QNxgRjTenU7pg3RhGp7zel6Py8Dc+nGg==","signatures":[{"sig":"MEQCIHPiGMrP7c/yE7eFMuWltv1UmLBXpMm1t3+I+3UazTQdAiBHVsqw7qcdaJCtPC/0WaX+bXp5EI/g2pSTVeZi5bZgwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nOBCRA9TVsSAnZWagAAbigP/3B6sz1Mw1LCUJx2fPCY\nic1vY0g4D4530fuM8OxgZNVcq7IoXx2US3v977dTMSDP+mNP9K0zwNuWJKIY\nig+G8JwKPPTQUT9IymlLNwLQU+tjnIH8hF/+KOCgR+MCdBCVzgKrs2/FO5fS\nYTrXr3KOmzrHTwgjGJjIU7qlmaY0J9CYilsiZTjDCmW4j3P0WNo5UyQRswRE\ni8bhtsfZyfkV0Pgh+lXxUNmqruCL/HARUl0CR86g+abOpvpQgbQ/Ic2VgQXG\nm5DFjq1mUR5DULAQRj86D0vvtODzAGxkCa53q1BQkLhLYeWH6BPS7+gsyu26\nXVH50tDARvD9ECBRESL21Zz5/qOMaBvrGmJrnHGRFT+yC5xIBP0H8UrY8KVt\nsxrO1Ig2DXfKqFszqu8mYwN66tczqyBJD0kQfqI/4Im4R5aiacnJiP5/QHXm\naEs4pDwx94mDwoD9DnhNlaqwhBpytytgjyIYybPWRMf1DM3unkhvH8lToO2y\nkyviWlmHPMZ1H9ixMBhKz+3Hu+PwDDT8aPo218V9kH1N8S1sHcd5dgtdEyCb\n+uPVLG9NZe8o35p5Uny3aGtOomuRfg+NtBMCFe5ExqrdZSb226n/dUObLH+E\ngTtzf1Q3+PehLiEjanNzQN+HDH7C687mkDIc1Eeoed2QLyuoT50sq55PNLgo\nJRMY\r\n=rlGC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.79328c9ff.0","@material/rtl":"10.0.0-canary.79328c9ff.0","@material/base":"10.0.0-canary.79328c9ff.0","@material/list":"10.0.0-canary.79328c9ff.0","@material/shape":"10.0.0-canary.79328c9ff.0","@material/theme":"10.0.0-canary.79328c9ff.0","@material/ripple":"10.0.0-canary.79328c9ff.0","@material/animation":"10.0.0-canary.79328c9ff.0","@material/elevation":"10.0.0-canary.79328c9ff.0","@material/typography":"10.0.0-canary.79328c9ff.0","@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.79328c9ff.0_1609986944802_0.1614903602566311","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/drawer","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.121e1f303.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e98b799a61ddf76010f0746e4f420346c597b0e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.121e1f303.0.tgz","fileCount":48,"integrity":"sha512-nfzckOxPLrI9HHZ/2Eg3bfjKkchFfSA0hJRSb/6ysWcyB4yOz2WpZsMYI3ed7TUnf0BKV+NxHeSBKKCTZMBHNg==","signatures":[{"sig":"MEQCIBJw8V7CaPmTQlseipRhr2Zf6rK5/lSE+TiEf8UTVwdCAiBdDWYtl4PJNLmg4CZonJFAfxwEF7j28davD+aqD/+qtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95dyCRA9TVsSAnZWagAAoF0P/027zm9KHIXmurwUo6bN\nbAl4H+5z2OFfjFFHsIb3RFcRMxQqdWyXdOrcGJHo86ObE/75Tfb8gYTifF+H\nlwb87U5uCaBHsez2ai7Ii1rkToPuKN9e7jbYiab9YjiFw/Non3MgmKQAvHJ4\nfLm3HVCCHdT49JdzsPtZPSsm086SbqSm9FMYiE3jBJEGrt2xzmjlGexYk9k1\njW2fZi38t3imrRIhrE6TaaTWO0Llt1TbVLSFX16WVZ7M/HtafbcUx41bx39n\n+spDXatTCUhdG+feQwlt0PnZlk4btEpmFECbWr4mq1bnFraZTvMhi1BNTExp\nSbjZjBVchHnMS0b+HRMAYyBT77GkhSIzOoTqCDcirBr+Ti9T8csdSclFxQP0\nW0oUJUvXIT3OSb6YWlzHdxwffsH+4FJAjah10escNHGIvKEGmAcl3BUKW/gp\nFqNwHf2MEFha4lOaS2/nTakbSSHEhQJbIW8ad/k40/y/Lc9bN4jkLn+yAGJe\nSYvczti05149pZpdy2XZpQpFdjobf7XfmItW7Q7hI+2Lpg6OCY0zqwO0yxLC\nxm8CA7D/rn3NRBLois9IJXxV34wUmUfx8DqGNufV3x7IXt7vSfuywEz+zufT\nM4xKiETVe6tOowoMlXuD1RVVH8pxrw0BYmO8TmeHwN8Gi96Gcw+53/tfoOX+\nesTV\r\n=acyW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.121e1f303.0","@material/rtl":"10.0.0-canary.121e1f303.0","@material/base":"10.0.0-canary.121e1f303.0","@material/list":"10.0.0-canary.121e1f303.0","@material/shape":"10.0.0-canary.121e1f303.0","@material/theme":"10.0.0-canary.121e1f303.0","@material/ripple":"10.0.0-canary.121e1f303.0","@material/animation":"10.0.0-canary.121e1f303.0","@material/elevation":"10.0.0-canary.121e1f303.0","@material/typography":"10.0.0-canary.121e1f303.0","@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.121e1f303.0_1610061681583_0.017190350482046535","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/drawer","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.abdd10065.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdd9cc59844d1a452241943e3573461b89e2f028","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.abdd10065.0.tgz","fileCount":48,"integrity":"sha512-+/Ez6sKKgtjaVWga8pRQo67nNSHCjfLzjlENiBtM1DxpVR+dRfr7K+APcxea9O2tqiV5Mx8rYTGFYwTXfTVaAg==","signatures":[{"sig":"MEUCIA4q3sh5ZSCWWc/naoeOY94G4hcdEvkKdvYkST+5Gc8sAiEAwgR+SKrzEgSrLtOlw2UE2eQqP18ryUXWN5tdScsBoxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JwICRA9TVsSAnZWagAAVIUP/jNwxnN0jvuHzRC7ZvSD\nQCilnHWLrm92tNUJUdGymzjrXHXDq3Lca4eJFb6S/m6sPuCv1V9tmWW7n2QB\nb5F4lMAX2kiZVsOE3SpXYGkOUb27SEEttVfGUEQtvkMWEEGAtE3kDxVjeOhH\nqWdKE2PsL5lFowVqtDQSN1PD4q8poYIwbGdUtiVCpiZh0WTN0+iAopF6Mz9n\nm6LKwkplOfwWef1giL2K8cvGvK0m8qCUkRJANmQWIMKQl9IwP2MDF9F4YbZ0\nCjl143ctN6u9Dvy7Qa5uEK7O8fVERLRVOoYwfvtDkVUgGOFnz3A2iiLXlZwT\n1A69AbipwdKIyalnjgVzrmKJPQKAx+cWKyDf98tVTRmZkIQeCl7QZKqfNSm+\n6O8bpuq5aeFxtdXqCdqrbCTmGskHn08Fr4ya9LOkPAeUf5Lc+OhJJOMENHIl\n4tLW2MgBLsEQ+8cTl2p4TzLyI0LT4BZyiQBuzqgmLShiBJ5Vd9t4qB6scUyU\njVYpeh2Kip5IVf+0nnZstFYxdgmxYWwDHTEttgztzdEVWa6vRVAuoghtgrf9\nNj2WAbU5DT1Y4U8IlWdmzjtTh/5KhNmhbWVFjAEIpe+UBwZ1tcBqaxYvE5tu\nxayYhmQ/tV6s/kaQLquxaDIZpOEATszzuQDjUiyt07y0YRR3Ijf/dzjmf2rM\nkcXb\r\n=ibSu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.abdd10065.0","@material/rtl":"10.0.0-canary.abdd10065.0","@material/base":"10.0.0-canary.abdd10065.0","@material/list":"10.0.0-canary.abdd10065.0","@material/shape":"10.0.0-canary.abdd10065.0","@material/theme":"10.0.0-canary.abdd10065.0","@material/ripple":"10.0.0-canary.abdd10065.0","@material/animation":"10.0.0-canary.abdd10065.0","@material/elevation":"10.0.0-canary.abdd10065.0","@material/typography":"10.0.0-canary.abdd10065.0","@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.abdd10065.0_1610128392132_0.0758256614770465","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/drawer","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.089de519c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd546647e7fa935c9949ea0f9526addef3bca867","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.089de519c.0.tgz","fileCount":48,"integrity":"sha512-TbaCDEdkPImi5HffwaChTK/NugHGjoGyM6DnXUCCV2JLEU8TJ8mRdb5VLyywL9cW4vo8hfq5qAIadncR8RtO6w==","signatures":[{"sig":"MEUCIGYSGRdQWqrAV6toHlkIewCbJAfRGXyWuDaySQpM727vAiEAqQLDCw06/5IIdP5nftQb2winsLP5bvnTx0tE39FYk0o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NsRCRA9TVsSAnZWagAAvKAP/1TT6nuhqpMLnCJcMXSf\ncOOG26rmzMPMK4P9qeDq1DzZP91xDNrCGgK65J9VSpg2tFr/Y9sNz68qAzRj\nBOVXdS+Q+mctTxGOr5sTcKiPcSVUwv1AqRfEP0/MtiCHp1/DqQtYPlyi7AXI\n3wOuGIpvXCZoad1zJEg5i9H2CRRyIhQbHCwT7W7LcjISEx2YGiYt1L/IxcBi\nOdernyk67iclgpTkMoEaZTM16u36KYqB0QMyIA6+xHzoRUHUe6oG5nUHWwAz\n0+Cv+h7p+iDy4J13VAoxgFlmywj9SEmRVwvanYFCFE0CQqHrnvQDcNWMvOop\nKwcw6X4GkKHgnQdUmeptDajkUN8a6xam7xa2JS7T8JABBkVGtrwpZNSvtZzE\nl+uqM9wxHLssRXWbAA5L1Fb8LyVkfFgF/OWgTHPfoxg2piV9tRF8wjGH3/yG\nHDeHrRysM3i3wfOUeeZg1ixSybLC8sPwo+zyUjZaHIYuBUkAgEFgOa3nKBMj\nIDyAbl8bUSCjpXIjcqDmDsxNCpXrAOS0dsM/0BAnVjz1XDemZOQ+e62QXEpa\n+U0mTQtZdEDc6w5xjEws2RjZVV9BHeaAqaqPXf9dGiklY0F4ILztH8JzfyJ8\njcHcShn8yd1wH8nQXf3481kZBUdRaAOJoVzh6qwtenMNCm0fh/7iOJbVS9TI\ng6gH\r\n=MbMr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.089de519c.0","@material/rtl":"10.0.0-canary.089de519c.0","@material/base":"10.0.0-canary.089de519c.0","@material/list":"10.0.0-canary.089de519c.0","@material/shape":"10.0.0-canary.089de519c.0","@material/theme":"10.0.0-canary.089de519c.0","@material/ripple":"10.0.0-canary.089de519c.0","@material/animation":"10.0.0-canary.089de519c.0","@material/elevation":"10.0.0-canary.089de519c.0","@material/typography":"10.0.0-canary.089de519c.0","@material/feature-targeting":"10.0.0-canary.089de519c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.089de519c.0_1610144528922_0.12663844016883496","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/drawer","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.163119837.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cb24120bd42cb539e4817742b814e2d6472b7d4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.163119837.0.tgz","fileCount":48,"integrity":"sha512-1aonA+V8oCEJ5O/UcVjTOgx1FIeimqN0TNStIHql1W3nJhfsg+YiZtCx+sk/2I2Zdh/iwajbB46lYzfJDlTqoA==","signatures":[{"sig":"MEYCIQCh54MPPbYwkmq8ohmDsWGulbESD8G030EE6uQJ4ffCcgIhANObiPcA86y0Hvv5I5XE3u0OtYkG0CrRw0+dFB7DfWHm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O7nCRA9TVsSAnZWagAAkjsP/1levkT5qmm63sD1SLXl\nNqsbevVA5b3bP31Hdv9qWT/WXbXINUQKG9Xjv6ekFTjer/CwrNgaXV8gf5k9\nMc9J/gEa/rrJUaLTWmTqbgASZoB2b3WTL37Hq/kqlYd9vzETT9ZY5sLHB4D7\nx7g5+zTL6e6MzfyXF0QnftFQ7U67+DVjz/03kNvO0FCYetLnc6Wg6jjOfYcc\nRICEflcdluJ7RdUln3QT6zXXySq/Fv79DoDQW4mft3wdzHukgUTwlJSY+u6T\nTwqNy5OiMJKNYoMUvnm7cFrhyDINTV2r7WFKMmivl/F7+APke0ocWb3CQS1y\nFMh/rD9Z1s+yYpSHvz7QleaDSWh4XB/qFLIirhdVGybDKEa9hSB2mp+vWN8f\nwZWaFDLL7H0EBYHGI0mCJKx+lFHL7X7pcfKdVjZxJerm4tjTP4WhV94Yp/u8\n2UOLNS7lT/buBKoEk1It4qCMcj5nXltgh/QaGdpMukDlsKQVVf3JyvyLLa9s\nhiXKEIdvqvWIcuYyaQvsO0JMXyzgZoqpTKTksZEPFEr1WIOFJ2f8jAKWXB7e\n9HMqecaTYWe+Ym+jd3DVRHbvMkuKQfbanpknyMQR+Y/yG9J7v90KtKG5fO6b\n/JIxI1MX5Nyj3jX3xmCGenhshIx/cC7o2Q2K0sQKuoI9/FfHxwukxz3VD/8r\nL5/D\r\n=nAKE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.163119837.0","@material/rtl":"10.0.0-canary.163119837.0","@material/base":"10.0.0-canary.163119837.0","@material/list":"10.0.0-canary.163119837.0","@material/shape":"10.0.0-canary.163119837.0","@material/theme":"10.0.0-canary.163119837.0","@material/ripple":"10.0.0-canary.163119837.0","@material/animation":"10.0.0-canary.163119837.0","@material/elevation":"10.0.0-canary.163119837.0","@material/typography":"10.0.0-canary.163119837.0","@material/feature-targeting":"10.0.0-canary.163119837.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.163119837.0_1610149606685_0.4728002875258972","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/drawer","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d70a45cad7d4b4a29f6106a7c765eb20af2d11f2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":48,"integrity":"sha512-iCLti1yCJ5OQlEl8ZChKnJu9k0l6KBEDzRbu4qZXGvvHdHkzuR5VuleJB+q7gqggBqgWg0kYabxueWtkgZVLtg==","signatures":[{"sig":"MEQCIGThANtDbkNXkI/FFGr+U9LTmQRbqQ3dEi2QWXACo+RdAiBRvBg2dBHwpH+lqRy5hVM+NR67rFYaVCVIrgEt3ys8gw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HwPCRA9TVsSAnZWagAAPVYQAIh4nJK/aLnGY6PmgSIi\nqmiciYVRjtDoQcqmUjnCWghdA9uUTvcrIOiPvUSIGuBVOzVNe5uk/IGHjLE2\nfyzSDEkoOaKec95BKa2HvDNd28gK/WgrERnoj1dFGOGcCQrq3MdV0ttksyiC\nQniw4MQCitfISyvSVjTGPNapJtVzqpL/3XW/v1PIIfa2XxgEJw9OJr1l1wnE\n/u67G4Re+NPkIfuDyIpa/mflFS1ZkNYvNMmnkEq691SOQv8e6NH47yrPqAmq\nNeQACr5VnnsCE8/uSwZdKooA9qjYBr3AWSUQQH1U4C9BRiLITTrCqtYRXgD2\nf74nfm5cOpRXfBEql345urtleUA++jq7GduDyeBq38Z+QAZVe/aUXGOlO0sl\nkyBvwhs6mI/PYWfLQahqCKA3ZiKSFORctyU117nyGXzKrNwDH9DaJ1X6QIvX\nfMJzlstbuvTyiDVVqitcExd5ikDshD+was4fLwvyGyFm/NF5aDavRXtwNoli\nn3W1Yn5PINXCCGZqKdjRqhnDalSikVaceRM6z2vJU0biACCq/ZX83dyk50Ws\nOe+7iKcTI1bflpKPSm/Q9peygHN+2Q31nzjWDvoLpuv7bVZ11FU9LWVNok4v\ntNGbRhRkuK5pcL7p5SgLvLp0LGiKG7yYaot+DkSSyt56VIz12t773QB/gksp\nhE9i\r\n=x6yH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b8a1a58e4.0","@material/rtl":"10.0.0-canary.b8a1a58e4.0","@material/base":"10.0.0-canary.b8a1a58e4.0","@material/list":"10.0.0-canary.b8a1a58e4.0","@material/shape":"10.0.0-canary.b8a1a58e4.0","@material/theme":"10.0.0-canary.b8a1a58e4.0","@material/ripple":"10.0.0-canary.b8a1a58e4.0","@material/animation":"10.0.0-canary.b8a1a58e4.0","@material/elevation":"10.0.0-canary.b8a1a58e4.0","@material/typography":"10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.b8a1a58e4.0_1610382350936_0.5371613312234917","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/drawer","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.7584267ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad889ae5c208822464072c274788d840a77dc3ee","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.7584267ff.0.tgz","fileCount":48,"integrity":"sha512-MUey3EpFoyjHwW2SmtzN4z5s7ieqmKzc3PwyK1tlp67b1prCQC5EjR7IKyvQFPE/73vjBzXncZllO2OhdYcucw==","signatures":[{"sig":"MEQCIFkRxGhkUiQdfQuXzsRnf3K0PaLnrgHgM+XDlru8K03CAiBa81GQU870BiSBUM0lJ1hjvmVFPoojXDBQaQ0tLiO8XQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PfaCRA9TVsSAnZWagAAOx0QAIHs9oDlFLXIVN0qvOCx\nnLud+0oWdzlam9lMoPqb72ulsGGPpHPPflAgHbnR7PaRfnHRf3RoG+HRe2CJ\n6vEK5gTt19n/mIKkSX7ccfb46J0eMZHElLNAd6dzbsygZ1+e1UJKfNweV2kH\n1/F6nqPCtcjUYIl4Kx8ARfgOU2yqdmz9x6B866Dp1XXS0VNf/bsBMjoJQi6r\npWFfABJiC2WKJfTlvFbT0Uvb4j+NhLtXATlpv6wnfpT77/AlXHLgs275Buu+\nQ02EFW3fGf2PVS9vkIBKpXpoNzPz+doB9EJz1GoWAANTSDEMaC59HGogs+4r\n3UjlDbglnmrrTgF7qA7Cx9yxUBtHwZ2ZeCsdEGUncfv/ySstA0t2MBwaikLz\newM/nzPzkH7gRJQSlgH5+f+SQmx5GtQHfO5aEaUQ68vBWWFLVS6zgvwum7Wr\nt54GBsfsTp+Lse7rQIe9lfyROCJXmejqfWJKt6QSOqW2yhLpbFy7+Bups3Iv\nbnXnpF6v6JUUi1vEV/Mtqoodff+Pa+xfKf+UZqKtRPXUvGQfOoKdbYpmDi1n\nckMezCi88wOk+pLQavVgyG/BFWHPlioc0QlGNFHVJvjS0AXMKkDBXQxKHjGO\n/MFUqX+OlgmianzeXJCmEYuvQ5D4fhsWFJx4i1zwLx1oa+dfPpSCxE7DDcOo\nTrSc\r\n=ADZi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.7584267ff.0","@material/rtl":"10.0.0-canary.7584267ff.0","@material/base":"10.0.0-canary.7584267ff.0","@material/list":"10.0.0-canary.7584267ff.0","@material/shape":"10.0.0-canary.7584267ff.0","@material/theme":"10.0.0-canary.7584267ff.0","@material/ripple":"10.0.0-canary.7584267ff.0","@material/animation":"10.0.0-canary.7584267ff.0","@material/elevation":"10.0.0-canary.7584267ff.0","@material/typography":"10.0.0-canary.7584267ff.0","@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.7584267ff.0_1610414041899_0.394945081064759","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/drawer","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c0eabe7ab520c685de0683e45aa92d2dc5b0a63","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.251ac04c0.0.tgz","fileCount":48,"integrity":"sha512-lrhRpBUDD+PFT5H8NXh+v0R7gGDiBIA4rmMjOzH5TbwgwMB5mB7JggWxEkxgEgv8AIael6V/TfIiKCLOLDqprg==","signatures":[{"sig":"MEUCIQCfYZG+54wzKsYlEJg1ANcUHnacwuApYxrqE9D8QL6rKgIgDtgw3GIsqtMAGtphlYt/BTGxwZhuQ+iY7l8O3HMw3ko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f8ECRA9TVsSAnZWagAAZi4P/1r2HWZq91sJ0xHnjEhx\n8PVrUIZVrd9Z3gH1vOJSf9m8yetGgPXrtMDAlb8PvAPVwuZv4G5JpKuUaC1U\nHNcYwcGbTypXe51wOb5fNFp51+t431C0mDH7sh1NRSv3+AC2Wd2NwBenw1Zj\n19XTQhWD5sSncJ1pDDIR6wbJ6eoOBuO76aESi/ce4KMagruAHWFPjDP7Cmxy\n8x6w4UwhLhf+hxdejX5h7T+JH87INSz6WTo2i4lqmTZqY3ksDEU3j5rN4KQ6\nSM1gEY3mq52GaacwKS+EyeHb/CTWbHS2fTh1SV7HFX81Nh1gomG7x8A2qnvD\n7mFrLSXe6d3jnhB2pEbDeh6LkXFhxzvt7ESfDV1mHAs5ikQhIU/BZON4+Qru\nfSnkwGoqrtWb87OMmRPIbN9s37MPq0t85cyupEPeei9kV84yMmUkLGTv6SUh\n0ozq1AI3Txwp6jypU0v76TsT3Gdu1y5iJ1+C/yckeqlWUlAU3JceXPnIcpt6\nWkE9ug9Z9UL8cn0JvjKnG0LERq9YmoLf6NIKU37FXM5xIfqF8wXoR+jPKzO7\nLi5oBPwgniSpL0OWBLYonSSq3JAfYDcZ6TZFLUTq91SSifYcg4PRr9gpp5y+\n/sbkf/u8EbuStuwBx8pLKQuXtXjx3MeYz0DVOOoszpkhJxmhbqokTrEJWyEC\npqG6\r\n=T44m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.251ac04c0.0","@material/rtl":"10.0.0-canary.251ac04c0.0","@material/base":"10.0.0-canary.251ac04c0.0","@material/list":"10.0.0-canary.251ac04c0.0","@material/shape":"10.0.0-canary.251ac04c0.0","@material/theme":"10.0.0-canary.251ac04c0.0","@material/ripple":"10.0.0-canary.251ac04c0.0","@material/animation":"10.0.0-canary.251ac04c0.0","@material/elevation":"10.0.0-canary.251ac04c0.0","@material/typography":"10.0.0-canary.251ac04c0.0","@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.251ac04c0.0_1610481412100_0.020523326250754925","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/drawer","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.772cc1068.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95329d557b5dcd0d48fa83087526ff125bb5d0b1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.772cc1068.0.tgz","fileCount":48,"integrity":"sha512-fYnMZd4pJdx3qh1xOZQMuZzHk2jrus5S/jwjKjYm0ULmbm279Y2AyjYcVu0Dwgi99vPTuKedBTHi+QTxCngoIg==","signatures":[{"sig":"MEUCIQC+pvr5vY2RlNCERiOOdw/nPu2f2PkJ1sqI8x3fhk+dfAIgUIyCwqe1vn99MZgH83CX6ZNPQH8i7y7wLR/S9hmU0LE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4uNCRA9TVsSAnZWagAA4oMP/3kkk95yndEJjKMhkx5w\nARyV4pANdxesYvxXL3gzPy01fHYnkouG/ayat9j7OupDE1HSJ+QEUBof9aE+\nDDwekGDWVTwGqOYkRvfEFDoilpyvL6/SpUV8eRDolP50dhTALRH0EdW0k7MO\nvYMvRZsbcWqO2kwr90p1SnOHcR3zk0izMjKqkcGSTbYk32sbGYkXECpwFVtn\nJ8+xBoX0Unk1U9qgUKO4idV2M9SRzzFjj40ziTbFvYfJduGFoBp0yqQFxCXz\nkVKKDjF6aUv5WUz18HZM1oDmGdgLiQEcuwLnYMck/30hRtOSi3sKnIF4gJvD\nuz/qBshq0Ko7ayulDdYthyyDz9NXis2Sdr5mSDiNDgsSB0ezLXVFtomK5xyb\n3Zeb9Qy5YkXWUBibRuYlGSlAhMjY9tIfHAgkTdzWeKGQG2vVb3cfjOquvRCq\ntJ85fTlDyMkqyLRdViZp46vhElwNnE8oLfpxB4fookw+JSIlJz4HC7dGuG1T\nxPw3tuMPj+CsxH9g1NXq+eqkTYSRaN+8L6jb0vD/Ex6L8zE6Y1NJJKyAi/oS\n/P6n6u0K2WsUKNUhx93FiU0mdXAOqsZg4Mos5i60/UuJ6B9cs5/T8n9fIS2Y\nD2UcstcnU+Me4XZsHdvSo1K9+qtrankDhep0gN4gcPiIty4LbhwK8cmRuetB\nuthA\r\n=oJKi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.772cc1068.0","@material/rtl":"10.0.0-canary.772cc1068.0","@material/base":"10.0.0-canary.772cc1068.0","@material/list":"10.0.0-canary.772cc1068.0","@material/shape":"10.0.0-canary.772cc1068.0","@material/theme":"10.0.0-canary.772cc1068.0","@material/ripple":"10.0.0-canary.772cc1068.0","@material/animation":"10.0.0-canary.772cc1068.0","@material/elevation":"10.0.0-canary.772cc1068.0","@material/typography":"10.0.0-canary.772cc1068.0","@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.772cc1068.0_1610582925016_0.7986896782125867","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/drawer","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d030cf23ee85c6a5c2a51e6ff0e73d59f10977d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.fe13dd130.0.tgz","fileCount":48,"integrity":"sha512-V4nUB5MoGrPpGIcNgVIX87gQB29JSzfUIvPmfdUWuAvGYtFaUiEV2h0YHFjUK1786M/z17kTv8pp2Z+ebt3NCQ==","signatures":[{"sig":"MEUCIDllUayZJtEPXLVbumDjJY3N/nLfojwqbgquvc9MlB9NAiEA5rMG7N10YfbZrYbY8l9KNtUU3k4+8hW3zgR48Q5J5JE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5pTCRA9TVsSAnZWagAA+xEP/3NlUjh2RJBv5Ghjlghb\nluz8S7UR/mRtbKEF74AUB4p2B6xReZ5dMmr/fe788AR23HUSGBZxU1bRc1/H\ng5+bdv4W6oGtfnqMVfyK3k5f831158aem3Nbppa+fwM5gf4q6PsxLObxIKq8\n8WSGDR1wv9vnkC3dY9easidUZludNd4ah2IJotzB+B+KE5oLZBMtv1zVgdtV\n6rdvnLBlah8TWNb3ewN6SIivhxKnTCpPmmeUFvwY7oczW/g+OZXm6TiQ3uu2\nXqaBb32cpzkMSCW/1ZgdrGh8S/vTsUMZnmrBUmH7vAa1LpVAd1Y6K0+QpFFR\njJTeKQj0ikmFcTEfQxODkbiM95umUxtgM1YTTPlCYVw0c2sJUZMrkkwkYXre\nsR1zkLhMlV4RzXVkCHyegt31Fmsjk4IVwCuIvghnzoDE4haXIZAvw7rTgF5b\n6vJCdHhhY5fEx7peIwuBXr6GOB8vEBwDwiv1SJ+yiVm+HRc10p7SIbQ5gHiD\nR+8ePQJoVIbS96DBTfHkjB/WD2aBIWz0Tob8QmEpJwZNcthInPgbWSTInOcy\nTGCuwFd4nvDVFl5CfaqjOWhoil2MJovfubrnn5h38BD4ws2arpfgpsGu2LDN\nbzd41yqDbOXI7Pd2gfxTLSyWI3/ex+UKaSXoXRxpb2DbWI0hth1I9CGIxRj5\naJPC\r\n=uaf+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fe13dd130.0","@material/rtl":"10.0.0-canary.fe13dd130.0","@material/base":"10.0.0-canary.fe13dd130.0","@material/list":"10.0.0-canary.fe13dd130.0","@material/shape":"10.0.0-canary.fe13dd130.0","@material/theme":"10.0.0-canary.fe13dd130.0","@material/ripple":"10.0.0-canary.fe13dd130.0","@material/animation":"10.0.0-canary.fe13dd130.0","@material/elevation":"10.0.0-canary.fe13dd130.0","@material/typography":"10.0.0-canary.fe13dd130.0","@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.fe13dd130.0_1610586706822_0.5532288934565621","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/drawer","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49aec6345af482b92000b21bcf85e8d6954039a2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.c7c5da28f.0.tgz","fileCount":48,"integrity":"sha512-R7tANKGOewF9e22KpSKA4kyWDQ8qsTGxTsUMDxHoP8U68dsUqMaugnmqgHbD12PsNtdlLjpP2FX758vPyDAVpA==","signatures":[{"sig":"MEQCIFKM3Shffr3s2IMHZPaZaRRLeL1nHIB1jr47a0auaFjGAiA4IrEUChT7e9L0u9mncAblgAxEkZunwDwoxZj9OGn/fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5/tCRA9TVsSAnZWagAANXoP/00JWvN9pie/Wbf+s6pL\nFnkYDwKwhPSRomSpL5UX2f+OOAuxH/7m2e2XoaG7NmeklM2VMN+ZXehshqYj\nF2upszK1qbLtmw4T+D/diCyBpuTBb5igp+VmEHJLzmr32RCxVdghr7CNGKZG\ngJFZjhOvG0facuYxORMzpxFUf7Y3GL9xQ8BUoRIMlnu777MbQ6mS1HfBhnQj\nV2pyiAlRYfS8mZeo+JasO+oGpi9D0yW1SVCayRZ16XAIMT64hAqsxCQGEa5c\nr0jnLl/rsQmMBMbbmTP3ufajU5mXgzm7fjRDALN0LhE/RneQXKUsfTBJ1L29\neYwXfWfg9FS3uvLCDX0uE3QJARczHjeC3dpdGQP4nJ9UhczQBSJjV4CAPmeG\nbJ1NfuZBuj6SO9vlHZzX7Clb6tH9eL9KJxQr0RsvoWpwgdNBfdvnsgpaTA8R\nAxLe6zDqDeOXYPUWhr9trQUXH2YHj/cKhmGYTbw/om2sYwXW4junD4wJvkt1\nEuYnG4mr32sh+1QhCvtdRf4H2M/ZANF+yLNWITalz6emNBmoGKMrKrC1ZfMX\n2NpRjKvD5FLj/QoQAwuXe1NbYhUZP5SAIlnCxyP8l+FSHnmO2n9aoNZ6U/av\n8gbcg0iJ/AzrIjNIuPKByN8sJJO1ZVNSnwZT6ln+kEEJ8BAFdTiBq2vCnBmx\nQvRQ\r\n=Viam\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.c7c5da28f.0","@material/rtl":"10.0.0-canary.c7c5da28f.0","@material/base":"10.0.0-canary.c7c5da28f.0","@material/list":"10.0.0-canary.c7c5da28f.0","@material/shape":"10.0.0-canary.c7c5da28f.0","@material/theme":"10.0.0-canary.c7c5da28f.0","@material/ripple":"10.0.0-canary.c7c5da28f.0","@material/animation":"10.0.0-canary.c7c5da28f.0","@material/elevation":"10.0.0-canary.c7c5da28f.0","@material/typography":"10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.c7c5da28f.0_1610588141146_0.38689163590327547","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/drawer","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45830ef1ec2b65ef8ca1e9757b73fe0b573d9c25","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.b2faa116a.0.tgz","fileCount":48,"integrity":"sha512-WVPcc0FDPnGUXjO5YKycCCv7UHxsft3wjsPRIAqQAqHvMJhgHI6IvkaGXNTvVmSXldbEdsDZ6LFnc9LtRdf9ig==","signatures":[{"sig":"MEUCIQDP2vSz3MRrf+PI9uZtjNhwPuhXQ8syrDWjlWlOp6XoxAIgaVbIUzxgUcyl1HHXpk0uWI0iZFjBGQCpqTUUGiWDrqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzLFCRA9TVsSAnZWagAAnFgP/0DewZW3eq4b7VkOURI4\n0C2rmyymMu2FexVfyTGbjqNSe5l+GVCgJs5ysHZ/oJHmUAPSstUrj6BizvlH\n92gOd1JrBp91apiwr/nnZQLBJxEbchjN5DnvBccs8tqH1VBx2clXykSixlsc\nwiMFj7tx6Va40BdV0DK43keDQZ5s3elgnsir6DGOUt/LnLSHJVJz7MT6cq7S\n8GwKKELe4kxvK4AAXcH2sgssp6kyiXbkmi0ct3wg4Oit3J/LcaSqPNgXbdSk\npmPuWqejb/3TNjsTrwyeOItHPuUqfJnOqlMpagDSRaNw9wDKDCnazZMT9rwo\nSfDtgfPBXJusTJVqHIcy2bnjYrsPfLYPUwSIK8foqlhpeDSuVk/Nbl5cALsv\nN2GMrdjbbRl96W1SsggEfEPR6jyj5D/vugcT829XqZiqc5djUdDqO4bB0rJ+\nfRUfc3UcQYpnPsXxLzH7Nti0ocwIsDa6RnDYNInNpwTFN8XdTk0uykygqN3c\nLutaSs3DGyEQ8QQG15Xv2RwzmgSLRhsVq9qno7wF8eIDlcJl8YhTtbDlLLwa\n7DtyKUvEC94gyBAQh5U9+0398NaJXWOe+LqUAVEueX0/x7UNtD+IubCot701\nFDkh9qVHSSzDdmtUPrzaRKVZGRfYdzlEl4i/Y9k8e8efD7QRrridZEdZvPpR\nhcct\r\n=QUYQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b2faa116a.0","@material/rtl":"10.0.0-canary.b2faa116a.0","@material/base":"10.0.0-canary.b2faa116a.0","@material/list":"10.0.0-canary.b2faa116a.0","@material/shape":"10.0.0-canary.b2faa116a.0","@material/theme":"10.0.0-canary.b2faa116a.0","@material/ripple":"10.0.0-canary.b2faa116a.0","@material/animation":"10.0.0-canary.b2faa116a.0","@material/elevation":"10.0.0-canary.b2faa116a.0","@material/typography":"10.0.0-canary.b2faa116a.0","@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.b2faa116a.0_1611084484892_0.35345754150487774","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/drawer","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"591b2d2220ef93d140e8dcdfe37196023e8ccc9d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":48,"integrity":"sha512-zkd+mEfrD0bWI2egeo4TYXWnQY1bN9hdLyqfCCngPlw6ea45MJpKPrLzixkgt1SiAv69qslxZuk2mRlCGve9Dw==","signatures":[{"sig":"MEYCIQDjf8szU+vgYTDWVfMyWx9z1SaaZuOD4Iqd61J8OdIqfgIhAIbQcuRIx0h8jF/sU6UXdPkTzGPc8XxQq2XjyFylR93S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2NbCRA9TVsSAnZWagAA4BsP/i2SB+RTXp1W6iwfoSo6\nqMI+dVGqAvMjHqIs54xjwPR+bgeTakDK0NPAWVAxIrd2a8hKp69NkYrWwi91\n+laSRoc7VaGNIKDLi4XcVUdtx3PKo3KTaxBiQCszyowVX3H5vMM46hLEp8Et\np0lwqzueE+RUpa/bAPlrt0FeH/GO7BWDla07Hj402ka7iYssLdwjuOWq0/ks\nmv6t8XdrOakRFKZxWwM7exYljzN/DtJYFK3XqW+ZI6Sx2MdH9iEY30/4g4hy\n3wJcbkvB+GRArzhVBGlJaz84Ms3XxiWq3+qrY1Im5tARgTdHKitDc37iicPX\ne8+ov6tblf5/S2a1ckyHcRpDWI8jZkQjhZO8jgCDt1l3DsVd87kWAyRdNSLC\nqRZ0jUvOiDC8r2UFvC2IX3Ea2oScjgmY8rCEC5r3arhuMgUdurvdIV9AdRJI\n3lKHmrQIH6Siz1BRK7I+VODcmNcSA87jgljjS05pEFiUQcDz6di/sy5j07aI\nhZo+o85VN/2ow/2z+HKi+h52TrwJBt3QD3EAv/JW03fkrOQjxj2/0/mypot4\nagfygle/fGdTBlfuvhk0tNIqtiO5QmfXaxgqQlRleWsghD+JirNPyhsFsani\nSXJVtX3XXIe2ISzF5MyVRr7sWZwMAvzHrgY0BCV/sbcTC2ajuaq0ftLKLIku\nqBd+\r\n=kfcT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.0c95c9f7b.0","@material/rtl":"10.0.0-canary.0c95c9f7b.0","@material/base":"10.0.0-canary.0c95c9f7b.0","@material/list":"10.0.0-canary.0c95c9f7b.0","@material/shape":"10.0.0-canary.0c95c9f7b.0","@material/theme":"10.0.0-canary.0c95c9f7b.0","@material/ripple":"10.0.0-canary.0c95c9f7b.0","@material/animation":"10.0.0-canary.0c95c9f7b.0","@material/elevation":"10.0.0-canary.0c95c9f7b.0","@material/typography":"10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.0c95c9f7b.0_1611096923337_0.9468281328783263","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/drawer","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.5268222c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8d428b9cb515a4664a97001837d2ea824c21078","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.5268222c4.0.tgz","fileCount":48,"integrity":"sha512-XgOhOfrVnoMnN6kgTBkAna/BT5eZ+SlHKcYneARBgeKSSA29V6kK945UMVBVIJnxd9xMdZwvUq8uv/JUZYam/g==","signatures":[{"sig":"MEUCIQCt4UE3mXL5/saEvsr9hCDxC5RtkToMpahcGZ9Y6zjCWAIgaUe7SUv6RLxtC34Nl11swFcmYiEQNKgcezW4WVNxGhs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIKdCRA9TVsSAnZWagAAmLsP/jPw47CDHLXua2LeXMHP\n9sUNPhBXDYA9E9gMzGycdfcoT9wP57BcDRWe/dMhjNQc42nkP//29r31/a7Z\nYNP286v35z27wMCLvmFU7NBy2X664WkdJ1tgMCH98LkGJA5JJ/OH/aEYRnR9\new4sJA1HYFjYyHeEsXqv74H5W5htEjo+enUqPlrVf527t38Ndg1NfenTDm3r\nYnw6oE/jIVonAFPPrtRBhtAvX+7ySR2VLScmSeUU/6ujfjdFZH+Jn9g/R3m3\nwrrT0ay05ucL7VhbT3qIiZ/m47itcSGKKpIecv7T6NJ+HpfDNw6QPFVIvEwp\n6cHdBk2e5N2bzX3HP8LnhHUAdTMPQl0lkaPRUZzhs/JaYDPIk9UZdP8i3E3N\nue9g5BkqkJqbZ751dXrzCboF6kmu07HtF8XmTPrxrHVfOJAOyQN0TJow/DN5\nEdpmDyqoinP3oLSAMW9EQopwoWWUsMeE4DyjV3aN8inUN+PY2zS6PuLOqOAb\nc3Cv43MQV2W3y7OURlZ2JH+O00N6mqsOm0EhJ2B8uvmc+X4ePKVT7wzpx6C5\nNqyFHA+saDiVzh7ocwpiroDTF7GymjGDiYcb95+237zuSnsSsBxk1lu0xxWl\nsjDtzDR4myda5O96Dsd4hb+GCOxTAq/TnwJsTKMSJNjXJiN2e49zdr9wts6Q\n7g4q\r\n=IpOO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.5268222c4.0","@material/rtl":"10.0.0-canary.5268222c4.0","@material/base":"10.0.0-canary.5268222c4.0","@material/list":"10.0.0-canary.5268222c4.0","@material/shape":"10.0.0-canary.5268222c4.0","@material/theme":"10.0.0-canary.5268222c4.0","@material/ripple":"10.0.0-canary.5268222c4.0","@material/animation":"10.0.0-canary.5268222c4.0","@material/elevation":"10.0.0-canary.5268222c4.0","@material/typography":"10.0.0-canary.5268222c4.0","@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.5268222c4.0_1611170461073_0.030789684621150615","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/drawer","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f59128b32f98216dee8d8921d43f54d9c8327f5d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.2ed2d829b.0.tgz","fileCount":48,"integrity":"sha512-7jiWwsYy6XfQaPlKadLl0yYsZCoqksbUwYei6SJfGKaeUBO5EGn7xo5GhmcrJixZ+5UeZFL9gRqQuvcVnFj6Xg==","signatures":[{"sig":"MEUCIQDdiwnn1xssoNWWdn9wV+73aWxezz1rzX7U53OzVEwr/wIgIzVQhckBgmXs6h+VygeAMNdGyqELv1zqxTHsmwR54l8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLg9CRA9TVsSAnZWagAAVygQAI7SxOmvyu430lBA6Hvz\nRm4B4LMiWGoRGbOPX2kyg6HArRCwNJ8wIE2u5xdfHHz5KFNFAPxDSt3Lcmox\n+B8bKJrMufHaGOe1DtS5/iPYU8lk+igKDapXLAVWq346MLSybQCrfb4s9Wws\n3eFbk1FOv+DzPqSsYEGYORAWm2lorhhZg53awoOz9Rf7KfWvAd0Q4f1Wzk1y\nYg4cfjGdubP6v6PVATWvrELd0GqMdFBQqFCoC7Q3JGes+Adv7oeCXfjvVHAz\nf7+3dXS8mLSf8CrC+8/pIrACRdOpZLZDoqzkyOsJYN9thKpQw88psjKvtXES\nTF9YzsX89BIcaAynS16ceOWtvw47iy2WMluCkffBfQBCP7J1Iv0z0659OgJ+\nQ4e40X7onVoAy9aQChOIzpJvc0m8w+E/5GnFnQcd+31Wn6iJ0ft7aoJsauRK\n7Ncm+r0I007usPw50VMMcYEKFNXHbh7CAQWOZpxjbk84+XkhCvfhZ1JyMwCy\nwV1Nfm8Tz8i4lf8d9a9n3mfHh2bvR+DwneUxG/PAhM1ZwUf3JghLsN+YVkA+\nf2dplZRQhJcTpq3OGd2qEjPeua2D/WqFIdXvLkG94Zpv1nyiU1zlj1p1PC/F\nI67cvZfwGNKPZpReUqG5wFHwPo5vanb1yCjkyF3aKKRBAnf4pmiQyGsJNkQ6\nj44i\r\n=NcL/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.2ed2d829b.0","@material/rtl":"10.0.0-canary.2ed2d829b.0","@material/base":"10.0.0-canary.2ed2d829b.0","@material/list":"10.0.0-canary.2ed2d829b.0","@material/shape":"10.0.0-canary.2ed2d829b.0","@material/theme":"10.0.0-canary.2ed2d829b.0","@material/ripple":"10.0.0-canary.2ed2d829b.0","@material/animation":"10.0.0-canary.2ed2d829b.0","@material/elevation":"10.0.0-canary.2ed2d829b.0","@material/typography":"10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.2ed2d829b.0_1611184189113_0.01147996599115464","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/drawer","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfe63f3b3e47cf56847446f089c52fd9d82efa30","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.df00c2b30.0.tgz","fileCount":48,"integrity":"sha512-tUkzSHJ20kAJ3FWmTFnS5Z9o7SsThkX4h02CdlfBAHYmngxUcBmWzKxbqzC8Yzr95T/Kzg32L99fLUzb4QkNow==","signatures":[{"sig":"MEQCIGNZKu8Z6YLz+V1cM1M7fTeFWVM/AZYI13BGYPnxHu8PAiBDgCZ1U0PcO9l6kaQFFu9Gfru3uxgt6J7UMTeK/R+heg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdx3CRA9TVsSAnZWagAA0JAP/19IIFyWaKg5V/EM2chn\nD8Wu6AUNYyq341u3HotRsqDYs3Mizdwczp8KJtSaKrBWPITLOli/Q+KgT9bq\nrtxYPUfsHCspwdth1veO6sTMa0FIIngN9rAAauW+OWal1e2qFmLhMvM+sAfc\nVKEqtHrMMYN2gMLEtm49TcAsd8R6C6i2EVa3NikR0oNJs6d6eT5o82H1h7H6\nh8Rk8ZvOgK3BrRSkL1V0sjjmohUSF8/VdavD3fZvvkyItZ7YpGGytnPuUR+4\noStuLS6hLksJOchQdXV5hyCMrrHN7RzyQFgpa2/aXNFUINvOOaFlSC+YYB11\n54/+MrzK2t4OGAmU67D8encXVcCGNnAN006jIyAS7RqykobpdaNVie7Qw9z9\nD51xalxqBwOfftf9UT7dtEu1oGA5JH2bAfoBPZl64Jf1TkyBrA4FyzV2Q7fN\nITbXq0uxa7lcsHLzdnGX9Sh1zcURXHqYBkJXW9e/QhKTT3LjnrcWk4mWo+r4\nyYAqKz4Dmlqt/5iSqrJjR6nuV1QymHj8HBRXLMoFHvrhBR5hXDQsROBjCLe5\nNbkUA4QtJJuTMXLOqmQj9RFlYRkS1kkFWD7cQqZOuHo8tK2H8YJWVUncxnIP\nPTFLuFGmTmbdwTPAFDeZOMRt1y39jVKWsYAlbowEfrmEf20kLyzkKiUqqs+X\nBhQG\r\n=4Woa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.df00c2b30.0","@material/rtl":"10.0.0-canary.df00c2b30.0","@material/base":"10.0.0-canary.df00c2b30.0","@material/list":"10.0.0-canary.df00c2b30.0","@material/shape":"10.0.0-canary.df00c2b30.0","@material/theme":"10.0.0-canary.df00c2b30.0","@material/ripple":"10.0.0-canary.df00c2b30.0","@material/animation":"10.0.0-canary.df00c2b30.0","@material/elevation":"10.0.0-canary.df00c2b30.0","@material/typography":"10.0.0-canary.df00c2b30.0","@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.df00c2b30.0_1611258998483_0.7522544135997087","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/drawer","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8db0df1d7af7b2123dc52e7ed659501e9ec30f25","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.fd61b0476.0.tgz","fileCount":48,"integrity":"sha512-A5gPlXFjTF0+i3i8+3ZhdFH5w96UmedPTmquHdWh/mUKz7RBhpvC/N027pUfZVG9oYBUaHsQm+rhtkibD4BvOg==","signatures":[{"sig":"MEYCIQCb1xde6WMOjTtGXaZ6HVyEQita8BBY79uDW6BpvrPVPwIhALzMJrARxy2UNO/ivg42p/IDHfR/29pA1ATBLk+A4Yra","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd/gCRA9TVsSAnZWagAAnF8P/0apzYz4CNHK9x6+GovO\npyyL9VjJTFmHkIcud1KCDqVvSmX9qWXmbqu98IYi9CMZjkNFAGjLLgmum4gb\nKx+Z5of+eeR0Zl+u/Bvm6f9WQBHFN66cs217Rz1yCOFcvjWS//84eXpdFqT1\noIpOiTsf/mL2xaQnpdSFSCPGXGhNhITgQHD6H2WwTGanZWz6ZIMJHFO0YV6M\n3mpHVo3OQj8jTuw5r1V9vwncxzun9UggYk86xMRcz8iKnDm8f8pUm0yShOyc\nLKYKyHWdzGkIZqqM+e+B3Zum9KZ2BmesCXGHQRwKVxBqUb1w7prRz21go4gU\nBK/KHTRpF3PcieD7YJ6zT73xJwdJA2CP8dAs80+oi7JdnYIO7P7k8Nh5ozwu\ncpmxXYd+SRbmcs9INZQygTfrsqVA5Cqgm0dxHZBGwS3NkjfwK4Jvpqr2qdTD\nmJlQs1tbwN2R3pzmzOivaT5lzRhOxTaPJQAvIAHzAPcU8+JcbUTJyWFUiOST\nOIWmm5oFpjCKf9JHOQD5plKEw2w2GwgeQhsdkqYQh2/zOxwsJ6HuKvbQzXji\nM78M8VSd+npvMyhjfKGm1UAhG2N1eCTJUo1C4DxRn0EjlvU/0b6dE9Pm3NgC\neMPqfXlIVa/+ZRZXP9DL8sJpv6qXI/5jzWHHTWycHV3vzpDKW+8kWxJ8ZuZT\nEbtr\r\n=Drfi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fd61b0476.0","@material/rtl":"10.0.0-canary.fd61b0476.0","@material/base":"10.0.0-canary.fd61b0476.0","@material/list":"10.0.0-canary.fd61b0476.0","@material/shape":"10.0.0-canary.fd61b0476.0","@material/theme":"10.0.0-canary.fd61b0476.0","@material/ripple":"10.0.0-canary.fd61b0476.0","@material/animation":"10.0.0-canary.fd61b0476.0","@material/elevation":"10.0.0-canary.fd61b0476.0","@material/typography":"10.0.0-canary.fd61b0476.0","@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.fd61b0476.0_1611259871870_0.9936890072968505","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/drawer","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"814ddd668efc243e67240e9fd2519dd0b3df2895","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.3fb3a0265.0.tgz","fileCount":48,"integrity":"sha512-NLZzDHEGFkiChwyjRI6oE2uqr277Q3g/O9MYa0i7FuxaZ2QcxRMcTv1PGRNxB72XxPLi3Ps9KaQsb6S36Z2AtQ==","signatures":[{"sig":"MEYCIQCFw/4yROvsEuxFWGeiSLZnSE6xn3dxSvNfxH09D8fmFwIhAMPKZ6Hj3O7qSDiNjMoFmW4jrPbIgHId2A/CldhHkVfj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChcHCRA9TVsSAnZWagAAM+wP/0cQQSyj1J89GNKnimyv\nSlpIvke81PNrJVvH2wo0/n4Ua+44xHpnFkmVEsPiulwX0K9e3qS+p18Gz/0p\nPBhld9ExlX/Olg+/q163y1ZAfzYCjtj5hi8sNMAwKiwbc/c/mkbFPgsXOhDI\n45tRMX1m/krV330wSpi2oNN599dBY3U5J19dSrubUDUhn2QvchQzesrlhFdr\n0/maFFh5ZAQwGpVDDjRWdqzMwJJ4J1WQoiOOCw5VOjhojoc9r0eOZ/VUtye8\n1BVCCCUxNPv/Jr6IN4e/xXf7Ff3keiMwSe6D7I78Y9z8S22Gw69lhiAWP1ZC\nTamwYPucCO/iwhwgwwDJNHr+TaIQevMVDgS0kPU35SrtYpy2REvvzaT/HFf8\nMFurc+dBQidtVSRsmicLRNFUtdpfXPRX3hyCVmgxRjxVJiGztBAZHs0ftjk8\nTnFok12hcOKTK+nvnE+m9+2z3A+tr5D8eGIuitaYQIdnrrSMEQnxDbdEuO3P\nZl8t8QPE/dGeyOYMRjk+dpzU/qR8vgnryR7/XhnvTlhCw8w8DPzmlu7esLWD\n57ocZMmPujAJXRIp+BicWxwpxim7KmGaYeKHczLi5s1aPjUjeg6xB8y8ahny\nMtAoHmS7AX5c8c2iMMb2IBrLCOF8s3VHyG/9ULqb2HF5KM35yjJzZCuOkAHe\n1IfV\r\n=NNVK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.3fb3a0265.0","@material/rtl":"10.0.0-canary.3fb3a0265.0","@material/base":"10.0.0-canary.3fb3a0265.0","@material/list":"10.0.0-canary.3fb3a0265.0","@material/shape":"10.0.0-canary.3fb3a0265.0","@material/theme":"10.0.0-canary.3fb3a0265.0","@material/ripple":"10.0.0-canary.3fb3a0265.0","@material/animation":"10.0.0-canary.3fb3a0265.0","@material/elevation":"10.0.0-canary.3fb3a0265.0","@material/typography":"10.0.0-canary.3fb3a0265.0","@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.3fb3a0265.0_1611273990771_0.808111530398357","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/drawer","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.07deaec27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6749ecdd0925f815c988ef3644dc6180eb48259c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.07deaec27.0.tgz","fileCount":48,"integrity":"sha512-ctNnwa7Ff5Q1/RlNymCqvryhVzc/cnGzQI4cUS1ScW4d8c7e7S6e7bSqUFwQ/SYhnccB0fU3+BVyI9qVSSEV2Q==","signatures":[{"sig":"MEUCIB7AMu/5k1twfLXtjArzR+VSdGnvW+zsmDQqF0Y6pEZuAiEAod/9UMgdCKw5BlhbdjSPw07sLg1LS9WBTxvxq76DhF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwQWCRA9TVsSAnZWagAA3s8P/RK+/c2kWXMts+taTwSY\nuEq+1r25O11kUG1HpBMmjIx22MPauHgR4j8qzWxgeYvZFwSU65OYFnZBrJhT\nGDxyIGT8nzdA/0h1ayqskMkQwRdtrVYGgM970hvLEMSZnMSoTj437WWSxuwz\nTkwr0RCKjncFDxbUW/bS8aDRZm1ucpvlSQqYQDaJnVOIZdIVGtW9F8SUN1Q/\n9rBYyQFlQ6I5hrgSWpaqDWJEmNTyy82zFJhtYcq/SDaM/qFG8idRgEq1iAmS\nzpcR2/ZNoxIQS8LBVLETU0rcdQ85ifxSccf7SW5qEXJXz4GjurIy9nZpxl9Q\nhovFpcPBSi6hK2Ja2MIyg4bcOL7Kh5UDB1gVG9FUVhbdt07q/N2mMQrI45bc\nq5AvFWewiFJNaLlUkQJfI+zmb39s6lHHZZAw6n35jxItbXMUf4DXvg3Ab4FY\nibJRyymFN2mf9J6y8gqRg2Z+5uEPWEJKEJGC1ploC66ppvaPBAj+3epGrfgh\njadt7j25nln7AAyaq3qKBmsO9bw8+7sHJGQzViU6Ypy8VgUavWiUn6n0QOAF\nRpGdYKt9v6Xgrcas0fTm8CFUqEPpUPTWsYQYwHWFsFNgSumcyGAs1WKX9043\nnMdp/X9R5z/jKdzIjDONl/2XjBiepEf03hbio28uVJYTt/D7UafMIsJqkE10\ndl1F\r\n=leL4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.07deaec27.0","@material/rtl":"10.0.0-canary.07deaec27.0","@material/base":"10.0.0-canary.07deaec27.0","@material/list":"10.0.0-canary.07deaec27.0","@material/shape":"10.0.0-canary.07deaec27.0","@material/theme":"10.0.0-canary.07deaec27.0","@material/ripple":"10.0.0-canary.07deaec27.0","@material/animation":"10.0.0-canary.07deaec27.0","@material/elevation":"10.0.0-canary.07deaec27.0","@material/typography":"10.0.0-canary.07deaec27.0","@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.07deaec27.0_1611334677408_0.2560105492048339","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/drawer","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f81baabb1ad5bb208ce72b0b405e6dab09677227","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.d2959b16c.0.tgz","fileCount":48,"integrity":"sha512-+1XiSC5frME2JuoOgQULa0hK/Ejw3NEkngRQxVgvjkZDT+W5dRMooKmHwyx/z+DbdEgORbQ4ejX5F4Q41eSsmw==","signatures":[{"sig":"MEUCIHPz/lzArFs2xCZ6mkXwJnD7alHaSmzKgAvmJ2H+tHpoAiEAkJR7LLPuWnn8CtjmMTrryxGM+pz5A/j6MCPSHxzyiGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx8zCRA9TVsSAnZWagAANHsP/R661HvVoRi+HVnPDf67\nMp2TiFQzISymVDltSK3sK+Q43Eqkhd55ve01pRXzJrEsPFQzWpUO5dfZ0+bT\n8mShklycw4J1Kl+gLs7Is2u0juN8GM4q7NkOOtrJJ317A8N0PHJpBXVmsKCa\nOqTxxk5xNURrAFTk5NrLdn62+Hmc2YzgBzjND8cziticylxFWuCO0TJHbk8e\nYnhyg8PIEBE4FT7lTTODPWUQnTT2YR/nMKZuSraVHU/L2rEuS1oPt0vJL4SM\nDvE928DXF6lojPbMPh3IE74cIR2mvHOlJkFmjCVOa9APEuopgOyTYjY0AydY\nt9JGU88Po7YtGORF86ljeIp7zqbYOpIq58CcGGYKh+XQKx/VywepD/i9XyrJ\nBp4Er+NFjI17dCyvAas5vkYtkvYNYEw5W2iN2cmnbDWntvtZZZrBeHZ/+YzY\nkT3uz3PC/gp1pA1iicyLkC5n6PrK6Xs65Eiw9fhRF0tvHc5Vzodxqm2CoqIw\nn4pxPs3R0i1QiUeyW3oAx9ycTZjZo1iouok5QPE+Y54PoKyb7sJTwIcBVRYM\nR8URsy/cDmc46eRBYI8L3ZGTmYTHGESxSiVrYHhox3XLywl1y/tyJ+o7TpSJ\nRSSBZYDPciYs9WxnOxAvrgyOkL0AjO/oa+9upLkr7jyGNLpWoAPpaK8+UAE6\nfySO\r\n=hL1t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.d2959b16c.0","@material/rtl":"10.0.0-canary.d2959b16c.0","@material/base":"10.0.0-canary.d2959b16c.0","@material/list":"10.0.0-canary.d2959b16c.0","@material/shape":"10.0.0-canary.d2959b16c.0","@material/theme":"10.0.0-canary.d2959b16c.0","@material/ripple":"10.0.0-canary.d2959b16c.0","@material/animation":"10.0.0-canary.d2959b16c.0","@material/elevation":"10.0.0-canary.d2959b16c.0","@material/typography":"10.0.0-canary.d2959b16c.0","@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.d2959b16c.0_1611341619292_0.4575413462078455","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/drawer","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d1e296aa7cc0ff83b9be056a283c280a7cb42b5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":48,"integrity":"sha512-IXij0Z4z1wsbSRftfjg5xOSFcBSrhzGUYFcSLW57LkAjaQbmDwD3rpViqUp+RxTHsenTfkphJKYFIL1svheTSA==","signatures":[{"sig":"MEYCIQCjosG2/bWwsF1rW2/lDL4vb9KUWPNP1W/GKKEonP7nlwIhAP1dAVx7quBXfHKAxu0TxgOnrK2Q6c+NWJvXxbzzGauW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1dSCRA9TVsSAnZWagAA07gP/1HJAETzFFvaZL6MFWLq\nb9n7ZDFjHgPl88nT0+aG9zSM9F3S7N7WW2ePJsvLobUYp9upYG5zzYX7lsa8\n51F/jkJ3/y8oDgoKu8BINg4KjunUexQU+ygGk8wtVJB+d01DnCZXzDCAt1zk\nZjvl1ET5xf1W2M1s0hpyzU8dFDDfitplK7pv8G0O4hIBlnngSWzgsCDpaStl\nzcP62vyGO0NozM4t2ppYBd6syq8v/bmUkassIYPhEEMp2RgvxrNpgG/D6IWj\nhovySRgn27/Nn5384bGY7+TKbUFUewX7Jv/zyEM+YT5q1VAYl0G9+KWd51SW\njhQtdT9Fm0h8k1sCtIbys6m6R1EUkRiIYXTffME+am4wkx8mS8q1daGRph1s\nCmxiW+1rcm2Vo0IjtmoWtCToeamKjmrdkpW2p9HJ+QwHw28gXGUNOvUUdGoV\nkJ59znESVdgMqVGL6j112OsjG5jqa8waLBQ/ZiPgQe31sH0lp5FShZI7RbwY\n4neVyLULyQZvesblyigtoGy14z0/KpeI8xfwplzzvqUZNqWMtAVDesN3d6rI\nnCoPnWy/xX+VaLFjdrgyreWF1DpPP7V3V5sp29SGXZ1jsKqikChNMtSPnKs5\n9DEG1Ztnw/tc+Q0Ajckd6zXKkWaHMv2Uln5MAYdbtXpVEUlSv4zrlXmzSLHJ\nQpVb\r\n=kXnN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.75f3bfe7c.0","@material/rtl":"10.0.0-canary.75f3bfe7c.0","@material/base":"10.0.0-canary.75f3bfe7c.0","@material/list":"10.0.0-canary.75f3bfe7c.0","@material/shape":"10.0.0-canary.75f3bfe7c.0","@material/theme":"10.0.0-canary.75f3bfe7c.0","@material/ripple":"10.0.0-canary.75f3bfe7c.0","@material/animation":"10.0.0-canary.75f3bfe7c.0","@material/elevation":"10.0.0-canary.75f3bfe7c.0","@material/typography":"10.0.0-canary.75f3bfe7c.0","@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.75f3bfe7c.0_1611355985589_0.4259987885456873","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/drawer","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3bff7879a191836b7e7e7b334be531a3706d9e3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":48,"integrity":"sha512-g7kTQ8Zjx1S7IBG+ffsXZGIovm0YIa3i7w0IGCYnQoGc0GTwqfsfQghWyAaL+H+GK0udwr5kpFbtx+Bg3PL18A==","signatures":[{"sig":"MEUCIQDNBk66+XxuAxGUW9KQDDtwAvFt9HXbtswQYSz/lxD7hwIgCdSTvmJNbLQ4Z9iT+v4KWNNmNNpioamYDft+qqhsZ5s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2G8CRA9TVsSAnZWagAAmNoP/ig2D+i4OAbf0os5qWgP\ny/GyPFlUforsWKj9MCvovE2l1b5d436obo49QrnpHnQM+YSy+i+tDvCCSd6Z\n8A9ZR2zDOhYyT7cAIYLxG9Wjg2yU842APAhRegt2QuEQufGweuSo3ExuztLv\ncB9Ihgz1cVQ15w5uUT3eTLYIsk77n2N5W+4rRjyN/gVVvnbwcT59aRXyIYwN\n6edkDF89lcTnGsTMz9Kleth21gQWy27VuGTO3P/UJ6CWj1NNx1HbOwFxkC7M\nzJlJGVXzsYU/4cvA9+tnqdvVhyI5EwlApPaOktl8vHGtMFUXM7m7Lz2LnfV1\nYFHG8ASVv0lT5UzZ/w6PYnTCRlNUANd9swsSVAzSD8k0ZWrItdOXMGzpAkjG\nNvaYmxZ2cyHDbt9JX6iaT3eW1xUlppOLtAmD9eoKJb+teeXM6G9b36A9ttHT\nCtUOeUCCcrKE1H2QpJeKV4mr19I4aDOo9YDFhIOYmmOWiaE061wXVU+TBYjI\nDO4KfvA0bDihjhg8h6AhnEX1a5peZrfiAAi3LoMkIYkzKPXitUuWYqiblZtX\nPyzFkpXE5iSkN/3r87Zy3FYCnA4G5tkJwrUdoeQaYLxIkfx5qoQP/8IAPb0h\n3ELSoeW5j7kguY0Y2af/9kb/s9NaUBT2nxZ6D+CcTqMBad/VkBJskaBtLoU0\n/nPn\r\n=y+9F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b9adb7a0f.0","@material/rtl":"10.0.0-canary.b9adb7a0f.0","@material/base":"10.0.0-canary.b9adb7a0f.0","@material/list":"10.0.0-canary.b9adb7a0f.0","@material/shape":"10.0.0-canary.b9adb7a0f.0","@material/theme":"10.0.0-canary.b9adb7a0f.0","@material/ripple":"10.0.0-canary.b9adb7a0f.0","@material/animation":"10.0.0-canary.b9adb7a0f.0","@material/elevation":"10.0.0-canary.b9adb7a0f.0","@material/typography":"10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.b9adb7a0f.0_1611358651377_0.5822728255790419","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/drawer","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffe91fbad844cc299cc7dd2968df3141fcedbc51","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.d29ec2862.0.tgz","fileCount":48,"integrity":"sha512-pkLzf5jJN8Jrur4VhQheVHiLtVccu7SJlvXf6B66Xp3kXZ/anKwoub56JuNreFGFsIwoy20VK+fdH9XT8MpDsA==","signatures":[{"sig":"MEQCIANyZn648h+khKEN+k3HAuPziXoZc572MUuAuoU8d1DUAiBwOO4zWwnRld72iA1/Mo7bc42VHpFGLBbqDtrjZy1czw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvELCRA9TVsSAnZWagAAIekQAJnWfvsKfd0XzmHDjZtl\n4BHfq0NcsPfGafARE1joFq28DWS8qvwfy0Yoj9ST/10dAqZGHp/Yroq7YR1c\nt6jqG3+rlLvPH1X/d2IV+Et5NdbGGAdKnIq26Jy7rgxP5cQUuA/z3XacDNAD\nfzEWFhbiDfNKLwGfhPGiaicLRclkZ5582d8GFF0HDlUJWkgLfRWv0gH1aHtc\nuobf0sqgVe9XL9RI8F6/ltwlZettNRuvl1RcUiFgMP2CGkhVBzU9yxcRt0ze\nzQaa83ooeGJVxuml3SYfXNLdemNQG1TDyvKi492y1a7q8niwqOx4k+vs/hu5\nbiYV58e1+zyiOBZ9OeQSrsttLf+fJKP7os6RA8T1zmwvHvEOvSDENJzpWpfD\n2iIvtf2jOzLNXn9gLaoIH1mEs3O1nBnV+6RH/9OO0m/f/BdVK28bK9rLkYc2\nrgo0fY4SN1QmqGUuJs3DbhSSyiyjuDLy0rqHkhaYehPjyNF11cTt907XF9bw\n3A3hZfoDPT0XQNO6kGiFCV+WVt7OdWcugQA16YN5wjhVm819vbB/Hu2X+F6D\nnduZ/v1ixGrzCwyGTtJtNFIW/PcLTSTdKaKAuH89lr13O4Yin0FJd9hWjTtJ\n+R0EjAm4xhLYI+Y+PiP0gOkmpHMo7okhTITGw0LMomElVzmgi/0QigcxWJbx\nkrXq\r\n=qWLn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.d29ec2862.0","@material/rtl":"10.0.0-canary.d29ec2862.0","@material/base":"10.0.0-canary.d29ec2862.0","@material/list":"10.0.0-canary.d29ec2862.0","@material/shape":"10.0.0-canary.d29ec2862.0","@material/theme":"10.0.0-canary.d29ec2862.0","@material/ripple":"10.0.0-canary.d29ec2862.0","@material/animation":"10.0.0-canary.d29ec2862.0","@material/elevation":"10.0.0-canary.d29ec2862.0","@material/typography":"10.0.0-canary.d29ec2862.0","@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.d29ec2862.0_1611591947256_0.6743061350640804","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/drawer","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.96be07c68.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7465779041de563bf0b7f7a5105ac23534ac69bf","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.96be07c68.0.tgz","fileCount":48,"integrity":"sha512-/TlxVgGSCJ3gfKcz6JEYcgJgyhKIuqLlD7u7Rnchn284ws1dy7hd75dV8f7wppMOhf1beLoTK87cQbQef0rMwA==","signatures":[{"sig":"MEUCIG5lM12KJhEQ1k00Jg3VBYCWzwailcvnU39UpQINLa0sAiEAkow9vCF16/VDFj92aSA2wB16kKQGyizL4OoRtZtGQdk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD15GCRA9TVsSAnZWagAA3VgP/Avjzk0Q81ndolMfNqOX\ngcphBeJJ5nEJTuGmzVUcjewbOZKBAIwDUuAtzYXn1W2bZ8jPJj+6IzazVG7r\n/2oGVMF1Va3YgL01ltTCReS9tz+Wut/l8ytHGA+5+SPjR/SOJQ/kAXMbefZS\nd1CfpqtPbctN0n3KiVEM2oRzDj/ZMEwQssBInOsz3aESj4qtUNhlIlY3k/ZJ\nlht5l0lxv0ccV4T91cL5EgKac0DJohfCfj8PfSsENYRzD3Fxaw/Gn2Y8hcco\n8nyOfPuksesEeGlYYOz7JEnPWuQXt0MnZ5GjIcH3pQ4xD81Bm4/2HBJ/ft2i\nj7vk7WeG7yW9acDqMZ/EbclrC+TH0amE0mVVBZj/GUiypEfCws1a3z9c3A+W\nZm0qEmASQ1Mx86MZ1ysa4FXN+JiMb6PPNyWmj/xx0XG0DvXviS7g8UVNAjsy\nJ1gtiQ8GXMvg0UYBeghef4641rBo6+/pFea7V/bPaWLXAR04brSDhCJ83A4T\nGzn2oBPPQz9nQRnM6MBBGoD0vqQqedhgGpT3MaE93iurVPYm3YCL8vqzOlJ7\nywdovqxkhsdLsDGzbhCvt3mGi9R39xjww1g4KtcnrcB3D0xI/sWLyZ2i7ESG\ngn75O/Z2bwGkoSB+X58Mf1JO9AHmdNGs8GaDAlphU0ElhgAQhJwA+RTIHLdX\n9RGz\r\n=imKe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.96be07c68.0","@material/rtl":"10.0.0-canary.96be07c68.0","@material/base":"10.0.0-canary.96be07c68.0","@material/list":"10.0.0-canary.96be07c68.0","@material/shape":"10.0.0-canary.96be07c68.0","@material/theme":"10.0.0-canary.96be07c68.0","@material/ripple":"10.0.0-canary.96be07c68.0","@material/animation":"10.0.0-canary.96be07c68.0","@material/elevation":"10.0.0-canary.96be07c68.0","@material/typography":"10.0.0-canary.96be07c68.0","@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.96be07c68.0_1611619910311_0.21222124199930126","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/drawer","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.e383944e9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01c88b57ae919ad2f3b1432ed347c15b4cc620fb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.e383944e9.0.tgz","fileCount":48,"integrity":"sha512-ZQTcHykC3pJdLNzUqOiRGSiUmp8hU4AMn+9zVeXN8i9qIO6neTO60XW8z1PQLoWjUewIb1IpxJggEvCgIoF/XA==","signatures":[{"sig":"MEYCIQDmFXOYU0+pbxffd1fajC2jjzAPvdKAFaF61ziYXnCi+QIhANZIUEeAir4o+tPtJq2DZ5aXAFOB3Hdn1UP+nDjHIML1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3R1CRA9TVsSAnZWagAASPQQAIZ2UnsF2/Jwyack3brg\ntxQAmByBCKrwXxJhxW/LFv9jesR/8zwzmWu9ZSYSslmW0hlBYMMWthZI7e0J\nuFgJXF1HnwyACWMWuxCoYcnqCR7gvVp3usUMX3Sv4wIl8eHRoqpw1RsrFi+4\ngR3NfR40XUJMFc/Om4RJihGZHlcu5c/p1dPD8IP0TgAHdalkjTUNy+OiNUR0\n0zhuHyM5XeqkiANqqoZyQWuELBVcnZeel3bg/lXvsSje1G/82fZBZqDCFkRO\n58YD9QLtXv36JUPckUUTlcG2+hdNcLmHHjQHOXr/engYNBkmxj7MReaxEVw5\nFBW9BySoSY/DnfgY2K0mkvcYO5/GDMYhgEgUkciu83Mn67Kzp6zV2Uh/NdK+\nE9Zr7Fa2Ic7EMWx2E0lBqfthJc2kv7vZyN/CDhcuER4YidK541ihIvXHIAFw\nHJT6G9ljkVncWI5p5slk05XQh1YKLBraNVQOZCTO4xyHPaYIB8IU8oS3kEzR\nkbLVpbQEEFfqhUDEWLt7olpi6YEe7gtrXqoWwWtoAD5T6/zv5FxO1sre4IuS\nsi1t/n1cxfYWY6e7QSRv9wPJ+p7+kwhPHdMbo0C02q0LPsppJUXCix914LEj\n29oVF37TstvgFxM+s0lEl7I7coDKYO6MQ5n/oPpj1biDpsJ8WKJdmsjQrMOU\nYfDW\r\n=PfSD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.e383944e9.0","@material/rtl":"10.0.0-canary.e383944e9.0","@material/base":"10.0.0-canary.e383944e9.0","@material/list":"10.0.0-canary.e383944e9.0","@material/shape":"10.0.0-canary.e383944e9.0","@material/theme":"10.0.0-canary.e383944e9.0","@material/ripple":"10.0.0-canary.e383944e9.0","@material/animation":"10.0.0-canary.e383944e9.0","@material/elevation":"10.0.0-canary.e383944e9.0","@material/typography":"10.0.0-canary.e383944e9.0","@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.e383944e9.0_1611625588601_0.20162367751166665","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/drawer","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.623af861e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"599defdd27944aa3396a37012870a09ec07ec291","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.623af861e.0.tgz","fileCount":48,"integrity":"sha512-DlVWSBL5ZcRT6dNotTwABr6tGNgr631s2uL+ii+ohjOeW6s7lHY917CujUWDa5ezmwgo2ymZD3d/4zH2OBVHjQ==","signatures":[{"sig":"MEYCIQDvSdI3t/xCiz1pz+KDTi027DT26yo0zcLhBBuKq9aBRQIhAIxglozkPkt8EBUpB637LRdNwXdc1kZ7xc99jEHtaDfs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5CiCRA9TVsSAnZWagAAVfMP/00NsUlVhgG8nqzg/lGv\njMM63yF4rhUtrULttnh7GDmeZ+l9vib+PV3GUyHsAEFO6mAjRLmdnpgPQHrz\nLXABvy/AZ/eH+MggPu+z74NqPPY0Wv5Ra/NlRNRG1eW1Q3kKF27nPKXF89fp\njYr4UFQpxwYz05EYhzDOufRLNNvVUcEnsiFG0N9JlfJi8PJnxRoQQkQ3TNVv\n06DrYTvmOrQQZZAcHzTANPebF7s7lkP26U/2e83eRtgHRu4PL2gQeb5ofutk\nY4EK2i5Okuu/wHSh1fLGKQY4x1AT6dvVQ/iYeMcC9osjnX6oLrq7IUEEL43F\n9Js48+NNwjfbH4j6r6RiNE4VHMwIWgzroB3l4Rc2tB5ZyheQZdRaAdx/FXfs\nb98w9MHmrZNfpRBtEVyzA99Kgt5Y1Eg+WZRDGt+2P4CY9ZLwGJWMMqp/NExl\nCDSeDTu5JVDqIQZkZSfRR09GVSZtmdp2I9xheJnLv32hl2IL0hB7Piq8/TGL\nIVt6ZBOiO4ad1fyWmALclcYY2AQpzouWUU2Nf8bAQHQf5ZH1ZfwqHqwmYEkZ\nEeQBNmJUkZALLB5IzclIrfy7/9AmMk6G4qM8e6HzhyjIpTPy1ZOQx1pCu32r\nS1x88VXSKW2uhkL1zU2yhQlQqZa9X0wlVYY6oTqwJCurscYPFtvQfn0JhJrx\nBUxr\r\n=UMJA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.623af861e.0","@material/rtl":"10.0.0-canary.623af861e.0","@material/base":"10.0.0-canary.623af861e.0","@material/list":"10.0.0-canary.623af861e.0","@material/shape":"10.0.0-canary.623af861e.0","@material/theme":"10.0.0-canary.623af861e.0","@material/ripple":"10.0.0-canary.623af861e.0","@material/animation":"10.0.0-canary.623af861e.0","@material/elevation":"10.0.0-canary.623af861e.0","@material/typography":"10.0.0-canary.623af861e.0","@material/feature-targeting":"10.0.0-canary.623af861e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.623af861e.0_1611632802313_0.784448285042249","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/drawer","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd737ae8af9116d52e08cd679e1f5b33949d033a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.6863fd43a.0.tgz","fileCount":48,"integrity":"sha512-yJ3uk/VDZfjT9U/2T7kDb/uKTyRU37nxZV/GV4Znn2KGnaMX2VRL1r+EYAcmu0MuhaA02ZrtTPco52BL5GJwSA==","signatures":[{"sig":"MEUCIEbfecW2hNbaja3jjbT0aq6pTS/X7yDZuZdHesLGgF1MAiEAzAWjOifeytMV/LnzJm6gj1jL4/JrKBoAgPU2HXt7fzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIsNCRA9TVsSAnZWagAAVUIP/14HM41W3z+QNAZzSq0g\nVK0cgOSey8ym0/xcBYFuYvq5BfcfFXpHvgWryc0jnRFy1ja0rPnh/zQP/pSB\nnznzA97/Fg+OeHfuEEqnYlWDEP5yCXBJwGdv29XcN+3Z2hYiK0PyEZv6tMib\nIlbgH+rhWxXI0+EM6Auh/aezIuvSqJi3RK/vAHqZEcf/Vr7+NZiM/OwlnHkP\ngrnUCClB6pzzp9SeWuYNp+oIEaIAgv3SK2XHPBKCbMb7kdARnUqZ0UF5xJar\nbODUhZl15o2YU4p8IC6b1+XNauvCjSZWRaXhmp9YOvqejvcjjcaPeLTeeqg1\nm/XysC9WzjYvZc2h4Cwto8J5G2s62h4bDxK9OJupexoBwjLvbOLbZSscGUEV\n3SLZ0vx2q7f4zTq6O3g4lG7hnxlRFsbOg2Z85lgZ/ZPqwwz33ZkMwk8Sp6TY\nqX810EzzsD+cLKqCSDC8rd3NQKkNuhx032dURzVBmAhUtUp/zs3UfTAP1mBU\nvYD0VDEdhWJyRrl81mea7hwZag6VeYO3Wn2CGcKTYfSS0b0BOpWU4eabMBid\n+Q7imCukOosf+hfXOsykoELXTqkQHwZ6B+xyXBwvLGP5kaxPvoTS0mKGgvwR\nRzNAq2SHIpiz9TNVKdHl9udRMrE+dDCZgscba4lQ1gXPFm7bG9IMR0IRDLyU\nqswf\r\n=9kbj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.6863fd43a.0","@material/rtl":"10.0.0-canary.6863fd43a.0","@material/base":"10.0.0-canary.6863fd43a.0","@material/list":"10.0.0-canary.6863fd43a.0","@material/shape":"10.0.0-canary.6863fd43a.0","@material/theme":"10.0.0-canary.6863fd43a.0","@material/ripple":"10.0.0-canary.6863fd43a.0","@material/animation":"10.0.0-canary.6863fd43a.0","@material/elevation":"10.0.0-canary.6863fd43a.0","@material/typography":"10.0.0-canary.6863fd43a.0","@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.6863fd43a.0_1611696908693_0.28600417468840256","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/drawer","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a42fd5609640c5ae7632c75eac31962c11451c22","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.ea55b87ca.0.tgz","fileCount":48,"integrity":"sha512-Os/Gl4/zWY5bUv/SsMaTv5vm3oerlZYRJvwU1rN2lQOKUqUsMMi+FCY3YrYAVQqmy5bwFaKSSuYMJ1qbXS9CGA==","signatures":[{"sig":"MEYCIQCeUhrNnp0vage+J4TrIWrso/d+ne7nw/jPpoaXzNHCdwIhAIcgVlOOU7AhT8GTWoje4PDln0QFynyPLonEAx0OdESo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKofCRA9TVsSAnZWagAAXvAP/ixT4oalltxaV58IYgA8\n6SxiMdYfjdmuQ5qFVtNutRGi4dBpefhlD4p9P0otgxPl71/Q9DAy6DVNrFll\nkagINTk7tQi6OG9CD+MVwrerf5WIZ3rcxchjATmxsnKigMN2UsGHhW0xf6Yv\nPo1pVDOjiI1jsWdvUTCH9Gk/CqR94//V4pVJ32uORcp3ew05SoPJzJQatXL3\ny8BqUqHnJAXoqDWYJ37RSJRYa8DBGDlGp+0C2wpf/x1TMLWlntXITrAVNfUk\n0xP1fJcaTLe4hdUiEsexbQ9SS+2YLZoYidOVR3gL+UkKMNTeuzHoS3l269A8\nncqXuUdE/KvTV32BF/sCoC9wTUvFp4zRs5aTTE4tasfNbFFbEV+vkgZldfh0\neFlhJ1G+oGL1gUJdegBOoxdSafiV9kQMPbR/x3rSZ9f1quaBKUdlF2bkCHxk\nQ+RSla7xHHFbHhQ26eNtt1M/87OoLXAgKHvkULBKPC8If65FJx2B0E5+WJIh\ngSLKaGxStca7UJqdcDzNsR5WDISgfgm67VdJiYspXTd/O8CLLnufMCSQo4Vx\nNlSM9ElwDFbCQKdJHr8mldPsWWR2hF7t085AM2GtCErCO9AOKXH/T0u/scIQ\neu0E7hx9WNEjSSl11Vp361q4OB16mkGfm8UGHS/ROSByzc1x9Jna8kPYU8ai\nfcHy\r\n=JLra\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.ea55b87ca.0","@material/rtl":"10.0.0-canary.ea55b87ca.0","@material/base":"10.0.0-canary.ea55b87ca.0","@material/list":"10.0.0-canary.ea55b87ca.0","@material/shape":"10.0.0-canary.ea55b87ca.0","@material/theme":"10.0.0-canary.ea55b87ca.0","@material/ripple":"10.0.0-canary.ea55b87ca.0","@material/animation":"10.0.0-canary.ea55b87ca.0","@material/elevation":"10.0.0-canary.ea55b87ca.0","@material/typography":"10.0.0-canary.ea55b87ca.0","@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.ea55b87ca.0_1611704862728_0.4400649446350027","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/drawer","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e648ff2da1017bc131cec70b28de0cc81e0193d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.e902ff05f.0.tgz","fileCount":48,"integrity":"sha512-7tl2lwDNwDFYlPJNKw5/cvD+53C/Vzxb7Wathz2C9l8unkM4JI+jdqyIYX27+ooeRMkHGJDHaLKlCPLQwsWfeQ==","signatures":[{"sig":"MEUCID1DN/ENOZ5g4IA1nIzo6Fr31qtR0+veh/CKkiiEYmckAiEAkag660jJEvQRB7DSo76N7v5PewKQm+URcs3QA3MLx3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK5cCRA9TVsSAnZWagAAe8oQAIgd7eToJ4bTc0u/ubSL\nfBBLaJyx4MPoEaRM7sEHyuaVSfNEOIr4LZrXe2s0hByrcg8jIetuqHs/CAQy\nskVw/w0G6GCE1qgIhIAe2H4gATloR9H5PtlZgKmgA7s9DDJNZjOjM70ivnq5\nXVD2B+VXEBBPw+9rx5eAfg+yF9yFPS6KKEVE6FLv60B1IlYpQR3OCOxP0aJu\nCqwn3XiRzdO1hmtmXEi8rGZf3pAYAU0LOOtb1BinS3uryBrt/nZC064UnuWT\nmJS9cJPi71pFJKxfbyY/zQg3g/qdOETYMpZZrMRdvdSOJ6Muh3MqsljGn6PT\nP+YIiYAlitPetAX85NmoQZRPM3M028LMv8Zs6vqkezwI3lqkHXOPab+jha9f\nh+nHTsu9WovsI313Tbwpcs4ub777Yhqc7MH7ORJMlvuw60ZIWR3koH05Cccx\nrCzfTl0h+8G4x/Dt4zqH//+XYBmJC0MuYJnVwiMZRqNnjjRgUu1pmcJ7p6Ja\nILkf/m9N9OWZtB/MTfv8GV9+HK2a4FFFqnCUqM9aE/ki6fd4CvWK8YryZlXw\n5OqDpc3Hg1IQcV7Uq9iDmjiSnGcPKy02GLIpW+efOba+dSN0KWmkIOegP1aq\nRnpu16woGvaRhri5jBqc3nOZ/csZMxpq+9NIJGdkESdt0XORt24uXU9hx5oh\nTjyk\r\n=bP5v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.e902ff05f.0","@material/rtl":"10.0.0-canary.e902ff05f.0","@material/base":"10.0.0-canary.e902ff05f.0","@material/list":"10.0.0-canary.e902ff05f.0","@material/shape":"10.0.0-canary.e902ff05f.0","@material/theme":"10.0.0-canary.e902ff05f.0","@material/ripple":"10.0.0-canary.e902ff05f.0","@material/animation":"10.0.0-canary.e902ff05f.0","@material/elevation":"10.0.0-canary.e902ff05f.0","@material/typography":"10.0.0-canary.e902ff05f.0","@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.e902ff05f.0_1611705948316_0.7839871844019639","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/drawer","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"179be9794bf9a1f6f16631c7e5dcbccf73e13356","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.2c9fc538a.0.tgz","fileCount":48,"integrity":"sha512-DQ9Go53a0HKAUEbgI/kYLjkbNXwT77XG+Ky6Reb0UNUEHWo9ctaEZPprzTTZVYWBmamqdRD7W/7BaJyPGx6FdA==","signatures":[{"sig":"MEUCIQCt1I+UCYpnDYC8ZjFWHmUuRqvE4P5Hrj2Eypu9/u0xXwIgJAbG7DY15202Rfj1Zs9jTLWQcBCgfqgM0bgFdCX82LA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELPICRA9TVsSAnZWagAAeCMP/0jA1i/uFMgyMkboIzob\n3vqSA2h246GZKzfkwUo2sQI8ZxawOdMRp8bJuNdbJZeI2jjoladndQ4tg3ge\nOINra5/9EXsR+PwBYxqy+UADx93hRPh9fuUTwQhCm1v1ySvJiF/kqgqkutRs\nHBv91lPSzlP4fgZItATa9qaztYwxP8yhJNFV45ApJk2sVR3MVtb+1Zk66avf\nhQTgKQL05KMVMqKtBllVY+4Bc+4Xc9eY0hz43D+/G7mVW60XUQ7SVrzYb7ki\nYVnMDprx4hPMolqu/tGzzc6TuKzZ0zEabqIr6cotboAj3m0mY5y9bRQwIIjv\ncibZ8vr+PsTOPNvyS1PiVbqnhMTHKAQ/7TQeJYAQLwjho6EmLO6UHyXZ51pk\n9KVR5bWM6LH/2wklPr4+fro7ks2jg+9kI+H11X4XHWyWKy+I4fH2PjKI7zWB\npdU/BbwU2+pEo+NnCC+AZHmwRfcPC9LY2TQztGoVKdHTA5Sklk4yj921PuWE\n2u70ltDyf/aBQCESJ2q7k/2ON3i/6PSRpBs7vSN0emhn0nhgZTtctO6hcIHl\nvVo/trWnjFA4Vdu9b0XKLd7heTQTgdYbu/1a0FBn/peGsOchvPPw/kZxWvY6\ne173cIEJOlV1EZ82qhaJmiGf8emx8VFVJ+jza0nHHYh6U0gIHmlJZrzugNUW\n0FO0\r\n=5PKL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.2c9fc538a.0","@material/rtl":"10.0.0-canary.2c9fc538a.0","@material/base":"10.0.0-canary.2c9fc538a.0","@material/list":"10.0.0-canary.2c9fc538a.0","@material/shape":"10.0.0-canary.2c9fc538a.0","@material/theme":"10.0.0-canary.2c9fc538a.0","@material/ripple":"10.0.0-canary.2c9fc538a.0","@material/animation":"10.0.0-canary.2c9fc538a.0","@material/elevation":"10.0.0-canary.2c9fc538a.0","@material/typography":"10.0.0-canary.2c9fc538a.0","@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.2c9fc538a.0_1611707335692_0.14078098300294473","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/drawer","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93fa6d26233e961eb84b76826466dd7a35927c43","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":48,"integrity":"sha512-Pjy7mbXqQtwsl16x+eTqqaHgysxQf2XAX1yvH/OXBUzK9zIEoVAqHg4/4Ot5UQt7GjcyN0Q3PRKl9UcQ/An9Ww==","signatures":[{"sig":"MEUCIQCZV/ODnJP/j5Dk0jSikJOuxkD5c/tztGZM0/ROgoT+2gIgb37rTBRVJxU22a9c87wcXOHSjw97oipzeih8UDhroVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEMAwCRA9TVsSAnZWagAAlxkP/iYKiHXEpO7Jyfl3k9jV\nob5nCLOMO9TwaBo5Kzp5hUQS7UKEnBstyM4DuFiiTEsltEjsUqbf4ZyJ+vrE\nxaxq5ph77aHmu2h+pqAcTjXcTfqPwIS3vmqkugWJtcWJrh/9Je9u6YHFDCuP\nN5RQVHVvKhXpFmCJKwLPGegORz9NJlwIZBAtNSx9BonMf9kpxVWuW3rUchjE\nIfUpfAR016mPpCsCe5hvN+GVpUX5UDG8/qofsWH6Tr3986a4ECQ4K3xDpB6d\nMb2jf8kMTjr0bHRJXkehQo/MkZACD1N4rIowmXMJaIu9pFaXA78UXnjAlgoc\nu1wo/qYm0+Fj8v3lveB2TzpRbeJWbEaEDlzik3AYEjiKyOBPR5MG23VZ1wUh\nlOEcJ9wdESX1M5lbEX5of+KRcVLATZc2yYuswgUjv5QopV2VocHDHxRzWVMU\nSd9lKOm1EUec0LFA9Op3DeJpeRQo8yWyBvmO4lGhcWDi+Z/dWLEHiDZTY+Td\nbHTM8FW0PQl1/F/SVznZgiqKDsJXUWouIDcnXQUufo83gwZxR57T1EhW7d5g\nfiSYTqWhYVTD+/9nFwS1fMFkUQmq8H2ssppC/rH0FNnRMP+OafwaBKbl3/LV\nvVQLfEdGQ5fMgtH22QwH3rKV6OjLGbIoCArDYkwtPEe/b+98cKyqSSyaCdnQ\nECe3\r\n=G8SU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.6bf56aaa4.0","@material/rtl":"10.0.0-canary.6bf56aaa4.0","@material/base":"10.0.0-canary.6bf56aaa4.0","@material/list":"10.0.0-canary.6bf56aaa4.0","@material/shape":"10.0.0-canary.6bf56aaa4.0","@material/theme":"10.0.0-canary.6bf56aaa4.0","@material/ripple":"10.0.0-canary.6bf56aaa4.0","@material/animation":"10.0.0-canary.6bf56aaa4.0","@material/elevation":"10.0.0-canary.6bf56aaa4.0","@material/typography":"10.0.0-canary.6bf56aaa4.0","@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.6bf56aaa4.0_1611710511709_0.04679906026546754","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/drawer","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.994873795.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55b327018b31ad8a4495ff4ec023b1346b5e0e6f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.994873795.0.tgz","fileCount":48,"integrity":"sha512-VmKuO1AAsJaHDO9OsFIz0WF8T/6DJXxIvm+QBhZ6ejarDRVBesrWMcxNPTETTQ1VRKiVPzesw38vh2H1PlaQBA==","signatures":[{"sig":"MEUCIBVosuPhNcQQBEFpVWj8ckBgDPE+zDM3SG+sH8m/LixBAiEAmlC+w3x4MNkXHC+mh3M8qekgWyHMe7/4AO+7o63mcDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX4/CRA9TVsSAnZWagAA/YwP/jYmO24fylStk2/bm+bp\n++ZQaqVlLj2zLp4QO74VH/qIGchFiUGWtRsAA/R16dTRLm/udqvbgkDDEwXO\nTjUwpcy8/V8Mo9x4TMc2C5NxLGyenAehpPGYn/UwkrZYasW/+WkokS4Hhr/1\nazOyHsMlsavsIZEF6Arc17CtHg+IwTKNknMbh95/AOTeNWBTMd0mAxQjfKRv\nxRCFkF38Lo3RfHXn52Kr/XQvbgrwJDd/MBJNoFfYFu6ah6a4t+5Qw3Tr9NQb\nL/3TLduMYAma6swWDYOxip9wTCtI6axXYpOVFQwcP/U0Mc63fDLcOAyuJkiE\nVPAwx9YDGwfC3LAJ8ErEJ32cJS1DyqhPvzLJAjcme7fCnYkKkDlG0TUcCXBL\nMO0MliEfVcTqOWQspehOADJ/ezy5TRBfh95U14I1x+76yXSB7bQXR8odrLmm\nD8vxh3q/9sgDqjPviAveZpCFrqF69nSncBUIKeVmkN5/hyCN+T9m/pCw33YN\n9HeZl9tioP9nctv2z/eSCE6kb/9yyj2x3dJs+WbJEfs5k/P+ceYk5qnNewVm\nCuhDU/WV0ILIkmeEy6lGFkyKSQ5SgNx4M9zLiu+qR+a3Nb/uP2DQmbDSY2IU\nw7DDTHAxNZCH/rX54hSE0X+iS/fwP2U89FZoXT3TnpPj7SlB93/upzedgupv\nzeqz\r\n=6SUi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.994873795.0","@material/rtl":"10.0.0-canary.994873795.0","@material/base":"10.0.0-canary.994873795.0","@material/list":"10.0.0-canary.994873795.0","@material/shape":"10.0.0-canary.994873795.0","@material/theme":"10.0.0-canary.994873795.0","@material/ripple":"10.0.0-canary.994873795.0","@material/animation":"10.0.0-canary.994873795.0","@material/elevation":"10.0.0-canary.994873795.0","@material/typography":"10.0.0-canary.994873795.0","@material/feature-targeting":"10.0.0-canary.994873795.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.994873795.0_1611759167222_0.3436513899998024","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/drawer","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4605b367d7c7d70f566a6d8206a4eaac2a6ccff","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.96878e1d0.0.tgz","fileCount":48,"integrity":"sha512-vOC+tKgGXmFFf+gIROrqdgV0Vsk4F6OfmHHwDmpvPBrh9ITfbjemeK7LqrsyGGpbK7E7XjURwt3ikSGgGwVQPg==","signatures":[{"sig":"MEQCIAo5On/x/LmPcPXaHifLyClldrwynpXFdNSgJpxXgNNAAiA/2MeDmAGa6UAfBi+0TzYXarXVo0vUe3VJ76tvkzf8Pw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEasNCRA9TVsSAnZWagAAfGEP/1HZBczbtXeX8aogQ9n2\nnfgQ5jdk/cZ83I+P1g03bDQsuAHu/He3OUge2uWDjKC1Zf1jDXqvBSJoJU/C\n7yg40DF2VhR9krDpYS3lELaIsgWbvcjXk5cbtgcFtOAW2G33gSS0LI5Yu2VR\nJuQ4FEwDnPYr3jnaZJKisHUevU3tLHHK6regM3rRmkOD9SMyOKIPUKs3kGZl\n3f6Qyi9i1Ox50Jh6JcBWSQW8Nyfwem+JUYY8GvEx18X1W0CgkWVfnxYvEc0G\ncygkuFhtJdCg/eDFBHyYFp5haRS9EpdR7J7AZ0p4TlDPnOtdsa98xnqsQcNv\n8oSr2cyk0UId45RV/Y7TNP/zKx/wTBylxc5WiuLyJy1ZfQkqTBoLWHUPB+MM\ngSR4KX1Hgf5Md8pZNx2Fx2fW4j6Eh/0j7PaxVEPS2EVJaSicgw8ie6mQCCRL\ngHwbSfENx/zcefzSk+SarT8MHAspotX/17/3Jg0OKL/9bvaH8FfeNCp8Mf/P\ngY6sYGWtDoBMgUnWnZ8ONaIZKF4mtYTfnArAVU92Cn6/g0ErU3NGK79hLT+M\nbtKRMAxUZQS3kgK0OSZB3zfTN/JnZ5twFh7360tF+VU6z0aoFiu0wULZGJaB\n8xVV01+nCqv8x2Pz0p4j7JDNamWy7PRS62ij7EQLKuFAdfLDu35NBuI6jQr9\nPSJs\r\n=3EyX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.96878e1d0.0","@material/rtl":"10.0.0-canary.96878e1d0.0","@material/base":"10.0.0-canary.96878e1d0.0","@material/list":"10.0.0-canary.96878e1d0.0","@material/shape":"10.0.0-canary.96878e1d0.0","@material/theme":"10.0.0-canary.96878e1d0.0","@material/ripple":"10.0.0-canary.96878e1d0.0","@material/animation":"10.0.0-canary.96878e1d0.0","@material/elevation":"10.0.0-canary.96878e1d0.0","@material/typography":"10.0.0-canary.96878e1d0.0","@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.96878e1d0.0_1611770636627_0.9195262133210897","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/drawer","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9214c30c170f9daea6995dde28424d122690b7e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.3c117cdcc.0.tgz","fileCount":48,"integrity":"sha512-Yt6RUsjrPKitz3u3xf799J64Q+NdwcyA0uZy1FnUbRHkqHA6DmxMrw0duje31GVy6inoKjpkhzhwQrHm6zPfMw==","signatures":[{"sig":"MEUCIAFddnsGKm82JY2WdFUGULfYnAaZmnn1tTJpf7B680s/AiEA9fMQfXV3Tv7DN4UM7v9fiFJtJdz+4zd0czpVeBUrPAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbIrCRA9TVsSAnZWagAAne8QAJ2+L03Kd6uzNTrrVBA9\nmG3ebI1CJtxgAxWYszdyrSzyQTfQSDqQODrAdDv+ulmbEzzORkdMB3bYMSz3\nugHhEYk9dGzywQSdLA50s+IwMDRArAxp6COMhyPWjRC1Y09oWx1bQOhTCE8A\nqBIEPetMS1yJOW2gFY/UVT4NttTVTxLu++k7SoEsOVRfdD4x8iDHj5Sgr8NT\n4pedq/DUMVLwWtfZxFm2DeRQi88ddzaaF5E76yPXeAVlfLScXHXvVm05mXYh\n/JkZzeUcS8/aGwtp3fgzjdpAptP2e4LAXTR/5z8lzmCmj+RDOXBG9pYifyED\n49xLzYippSGIWl9bsiKkj/VUJgYznUGPx3uhfy3qwGI/AxVkEW4KcFJIEEAn\ncrZdCAQB6ntMK0yIDb6hREc/kYVESp2+kInm64Mu/z2ZUg/M4n1ZH4VD9xYD\nw1+ssBz8HwjFjlI6SgLpINiB1oQw1NSEcYCy1NzZPrvo2/LBowwdDw3hapLn\ngKHpDI9T6osqkQbTd7N1pUglgA5eMRcPcWhrWfB9KagdY/sUh3ai6O4n2VlQ\nOfoKFY0Oik7outGGfDJAlmbj7qLcUXcy0JrHMwLSjiwclfZWFmRs7nqhjwn4\nSOUyFT8OAlg361lmrEK7IoFCxX60PlUB2CvEg+uan3kV1om9lrnEjntRYfcV\ntebP\r\n=J4RJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.3c117cdcc.0","@material/rtl":"10.0.0-canary.3c117cdcc.0","@material/base":"10.0.0-canary.3c117cdcc.0","@material/list":"10.0.0-canary.3c117cdcc.0","@material/shape":"10.0.0-canary.3c117cdcc.0","@material/theme":"10.0.0-canary.3c117cdcc.0","@material/ripple":"10.0.0-canary.3c117cdcc.0","@material/animation":"10.0.0-canary.3c117cdcc.0","@material/elevation":"10.0.0-canary.3c117cdcc.0","@material/typography":"10.0.0-canary.3c117cdcc.0","@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.3c117cdcc.0_1611772459184_0.6628019384235158","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/drawer","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.b411e7033.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1809149dcaa1571b8658425fcfc3534e66a05ae","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.b411e7033.0.tgz","fileCount":48,"integrity":"sha512-d4FVHdWYKkOn7B9NT7BDkoj/NzFb0AmQolszWObvY9VtqfO3PzfA+HjKHDUGjZ1+/minKqnhsSU88Kp1iYe5HA==","signatures":[{"sig":"MEYCIQDNDRd/gUgxwWInUgJz4afFQiQPTOwsLzXTUshRxgZL5AIhALf5uhLAY3zw/OuSdKYu6PYzZlJNWPTfYYAzgAANSUhW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeOsCRA9TVsSAnZWagAA0BEP/0swc80LyCY8xi3HYdVq\njwtcHUKvnGSDPsetc1WPXxD9EECQYGaVtsENlYjoa5UX/DD38PQsEIsvy4oX\n6qJ0ylNOTs35XHMJCy2lzIx0kKtG1LTOAT9bZbv5Vmhyqrnw6kN+g7mlnuSb\nqx1aMJusobbyYlMv5RT2LTtGmqCreTmdAgJnqzA1Dndvg8g8IqV+zegiTWSo\ntRRVON7/a+ox5iPvvLgccjLe0v61NzPY5B2Gw8m8Pak0U/ww5AzOmLThKeye\n19Sqhh7d2HlH/Xo8EFe+LKRxaQDbVmf+1mPYsq39I8isLD/34wMLmgyRKc33\nhqvJVVoxuBh66H1xp1J8mPIbc+HRcsEYJeOUGXUj+mSYdk5bmz754MT7WzrB\nR328Wa2niTvkouo1FRAy/RZJ82Lb3k9iZ9+hA9GTrZd1K0tpEYp61IP0Wcp8\nun5YLZ/QDwTqg5egY4tqkqrpaUJeA3UWw+0ab06xMctVAhiFhDXY2vb5Db9y\nO5eq6mKVcbEmUhPWzuJQvD9DhLGjJfL6L8INT0W2Xhw73q8iCQXzAkZlZO8a\n5zLONhHwpC5AGbgPDKbHDs4W7kvzq310oG0QWM9f4esAl/h9ONb/Ha/MS+wc\nFvQCfBI83C9wANlpUPNXjQm5KuktD368GgsISvPu6bGlzQzzb+kEhBdtIg7Y\nt3up\r\n=gQK7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b411e7033.0","@material/rtl":"10.0.0-canary.b411e7033.0","@material/base":"10.0.0-canary.b411e7033.0","@material/list":"10.0.0-canary.b411e7033.0","@material/shape":"10.0.0-canary.b411e7033.0","@material/theme":"10.0.0-canary.b411e7033.0","@material/ripple":"10.0.0-canary.b411e7033.0","@material/animation":"10.0.0-canary.b411e7033.0","@material/elevation":"10.0.0-canary.b411e7033.0","@material/typography":"10.0.0-canary.b411e7033.0","@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.b411e7033.0_1611785132442_0.3510039636308613","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/drawer","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46e565c868764b61a131a61c49eaf1f4501a6665","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":48,"integrity":"sha512-pzbPxSjboXsi8C0GFIAQlyngwI6+9K+cK59uNO9k8Yq7/Wh31jgX6pbjrP0AzEHbTnDGu1UvMDQmGqw4psLXKQ==","signatures":[{"sig":"MEUCIFEu/eShWNTlObTSduAx38HtfQmqma/ODhHPj/bujfT+AiEAmiolOg0GvF5VMjLedwWdhhIdWPee1bY8NeL94qIYDMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfGtCRA9TVsSAnZWagAAAUQP/RdKUrfAGZ55pFvFvqKU\njGLg2Xjf+SGfb+18p1y1KlE2MU3c19MTPHOk0o/KrOL8Dh4s264k80OtOrVW\nDklgfvP29eHldn007QOeHrtsx/qvslhwFfKlSQf1n9s5LpX7Qnnes3dhVKGB\nQCowSuQmRNVYpArfdsn45KBfyvrFjH7lnIxf2+MJCC33EufE/ftBEfNv18dk\nST9pTtwVldHPpcrrc2uLKkzHEI2n7OAIGHAYkXcr2SjmUlDRLMxukswvOyFc\nIkO45mce3fu7kTtAoP7xO0EpMw+ygUhtaEwEGO7Xl+DPECsbH8HXaiL8rD0B\nPX+miwYGwtmBZagFDK71Rt4pMnX1HJDOE54gt43hNVfzy+vxxDgvKkxwPFHK\nGi6/SkxY4W5mijLs1QY3D0ZdGVv6LlbKwP/vetIiIK0d39PDCLCYnsxRD+NE\nxMI1iGgW8Q45JhAKED3W+CHY9rYOqAd7yPiGjQwU95CoS6ENRwc9p2fOQmGN\nkF1cWjuSwfUzS/0O51IhCSpecrKJR+W1W2cRCgnmK/w+jD69kBuElReqOZmS\nZWj3pY3giTDhEeCx6oumAiVpr0J8DESW4BMqfwZe5IRCow5jh/1u9e6XKqNl\nLy4GCf01bJmYfr95efT0j+hTjn5EU3rWOXqWUopHc3gQqvcSbI46UdCUNbJp\nyCaM\r\n=kh2t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.a9ac16b4a.0","@material/rtl":"10.0.0-canary.a9ac16b4a.0","@material/base":"10.0.0-canary.a9ac16b4a.0","@material/list":"10.0.0-canary.a9ac16b4a.0","@material/shape":"10.0.0-canary.a9ac16b4a.0","@material/theme":"10.0.0-canary.a9ac16b4a.0","@material/ripple":"10.0.0-canary.a9ac16b4a.0","@material/animation":"10.0.0-canary.a9ac16b4a.0","@material/elevation":"10.0.0-canary.a9ac16b4a.0","@material/typography":"10.0.0-canary.a9ac16b4a.0","@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.a9ac16b4a.0_1611788716906_0.18704086369406991","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/drawer","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"988a3cd4fd679b17acf0ff0376d7f38def35651b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.fec7b42ca.0.tgz","fileCount":48,"integrity":"sha512-ZvjM5XR24/1O6tbMb59gr0UpZo+QujLS89gVUh6mpZZ9y0gLiIxqkzoi887MOSJFoLdWmEBCSNr8RtC+j7umsQ==","signatures":[{"sig":"MEQCICb5mC2rI0ucfik6kcNPVZmkQaisHYaqoYhXry4I+r+zAiAfEaoydR73m4e5+cOz0Yol30GjPtIgBk5aR/OKmoDM6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw2FCRA9TVsSAnZWagAAky0P/jL0aO7DK/yMafvtXffx\njW/awPh2pBmlw4I+2Wi5wOEJIZAYHZvzvSkyifMB6Qc0JWgV7i2SFreW9yLE\n4GJ+QX54Sonk9Gj0cAGFlg4sHCvYPcB48V+oDXMfl16/Gva35mxWpJsTXFHs\nH13WQI6rWMa/Gr6uCWwy7wv47xr+Y5Bu/544w47Q/IZyzX3CAOe+T8E+G2xC\nQvFR0K9BSty1I7zSLMiuYmdaiI/Amjv/Ut3Xr/uUpJuoI71E9ja0sYRVH9bH\n8Rghgw56YUoDtiMW5Bpg7sKYegKJfEjd1z2SxecJewVKMN4f7yNisUV9FI8z\nRp3bjWHG26prbOi9h4uPXYVKFZAHJJNsqwZ7GEnUJh7J7NOcrYO+zzOWHxfn\nJpYPH7rRi1LzJ1/xCvVI2XXbybyJM8MhUi6xVkWbwV8RNNNn00dT2fY/0+3i\nEWlqDqzlLr0LAk7yQ+Lr9qubIIrScyk+Leo6812VkLzPjpJwrhTPAkNsDRMw\nlPBi6Z4mEt1obHXl3RrlUndIVNZDzZnHLkIGNXKlLsQe+OvgGtlWTGmC6eGP\nrQKMxVFawBfrkJprUIt2FqUa/YhFk1TWpl473B3lhMmgWsice/VNMdwQK7Sy\nZ392/Nd55KuqFGrPeKZzUMFk8D3eD1zCgo1AkykStTzLx6ib8bVgTimSC5XR\nXrkj\r\n=kdtL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fec7b42ca.0","@material/rtl":"10.0.0-canary.fec7b42ca.0","@material/base":"10.0.0-canary.fec7b42ca.0","@material/list":"10.0.0-canary.fec7b42ca.0","@material/shape":"10.0.0-canary.fec7b42ca.0","@material/theme":"10.0.0-canary.fec7b42ca.0","@material/ripple":"10.0.0-canary.fec7b42ca.0","@material/animation":"10.0.0-canary.fec7b42ca.0","@material/elevation":"10.0.0-canary.fec7b42ca.0","@material/typography":"10.0.0-canary.fec7b42ca.0","@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.fec7b42ca.0_1611861380554_0.6344155416229762","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/drawer","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ceb3a0cc18d4a6fce82ddd4c87cee22f0d98438","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.8e66dbfee.0.tgz","fileCount":48,"integrity":"sha512-/dQ7/aOQjz6WbfP7r/tdnXb0A4OurEGRMo0B9faJM696r6OQuXm6wRJJM/EZzedXjDnS/CBJqPA/y6RMNg/V4A==","signatures":[{"sig":"MEUCIBeJqhH3P0ppEvyaK+vpIsylJO8ZvTxUem8y08fmoCXPAiEA91/Etvz8Pqw0RO0jeY+vXBEDPlp8LqurMxoR0TOiHvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGI0fCRA9TVsSAnZWagAAe84P/1uAxMyEEeTdaa9h31UG\nzpQ1AippkOK/g7I2C6cI6j5zIysLKolda/2OfZR0Fzqu6T6HVWhbd2I/oQ6n\nOGoZPGQj7c7ZvObRm3J6FX9Erg/0B3qzZtjvnXHAGNIhKVCTJvIFNj07OiGt\n1YQ8oubBTErB/3Fh0e12OVdEN6JsEgGoW+ezLj8XkT92Ttq3Wua1Gc/aE2g6\ngn3vNd8ba5MzFPymXaPnd8a3PYNI46AqI2/d7UyJDtT5I9pjLjinMLNiG2hN\nG7oI0AB4tH0mzXbdx9CpeK5ZcZGEVQSPKnM6wQR7KXKBSbc/0PB3y668Dsox\nSJbZkY/OJ0+1ea5Nv7/8eHRIcGVYei5M3tjxvBD3FgFnvfIN9BjC3AcL/YDB\nF/caJi+AIK4vNg3KOPp5I4cEetU/8a9JK+zHtz+oR/AEC47vik9f1WJOc91y\nINybaBRsOw0Xw1zx19FkuvTkz6moWDbDFO3LRnJpqk9pgoLStxqi5EHGJC8j\nQTQ4ycQRSI17OmQW0ovdzB/Q/RXgvhSA/bbyj5l8p2FwEfFqCpxozXui88XL\nGmBrN71sI/WZAL6L8rY2uQZgW2/neXItGEvCQS1q012Dwg+aeCrJuLa+33+f\n7HIVKJwcu8B7t6OV5uiNEcbcSNdeFYm8agXKpWi15ri+J2KtHZlNl+0tY4EP\nSOqy\r\n=Z7Ws\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8e66dbfee.0","@material/rtl":"10.0.0-canary.8e66dbfee.0","@material/base":"10.0.0-canary.8e66dbfee.0","@material/list":"10.0.0-canary.8e66dbfee.0","@material/shape":"10.0.0-canary.8e66dbfee.0","@material/theme":"10.0.0-canary.8e66dbfee.0","@material/ripple":"10.0.0-canary.8e66dbfee.0","@material/animation":"10.0.0-canary.8e66dbfee.0","@material/elevation":"10.0.0-canary.8e66dbfee.0","@material/typography":"10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.8e66dbfee.0_1612221726543_0.17359151091220526","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/drawer","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.637d15da6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa186c4048d0fd3bb9511bd5aa9c0a389614910a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.637d15da6.0.tgz","fileCount":48,"integrity":"sha512-z+qlA2JGMFQA6JIAhUhffwlV8JPyXKuyDhW41SeUY6NYw4d60obsw5082qy3ZQTeMbHXgHGBIzFJvJWnfXKIuQ==","signatures":[{"sig":"MEUCIHtFLwO9QwbJvP5zCFyPixB+5/IEij/98okSWZs4CxquAiEA1gkiCLdWsIrchUey2+5crkSKqfRPNoDbvHxA2t2qWZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ8VCRA9TVsSAnZWagAATokQAJyQWFRNZ8URrXGC6APn\n9usoUyb224e2K2e+rO38zB2VWeIQbA6eAhHIpv0xOm9tfAPb9JW8IxfUYlNB\nvUaTqko9ds6NUjODJUq28BwgVcyTlIVr0Noo/66h2SSvZhf7h3OwWHt5HNrc\nRVKxbAKdYwicsl19Lm9e1Ng5MoaHi9gpYwlKupCflossVG9gH/vq3VwRWWGe\nJPzBfsToHZIoIVsy6rV269OveOmsG5ZL0dmDDFwIEmnd3lxwgfUw+EEPe5K0\nMAUkkMtWiJSBjQ+Uzp1Z7vHsjCIY0KetaXqKo8+XgsQpruCya1c2Q2NBagVV\n1HP+NxhWimhbFM1MPVxnJvh3TTYjOEnln+mt+nO+ODBh7AJ7uk3/EvKvDZ9D\nvIEHI658Ekb61D2rYFvkjoytmQNeWZmZXxwYLjxzyU/b/eNjRp/ybkniK9Nc\nWpZjkzUpOaLB9LqS9x7nLF1A51/DBlAal0JJ0bVRA372K1kQcERFvhrtkBrN\nK2ZTzwzpEwf3tZW+aA697rwtj46tedr5DzpY+7TLXRSpAdCQmmaGucKTg3d0\nlpMwqwsziJdS8iV5COKLO6QHFJRB00b13qNxuRdJCDGhB7q0wMXylkz0MA08\nLuH6i4cFqC8p18tq1dGgGN4A7r6/Vp85eOidIEjbHPd1niabSwd7TKhT/TyL\ny3n9\r\n=XWwX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.637d15da6.0","@material/rtl":"10.0.0-canary.637d15da6.0","@material/base":"10.0.0-canary.637d15da6.0","@material/list":"10.0.0-canary.637d15da6.0","@material/shape":"10.0.0-canary.637d15da6.0","@material/theme":"10.0.0-canary.637d15da6.0","@material/ripple":"10.0.0-canary.637d15da6.0","@material/animation":"10.0.0-canary.637d15da6.0","@material/elevation":"10.0.0-canary.637d15da6.0","@material/typography":"10.0.0-canary.637d15da6.0","@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.637d15da6.0_1612291861077_0.18747152746101725","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/drawer","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.fb793939e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69dba42d4241cbc0c0c20ce1ba4fb7694e188322","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.fb793939e.0.tgz","fileCount":48,"integrity":"sha512-uZ3jz1ianksJ2yu+gcK64AYH2FXXDWbjPMgmg7fE2XZV6e3dvvsxVkWVDVITI2Fc2RbcfqIOF3Bh50XF2i7nuQ==","signatures":[{"sig":"MEYCIQCwrnBHffoNAsFIBDbR/D6i4BAlIrh+XZZWHBmRqmB/9wIhAIq+plRM25vHRgl3B8eBIeelIN8QcjgHP6iYj2TqBoP6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGePwCRA9TVsSAnZWagAAiRcP/iQoV548tpcrr+qX37FU\ngkzzrAwifjDqmOxLsBgGX1C9uynXzNnrTkgMrUBcXPP1BIwN/EzCUk9UorXg\n7+axeDdtrciKPU5PXKJNf1+kkh2MCqqR4mqLdvT8WdBWYPWIVH/2vbY1k2df\nVBz4H85BuRIPx0Ap/F7tLmVxKmkiJZIRBbGPpUYhGVhrcZ02VzTa/la3dUvp\nAVC/Lxtx+BYVC/2j4uiIAQe0lDdQutFkCcxgZThmIl91DNjCg4Z6vMMiJsk2\nICe/36Yc8s8fNJy+L3aG6v2E2tvi2cz5CQazhvbSpJ/Y5Z3LmlUhX6Ja49Y5\nPL2O6R5ws3OgRe8B6lf4tZVBB4QfjZ9nEVmGHgNy8XFTnyAhAV5O55oBrBew\n1C5BszR2QztIRqRE450sDLqJfFLfRW1kD1bnAeAtSUF6IAWp1p9R6FDdzl7j\nRV+WgQEnhKgxT7V5zTASrIiAhZb5uvzUuRTmj7wEAzixeFXprCDGuwYEIZFS\n/+caYktpmbsCoMnD2ilZ3MFRFTcT9pvnlf9GCGv1knBW97+Cenz59taeAjpd\nwboIVyX+IFymh03nJPMTiwd5g4G+ZZO3JFtSbaBFI/b0b6uJNd3/Khs0/1nd\n1HcAcNERIpQAzZ9tcMKp2BkvunKP998P2LjZIrFHqwdRdXw5pJoNQGstsIZk\nSDt9\r\n=mRZd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fb793939e.0","@material/rtl":"10.0.0-canary.fb793939e.0","@material/base":"10.0.0-canary.fb793939e.0","@material/list":"10.0.0-canary.fb793939e.0","@material/shape":"10.0.0-canary.fb793939e.0","@material/theme":"10.0.0-canary.fb793939e.0","@material/ripple":"10.0.0-canary.fb793939e.0","@material/animation":"10.0.0-canary.fb793939e.0","@material/elevation":"10.0.0-canary.fb793939e.0","@material/typography":"10.0.0-canary.fb793939e.0","@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.fb793939e.0_1612309487715_0.8657024563394107","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/drawer","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2e645862d64d7751524d588788e17668741a36a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.15a4d40dd.0.tgz","fileCount":48,"integrity":"sha512-iDBZ749WdVoujxulU01XUlEZdBcWZ2igtwbR5d09+NYf7+EWNHQ45kNiXkJMYZ3bRbapatT7O0tp+QHCw0DcJA==","signatures":[{"sig":"MEUCIG0bKKkPkkCMGR8DFNH+RTExUdPzbjxUp45TM1cRaARIAiEAzI48EapeisObnUK/WDooaMYtzf3IwH0NuoNhDMzbWIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGghWCRA9TVsSAnZWagAAvMUP/RFc79yiufXutS4SVcWg\n2f05ev2iLLOblpb4Pknl4sa3E50KiCImic8j6jK9pqof3Xj2b1xEYoIQ9gBI\nOgJEX7Dyt7BJvrnlamnnwO93AGvhunLxW5KpLy7pdK5jjouRqKXa7bpSmg5+\n+HoOHcE0UWJeOMAOBVhDcl13/9fQNN4mdit9emVIzA6o1zljSJ209qdFJS+Y\nRPWJd1qNKw5MyaHkbYf6CKB+gt72cdDqF9xaYtDnm5OxDhY/vOK1PAKl/R0q\nLEDXWbsnu/+YZrhAKt3ah5gcwZjM24L7wkEeL6TTbpZCL1cyPwrjio5Nf3IG\nHFWgdy0+22bmKHEwCTk0I99bN1XYpDSxeKAp0bLOvICLSpFb7qovH9p7BQJp\nn0HFq4JZ/3t1NHfwqy6V30GCySADgyGEs2aOC2LbxOPfOSaGud3f0oSyQs1Y\nGKtSu6Wxrw7S2LIzsUt94e8Ip0t4p1vLFjuLPDHX5ms111LzpKIYOAxhK6Bf\nld2gmgrRY6hfYzXPN6rmLCO3zz+awFvQLgp4XvGVXwG1EQYG3qgKZLkmr4Vz\nQk9UMePHvHnBWo7lgj9irk/gb7mLhwcy4lawcCKVzJM75YQBzKhFcyIaqubX\nu6OBwcPpPxLaGPeYR1z2np3rfJqTHKFMQiezs5uQEVHAG5siw2+louZcsiMF\nL1mN\r\n=QZgS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.15a4d40dd.0","@material/rtl":"10.0.0-canary.15a4d40dd.0","@material/base":"10.0.0-canary.15a4d40dd.0","@material/list":"10.0.0-canary.15a4d40dd.0","@material/shape":"10.0.0-canary.15a4d40dd.0","@material/theme":"10.0.0-canary.15a4d40dd.0","@material/ripple":"10.0.0-canary.15a4d40dd.0","@material/animation":"10.0.0-canary.15a4d40dd.0","@material/elevation":"10.0.0-canary.15a4d40dd.0","@material/typography":"10.0.0-canary.15a4d40dd.0","@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.15a4d40dd.0_1612318805895_0.007464818379375959","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/drawer","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f82248f9be0491bb7ab81ac30cbee9c3675cf37","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.7a003acf0.0.tgz","fileCount":48,"integrity":"sha512-AuEds6N0MjvWYbbaVOVFZB1DEzmOkgNZSieIC1nFQY4wsOjJUqscdu7yUmqA6jGQwrCot23kVe9L6810NWZBIA==","signatures":[{"sig":"MEUCIB+Q5763p5qUbCBg1jlh3M78ijBsrcJsVhvadNiFBq0VAiEAl03pmYpLs5Sz6EiP8B4T0km/F/6CfERu1c5za7fpW14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG12BCRA9TVsSAnZWagAAW8EQAIwLBU19UgyDGi37hx6v\nSqE3Pn2gJErlEZhglgCSfe3zb1QbscIgX2cXbGC8Go4qIq39s/CuFTq3gPsh\n4D6/ZFhvb6RrtKqjBmEunIaeASwX8vkb0WoYvSDXKMPpMB5yVRl1gMZPuOVe\nCWXH8ELgGO6cBng4QmqgLzW+NxRCsRRTUISrsGcZj4jh+i2sejpbw94AvMZk\nsAZB6VDLGjPK0neRIFvGZstaOv9vSAoCJjLtlo/Xf0nGWRhg1m91qJPPwsEc\naLK9hPZypTdrJKSWh8qEaMmKnKkcpsSQiMlIYeJAkKNHPZazOQbk58s0dyVf\nydEGhbmQBHuK6XlQIvxGDKCofpBSViZvM5lEoToRnkLMgZOjOG9p6ISLMdM7\noHnRtQrCk5ZXXGq38xPEJ5uoRsbtBVmQZjh5vhr46GehkNQdVUVbo0a4ou7R\nrRR0XwktfR6bn3riWAGBI9w1n/SzNHkwjnEPX484AJO2JoKtIZAPP2e563Oo\nP/TNK9pZbYStBWPchV4QpFrwk8uEuIbJh5sZYudox7jWHhjHqk+0HSq5Ao2n\ngxtf4h9oo4mXhlCPPJ8CmThMGvJzGEIVpGvi7gVrblMM62oAHKyAQLhNgdPq\nHc3knmBcDCPVMvGV5r7Y91ikZOWO3k5kRNB6CWz1/QrGHBEVtHwEgExDg6LG\neKL1\r\n=4JZv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.7a003acf0.0","@material/rtl":"10.0.0-canary.7a003acf0.0","@material/base":"10.0.0-canary.7a003acf0.0","@material/list":"10.0.0-canary.7a003acf0.0","@material/shape":"10.0.0-canary.7a003acf0.0","@material/theme":"10.0.0-canary.7a003acf0.0","@material/ripple":"10.0.0-canary.7a003acf0.0","@material/animation":"10.0.0-canary.7a003acf0.0","@material/elevation":"10.0.0-canary.7a003acf0.0","@material/typography":"10.0.0-canary.7a003acf0.0","@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.7a003acf0.0_1612406144748_0.2365087572870943","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/drawer","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.05f249666.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f2773baefaa0bc9c2358c418c3699fd1ac4a556","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.05f249666.0.tgz","fileCount":48,"integrity":"sha512-806hfBz16f1sKmjGmJp+hq62rPP7zJQlV02ECXoacgWBie1SpC29rgBoxQyyWvYiRrpJu3rt2LAB7sXdKkODGA==","signatures":[{"sig":"MEYCIQCv729QsUTpOygAQGbOrvFgfUGO5r0pCQshSfXI57sx0gIhAPy48sJVUsoT/XLxep7FdNLtmwb8DHOjvOP953CDhL/S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDQ+CRA9TVsSAnZWagAA75oP/3g0QT4lwl9knq9Wxmqq\nebz99vOVeOskRQoIzM0o3NvqFhQQEex4jpZsVzBGA8q0cBZv+RQp2aRwUME3\nUIceBeKR/KROkzhneU0bp+481a5GbYDunT3Voj0uegJnUCJIOTxLmBPAob2i\nhi3Et9nl4MZ89h/n9eqrfkvy1pvVh36XC1+9Hux9lDK7eyriucSXq3ckKp6T\nvB1pvbti/6Sz27jMBDIAf93Zvjn45CM61RaeX1lmHtxcCj+vRLAmNLip21Zi\nlcCbA8s+Tsx5H++Uoy/j1FdFjVh+IflcBRlwcNmCnB7WMTDwGnGfFbCdKZax\nSvLq+L+4ENkWvHtQcmgcb9IKksnTQZi6m0rOFWsmPHEmQZR4q3Hfo4h08p/u\n9D1zUMtepufFpAe5W+2JB20P7GMCJqJYaXzIhFpNcHi0vxB+pW/Tvw4jUDr+\n+LugHWVyAe38Nr0V4yRAFTodl48YOsPQtfkkT0mTYkZzx18e0oa2jj2WPRuS\nPGwos+/dcHJzhBTNjCX2hWAW0giiXlDUciHB8Cwc0L0XrEocOWAd+LNQhSLH\nlj9RV9bUJbkKHZoI/V2trE8WcRIsYFn72+D7S3/KWU+z6+Gtpe0cesQThWwi\n0sNCAECTTwiwp3CSO8r+i5YpLPcZfgwn1fUWpjjQRxK4gm5rmxS4iKCVpwVP\nhVxz\r\n=X/+r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.05f249666.0","@material/rtl":"10.0.0-canary.05f249666.0","@material/base":"10.0.0-canary.05f249666.0","@material/list":"10.0.0-canary.05f249666.0","@material/shape":"10.0.0-canary.05f249666.0","@material/theme":"10.0.0-canary.05f249666.0","@material/ripple":"10.0.0-canary.05f249666.0","@material/animation":"10.0.0-canary.05f249666.0","@material/elevation":"10.0.0-canary.05f249666.0","@material/typography":"10.0.0-canary.05f249666.0","@material/feature-targeting":"10.0.0-canary.05f249666.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.05f249666.0_1612461117925_0.681263831069743","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/drawer","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c834bfc15604feee9d594a6e7ccc2329260dd62","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.1a3a39629.0.tgz","fileCount":48,"integrity":"sha512-csdhPhh0bm1m8MuL5auAONSJCVJLnjT/xyb/c7R8JJICpD+iBxvUHKYF851H/x7g4mbj22We4ugwHHpI5lfM+g==","signatures":[{"sig":"MEQCIFO0QpXMftGZ1bOk7cjByv8ypkX3FHR/xPkV8AxADuF0AiBvVos6oKEjCK5OAqdm0vTOAeCOyWvZ6XnhkjjpB58E3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHECpCRA9TVsSAnZWagAAtbwP/ji3iw2hvq4o3BWkpJdM\nTDC17qvCY+NH9wLb54fe2fB0Mt7MLiart+0TYqV++rufKBv29Nttyh/ay6G1\ntfBb4Ut3DTdSwoAllkcBViQ4BhP7W4Emg0J/1XNmhrdnruVzKaSHNFy43cxx\nMuFrcnDQ0dji4Ux/P0hjkHNtvVrUvxIVbXgX8v2pYQN4yowCVGZiInOlwLHV\nJXuDoyfT2kaU+CjYUJoxOTQgNSrxuBvDUpdSD7QndRB1SY2DgFsMgajxaKr3\nNRr2m4jEt93ArdqXUIBzpjqxZErKppNu2UiYmXOtQ+rzzW+q9xp22WZ4kIIr\nORiNE97ZA/X61J9twJlCizp+pY3k5pXaW0BaOFwR6IWEQdPklLboUNLefYK4\n1loHL5l3Z9Ms7xI0z5jtDgngJ0fjNkHGRNNzCoF77gXKhiqIij/R9hcsOzLn\n5xsJvP9m0yJEjXESINaJE35KMwtUcNdHv+9rjllJnvsDTX5yRJjFEfZ9QVu+\nGDlvTL38OWpG10FFsj0adiL0pdGYZo50y50odvDDsuV8VUMuhcicagNr83lh\nQGE6BSu5YLRTpOIf9XV3o+w1uR2YUB7tebhHjLTUApZ30is8lm3VhpXKYbMY\nKpcT0CPk5pVpTC2JPUkZ7Ck3qW+He1DQaSePLBUhsF5nmU5fBJX4lJSXRJaH\n1Emw\r\n=rAMK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.1a3a39629.0","@material/rtl":"10.0.0-canary.1a3a39629.0","@material/base":"10.0.0-canary.1a3a39629.0","@material/list":"10.0.0-canary.1a3a39629.0","@material/shape":"10.0.0-canary.1a3a39629.0","@material/theme":"10.0.0-canary.1a3a39629.0","@material/ripple":"10.0.0-canary.1a3a39629.0","@material/animation":"10.0.0-canary.1a3a39629.0","@material/elevation":"10.0.0-canary.1a3a39629.0","@material/typography":"10.0.0-canary.1a3a39629.0","@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.1a3a39629.0_1612464296806_0.22548321453111075","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/drawer","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ea0610e99b53e7fa725357ab69668e19ada8d1b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":48,"integrity":"sha512-9W0pdnp8ZLNf0kr3DnqgedVgOj/E03HMsHJIPKGSu3vPwPjhItj09N0v49uorZx882PD58BszPKPKFRq5WsmHg==","signatures":[{"sig":"MEQCICGmR/cUDg2/1mdwUKUKD64ZQSBjesIATd+fqibOEe4RAiBrJIKBywf5cHQ8/TbNGnhofKDSXBE1PQKkxIochyrqkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHbwCRA9TVsSAnZWagAAB6wP/jwAgw3dhFUGSfL/6GIp\n6pHDTr2MP1/ycfPZr/pKQlVH8X5CKyhayl1h59kT/EoKk/qb81Y/1tROrvzR\nda6LmPZ8bXp5XRHEBXyqbts5UgC4E+5YkD5rK4NLhVYo1BJqCT/sC1hB1Glg\nDujaiS5dLM1BFLUCqFx+P6H8WcR2btE+rsYglmGniHIVkDt8c0Tc5lecTwhF\nVjRitWHKV1xzPLzjauvoTbgjToE49u/GDY+zsZirMKeKJTZ00y1Ca860qfbG\n7/TAOGA1ymbBiUEqzVohFGxYhcQTpSqnz3HITOP6UFxdDtmrOPpMmu51TnBq\nJbCLg37ObYAxjCVNRe6tbTVO5UWndNyEEtb3Qe4uaftrZe6JvKN43YV9t8AL\nN4zxpNF9VwyLWmkQH2Ox2bD+CK/YBQFjNer2UAhfg3Uy3uQ7OMTonYYxArGH\nCVHAjWSCUr0/9FkU2YTGiNDxapcpUkk5mugFlW1g3+8Hu71z5WA3vx3waig+\nIskUwdJgqVXRv4o0I8PZLRx3HpjRQH5TVDWBb/fND7uC40zSOEQOfnH59reu\nkt55l+R4rNO+zZfb93tk89xW3QanuyuI78Hu/K9hS2mQL7f97g5nsAeFVnqN\ngXAz9rPhQgw57eCGPaTz3QOJIyV3MDSQzzhCX/brXXP/ih6EqkPEO0lpWhh0\nxoOi\r\n=35f3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8b1cdb1be.0","@material/rtl":"10.0.0-canary.8b1cdb1be.0","@material/base":"10.0.0-canary.8b1cdb1be.0","@material/list":"10.0.0-canary.8b1cdb1be.0","@material/shape":"10.0.0-canary.8b1cdb1be.0","@material/theme":"10.0.0-canary.8b1cdb1be.0","@material/ripple":"10.0.0-canary.8b1cdb1be.0","@material/animation":"10.0.0-canary.8b1cdb1be.0","@material/elevation":"10.0.0-canary.8b1cdb1be.0","@material/typography":"10.0.0-canary.8b1cdb1be.0","@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.8b1cdb1be.0_1612478191479_0.9915905443753832","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/drawer","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"968463e63834977163f1f3145e34640a4fffd69b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.8271f00f7.0.tgz","fileCount":48,"integrity":"sha512-2c3thVcdU6V4z9zjEvruCMV0oO7OsNfPbonneKWTgGtKqXBMVVWmA1alvnx+FQcuOTge1uvh8u9Y2VNWCPSkUw==","signatures":[{"sig":"MEUCIQDAskShdyHJ43hVCQ4LAOXKQUlWsXKvWkkeSxP/mrvH/gIgfZ9v0aRIwOo2C6lNFnim5Co5ATUG6uwY2qzcZ/oV7MU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHzxCRA9TVsSAnZWagAAoKsP/RuNNfLNsJ3Np76s1vS8\nUJaFIQSZv/tns5kwb1l+xmm2mu4TXbkV+lmekqzhmiIyNl3MGH0+AmXBCVi1\nEaW7YliaVde6u3bFv6hez4EfFKS8FbvVoq9lxUnVffUA8fsYf4qCOQiOEQ0F\n4NhE34vtONcTUwqdptP0bXqQD8W2faFvleOojJ+YYvpA2WBNOvrckb9ukSou\nb8MFr2EACpVZ5A7z0Acg2aPv/S6gygZGtjTJNwibArqwI9Q1B2CB/I3chD/U\nIUBzAa6kxww2ZUVtk87TrCK4Vsaq9/wT8WM3NTdBMLOr26qVSGXDHhniJ5DN\nz2e9feQdRw4Lr/ci2hQYlBJuWqUg24SCAwlTSu/VqKREztqk9qZMAJe7bySS\n5IKavJ5+MCw7FvQX0UQF0nyzd42r02q0tGBcCRGtrjJQG+eW1oSJAq35HMRY\nhXsd3mFzsFhaI5392Dlnyr2LeOiVdkeX3WrYYRVTfNOC7OTpDSzbGupGIQDX\n7i3t6MK5MZdAUAkm+f1Uh9gbt/dRA+YKkCCc8iJSjo2WbDnKp8odGUo7/H3z\ntdkFGpGsqLNYJC38HGKp35bXzfMF6gPLTY7JA7+kSnYxiqaFNlyWzuR4dFAL\n5Ddksexj81rD7Me9gQuMhdquCs9WqeUovdCjq9BAn+zcRcfrQ2P+IJD5ew9B\nG4tG\r\n=2cIp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8271f00f7.0","@material/rtl":"10.0.0-canary.8271f00f7.0","@material/base":"10.0.0-canary.8271f00f7.0","@material/list":"10.0.0-canary.8271f00f7.0","@material/shape":"10.0.0-canary.8271f00f7.0","@material/theme":"10.0.0-canary.8271f00f7.0","@material/ripple":"10.0.0-canary.8271f00f7.0","@material/animation":"10.0.0-canary.8271f00f7.0","@material/elevation":"10.0.0-canary.8271f00f7.0","@material/typography":"10.0.0-canary.8271f00f7.0","@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.8271f00f7.0_1612479728782_0.19192011944099407","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/drawer","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0-canary.533092a90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eb548891e3066124ec86f36e6339344fb9a69b0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0-canary.533092a90.0.tgz","fileCount":48,"integrity":"sha512-ImkyEU9mdY1kFuVjq3HONoab2WM7zloZuXJXfYTLUu2v4NKbGVS6o+Z+9xGpxuyJYiHV0e0Exow7AOvjx/TYfQ==","signatures":[{"sig":"MEUCIGq9NvfB/19FWMyCqJ3n+qZ2XfITPbIeuWlpDCBJPF4CAiEAsYnic9zPefz9y9DdU6YuAN6wzIZNDBMioCCNyYAew1Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHMACCRA9TVsSAnZWagAA9K4P/R4USc5v16G99gC5BSbK\nk/NAPV51B3LTNtticEiyqLCnDdFMPcN1HKOAOO7nE3zjJ3epsBFZYUGElXu4\nYh7ko6rgNs3WffyN0oANmrn69MP4xA4RIDyRie5v+WCmjNHaioVMjCjSXlTz\nLDZPA4nkOJKG7DR1Bm5BFD1I2Vw1Ph8US+CG6lSDwUUa/rMSQFdcZBz52FJG\nGB23Vw2GrAoyduw0TCKG08zsenm0/tiWR79RpYp6bByS6aumWOHpSO8Uzr1H\nWpPJ/jcSWC4q2gSkJ4YWzScaVu1izfra/UvxxXJcraESk+VgzDHH7jnsmSAg\nxXNUr2X9yZQ23aTAt/RxA/ULWJTHxVHHr5yXx816TWWBEh3R/lQtOdBoj3xa\nqoAXlAJYnuliikzSIb9I09i2yH/u4xK6g3HkfJiv5ioEj03JqdaFGQcLgvtn\nhEeVyn1VFeeeeD5oirMBY9pTvD0sSH5IucXXaDUGmUiKH/2QoVzmX7qtaLS+\nnXIYTiucs6nVN03EPhRpY8yDv/LJmiFZyYKZHOHNX0OhsCA4dsKer+Od8cg0\nxrjcClAn5kntniHikcxALBjhXx9BWdtsrlngRnH1AvBr2UolVfrgWpPiQtpN\n58DrmCy0+kJtKhNY9lSczgmILriUkYvGhbblUT8qc9IfV4nOuXFvXkr36xTo\n2nbK\r\n=Xx86\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.533092a90.0","@material/rtl":"10.0.0-canary.533092a90.0","@material/base":"10.0.0-canary.533092a90.0","@material/list":"10.0.0-canary.533092a90.0","@material/shape":"10.0.0-canary.533092a90.0","@material/theme":"10.0.0-canary.533092a90.0","@material/ripple":"10.0.0-canary.533092a90.0","@material/animation":"10.0.0-canary.533092a90.0","@material/elevation":"10.0.0-canary.533092a90.0","@material/typography":"10.0.0-canary.533092a90.0","@material/feature-targeting":"10.0.0-canary.533092a90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0-canary.533092a90.0_1612496898424_0.017958755517690994","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/drawer","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e3ac7064057e3466ff5f74bf27ab4265148b21a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.633a9fc7a.0.tgz","fileCount":48,"integrity":"sha512-kzuKjozx76LYPftt/Zq5NX0I0SGEnhUq7OAOiybSlKEqLI6LYRdVBKxTwrz/DkQocQZ/ro90rcMG3NSB3SyPRQ==","signatures":[{"sig":"MEUCIQDM5ogEv2tsz5XJmV6NXltVVDwIanJSZfsMsNHDEJO5YgIgY0ROcPkuhwgetXJd3K/i3v+POh5qSj7xz1Rrd0KvUZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHXAMCRA9TVsSAnZWagAAH/AQAIa761cYpRgliqJXUSGe\nT7zGPeTpPefNX/NXdEADOSXAij0SEZcuaIA8IbQL8IiQmOcJXa+NWhM41GbI\n8mlNu5DHaiVnm1T8qmEpy1mf2eixUjcNitmD2O2ov6iJ+koeElK2Ap4ZO3AI\nZMinrPbsqx80l88DQ7mzMqvgu+tnOKO4NcXhzp2e1AZBZUxHZi798yRkQlfa\nOmp7lqz2l5KV09ERLwq3YUhEjwSjIsOL4pMtWwEyidXix2tKJyjOFfAZzbMa\nViGgUT6nrOVuTYDpFSEr4omRcMUH3l+AJx/E47Yi69zVwMbMb0gbQTvAPay/\n20QiDATqVarPrNmpi8LWo+dmj1r7rRA4UFYNx19fOu7qctM+a34F/PlESAeH\nc6oJJiP4Ovnweth0Rqrtzp4+Q9QypVV6ctlplAVeir6CcLtGZQRxORNXq1XL\nyoGx2+RXvA4W3veS6qgpH6VTg50OgS3YvLd/j6RwxB+VKIulNALCWMR8j5g4\nyNVL9sIU+BPWFNU3BrDcNjQD5FHN3VXDdMcxVQ6GxVvkHYK9SoMA1OaPBq5K\niOgx0RD5UOShSlRuwZWFd9Pj2hwYLaHLWkkvtObnNBytiKX6hcO1e/RSkUC/\nAKQ4IGzI2QJv8RunFat6tAn7/h13rgrE9LOGoZT6PLzLF9AQj+z9BrE/fi+G\nIvB1\r\n=3aUS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.633a9fc7a.0","@material/rtl":"11.0.0-canary.633a9fc7a.0","@material/base":"11.0.0-canary.633a9fc7a.0","@material/list":"11.0.0-canary.633a9fc7a.0","@material/shape":"11.0.0-canary.633a9fc7a.0","@material/theme":"11.0.0-canary.633a9fc7a.0","@material/ripple":"11.0.0-canary.633a9fc7a.0","@material/animation":"11.0.0-canary.633a9fc7a.0","@material/elevation":"11.0.0-canary.633a9fc7a.0","@material/typography":"11.0.0-canary.633a9fc7a.0","@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.633a9fc7a.0_1612541964314_0.46160523697647315","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/drawer","version":"10.0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@10.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f1e8a56bfb4e35c808c121710654f31040b3c0e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-10.0.0.tgz","fileCount":47,"integrity":"sha512-x2B8Cqz8x3ecXU4gkFCZBzWNKC5q+oDc73dce/rPNoR87ndzLhMcu6P7mD/tBaNBJHypfQk1SBkbFrMYHAfncg==","signatures":[{"sig":"MEUCID8GwHJmsNwni8ExQSTTKEjCDe2ZY4m7G0VV0aAqTgGyAiEAuBukdPswLOMyKJFff1ouKgtfari0kLZNlovV5xGEy1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHXBbCRA9TVsSAnZWagAApc0P/2K1M+YSCFAI1zjeDYLU\nNoooyBcU0PJV3y3P6Jz0ZppKFb5OghIkB9v0JecAgkJT7WBwG/kFddGvY82Y\nCUSLNY2ff9Id3PsiyeSNOnbBvuoQvc4x1Y5Lq8lagR3ZFbnYsOKl+idWl+Xn\nMjEtVaML0oDnoHZrOgrLzfaFGAbX10rt7uLtp03xCRnOuMvAPX6oacE01MTG\nvwp8OECO5n5N8vTzkla0aLEyUUUrS/7nWc9dSCMSnBxZtydjvFGDsZoH+gn9\nxpJTgznt8YaRw+aaUwN6DzBJaI+8nwHcNEcNY9RmLnbKsaJ4gGY/am6uT6An\n1110swYZZbOhvLzC68f3sqgWbWaU7YFHENBO6Utnqb1KOSf8gLD28lBmse+5\ni6Wa2/BsVmqIEZv6Ijn+tCfhDpfDSU+de6scu+/h7KlTEoBr46959ObEaU2Z\nXunWel8+avJAncgUZDDED/g1f4CBiSL7X29ZNFMyEzPvduS1YwSQthr3UbcE\nvmdP67dOHiPyKNckKQ5tlk71c2Y5Lf7sSKIfli8ny9nJGIMLcIgCzlOs75TO\ny7SngqK2mGw2S3UOS9fQn9yLh87Y28MQOoCuuAzAG2FluJmbJMk3Afscg58O\nZ76KYZD8DGL7RK/OpFgDqUoQx31IvZ8X63s4VxSleXpgsGaigv3vdqChFVCD\nCRqc\r\n=oDci\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"^10.0.0","@material/rtl":"^10.0.0","@material/base":"^10.0.0","@material/list":"^10.0.0","@material/shape":"^10.0.0","@material/theme":"^10.0.0","@material/ripple":"^10.0.0","@material/animation":"^10.0.0","@material/elevation":"^10.0.0","@material/typography":"^10.0.0","@material/feature-targeting":"^10.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_10.0.0_1612542042646_0.06247288546971275","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/drawer","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.b5227247d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50122fbec905756da04bb87d44a0eb1c75c01b8d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.b5227247d.0.tgz","fileCount":48,"integrity":"sha512-UoFl2lwGJaZ1CaMl2/RSbhVOa6r14rb91osXPRfUgm4v/K1xHvcUWOmKycD/xErcTe65vS7yitw1fF0RV7lohg==","signatures":[{"sig":"MEYCIQCa4TETKHUEjVJ9/2Jhqd6+bvzJ09zlUrYPCi00M6kOWwIhAOgbKFdCTT8K6qkKe2OceN9myKZb0rv7ffT5XxMbm6c9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYPYCRA9TVsSAnZWagAA3wEP/RngubaP8Zrngd2kNq64\nPrhZQx1cJUEE113pqLF6z0SNpgN1r2aCz4SNGdiHKTgQCg0DEAlnlEdCvpCT\nqLSn60D1wXKsA6Jcs0Jl3nwZOfR+el+zLtnGKpivnBJ3DAnKb6Oc7eeqjRn4\niyMwgZCUERQOixMDYSz+1KWCqitUpdnl7lXcNCElURawConuOMQfp+f9usRZ\nAN3iTPlA+DC+r1HqOiCjvumK/jfy6sR1dja2ifRcxbzDSVCGYOGjZTxc9p9t\nKqeYKVYZDwId5In+e/8nwsJaoie3HZHnc0Ay5iEGfaverCoZyMI9SBWvIQlR\nxZXP4AJsyfhWl/+ZN9Pmk6GsTLzMzTYNQlkw4PczhDm6rDjjMBp8QlIWZ2xc\n4JJYuOTP5MVyVeY+5uqQcghTvu1lVSRWi1JOnXcOy2GeUDTbHZMZ9rnuTpnt\nENv1o3UtpfpNj4fUlhuVINu9vdm5ESN8nCqUDc75aZbdSMK/PwkKJXDT/3s2\nup2inBmjrphydZWTlO2vuQaVVVzXrZkxkuOC038nQh22j0cd3eLyfREJiQ4J\nxpKcnruair9BTwkG6Qxri/xCbjg+/Sk9qHS7h1pe++BuT9OrILgbVmz0eIet\nRkzpuavZG2vUTjh8KUWi2/5Djyk+0uQnfgmJHx1pXS3326uwtzb8L58GZRbI\n7LOe\r\n=tHnu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.b5227247d.0","@material/rtl":"11.0.0-canary.b5227247d.0","@material/base":"11.0.0-canary.b5227247d.0","@material/list":"11.0.0-canary.b5227247d.0","@material/shape":"11.0.0-canary.b5227247d.0","@material/theme":"11.0.0-canary.b5227247d.0","@material/ripple":"11.0.0-canary.b5227247d.0","@material/animation":"11.0.0-canary.b5227247d.0","@material/elevation":"11.0.0-canary.b5227247d.0","@material/typography":"11.0.0-canary.b5227247d.0","@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.b5227247d.0_1612547031660_0.2550375473935458","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/drawer","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.95322b11e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9519b5d9313dcfa79d5186ae9c43e070cb02d95f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.95322b11e.0.tgz","fileCount":48,"integrity":"sha512-d8gvqxGUFcNLV4w+wwSsxpdXwctYh171LJYaG5TtpmmHvxYFdLHSGozh1qEf4vxfMVQgr7QBsT86mOMqe4AtLw==","signatures":[{"sig":"MEUCIF5QruHMiRT4u1ECH1rwwnXwjVDBcWM+Os4El6VuVwJ3AiEAiHq4YSXceQn7l60yZzkashSVnctDhIxBSgtXSWZQcno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdW8CRA9TVsSAnZWagAAP3kP/3oZMctiOCZtSvanuVtm\nqsA9XQazJ8luqwijb78Hzr6krAyTS2zUao+IEYlpX4RvAHL98TJV1bWbGgFm\nQ+Ygn5894AMnfXvdzK2+x3AR104wysi0Cx3fAspB8LMX7wBv2ONTrfZMDOI+\nxkPFpzpGp1JAUtwj56OB8bRQylLD3kZGWREgkQSRifL0mMvGlMWFv1TWrdi4\nuYP6z9/6n+cZUObQvuy9WkLNPxrUCdaw6GHkyweTTaaYGX68oGBqTwP8XXuv\n39Jf9JWWLmkKJM9i0nU56cieZFL2i5ysimLqGrB5pCqXhXTSz/gvKBewxyMY\nGIc2mjaAEm6ASyXIB1mITi9HS+JIHsezrljNANIHQYadVsN3fWjXO257vhD2\n5nUpaDqS6BFLvlcih1D8kf2YfV+KOdx/se4Ly/IoZI1m6LtTmg/Mkkx7BGyg\nuXQoDk3TwKuFeqfejMiS6wNy4Yuezy5aNOK9se/dL8euZZe4MxB/wqRtql5l\ngf5dCZv7cIRGu3jzC3dnj5BdRivhxNiKy5Ub7qZksbQ3eC+9ZN8SIO36dKnx\nZQaysxbm+yJq/wUuM7b+bd/OPMT5BfbN7UKGIixRxjktjc3Q2YS7mAc7dJGu\nKenPy9Ybd1Dyiv1ec2BG6P72BDkm13VtFXXGYFdrUpmbLioaZBsU6KsLOQho\n7A2v\r\n=mUl4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.95322b11e.0","@material/rtl":"11.0.0-canary.95322b11e.0","@material/base":"11.0.0-canary.95322b11e.0","@material/list":"11.0.0-canary.95322b11e.0","@material/shape":"11.0.0-canary.95322b11e.0","@material/theme":"11.0.0-canary.95322b11e.0","@material/ripple":"11.0.0-canary.95322b11e.0","@material/animation":"11.0.0-canary.95322b11e.0","@material/elevation":"11.0.0-canary.95322b11e.0","@material/typography":"11.0.0-canary.95322b11e.0","@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.95322b11e.0_1612567995465_0.7937020458373891","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/drawer","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7af9a635473496056f603f4b74366774c542a4c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.1f318ff0f.0.tgz","fileCount":48,"integrity":"sha512-zO1qnivzumOwEdXde2EsVu3GhDhsfpZf8SBHZrArO0g1OwYxgbYIkvR3EyvS2M5Fkqr9Q1tdLX9/wUqcxcZEyQ==","signatures":[{"sig":"MEQCICzLx9BpMGdiYX5NkFgY2Q6vcJkVQiIj0IDbd6G647UgAiAtMeGCOE4lQSdP8ZuLCpHS3UoUSRJBFAj+Wc9zCjtH6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd2TCRA9TVsSAnZWagAAlpkP/1WcQGcU73wfCveIL9eN\nbTD+ejtPhTQaNUCgC7hj0MBnjqvuIqywcSdN2/rRvRNfPeCgxmezw+H4Th11\nZg++5/PHLqJzTNbaN19lG/hT3KiquAvadf85dbS0IzQ5j6PfIKMwLiUUDMTn\npJiVeJxGvFovJKZC1h7FBdmE8ZznpFPSK9Z8yrKyLupT/eudEjTTnG8LA7FY\nD7ns8Kp4hn8O6UuXQS7jwDCFv+PNIXW6WeqA0eYNi0osoXtHdn7VeD0Lzms2\n9Toynz0ar1LWe7dFlhIbGTatNmMvpKqQmw0V/pCSyIhDwLH/zv4KD+zRmAln\n9YBnSa9VyQWc9yauJDOy0j2b4Y4/dOMkzl0Lsw9ExxivHp7GW+vm16YXnVuq\n3NQ3g5+MMyP7s4VFlM0DT6RWGsEh9o6ZAzzRAozrqwDkdjwtYm7Ocyo4ttva\nCh/wRqX8gYv3dMLjtxAc/HMlff2ILc0d2e0nZPJy9ncv3wAs6LGz2Q6XU2dd\n21/+7moRaCplTsWm3DE1sCuPA6ZxMnEZdr7tg6E9A5pql0ctUHEu018WLkAi\nK6B8TO6dd5bdiZeajr498EfoJ/fc4rUwbbxoWza2ppV7touedRWji4eseA7Q\nUE9nDKkRoGzGBtCzRRVWac1vaIAnSWd0eCDJX/1xQWl9n0G0/B4Kqd3AC8up\nOf9l\r\n=wryj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.1f318ff0f.0","@material/rtl":"11.0.0-canary.1f318ff0f.0","@material/base":"11.0.0-canary.1f318ff0f.0","@material/list":"11.0.0-canary.1f318ff0f.0","@material/shape":"11.0.0-canary.1f318ff0f.0","@material/theme":"11.0.0-canary.1f318ff0f.0","@material/ripple":"11.0.0-canary.1f318ff0f.0","@material/animation":"11.0.0-canary.1f318ff0f.0","@material/elevation":"11.0.0-canary.1f318ff0f.0","@material/typography":"11.0.0-canary.1f318ff0f.0","@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.1f318ff0f.0_1612570003338_0.6556900503160845","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/drawer","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fadf187216f93a5c28f03b770b58c1d022fc4449","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":48,"integrity":"sha512-rKSGg7pa+yEv8q1Td/+k25xwS3qvTr7IPoJLP33/owLOmGgjbaORThi1wbNhg4DADelgDdcErnisZ3v38WcZFA==","signatures":[{"sig":"MEUCIDGVoGkaID0MDRzwSrsKjO7xpd1vQYGaDCNvwrrUhFaKAiEAlmDoxty2B68e7mmFVdDe5t3n1TdNzt0UDB3CRTiGK0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVM3CRA9TVsSAnZWagAA+6UP/1wVo/MBt+SUQ27oJW7L\nctDYIxC8aztIH1BwP53gNWGxlRb/8R1ZO5X77nFP/+xSW9gn0yAxpIdXSKMj\nlldM+eLGLmRBCNLwSIJfeQiIvUSU2Ly6G2MZTCvF2lt1pxPoiBUaj91aQdIT\nRogtHOclTsPZNdGDxVpjU+DAnb1rbRlQD/SutF1jab5Qd/Mi/Tq9JNxaBc8D\nvBqNm9yEcd5FpfO8euNfoFJHV/Gwr7Zh5SCy3ZcbkgrWTOI6nRou5z7lpJo+\n4aXtHMI9CU9z9p34BOEDgHiFJniK7rYt11LyxzAd6gNf3547y3e0IJBuvAaB\n8uaCT1d77/T5AAt5oWFEx0zG3olu8hCeFUQDrqTPJqnrKyHzWbZAPGvnSEWE\njQmTLhNrazwD2pdKMt+/i2fDl/UDIOp/nibGrlQgii/0YQ5IqV8wUb2rB8cu\nKjYU+98dynEXjEQvp+g6aCFbF+ZczcThufZdsgFCiFcSQcFGUQS0blz0U+7M\n0X9J/pznguSzEFbaOrYLlo8Vth0oy7wX9vCYeJS/mERq227JwtLXBH+6hk3H\n/Pdx1tq/G52mZmceVKXrIV9sXAbA+6W8HpnNwNOpI9inpTbgekFkY9tvuyFJ\nBRKocuJ89r9ZJSmLWm/vzaZLXE5d1OEQsTxWxrB81vq/e1xGxaRSFyUse1kS\n144L\r\n=fPEy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.ab12cf7a3.0","@material/rtl":"11.0.0-canary.ab12cf7a3.0","@material/base":"11.0.0-canary.ab12cf7a3.0","@material/list":"11.0.0-canary.ab12cf7a3.0","@material/shape":"11.0.0-canary.ab12cf7a3.0","@material/theme":"11.0.0-canary.ab12cf7a3.0","@material/ripple":"11.0.0-canary.ab12cf7a3.0","@material/animation":"11.0.0-canary.ab12cf7a3.0","@material/elevation":"11.0.0-canary.ab12cf7a3.0","@material/typography":"11.0.0-canary.ab12cf7a3.0","@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.ab12cf7a3.0_1612796727299_0.4335519187194816","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/drawer","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e374f39f10475b13c896d17d33df49fabb7c2cf7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.98db2c5ec.0.tgz","fileCount":48,"integrity":"sha512-vZ50nRiiisif642M3aqx8ZQ1ox08yMpPcAuVL+rKmPl3Nk3aKDX11Yq5mEha9+iQlldxZEi6n8yIX1LK6ymQLw==","signatures":[{"sig":"MEYCIQDD6gXnQLH0uQf+LQralHH5jBFWzbXXy0jX6o1d+8KLNAIhAKfVj1t3kC5b8NPMRXvzjxFDTapOnzGwk25KmvBDl+PI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVp5CRA9TVsSAnZWagAAgPoP/RC7YNL2pIcD2+1QmAOL\nMp11rfmlCwojzJbyOpBCl3zjF2M+4eIKLHNBakXm8fvCE6vY+sH88Md6PC8D\nN9h5qlEKyUlpN1iRxTHXs9Oc/zHn5mkr+mbAHG2LcjCvfypUfSd5YKnNXM82\nyDK7KCCtuCT+QzKfKdcXowN4sb/oUpGW9pedI/7Q9fIUEbGTkyekWMxlWEPq\nyQj+lDJ0gCMr3vmEHHu0fVxaoeJYvJh/1+/RiW7uPUHJQtV0eksC/Tlsj5iw\nt1UhuOnoOQL2p+uc37JqwcSahAb7ziDHxRPbscO8jPxzOCc3TmLG2YKviH4N\n8ua3QkXtXmFVmRnS7wqVFm6GSNQ1W4lOxRfQA2fBcgX6ZXGMuSmt5qFwQ9Pm\n4AZVZ8iHTK6BBBkOyPGQj6Izo+7xUvqJC+TtPsxVJ6EoZ16c/a0W+Rpo5CrP\ngzLEGysFvr9uswvuHEz9GLMGJQOtXg89wOeBcR2NIwqwM2F9nJUjXPqobuRC\n6akDxTeoJRmdgfzdPkfzEMwDbFVQsJisp3NlKG1bUXJLZj5HC0B7p4Gxhqyl\nKgsswzv02L5Tb+bjwCQFMaJ1TNJOGQdWBMnw4aTMfX/vZNHWWzqFYk5exXc5\nFgyuUeyloM5t7uOLJhgB4t6nS7ru+ORb4xLhiJzxE3tSEIs44UCygZewVpna\nZzor\r\n=fYly\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.98db2c5ec.0","@material/rtl":"11.0.0-canary.98db2c5ec.0","@material/base":"11.0.0-canary.98db2c5ec.0","@material/list":"11.0.0-canary.98db2c5ec.0","@material/shape":"11.0.0-canary.98db2c5ec.0","@material/theme":"11.0.0-canary.98db2c5ec.0","@material/ripple":"11.0.0-canary.98db2c5ec.0","@material/animation":"11.0.0-canary.98db2c5ec.0","@material/elevation":"11.0.0-canary.98db2c5ec.0","@material/typography":"11.0.0-canary.98db2c5ec.0","@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.98db2c5ec.0_1612798585325_0.4052591515611901","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/drawer","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd198726ec372f4664c165630a48cd28f5bde5da","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":48,"integrity":"sha512-UWLEAQMgf3pbrjjsoAwcIn/5xiluzvXpKd5WF3oEXkCe3irL4hJV4i2pBRRowK8R2qWw/UtGG+4nukGl4LoqXg==","signatures":[{"sig":"MEUCIBmD+CCiLKvYeo/K0u5V5Y7uKshknF3ei4WV0U3FJVFcAiEAjGiMY3yCcnMKZ/uQb3aGpIs3yz49869n2TDV5DOD9Fo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXKMCRA9TVsSAnZWagAANbsP/RZLWrH8ouf9psnroKiu\nlZj15gfTrRw/+XY5yhmLTt4GFnPoQdN35ex4BjRBAgHfeP/Gib3kf2TiDguI\n8EtihSa05simwLHCuRq1Rb4iuzHWJvHDY4IKyrnhCsN2q0EZPdxCddR522Hr\nx9hRYvllPXRx4vqomP149by0CF34aXafoIGDyOBzgg7Cgm35vD6jqXSZlwfh\neco0cpOYkamSlPrRkDw+ts6SCWHST+OmucvVdAWRSM160NfHW3E3Z4NNZXRg\n4ugwzx542dhWIGTHUhtP9ISw1jkG3l9WgJPxVkvXGKCXWEvYaAXQF3YFlMnz\npzIku6N6NjFN7goziqUisgzpvqLQlmAmtPm6qr1tWM+bPXUluliaVgmzs/Ik\ngPtkBYOHP5FhH4/KHy24a3CDuyjeUlGmJaO0yTYHfU+BFf5qEAI/nz85yfex\ngnKNEqWHuHho4+HU3bTU0H+mkOWSKEsyWiy4YTCfbc78KrHRHk4QyIF9p+3S\nzPg44nF2fle4PIkcX554VZfs+jPq/rATT1M2KU0upMTVA3h1ApAIoyvY0Tuz\nkb5IG3zokpg4j0+0Kt5NyY5Ihrng6E1iqxGtiL8XX3avmjZtvOT6NKcsvFE4\n3GpkyUQZz4nFqIARp7/YBJLWU0qjg/jJEjLGwaI6XeYLFyHTxoJG0bfidrmU\nOz+G\r\n=4KsS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.1f86b9f6d.0","@material/rtl":"11.0.0-canary.1f86b9f6d.0","@material/base":"11.0.0-canary.1f86b9f6d.0","@material/list":"11.0.0-canary.1f86b9f6d.0","@material/shape":"11.0.0-canary.1f86b9f6d.0","@material/theme":"11.0.0-canary.1f86b9f6d.0","@material/ripple":"11.0.0-canary.1f86b9f6d.0","@material/animation":"11.0.0-canary.1f86b9f6d.0","@material/elevation":"11.0.0-canary.1f86b9f6d.0","@material/typography":"11.0.0-canary.1f86b9f6d.0","@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.1f86b9f6d.0_1612804747557_0.3195309584773851","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/drawer","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aae1bb02c791116cfc1b449e78da7c7437755397","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":48,"integrity":"sha512-kXLwWIA0qDR77XuWBRtsC+AobIREgT6p967hy6mTZFoB86QZ3BC/AuUOnoAHr4yhIM4nmMqWeQQ+Y7E1+oMtPA==","signatures":[{"sig":"MEYCIQDFUVc84ykiTPoPfp7gU15rzcPaNVNKAMdRQxqWPHMCTgIhANDj7qLLETCb7c9MZnd/IbSEApWmfkprtYnimcP0xRN0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXyrCRA9TVsSAnZWagAAn/QP/1A7mpZ2lkNqzAAMZKod\nRAOosYRXOyukT6/6fgknequdYxZGnbDt3dUHpmm4ta1gw1JaMjIHNYxabHIP\n1c3HYFyaMzYBQwLZXJXGS1dcgVjtqmHupWRorfS2GBHuXVXow6/Gi4WluAbE\nk+dZLLMj8vVA3arov/gvrVsGrMuhbRIPUYv0lnTuvsl+ekG442pDEFue/S2j\nGpWdZCk/nVN/MC/pYPQz/69ql0vbwXG84mcsNjoslfJcB5BD21Mw3zpheHsi\necQSHhdraFsHI0EwYh4XKg/ovDYYj5HglfhMNMMdqvK/KCHFoEh+zpgGoaFa\nzpQH3TK8J6ptn9Pqa0EKuSydMnZ2IorI20GTJq89bctZ+EQ823aMfA/XrNBF\nevK4QsfELfP/RzZIm6WeDzOyTni+19VtU1dLE9BbIhvM/O0bHRzLFQSiqsBA\nXE+9Ug1JbMyd7ZO8224PY0lSmVtYHoFWG2vQQ4lqm1JzmGWkQCA8Ebu2gAEL\nycnXAe/H8PoeI4gOkLPYbonVIpzjvSt05ufwLvwhTcHqHTfTfZt+1vDRDRPV\nrBHFoEA0d9vZPcch6AlOS7717nZjJ3HYKvoEGwcIBgX+e+Z3hTjWjSqQoafE\nzKfsJN4wGDdTYJdHzrito9vwBh6w2ZE0I9eDBOMVODjYbpytdP+EIGvJyaG4\n6ZTA\r\n=akdJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.aac8f5d9a.0","@material/rtl":"11.0.0-canary.aac8f5d9a.0","@material/base":"11.0.0-canary.aac8f5d9a.0","@material/list":"11.0.0-canary.aac8f5d9a.0","@material/shape":"11.0.0-canary.aac8f5d9a.0","@material/theme":"11.0.0-canary.aac8f5d9a.0","@material/ripple":"11.0.0-canary.aac8f5d9a.0","@material/animation":"11.0.0-canary.aac8f5d9a.0","@material/elevation":"11.0.0-canary.aac8f5d9a.0","@material/typography":"11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.aac8f5d9a.0_1612807339175_0.5734456145973732","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/drawer","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dee6f1b2074f791dfecb34d61224198576edd095","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.750e18fc7.0.tgz","fileCount":48,"integrity":"sha512-0rwpkt1rB3uVG02sZZHhFC5Zs0EX26eC8mDQqJcru60OvhsSraWzIBtJYPxZgKORJFurkPOVoLqbIFeRC1UicQ==","signatures":[{"sig":"MEYCIQCQCVKQJ8ZCAJbZM1POrwyjrxl9pnOTaAN/xBV3RoLZeQIhAMjXWm1369Rth8EoYAkvy6DHT3AYNW7fYu54Wg/CiRk1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIbBiCRA9TVsSAnZWagAARzAP/0L1Tl4sAqzoXNIqbqv5\nwOtyazNynBziNk6QQSkx7PVSUYtA/jTomU25JqA9PRyq5N11Zg6dUHAqyCX0\n3SyQRqMAHWUNG4z0n8mdcjZO8BXgnylBFWg4852vk6KCjxIsjS6L/Yd7gc5L\nv7yPF9yF5TlnT0unl5lMNtmAUnahWrOOavlotbDBzc8EhgLSXmfVPGFMd3F8\nwosWIBnSYQpQ9eU/tXd4ZTD/IbRBBKRlGDKFIa2a6jr9VQiqeDQztV/Q3oQr\nXChpON+Hq37TbSqgEM4lLpoIqsEUTLo3n7MYUXCK2RdS4EwPgOcuvifzRUOF\nWeTH8Pf50fIipY7If9DDNNgRiSWaW7RxOrVBrqOd94fGJaNtLS6n6yzAZyoY\nWcO5aLSvfbU0+sZ6/yyfnCczXAl5071jtnQYb7XL+m21Nuef78XF4KGJ0dx2\nYqHp1VEEAOcP3mWkN2KJjXbAQ4d6F25LqlTU5Fxy+VV6p+1lT8XYKsrEZaMJ\nIu5mHa2fQpuehvE6Ms8mU2CUiMTyP2CucBL/ybNWflMdyx+X34c2mILI5GVy\nk8LEs6bL0VpRV+v5+yA+M4qqD643R4ZIiVAUzuyyRXeoEUTgE4MDGGAxXgKH\nOoWIIOrK7fw+QfqALJ0gJoyQPShFypdsJ4rtQGNSOceTqsBQx0qee4AeMWS8\n+vvr\r\n=JYFh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.750e18fc7.0","@material/rtl":"11.0.0-canary.750e18fc7.0","@material/base":"11.0.0-canary.750e18fc7.0","@material/list":"11.0.0-canary.750e18fc7.0","@material/shape":"11.0.0-canary.750e18fc7.0","@material/theme":"11.0.0-canary.750e18fc7.0","@material/ripple":"11.0.0-canary.750e18fc7.0","@material/animation":"11.0.0-canary.750e18fc7.0","@material/elevation":"11.0.0-canary.750e18fc7.0","@material/typography":"11.0.0-canary.750e18fc7.0","@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.750e18fc7.0_1612820577470_0.6844530876698869","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/drawer","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e282bc1523e9ccffa911439f949202d54c92d1b8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.b62b1266d.0.tgz","fileCount":48,"integrity":"sha512-mXhupfrC0yr8VYVRAfpTysOtgxT7hLMdZa/9alWgzSeKJMlz4Ua9/1mPqv4MToE8omn2L051bLiJ57lyBW9CCA==","signatures":[{"sig":"MEUCIHs2HgzTXQ6WYil6O5HiJ75rItxCiJagdAIyzgVy14ERAiEAui+Q/mXC1gpU5mAjj13G4THBmjyn804QS3kBT6yeQfE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwSTCRA9TVsSAnZWagAAIuUP/0Y/V162e+7h60un42yB\nWYuO3DMrkxoUbK5Jt6oDCUFKAD5k6yjNBqKJKXd6zsCU3ddgAiTbn3d1aNCW\nly4P/jNH8EFWIy3V9xbEJkb7y1tJL50z19ZI0RC06Ha+JyEKVt0MWdUcwhwN\nu6x10YSpaGGhRYDzd9Ay5YFkgJnv9RxB8lD+0uZ3+91GPqX5OVF8Svrzx7yg\n+39GDngDcO2Y26hSEYfbTCb3h97yPRPWxwDX+dR59q5MgneBpGrVZci1sUF+\nxKBsv2mYlOBSY27cjH16nfOaJ49o6J7lYNgyZC8ExwBMoTLxACKCq0qKnfGI\n36pW/aTUcYy+46QggBuhEqtzgQdCEfh0ZKy+5T+cR1rJq6KjzrLaE2wOrRzv\nV1Y/nkfnBncJsQSNtWMwbFiTCFmCxGmfn9GFwVN9dxsWyDWX2F47s9XUBJVQ\nvefy3My9Txtk51HQ4pxgPgMxThRfo3RGOD42fW0kFkR0wSvfz/+ncR3oM/Iu\ne8BpT9lJ+70xEgW5sSyIW3sVaJoCZ7R0fj0ize5tceJob9In3r9tWNxLudym\nI28/AmOSwRgjtVo1NmZJuE0AmpruqY5ryqNex3YpbtTEUVh//V9RByg4ovm7\nhZqIudjYgc84k8T6vofj/RGj6BVprYDD42qC262eqS4drPNtKg4ythfW3ys5\numWE\r\n=BNIM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.b62b1266d.0","@material/rtl":"11.0.0-canary.b62b1266d.0","@material/base":"11.0.0-canary.b62b1266d.0","@material/list":"11.0.0-canary.b62b1266d.0","@material/shape":"11.0.0-canary.b62b1266d.0","@material/theme":"11.0.0-canary.b62b1266d.0","@material/ripple":"11.0.0-canary.b62b1266d.0","@material/animation":"11.0.0-canary.b62b1266d.0","@material/elevation":"11.0.0-canary.b62b1266d.0","@material/typography":"11.0.0-canary.b62b1266d.0","@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.b62b1266d.0_1612907667289_0.005619589575515116","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/drawer","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db4055d72d313832904008819c46ee3bb473aaf7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.a6b3101fb.0.tgz","fileCount":48,"integrity":"sha512-PaISuAX9QFHWcazd4hw3QlxQHqokbIcFMeBvEoUfMsf/iAPEc878WgAjfFpc937WSm4+R76MlAzzEFBktMcCDA==","signatures":[{"sig":"MEYCIQCs6yNN2zwaxlZIV/DTsnwj3Ifgz6u3cqgFzsGhRpCp0wIhAOSV+bVXRJgxJJGic4G7myfT/85uAgZlaAiw58SatoWX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbtRCRA9TVsSAnZWagAAB64P/3Ogw85+5g4zCWCmmoEZ\n0Qm2JP8Pdkye0yFQ8ev2ND2xCe3aqUUHrPuE6ggqd/06viJpi9ACDThQPl+g\nAYlCZ7GTWIGveniNMmHs2sQTUr+HiCModCmc0AMWMeD7jKPFJGleh/ebbeK2\nYtTfLcwKjEHFYlUm2QAzIa6h9HEJOep8/eXBccEf8EszQlTxEw9bEL2UBE+Q\nKI987O6g+R1LL4UFHDFg5eTJUS/Cdx6fHADqUMxFp1476gF6fuj5OWcxp8V0\n0CJ7mOuD1rcB4YM1DlS3YmJusncI6foFOfKj2UYLCj8Bq83OP6giDDm0mSCJ\nwjUhpFCsujyeIuCxmrZICT4Kbwf9owsb1ESK3vCX5VREBesMjaVqCVYihve4\nQZT2fyWVrrLMjODn29gXNv2nV5XLuS1lb65RNHdfzyUuICkoyibYre2BEzb6\n0lfNndWhKN8ySEGeottl6OiTKud9PWSkOvRSW2t2QRtlQT4QFB8gykuoO/R7\nZw372hU3m9WRxfXO9ZW6pG6UVtek9DH+wcmJO9qFcG3S9yNnudZGAjfZi0m9\nx3Qcd/RjEak/JnEC+uvmxJiItco5oFHwdehnEVa+bcJskiGF8pqS7PEdTg88\nVyk12nlf4y3SrJOlm/Fm9HhYUotz9NUfStkYZ+wXyZsfKlxPuzvolqavTx8w\nn739\r\n=6oq3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.a6b3101fb.0","@material/rtl":"11.0.0-canary.a6b3101fb.0","@material/base":"11.0.0-canary.a6b3101fb.0","@material/list":"11.0.0-canary.a6b3101fb.0","@material/shape":"11.0.0-canary.a6b3101fb.0","@material/theme":"11.0.0-canary.a6b3101fb.0","@material/ripple":"11.0.0-canary.a6b3101fb.0","@material/animation":"11.0.0-canary.a6b3101fb.0","@material/elevation":"11.0.0-canary.a6b3101fb.0","@material/typography":"11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.a6b3101fb.0_1613085521353_0.969371056174247","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/drawer","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.ed88df700.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbfbce2985800b471c95054f0d8feb3ae39c8644","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.ed88df700.0.tgz","fileCount":48,"integrity":"sha512-9V8NnzC7JZD1NGNozFJJiZsdeRY2DBrAJt5cvkENaytw7WQ5AidmXGNVUvnr87exo8Efb+zL6kH7Hrn7w9ShCw==","signatures":[{"sig":"MEUCIACpWRae+nFSL8D54PdJVsOfzbk88onaSWGE7NWjRbpaAiEA/yY1gB94KwLKszTwQuNG389o0srrCQU6UA3YlOGfVBk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJccCCRA9TVsSAnZWagAAVEYP/RIOhiWOf2D914CcjuZW\ncgZ6KBOfzudX2snbEGAxA6lC4+8Bruo0eZXp/a+3fCxy0W/K1JIEd/j5Kzza\nFfI33j+nF0git95QyJdCt9F+njvgW6rGfaVrbXuZkv7vO8FA4l5DQf79/SyC\nI8TwwsOPydR2zy+u7RvE/HxQ8ocPY+7j4QvlFdGZkYW+Y9yd4OH1OOxFSyVO\nsrc8qe8FNyokIMlEzAJeho4EAm3dMhPr2Ue+eLvA0UqtNku7KoNLsy+sk8dE\nNBHVHKj/euFZGvvAuYQ2J4w+ccOQc8cYjh3ey+VdPHaTNAv9K72aotmKkZIF\na1NF5sJzOvV5hmCfgXI1LvU9VlCUIu5f9Xf6AsHsExq03TogY2DYFSA8eX79\n7jeqWVjzYj3+wDq3YlwHNLk15jQurqTIFTfH43i8EFjXzWLRBEQx7QpDAhnj\nNjYmMr+HxCTtNww1EiqWbGFrrbsmN2Xatc5JaLbHZx85PTSPjaq8DAX4+fwZ\n9PbavF5GDaZYCAzKYt2v9dbnJS4PxM7ZoZL1bAvFvSGHBpI3lqZ0Mo9p7VvB\noUld2KZwvLhMBQBuZB2hqTsq28v9YsAF9xxpvcqsaMbusnI9PKDDDRLqYtmS\n9AXoprmxgX+PzOIh28Y18f5wMEFCxijiZr4LRVj2lDgLpMQA8U7HXx+A81Jr\nFKsJ\r\n=a0q5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.ed88df700.0","@material/rtl":"11.0.0-canary.ed88df700.0","@material/base":"11.0.0-canary.ed88df700.0","@material/list":"11.0.0-canary.ed88df700.0","@material/shape":"11.0.0-canary.ed88df700.0","@material/theme":"11.0.0-canary.ed88df700.0","@material/ripple":"11.0.0-canary.ed88df700.0","@material/animation":"11.0.0-canary.ed88df700.0","@material/elevation":"11.0.0-canary.ed88df700.0","@material/typography":"11.0.0-canary.ed88df700.0","@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.ed88df700.0_1613088514375_0.35251890399370467","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/drawer","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57c63527aacf0c5509167d9a78b1700af04c9d7d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.d30efe6b4.0.tgz","fileCount":48,"integrity":"sha512-27ksq101vgbweroJ/cDvG7NrjEGMWTkkyaNPDCQnPT8YHRuaLlIFgoKq+dWAqbB7uxGcI1NcOCLdPOkYWUNdOw==","signatures":[{"sig":"MEUCIAMewDsLGe9658w6a5SsHmvsPExCqWNJ087Ia/TzlqLRAiEA4Rbo1uXMFEpFjIjevcFQPn2s+lc3GihtiXYxNgOaOUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJetQCRA9TVsSAnZWagAA60gP/jh+jsqh8TYKatZApXry\n+7GyDZRHf+Otb2cw5+C+TAltr5JEetjulDzKAzyy/xXFvp8qoDs8oR1hAQVr\n/QrVjFSN22Pk4V/NiZcEus9363IFXt3F06nTCXq14x4BIdnfzl4VDuHH5Pmo\n4JZM5f2P6Zudio2CJQpM2kUxOhWVDvNySo3YO5XIhgjAy8a1l3ZhXSfPlMXQ\nw4mTP9+K/2YeOyImdFz62JfLdn84GduS1xH5GosR52QWUy22SKe7GEibpx6z\nNpn10bi7q+FB5WBE0sMRmy+hTg9185kDryuLYjwsQ57ysunJ2lB0QjrUX6HJ\n6pQnaSlMJ5haxreD8x2TQmS0KzpSqcVwQRabNricZfETuaipL+PGwx+rtx62\ne4YJi5hu5/9Xd6sbpiowabJ7zziXRes3drlUlNF59CcWO6ZeQQ+QUHTVCipf\nDp8IidYWesvDNVSux8niBs8QmHMQmuvcgYjmMgnG9rLeQeLWEZs9vsgjVvG3\nIcqdCU9ZPMQR6b6Xs8hJywbN4+/G9qdksywTYtXeq/RCM5ffBDTHLpBXeUU9\nvO0pB8gZ3obkU8V3UXK4e17gFLej1XUCnyb9A1b1gR/hWB589Pbtamt85M09\nnEIHJJ7da9bOwkVBpaG2PqRYN4rZTAMLN8z0PcP0Cizxkh9GYZS7rObQMXb8\nSuD+\r\n=Znfz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d30efe6b4.0","@material/rtl":"11.0.0-canary.d30efe6b4.0","@material/base":"11.0.0-canary.d30efe6b4.0","@material/list":"11.0.0-canary.d30efe6b4.0","@material/shape":"11.0.0-canary.d30efe6b4.0","@material/theme":"11.0.0-canary.d30efe6b4.0","@material/ripple":"11.0.0-canary.d30efe6b4.0","@material/animation":"11.0.0-canary.d30efe6b4.0","@material/elevation":"11.0.0-canary.d30efe6b4.0","@material/typography":"11.0.0-canary.d30efe6b4.0","@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.d30efe6b4.0_1613097807396_0.9903148832734965","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/drawer","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4760536fe2dc43c5d96e219b2e03c8b07e8774c2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.0393bdc4b.0.tgz","fileCount":48,"integrity":"sha512-3IAMUN+8OVk670B9XQ0wjwenHgwkleuN0YsJGFBg+tSaQygVT1aDGxrKeLD5TLt8PbNlA2sp6tkQhTcDYEW0Ng==","signatures":[{"sig":"MEYCIQCTSaRY8lNnSemmcI4kjOaTBy+YqVQY5GgGB4OEOBbl7wIhAPBuVq3i0PLflmCw0h2aWzE1i3THso5QteNp4UEQzW72","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgThCRA9TVsSAnZWagAAIQcP/0sr9sZ+Y5z0kByTYUet\nvE6/mUwqOD0FGbm2MB/+Rnrve+M2J39AHK/Y+vkKeJbrZbZcMfT4yhblnAZ8\ng4Tp6JMlX4eOzS5P2rhPu3LhBV+IZ8r6JifFJKAEggTLQvcEzhZMY/+6Ft1P\nYMLMSt6ulzLCtXgawdDFLShaiKnQY1bRyGFCTBF4DAiMiuNXQrF5gKamw6rd\nBqDR6d4J88SCyCWRPKi2iqUNkIQlzoy9arr9LdrHsyW/ao5+ZoBt4KoaoDvQ\ngO+Nl5S8Z4X4b5uNYHCd7EDyTsa0BQZmA6Fka43i6yvUdxxZYqmlNK9ASYkb\ni6ZELpb60SDYRI2f4F9yc6AlurQF6QvZGRmin+M5ABsM7zv0UwVUYfdHVXbj\n625tkai+7T+Eo6X9sEVsuHjuoabtPCv9HvA0ErZFdkAQGxn+IdHKAYGIddQl\n0mvSPRt+FlxFFu5O6wS3vbSMR8VomSgjyyi+0HWsveahpe4v+T5FCl5MS7V0\nwk91vEy1km5NpmJ4ajg4aNFJTLNQIq4oQu9jewRzC0omjyxhuOxrIeh5gWsE\nq8V/w2RFN61E1KaMImEwH3OXcnQVCknJlDwmmdqA+QUQydwHr1faHMMSYAcC\nm0jvBiEcF0PfHrABvNlaGKj3v0o753jiZpqhvO/YfVg+gZ+DrsEl5hPIqin6\nhcPf\r\n=NBJk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0393bdc4b.0","@material/rtl":"11.0.0-canary.0393bdc4b.0","@material/base":"11.0.0-canary.0393bdc4b.0","@material/list":"11.0.0-canary.0393bdc4b.0","@material/shape":"11.0.0-canary.0393bdc4b.0","@material/theme":"11.0.0-canary.0393bdc4b.0","@material/ripple":"11.0.0-canary.0393bdc4b.0","@material/animation":"11.0.0-canary.0393bdc4b.0","@material/elevation":"11.0.0-canary.0393bdc4b.0","@material/typography":"11.0.0-canary.0393bdc4b.0","@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.0393bdc4b.0_1613104352601_0.4736914634097542","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/drawer","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efe1f77662a0addc5865856e32c11cb9ec287c5e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.7cd26af4d.0.tgz","fileCount":48,"integrity":"sha512-zfTGHHDCP5bGLR1mOc7Huc+Kl4pZG1Y2RbzdQc3sr6icPc129hREDDUjsRsD9jz4zc8tTEkGCAFnc3WR/cumhg==","signatures":[{"sig":"MEQCICBhruJzXLH5FxHXZIKGiS4uB1o2T2Evt/8P/1d5mNiWAiAcnq+KocaALvrtFyfIEHYDeCDMQxH4IipYXlKVRx/xQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqZFCRA9TVsSAnZWagAA1hQQAIK7tMTAkb7Z2IEEpWwI\ncC18I46w5Vy2PP0JJ+hlcfhCOb+yC3ZHmDE+KiS+LFJL0zexSAoNV+ioI2Rr\n6AI9lq6lTkFv0Ac+f7GUrxmNTtt0WEi9FVPSSEzJwdVx+g6uHZfDTLP+J952\niS0WvcucRfRJkLQUVgeFZrsNB1URosp11dJUqCYu4zBGOx6pJyanfOq910ok\nKmBowFhbDhBQGtq9vRlLaYeeyTVHmpqToXTgUGKux6yeceolzrSPF4T16R8I\nRr40tqYkMuM9oKSyFfC70R8lfbBmrWBHmNSl9PKQWUoNODa2ChWo2VTJSwKc\niGf6N6zkcFukQjOcN5sL6fkjc32hmvD4DVgIs+0Z7FYf/JxdU5w0h8cpKK5v\n32GifCKAn2f9IYadzGfMch8gvsAAAoG7RjkRg+MtE/99mQAqVL4151ZSavfg\nRqVUMdyw8VOSfGEeFypCD8buPfnoGZImDw9muv/txo9IMAM/gSNZzvI+whsN\nqLauc7aUbfzfNI5HtK4GG3QLj9YGJAX2ocZ0N9cOkYUv+6HUX5wpcHEb2U0a\nEzc8NO3A8W/W0/Gc+nhi7ilQktA+sXkkSvFdqlngucVYpYMuzmASdZ8cRzKm\nsz6unrgcgEpuRGK83fWaMLLSto6UrKH2//jhBTFENUvcT4wolwVnKlN7dNy2\ncTIs\r\n=Oc5F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.7cd26af4d.0","@material/rtl":"11.0.0-canary.7cd26af4d.0","@material/base":"11.0.0-canary.7cd26af4d.0","@material/list":"11.0.0-canary.7cd26af4d.0","@material/shape":"11.0.0-canary.7cd26af4d.0","@material/theme":"11.0.0-canary.7cd26af4d.0","@material/ripple":"11.0.0-canary.7cd26af4d.0","@material/animation":"11.0.0-canary.7cd26af4d.0","@material/elevation":"11.0.0-canary.7cd26af4d.0","@material/typography":"11.0.0-canary.7cd26af4d.0","@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.7cd26af4d.0_1613145669189_0.0019685507769553467","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/drawer","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88a2427b5be6b19cc38f52b91a9c61592f0ea3ed","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.71fe9a067.0.tgz","fileCount":48,"integrity":"sha512-VC5dMwDJML65DIeU+skYJO5Mfyc5YWXB/BZM/9w4YnwahzNM5QMVk6tUPp6SrPNpts1hfGJ35+QVlnW3j65lpw==","signatures":[{"sig":"MEYCIQCGyRM90r4bCo1/rFOVEp8UqcI7nWj7HTjsIbpuuC+VoAIhAKRgS+69+cvOm5G8/ZnOORsB3FBFLrvwNk+qlFzykRcF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq2hCRA9TVsSAnZWagAAh9IP/2PZSoof04VXm87MCBjg\n3MVcYCGpjUWSr/2ZW+ZeH3j30WirAM/Zp7Li6LCzXKd7+Fy886SodYtWWYVy\nT7aoy7jNVxuHFnK9UAPW/yGgo+0+baWHFwifz9feX767OVgkoBUBqlfkhr0x\nlZLWhjkX9eGrTDhwziAnBKO5ZzbJyi3UUfB1nEFn5JB5ng8R/Akycf0SElyc\nV66pp8F8KBvAe/iV03w55mz2yDuYurdIeh6E++jyufhomDHcMTEPVgoplpRH\nc4FaVgAq2+pipKPnt/+MKyzWZPIDJaKSA1WDC/VgTGQBK+uCpGnKU8oBuWoK\ngFPlrzFuRDzbKVKY9UiAkTFmxXTsi9wFq5eTe3XteIJpsyfAsQwHe65zO9rJ\nhWEsQBra6z2S9oCRqcWtjFm+DWoiBVXKSOjlCTKXIJHnLpLjNcRquXMZaMnL\nwFONO21rupi40WV8Mtqmx+vTzXxdtXCnBA2LbYu1fkKXTz0oOUnfzvAwiK2h\n2JvaxObE7VpHGDpnCsfJO4EdjL+Uyhm4RB/h0M4Qg5lmn0pCajl+cxgjwCRz\nOmDUOpG34CZaR/acQjOxgFj61ETgCmoJ/NINS38xKigbpjAZlUJi7zNIL9s9\nKhSOfU+jmWO+wcuUahgG5DUyKIiVjIe/hQ7BX2LNNrEPYLditZ71xEy8EEng\ns0SI\r\n=yG4P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.71fe9a067.0","@material/rtl":"11.0.0-canary.71fe9a067.0","@material/base":"11.0.0-canary.71fe9a067.0","@material/list":"11.0.0-canary.71fe9a067.0","@material/shape":"11.0.0-canary.71fe9a067.0","@material/theme":"11.0.0-canary.71fe9a067.0","@material/ripple":"11.0.0-canary.71fe9a067.0","@material/animation":"11.0.0-canary.71fe9a067.0","@material/elevation":"11.0.0-canary.71fe9a067.0","@material/typography":"11.0.0-canary.71fe9a067.0","@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.71fe9a067.0_1613147553152_0.30722178569239555","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/drawer","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81cec5bb2944f0e04ce8190f48efceff36167f22","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.0fd56a86b.0.tgz","fileCount":48,"integrity":"sha512-0+NUgMjFwnJ+UzibvnYkwiuKa4VF9rhdBX6xq5QxdEd5PgfS8xQqP7gH2SahEhTXo6qVVCtszpv2kp3A4nYLZw==","signatures":[{"sig":"MEUCIQDWfV4xZzZGZP1j8HGbQpkl6oqsgI85lWl4T3a+lwFDqAIgZIvMTva08wF5bM2qrfEKUu+zWNn2ODKktrkbODh4lzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":926916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxmyCRA9TVsSAnZWagAACyQP/REJ8Nnrjg54qWgTAwIO\nNled8XrcvcCqEPRxAcX+zgq2+IsGnd+BTgD2VoyZRiI5Y8HLVDg3SGFLoLSv\nmn3eLCXZBQCexv8QwwHVVLGdtxz5Vvuj4uz8jbIUa3o2kR8wtfRJE/dOv+eu\nrPBINrraULA/yn0yhtBNOaKUISG6TTSNB4UeQKN4j8vvQiTZnLM4XqtctVhW\n6kIAGUmD/s2rBcMkrZQpJ6cYyYM602rpVHxlLQrzPMY0PhMbsG/tuc6Fe2IP\nSOgIgvFoW8lYIDUZ6okl3boTnFJpEe7GA0oGSPmeAiHhQZi0QqNwKeBsT4GX\noXxNId5ekFxyQ3CvRXeezLMuXc/CD0/LGf3nLpirO/X7k5AIAs3wWMn57caM\nH8tK2rMidVU6qD572/sTyYUa6ozJfzfb0CbuY+l7wTfGg8wTWwoCdfX4i8uJ\nRL3aVC5Appw1WzKh3lh81vXmVaMxy2NGMyhZQ7PKocxo7TOsjIdjrtWMEUZU\n2It1ud2yN5pCzFCevr4dojd2KRRcP7j33Xg339KqAclE5QmHJffxoSN+LjWU\ndBBVjUlRlIshSmBSTyZTGTXIKA9M2jFB/lz+/mgCJN8TGupQbM8hX8U5TVCt\nYm2myzu9CpFElokj7/zgoH+FZU3x+MQCwR51/vHTBRnS3SFPg/+ItjqM3+GL\nEF7y\r\n=ODDa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0fd56a86b.0","@material/rtl":"11.0.0-canary.0fd56a86b.0","@material/base":"11.0.0-canary.0fd56a86b.0","@material/list":"11.0.0-canary.0fd56a86b.0","@material/shape":"11.0.0-canary.0fd56a86b.0","@material/theme":"11.0.0-canary.0fd56a86b.0","@material/ripple":"11.0.0-canary.0fd56a86b.0","@material/animation":"11.0.0-canary.0fd56a86b.0","@material/elevation":"11.0.0-canary.0fd56a86b.0","@material/typography":"11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.0fd56a86b.0_1613175218103_0.41712802738086374","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/drawer","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70b8a065778881bb5a6c8fc7534cec3ebcebcf55","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.f19bbc4af.0.tgz","fileCount":48,"integrity":"sha512-ZH7WYEwFBn4Xo/EPEwfDTuKp6FZhXSykNZxPubOgYeIY2WLEQWlKOHQiJWuK2xC8z3goPlbxQ5j0RiYcLTDAnA==","signatures":[{"sig":"MEQCIFuJ2Iw4R6uZg3X/DPcnVelsPJT5fDhOLhTSMRrO+IO2AiBECjQLrX8HJUZ/VKV1Qpm+YwRiu/RrdR9jaMF9hWkPkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":927106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLESOCRA9TVsSAnZWagAARKEQAIw0xuBBABbfTnXRtrbl\nf+5dTIp2VQcC6T30HlHQ7a/1dyOPzZTE4CvUlRoYRaCA9GembGzifyKUhO6z\nc2sqPlVlzpBZ7+KoFvZDqjUF1jwZZtRWrn+D5JwUG7wRAEjAbimpS3fK1Axj\nfHaKdhpTMG6PWLnACVBvnO2KxI7fw202RnxUOeYTERUDrSTGYhuSU9+KkBvr\n6DOUy3VphmvGsWz4REY4Q0gF721WhxofPrfyJc9L56Jh7heK0kKOJYElA/IF\na4kwxdXQ3lN3SaHy4BddvbRswJUoEX6iUE2QzoSogv5a+A++6wzzXSwtGlBv\n3Mw9EDNcuMz0q30vGXsFp+sMv6mMmyvquaa2bBWnU4CHfhZ6eDIrMbfAFtlp\nL/wiUfUyFR92ziiSAqD0PyaRoMYbnYX9r9QIjsEpgjwCSoWf9APoWNmdJ237\nC39yOWcBtOYGwLI2cKRjJzdyxN6hmSyUKDBPE+6X85TN9JBZR7V2ntLY24GI\nTHbCOKMvxh8IBTzNoFhZCiAOwY5V/LeCVgZOkpAC3GVcHP1HZPYbBWTHINOs\nqXO8s5/UzrYQuwuUtH8PYZnQNJPzU+E9hC/aCEpbu2Vwd8gD9V2m8h6CvRxA\nGm/N0EkrsFpzPIdXhp3jY08GkEG+u2mxEKaJXQy6mJ8Gso2PKcYNsxPaRjrY\nsezo\r\n=ISUa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f19bbc4af.0","@material/rtl":"11.0.0-canary.f19bbc4af.0","@material/base":"11.0.0-canary.f19bbc4af.0","@material/list":"11.0.0-canary.f19bbc4af.0","@material/shape":"11.0.0-canary.f19bbc4af.0","@material/theme":"11.0.0-canary.f19bbc4af.0","@material/ripple":"11.0.0-canary.f19bbc4af.0","@material/animation":"11.0.0-canary.f19bbc4af.0","@material/elevation":"11.0.0-canary.f19bbc4af.0","@material/typography":"11.0.0-canary.f19bbc4af.0","@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.f19bbc4af.0_1613513870310_0.8266466800677679","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/drawer","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"300e3188d7d92e97d55f9657ddcc0f7bb4fcd780","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.f9cac96cc.0.tgz","fileCount":48,"integrity":"sha512-hLurSgNDQXnKWPwLrqfgM0f980rvDPy+XgrI/UyAFvSurF4aD8glXiPbTxQD+3XCrAxyKvDOUiQ58qsDaXuwQg==","signatures":[{"sig":"MEYCIQDH3c3p/rZ6AJiceVzbyO1CjU6y2pvlz7gyb0VbNDTYagIhAJOERsttfFVqJv/7+8xCI5ush02n4PZ7LRVnnNs/8Ox5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":933618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLUA/CRA9TVsSAnZWagAAOrkP/0Y6eH/xxSUvEJrvRdxZ\n6c13kqLeEppj/FIepyh1Ene5YcjWzI9r7BTTG4fUM3x+LuIsmqsI3zmwqWjm\nRUEE7I37IUr95wWcsEofquiTXgFA0WtFzxt8CbZY9r5MuD+Ema5s17PJhugX\ngjKOazmY/dJAKZn+4vyIsOD/NkXb1k6lF+9c9HsUlqYacaaKbfURydcyXIgh\ndg+s8q60X0jzxRfgK2P86zLGqG0/dl25xSDOsTO0ONa/sIwvH01eYP34hZJ3\nXTyOq68sziE/OQwNGfO4sktjMKwYV1b4WMTlpE/0I6Duzp4gI4FmCH3OG7of\nI2v+NlUNZyHvyLMePf/lsSCi+OrOeMxR6ylzCk/EOK6VCRFDQh+0/c4bhxsT\nXzVfEA3Lw7RsfPd2R9UDv7qPc1v0U7GO+yt5nID6ufDbdqAp25O8AxBWDclz\nT3aax3KaMFC5jTwZgI4EZicHonYb/vLwybQnBh9aMYNwILrv0XZZDAdGUfyf\n+24HRXsCFtexdsY/cURZYgeAEkAByNejKE+lEOyUzsLrb/54mt85UV+QXWRL\nIXuZCPe6DsyljA0VkXoIHad2OTnlk67Lu0a6GffzdFh9KbRpsPt1v/JrDSFr\nE7MMg0l+P0/SltQJznGCntjqH9KBlY4RB819+Gvt9i73AK9cza2SlvbCiKlJ\nxxS8\r\n=SM8x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f9cac96cc.0","@material/rtl":"11.0.0-canary.f9cac96cc.0","@material/base":"11.0.0-canary.f9cac96cc.0","@material/list":"11.0.0-canary.f9cac96cc.0","@material/shape":"11.0.0-canary.f9cac96cc.0","@material/theme":"11.0.0-canary.f9cac96cc.0","@material/ripple":"11.0.0-canary.f9cac96cc.0","@material/animation":"11.0.0-canary.f9cac96cc.0","@material/elevation":"11.0.0-canary.f9cac96cc.0","@material/typography":"11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.f9cac96cc.0_1613578302953_0.6941424099528186","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/drawer","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"403bf1a99248651e2c32afbaaf9683cbd46671b0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.79ce0878b.0.tgz","fileCount":48,"integrity":"sha512-nudTfmtZ4/AdRX41gfrnXwdPhn5nn6tbmPU5kNo1BHaoJRsDxYjJEd8Pn3NYUqSnjpik8Nzo9UvyhSr0NXrjhg==","signatures":[{"sig":"MEUCIQCAOlUmK/Qt3QRCaP2X1+O29r7E9Hrtudk9+ISbvuhDzQIgXNq7mT+yDzTwPuxP+K3jDapDr2lihwcNJ9pxunroy44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":933618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW3wCRA9TVsSAnZWagAAzcIP/2bzwnUHTexkePqP9udO\nZMfOaotRueLYxBWyHRew2K3/wdaLb6fByknNN5sJ7KFaX/1nWABmhF3eg7qf\nPox8OjwVB26gAKhLqD2VOLY5iW9rhY4lu1/8fWf790TodPoVokZlTlz0dys3\nyP/EzzIGfNBCQT0vBe4QmkjwLynLUOEiZkhxbbZt1RhWrXh7I5y32L3vXp/E\nN6vtQ/vlCeM2hWdm0cf0fLPaA9f++Jsth3vZEcjL5zdHm9NRHorU7rv0OLr3\naEI50Am2kTI4YHNYpMLbHQACfoZN9m2GMTUT5fk/pJq4Ta0L35L7vGL3hciR\nCfKqWPMJ852l17s1bEG9KTAKIqzq4eJO1C9669CTW19VCYYd5mMkxzWNu5Za\nthM/6fV1SAoFrbIY1OsyfMlP7+IxBq4pAsyNxEjfevYkgmdrZTNT9izvWqn5\nZDs9UO4TZ0W88AiyHOoaw8XKPtF62ok1FGmQLY2gmETohWE8a2UC1EAcauIX\nq/IG8jDqHB1jRRHUs4axON4809eOStjSTO+lwEeGlw6ATVzhtt6kKj6Pn31d\ntVm4htuZdG7pOeqqPkS1PxbvKjMknKmntFKTsfrMR9QCdmE4711vNPw0Jypd\nurMqKFr61u/PvR3ThDx2hE28tbyimKR2aBTSJDwa7GAkjA/x9/1y72i2HREm\nNh+J\r\n=Qys6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.79ce0878b.0","@material/rtl":"11.0.0-canary.79ce0878b.0","@material/base":"11.0.0-canary.79ce0878b.0","@material/list":"11.0.0-canary.79ce0878b.0","@material/shape":"11.0.0-canary.79ce0878b.0","@material/theme":"11.0.0-canary.79ce0878b.0","@material/ripple":"11.0.0-canary.79ce0878b.0","@material/animation":"11.0.0-canary.79ce0878b.0","@material/elevation":"11.0.0-canary.79ce0878b.0","@material/typography":"11.0.0-canary.79ce0878b.0","@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.79ce0878b.0_1613590000422_0.7479105089826892","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/drawer","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdd50088d66c770980c45b6fa0452655816b02d1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.d6e507b5b.0.tgz","fileCount":48,"integrity":"sha512-dUJ+evdnesfD7u9NkPTi/2fPTTK/tjQltwZmf+kdmqRn+rJIuXY8DxSYBzbDE5fTVAxIP8W4nPX4gXQ7NsxtIA==","signatures":[{"sig":"MEQCICRFcSydtSlkQUg0/DKP1Kl713IHi7a7zi070KKhkV4ZAiAJz9Z1WrNJn2F9mFRMwFO/7zV2rCN89mI3OI3DKmUmtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":933618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXWxCRA9TVsSAnZWagAAEFgP/2Oru5LfFMwwISIbyljD\n999Lz3HQGEptjbbtTvc1N/9cNUZ640boeOpuQGnYvKGXFiUi9uM0HfKkDH0z\n15LdPkgbmiAAYaxYOFI9EeFljwPO3dMGzx0BcyP+fME22uyGTFvVg9sMERev\nNlYCmfHhUwuxW7//NXRY4S3bV1C5N64RVdmgsTpwo0/S5z0x2le/5nPA/usx\nVKeVL6pT9y7SWXmroXqBburxFpKouvIN7ZfDInrzppLjS3ND99KArZVTUM7C\nzvYStF6pTPkN9syDKFPoU17/yjdyUuFfvoto8qdJPWY3Yuj5qNGUTurNK4Ry\nBPmH1fERxiWNrQD8ZMzrVCtb8RoPKVwT+w4G3avHVv+YappRXdIeTMis26Et\nDc1YdCChUH+fJMIXPhQsQgyoDk9VmgLKExXx+ol+wBQ/GgNZsUVNVrwonqRA\nxMkPGhX6w24V741NAli/uOXiqIvHQwmSF69TXtMYWA0xFjs5tybDb0M0vFKv\nE5BZIIMtUo+0AX696aMQSyJvCTa95zIW8AulO+W3z4pSThriMHkUyMomqNOw\nJ7PfBwtk2bkyTVTEFFUUHRqDsPcudj281FOi4A3BgYsSUpeT/NLtjZLxYQqR\nPn++AxlC6auPtGqqdz98I7BpS0fnQWhGiMqCv4eY0r4A7ZVwnwg1KPxO6i8Y\nawMH\r\n=zbkS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d6e507b5b.0","@material/rtl":"11.0.0-canary.d6e507b5b.0","@material/base":"11.0.0-canary.d6e507b5b.0","@material/list":"11.0.0-canary.d6e507b5b.0","@material/shape":"11.0.0-canary.d6e507b5b.0","@material/theme":"11.0.0-canary.d6e507b5b.0","@material/ripple":"11.0.0-canary.d6e507b5b.0","@material/animation":"11.0.0-canary.d6e507b5b.0","@material/elevation":"11.0.0-canary.d6e507b5b.0","@material/typography":"11.0.0-canary.d6e507b5b.0","@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.d6e507b5b.0_1613591985300_0.05301400540468171","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/drawer","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.f2658381b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"685dcab6d24dd04fdef70f001c72f3e38f84191d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.f2658381b.0.tgz","fileCount":48,"integrity":"sha512-WuIs+q3HsL9l84EF3mCxvfPF+1XBg0VWsWutMBn20Tdth48vdJa/TevoNxXHtHrt/iqNmdhbZEgeFor6o2f0Ig==","signatures":[{"sig":"MEYCIQCECqIzrEfhm5/90mmHHOjVtQ1Luz07GSbXC7T7mmtoAgIhAJ0RIvWyHtVOeN6qsCY5LxAXVgUd8fKUxrXe1oJOZF1u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":933618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZzCCRA9TVsSAnZWagAAWN0QAKDdWVyfKhXjmd46q5TT\nRphXLkCFHbOiDpchrRVXc6q+IWGsIXxQYteevYIF8UZGF1hREJ4goNc1k+ts\n6nCmt9ivejzEtBtyY6i/lFgCVXMtne3bhgsH1O6y9hnKbHEoZxe+b7D2pt4L\nkmmqHOeZ2vrvGEHTulkRzT7Fjo2MheozIQmKcFXDgVKTnOUfI4VZCFP9pZj9\nvR7cjqtF0VQwhZPsZmiSQ9+KWN5GNsPieaBTMv0yFtxD0mc1nih+rWQe+36H\nbIQ2Tg9ONr+3U8Fhe7q9+6hEPCgRcPKT1id9MOaYd2lvyC/q8O6saZLIF0dH\nJkndaGo7LbfcZ0/D8CoIU/pGdQeN7OaUWR+eYA6bCtJ4s28wMe0G5txUq9hX\n07Bhw/K9l4EQ3XsrNILJDxDylk/aAYjoXItXvcFY1Ib9cTJfj+dv09JX442q\n3hD9af9px2KS3ANn0ch7k7oeOqtk5ykdEDO6RDiby7D1ilRl0ZRQOJqRZZ7n\n5ZrH/wN1K3ccpXq5AJcy8gMxjnjfJRApU1h3XXgoxvJ4TkssPCekvt1QNauc\n/7waOSeOT6aUBSoWf2/KJRPOfPpLpXrBWOnqwJ6CKg/E8DclH9C615MrTGif\nbRh0dvQdh3O5iC8XkUxylcb5ZAdwkytTGeAZBrvvmTfk4x8yC0WTTdY0W+UV\n51cv\r\n=HUEK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f2658381b.0","@material/rtl":"11.0.0-canary.f2658381b.0","@material/base":"11.0.0-canary.f2658381b.0","@material/list":"11.0.0-canary.f2658381b.0","@material/shape":"11.0.0-canary.f2658381b.0","@material/theme":"11.0.0-canary.f2658381b.0","@material/ripple":"11.0.0-canary.f2658381b.0","@material/animation":"11.0.0-canary.f2658381b.0","@material/elevation":"11.0.0-canary.f2658381b.0","@material/typography":"11.0.0-canary.f2658381b.0","@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.f2658381b.0_1613601985749_0.12918486782609384","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/drawer","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59b0c205d75a2036601bbcd075451dde104a2d54","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.97c4d4035.0.tgz","fileCount":48,"integrity":"sha512-irHocRizqMGXw3bpreHzPNpT0K8mpP9g1rQEgnUZ0/ZrCjDOkN1sANNxz+gV1XBLqGdYCxNak97fq4TORJacTg==","signatures":[{"sig":"MEYCIQC3jYrS5KeJDLcYCLJHYiw29/J3Vurg3MC+VhzKAmEK7AIhAMTAWNCjqW5XLdtWIrpVipvcGd/ABTjrF/qIU6LZdskU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":933618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdK6CRA9TVsSAnZWagAAgucQAJbrcvj8BWDDeaiDxVkb\nJbsF3UL2Ltyi+zkgi1iWxE1c6SnnAfwWsJr3PWrLDZceQ3xhOuhmzEtOZmLm\nCV4cW3hORJsaGndF+UPsSOE63RWX5gs9fkpzaC4neqhxm9t9abmttnuyhi7u\nRK69mqTSJnjr5CmvIYKG8ZlcbkxC1gz7B47A/YVl8mjhQwtkr4X8vK1NOwI5\nWW8c49XH85Fjk/0FHeK3L6L8MQG03wgcayIGj9XWHfbt97aWbVwCCfJ01a0X\nL+nyx7izFHByaum/3JK2JOUoWBHt2564xnc8gyzmvvyMOE2QPnYrjUCey2WW\naCCqn/n1IaNEm1el01oixKk5PVW22j2Or4dgQ+72gdZV5BXGcUxDBbqUzAeY\nFpb2yJGospTBm5rwwHRBI9/eS7YW03A365WV5cf81Lq7BGFSWDpAavjhEiYP\nWaeGTdIurgu0OajBNxhS0tMNKXaRGwA7SkALw47k3y6wL5Jyy2UkvOFCMqNr\nSPQ+4jDF76POgkv6XDnoUy2uv9DOeRXC/DXX9/7uFh9sKxf2RrTtZdShwFpc\nxYxTI1Jhku1xL8b+6xLU7uhZE/WpczuvHa1emsJ97wFpLcu5jYrKUQR53/w4\nfIf2nmfSC00736B7JQCUwNqAPSByv5c7KgPXYIZdR9K8bz7UMHHOFObY8D78\nLBfr\r\n=E8nB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.97c4d4035.0","@material/rtl":"11.0.0-canary.97c4d4035.0","@material/base":"11.0.0-canary.97c4d4035.0","@material/list":"11.0.0-canary.97c4d4035.0","@material/shape":"11.0.0-canary.97c4d4035.0","@material/theme":"11.0.0-canary.97c4d4035.0","@material/ripple":"11.0.0-canary.97c4d4035.0","@material/animation":"11.0.0-canary.97c4d4035.0","@material/elevation":"11.0.0-canary.97c4d4035.0","@material/typography":"11.0.0-canary.97c4d4035.0","@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.97c4d4035.0_1613615801622_0.7765262975730551","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/drawer","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52b94137b78dac4a668eaa99b4b3aadc0e53a9f4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.f5bb4648c.0.tgz","fileCount":48,"integrity":"sha512-alASoTWlYql1mEidpfaJniE8LwAqbVhUDH8A7ffoZo0RGuUc5KapvDc8BOtGHv2f/egmr7e2N7l/JJHR7ySTzA==","signatures":[{"sig":"MEUCIC+rdqSV3fcd4seLNVs7Ql6zu9ASVLKlkL3uXMb3v8u8AiEAsiBwpDNnRZOVTPHRMgu7+1qWcglM7T7fxDODI7PeTuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":933618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpC0CRA9TVsSAnZWagAAHDcP/iyCpZvuE//pSVKSeUAm\nn3/ZZy14YHNXQw0NYBeyne7NNi2WGh7JhG3hK0vSWU69SmYcr0aU6HSGbZyp\nqgeHkl+inYvmh+cUh+wHpQqjwOZwXGmTET0MFgh0/Pkm0STwUDIgg6wWW/hw\nYJqIl4taLyDV7Ag+0Dr1rwmjqbRrDG8x0dxd35dsiVHHjMhEXw4S3/JTfjK+\nZNKCn7VXUh7+tA0Sl2WfH7xHDGegXZtM4BtHuPAg3QsLv353lZfdYjkhe3cw\nN2LgNSdYRhfDEc4dm6qtP6BWDAUJMWXAtAhzquiAIuZcJSdBlV0CfZxGtJTQ\n3HfKmXIUGf4YhRzaGXGd/tJ+HT8SPlciDB37lXcrGtNe5nXO/QEWvqLnK3yc\nAFDaycC5iUEg0xHjuFrRZDi4Wh1r+rwkbOa/3dyI23EWrWxlv2t7DzYR5mrM\nFnwtTmxNhdnRe6I10dZaCoi5u72P3jKGk2daQjhLyCjyQdC+dWQq031N5BP1\nccyXeJwavk29Y2ucHWIPiasq4t/GTmpoydopGeyz7YFRbB5So6whhOdvF2mC\nltMMwZ3wYQCSn/xAWhSz9+LLfi10xjlOJr5e7pBD4ilxBHa4qxRywf3HTDh5\neZGOPwIiEHcN7qyYzOcRGtuxtorluaWejuoLO/1qnbapmv6tuirVQwTb+EaW\n+kl3\r\n=e3od\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f5bb4648c.0","@material/rtl":"11.0.0-canary.f5bb4648c.0","@material/base":"11.0.0-canary.f5bb4648c.0","@material/list":"11.0.0-canary.f5bb4648c.0","@material/shape":"11.0.0-canary.f5bb4648c.0","@material/theme":"11.0.0-canary.f5bb4648c.0","@material/ripple":"11.0.0-canary.f5bb4648c.0","@material/animation":"11.0.0-canary.f5bb4648c.0","@material/elevation":"11.0.0-canary.f5bb4648c.0","@material/typography":"11.0.0-canary.f5bb4648c.0","@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.f5bb4648c.0_1613664436396_0.5310304359778175","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/drawer","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.302c7a960.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d5cb1a610e87d84eb6fcddabb63245d786e9c67","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.302c7a960.0.tgz","fileCount":48,"integrity":"sha512-wH4Nb8P3FEfUMzpIM88cL8Y0habHYwtZBfJQxhrBYERpN2CAVEPWH/F1V3B/aY/vmVIyI925jgm2zqbSR8nFTw==","signatures":[{"sig":"MEUCIBhTYk9JwviRX9UZQPwoAJv3Bbtwk7AuH12iVFuoNtsAAiEAmjFWZAxFJ4NSoPn+PjfmOefSjS2aRqiOd+eEwJwLGUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":933776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrR7CRA9TVsSAnZWagAAIaIP+wetBCWsgufiR/BAk6Yd\nIv0JUcKiNFOgPjEH+gNzqrM8dDTYnXG+qgBomjP4xW2GUTcOXjr9ERmmAEch\np998q9081iNbk20Plg+KYvO7UnrMP3reF7pEO6Sa/fZ1l3QdcfS9xwc+mcwO\n1qy4tAlx5eZ2F3+gWsDBHhcn9AQkHdII6uYdXDgdVDz84JI9AYoxYQGA6LKt\nOuENQDqBde4s40lst9MQp3hp+jHNfcIP1B6cSoi/IvTbi5SHGTX/Re8h443h\nuC9+wf3Buh/7TlF30JZ2XCeMKGU9HIhpgZc3Hgu7fb7+I2LOki8hpzbNOFdV\n+b17qKxZRmSK9zSVZtmV44DrCHUBfM6o+qg0HAy5B+za0bp2uoUGdh3JWyRF\nj8TmKW8VwHWQ9XrpBgfgCbHMzGg2E/3K2h8M+O1eZbduWbIyllB/TAIOOX5S\nWr0+HSmUzVK6ZFUctz5i9y6TaF7rURsqQy5E/Sds6NfEdeU+/Xbd80SZ3lqj\nVBnZRt9XuoswdywsDToRz7VYnCbS1omgmxLiGq81HC+hGHsxPCEEvmHovhw5\nHJuZugG/nQxnqnEfMZbfx6nkKiNgnzoiAfnrhmV3YrFpJ5+be+EX73bh+nfW\nZOBOjpGAPTOFVucAU9zueIOmf63ZEOOBbqn4mQyiWeyY10opwo6kuLlkW/wn\nStOA\r\n=xDV7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.302c7a960.0","@material/rtl":"11.0.0-canary.302c7a960.0","@material/base":"11.0.0-canary.302c7a960.0","@material/list":"11.0.0-canary.302c7a960.0","@material/shape":"11.0.0-canary.302c7a960.0","@material/theme":"11.0.0-canary.302c7a960.0","@material/ripple":"11.0.0-canary.302c7a960.0","@material/animation":"11.0.0-canary.302c7a960.0","@material/elevation":"11.0.0-canary.302c7a960.0","@material/typography":"11.0.0-canary.302c7a960.0","@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.302c7a960.0_1613673594983_0.9432814650262749","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/drawer","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e548c2ea91e355f6e302428b1990f6ae2f3a71bb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.aa0aaf026.0.tgz","fileCount":48,"integrity":"sha512-d4fRID+DBgcQN5dKyaYQniId5y6CFi8EUnxc/qq+pafZ67veXY4J5fpizYqErwhNSOUkRhXgqY4hfQ16gpGBIg==","signatures":[{"sig":"MEUCIQCis1Q8/5EuUewEAzLAUEp6KwxT9P7fDGDOc/oPXJRkIAIgKPHklBcxdLZaCIkKHRpx66rnu2TtUYzHnv3lNEjJm2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":933776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr8VCRA9TVsSAnZWagAAQ1oP/2y9XF5w5FNQ17qsp30i\nCTaDREhztTRfMxl2+Ia9FNMF67FpLcbgORh3WIWJB5/rJc/4k/l0Iyz1xX4m\nPsjysGG1AAndEBYjDW0o1W++4B7WN8u9qVZTzUFJndfQqKuN32EWosVv6k73\n2HowevuOBfG1xFR0ucExYUDHPyjM4lnemLPMvsKSboA2cqZjiSduH2FW370R\nMtAj1iWma8iCxhrVrmrDcL08UwCfe2WWf21hitgypU98aCXLK0n0NJLy6u31\nnRWsI4HTz5YPqbrfVlXnu/XSbeglk0yFaVOC9p/T3HkQ53S9xCzIw4M+cdAA\nthbc3KaanOIq9ojgBs4+vPJjg/PpgA9OKmsqogpO9dZTaJ1SYYrB2Yt+8VTL\nshS9tSygAXRV47JT/P/dOZyOxkuSegpZ9/bKoSoI3Kb9aezLkqILX+qIJGjX\nxcd7yi8Xr/QDV3BwlLwJrLmI0DSuJUXqlShPwF9XU8TmOOgV6lz1IoSpvhED\nGXgXPjScFILT6LFL8Y4sUUi2BP+nfKzd687/7uwyVVVXxG3nM+qb3v3tHJ7v\n5aSVZezpNO+X0NpxCgbyCfY0KlKh7xdUwQuBGSqrSDYBrvMCfxzjINV2ls6f\n1F6JLO1vE3Em2NH6a1llvmWKJzvL7O/ZtX3vx8bMcQfecAIzedQcuMzcYIEg\n1p1M\r\n=K2AP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.aa0aaf026.0","@material/rtl":"11.0.0-canary.aa0aaf026.0","@material/base":"11.0.0-canary.aa0aaf026.0","@material/list":"11.0.0-canary.aa0aaf026.0","@material/shape":"11.0.0-canary.aa0aaf026.0","@material/theme":"11.0.0-canary.aa0aaf026.0","@material/ripple":"11.0.0-canary.aa0aaf026.0","@material/animation":"11.0.0-canary.aa0aaf026.0","@material/elevation":"11.0.0-canary.aa0aaf026.0","@material/typography":"11.0.0-canary.aa0aaf026.0","@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.aa0aaf026.0_1613676308827_0.6335035311303676","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/drawer","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"480534b4e742f19b0c199439743aaa22372778ac","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.07ff0c452.0.tgz","fileCount":48,"integrity":"sha512-JqmAttmEymeHr6I/Q7e6L2DlLf7wU0GiMi73TkR9yZfF8M0L6FAyHpGN5qFfdjk13CivFCqkdKulp9zzdh1ftA==","signatures":[{"sig":"MEQCIBQOQUp9HovDcVkRzx5cQN7ZP2nA2AyQo8dNyUtaXgASAiBWfuD+BqfIXH2tJfhqY3YcBfBUPC0tJeOufgQL4ZrQfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":936878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsOmCRA9TVsSAnZWagAAJa4P/RVOyMQlMDSujwDTcGW1\nyc7DZymUybFLDZBDguakbcDU97FbVPyaw0s3FkEtWqZO/aXHFMQHiZUCLK8X\nMhuN0IzpSecY6ypJopqdKJFTv/D1viTmP1EY+ayuYUX6BPlCvunX/G6q2/M7\nF0EcmlNK6kuhITcmprMBRhuChqSBufwXJqRcCrPkX/Ot5Y6dYnS2hFVA0uZ2\n8BlZo5KYVx6BOcjoFllaISHAx6HMjO18D5RA4uf77TowyM4DoJmRDDlAjAJ6\n1WrDvbPvHZMjKJzrnx+eJemlmcWUR5f4D+sliQraI/jnwiaIHbfRTTW6EMQV\nICDaADISrD2ipw3kGh+p3SEpRzAoSX9Z+LBaGLYPwRK7S6N+KsRH/3KuyCCC\nivC8BXabVLwGxxq7oFhDydAHV4NKOCwSCQQn0+w+qeH8OnmLgiIADD00IDZ8\nFF7c6WPgK0fvsfsbIGIvR/v5tu3Us3tCOJRqS/0A9+sEBhx329jB3xjoySOd\nAU7511QV+LsghlKEQ/W4ZjfYXRoMtcB33ZbPNUYKMj/MFoHDTlnbruFNS0T/\nK/aDpDIbNPIzWgApLnsdM1rbGesDq32pVj/OCQ5wAJL95pizrLXig0StygwX\nFIvdZxtHCHj5XUEjt6q0BloIznzMZDCkPi+0GeMKfapdRCOa9aM8DYmXBKXd\nzB3F\r\n=yeED\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.07ff0c452.0","@material/rtl":"11.0.0-canary.07ff0c452.0","@material/base":"11.0.0-canary.07ff0c452.0","@material/list":"11.0.0-canary.07ff0c452.0","@material/shape":"11.0.0-canary.07ff0c452.0","@material/theme":"11.0.0-canary.07ff0c452.0","@material/ripple":"11.0.0-canary.07ff0c452.0","@material/animation":"11.0.0-canary.07ff0c452.0","@material/elevation":"11.0.0-canary.07ff0c452.0","@material/typography":"11.0.0-canary.07ff0c452.0","@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.07ff0c452.0_1613677477527_0.8254137459718669","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/drawer","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8965740290d8f1e6646fab094420927df0def64e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":48,"integrity":"sha512-WvrCVuU7PyIjB1V9BxlGpTdDOILVlYZU2PkkIornkC0AtziwrXqAKQfUc53TQfm/2CdKizq2BWAfMpCLHzuQ+Q==","signatures":[{"sig":"MEQCIHYRfJnOcUGZFJrX2/IpHuxHw+Ue8ng2ve1B0A5aD8JPAiAntIxHBTPGYUrnUeoJY94BdAk+5zAxKwpJXpV4Ir4D/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":936878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvhECRA9TVsSAnZWagAA2F4P+wV8AmV+OXOrN31iaart\nEDF1I6Ay03lP0hDjlLwmTSDfeoJm81yZ1rWtMhM9biCaGDimcpVmIYM8aM7+\ncZ2tVfI1JZ/8fT6Z0vRW1PHSFC8zWoVbBcssFaP4cewrK+xIEyPOWjauWr7I\n/V1cdIjZC1l8vxizue+0niTSimC293p9d/dmZsClpb03lcXi80GXjcY8rN1a\nih8oPdtGBJPqoAIN/VyDWZzSGGBKXAeddJOdT2iXCHjQXPYj7UKk3sEuMjon\nJyZDBl1iAibiPFksjD15q3/CFZG+Il0yF/5unGGUT0Usl9a5jsA+KpwfEvAL\n4Znt03fXVKU9z19QnjLugOJVO5EuNs7Cyw70srFtQwIXEolKRilnPYeZW2tf\nD/4j2KbBiSJjXRtdjxvhZOmTbX+Tr0bSxthgw7R1L3cH1uFt0yHR9JL9ySi+\nGseKHwv4cDmpyoIBYJuEaJH1D5yjP27Drk2FXduu7PbY4ba9imYDQxBqw2Ro\nuThkxu6Sb/L6zCo5z4rc+D5XZUZaYt5lkl/JiomJcwxT9EXyXC6Awh9Uwo9G\nRslRalu/Zk5VotOb1oczcnHZntN55EeZyqyxabSsmsJGLVGXlc24a0h2W5ce\n3RzsvXa/sxP3yKvYkqHvnGYq+RfTGTuPtMem9V5qP0hNjjRt4/Z3Xcsi3N+s\nhbMa\r\n=Zozt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.bed7ecd3e.0","@material/rtl":"11.0.0-canary.bed7ecd3e.0","@material/base":"11.0.0-canary.bed7ecd3e.0","@material/list":"11.0.0-canary.bed7ecd3e.0","@material/shape":"11.0.0-canary.bed7ecd3e.0","@material/theme":"11.0.0-canary.bed7ecd3e.0","@material/ripple":"11.0.0-canary.bed7ecd3e.0","@material/animation":"11.0.0-canary.bed7ecd3e.0","@material/elevation":"11.0.0-canary.bed7ecd3e.0","@material/typography":"11.0.0-canary.bed7ecd3e.0","@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.bed7ecd3e.0_1613690947896_0.07321842634387776","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/drawer","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a8257da9ea96671c9a5681b292c6f12c634f2ca","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.06dead2d6.0.tgz","fileCount":48,"integrity":"sha512-RhXzO67M37rbbf/XEtMlm1MDlbEMyoEQFQGwUqUuqIDNBeVoU7Vs1PSPVWWqsr0EXme3wtN3BKgn8717zwBDtQ==","signatures":[{"sig":"MEUCIE0oS8pCdae+t8lqzayprBHevZeRPSgoB817smC0lbqOAiEA2fPlHMR5SO+4RDySkal7NtNckO23LE63WRUVNO5V/wU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":936878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwiKCRA9TVsSAnZWagAAbLMP/1fxy0JRt5Tb1wJaeEBf\nOtNYJJp7/Vfud6AF/BCE60jgwbSrlyeUdUvXENptmTNEJF5fHxTdYs2RYIjL\nim71+MzYppQNlupPGfWFC3KO2Bbi0arg8ONlmNW5JN9rpB0lOaZp6fy4wUoT\nOR9XgogaWrA1c6ujYAHFAbApmlxHbti488IQg2iZy+Agxlpf40lmy9u8Ye74\ngrqyO1zVzciV2stWI5q0ZwQ/znzN32aqzqHZjXzHCZGlfBa5e2XcJoFez57D\nTPIK9mcl2VEgx62z7CG1XEMQjHttCGdatxmF2lGGCouONt1zR75mPVn1K0Wi\nKhhHZ2c+JVHTXkNRinTuk6oubPmHsv9rhcerPdGhFJExP9DQeRq0HQiCSj04\nm1JaQ9bMXED7XcRqLVJpW07hMHfn2fcdfV765mGCewohti2yHCJ4X2/tqc9N\nKmfbjeR+JUQpU2ZLyYMWoIGVZhfbg6bhEVQtLnvJFL31PW8sb2Au7CFYlUKh\n2d6jbrx6M3Oq7jhooz071K+0oO8NbnGyXwqKHgdc700ccK0e24K6UyN9Lkeu\nJ4YFDSfqnmdeJnHpKKQdcsHFly2ABkAW3N5eciyf4B7F4XC0uK3F5FyPz6C7\n8GvbBHpFfas7VkITSEqTCel0M+tpvOP+J3g+XZYeHGSi4uU02Qr5GWTJcjy0\nBIxM\r\n=NCJd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.06dead2d6.0","@material/rtl":"11.0.0-canary.06dead2d6.0","@material/base":"11.0.0-canary.06dead2d6.0","@material/list":"11.0.0-canary.06dead2d6.0","@material/shape":"11.0.0-canary.06dead2d6.0","@material/theme":"11.0.0-canary.06dead2d6.0","@material/ripple":"11.0.0-canary.06dead2d6.0","@material/animation":"11.0.0-canary.06dead2d6.0","@material/elevation":"11.0.0-canary.06dead2d6.0","@material/typography":"11.0.0-canary.06dead2d6.0","@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.06dead2d6.0_1613695113953_0.9771508237434092","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/drawer","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.cddb03553.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b71b00da0f4210657f80c173e48fa7c4770e1c1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.cddb03553.0.tgz","fileCount":48,"integrity":"sha512-HYOnJr+bCVsS13thZESOptorCHvK8IiJqd/zFn2tlWbJbIpgtB9aF4YKmhH8jsaL52mx8gw/cE9soriHOZbLhw==","signatures":[{"sig":"MEQCIHbTe9NB8mPTzqlRdicySRJ/yzx8NsQW/NN7uNe9XPXHAiBbFA6pGGZ5hW3lqtvEFU2lLmMdiowF4T2momg9/DqiPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":936878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLy0gCRA9TVsSAnZWagAAS9gQAI7clZSVui37nsS2//Gx\nqpghTkX0kjGOFwZoQcYNTfcptIbQ52cnXFIJqKmJsMqv7255QR7xlpjAcSLq\n9C5CzJVTWfESXRcKkEVjDqKRMGUX+ZPQqGy1O+W9U5Te8ZUPxl027KDGVLzc\nBqIBIu6l1Q6DayY8HSOCRcfE4oNM4B2VYt+AHfbK+ui6fKTUo8B1uKyfc+GS\nA9ccCF0gUxsHCii7/v+u59UzkkiQ2HIe8tQynTe5QKHpSWags0uxeXstYRDd\ngciAlu9s9J1r7/sgdk9ybb8qrpIVnQ9pbyYrpMUGH5PWQQgIv6pF4aKDeAop\nKqaHQsX5Rgp6GFGsNHAGNCqoM/uME5hZdj3ZqDZ/Ejtsi7FTv/9ZKZs7D0nb\n0KsQKR8fp1BUcP8poPg738vfmWQYbu81eOfyrWuULaeiFsPrA7UGDZajiO7w\nief1BKmhQs3R+Cdw+A/QZ9SjH2z13r/nK2zwcrrgl/3eMCE5T1ZDvz31dmS8\novjqFKgViYbawbpdzBjZb+gabX2qSyhR8Qg2vHpqazkkZ6d9tkduRbNv3r0g\nx5tZJIpJv/XRvidWIKcknKBXuL3eq8+746XzQGMfNSNnJp1ReMyzft9FrVT5\nd2RUdSWHonhSPAzsIKXGYFR5xIdb/Q9+1UdI/Bw7Y1CRd7PzhoKQh2+vIUcO\ncxy8\r\n=yzgU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.cddb03553.0","@material/rtl":"11.0.0-canary.cddb03553.0","@material/base":"11.0.0-canary.cddb03553.0","@material/list":"11.0.0-canary.cddb03553.0","@material/shape":"11.0.0-canary.cddb03553.0","@material/theme":"11.0.0-canary.cddb03553.0","@material/ripple":"11.0.0-canary.cddb03553.0","@material/animation":"11.0.0-canary.cddb03553.0","@material/elevation":"11.0.0-canary.cddb03553.0","@material/typography":"11.0.0-canary.cddb03553.0","@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.cddb03553.0_1613704479529_0.17085902210917348","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/drawer","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fca92975856de9c2e8c0ed6b58d7d5d60d68615","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.d6d8d0476.0.tgz","fileCount":48,"integrity":"sha512-ehES+7I/fwZjydgDesgox0J9jtzDbipVw35sNzpY9O1UQCo6TeRn3IZJTJo9tKzUFRd5oR0zSF1Vbh7dl84W5w==","signatures":[{"sig":"MEYCIQDvIMOJxtJcsXNDPVMyFopgJWE0YKvnpKSTyQy8XdIZpQIhALtt0xngwdGX+I4JPC2/QFYJM3pqFYdJYlLQXFBTaohk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":936878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL07GCRA9TVsSAnZWagAAhHAQAJyKQy8oD1rNcssW0Btr\nWris3ToSZ8LotToA7HXnMUczAiwy8TnbAm9idMfzNBrvyeqDaqTzjsTv49ED\nv/QVmQcCNUwbTz/fxgMh1m8uA0Q9bfhxfQW4ED+2IyA79nYOHBHeW/eLG1Fj\nr3zihw1dcRXIhsVFhbzR+ykLkLRPRh4/6TxRmb47U5VksSRD6JhvARVnKBGT\nmY2T2ORlImz7Wkp8mpMHX3sIShxxv7xKaSscUfp8uJ+dhyK6yKyfCPcGwdK/\nnMawJuqy/QQGsf958OIDSchIDtIjhFRnTCkUtG7htHXzRmJjF4LkiYJNCwy/\nkMJumRSSKP9QXObbVLXrKn5215gzX6JUhMd627Qc7usVJA2l8ixdkQVCaha+\nRGLjkKDe84owQBfT5ONdBc6sMzahmVso8P5DZ/SA4WEmlGYeoTznn+IrGYQD\nrgci4F+oh4wQxBhTEGYr/GaUbTekDicQhirBX8XIrdDX+fyerZ9k0a5bL0+/\nRmma6bMoWtQzipI8bRr8RrmdyYTTybO/eBrc3xDTyt+S9JhIwYe8JUs7p+4D\nJqhas8inAfgFukDZ6N2tGVgkEAiIZInjh3r7MjhWfBEx4j01dutG8Kf9ACOH\nBtdeGrGeXlpn43is5qLvw5PLTYo7OmT61tb3e6xKyE9Gz0MwU3gOiwyLfoxU\njGZl\r\n=UuNj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d6d8d0476.0","@material/rtl":"11.0.0-canary.d6d8d0476.0","@material/base":"11.0.0-canary.d6d8d0476.0","@material/list":"11.0.0-canary.d6d8d0476.0","@material/shape":"11.0.0-canary.d6d8d0476.0","@material/theme":"11.0.0-canary.d6d8d0476.0","@material/ripple":"11.0.0-canary.d6d8d0476.0","@material/animation":"11.0.0-canary.d6d8d0476.0","@material/elevation":"11.0.0-canary.d6d8d0476.0","@material/typography":"11.0.0-canary.d6d8d0476.0","@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.d6d8d0476.0_1613713094278_0.6694527029092867","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/drawer","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad4b93968d84abd582be963148629abc25767b7d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":48,"integrity":"sha512-sHsR7TDuGnWfYAn37qUqRv0Qs2GpdHeBx8e8wtSzF2wA3m6BMYiKDPAy6r3EW3zYcD77eGPgKuP/A1i0BHcEVg==","signatures":[{"sig":"MEYCIQDiqxDoZ54FYtKk/XcBZcGk0sgJR2CJTv+ngU0qI0IGkAIhAIMzdujjvYRX9xClB3M3FTfOqckzoORoqNwcmVsZ3wFm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":936878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL92QCRA9TVsSAnZWagAAv0UQAIG69lbpNz/BeBBI9thN\nj/Q/atIfUkZqEL71U+ffR/GryQg1e+YbDK7+BrjgPMgA+FsUx2WUw0sQl9t3\n+gz1ZkkfoXeOG9sN1SSFFqa0+pQoT8eHjhTyjS/x9kWaWt+GmKLdxlM6CL0o\nkh1EvV6hLxnAtmlxdqSZLZdAmPM6uMVV7csuAceK9yya3BlcHFtpvdZmh2oT\nskFy+2Hx42lVDpA/EHeAwYZogQ7sPzQV1HQvZWkpTvDPIU66xFZusGz7nYwM\nlWj/AEc4stAnF9wPzcTEf79uEDOB0oUBPLgPbhgenyZBZKhX2sPsR9HBdpws\ne9NQ94FyHSbb8JuSP1j0x0k0Pg0k5JglmFoynaOP9Zl9+t/f0aYOAg/zRXkI\n53f43cx6+E7SxWRJ1OWJ6OzVEd81p2Ed69bFL/IM6E5kd9Ivnrsh18Tmn6Et\nSFu2899+1ct1BgpsmfS7nU1u/KUJsEuAblqWwV9la3HIsSq1MHnxFXrryufN\nPctzdWLhVp8T2mjhuGV5dpi9v4SHrWd+sQ/A3LvWD1GfMIGFBy2D6Ee1tlwc\nQRNs83LeE0QUW+lDituaE5z2lH+0aPZksZHBhUmwg2883Pa4T9f/xgPKXCWj\ncxn8ljtwMaDEPD4lYK0gHF8ddMe+nBDut1TX9+7AYn+LVkl4fA0GE4mRuN8c\n2JyC\r\n=eCqE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0b4a4b2eb.0","@material/rtl":"11.0.0-canary.0b4a4b2eb.0","@material/base":"11.0.0-canary.0b4a4b2eb.0","@material/list":"11.0.0-canary.0b4a4b2eb.0","@material/shape":"11.0.0-canary.0b4a4b2eb.0","@material/theme":"11.0.0-canary.0b4a4b2eb.0","@material/ripple":"11.0.0-canary.0b4a4b2eb.0","@material/animation":"11.0.0-canary.0b4a4b2eb.0","@material/elevation":"11.0.0-canary.0b4a4b2eb.0","@material/typography":"11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.0b4a4b2eb.0_1613749647828_0.16388465292371435","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/drawer","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.3201cae47.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21b7748f6a80c7a9430df62ea48c653c6dd8f629","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.3201cae47.0.tgz","fileCount":48,"integrity":"sha512-Gyi6RTztCyXGG8qGXHr0ad2zgjBqhff6cx2WGxLFS3U63Nh7ovkgReSHo/BHpbbfBhKG4UAzYl+eesICrHGKRw==","signatures":[{"sig":"MEUCICeP5BqBVrbuiJLoRnGbvkPG2Md5jrlQNKxeMQzlKSKyAiEAy5toEIhgRawNatXb0ZAea4tGniUaOyKMhNDMlgAXO/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":939293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMEN8CRA9TVsSAnZWagAA0GgP/2Q5hGPKZrV+Cf/o7GDU\nsUmizW5Jh/VAuQSPlmGH2qPl4cv800FkLn2DNmr+HWwJAtHCt6CMwq0uLvw8\ngxliVrtrfyWMWv3zFECELDoOFqGWHVauMHPUeuO36b2QxpzIXN3HFjI4yAjx\nm4Ns6BGKgfRTmR2LsdgrsM5ZgpIi6LjP23cnByTbCvLj0nvHpqJhCTt08B9F\n/4o2TC82kwhJRd6qX4kMbSabQAMCkThD8M4pQS45B4deW+hiYehBDEG7tfdy\nqzAIHSHHUuo9a2QMvRdZalMS7bfKVRHj5luArjvj5/jM5w8O2Z3qE74Cr43L\nrVtC27GCFpejyoMo4ELpnnfiJlqOivubP8mv+BO4t113oGoO/b1Zs8H13dGB\nu3zs/zmPP9A162Acn+DIKWqyluJp7UUSlaSxdsi1qzUKwkvznld2JzyDozTC\n/UJUSP6XPQyWoHJ4rPskEw5i2z2C9ud29nvPBnnTC34t0/+AlKlCjZrFyuS/\nSlKzPV6FxwrfPV31sw+CDAb9XM0ez2dUJy112VWgndnM1UsXFlz7U9TyAhZ4\n1/xy9IFaWCW/mwyn+Af6Zzvyw73bG61ADJCX+gXpYON1yN0XjvNPgpwbC/7R\n6uyR8bJMvY6ogJofYWfAxZJ6m7rxTTW1DyU3k3Om5ngl6WxCKLb2RZLRE3cX\nH4ct\r\n=1CsK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.3201cae47.0","@material/rtl":"11.0.0-canary.3201cae47.0","@material/base":"11.0.0-canary.3201cae47.0","@material/list":"11.0.0-canary.3201cae47.0","@material/shape":"11.0.0-canary.3201cae47.0","@material/theme":"11.0.0-canary.3201cae47.0","@material/ripple":"11.0.0-canary.3201cae47.0","@material/animation":"11.0.0-canary.3201cae47.0","@material/elevation":"11.0.0-canary.3201cae47.0","@material/typography":"11.0.0-canary.3201cae47.0","@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.3201cae47.0_1613775740005_0.5270349557126608","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/drawer","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51b37b7c7e6075ede357383eee6ce03b58429ea9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":48,"integrity":"sha512-81CKFhZa+pu1fxUXa0uDgMcFutwcvFxin7wEuX1EkKHspOy5UfbSfclh6PpFhsYZVlugHpePfE/X5TueoTsbNg==","signatures":[{"sig":"MEUCIFzA5hu+PD3clAc/UWWph8caIVA2y87WatTrItXsDDroAiEA1CwS+9tveBdDagJ6A7+9oq4Agf+XHiV/rMsNCK3S/30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":939402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAsuCRA9TVsSAnZWagAAr2UP/iEbST6keBXQSwyIU0md\nk5OY2eWSuu76gDoSLx9qlofLr+oL8bSA6/JejJwKZXghZeYYvSp0PJmiXxho\n2Oent8WFFEOkhie4TMFaCD4sp3kMRPkoxoNZkOBe4kkNxtwSqNIL3qDWXWdn\nPmdJtkjNJ+S5QCusyG0W72IMXDT7hnDAoqKAbf07ul6HdRZOaZZSXG+KEqS5\nti0AlctcGzu9AqGqEIuajhh6I3jB0pUu8bNe0bLLRiKQK9qKlU+svTKSeFr8\n+S7MqF10uuzNFtiz2Y2eWpyFsb0Q4eARST/Jrw8nngMktaLHgM16j1o+cGn2\nmLXGp22CM1Ag7sBMWC5oZGrIKBZU7/+IPwN6dAjQPXbiflo65hWtFnl24hxJ\nP8QTzz6HywZ5+0belFl1sbyGakwQbiCTtoBIDBplhsh6BwzZ+WXwTyMz1MF8\n78HLyYOa3yJtna9zjiK+o9cBoHVEgm3z3c/vlJXttpygK45GKUR5bGHv3ZvO\nUvuM6lqgeaN9SUEfbP/KL5q82zXu045fJhT8alVASJW3URue7cnj8NNLJRTL\nRcCK03d+//QA9oBopw1RmaMPVlcImgeM9EeTTgtzMGndy1A5JBvUxo2+CVZs\ny0xddmyuzd3PQLeWqTdsAj/pb2QWx9HTcGMhEqHgCWanDlbJpLYnWn9Yl936\n3ERN\r\n=sJaj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f1b1fd5d3.0","@material/rtl":"11.0.0-canary.f1b1fd5d3.0","@material/base":"11.0.0-canary.f1b1fd5d3.0","@material/list":"11.0.0-canary.f1b1fd5d3.0","@material/shape":"11.0.0-canary.f1b1fd5d3.0","@material/theme":"11.0.0-canary.f1b1fd5d3.0","@material/ripple":"11.0.0-canary.f1b1fd5d3.0","@material/animation":"11.0.0-canary.f1b1fd5d3.0","@material/elevation":"11.0.0-canary.f1b1fd5d3.0","@material/typography":"11.0.0-canary.f1b1fd5d3.0","@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.f1b1fd5d3.0_1614023469626_0.8885263777183185","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/drawer","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76a67d036a4fe80909d8e80e12f1f3e6ae251267","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.7899e0fe0.0.tgz","fileCount":48,"integrity":"sha512-73yTgHBOIGFO4l0ABGEfrwJs5WkeiwtaY9HSk7LrVE2/yEGtiZMiinXsCqPaIZH2nAGixJbnfZD9/445n5QexQ==","signatures":[{"sig":"MEYCIQCU4bDIKR5VKv45tBMg5V/6uMLS81SLYBQSjuHG7jXiTwIhAPDzvjvT6uEWPmiuxdMRfO7KKrPK4KGSIM2S9A2S4mb7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":939729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDR9CRA9TVsSAnZWagAAy5kP/jMhkBz4dIA5F9JeN6p8\n2sFE7Pymfx0DH5ngCB4J80jnmrVM0iyS7vN2p7LVJ+QmCT3KI83UFjtcBJep\njLo0qrwyD8sz/KVI0s1ifeDcFFc2JQlAb81Dl7S4GM7Ywl0DPp/ry+3+zXna\nzOkEac8HWqVg5lbhSB4ajKAS1UEW7nwb+kZCPowarkTsnfi5XmgpwjGlbwaq\nmZqrWyHgT7MiIgr7MUom7naEVx1x+VCG1pwVq27eMrC0Ppnb19HUVrDyXngM\nVwmehekEOuINdxpsrVgDqjbzQxkT9QtkAJcZmrxtj+akjV411IRnA3/WqvaT\nJxEaPVpmF0tWWpuLuww5IsseSVS267uRiFuzWz2L99WKvfql638w5OuymV7T\nv9jvN9CHbzANRh7SesRPREzPsBINq57/bkwX1as0J0uBmnhT8Hf2dxZTTWW6\nYl3X1mDw+agBZBo0J9kXpArhs2HxkizvOXN18JrMftn+ogqmf/+ZbWT2Jkcz\nfI7CoASP/NwldYWJy3SFXRYRYecWcllpp8XYxfSXrm+qFGaeVb+yeh3TIV1a\nGAzGOsSPGJfHOxzrbHgk2sLQS2938QrpBRQnLC3W/XwKYeO0lbHEWWacF5Ke\nxhpS6YEjb+ELfdUQFB7psrxaGJchQs8fkCmfnwsH0uyvhTO7GqbKC/5fJ5tt\niCbg\r\n=8hNr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.7899e0fe0.0","@material/rtl":"11.0.0-canary.7899e0fe0.0","@material/base":"11.0.0-canary.7899e0fe0.0","@material/list":"11.0.0-canary.7899e0fe0.0","@material/shape":"11.0.0-canary.7899e0fe0.0","@material/theme":"11.0.0-canary.7899e0fe0.0","@material/ripple":"11.0.0-canary.7899e0fe0.0","@material/animation":"11.0.0-canary.7899e0fe0.0","@material/elevation":"11.0.0-canary.7899e0fe0.0","@material/typography":"11.0.0-canary.7899e0fe0.0","@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.7899e0fe0.0_1614034044718_0.3023004122964623","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/drawer","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf375ec6a9621ac8f598ec1e28e7ed2642773169","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.f19c86d13.0.tgz","fileCount":48,"integrity":"sha512-JIGUMl04Y+X1YxgBs8gysmYjQiI+2I4/F1ouOnUDh3LC9r7SaddeRM0MsAQJXMfaHjbPLnCiL2/nUjgj4vjv3Q==","signatures":[{"sig":"MEUCIQCm7aBPRCDbhIaED5CUZeUK7siuY6MzWu61QyGqUNRdIwIgBClCjPhSHyf03wMtN2EAK5oewf9waw2rlWCX5xtwvqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":940707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND7+CRA9TVsSAnZWagAAqjkP/jiNcVgjW2iXnnnV8jE0\njzehMP9ERXxcXmVSUBbbchB7ePSKn5CNYit89s7dgNoOkPRhyBVdjx7JAL/J\nUW6etSTW3RCrsDfy9IlW15zMQLDpqezg6SEaXikFqg6P0LbjXhkX6tJnDycH\nwVbijpmY5Wx3OxhPnuCULu14LNIqUB4qrLc8KYorWEhl1U5DobOm8+axTBcM\nRuntdVMowb5e9H1RCfiBKthhnG7UaC3af8NmzrDrNbjCXNPgJVV/ZkGCDkDL\n6JpHDjnGer/sp6iW7rZTVoThdP4fPCmDLbckuJ9y1ecanF0iizuiiWYdHEKv\nmQcmbfeZnDTAfXFYfjLAxd2LmpU1edHfEJRKDc+dWTnFt8nd7NRt4HEFnexN\n0NeOncLZok3hUus+eG8sBCTRTH38pLUF4+7afJdCNyASvAUwiojIm+8SEjLb\nmjdKZgVKEA3Oxzda1mYqsA4uBlTl0Y6DShvpJ6TJyVf6W7eL8eDatHUMVdCZ\nMDgSHE2EKLTXTakOxCKqO0Dyo5liUlXLf3PUYkNJ1hYdTILQKlzaaGtXSNKb\nqfqbrdQHvyXvukullw2UVMoi+/YSKl5PayGeUHNLSKEfIydEUTK9TFHAMFPg\nRSPt9woq668Pz7Nw0C2Uzi93ZW1QT8YL1wM7aGnr2QnXCuOM8EgmCgbOOeU4\nQ/1R\r\n=zLfi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f19c86d13.0","@material/rtl":"11.0.0-canary.f19c86d13.0","@material/base":"11.0.0-canary.f19c86d13.0","@material/list":"11.0.0-canary.f19c86d13.0","@material/shape":"11.0.0-canary.f19c86d13.0","@material/theme":"11.0.0-canary.f19c86d13.0","@material/ripple":"11.0.0-canary.f19c86d13.0","@material/animation":"11.0.0-canary.f19c86d13.0","@material/elevation":"11.0.0-canary.f19c86d13.0","@material/typography":"11.0.0-canary.f19c86d13.0","@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.f19c86d13.0_1614036734395_0.930891881418149","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/drawer","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.60e892d79.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"504f15bd74302acac44b8e72db1bf08c09dd8ee4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.60e892d79.0.tgz","fileCount":48,"integrity":"sha512-/Dnv6r9BXgU1zhQcSLGrj+mziozpl6VnmG9xagf6u5U3kW1OH8gE2TH9liC1j6dXByStHpUF0eU98P2mpsOwvQ==","signatures":[{"sig":"MEQCIBWxNFpTAEJBvtmMuJY2RLsAzRPlOQSY5Rv8oIxYgGoKAiBDvL9JpzHWzZbm0qn886w1txZmHgjGmD+dat5wPNAzHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":940707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFdICRA9TVsSAnZWagAA6dYP/3puq5XMyQAiotJ2JszA\nF3etKNWzqY0/q2+KCMC1F4e72qpxtde8h93T68mpWaWIb1cju5yTM14xLjQQ\nBFFzsD4qDFVncYEbwC6AAD3D3IDHSGZRSdr92TLwtkJGtJWkZmh8n+7kn6IL\nOgdzidmueHtYIfk8I4cyvxj2kGnqec5Rw+pzixpfEtNK+xRmBckcxhN0M7wk\n2coFHCBAtpUdIWtPGWnfwuefUl0W4rnSRlhrSZgX9YSHpHgGiKJUp7LQ+7tK\ndd/jTiRGyZlhpPjNTbRBgGj6SzyeYZ+oQlaHREeKvN5Oth62Or7dTlUEubyt\n5wxoGBJkDYzzjZ9Eyza90HZ+VkAb1zw6KLiR/i0/8LTcg+RjNPW3mmbYXS1i\nA8cb8sTCLBz/jdF5rKqk/Nj1AHp99HPWI1Gjta6L/BIqQnkI6gIXWENNT0Fp\n0xCeON58fy66ZDX6F5h9V+qthpaKRNclxkJLd/EbQKn+aXiHdRthTK4xDDM8\nXvHVM87hbuyKBE7n/cZ4dqHsjZwe4rp5XIJjDlWn64Ptwq+RQrvw5Egm/Lrg\n8zTRBKd0384/PA9aX5rYGRI8yoBSIRZq3mJDDmnBXOzRCCFmPIS4Kf4rKdsG\nylas+QcUnIvu9f6jEjwqqM7yRujCYJWLKaJjha7A2w2Y1VkpQDaEwQ9/0ZuU\nq/bM\r\n=Zhx5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.60e892d79.0","@material/rtl":"11.0.0-canary.60e892d79.0","@material/base":"11.0.0-canary.60e892d79.0","@material/list":"11.0.0-canary.60e892d79.0","@material/shape":"11.0.0-canary.60e892d79.0","@material/theme":"11.0.0-canary.60e892d79.0","@material/ripple":"11.0.0-canary.60e892d79.0","@material/animation":"11.0.0-canary.60e892d79.0","@material/elevation":"11.0.0-canary.60e892d79.0","@material/typography":"11.0.0-canary.60e892d79.0","@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.60e892d79.0_1614042951410_0.3562648331958749","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/drawer","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9500ca7e93faa560ab71b871814b9be03f9a4dd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.c96bfa495.0.tgz","fileCount":48,"integrity":"sha512-S9nLtmLKvGyPv+TQZDaj9ZfwSfxwquezb8eauNakGYdbEkANXnlmFJ1mx3otCHl6LzAvy+2D8T+qXkW5gDxmtQ==","signatures":[{"sig":"MEYCIQCAmDrHJEakE+GKcXczjmvNwyqm9JrUeW/sxJLK1jo25QIhAJQg5ys0zygrbumX+LYI4/GfMKZC34P1oF6eb+csvI1c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":940707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjbCRA9TVsSAnZWagAA9ekQAJn56jhe7REfbR0MzQPA\nYDnMNogpQ4LgmB6cONnLavkJAgsrvWwlIieB0OqE9PfydVTAKSeayqutL4qn\nM2t+r1zg5+AobuPzJGh4I14Yf8f2CS+vOLPop2HkhGb2s3H9I8lGbhORcnBZ\nshIjUjT5IsWEgFkuHxTq772s7gyUL4LSNs8c0/kWh/Ducy4kL2g6VU01aVBg\nHaNj/so3h4Ep0G70fU7UyaZ479izX+N0zb1BGBU54zpIGlGtzS9wifyjBWAz\nnIk8LeruY0mZeKhS+WUQFYE02U0MPogttJHhrCwrqnVa1Km18uELfESxhMWR\nIfxw+y5DXzd9rwMToF5jHNbEtU1XaM4nmlA04jSbbne7uHXIIoS4JPHzv4ZR\niGX+1oml9vgGQ7rBPM2PXTgd7FlZ/KUBWQNArz8ouGlC1gfKCAH/p8eCKo2A\noI19bXsXPH5KpQauYiJmbbFgOIMyzyGWk9DN0lC7wBw8Zd1qLZXLH+tWL876\nJQvzeqGxkPa6hyfoa8RtIEt6hxnos9LqUzyeirkvfMVsmBVbqxA36uqkq3nT\nRJIA2sr2JQswrOMegEWTj/VVo3gYRmpJ4F0gdL6+ryKQcr4j686Q6DOA/etn\nc7XPoYLdTpKAyiqb30ZNNzBHsM4bAwP2hN5dvhppvKevXpSouRxAaR7LnI2/\n1sAH\r\n=zG0I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c96bfa495.0","@material/rtl":"11.0.0-canary.c96bfa495.0","@material/base":"11.0.0-canary.c96bfa495.0","@material/list":"11.0.0-canary.c96bfa495.0","@material/shape":"11.0.0-canary.c96bfa495.0","@material/theme":"11.0.0-canary.c96bfa495.0","@material/ripple":"11.0.0-canary.c96bfa495.0","@material/animation":"11.0.0-canary.c96bfa495.0","@material/elevation":"11.0.0-canary.c96bfa495.0","@material/typography":"11.0.0-canary.c96bfa495.0","@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.c96bfa495.0_1614108891031_0.1703588803285805","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/drawer","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2deb8bf34be41bb1845ab3fd4f2feaaa4d37f1f9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.fa9b59f67.0.tgz","fileCount":48,"integrity":"sha512-l6MIf5MfdMi8CAIt8Lzxov/3ePRTW3ORMmzfoeanWkRyV86H9CjXCBFjz/1G1J+5/q75lgYDR3g1ARVmke6/IA==","signatures":[{"sig":"MEUCIQCM/lUUbOEaAnyZhBv0VIS8ezvKNZE21hjeb7MIpEhj2gIgflekBSMdQwgVcgi+hE/MY2d+lAQEu1D9BgmjpyzHdsI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":940707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVksCRA9TVsSAnZWagAAmcwP/RogSLDwK74+QKYJtn7v\nqNsOVfo1f2lKFy8BzOEDyqe1lIsFsq4rRVLN3sw+Qoan6XrhfoxA2ie5W05Z\nA+NW5h0ZiryJnNUsS7ezQjHpAs9lnOT8W2g70zC4e1TiYM/paGll/2VXozzv\n+ICbKGc2f+CpcXFky/dkDYPsi3heOIbluLZAT3CcM5PwUq7qwoB+AIzyjbfu\n4gjQQD/ewbewbxqKZHsNnjaVUl5Hsbx5D3evn7DIlWsqXRblVcKeyVbJ5gCc\n45WzlIY9CQLeh7H30L0koPjZUlpE0Iy6cW24vtMiRMX+LggdZ92O54C3xrVv\niIw29bhmQmDuBKZ4GamHwqPdn1Bq7IyR72vTztyzm/Jvco07DMpMS7YzSTIE\nOVbaji9/9myRZjQ4JJBV0f9ktrsybvsM/X4cjKzO2G2VFWNIHU270EvuodLn\nu6Z3An9eJZ1J4vJGH8EMLEjxgiUTUSQn4nqMftytsNAh275h3W6kNzZEyPsJ\nTK3gl/Hq2hQYS1Gmhfom9win3POnNjXANJL126q8KG+RwdMFMnozCnfo06c+\nbV8XotgzOvDmqtI507h70W7cmbpS9da5vFbVR85kfLkavHMiABGT6qfkf/B2\nBDeW/63h1Ge2Roja7KRHaFXyCARPxvRxtJvxlLCSJas9GckXve6XJEoRFKXz\nkPHi\r\n=5yFv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.fa9b59f67.0","@material/rtl":"11.0.0-canary.fa9b59f67.0","@material/base":"11.0.0-canary.fa9b59f67.0","@material/list":"11.0.0-canary.fa9b59f67.0","@material/shape":"11.0.0-canary.fa9b59f67.0","@material/theme":"11.0.0-canary.fa9b59f67.0","@material/ripple":"11.0.0-canary.fa9b59f67.0","@material/animation":"11.0.0-canary.fa9b59f67.0","@material/elevation":"11.0.0-canary.fa9b59f67.0","@material/typography":"11.0.0-canary.fa9b59f67.0","@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.fa9b59f67.0_1614108972248_0.34995820547245415","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/drawer","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.869e3497c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d50c5f304d5288be5b7b9ac5a634efb5803132b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.869e3497c.0.tgz","fileCount":48,"integrity":"sha512-MxZ06+0GNiDpHxB+X4TOcutwgiC5w+zERcfk0x0SmoLnSe2bwWLWRD1UJ0+eZ+4Hf54UHuypYFQV5jxy5IKRuA==","signatures":[{"sig":"MEUCICZDb9+7QMhkG55mJq+QfIa8zmSkFVlp/l+rbY0TsWR8AiEAqDQkBGxwBSls8MDeOVammw8znPtZu6dOjbEE9VkOlgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":940707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVlTCRA9TVsSAnZWagAAhLYP/03s/kQnKXTbexCjt2xU\nEECGSmjAQGXT2DgwCf1eHTZ2eba2EFNxIPvAAJAh5Mmlwo6TbNbmpRHBSfsb\npNpC4khVbldzSSjmTANAvsBZq0O1npiZkaQDJkNCxuuis6QwFC9QqM7BqiQ3\ncT4piKu/ZWQ+H+7vwagOkrm8szrIJcFjsJnSLvevlAFOtOand40gJBc9xLNT\nTiXmTJvgUcAElNoh3NNKomSUz0nrrvnZkU9Gq+VPnAMwOPg9+zZIFTAQLkIy\n3mhasrdO05S0Q9Wxfx+gwAshkdesT0Ki7tkeWzc8OWNjrmgcnmpX2u5K+3fg\nYJ9qV42Z3Wa6tMLgSzNw9z0z8IMThg98nQpSAVRDfS7pXF0zubhKFUIm5TBP\nhe2+bZflKdlPEryYTr0j6RUioMPQKqVsW2h9UmJuiXI+xI+rrlzFpR5ARufU\nFTC7vJXL1NYQUTn7XJRfJs+muCHWM9NYKapFmUp8PSi4khoU2DSxePUel6yE\nfLAOQaAA8Z763E41VKShkqSMji5gr6AhAL/doljyRaiwKT9ulvxetG4H6VRy\nlcRggMWeXkg7IjB3fjhlqN3O4MyIK2M6c11ysxTqeXHgr8OCabRsJk5E5sco\nHtZtsPdO+0Zapqz+CNrVUuAneRW5r81iQ232GDwZDollYeF14hVFgJcda1VN\nrOdV\r\n=wx30\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.869e3497c.0","@material/rtl":"11.0.0-canary.869e3497c.0","@material/base":"11.0.0-canary.869e3497c.0","@material/list":"11.0.0-canary.869e3497c.0","@material/shape":"11.0.0-canary.869e3497c.0","@material/theme":"11.0.0-canary.869e3497c.0","@material/ripple":"11.0.0-canary.869e3497c.0","@material/animation":"11.0.0-canary.869e3497c.0","@material/elevation":"11.0.0-canary.869e3497c.0","@material/typography":"11.0.0-canary.869e3497c.0","@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.869e3497c.0_1614109011005_0.6863573741154985","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/drawer","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6f1a1c4e7fc5f961761932a8e421cde16ffea63","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":48,"integrity":"sha512-0m1/LetlBRC4PPSdMsorB9xuknRTx5yfASRiMoaaNqcp9Rv7jrBZEyb8zDiq1Q9YSxFkMZUxYY54pnbQUHd7iA==","signatures":[{"sig":"MEQCIFWya9pPyDFgM/MPbtmF/Llmh3y43HX8YXVWlXe9YnapAiBchFF6v59Dp65zfmK+GcMqZkwiV16cHo5q9FA9krNr7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":940707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVzsCRA9TVsSAnZWagAA0fAP/i0wVkL+on03K7WbudMV\nV8MF51p/FEJI941nkL5f7kOxDAAffjaFl9e67PIvmqAeNSRkFXG1Y3VN4X91\nDsKR2Y+e6e6RCqNKkCyto4r6IpgkFq6WPC4IW1evc+Mc7xKcPuC2twcMx0p6\ni4ois7jLyeA82iWhDYOUhlt6RhrlP15HdVoE/dcPOcc86suJN3GEYBr6jp3y\n4Lfnq54TTu0SDDXa48uX+ZqwTMC637WY4UEFkYyIGLri+WtgzbUAPa5TPfDp\nMCfEFRYs5IEEHudR/SXKGLMhSUlj712QEUQ/9qFWFX2M/27ZqSxyx+TKhXVS\nvi9xpTdFGTHU4DMAfqwdIbEKIFMDM9Lr+owrt4Ha2I635YzgKn33ElrWjM45\njSjCnLYMahnHW1CEU9HqPtvXgRxPsACIx/NP7iwfavr2FPZDf06Qqxtad4EX\nVpDlbDArIkflcBVw5VBIDb3jOgQ+zsLdvTtqg5tIQhSyfObcztM/N11s0ggh\nzNnPMytNrvmPgMAI/uUHa1NL98qp3/BRQbGca0zW0U7VGgwpySldKolNONR3\nFL35vlTwGHZtQC+tyZnyXHztQhm4rKcKsReo2mhLT4VZ88MRO+EoF92YLTS0\nJ4KrckYdWxdn+TqG5a0CPDdiQNw6jfocBCu/8dmyaH3MP+SU/VqvL9jU2yht\nwUDT\r\n=Hr5q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.8ecd7c9a9.0","@material/rtl":"11.0.0-canary.8ecd7c9a9.0","@material/base":"11.0.0-canary.8ecd7c9a9.0","@material/list":"11.0.0-canary.8ecd7c9a9.0","@material/shape":"11.0.0-canary.8ecd7c9a9.0","@material/theme":"11.0.0-canary.8ecd7c9a9.0","@material/ripple":"11.0.0-canary.8ecd7c9a9.0","@material/animation":"11.0.0-canary.8ecd7c9a9.0","@material/elevation":"11.0.0-canary.8ecd7c9a9.0","@material/typography":"11.0.0-canary.8ecd7c9a9.0","@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.8ecd7c9a9.0_1614109932276_0.04800132943540847","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/drawer","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7293de4cefc0718930841a48962de41430b96bca","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.9c85d505b.0.tgz","fileCount":48,"integrity":"sha512-xb8UuI2sbxtGv2mEAglFZC32LmZjHq9iMe/1GLcLR+R/rhXqNWcRRoLBQQ71uQagZ6dGKRtZWMAxHxL3Zuhj8A==","signatures":[{"sig":"MEQCIATVBzXm7VvdeAgGdqio8MYSdZFE8F3Mov7XLi7QNI2iAiAUFpoEnpCXoUHOqWUAKz/A6n+Rp3DiEDBrB2nV5V9kYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":940707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX7vCRA9TVsSAnZWagAAshsP/AnO+9YVSFvhEfoI4Fse\nxoeLFWZjc4WOjDPOMUgaIe8JUxni57kPO/WYekFx+O8HjTAK+3DhntQ0I5dB\nIJBeavApdHLh+3avAM0jD/7RlKEf9JHyVqGMauSGXRK0j6oSFfCdOsdb3DPq\nIWiqxECFEMzWXAyumltXxAjYELGqs2jn3PBF8v9VkncfnAnjtruOATpVi/MO\n9lf3Hwr1KScBr3FyrC2LidqD4QczQ170bM/DrPgUFYGj+GOXTWLKuSAPh+4t\ncEYg55B2TUavjoAl7EDwwlXf0CirR7qEz9qzuNiBckHc1qwWtCsH2b6jNZsf\nAj92s0sIAaYILRDy3XUxPqky0aPeyApJeVf0YpM1egm5htSRVyFwJmKGDNtH\n0BbPzCatwPkQ9twf5a19olwgTpTfx51YthlFjQCpiJ6weWjtDm5hgwB6NZnn\nfv+fNgQO2AFNYRGyID9yhbxx7t5gZNWnRAhoBCrgI2bX/3tXtuorDevhFd2v\nmUNWFj2vySR0lRezV4sR6QlXFmmPrxlc3d1P1Asg+g6uXGlrH5aZ31jk95hi\nBSgBoDj0Jgqn5NkC2htImAzuoBCRF/1yzS0dHDbVLBbdaNdUZ5tbaOkWkRqa\nS2M647zSFVyLhSzdDnhGGBU6h65upoRum5EOcaApKFc07DmS5JyCT9tE9YSW\nJB4k\r\n=5Awp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.9c85d505b.0","@material/rtl":"11.0.0-canary.9c85d505b.0","@material/base":"11.0.0-canary.9c85d505b.0","@material/list":"11.0.0-canary.9c85d505b.0","@material/shape":"11.0.0-canary.9c85d505b.0","@material/theme":"11.0.0-canary.9c85d505b.0","@material/ripple":"11.0.0-canary.9c85d505b.0","@material/animation":"11.0.0-canary.9c85d505b.0","@material/elevation":"11.0.0-canary.9c85d505b.0","@material/typography":"11.0.0-canary.9c85d505b.0","@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.9c85d505b.0_1614118639105_0.6447913669308682","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/drawer","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4315f3036b628d2e89a0ccb155b1fc729f95ce47","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":48,"integrity":"sha512-WNEQFWaNLYxJ0jyWIAb+2DK5Fecya9XunyRpnEzUgd0clNwOQ7HOwPtOcx92BsHl9KtYV4IIvutSnxJ8nOl+xA==","signatures":[{"sig":"MEUCIQCIA2juEp25SoaMp3S+fHkc1qbYjR/3uvuqd9LHfPbb5gIgeYR9/HEwD3VN/1cv2nyiNmiqmyaUgE4KbVLy5cEcmfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":940707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbDBCRA9TVsSAnZWagAAQz0QAJg3IFebnkTkcmyeIqOG\n0n0v/YFvfbzl5u7j0cPjNmzKTwrHMmqfe6yVYUDqlfJIEWBzCOIBAnLChWLR\nvSYxZcHmQX7gJyc8Ro7BFk4c+Ot8Mgigw3hO4F9bTr1Xkixrole2HMlcll0+\naFR0y2iCYdpGGVmSfDbN8t3h6NaoKg08K/4/x+Qm9mtngGTRdi9+J8pWERpT\nPNEflB26fBkd9rYStnxLnQZuFUSwVLK11c1NeLQhota1tVe7GoU0R5Xgicws\nVAWaA1W+fQvxF4Yg6isuTYziAHCjMP4+Dbu81Ibnuf4PuiGPJVh0kiXsC/t3\n5DTABJLqLCjyoG9o8mzuEc3DZYmbLs0n3qMcIRyMfiatqBzJjkGBSWeOnIL3\n2oBefj+jzDFkuwOWzNupJsTi6JU3hv35JujJ9CdovmRGjcng10zeVKadHpX0\nm3Th2FWS1DBwf2ffyGotv7BGCmuLocCWGufodjms+yMtF0RhGgNIlgqJd3q+\nLjNOjSYLg7gX1XE46Do/0D8DXcwYykDZ2eW/tkKy/WOWqq2dxUdNmge4beuT\nGhYGTbG6X94KG3cQuiyr8Ik3dK0HUPsl757mzhkUkSk5tQSf/RCrpfps+ocF\nlCDDi4AK9ETWLeo70SwD+veofBGXlI0xpyFerVkAYgwVH/V5i/1WNPfFEJHj\nwHTH\r\n=3dbL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.9f2e85fb8.0","@material/rtl":"11.0.0-canary.9f2e85fb8.0","@material/base":"11.0.0-canary.9f2e85fb8.0","@material/list":"11.0.0-canary.9f2e85fb8.0","@material/shape":"11.0.0-canary.9f2e85fb8.0","@material/theme":"11.0.0-canary.9f2e85fb8.0","@material/ripple":"11.0.0-canary.9f2e85fb8.0","@material/animation":"11.0.0-canary.9f2e85fb8.0","@material/elevation":"11.0.0-canary.9f2e85fb8.0","@material/typography":"11.0.0-canary.9f2e85fb8.0","@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.9f2e85fb8.0_1614131392659_0.2030837063229951","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/drawer","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1abf1e79137f39ba5dc453c89b4cb093623c5ba6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.19c4f29ef.0.tgz","fileCount":48,"integrity":"sha512-fssjMP/xptjIavIx7GMorSoG6pCtJPz2HEG5zs4VtH8Asx2HFkxnqp3hqyVau53W8D/cGv+ZsL/tOOJ1js+J0Q==","signatures":[{"sig":"MEQCIBKYZDEIHFoNR0csNUGg9AOAktm4U0iADfjGMktyrJK2AiBlS3ZfyJyy/9rJdoI7lHjq8wNcgLni35D26Exb9GCVnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":940707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/laCRA9TVsSAnZWagAAhpkP/1pEcBm4sH1HWZeKFgid\nGkBGlZnGvkvKSWkc0gHtNR+EtWI9VAEN1pIUR8EX53aM50aqQZvwjN65X+UD\nF2DxzlTu+gRhXwd3Yiul1vHEWdy9u0argevdWQW1B5JbQzt+YuRN0bUzDHeN\n+yvr+92HuXXx4zwq1AZNxR/NIoPdRMfsSal/KzMdtaoGJZrS40LDkpGuGjHa\ncyN9xfDdYgBVy2kudq/qj6yCmMrQJp1/rhR+MRE/J4GnzC7HXvcYVt3BXOY0\ng9uPWZvvTFd9rbXvtou4sO3+LV7SIDRPr8PwHHCJUlHX86HuUTpJ1b9bkPLQ\n8XVz2gR7gOmxp0ac0Id0DGGAZOoqeqzw9eK7kFMIXtln/1wchMRwet1Jqlpz\nEq/vLHwX2bJAWFwUIyrHukSU0HH380ND0yTPhkkrShGcucPx3mJ44pMuHSzk\n2iCxkHSSWS46ZNCmV313pD92jy6MJuT4MGOPtKpZqGxgJie9pqkMfbSOwES2\n7wJhhUM1yiYqj7pArrhEEmeZVz37MMeJ2Gp2uRMqc9HGSrx7dvo25oupIeuK\nWowjzUTDdDEiMUF3L8JmOwO1OmiRhL/0LniTBtKWLNC7lpPvpC4AvpguCmT3\np0M0+gWVxPtM8ADVCMF0bMt4tUpF3Gc4BJIehMM3CFpNzCkE6MWbR0SJzkbK\n5kDK\r\n=2SwP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.19c4f29ef.0","@material/rtl":"11.0.0-canary.19c4f29ef.0","@material/base":"11.0.0-canary.19c4f29ef.0","@material/list":"11.0.0-canary.19c4f29ef.0","@material/shape":"11.0.0-canary.19c4f29ef.0","@material/theme":"11.0.0-canary.19c4f29ef.0","@material/ripple":"11.0.0-canary.19c4f29ef.0","@material/animation":"11.0.0-canary.19c4f29ef.0","@material/elevation":"11.0.0-canary.19c4f29ef.0","@material/typography":"11.0.0-canary.19c4f29ef.0","@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.19c4f29ef.0_1614281050349_0.6415945174698123","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/drawer","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"828ccee5fd987806ad5e2ff35fe9e47441e6a598","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.63df6e9bf.0.tgz","fileCount":48,"integrity":"sha512-rCTE1Q8M4DzDT1EAPUubm22RxbJUECRFDe6EXNXomVS8WMK3RSJbooRmqQ8kHwmnzPnW6hWPXUXRZc5PTlPvZA==","signatures":[{"sig":"MEYCIQDzqwwDKgagmDx8TuBD37R7b8/go8mjX9YSvMiioIQdQAIhAP+EbNIP/Hw54/5gmwsXhc6cMA8BJ2yAlOOJqPTxcEHv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":940707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/zECRA9TVsSAnZWagAAT4cQAIbSxbpTyaU2SeojaHBx\novHkbYhyDaEhw6vA2268iZ7oEMJ/neQZyDoglQ8rEoWcHq+MP3/5QOfgYniY\noWiBtS+9AqweadizIUGZRwth31M3CrHKWeLTcB1HdhjkPOBYHcfzQGRAZI5X\nbfgEoy3J+aTs0futxcNFsKxXU84rpAWmhxnoKgfXCJh6WizQJ2q2G2KWdAJe\nPIq4WUzbD85zPOmSnMt0OPJkYSuQvzZAjexGNv3GVCRiVaiLuwCwDDL8dfrl\nq/yCezEXGO1Ve5fAImqW08qaoaAjf5UdjR3QfckcrtDJiX7zFW1gnLLnFvX+\nI8gVMSgax7LQnK8SToRUZqGT1yTsZW2Mmvo9lNgc3MYq2YcBQSVbal/MFESY\nsDAbH2v1BGgehdYQyQ4BMtntK6IKBUSVdAzhH//dBRTL+yHgR3LYXqNuME1I\n5YfU3FtF18swYSj9HcBgXe6TCQbRaxI8sAKwORJ6RXMQmcF+cO8jyy9GC1/4\nrFSuo6i/NNBYDQ6YLq6vosc74AAi6wlqVh+yv3B8zzFpVME1LxGrT4DOCgKw\nFuNHq8xPxXgudVsCOGXr8EpKU5cOTx2TEtiSY/SrqHqNE5y/r72qn51i3Q/U\nfu9xbxNxBNsorx3uDu85OWDxB41k9Mjssxhj3e89vAICqh9DqMpItA8wGzZ7\nIpRx\r\n=ixSC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.63df6e9bf.0","@material/rtl":"11.0.0-canary.63df6e9bf.0","@material/base":"11.0.0-canary.63df6e9bf.0","@material/list":"11.0.0-canary.63df6e9bf.0","@material/shape":"11.0.0-canary.63df6e9bf.0","@material/theme":"11.0.0-canary.63df6e9bf.0","@material/ripple":"11.0.0-canary.63df6e9bf.0","@material/animation":"11.0.0-canary.63df6e9bf.0","@material/elevation":"11.0.0-canary.63df6e9bf.0","@material/typography":"11.0.0-canary.63df6e9bf.0","@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.63df6e9bf.0_1614281924458_0.677732244070856","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/drawer","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.981ad970a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af23246ee1aada7c7940c57c91163a7bbb7562fb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.981ad970a.0.tgz","fileCount":48,"integrity":"sha512-uUFEDlUls8AMFwVk1nlfG+fKuELwo/xkzDF4b23JRhu5IBA4R7bmUxCkMUIMzxckFIAx6ROqfYWwJy0AV8E8GQ==","signatures":[{"sig":"MEYCIQD4fed5WzVa96JSAWGPPiIJ2N9HcaZNu7YC/LooBuW6uQIhAIASbRwCLpWfdj1bD5FCaT/6s6l+/Z5jlqsNKvJ9Yl5a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":940707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODxLCRA9TVsSAnZWagAAjS4P/i7qKJnisl7PlXSY1AY9\nJmUUjB7HIzOiwVe5FnPGAOAXU5wfZBpKjHk32HrGh60pjU+qc31jVJ+gHAJ/\nXHJAQszNgHYVDhXzRGLDmm5DQr+GvPO/zrufzxyuwCzYx40ifCLVGQl+Z+6f\nxKvHPgIncVBJ/CGEnh5T4DjEwfJPJneJD7e4p970O0LkkVwSWaSIvRW7aJhW\n3YBk89aQ7/3yi0HFEVeJ+RbmKCFGXPOZNMEdFhGM9SW5HjijZDyxz68KUlbt\nLmtlfaUq/dRP3/pqBqXVJWbmwivP0fKmEI+PV41bZwvhhOQCsyW9tH1ACedl\n+s6e6cp6x1dY8wCk4VBXJRaCJFrMsqLUukyuFytJ89dEWPqLKIuifbcGqAsR\nbZVzs7fjU/HNKbP59K2Rp7Qz1XqnGYxbZz1Xol2KDBAqGekWg+FdkzeM7GtJ\nY9dCSvhzTruL2ukg8DomNL36bbAAVQPmc+uJwmvCnJKkF1je/3wcEi5hUhPj\n5ySSoBqJg+1Sd1Z2ylCaT60qF7Tl45+XE8jBo/oxq17AYInfIGpvD+SqLdnd\nXrxEmMeZNclSZYEs4p0tQFy0iTMsNO8fkn62zBPGXQbKeze3WlLVoKHP+tAQ\nKQoPREImS2N/tpG77fU2rw3/187Ay8y1LihCFF9FvfnIq2WF2e4pYV8nVf1V\ntPjG\r\n=ILld\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.981ad970a.0","@material/rtl":"11.0.0-canary.981ad970a.0","@material/base":"11.0.0-canary.981ad970a.0","@material/list":"11.0.0-canary.981ad970a.0","@material/shape":"11.0.0-canary.981ad970a.0","@material/theme":"11.0.0-canary.981ad970a.0","@material/ripple":"11.0.0-canary.981ad970a.0","@material/animation":"11.0.0-canary.981ad970a.0","@material/elevation":"11.0.0-canary.981ad970a.0","@material/typography":"11.0.0-canary.981ad970a.0","@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.981ad970a.0_1614298186634_0.023827900200790175","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/drawer","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7968c6668ee69b5e2703519c65bcfb80841cdf1d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":48,"integrity":"sha512-AO99PLBwjDf7t+fSXDcWuCsbORE1d1Yv9LNhC6lpZPgZBsSH7qY3JEcKKeevy00uDB1g1q22NHPVMN3KZLDbNQ==","signatures":[{"sig":"MEQCIEZFRdTuSc+pfLhFszEsl29Hlt8nArmVY6wr46eVBAxmAiBC9Q6uuHpC1ngTxNWSHSmTL5w9TR0WrEa7ItTo28KbLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":940707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUCoCRA9TVsSAnZWagAAN5MP/R318xR/x3IPT4Auj+5h\nv96We0LESfTnrYDiXcGkG+T6oHKgNJi7KX7H3KArpXn+/a6C15WpzfL2TOa2\ncn6V8udvb4biaygRbqJ3K48hBvd//sU5Au/UvWByiHGmC4p/HEWa+mkqs3V3\njUWKWRD94bhvuFhWVUUyplhWjpO5fsPIxSz1a4CtAEdzi5cydBF7OfejVE/f\nZwLCG4QJA5ik07srlR81ESysKsbiEF0Z3rlEf1bfV+Rfpn/H5rlF1HkyOCm3\nVq0S/v8dNkMxKtBsG7bKAxSV8qTHqrSCzQBIujhIx8M1zBzDe7XeMhl+VX28\nB0s2eigLM4GLVmM6g+myFbVavPgS35UFSNVWcu66kQW+WsUf9Tc8Og7gqEx+\n0sXtgYL1/rRvgT1S6l7PxbeHZPMy6G5MMrJmpyKqrez80wa6WitstmRFsDsn\naCD/yprsv45uzfNmGp8Hgp5X5xan8KClvsuTNqyJLeN1myGbDpN9DQP5ujR8\nerBkIvBGjdMA9DMkiokT3Xhym7PqXqWAel+zc+dMOo8MS9I/9NI4ehvajZGX\n+x80xmEVd8I2gEJM75lA5aoRpzS46/i8cieYgEEYuGg2lwitpjQGmWzkaPPg\nNOvsD3hjCKuoCGdxNl2ev7Pebcmd5u7ob0uO8sj9bVKSeQZP5tYxw6Jb2YJu\nHp5n\r\n=m0H0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f9c9e39d6.0","@material/rtl":"11.0.0-canary.f9c9e39d6.0","@material/base":"11.0.0-canary.f9c9e39d6.0","@material/list":"11.0.0-canary.f9c9e39d6.0","@material/shape":"11.0.0-canary.f9c9e39d6.0","@material/theme":"11.0.0-canary.f9c9e39d6.0","@material/ripple":"11.0.0-canary.f9c9e39d6.0","@material/animation":"11.0.0-canary.f9c9e39d6.0","@material/elevation":"11.0.0-canary.f9c9e39d6.0","@material/typography":"11.0.0-canary.f9c9e39d6.0","@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.f9c9e39d6.0_1614364839698_0.024536954320258042","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/drawer","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dc5c943d8f601b092ef8527b0304cc0182cbef6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.c97d7d881.0.tgz","fileCount":48,"integrity":"sha512-0Ge0SwcN1XMnOvwzxEO8KC6lgqJ1nfAl5bkDQ7SdP8fBBGJgA+GrXgR3OG8yTTfD43LPFA7h0w69T5JNCwEQZw==","signatures":[{"sig":"MEYCIQDjx7L6treJcB/ZDP+Y2zRNywA43IIJlFXqOwZ9Kc4WIQIhAPq1CiI7bHg1gCSE85XmeqMcNgGltm+nWkbzmoZ2gmWr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":936929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVSaCRA9TVsSAnZWagAAKyoP/2KqxPeC0t47NbYQ3auw\nBK8WfjAT7lGHUKaN8JPeC+Nrz4i2U+dVfCiAdEwvPHnGXv/Ihisp4k5X98pO\nv/6QFnXM6M02Xj9ueZaovpbb7NZ+xRSsQnfSBF8d8g1cwkdu6N42LjYr21Wz\nLVG58qhUsGsFACgqmDXM6qNFW/sRkS1ju4FLA/2d6IzCDIQgVrTojbk+UwIT\nlYYrA7wIHZMavL8RPkntnIACz4rgajEOx37rVbB6WtmoG0bZfCInkBhJJ/0/\nza/3v4tY4UZnn3Z6AAOLNm243P0pPPWjXIDIAD8uVnbFq0iHlDsufIrtrgLc\ngmmSXNdQBEFySZgRrQIg/Uxq+bDoALrm7IMrz+vbmZbKw/ufeHPPZLIwrH7z\nj/JakzzATxMzbMLwFcj9Tv5TspwRyqT+eoGcDrp8UdL3C3jk2RSpxtQRCgJE\nSS16jbrJm2hvCTI5AxuwwFsORixvvaYa+PfOa6GLqkpufDu1UGiBRlO0jWry\nq/n/iI5VVi4Cr5m3PyamZlkfNnn+72lnf/eJkX7xNvWbrw6XdKmWympcQ7Sh\nfMQVwGTSb7SV7TpRC06pDedM1ni0d+wgvDtC0UOY+rl+JCJc/Z+imRFOBYYv\nKfcwOEGhInrfZxoBvkLyQD5a6KlvCnrnU6M+s5mWMfXH92fQwGYCqZwm4Jtw\n7Yd+\r\n=PWSY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c97d7d881.0","@material/rtl":"11.0.0-canary.c97d7d881.0","@material/base":"11.0.0-canary.c97d7d881.0","@material/list":"11.0.0-canary.c97d7d881.0","@material/shape":"11.0.0-canary.c97d7d881.0","@material/theme":"11.0.0-canary.c97d7d881.0","@material/ripple":"11.0.0-canary.c97d7d881.0","@material/animation":"11.0.0-canary.c97d7d881.0","@material/elevation":"11.0.0-canary.c97d7d881.0","@material/typography":"11.0.0-canary.c97d7d881.0","@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.c97d7d881.0_1614632089767_0.4809184299951792","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/drawer","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"423e2ef18739b2743b2419f620dde1a052ea8a56","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.bf670dad7.0.tgz","fileCount":48,"integrity":"sha512-4b6PFrRRIfzBHWTcJLjiLUfCZJM8MqtUIsvr+xf2BBtab3lpwxPrUA53+m1JFrPKc0f3wChLAFcT6OIKqHwdSA==","signatures":[{"sig":"MEYCIQCJSClAgJZ9DQwSRYwuQj/wfrAro5j1DbREMYfy7TNC5QIhAIKW8Uo21+c4H65vpeRVrZtHxbQK5ZrjJc64nJQ7iGsr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":936929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtbQCRA9TVsSAnZWagAA/1UP/A3Kk//1bBG60gmXYHXI\n+IAKm7VtnRRUB+SFWVlqJhf9ET+qtsnatCN6CgH4kUcD+We9+OwsU1q97Sv2\nkERfOslL4vO6ECzh65Ae/bZXuP0ozRQ1jT+Fb/ueoX3JWAEYnm1aCWxYfTtC\nJzybZPHVvSOLm+jRJNS8L0YBtNwsoZqACvR3103Rhv8RAhmVxg1H1YwHKZJf\nTg8GpK4j3k+nTngIbvJHtnHX3kQjDPYMLXuCbfWsV5HhZANgD3XsbM/4qk5u\nZhRycSn2R/X8eNUyP9MvccYbpZCIHa9xWEvKrdGn5pDtGqUQouO2s9XvApeJ\nOEIEvH6+Iwzzuu0Vd5I67lXfWd06/wPKoJwZ349sDupy/5hb9OLBxIdfKY2s\nAk696eHIqdb02v5sQIdqPJJsCDQrN5kMiGgkjRoLhkmTUMkAD4TRas+7NXO2\nlbeuBwENsfUo0P3nlh0qY1dkPl+8F6eEwTog+pqaOob+z96UPbBCCRGpY6a8\nFsIAb9BglEAk8b2d0gafo4Qa4rrEHJp/hmJ7IB1+JO+K4lgZaH45ooU7WeKJ\nvTK6EupgUKpjKoZDFSDssIbclu8hTA9faGBvDyaSS0ByyuhL6OEUXYHZACnq\nS0vEG3U4nysbdW3TkTYbMJQiPqPWV2XNmp9NiV17zzdbK1SSi2I5tXbB1Vka\nMHou\r\n=Q4Zy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.bf670dad7.0","@material/rtl":"11.0.0-canary.bf670dad7.0","@material/base":"11.0.0-canary.bf670dad7.0","@material/list":"11.0.0-canary.bf670dad7.0","@material/shape":"11.0.0-canary.bf670dad7.0","@material/theme":"11.0.0-canary.bf670dad7.0","@material/ripple":"11.0.0-canary.bf670dad7.0","@material/animation":"11.0.0-canary.bf670dad7.0","@material/elevation":"11.0.0-canary.bf670dad7.0","@material/typography":"11.0.0-canary.bf670dad7.0","@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.bf670dad7.0_1614730960000_0.5416862007074972","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/drawer","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e3756db9541bcbb2d5ba7e351093a1a637f4007","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.c7d98fcde.0.tgz","fileCount":48,"integrity":"sha512-x6wHm3+Xs37xFAUHyTsVD4ZziRJkP8Bce7vma4XFqYTh2+k6jAMWkI/bw5v8YTyuQKhzz0KZ0Ol/6XukKv1DQw==","signatures":[{"sig":"MEUCIBEpErT6b4NvNQrJSm3qHZ390l3NQdLlUAXwVlPvZWaHAiEA9ZJqbr942+NNjsQBIO1rTLCZeClwnW0XLIg8rAKqA+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":936929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/KpCRA9TVsSAnZWagAABCkP/jC2CKMcmZRHxHn6Qhix\nvbg13GR53EhopnfqKbRbg8Q8PvEKWxdZXVjxkFJeOPVEU7KLCc0SQEtPYMp8\nH4Q1fuD6QgcaIz/sgV8ZrKa4m8qvoAqB8nmf3jca4YzBeM5PXSdtJN7g6ZQw\nMqvXkLC7K9MtNfc8UwN+ixbqIDGiSNbM3qgIWgOsazaeREd1dDqOmFM7Yi7Q\nv4e4GEJ8CnfTcZZWfJrTFWet0ce3qDahTuMLU8iNeJFuQzJGA8i5Wg6r5XZi\nw2OS5eDnhy4XjAuh4NpSV51cqV/EMaVHEQ7KZGVp546Fey/QL0jW98gxURhp\nu7Y8FSFhs475v4b+wW4QNyky+os3IEKEyo/Rsjut7ifNf+GRJWF5J6oTRGuk\nqRADoeVOTJuMeG8B+0tYOa64PvOinwiMQE678fTLhFAFrxkHKkWNg1wt6+tt\nMNmAlFf6Oqdm1LpF8lK3erjBPPVSWEO0RjC2IPgnEmtld7cfH+Cq7ZssOTEO\nckaLKOqIFs9L86/w76p8sxIQSU8TKPQ9RQZmukrTiNEOvljQ/GIU9MICt3mU\nG9Z/m466PfPXybPeOoupjzxCVHH7besjIjtIr6mbMZSMfou1BOknEkwJZZ5p\n9ChEcE1q2QWXDh79HBb88o0FB9/tj/I9AVi2R9n06zw2kh3T/3iO6/TYEoUW\n3nkX\r\n=Kq0v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c7d98fcde.0","@material/rtl":"11.0.0-canary.c7d98fcde.0","@material/base":"11.0.0-canary.c7d98fcde.0","@material/list":"11.0.0-canary.c7d98fcde.0","@material/shape":"11.0.0-canary.c7d98fcde.0","@material/theme":"11.0.0-canary.c7d98fcde.0","@material/ripple":"11.0.0-canary.c7d98fcde.0","@material/animation":"11.0.0-canary.c7d98fcde.0","@material/elevation":"11.0.0-canary.c7d98fcde.0","@material/typography":"11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.c7d98fcde.0_1614803625459_0.9102233432913744","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/drawer","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7961694f5eb947b5dbf75eab24fe0a5cced03945","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":48,"integrity":"sha512-d9qWojoe+jIyQ9BY0nSS6aVCXo8GLe5lm+adEYAJEN9v7+VxxD+LuDuUoo/7Ov00H0uWdv32ktfX2AnAhakv/g==","signatures":[{"sig":"MEUCIDMImbJsd9FTt2DDJm5Ke2LuIlZea/mBK8J4gc9bHYZ9AiEA7D59BUe82ce7PsYGOTXooVNy+74c+rCAc+prLR3Q/OU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":936929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBr1CRA9TVsSAnZWagAAVk4P/3SLCJ+aoolwDHeYRSXR\nN7S788Tvm8OP2y4MMVP1uPFUVA8ANAV1d8eImuum+VcqlDmA03j+DtQ6cbQR\nTZcfAb0QqCU1XQjKMOZmdrWS9wy7syG+zzVFpqkjnZ3POzuymBsK6p1mXrod\n69y4cAFgSdBjz2rgV2kwMm5PrI4hLSTlfykjP/ht0F5jPiBO6i9wqtdZBsHb\n9SezGW4yspb/XVE8QTFvGnn89W0Lnp9hfEI9+k9aa/fXni9sh8V3gYN/5JdM\nWK7+jyB4Fz4wkETtKMIZzYtKWv4g6+0dq8CJ9+83p8qzj6Qy+Abm5lea+uYB\nzJqFNqkQvZYNAw7IkJ04gxU0CuGQxitjKYy2D+iUE4NaNM1y56MEn6fB5RXM\nhEb+noprXxQsAhItgkRkdjKfKQtRlKM/iNPz1zGJk1YwbvwZQ+JFbvFJW/SI\nsnOIzy/P32j7d+lLzT1XGbi8co1p40sosAUIit06X3cZHxHKcfVmzm968L9E\ncnY1O2w0WaYjcF6rOYNGmdJi0QT6HLLdH8KjRwoiem57QIp0oxBkXwYgJfYj\nLKpe+E9SAdcqeuIDxvn6v++mUojwbaxJcIzghalK6LfqyiwGYMVa6QCEW8Ow\n2Nmjjo1MPs+sUrXTUY/4YwzsNMFZzvmce5j5+XOoNelhpfCvq+FM22TubTLT\nMzRu\r\n=SElL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4fef8bc1e.0","@material/rtl":"11.0.0-canary.4fef8bc1e.0","@material/base":"11.0.0-canary.4fef8bc1e.0","@material/list":"11.0.0-canary.4fef8bc1e.0","@material/shape":"11.0.0-canary.4fef8bc1e.0","@material/theme":"11.0.0-canary.4fef8bc1e.0","@material/ripple":"11.0.0-canary.4fef8bc1e.0","@material/animation":"11.0.0-canary.4fef8bc1e.0","@material/elevation":"11.0.0-canary.4fef8bc1e.0","@material/typography":"11.0.0-canary.4fef8bc1e.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.4fef8bc1e.0_1614813940469_0.7947320555958279","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/drawer","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"719f364d9aa2eab775e198d1b6aade3a723bff6b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.afae3a3ec.0.tgz","fileCount":48,"integrity":"sha512-wQZElLt5PSiAaeqTauegY1w1XjKcznxXT1uvqpoTxKCtkzdzPvlpndgxbvedYDMnUHlsJnczCOcQmAm9/pel9g==","signatures":[{"sig":"MEYCIQCzo94CVtPKeWsaYm8rx2aUrDewBjZasdvo5C2tw/ws1wIhAPMQdAAjdOhSJWdqac161/ZuhnSOn5vOLVys4UvL+Cj+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":948426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB8pCRA9TVsSAnZWagAAzu8P/3xu7bCd6e/wdtpz6M6A\nW6ebra5pxPzt3SXCrXZvWWsbKtF+MTW4WvuFEcB52QQrAk8X54zU9jAK67PM\nTX4FGApZRVf2qQjhu1MtiYA2uLR7vRMuL+NgfTDnGUHbILi/c7+TXOaq9VXA\nCPztH6LUh/FsSFyJd2ocvh0UF9KMnS1m7Ss6dnbCpwxlZKIZyXxo+kkc+ZOc\nsKr7vMW7HO8cej2s6v4KPd+pRcNrqOxWxkPWcehsOWQXGpxPGHFYWfBeTPe9\nIzuLyLofe6HHxhlsdTvmn7Y8aEEaYW97JGLW5BMkNzGYzdRa7Z+BJgOGEiDV\n2mM2LE7EdYkBYvjsQR6zZpqKxJhd6JbahfylYM3YzNwRd8jdVlY+pzaIUKdq\n3fKbOV0bxxfOfOr91L8msGWCW3xsy8dpMoIWfvOM52BJ6fkXioPe3QA5fiGG\n1nWv6qH1bj+RQC49OP9Z2bLBNj2aX8lBOgNHO1hOneLjxucsXX2X52TkYkJK\nxCJOgBXA/Ek05YwCAH09px/IZf0NA1Xlrwvh8Ox23JUh2/yjKRhyuijWkYIh\n3QKHy/mWnVJiHtKfU8wuUVx7sZJ4eEX5LeLgEvBCS2pSzARoLNctOe7xJQY9\nClxK242dAg+Cj7481fAqLbL7obiTprqn6bM99eH1a8Xv9rr+IlHEgmFBDGvu\npyV1\r\n=1I7H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.afae3a3ec.0","@material/rtl":"11.0.0-canary.afae3a3ec.0","@material/base":"11.0.0-canary.afae3a3ec.0","@material/list":"11.0.0-canary.afae3a3ec.0","@material/shape":"11.0.0-canary.afae3a3ec.0","@material/theme":"11.0.0-canary.afae3a3ec.0","@material/ripple":"11.0.0-canary.afae3a3ec.0","@material/animation":"11.0.0-canary.afae3a3ec.0","@material/elevation":"11.0.0-canary.afae3a3ec.0","@material/typography":"11.0.0-canary.afae3a3ec.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.afae3a3ec.0_1614815017057_0.06659701446235133","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/drawer","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c00861b579cecfe4f6552fb3d8fc7f54c23b458","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.0a0b10f22.0.tgz","fileCount":48,"integrity":"sha512-B0qBmqEU+H2Tr80mnDAxs6dO1lhSb5GXCsg5yDX064nbfEIqzomw7+OHx8fc04DSBvWtk6drSd7R/1u+FC8Vsg==","signatures":[{"sig":"MEUCIQDgY0BZJfJysF5mQf6UZJNjObVYF15MsIUILHSVyCpGcAIgaS5g1cyKJwYCBDPt6+HNj9UR43YAsF9WKTdbHpjboLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":949036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCOiCRA9TVsSAnZWagAAxeoQAJqG2DyF3W8h8O9Q+IIX\n4uUG0wen5o7bbFb/lX+xaczE2twrqPSiXxWL563Rn+OoC8jGFBFfdZ4W3d2y\nzuiT4lVvWgxeWjFEGca/zwKYYJPRGOjF/Q2WnGEkRPUNVy5temlWYEg6xjUE\nhPbHsi0XmhIezyJw3ON028sxqINXVhC5kOBs2GNmJTVpllIKRv+KGwrvfkkX\nL7J2FlxDc+4rzOrVUbw8PeNrKO0OI3OhckluWfqITzLlDUxn3WOqfOK0QIV7\nT5y1X22GNTOZ3dQKVTtmU9wu/2IAY6PakKSJFSfSo6MF32sfj/OC8Ba3Hgyo\nxjqPuWS2zOTZjPLzdVtSjpy/8gPdfeYDPOvSy3FGSjNCqHYvfk20gWTi2xKa\n59Ck9pus9CXN1cN0/wS+UXJCxrCfNWw6iV6MYMs9/T2qoP/BkTzge59jNBwX\nKVLLzhaovJRws3m644o0WnnK1eaCM/iLUKRsuDK2KWJH3vnvPSmkeCl9qGiF\nXNMcCD88j9ZDkRsl6JDPcLW0CdI0NzzSr2cSuj4moqsSGvDWUJQaSDsTOaW7\n/REdnspGZmhoPHxNQZEaKMb/QWbDWgyg7VU7DCax7I2ZKNTpoOaOhiKZPQDN\ntjZk0iMyjJza1XtwAGqi+j00wWMxr9lOJypfVHjlEou2n8xUQl4sbtBykynU\nIVVt\r\n=kDnH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0a0b10f22.0","@material/rtl":"11.0.0-canary.0a0b10f22.0","@material/base":"11.0.0-canary.0a0b10f22.0","@material/list":"11.0.0-canary.0a0b10f22.0","@material/shape":"11.0.0-canary.0a0b10f22.0","@material/theme":"11.0.0-canary.0a0b10f22.0","@material/ripple":"11.0.0-canary.0a0b10f22.0","@material/animation":"11.0.0-canary.0a0b10f22.0","@material/elevation":"11.0.0-canary.0a0b10f22.0","@material/typography":"11.0.0-canary.0a0b10f22.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.0a0b10f22.0_1614816161746_0.8625291227698675","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/drawer","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1a13c2c60be8c02ac2a3c4d6217d5a4d0514de9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.6f678a91a.0.tgz","fileCount":48,"integrity":"sha512-3NK504kxU+wx/i6nT40bx4zGT3i7UjezVvdPR8Lh4TcJAXGTzMdMzDwqplFRVCDxQK9dUw2ynD6SbzUNkup8+A==","signatures":[{"sig":"MEQCIG+TEoX2w7HfCAOWkS199kw49fdcPR3LdWN+gukY/ld9AiAje0xE3wUd7syUESgbtqzR6wY3PbDhQRiiCUlWfA7ecA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":949036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSniCRA9TVsSAnZWagAAXFIP/3F4+lxdlSI3t+9BD4i5\nA4EP4ZPhvaf/zRKNAnHY2fuadk0yr0lfMlqitzSGzSxRq+f2OY/3i4Tgt2Kq\naA+1iB71DvdvxOV+/4YXbKuJB4vr7eh+O1itByFwyH/+Dfs7DQEqbGsSukV9\n+g8DybnVa442kQVsBGAMTtZ4J6A7rirNcfRkxu26dszPqzVIlqBs2fleDjaw\nEN5h4igdUnuskXrpkF/T8pTLtAcf4HJ6jj+Cdv7auIgn40p3MfSwdUPgxZRH\nFEpf/np6dhmA2mGff/L5Pw8+Xx6/bbiNo7WdhTJzM/vg7M6dTMJUCFbD6VIH\nkYtdcCMNedxPuSp2K032oI6PNsvw0SvX42kfwCyj6IBQJQeD7jne70/MkJYA\nkLbMdJDDvdInu6iOgcg+K88lqL7viJjEQlARwWFPYITEtPJlML3Q9x57RiKd\npPU6obMiLse0MeNwh9eW8DXrRmCPnSZICxPGQvjSvRCub4Q6wmTpi+08oozq\nzW2kRReIkscz3eeJ4r3vTN6JPbWZrU7LFgAPBS4x3yJzjOzX0gVoSpe1iozY\ngOSO5xORMvmQ4b8FeUgHzfv2eH559YST7IflBBHzETM81rfB9YoksMmxl3rs\noCLnyFp74eKNRw4l5IX+dNXLjK9Dgm1oDdy7gMxyZH71htIPkM5Dg+9EBNkl\nf+uC\r\n=jznx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6f678a91a.0","@material/rtl":"11.0.0-canary.6f678a91a.0","@material/base":"11.0.0-canary.6f678a91a.0","@material/list":"11.0.0-canary.6f678a91a.0","@material/shape":"11.0.0-canary.6f678a91a.0","@material/theme":"11.0.0-canary.6f678a91a.0","@material/ripple":"11.0.0-canary.6f678a91a.0","@material/animation":"11.0.0-canary.6f678a91a.0","@material/elevation":"11.0.0-canary.6f678a91a.0","@material/typography":"11.0.0-canary.6f678a91a.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.6f678a91a.0_1614883298064_0.1785218345941737","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/drawer","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdca62a2cbdb04189b76d0bb6e62d5bc703c074e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.f5f1b613c.0.tgz","fileCount":48,"integrity":"sha512-fcNA1sGP3HmhJ/WTSp3GuIbbD1OenOYo9CtlC2VyohW1Zf9deV5bEMxUoYk1cBD8j5l51hRitbfW8STxb7Orow==","signatures":[{"sig":"MEYCIQD+DImWifvg5Wawxymqbpb10GH5iMabdabeGAeW3+qwGQIhANsvdOafej9kRUFGt1iOmvZkJFucZKyY1zDjVbiqhahm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":949276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUg6CRA9TVsSAnZWagAAB9kP/i8uCHNek4XPse0fVyB2\n2tdtSbmQfEf+HIVTlPaeqidEV1qx7TBTZE9eIfsOFzbcLU29ZkCgWsoDrWLX\nV8aZuVe9gjQX0pFElwZLK55iqa199oszsQXzkPqy4WwQoBCosZbCajGzuJeJ\nGNZVb0OBz9E6adLCgQEj5L4NOKh6P+/wAOVE2j0Zmhk+Q37uOZx2nBibAETA\nEGrz6pFsD7AEfyy/1HJVdrzp0jTvc7fmobVqNnMD2FLByfpJedsUP6BVYEiP\nAWgYelGpdZTfOYXgXi5jkdgLVkVxRGvu1qMfT7/GF3ZaXILmqVrlS4qXzRSo\nTnfHOht8Zc1gPikGClOxZzz4wfdHd4V+e6MEjlx05tbEzDo9GoHMsu3Qhxwl\nXwTMa908ig4hTIhCS177kGmLEVfFALVSEO9xunsAnokxAHwC06XR6EfZaQHh\nKJu7aipBodXIjEZW3gK2sZ4SWb0zE6DlpLstQww4zQKGapS+nsUIv7LsS2Bj\nrJFe+SZYIg4du7JVGpMaqGeNkp48rbAkCG1vPUjwQ8DZr0NyvqX/xlPbvlS4\nRuC7+iaEYURn+GkP/yVBQfFsl4PGLft5gfRgN2JgBq3c5cRlhKHk5dE1I3iM\na7EQiG6ZIdCjK2bQ5oGxx2/CM86k2uLdb0UBxSkymkbPtwd7IplpGQJCQ3jW\nTNg+\r\n=mnIU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5f1b613c.0","@material/rtl":"11.0.0-canary.f5f1b613c.0","@material/base":"11.0.0-canary.f5f1b613c.0","@material/list":"11.0.0-canary.f5f1b613c.0","@material/shape":"11.0.0-canary.f5f1b613c.0","@material/theme":"11.0.0-canary.f5f1b613c.0","@material/ripple":"11.0.0-canary.f5f1b613c.0","@material/animation":"11.0.0-canary.f5f1b613c.0","@material/elevation":"11.0.0-canary.f5f1b613c.0","@material/typography":"11.0.0-canary.f5f1b613c.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.f5f1b613c.0_1614891065793_0.8869249605617602","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/drawer","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.606e767ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81da88fc2866ea526d21be3a5dcc35d815093d6a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.606e767ef.0.tgz","fileCount":48,"integrity":"sha512-yvrKMnX6u24Rq1OA9+FMX0AbInZQBuohUP+RBjX3EWMgIsCg5cfKLTpVhWu4ZGfsuWtpJClVk63S/U4hJjDqLw==","signatures":[{"sig":"MEYCIQDDcXO3S1LEaAQe9bUIhICF872CkvPNZXtbiHPb3IRquwIhAPGFwcZv/vOkxzsFQHtco5Bf5N5vdWlmye9Covb4XR9B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVViCRA9TVsSAnZWagAASgAP/iPXR89KYkWfF6EHBU/V\nYEzoFReW1Reyly2vAFF97XiyiWuQ5n58KmFzfuOkjOJqL6Nb++LCagayA8bS\nQ8slsL/Wpy1U+GLE6gfive7vB8Mz573kONVELFV9qb8FiZ3nHaMgzmTGLKeW\nzEL6aMG4cg69p7PyHiqXWYlCEYwpyKmz7yFPeJiu9tKfFT1h95deDpHHYUQl\n30DAVzRwoAw25Y2pHu5t4FAhzU0kfAJTJAk+nO33hNC0XYWa9WYwHCFIk7pb\nZSuIK8lZmG+TQtZwGP0CUvN3VU6DQU/1ZKIOOF6zwFkYpemdiB56FYgnOo4p\nzkQEgegptc28ah9UDzEe3v9jM0ZyevF8P6OhCFr0MjXhVOnQl5s+cotJ0Eo5\n0UeHC0LoUBJIhm4PHKToRDA4+Lw/uaNNyLpX1ciQEut3K34JxzdO5MZS60Bq\nw9ILn7X5cu2rW0hNdv8faSMZSfd6Wq5AI7WXiY7J443PDjT5BwCkZQ3XCwI9\nhEtHEQeDYp49VKZR3nNTRwP/gRdrAd6g0+i7pkT3DXPJajq1CqEPsfk1hGqv\nYy8bErvGEtMHpaoGVRBwmzK8y2Z5qJX4j48USuAusbwQGwW1Y90bYdtJBdjU\nWIQaS+8R/lXmuEz31bdUbgGDA4X1saIz412/pJLRWsJ/0XC3WQQ14AhxlrqU\nsABQ\r\n=R4CJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.606e767ef.0","@material/rtl":"11.0.0-canary.606e767ef.0","@material/base":"11.0.0-canary.606e767ef.0","@material/list":"11.0.0-canary.606e767ef.0","@material/shape":"11.0.0-canary.606e767ef.0","@material/theme":"11.0.0-canary.606e767ef.0","@material/ripple":"11.0.0-canary.606e767ef.0","@material/animation":"11.0.0-canary.606e767ef.0","@material/elevation":"11.0.0-canary.606e767ef.0","@material/typography":"11.0.0-canary.606e767ef.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.606e767ef.0_1614894434127_0.1990389621411015","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/drawer","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bef38739adfd71caf1e4373c48720b4405a59c83","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":48,"integrity":"sha512-Ya/YKqTbupcC4pJQnafS75INzQ1CWXkgQ09BMmzdhi0pedrOEXT4Whtl7qgvZr2EVEWptuDwDPChm8FBeV9aYg==","signatures":[{"sig":"MEQCIF41Op+DuanNbiSnF4JZ86KhqvefCK3V2S3RzIMuVnHGAiBmL41rYworQg59SHjFn+tpzd3hvTO6S8aA2wzA/e6Uqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwf7CRA9TVsSAnZWagAAkSMQAJzBTEFSVH/8aVDmb3Yi\nCX3AaFl8mB2T3FSM5MdJpbYHKBOIhTqTl//iJwDt4svYDzyEWE2Mj+LqRu1y\nH/IYYXRRWB3ovmiyfFKhbgVK4PcBGAQsLh5FEY9fQA5G8U0+PRJ2qUdpQlL1\nVChiJi05++jwEaZCS/yicu+/+54DMTbnQaboQxLlQ+7+2RTqmM06KLpja7Y7\nVU8l0My1zQZTl9M4wvhLXut1YQKcGJfvoP1pyIy6eWRKzKr1TYDabPAUuWCD\nPRABVGjPIUSQOoyXiOLEc2IQAdlruS7KBPoHBIEN1XPiws62brOwlztSyRQa\n4jp6kvNv5iozSlyKbov7o1AaGQJwz/yklq5UBZCMhnHLtt/N29glHk4xfKuZ\nxuGmzcY2iiuH1XxhUc3Kf+HGIgz9pxdoN3kRLK72Iw0Orqj80v7LydEa8fDj\nVcnVpdhWoXl90wcmEq4bNLjhMujmQhhIyjLBl69icm+hSj6/srbitRQK+h8B\nlf45cTyzMvRs3K9PGfgceGQPquG0AY11WCrzveClEHVEhzdtsLG5hg/Dq/rK\n3w6RPb0uQNZNgl56aaP5E3bz6lNcNGhxLn7Gs/5sA9cvPK0Th56Df18cWUmV\n/SGqsK4goGMLxRwaYcWhdF0hKsI4uZpECMti1qlTNYdB0UH9+lderbMOsztt\n/vYc\r\n=WtLr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77a4dd1a.0","@material/rtl":"11.0.0-canary.f77a4dd1a.0","@material/base":"11.0.0-canary.f77a4dd1a.0","@material/list":"11.0.0-canary.f77a4dd1a.0","@material/shape":"11.0.0-canary.f77a4dd1a.0","@material/theme":"11.0.0-canary.f77a4dd1a.0","@material/ripple":"11.0.0-canary.f77a4dd1a.0","@material/animation":"11.0.0-canary.f77a4dd1a.0","@material/elevation":"11.0.0-canary.f77a4dd1a.0","@material/typography":"11.0.0-canary.f77a4dd1a.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.f77a4dd1a.0_1615005690717_0.9264976158936711","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/drawer","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5076c89b5e47bf9bb6947e6579a7dd0c665b6a49","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":48,"integrity":"sha512-Sm8z3JlDLNyv6w8D1UKscij2s1bkGAtizn75aQ8PY8yNrWrrJukCPkHKx/rmQmQfxJwkTTM6lqkM3pjmnXlyJQ==","signatures":[{"sig":"MEYCIQCCcJPC+PUL9Zd2wt2fwup60TSM+Zh+fFxYQiBUMf1PlgIhAOfcvHg2sOZT7IdDWF09WXbSUIIBXK63BP5zqUh+sWTG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqkUCRA9TVsSAnZWagAAb8QP/RZcANDzGXVXZyPno19n\n7vbB8esVT0POWlSVRvB64yv1MLOZD9UsLdxnoJXcLC0+CVX2bdhTevWDAX8/\nh4WkPkc/RC0DmOfOJO49z2f9qAHOJErNYibqduxX7eDKRBDalQUX5fNVt7B5\nlnTpjsGfbGwie8t4+mq21rIll9R4mZrz+9hOAgabz8TjLsD+yh6rTEHJefid\nLzUUIiP+Y8yXpASqyBd5DY1QH9hZ/zePxn1n/JIAVMqopa7Vl0FnGRPXpvnC\ncvCgKdCqyVnrumcaGlenbQ8P1v48ECV14PgCZNhxQi7D4XnfA1hd6/aO3rdT\nL0FvG/5mv1AhIO3P1gpA0Hi9go5LRn2dSbHdyD1pQKdkoJqoDKlDMQ+DVVLF\nfIxfpbaBtgyYiUMJBeidludKu9thp+yIu/SVWTFsiVsIhoO3vgwpSIPOEw8W\nQJfZTgaRUQa2m432KbN2x8uPZEOgwi89CgJIKyc1MZIG0/7lBHIlGg65Hu4Y\nq2bYrBMMYWv/hoX6GHzGT9xlxZceRqndRdvmhuqQLO0i4a8zkHiERHLHJb3j\nDVNRe3f/pCtoaI3W5otStYw4zOxDZz5qtB4jGe9lbjQlrApF6mgWKWW45/LM\nJ1AkJlZL9AgvgzcDDAnl/JNua2bXXt1pUNh/6NJ2ETjBVi8QbjpA3ikE/cQU\nRD24\r\n=pXs+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.2d6ba2c23.0","@material/rtl":"11.0.0-canary.2d6ba2c23.0","@material/base":"11.0.0-canary.2d6ba2c23.0","@material/list":"11.0.0-canary.2d6ba2c23.0","@material/shape":"11.0.0-canary.2d6ba2c23.0","@material/theme":"11.0.0-canary.2d6ba2c23.0","@material/ripple":"11.0.0-canary.2d6ba2c23.0","@material/animation":"11.0.0-canary.2d6ba2c23.0","@material/elevation":"11.0.0-canary.2d6ba2c23.0","@material/typography":"11.0.0-canary.2d6ba2c23.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.2d6ba2c23.0_1615243540447_0.8523188197978913","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/drawer","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3ad98a23b6c9d0f33b648f0c1d49b21b97edcbf","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.7522dcaca.0.tgz","fileCount":48,"integrity":"sha512-qwgaYUV1YIpfzOWOxD8Zqk3qozjHNXLsZqApCeEqggu591qwt2k/cblQf8kqH9l9e77JOCJZGXCkvfOaLsTgQA==","signatures":[{"sig":"MEYCIQCoirhajp5hFmtyp3YZlvCeqopaO/1O1sMUvhx6XVfPLgIhAKex6K2j0Be4CzLzKGdCWjZ21dgoF9TGg3wqB20L5qkn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsFQCRA9TVsSAnZWagAAHvsP/3nrRdL93APKCoRdZJ1q\nOQgTIcIC9VORbTlk6KYSY3tWbfEPdogxN4yk4jkIeu8RnlgA8akRqF6ZmhUH\n+VYo25xneZEV1/RRkJMIQOa6cbYs1hjicT04HD/PVCasOwfqlM7DFBV+k/GJ\npz3ZCYf39+lCC9vl6PpCNs2rJ2whwh85ThFqdCyp8P44pUOmwPtlIEg0xWPK\nxsMaeWNNFrzKfZnQmYVqBixxf3JUX/RO/BP3BO75+qlpoZZGk/d6dPcRI8rx\n1fz4IDeQDlK59xaLUJ7HOgmhGZMNcH4JsRem0QllaGpQSGhlPfArZWL5wFUz\nu9rw0XTrd2N/mtaEdhsW/Xvz9SDhxLfOfM6xKAfsPehVNyuxXLBmB+m9IwWk\nabaLu+Bp/9nmWMVvl7yaybjpUJkZ/1OP25907yEYMoTBe0Dw1dRVAbrnVR3Y\n8ZJ23ArQja1Y42HnWQZ9+Sd6weXFp8iYdDo0zfkmREJm3/5nfudw+K3QnCY5\nVKbgzJjKXOoqd1Id2y8vjPsSf+3aDI0bq/b1CahsOO8/MvYIdyzeZf+8gCkz\nWbrdxYcReH/jTC+VgcgVRr9hChYpM8rUkcuj+DOtmTodpR5kv6Y/SdvjyK89\nWhmj6sanSvQsjO4aCC+pwRwAQK0fNTEGMloit/iMYxlcL+r55hzddwt4BdQc\nFQdb\r\n=mx4M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7522dcaca.0","@material/rtl":"11.0.0-canary.7522dcaca.0","@material/base":"11.0.0-canary.7522dcaca.0","@material/list":"11.0.0-canary.7522dcaca.0","@material/shape":"11.0.0-canary.7522dcaca.0","@material/theme":"11.0.0-canary.7522dcaca.0","@material/ripple":"11.0.0-canary.7522dcaca.0","@material/animation":"11.0.0-canary.7522dcaca.0","@material/elevation":"11.0.0-canary.7522dcaca.0","@material/typography":"11.0.0-canary.7522dcaca.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.7522dcaca.0_1615249743847_0.7938158345287243","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/drawer","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f339e5ad717c3276e1dfcb9a8fe10bdbe0a64a0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.5c0ab7401.0.tgz","fileCount":48,"integrity":"sha512-HmnlZyWyChDgKkgD6nyIrmWMzUttGcX/lp7ja99NexH7oYDDB5o6+BOfg0dZ+AHgFz1gb0upzXjIGe1FBU48bQ==","signatures":[{"sig":"MEUCIQDnNu5tHXrF0xFBRD6MZtE76ru+8kJ7YEphb/wcqXkXAQIgUK8s/AoEZUD17xyRg5C5hPPO1qrxM5Eb4Cd1kQHdp14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/yFCRA9TVsSAnZWagAA4Z8P/iSJu9LYXvhd9gcD6pEO\ng+Bwxz29PLUtxR8nN6CDc8HUUnB+mcXNQxQGrvT8/rnEH0PirRlQVCRstZwO\nA4spoOcycL0rGtPxFBlQsNMkw6nFc1SYGzyIZjS1D8bF+/vk1BN7Zt7sNnH7\nzoANjZAuuUGnmPholRpXR8wEb1AsKjC95zX0x6WSpT2d5Nqtnqcl8+Gw5dik\nESN1sZftKPP4vUy7WgC+nGR4W6wkmxeqjKmxl0vZnkUGx5Uaq99sITH2MLzs\nVjK7M+UZlaUHzWBOveAvKQmJiUDZF3IlQn/73lFpGSMFu0mggPfkVYWpTzHf\n7zEgWyC5bYPORxovFoQm8yPa5VzVEnbBSNypqZMzCmONn/txvgzkInmk4ont\n1hN4dDMABnL7nmYGxZI+/JRtG8SzYRRYkP80Rxf+WNjH3S8DnIZ6L+DMzzqi\nX7EpmiRCcI92CpA0MG+kU7JrkwAv86M4s6ha2iOcpkrHqnzbsDLVjcCHv+mv\nYWbaZdfSrvpr72IDT4IzQKQyU3bAScqEsBr01R130H0Ww0ZNuW4rA7RVFetK\n5cTsnxstAGEveMx+81MmhQhewLeZAM04GQAQOYdpJloufk2IMHDxRZGlHkAh\nUsTYPlYZHjaADRlqYaaAGjNujuiRFBO8meoIrArjkrigaCaIyRfl/AbTas72\n9vsK\r\n=a8GM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5c0ab7401.0","@material/rtl":"11.0.0-canary.5c0ab7401.0","@material/base":"11.0.0-canary.5c0ab7401.0","@material/list":"11.0.0-canary.5c0ab7401.0","@material/shape":"11.0.0-canary.5c0ab7401.0","@material/theme":"11.0.0-canary.5c0ab7401.0","@material/ripple":"11.0.0-canary.5c0ab7401.0","@material/animation":"11.0.0-canary.5c0ab7401.0","@material/elevation":"11.0.0-canary.5c0ab7401.0","@material/typography":"11.0.0-canary.5c0ab7401.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.5c0ab7401.0_1615330436660_0.5481069855304632","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/drawer","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aa4281c32def1573f879a3d3a4bb8a7829292b9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.59010b6dc.0.tgz","fileCount":48,"integrity":"sha512-oijhHRfZGWoiJptJpV6IYDDNu3xLNAz1jce6niFt1+qO1mu+IbB84J6O/fKVAe7YCtvpZh18FWlB7fk3V3qJaw==","signatures":[{"sig":"MEUCIGhcokY7c3xEpwpf1l7tGhLUjSq2iO9z8h9xySq6X2UZAiEAixM/e3pXNcmepeflgrF/9j1XPMmd6VHImw1cFHhCFSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPrWCRA9TVsSAnZWagAAd/cP/0aLjx4pM+BN3F7S60Yy\n3c+V6ThKqjqzxTK/55AalgWVrZs3wiVNP9aNCxSjRM5jbnWY2iP3vmPmw3/n\nccM3RX7wwsglUohNlGLFLS50tsZDNAyj3DsV0HSywD8Ck46uhuqZpSg1PT5i\nm2uBM4oHzhY6RY+Fci5BHFon1zCVFbdxfuPodonAirtCbW+Au4+nN+mAiuoE\nxo4cZRRL1owqTbM0zTQm43bwPVm2UmkHhpI00F7ozYaLgTrDuPHua/diKnkc\nXyq4z+HetY5wMmZzoR1cw0fzDUWzXLIIbJy/T98mq1G9JE9L5D2ep1wR99mU\n1vJpCGDTtUCz117ZxBF3T5ee0pXk1QN28Uv/j94QMk2939zRZXZHrCQ2c7J1\nMbJgmTqjY9ZMylW3tgmsQqxMVUR7Yk0kk5mr5hIylyA0QyWkTl9UQDjL1H4A\nNkCOSBXZobpzG+jGL6WsKbHQ4LJedmEPY1vCnUt01vdlrp4YT5S0MuSWEOKA\nbjpNWyyRuUxprFeM3z3GHvg8IhimM507eZV5eO3OjAKWkJ2Wnc365c5IxWeM\nopUNR4l+qDwBq+BkE338oLogize8rvb39aLVQL7dHUkfl4aFz5GCfQL3CHyQ\nGJmSHVru02LhQFgy1+0K3Ae2IrBXj3PN2/N9cYrbasf9HQOhtQmafHWZQGza\n5lfk\r\n=9p6H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.59010b6dc.0","@material/rtl":"11.0.0-canary.59010b6dc.0","@material/base":"11.0.0-canary.59010b6dc.0","@material/list":"11.0.0-canary.59010b6dc.0","@material/shape":"11.0.0-canary.59010b6dc.0","@material/theme":"11.0.0-canary.59010b6dc.0","@material/ripple":"11.0.0-canary.59010b6dc.0","@material/animation":"11.0.0-canary.59010b6dc.0","@material/elevation":"11.0.0-canary.59010b6dc.0","@material/typography":"11.0.0-canary.59010b6dc.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.59010b6dc.0_1615395541704_0.5928238468722613","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/drawer","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67e47a6b7f915d4db4638370aa79a21a330e2f2d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.9e52f5544.0.tgz","fileCount":48,"integrity":"sha512-ENfgfSxMjfvk7Qi9XxVtAv4fn8dEBRuIkq0rbDxD4V6uaV1K/7aB50Gu6PkfN+32juZiwqmtK86RSrRXeNiVOw==","signatures":[{"sig":"MEYCIQCIflCtpJttsYHhRReVoys+jcwYv+3iZpTul1nseLoK3wIhAOV9zQII+8OzjE9UQ0ze36Cx14rVuLtV9K7D8gZQkHOM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVWxCRA9TVsSAnZWagAAXgEP/RVQ2BqKWg/jMYPnGz7T\n4RCddMAQadO/9pyiQVRlXoBWUO7Ewv7q20sQlK+/J6g0DjExrzdPtTfU08Tt\nAzqR/pmunVUNAhqkQ68m+8uHZi0YXgmjgFQcpmC8dMjWPi+CX0EnO6H+GJdN\nujCzcX8iByHKTT9pzD2/iQAckreu2isWC6GpSrKM7TL2FYZiH1ApFhDEWDcE\n9fu5HrQ3kz4t/+EAW490uTguypN/AMvaDJXEe+cn4NY03+eIiKL/xC5MmywH\ndn3TKS/br6kMUVQmaLJMuh5ec3MH7Ur6GDJuOdt3CtffIkOWP5rPKVQVUJMH\nb3oaPqW5qRsimMjhN1X9lvPj+eea9yilRayZD5IeLhqjS1cc38Bgdd3jp3Nk\nh+VbleFExHmpt8nbRePPhkuY36Ba7X58Pxp1KKIaif+Ad0H5KCdWbuwt8qca\nVQ5pQpBkEtSovXUB0GfnYPSvHGsn5KcSTCt6HDk0rhnuM9DQtEahUp0uFKg7\n3JsvXQeY7SuTaLSg0tVUVcYUiACQ3tPR+S/rSjDCaUGxmGmHgIyrIxcAMXK5\nzxNWQH3/38qNLdRC/EzB5kjAB200OrO6S5719MPYejtXl23Tpa2d4Qhqj2qp\nayKme9SHTzjMIht6AiuFY/Fbfx2Fiv2mBtAqUZrh/U6Dj4YB7wMvkScUxJ+l\nxveo\r\n=qlvI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9e52f5544.0","@material/rtl":"11.0.0-canary.9e52f5544.0","@material/base":"11.0.0-canary.9e52f5544.0","@material/list":"11.0.0-canary.9e52f5544.0","@material/shape":"11.0.0-canary.9e52f5544.0","@material/theme":"11.0.0-canary.9e52f5544.0","@material/ripple":"11.0.0-canary.9e52f5544.0","@material/animation":"11.0.0-canary.9e52f5544.0","@material/elevation":"11.0.0-canary.9e52f5544.0","@material/typography":"11.0.0-canary.9e52f5544.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.9e52f5544.0_1615418800946_0.12407898645104942","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/drawer","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.a678806f5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90a018422eceb0635eac40276d2f6caab8e3e573","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.a678806f5.0.tgz","fileCount":48,"integrity":"sha512-bXscCno1HdCV/KAXI8CYQUH+oGHYc0aBqMnJxRNLmH27TzyyMDv8MrZMe+yaKItRLZjBp9nb0TfLkrsHuBvnpw==","signatures":[{"sig":"MEYCIQCyqxJ/1SdwmleqXUs+yOs0UvlGSkr86+PBB3wNnT5EiQIhAIpjvDz5W7Ms0PqmpS2KVBSySh+UE8MyrM0NZ2FlcdNk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXedCRA9TVsSAnZWagAA3EQP/RsLKcNNvu2f4JuMagKC\nVV6EVz9N3DbAigSZw8I+3X0UFhwOoUksSSBrG4P7DvGh0Vi//2zi6eoPxY3n\ntVsd4/UaoiWVXeRUQAtC4DX37PBZ1abH5Qujlg9TglJHca2sncu3RXIjkwpd\nt3Wf9Plvw7Bu9fJ2+hbNWqYnJfrlzzX/9j1Aq7P6LeuwjZ6jarl3S11seUcv\njG6Jrsd4DZ/dv+fN7lCF9CtWjQfnQlFAB1cyyLBslMxYGWMq9/cMM+7m97N7\n3+s+H+cKHguZiSHG8RvXMlbfjwReEuXRN6D+OhP63rDbT6xM6vAaokJi/z12\np0CarkvGs9viOEnu4O2JKxKlep0niqx69BAlXnI1ucirJTj4GBFTg5qSPlwh\nYK9FMiOn8NhSMxCanxUL/TI0DeuH1owtgwN6JYpVNyUuRZHu7Eju8DSkYz7A\nOiwI9WLgl/7Y4NEgz6Bq2RKtnj/iOg8403+7n7/aMKsOd0PW4rLadLlW6ulU\nl5avx6gj5sBPJ3CRc295fo0Ebf3r5fTWSTnkOhBEVnN7YCctVlCphhi4Ya2c\n2fWnJ5hn4lUdk79rebS8N1/W0aLVJrPLnneX+ckaurrBHEZl++Re+KRlh1D0\n2mSxLmoeSQf0OMBJkkKo+R9mWU5OUaRoh8BFJNXoHoUBSLrmG4KIJjE1U+Dr\nMng7\r\n=xIZr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a678806f5.0","@material/rtl":"11.0.0-canary.a678806f5.0","@material/base":"11.0.0-canary.a678806f5.0","@material/list":"11.0.0-canary.a678806f5.0","@material/shape":"11.0.0-canary.a678806f5.0","@material/theme":"11.0.0-canary.a678806f5.0","@material/ripple":"11.0.0-canary.a678806f5.0","@material/animation":"11.0.0-canary.a678806f5.0","@material/elevation":"11.0.0-canary.a678806f5.0","@material/typography":"11.0.0-canary.a678806f5.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.a678806f5.0_1615427484683_0.1377783928512779","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/drawer","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba8cdf6456d0449c118eda94ec50caa7c4302f64","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.b2d22df5b.0.tgz","fileCount":48,"integrity":"sha512-l+RG/N7rPAOv09DTuR9geRZNnsTWIi82eoWGMUaGAbXnk4pD9jkKaRfL4OH/J3eMxg60OlfB9E+VLGlgl4sLbg==","signatures":[{"sig":"MEUCIFAmtk9eJstJwabBmEP1SB7hvkVM9LA+wfFDdGS8jBfWAiEAuDRyy9+ZhujFfFftW0NHc6nMHW6rIgthMf8UENYLfuk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk2qCRA9TVsSAnZWagAAlX4QAJbQ55s0HclQ1sV1j2LJ\njN07dkLZKEFYB0gi+ppDOWz2ruSVIjsEvPVaCMfQVcq3LoQQ9DLvP0d2eqle\nHapRc/2pz/YpX6fchmR/oLHHvNIePC+J1Q6IjJuH0zDTH2R5SC+TNUdF7d+l\nSWks3l48fOCyRO/l2L9+tTlrT5jJvUKkmaEvKRy4E7VbcDSLY193alSvE/BY\n2VaEd4zUroNDVK5Jlqa5rm2xYRBD0na6fGEEyPvSa6F3UV2TVuBAymU+zsfq\ngGGUh1W2gtRuP4HZPJ4XuYixlE02BwDB6siLJQ8lsJ8B9qnwQEQuP2nSM1zL\n5xQuR+N+YUc04yS1EE48R9l/NMSMV4C5jxTqrmc0mRKxkDZVPa0GHWN4AHb9\nW5pIhxmHDMvfIzxNKoZxB6mu7K5TYo65NBTbX0SdAV5e/VI30OATyl69zjZx\nUsPxiyg5lzmLV/qVW0FrrRlzVFebmU3WSOwj2PMY5LF0UNk8Q0wRjTXZ92DH\nClh7dh+ThW9dzOwMimPwY4avjCw749AjEMTuFyxcxN9BQn4DlWCcOoWDDZdd\nXgxy064XPK14GbygiCKrruYwgZg14s/iX5/kFMwFf4w+evpf8aCQIevakUB/\nBNXH3ANfuf1MBM/gGX/4sf+vjk+FxdafjY1joh43VAnuK+fxckYHfQbBm/I/\n1Ibm\r\n=w2q3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2d22df5b.0","@material/rtl":"11.0.0-canary.b2d22df5b.0","@material/base":"11.0.0-canary.b2d22df5b.0","@material/list":"11.0.0-canary.b2d22df5b.0","@material/shape":"11.0.0-canary.b2d22df5b.0","@material/theme":"11.0.0-canary.b2d22df5b.0","@material/ripple":"11.0.0-canary.b2d22df5b.0","@material/animation":"11.0.0-canary.b2d22df5b.0","@material/elevation":"11.0.0-canary.b2d22df5b.0","@material/typography":"11.0.0-canary.b2d22df5b.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.b2d22df5b.0_1615482282116_0.12915628499807386","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/drawer","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.81911b707.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7a38f78dd36a7c3ef06ae04716cdb1665be237e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.81911b707.0.tgz","fileCount":48,"integrity":"sha512-0pOVlWVUuIKVtNEKlOVx9PPFhl9QgZgAGmTkRY0iWGo0HB8wdL3nICRXStuRUffKWbCeeSs32NMwnBcC6EIoAQ==","signatures":[{"sig":"MEQCIDofuDhYK/2CJfyWtxxVNicQe9Df/eAEFsaIpa7SyLTVAiAN1S565aeAQSqhFbtz28Ekvj8NV+y27EE+bf2rUZLCSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmB2CRA9TVsSAnZWagAAK2kP/2jQV3Y7SLOY6BEFWSFZ\nuYnppdvzK6cBx5yyWJueCqO7PkbRLEgLFBRVwZVXuAIhJAAd6dadacuNzAPw\nRYfLCsWO0hC8E8HGSemePCwGQOjstvt/6UXLfYQOjohy6EqHfpvL4Rdfr+7l\n9JTor2VHFtbD6exG0wnbRInj68p39RJgak/+lk9H7OR5Y06QOkE1uCD+iGvg\nDFBOKio7UcaYcZJ0cbhKC330XWbHLbtLyNKlcBBc1BVJ6+tR7qrXjPCFITaJ\na8QoMIlsmd42DprmUT74Iuc+C5lzQhVWnfg8H+Es3baU9x21EU2UGBlvyhTO\nZyH81PEPyfu1U0Gr8RPuzqbu/u/qK3SHG7nfBNnNRhtph6ZIPOBNaVuv9cnt\nHKBtouAEkITx3T5eS36YNa7yv56WC/OPE9dN/qNdCamuM/61dvgsazvAVOjs\nzz5HPRN+JYdzn052Ay00sJtz8cHvD2keq/TDslOdIvX7u6aTC0SWk+yEMDHs\nIzHDwCSykPg9H+bcadg8cUUzaMsH0kQnxkiGzPUzRfGawmz25mG1bDERQqj5\n5l/H4HD/TxTA+3XG9S0ZCfGaqFvG2qNR0KSV9G46mP7oiZiKuRNk0EZmkuQt\nn/nCtgKJwNSl+Lqum1xCGdQr3el0+FTZJQTICZVFQ3VujRRyqKzS8uHg+wV5\noPhX\r\n=957F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.81911b707.0","@material/rtl":"11.0.0-canary.81911b707.0","@material/base":"11.0.0-canary.81911b707.0","@material/list":"11.0.0-canary.81911b707.0","@material/shape":"11.0.0-canary.81911b707.0","@material/theme":"11.0.0-canary.81911b707.0","@material/ripple":"11.0.0-canary.81911b707.0","@material/animation":"11.0.0-canary.81911b707.0","@material/elevation":"11.0.0-canary.81911b707.0","@material/typography":"11.0.0-canary.81911b707.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.81911b707.0_1615487094068_0.2825419967619067","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/drawer","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0047578cc75d46f21bd6e0acd00f6301174aaaf9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.9eeb35c38.0.tgz","fileCount":48,"integrity":"sha512-bBCecSxZUeZd9ZRN0omCr9tOsxdiMyYgkx+mObX9jA6J5m0ExmE7CDizO4+EgY9tHNCIKutx8nM5MepCjRSmHw==","signatures":[{"sig":"MEUCIB8fdIHRDjVbcYG35fov0XPUExSFzNmC2A4NNMFjIYkgAiEA7mnPc77KoK/gmoO0NddWjkqFUx1pgF6XGtSTqwDK+Hs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnGsCRA9TVsSAnZWagAAXU8P/02P3U/4tlt8pq+59UsK\nk8vZNZy6PPkPheojraCH9VK68JqlXREaAbhFbkUc9HCQt3zC+1MQiq9grsHL\nufskXs4yCme85q/f7kRKz1J8c/Qaw3RQLQ18KLosLg4HsS0tIiBtnE2Wt3fl\nnh09jGhiqjL+lY5UMR/ZTEccg8kJIErSw+7N1eh6mt22p76Ly12cX+r1gcxm\nI/Y4KSelZBFi9ODejRnTQMBoE15EoZ1pwernZPOE6t8hNfy++HTGt9hjVI2r\nj2h23IB1EGExGfXFuRmm0AMUyI4gq6gsVNQGl7bZVbXtPrW87w+/F+DxqH5E\nZnHisbc68Od03ksIRygAfHcdZOoAXkYaZ4gOro8wT47fdiV58sxrKfNjc8OO\nc5qFaG+FLSiX0SqKcHLWvjK5BqCNC+nsmr+lq/g1VkoNLINt8FAaJTBT6mk4\n0pxr8SM7v4+dXNtUWCUyHXaYYZEO7ytBqBfxkmrsnwX/Kgx2cv9jACqhVAVd\necrC5RbiTr2USDRWvZZ/LDqYSRd9sB6KrLiVtvZz8txcEoajCygm7Zj2SoXx\nDXxQm30UDCRiXbd5ogkQtKdWAfAx71QTKRx82YbnQAi6KViSSaAP474efMmN\nbr/sdkKUYO4bSZzu3PexqBhfREaPOoHjkSuvtGSaBNk9YIcU+AtGCGVLMlX8\nFY1m\r\n=X851\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9eeb35c38.0","@material/rtl":"11.0.0-canary.9eeb35c38.0","@material/base":"11.0.0-canary.9eeb35c38.0","@material/list":"11.0.0-canary.9eeb35c38.0","@material/shape":"11.0.0-canary.9eeb35c38.0","@material/theme":"11.0.0-canary.9eeb35c38.0","@material/ripple":"11.0.0-canary.9eeb35c38.0","@material/animation":"11.0.0-canary.9eeb35c38.0","@material/elevation":"11.0.0-canary.9eeb35c38.0","@material/typography":"11.0.0-canary.9eeb35c38.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.9eeb35c38.0_1615491500360_0.4181600546806048","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/drawer","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3db06cedf07ad4846b534f2c289eb971fa417734","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.12be3e95a.0.tgz","fileCount":48,"integrity":"sha512-MEi8xuJRdjm1F+4bn/edxYWgmm9DVOR6SJXCNIYrBM//zpd9eEcnUzF6u1QZoTMiuj0LWMpyYbj11760yvy4nQ==","signatures":[{"sig":"MEUCIAsh+oABDqC11V83SO8AmQbCSC8t5wuUb6aIPpaZNIhgAiEA/eE2+8CErSlPJVmkbfxrxRo9M5+YKNsWUAwynTEbJZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnd3CRA9TVsSAnZWagAAPXgP/AxhuEEuWy+eBh+CTJFe\nlUvJCjTIp60zOEGSReuko9rIUHL5rXS0edxMd77ckdZ5avPdCIgyC1kH3hCr\neTLgU0ClwQN1iExDXBkeD9U60fbYIkU5Wj2NoM8M/3AztySneYI8iu5lySyi\neeWg6I8G/4aQucKkm0slI5tS8C9jTKYUm/z5pk2fwiwXCHEJX2tt1a+dn40X\nDWd9WbTQm9NEE80HoCyLl/MRRQElA+LZkeUEIFsgfEtLJdjcXLNKWpJk0+t7\nbB3poMkFpCDnMGfr+l91Vxt/PEKWqLX2FLmj9oEOz6mI9L7hhJj+gByhKXJv\nvJeMqmNvzKrEkZO3/AQx9wA9QzjxNNfS/SEJtVLUMWweRpiDeI/k6zpnsQI+\naYBq3FrSySuW1yfJ9IZRz9CZPG2luctQS0RbrbhRV0HYUABiVy3KcHtJFRv8\nfQqzC7Klcnt2AyUb1fK5xa12pUXOKP6bYIwmS5oQ1Vg4S2OEK5Q++VV4fygH\n9QrooqMP27OxPOQApoPFOwClIJBjB/XbmyIbn+VA74AY6Fos0NaKR+gWKOVz\n7a0FjPro66IXPJ6j7Juik4FtQlfGRUxRqA6s/VuYcLGDjuaAZhtUnlsXaSXU\nJLkDA4M32lIE/spRrQw0wYh4zIsnthQAToX0IGw8KTu+OD6W928svkJj1wiM\npmUJ\r\n=8fkE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.12be3e95a.0","@material/rtl":"11.0.0-canary.12be3e95a.0","@material/base":"11.0.0-canary.12be3e95a.0","@material/list":"11.0.0-canary.12be3e95a.0","@material/shape":"11.0.0-canary.12be3e95a.0","@material/theme":"11.0.0-canary.12be3e95a.0","@material/ripple":"11.0.0-canary.12be3e95a.0","@material/animation":"11.0.0-canary.12be3e95a.0","@material/elevation":"11.0.0-canary.12be3e95a.0","@material/typography":"11.0.0-canary.12be3e95a.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.12be3e95a.0_1615492982983_0.5378129361620272","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/drawer","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa41e6ef60be0c0f48de152ca117d254f11e7a70","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.e683bdf4a.0.tgz","fileCount":48,"integrity":"sha512-9lP2FAK54ALOdhfIBy90JBNrXdBIQw07H5nwNdObXSqpw2y+NM1skQUCpXnhNuS9l5f25Ms1Q7dFOpjwRIwyrg==","signatures":[{"sig":"MEUCIGrobnYvDQB1zwdeWcoYSC87wEsrKzEb8ubm8oaWVjLBAiEAgPOKsY6fBFVGoNvpYyxsm9wUFQ6jL+HGNCK0MWTo39U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnlCCRA9TVsSAnZWagAArcYP/0iWbFydc0RX9HuJlcrp\nJMq6B/NX5lKXA1lln+rkNZN7J4iYTo4SOnMe+jxnliHiBcv9bEWSOviMUvTm\ndOBvgrCAAOoDuNn+xDxFHrEHorj6GtpVRe5OEYWijKMzfrs24fQTW7pxKRtR\n7mnvPDZc7hO45vdcIlqrpy31V5r0o4dXdbRcIdJ5Ge/GTcRcLJzZJXKlt9Qs\niOOBjYYt1oFiZERlaTGb6X0gaCDFNtHYGNGwYJHtP8Wy1slTbTnOGSDeKnvq\nHjWDHrRlLRmAgubswnAK+WW4DeVcc5eJ/OaPIWuhfgGXxt4utV2fZsfi+CRw\nLOqYyA7AkHPERGRIcXN1h380LVceufoFP7RGVSFur9uo54ILRbHvgWTSuc62\nxqXqexxUNuoCaoP7knhEMLtX+aSAy3MdU1Whg7Q209JSoKzAaYrc8t1J/7jA\n3SekCnJZnN++8pJQJ/jveJESqloJSgbaryI0NA0JvKRlGYLyWsnWl6iaFNQt\nx54hWHwUNAx2otoQJGC36VBqXrFGYyg0Dr9zyb4owwy2wDxBhL6QZASOuJza\nFSscnaSh/76VWJzG7aj732dkGivGKN2dzCWvrX8i0V1e9gaji+Q0Yuu+xofZ\nSUGzMX2SGARsDg9YiXnoJzW00deGMbh0Tf0RDXK4w2Li1qy8+znLgd52UiYN\ntwYO\r\n=1UIa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e683bdf4a.0","@material/rtl":"11.0.0-canary.e683bdf4a.0","@material/base":"11.0.0-canary.e683bdf4a.0","@material/list":"11.0.0-canary.e683bdf4a.0","@material/shape":"11.0.0-canary.e683bdf4a.0","@material/theme":"11.0.0-canary.e683bdf4a.0","@material/ripple":"11.0.0-canary.e683bdf4a.0","@material/animation":"11.0.0-canary.e683bdf4a.0","@material/elevation":"11.0.0-canary.e683bdf4a.0","@material/typography":"11.0.0-canary.e683bdf4a.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.e683bdf4a.0_1615493442478_0.1484880883094628","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/drawer","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1717406b93d7c6ce7cb2cdec149e0307abb107ff","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.a07b6d486.0.tgz","fileCount":48,"integrity":"sha512-XsYQQQGnedx4Yg5zm9CQp73LyD57yNV9i2r/Lnw804CTC6ljSURn8UNjhjMw5cvpi7r0dhuEvWByue8LP7Xvtw==","signatures":[{"sig":"MEYCIQC2m/l+FLxIGD1vIJsULbN31hkZpjzLQ0yNUeajVtADFgIhAI65VxYQJLx4hmYXo5i5FbNndsQfoy9y93Xchv8INMpg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn7yCRA9TVsSAnZWagAAGkwP/AxjcywP2tlGtx5oa842\ngfAtixmBaietxrkvVkUFXlSfrMz7dRbH5P7ncYcvh5+cri8DNK+/tB8M0Y3n\nyq0tncvfA+lt6jWa3VM45Gvl/92RA9ZkW5lU2r1/xUoNJcxdB9aBhJJjv0II\nAgx/C8/ehlJ4NkCLn3/lvrBtubeWZtp8iyl9fZIMInLoIza8Gwq3wm5KNbzO\nAUldsP4Dr8hJbyEhs8+V+LuvvPZNQdfbzXB7x6JvQtrmCDt7+FQXZYYBkzfs\nWmQBa6Vs9Wg5n6t6CfYmH2A5bM+C0rAd5V3AsxYksZVV3p417EcimlBUeYNS\nb/UcGJzK9aZDtXbu6q6couR5aLwbPY9jpOCF/U01DLOik9KyOH+QV3DlZmq6\nOgxyW8Hxd817HB36ZsGzr99Q201ZWsVsFD8NMUN7k7MhE9LW8EujDuE65T88\nApdnCh970nrc2lH207UO7SS8S9n8WUKKJ7YVCUn7jyRZFmzojYcCARbsAhCR\nXxFSchNgblLyxrVLOoL3Hl6QlrZOB5r+q8CB6I7e8GbN76DeaxZOqrIzRByf\n2sWlByl7z4aivJR3Cy3S5fB/gyNsT4ZgDU0er4jEN5Z8ukXITVtOZqAns5G3\n7FwSfcvorhAp4+fyviRmBdeRjpeIaU9i2aRJqPVU1IhgXbQTZjhLVmM7VykZ\nmO63\r\n=Sk4O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a07b6d486.0","@material/rtl":"11.0.0-canary.a07b6d486.0","@material/base":"11.0.0-canary.a07b6d486.0","@material/list":"11.0.0-canary.a07b6d486.0","@material/shape":"11.0.0-canary.a07b6d486.0","@material/theme":"11.0.0-canary.a07b6d486.0","@material/ripple":"11.0.0-canary.a07b6d486.0","@material/animation":"11.0.0-canary.a07b6d486.0","@material/elevation":"11.0.0-canary.a07b6d486.0","@material/typography":"11.0.0-canary.a07b6d486.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.a07b6d486.0_1615494897702_0.5654897597495632","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/drawer","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.1e0653477.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"536f50857ccfc37d6bfed5eef0c691ee594e5eb7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.1e0653477.0.tgz","fileCount":48,"integrity":"sha512-iSnxl7CnffmaWktURhsYWntlzaPJ2brTGBXFdTHnHRTk1+GhyZ1ymZd69iJSNIJuPis1SjsEZntRko8b2k2oZg==","signatures":[{"sig":"MEQCIDO+vrjBkReecKn7BrgPAnOnhpGhfMj9Y28AL+70PYSwAiAZboWWjGcoegn94lEejxgQ6CEXn3WaoVHsi92DDRIF0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoCZCRA9TVsSAnZWagAArmUP/0YastyEJr9V9C8Fgat6\nw0GLFKtLwUkmOu6wq0j8Af+E2B0SMIvxvToG7FSfNP1dOYWjtsyu83XxfDoK\n/W3kS471WUfRfP+q4jUE82cbXJ6K/9TSdp5O/t4C5cQfA7pq+B+DOtUY5ocZ\npqazG+Cvbubvck6fvPg2w78Vr/R1FNlK1tFkAFNXADw4askwzB9ryrM0+Ve9\njOB7ORhyBhLSGu5tGM+HDfc04Mq3nXamsVhqSNxhzoU554YR1RvsI7BCY+/3\n4sAvIWsE+mVpNNLmyaFzTBgW9DfRc1MOX0xhjHMbIzewzGmIXjH4VUdaDNXB\nmJteSn5DGJf1qrww9owWkQ3TcHlIpcYtCIYDxV7gi2pcd1R33wBx+Pw+hjft\nJcE7Q++lP6kgztA/gjjdYQaNrHM+oBBACxKwvNyVOdl7cZCNNGo8S2YwIVGu\nq3odKQWTnyv/gJ2DuFFwPFM2PipWMBQxRujMuz8b/dGzuzEDW90fwk2Xyt4n\naa9SJeSbbHBEl8IAAGRcGhuggrrtpztAR/W2Zv/ignWjC4CddVtVZcH1BtX7\naBJRXYPNu1xsz7c8Fd2LRbM5dE6jxAefqex4bqn3E4c1sM8d9GI38ZGQWpD7\nrXEbSKVuzFBt5lH1GiX8rVAQmd7DGIWT2ah5q5e4igNdrCowPVBFh77lAGtl\nPgkd\r\n=4Rbd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1e0653477.0","@material/rtl":"11.0.0-canary.1e0653477.0","@material/base":"11.0.0-canary.1e0653477.0","@material/list":"11.0.0-canary.1e0653477.0","@material/shape":"11.0.0-canary.1e0653477.0","@material/theme":"11.0.0-canary.1e0653477.0","@material/ripple":"11.0.0-canary.1e0653477.0","@material/animation":"11.0.0-canary.1e0653477.0","@material/elevation":"11.0.0-canary.1e0653477.0","@material/typography":"11.0.0-canary.1e0653477.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.1e0653477.0_1615495321088_0.5279659435194224","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/drawer","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e30181d79147589ca3bff06ce7e3d5428f5ff8e6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.148e8cfcc.0.tgz","fileCount":48,"integrity":"sha512-T19dSnZQwEY23pxv8MBNaMcFU+1RmHujb+OH5F1MthnlK8uyAGTMmQjaMllwOtwimOz302dUrhHIKANp6bmklA==","signatures":[{"sig":"MEYCIQCXuhHHhm24BO79W+ELxxWFpvsy8WCh03DhlN0w5dZlswIhALJVP2rQk7GAe5CNOROnGsKlv3JLBYj81IavTZpEuubl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp2eCRA9TVsSAnZWagAAOw4QAJGkWnr2mB4ifQRBHi+h\n3LCJCsIPpd/kDYUUqIytDMCbX1uNFvQCUYTgVt15hSYqC8xy+GsTHzrZlvks\ngX+NrVFrp9eEbYasGXdnE/AAoX4L67cJ0MT+MgsHBWC2x1pu1jd52cSMtBgS\nmCkPvZqxEmTA0tCBaFc2KHOvQp4Gsg0oINteYDCzsHm4oiT2altcsKg/Gh6j\n6ErWV4iEm152bFsgFfLxgR0xa+MH/RR8Z7KLajbDaz2UVz82boyDzGDVkV4h\nmrojWQiHALRPl2KFmHUp1TbH6CISb42tTOBy1eGLQUe9VV5WdPYLfa7m1xLg\nupd+O//5nTrnHw5NiLGeHvP616TyAzIRLgxSXi/YDDIy52eLbWmEVPfAs8a7\nk4/+P/4ekN0yl9PrPfu0TXSElFv8ph0pluTFaaBZuVPkdOXH8HysxHxN+zsX\nfdkhcEDJ4ne8QVr13d6jd/YV1+p2jfWW7LgAvHJoRH/iKy4uqmhsjq/wB8/b\n8JvM2LcSGdYKJsCQ+QyH/lAKVTuQ8sZexyTRjhDeSAES4lt/STjLodtIEecB\n0ay+krMoTd7LwE24uzOBWBDgkolxncS/kRm+edLJvCDnRul5WXCwAta33J0E\n/lTSz8lzEcTSu4zHVWczf7JLv78n8HGtnALdAdVJ/cqxAMaeneOk5TPQYlBx\nUFtj\r\n=soC9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.148e8cfcc.0","@material/rtl":"11.0.0-canary.148e8cfcc.0","@material/base":"11.0.0-canary.148e8cfcc.0","@material/list":"11.0.0-canary.148e8cfcc.0","@material/shape":"11.0.0-canary.148e8cfcc.0","@material/theme":"11.0.0-canary.148e8cfcc.0","@material/ripple":"11.0.0-canary.148e8cfcc.0","@material/animation":"11.0.0-canary.148e8cfcc.0","@material/elevation":"11.0.0-canary.148e8cfcc.0","@material/typography":"11.0.0-canary.148e8cfcc.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.148e8cfcc.0_1615502749864_0.47216260897766804","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/drawer","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.73a227194.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee3e4b7dce1981498d34b1feba986f6c480b72b2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.73a227194.0.tgz","fileCount":48,"integrity":"sha512-9XPSwyI/SYeYIqC4Z5fR0wAl+UDY5DZeT9RdKLVrWpTXLyh8KfSA45k5rTpaa2hUELVhXOvfdfTLqOGts9sngg==","signatures":[{"sig":"MEQCIDD5QFVm+oL/qb1/YFVcHLKVLEb++tEM9+1PhYQv8W3KAiB74eA9NEHdvInuyAkVZ0xmp7dsoLaj2myAMB/ySMgeFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrUECRA9TVsSAnZWagAAfM4QAIYVlH8BrG48ICEsE3hr\nHtjex3lVktRCFbHmFMU8YRSEAhSb7dy9wCdlzW5/XvWr0IZGspKpbuUABcPd\nDK9ThFniNtMrprXeD+PKLMDJ9wiwX0p1gwM3EufR9EHePRmivMky2WJZnmyG\nx/MwcBsMc+/CPym1qDDVrCTlez809Ve9R8Wi9utel7zi3VpdkZFv1MG9bC28\nTbFG7B3X3/VL3hmVoiLC9fr5TwSIQwTEH4B/YtS4xEnRS496dOT9sOMYg1QI\nn6baIvMY3qatT2I5o2LENsX4H/UhCYupcxe2IjgC7MzK5+h/diuJdud3RELQ\n7gp2l0djLEjtNKZcMG22e1Pl7WbHSlhocUXQwHJHCrUSyJJoPXlfX3azndOk\n5/A10YINZghlYUxQ0qA9d0oYC6Wpj71y6u7PwoEHx6h0BWknZCH1hVNb0rVY\nStfAKwVcXVFQvFO/vlNTabqFMAAV+NjHERlYaXkZ6boIZhI9P6pPZ+6WE1xb\nbf9TyBuJj7IXQukANNaCf+XvJRqavUnCwNtQ2hr4DiAM8VOmrDN3PPH+6cSs\nArJTDaf1D3nOAu/5T27uqPIw1WK8V/dJ63BT8NtQRdqYrkNkLke9esNwoP3H\nvJmcN5QQwjjMLM7u+9YlbLVURZxxWcCGKtCyFEzo1fTTSmqy/zhMbFsXrmVX\n3T5q\r\n=bZs8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.73a227194.0","@material/rtl":"11.0.0-canary.73a227194.0","@material/base":"11.0.0-canary.73a227194.0","@material/list":"11.0.0-canary.73a227194.0","@material/shape":"11.0.0-canary.73a227194.0","@material/theme":"11.0.0-canary.73a227194.0","@material/ripple":"11.0.0-canary.73a227194.0","@material/animation":"11.0.0-canary.73a227194.0","@material/elevation":"11.0.0-canary.73a227194.0","@material/typography":"11.0.0-canary.73a227194.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.73a227194.0_1615508739325_0.5102951486222032","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/drawer","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e0ad1a5db25725f271c159d842643a57bfeb5ee","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.f8579b7ea.0.tgz","fileCount":48,"integrity":"sha512-Kkc5eVZFv+xYzEDV9blfx8phr/vz3T5hcTuTo6HbY02CNxHbYAcI1WKH8XJXSuR1AnkC/Z0FYEKtrVTlsmnv5g==","signatures":[{"sig":"MEUCIQDcW6qXfyeipe7iNk15k/emORDaANKEe2AFutcVZROfxQIgRVDsmNS/CSnLMZdRAmB2AHCiDkecgPhxp+YFCra2KAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB23CRA9TVsSAnZWagAAcVMP/iXaO49gPNx39j/DJ0Bh\nkQK66+npsNP+P6/kYBw0BmHg0yURSViMV6SJI/gpTJCUIFOoK8w2WG8jXabq\nO3d3oAV/04k5q7bMlI9TUMk7R8Z31Cmp64KR3RNSyi6rT2m5fAgV+j7sxK7Y\nTxNYCC2A96q5i48l40+eApCF0iXz3bbwCfarMIo9IAY0ges4VZJKknj93IDK\nfikIknrGeDLpzRp3nzisT9RsTNHtcVjZkyNx6uYRjEuriOkK6yXexQsacheg\nhdJMUVkP1lJz5d965V10yuMhuNuVDq1VvHj0hkPgREeRGwUAF0LqLfFsIPFH\nFsjlJcUtrPa44wO7jQ+N/5CB/AmZo22bqAqmDMFcRwHKyiYRkICr3eH/Wfh4\n5Ss9uFGIQJe1Zn0RWduHwbjrHmda96VYvMSlMiC4i17CCI5797Y8hEGJ+b9i\nRpyVb4vnsVLMFnczMSXmYGhqJetgqcLq4c8yGKHBH6iODzso1CQY+UCJ5io6\n9odJCsfuWfEUNWQ5H7a8dtPefaq0jBifEmT/cB9a+dOO4zaGS3BnbaechSLp\noynnnWEFxg3QKnHe+lC1ODAr9mWrOcxJeRVn1mViDl5HtpDmjp6OW43qQzu1\n5DdP0dyI7w57mmDz53yrdHgjEj3tNCyk2rBi9r9Rxo2s7dq+BjF5ziMc8Yzx\nLI+B\r\n=Jc0Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f8579b7ea.0","@material/rtl":"11.0.0-canary.f8579b7ea.0","@material/base":"11.0.0-canary.f8579b7ea.0","@material/list":"11.0.0-canary.f8579b7ea.0","@material/shape":"11.0.0-canary.f8579b7ea.0","@material/theme":"11.0.0-canary.f8579b7ea.0","@material/ripple":"11.0.0-canary.f8579b7ea.0","@material/animation":"11.0.0-canary.f8579b7ea.0","@material/elevation":"11.0.0-canary.f8579b7ea.0","@material/typography":"11.0.0-canary.f8579b7ea.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.f8579b7ea.0_1615601079143_0.42851733165007166","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/drawer","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5db7d1230437594d2d6653c42d2ca30c05482626","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.d2a39d300.0.tgz","fileCount":48,"integrity":"sha512-RmT3NftUoh2SBEFQWLpD4+Use4saLGNlVgsiU51h9TWZJoZEzEA47UIHzr6zTTEEAoY3vD/Y0longf4DEmyfig==","signatures":[{"sig":"MEUCIESon1ebGoUdci8TlfwmNG0c6n94S6f5ZCB7rkxrAJjhAiEAt/mOZlU4yn61aHDDub9iik4xRFInLaajhsMrEGzHsYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/2SCRA9TVsSAnZWagAA3LMP/3u3y22JQGeaz9T0I0s5\n/c6pEX7M6bbudJB7bNCl9eiRwNRl6+cAc8VF3LVkJC1KDE1RPovlwxOEehl8\nExfNoRmoK/GQAupfPaK0y8m4w3XFwoiuLPLM8npib+nBswbkLktR5Nr9JnrZ\nLKXJolSWWHRR++O+jcurWkkGlfxgctz+tpU2hcx5MSpejRKDFwBbRR+F64wF\nZFBwx7wzJqtPaKgU7YRQ5UmPOE2ni4aG3thQFTRKTinmUNqlOOg/NvSIszk6\nz50DngL1l7RlPxJwZ5ZhQfFmxL5PnI9nyK13lvQAg5MMARzl57DLWwkYB3Xi\nQgJD/6xmDphOqYPZaE9gTJSOgrRMnMyRB2nH74PKvaCL5k06BaOQk4tvQ02M\n02kvmrw3JCUczCo6u54wEp2F/Vzy4UGOMvdUlFdKNGdthKpfv7KRkA9Wannk\nNFgg183b6hrTru9DFf5HzBycpMUg3FWO3dbFwpmNivKnzqITKBm6uFl48hQz\n5PcjscV53VmRIk97eMsmSyBou+S4qczOEEFOqPhuGMSDjcRaSrMNVvCeXWLn\ngMZj8OxteMJuLAYpkkEe5wEtr+RXdhBr8RaPEXZ47OMAjyQJ9nN7kfkUrxBr\nrt/AySzcXlSHO3T4PoxUCmPaHp10/J/Kgv0c7VlZc59M5dPtclI97sg/8xkU\naSxb\r\n=k9yp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d2a39d300.0","@material/rtl":"11.0.0-canary.d2a39d300.0","@material/base":"11.0.0-canary.d2a39d300.0","@material/list":"11.0.0-canary.d2a39d300.0","@material/shape":"11.0.0-canary.d2a39d300.0","@material/theme":"11.0.0-canary.d2a39d300.0","@material/ripple":"11.0.0-canary.d2a39d300.0","@material/animation":"11.0.0-canary.d2a39d300.0","@material/elevation":"11.0.0-canary.d2a39d300.0","@material/typography":"11.0.0-canary.d2a39d300.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.d2a39d300.0_1615854993450_0.10627161222437365","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/drawer","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93386668e950e796ef51370bcd871f3e8210486b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.7cf67823e.0.tgz","fileCount":48,"integrity":"sha512-1V1GrTkSQ1nFvhcd2YhlA7YaCwZi941Y7gcv50Ah+A5nbHEzsdUDqHa6+cnCUYX2nhZyjBQnUzX1kwdGYx6ZPQ==","signatures":[{"sig":"MEUCIQDu3iy8qu/sdSpfB6nYjdE9JSoIZmD8kkNmvLnVRgw1eAIgUDA1kJ/JrCQS3O8Xfu8G3YF6QKLyQyn4yLVL7eBL6zE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPc3CRA9TVsSAnZWagAAI90P/096fUbAJskWxoLErBpi\nJqgWOJiuk6+ovQUxpTSCui1f4H2V9mZOzBzW35xHO4amiqgXqc4xgHdqq4AX\nYQOKQt4RaC/kSImH+a6+JtdYwZJm7BvgrXeJ1NjbubWoJ2zQXBeK9AOQUQ4E\nN37XD8dOTBdLVkWcdTGs1d5Qc1qc0V6FLjFKaSgLntWOjkxpfKtY2ntMWh3u\nKXL9nsSe++lao6m0vddsIb/Fyp7QNdCY6GynGABI+ZyhzyMF2L+wAQjpRI2k\nBTZlxVx9wq1GHSw989BVoWZ3JfTa7nVlH5I6muhYW1uz9qq+Awk/NtSRETnS\nM9IvMUCwWNeleXMERE/yAvLqoBjsTB5iqsOKIV18yzRmwYxR2UoCov/4MIz5\n1hPqbkcyLyTSz262h2OoFOAle+wD+/NFHfr+fFNGr+syL0Ph6pNWu3M4+15p\ntbq+Q8z/dHL9WjqZ2q+z9PSGor31iZjyJSm7nSsMqau1asWhZUauqiiRabQN\nC7BSVisw97X2U+K0smkC/g4Jwt2awiPIK9RHy6O/1ZVsbwLOQ2YWuwmrb2i8\nqVSYPNMHl2nB53PkwCsWyWS02xXx5A5D+LP2Au/EMwItEQVQP/KJGSxwN044\nwlg/IAQE3EH8lPELuoOG1787YU9Uxho3PcRUFP1Agh3B9DiTOGbMd8heNMIu\nwGw9\r\n=ySVy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7cf67823e.0","@material/rtl":"11.0.0-canary.7cf67823e.0","@material/base":"11.0.0-canary.7cf67823e.0","@material/list":"11.0.0-canary.7cf67823e.0","@material/shape":"11.0.0-canary.7cf67823e.0","@material/theme":"11.0.0-canary.7cf67823e.0","@material/ripple":"11.0.0-canary.7cf67823e.0","@material/animation":"11.0.0-canary.7cf67823e.0","@material/elevation":"11.0.0-canary.7cf67823e.0","@material/typography":"11.0.0-canary.7cf67823e.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.7cf67823e.0_1615918902855_0.1484981724068597","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/drawer","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.67d780c79.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2442124ded54687d4cd1ab468ea11d38f00f5c86","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.67d780c79.0.tgz","fileCount":48,"integrity":"sha512-5QGA4/DGAcycHRXp06/ExCEOPrQsHdC6ghs8ou8TxoT6IQqtCNwzUzbRFe2Zz76mcJ33MtLGW4ZOuaUYFuKq8w==","signatures":[{"sig":"MEQCIFESEjPRiFv2U+JtwBYk8Tpb6+5Rjb0j6qrLMkGEcysqAiAicdgwZES8lxsb1+4oeMswnKVWvlcqwZHaWaZSsq8Ekg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQvICRA9TVsSAnZWagAANb4QAKUHBGJvjb2Re2nPXkW5\nBojeQHa7786feril9iMDvpVmV1FRg6HN+EPd2KBYgK+rfw2rsxwr3zEiKF7j\nLmI2JJHZghroGTbnaCahrm08t8+BfDMx3doxqp34IkjNhh9p45Hz1pmCEnA1\nnk62OV1m0DjS1sZLGDyeN4aXZ6Ywr734mY+uosWw8aOBGNLEZ7+s7Cq/1Mlx\nl5R9Y5OkQQMtr5GFmLMxEXzEv4pFNNIpSu87P0dnjBKbZk0pT+04IDq5TGGr\nvObCa4NUCSXktDA+NSkoP67HotoUpwD/jLPJsenYriSq8D/rU6Ct9LezB62h\nmc9w7sD8kzjJD24daptpG8Gd8UQSVUnJIZ2W89mBzYlcS5tYLCnvxRrIMMd9\nxmxHCcFFblkZvEpr6yllnhO5SHh0vbB34FvCNuYqCd7na1792F/HxlJAG3j/\nKJTSCbxXMBxEQefggf1r7HAe1xPoUuRmfFR04PlaLHRwKeTbLSgcuQqqNUIV\nXCDUXxvZeKObU/Zd/0phV5VPEWuKVVTS+IhhnLNATBu7NhM6GqGXDhy2z4SI\nJbht7jMyvt5RJUmvHQgcKM5vUFrs+7JxKQgkUGgv2QuiTSaBhMfNBqpjnStL\nxEKONF8rC6Z637XvlEaPn/Bj9N/VumODAZDU4nXdq704Tp+Rfgh0KoA1w+n0\nDQh2\r\n=+3oI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67d780c79.0","@material/rtl":"11.0.0-canary.67d780c79.0","@material/base":"11.0.0-canary.67d780c79.0","@material/list":"11.0.0-canary.67d780c79.0","@material/shape":"11.0.0-canary.67d780c79.0","@material/theme":"11.0.0-canary.67d780c79.0","@material/ripple":"11.0.0-canary.67d780c79.0","@material/animation":"11.0.0-canary.67d780c79.0","@material/elevation":"11.0.0-canary.67d780c79.0","@material/typography":"11.0.0-canary.67d780c79.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.67d780c79.0_1615924167533_0.31719375434091446","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/drawer","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea26f9637c8a4232b45ac861a6490fef818a78b7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.0f358ddae.0.tgz","fileCount":48,"integrity":"sha512-jpAQCpnMjWKKz89Q3zZHuVrjaSn+NmwKWTWjF9Gf6OuEQDAgIzMTC8Z/Mu3lnr/LqvvUy0q0NPliyEsgtdDJzw==","signatures":[{"sig":"MEQCICkSXsj357slP9YLMP3GeZ64hh7mG/clb5DRkl7XyymVAiBY+mLoKhPVu5xEPx4jqrWhUJlp1U2Rpp8SKR+L4REwwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS2kCRA9TVsSAnZWagAA3EUP/iQ29pEAP5dbRyU/DGQ7\nzEUkvD9wOHYHa4hLaGVSj5EaeB13uXShhKa0k7gW0yipckEDJ/ipiVrekAh5\nHNfBExA/MNiwupGh4L7DKs+8rMNoDXARVWb9563fakrr/ptbVB1/lYvwP3Sz\nD20gsXXvF92FOP9tYyF/NmQDLlin3AF5D4KPYlREoY2y2AI+S+X17CbnwtrF\nH7liBrQRwj1fzBYF+5x3A2tDjEF7veIl+xTTaxLuS0pEmueitnPC3h+V3pCn\nApDrzVcpq4R2513bfw+ng7jACTaAuys17E6GlfNmmbsklYomV1XqS1DZvxVL\n9b2gmr4yIX9/Sc4nrU4p0HuHOEh5GgivRJc1YdYLKDeBnP9A3RxVh+84NIRU\n2lIDeFlwakrJrQCL/RI1rjpgAlUM7dabgC6aGMgGeuyaq+ntYncQSAzfv66x\nZhfX0eHcDoO1Bwy0xj3v4EPSNymQixstziLGYiunb5Gs8WydEWurN+1lwqih\nwIxa2TLwMydgSC9AUMIZq/44MApZsJPQqEJIaqqICf9fSa0vvDiblko8a/gp\nY39Nm4R3Uf+LyDp33TApbewKcj12AEokjwjyMUZJMC21PAObYwJCU0acKiMy\niRlifY4uC1Om0lm1v5QNH6UGQs4il0ynG0HTL2n7fRrJOo3+Puz+VLiYlU96\n+GO3\r\n=kO70\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0f358ddae.0","@material/rtl":"11.0.0-canary.0f358ddae.0","@material/base":"11.0.0-canary.0f358ddae.0","@material/list":"11.0.0-canary.0f358ddae.0","@material/shape":"11.0.0-canary.0f358ddae.0","@material/theme":"11.0.0-canary.0f358ddae.0","@material/ripple":"11.0.0-canary.0f358ddae.0","@material/animation":"11.0.0-canary.0f358ddae.0","@material/elevation":"11.0.0-canary.0f358ddae.0","@material/typography":"11.0.0-canary.0f358ddae.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.0f358ddae.0_1615932835427_0.3280763234740245","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/drawer","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf36dc2b77cc4c1f5b16504a7db70d4323d6a9f2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.67eb0df80.0.tgz","fileCount":48,"integrity":"sha512-Od/88vKcnJNvpftr5A/r0h49MSsRyl5Z+HckoyQkHHIG61ScLyUT1n9DW2DqUDzL0FbeUyW++2X3rRT3CE/uaw==","signatures":[{"sig":"MEQCIAaObuhKz6MM11TKY7CQUqPe4WzytCHQy4TZhq9YSasrAiAkVp0xPFh9v+dGt6fKcjSDQeex4toJl1p6hohGyf+16A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTQFCRA9TVsSAnZWagAAEEMQAJjnKIkf0FfE9CET0nXk\nhdzVwNhwDPhzyYxd8IVHEn9IluoQJM/tiGDa7Zulcou+h+K5Mx/3qckgseAl\nX9PSqBfOrVtzzKqYHAqrw2XTBRa+bpGo7nr7LpfdVN+rGVN6pxgHbOVIVMxt\n0uZksubMX536Dd/B+WVDRRBxBktMLuo5AWngHGK56jLuxYqqn6n9oqFgEgPx\n453dvYP7k0WxByUoMyZs1fLA0QBK3m07cZXVHEwsnaoXiZXc47sPpc1NZBSz\nqBhsEiYObYSlhMqaHjeMHwKT6kFASTM7ocfl+aZjYRTFT6uJhQSW3Qn/JWIp\nca38KZwagM73mq+oUsWjCYhmLGZnvi5uOVPQjPUuNFbBYi2qhD7ijAbs+tB+\n5KXyihQ4rXvZbpvNk45VCT4xhGPgWYZuuuBQvAeGQfhBHcjON50fk3TEHwdD\nDcpPgIwcPypfZ3NTqqQb+mvwc7ABc17kw2njEFbUXu2aDLOpSTyMha94Vyg4\nVpsjVon+kxljSIKKjvbMMBYG5JwTh/Ij0nuZxV7BVg1gaLKv4nfZLTr/1IQX\nQpzqgqq4f7QtRUjanfOVQ088/rjvuu1EBBjzcwBYbqn03T4n14seMGcf+jKL\nYnKTcyjcEAAOkaD0AnXkjG7AIonERPNlTSCXDKUCHL2MGBowtHC38AnErkgQ\nVwsZ\r\n=iRnr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67eb0df80.0","@material/rtl":"11.0.0-canary.67eb0df80.0","@material/base":"11.0.0-canary.67eb0df80.0","@material/list":"11.0.0-canary.67eb0df80.0","@material/shape":"11.0.0-canary.67eb0df80.0","@material/theme":"11.0.0-canary.67eb0df80.0","@material/ripple":"11.0.0-canary.67eb0df80.0","@material/animation":"11.0.0-canary.67eb0df80.0","@material/elevation":"11.0.0-canary.67eb0df80.0","@material/typography":"11.0.0-canary.67eb0df80.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.67eb0df80.0_1615934469516_0.29563581433896857","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/drawer","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49e912d5ec886134953edc8ecd48a8580e170026","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.941ca3b3c.0.tgz","fileCount":48,"integrity":"sha512-g0u6sNmFaiUaBu2IYYxL80ougP7Xoy0MmrQQfXvsDomfrGryq5wCBHM6ncR/uryisklN14ugU4n73/NnRNhMhg==","signatures":[{"sig":"MEUCIQC2sN6lRSpphBwb999IOZvZZYIYdt/ATEi+HlaD6Yl2fwIgAeNFraK3D+XnieB4gO7TxwHkRPRjHOMcYs9OrlbMnIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTRuCRA9TVsSAnZWagAA2e0P/jZSRj4y7R9yq9ZHlk2Q\n4B6bBz4vtxYurFivDZMmGAsXtNoYKBaMWSCPuKSSxRV+FQpQqFRjbRjC1V8q\nWw/YNuXB0oc1poZ6Xzo6Fwz2r1YTyC80hvgiEdXz75NQJTfyEYaQGuzzzrHG\nxAu0t1q5z6wLy9luDpnntWtmrUIcS0qDVDWbngi3R+aSCAbDyBMB+mR5QgsN\np3+mZErRDkFWHDMi5JGGyMSKzJ9UK61kmcLpSCqM5mkFonEc00JviyX8gyDv\nCWOhex8v++W+zOVWL7my11DgdY/hNdd/yj4hSDMxQUHcoMe2/DkfTYsgg25Y\n2fbpBnG6VzrzvRsqdLYgEoXQrFezNsECWAl/J/z4nkSr5i7Ts1FrIxELt3mh\npJ7F0mzzC+EAUZ2LRqeINHysDPJKEQ921/fCDxHX1HUfbhMNFvyZGhmdBge9\nAiwzU8R4JQ7Td07FwTukIMHD6vZBYip7maTFKqszhvEsgBn1eB4kWSML1ag8\nHgMagatvmwalgfH9ABa/1DvfQDw68cYBvolQsjuA+ppIWL8IcFCz5E0uW9aT\nNfOTIEa1RfPpoe9J3TUnbcILiIHygx4irJbM5Q2+L/0BLsxSwoErQcBeBoLG\nswBoIaagfVZ2sY1Cbz4CaOPwoRL2f9hgUHzKdXDKdZLhphuPOrNwd5fo/mBy\nojGq\r\n=oQP6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.941ca3b3c.0","@material/rtl":"11.0.0-canary.941ca3b3c.0","@material/base":"11.0.0-canary.941ca3b3c.0","@material/list":"11.0.0-canary.941ca3b3c.0","@material/shape":"11.0.0-canary.941ca3b3c.0","@material/theme":"11.0.0-canary.941ca3b3c.0","@material/ripple":"11.0.0-canary.941ca3b3c.0","@material/animation":"11.0.0-canary.941ca3b3c.0","@material/elevation":"11.0.0-canary.941ca3b3c.0","@material/typography":"11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.941ca3b3c.0_1615934573585_0.5271146164999259","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/drawer","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fcb812742a7a8649fbaa046884f76a8daf3feea","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.3344d12ad.0.tgz","fileCount":48,"integrity":"sha512-sLK2iDIEheOhEdQeLKcPU+CNtmw9xVnaXHDEeHDHIFog/j2eAx6at/ZahmoZwkPzLgPu/gOSEwrkv+8lvtdRPg==","signatures":[{"sig":"MEUCIFU61FVJVlKMCr9hiZX/qSnsPaZJyD6Ia/nrnALUAHvEAiEAtQctiiBlrbDkotDym8wffEdNk4pOZCy6dRpQm5qEfxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdPnCRA9TVsSAnZWagAAOowP/1D3wVzyJRGt0Vp4erxI\nIrlU/SV/TAVUp2HJq/RAqbtAyaPfzfhfK+4UjCodvu84ZfN/OpzT+n/dwmF1\nEhZ/Wiut+hI/rVfCleXcNvFT66Sh2J+40GbqBG1V9NHRcF/T4xapxjzhQdjq\nyxld/F9APjVoMxSjD1J1j3nioMc76AQKyT0hkSvJS15ys7ZelMdRLBq0BXO+\nQLJSI45ChB7tChS9EAcTWx8hF5A/B5qgKpVSQW+ziqbcLbboKVxx6Z/wUPr1\nJ9TcHXMwUkA/udOnYLwEdpQ6PtFKKZCZImyo+MLvXwTTTZ44hQyqwB/+7bHo\nVH4taLX+E168Z2UBrWkcWjVObZq/Ubdygpyg0546K8yjwAU8/06JGJPitDvw\nUpMGSBLilMD9Vdt5MNTycZ2eOMKBPvbkEA6KviIpN2kP6ts/XSd3Cz+y0gOD\nx8x0g3oo0m6gWC+Ips1Z6QQFdUiY7z7tstqO51TO+u5+xgLFC5pNN8UcAPWg\npcdhFaizq6xSCGI3J6BgCfqrV6NRsIshpMnnqcIh99BuSGvk47nqk493lVVF\ngq9XMk3kb/emJIjN9X4CEUskw2eMnQ+VgLO33WKMptNtW08J1P4umNctuAil\nDsjdrvMNFM/s2x2QPioT+cg7oAiEBuQ9W/PtPjGH1otMY2glTRmPYbCjNjZR\n1FUf\r\n=cZjb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3344d12ad.0","@material/rtl":"11.0.0-canary.3344d12ad.0","@material/base":"11.0.0-canary.3344d12ad.0","@material/list":"11.0.0-canary.3344d12ad.0","@material/shape":"11.0.0-canary.3344d12ad.0","@material/theme":"11.0.0-canary.3344d12ad.0","@material/ripple":"11.0.0-canary.3344d12ad.0","@material/animation":"11.0.0-canary.3344d12ad.0","@material/elevation":"11.0.0-canary.3344d12ad.0","@material/typography":"11.0.0-canary.3344d12ad.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.3344d12ad.0_1615975399081_0.3198391845842028","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/drawer","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.6072ed604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d201b56889315e0f002ff7e312dbf2e11d89461","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.6072ed604.0.tgz","fileCount":48,"integrity":"sha512-g+S/TyJkAfRfFp5XpHShicCYmgwwA93BqQh+IFREa52fykw7iVfE0xHQ77mu3m/c06yAfa5M8ZhyEwpW+yl8XQ==","signatures":[{"sig":"MEYCIQDTOGCfTN0XnAk8mdfCL1gNL6ZjQ8IGGi9uOiLohZLfxAIhAKX4OFX74wpRuxwsBV468lg3kr4UnFwTaElT8iIXQrnd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUooqCRA9TVsSAnZWagAAQu0P/21JJhimPLeDL2FnESvP\nhs3aHYyxGiZDnEMa8n/kNsKWuMfGI6RpQ06uBn0OEV2wAej1QKQ4zQ+WPzi3\nmVbp18jqIlRW7Pa60PGcGe2s+JRUjisjg718Q0nVHOWbLXn3aY/4X6q42o13\nwLnb1Wq+6we5zggFr3jmXC3YOwUfKDL8MEQsTTJrh0lPPKzrXdHfzvo29vpd\nF9/x1qQiR7BzdGjRF2hp/wWmFMEuXRzDpBXiEUbbbpQsxFdeGNLv5rHsnbOk\nfyfuCy/90ETePmI6ROUA8GOK+y/rHVbwvUtHJBhvPUvZHTDLYRgekBEYoBor\nvN5Wm0oDi5FeByoYEOqaWmkfFOuoQrA1da3ka2TWT5bZtkh95K9hj/gUn8KL\nvsLEDyrM8STIXdTnMW+x2maFGGtPh364AV/u6ZJ08kRyu2K2dj7Lu3i6+utZ\ns4uBEfwb1iJOGjGLUvnQHOAu0wI5eDm4KuK96z46DUGdzK6KjJiuN0LeLMM8\n9zqF2oZ8D5/5PV+l91jcDXAmYDDu2fO1MeAaW6sILH9a7cXpZdC8nVZ8MDqK\naym65BItVnoPrbBOAKfk8dRSwV/PKmR3aQaQJwLJkUvrhoU7VtjPzgJmSArW\nquwGI+IedmZEJBRHtD07A6nja+/Q2B6yXsm78kEmfJmZ7rJbr5CLmjV6LDsp\ncnL1\r\n=jTss\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6072ed604.0","@material/rtl":"11.0.0-canary.6072ed604.0","@material/base":"11.0.0-canary.6072ed604.0","@material/list":"11.0.0-canary.6072ed604.0","@material/shape":"11.0.0-canary.6072ed604.0","@material/theme":"11.0.0-canary.6072ed604.0","@material/ripple":"11.0.0-canary.6072ed604.0","@material/animation":"11.0.0-canary.6072ed604.0","@material/elevation":"11.0.0-canary.6072ed604.0","@material/typography":"11.0.0-canary.6072ed604.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.6072ed604.0_1616022057514_0.3414629436932204","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/drawer","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa91e7a7b2925f2d66875de018e57dec92b7da3c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.d3a6862af.0.tgz","fileCount":48,"integrity":"sha512-5Vq+M/Aa0C1v0Yp/LqftdlF8/0XBWClibZA0Av2w0t7qlSVKdHzWrt3VfvTbtYguY9VHhvRTvcTvRsLDOantbQ==","signatures":[{"sig":"MEQCIAGuEPq394ygX3FsfmYdkES7fptjQxt3Ym9suXfYJ7S/AiBNkyXr/aHTX0Xm+N/O83LgH/WkQCIya28Q7MXbGqRmLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU34TCRA9TVsSAnZWagAA2i0P+waI+MpMZ7Vr62C2al2D\nelu9wPTucqfAanf4i3gj6U7iTJzIkE9PY/292r0jZBgXafciLCXm4IKTdP9I\npkwdUp2/IVlj3DZZ9NTjZlRooSa45dOw4A0UK7PqxhDDf0lCtDbSwLEI/X+y\nz/GNgRZYOCDOPYzWNbY94bUr+uS9toZYMaZ+hfXb81U+yatqs6KSG9v7Mxro\ntB726BLQDc9MQpguoCwxnRtsqb7zY3cWikFEHHlDawRgy1d/vyXbAhn0eZY9\nNAAZsPjp4w8WyiLpqf6s/fwpinApuVQ+JzXiTnupvv7t5iwbAVXertQqZH5n\npj6oblt7xBcKlOCftgnAekpfJi/vECB3DXuRiEXAK7nxp9nei6AlqpeN9QaK\nEYd6MZHrFR1XQEGjWaYCX74NvxbkA6u70cvL/IYLXRvyXJXAPATvWSczvxVb\nFNNzG4zdh5Mw1klXK2ExYWkYw/Td5gXNRgAmwTcTVUZ2aUt0/jQfa17IaSM7\nD7gX0Wj6WaB5stALdIgbRBx/apgsII79WA6sSMa0qQhnyVVE3UPRX0+nM/2B\n2AOVqvbA30lJ1c81KuHXTZVBBH8TEGDPI+bhpVhqLCqk5epuGn+Q2+lLFho+\nDWGfvVYXLDImHSX4FCEa9BJER10n6gv90Un/BgVFlik6iPRzs2YgekQjYZSt\npLLX\r\n=mN9S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d3a6862af.0","@material/rtl":"11.0.0-canary.d3a6862af.0","@material/base":"11.0.0-canary.d3a6862af.0","@material/list":"11.0.0-canary.d3a6862af.0","@material/shape":"11.0.0-canary.d3a6862af.0","@material/theme":"11.0.0-canary.d3a6862af.0","@material/ripple":"11.0.0-canary.d3a6862af.0","@material/animation":"11.0.0-canary.d3a6862af.0","@material/elevation":"11.0.0-canary.d3a6862af.0","@material/typography":"11.0.0-canary.d3a6862af.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.d3a6862af.0_1616084499363_0.9099103702231799","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/drawer","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b6531dcec0fc7ba8fdef32ae83b9cf28fd7a38a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.40dd242d5.0.tgz","fileCount":48,"integrity":"sha512-IRT+vAsEoqimZ4/4AAhkPjWM+thVWd7bTZTX8Q/c6fI2+zE8hcushj1xtslCym5lKgnvIR7CTKOIgv9MHJ5O4Q==","signatures":[{"sig":"MEUCIBfMoo/eyJNaTIvtMKYEOoF7HVUXbQlnsvQuMDKIHWcbAiEAt+QcJLpXZ393vmJgBH117YE535qoyz+haV3KNtkU8go=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8O6CRA9TVsSAnZWagAAhIsP/3sDLPKwMBoGSi6ReWDD\nDCHd9k2p91w7AngmhEi+1AOi6NAiVwTq36mBlOT86m/rnS/7rZnHRMBWNXHn\nRCELmflE9He6Y5wMzQJ6kcKjOb6inZSbQHp3DWsGoB1RHU/t4yTJ95N7gnRY\nHrTI/AWb7GKqEPm8F/tXEDaEI1P5PbsDfcfSg3TaAHJtGrhjrLeVxESCjHkE\nKP/T61CFwA0NdFc8H2N7SOuGluJfNOQ1W1aqcfUDqWKGWNun/v0htaWjJChV\nagBkXs+G+oI8bjXB3FjtuzB/gyqJ8TOr+QW1R4hM4HG4oRwigSyop6aYVkqD\niYnqaslqM/iuNxLqcMKilXWIVfWQa3QrQWycmijtYTDKC3yIZyjEwvHXi77E\nvkef+ZmlEW2FtI0CmjKz6q4R3yTWjcjnZVTZ1Hrw5B6re9EtSpPSmLJ7mqfs\ngMlSgDlW9p7uCSKBoA0E5fFZBcUGRiEPJ3Ff+BSFhNRRzPOSXHz7M/hStM4e\n3ey4XxRAaf7kiTJ3WUaquvMBVbL636HQKORW6y5zg6NTM9mLknqmh+SwuYjP\n6jwUPuukGzw5f4AsFnmB3BGyjfQmd8CzjzGsfGmQDphtirRpMvpbUU1ek54z\nNA8UIZkKSr9izO6S5gq+JF4Z2l0iMEohqHUpbj4nNL44flEe+oBy18K71gqT\nS1VW\r\n=4s5Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.40dd242d5.0","@material/rtl":"11.0.0-canary.40dd242d5.0","@material/base":"11.0.0-canary.40dd242d5.0","@material/list":"11.0.0-canary.40dd242d5.0","@material/shape":"11.0.0-canary.40dd242d5.0","@material/theme":"11.0.0-canary.40dd242d5.0","@material/ripple":"11.0.0-canary.40dd242d5.0","@material/animation":"11.0.0-canary.40dd242d5.0","@material/elevation":"11.0.0-canary.40dd242d5.0","@material/typography":"11.0.0-canary.40dd242d5.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.40dd242d5.0_1616102329848_0.4140617793201826","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/drawer","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbc652cafed9f5583820cb15e866fe66a5d4ea86","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.ec8f8465f.0.tgz","fileCount":48,"integrity":"sha512-b03PX0/dkjl/5Pre+UJvo7vz75OTIKz4vxtY4IZm2FRTLsX+Qmo/tQ7h9nN5Hdt5hronLjuwO04JmkGGGMRlKw==","signatures":[{"sig":"MEUCIQC8s56maPvylO9iPNvJAtorYIlLu3CQAtgdepLiUbCn9gIgScZ3K6+3KnZ3EVHysVimXBeMz2vvHviD2oKm9HgapP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8oDCRA9TVsSAnZWagAA7XIQAIe9/n8i9b3IIu6n4fAf\nAhCVmxSUi+ihwS2j/NX6Q48jHB0kQtsxJMciuuz0+hUt8IXIQqZfJ0danyw/\nHvyunFdhXcEDMhSU6CmNvXGoVS1bI7qAXbjutmHGer1fmP1CHBGKEqblqGAB\nQI/1eyJR56uifkb+/wZSUCReWHa3zFxvfRfqAD8GvnuEZXOmZtsFQhJLAMjH\nYspMYTsrtFxoxgA7bxzbluatdndrbm/sLSHwHry6b9+8HoRpZeFmpR5iX5Rl\nEBbAEgUiHfGQsEPnZZdY6lHbkKwpExEGFXF1n/KGPc6qgusJ1j0yGVAQ+3s1\nFgMCsheAelPxg/PPOO87h3cgQLnZZ9cZDsmT0UU892bQXC+4znWFbHluRPTy\n3NIvzKrbtxsXbaBRo6+549uZVH9UWjb+ZrC2u5BYhkt6QbE3+HLeD6i0qxcP\n1CgSywecbUscHL8dNQv8IV7dHAEQVWMrZOxRLFLtyHGJ7OnuNIM7WHhL8nFj\nFX+ZRxTkl8+haIUF1utOf4PjHVAHYU4gRV8V2+byioc7f39KgYXpOmu/7LXQ\nT+2Pvd7igCjhvWdZbNirADd83Y4zO9D/CNh8Fy1HS6Zl1DytIuYo9Ts0nWHE\nBS9+Ofp6p1dWBN8ZatexObpa3e3PcA1Zw1rm1/bhOX3a7lbWzCsa7NsBOWDz\nG9eE\r\n=S6lI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ec8f8465f.0","@material/rtl":"11.0.0-canary.ec8f8465f.0","@material/base":"11.0.0-canary.ec8f8465f.0","@material/list":"11.0.0-canary.ec8f8465f.0","@material/shape":"11.0.0-canary.ec8f8465f.0","@material/theme":"11.0.0-canary.ec8f8465f.0","@material/ripple":"11.0.0-canary.ec8f8465f.0","@material/animation":"11.0.0-canary.ec8f8465f.0","@material/elevation":"11.0.0-canary.ec8f8465f.0","@material/typography":"11.0.0-canary.ec8f8465f.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.ec8f8465f.0_1616103938687_0.2826885291864971","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/drawer","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.da38969ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"559618368b13fa12596a395b8d618ea78f9ff128","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.da38969ec.0.tgz","fileCount":48,"integrity":"sha512-Upki3KRk1dJsDlhDDCj/s7ZbqZHGm222LQO2Pwk5mpAiooZiMFLWhwtrKq3J2Bo9rVTNR66aNNpeBHzqTkWU4w==","signatures":[{"sig":"MEQCIHVPo36sO/rHwdIDQvSyVVy/Ns4emXt2wezSACKXSykGAiBAzrUoPVYFg8KYOftEzD9jT9kqKGxzLqUQgbERCEiA7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9HwCRA9TVsSAnZWagAAzPQP/37oS+3KmgGQn1eZEzfm\nJ1WgZOXWl0HJMa7SMtdV6v0QBskMg5wgCNImR6e8GvrtVorV0SrQw6qu5VuC\n1T+nNblZJGJqYSN9b2X87ygRGsJ3V3+QBaMJnIp9abRS6Ob2j45wKAxQqjhG\nXSafgDn4F9jx1GHbW0bzjCmvWCpqG8A+MjGNge2QbC8AD0GvxGOy3wK3x/oC\nBBGDp+K59I3V0PqewuqzD04nHwzcRZ+975LkgW/QcXE6P+Q3fX7Ew6GM8GCH\nazy+ASZ/DeHhdPRfj0yEbC8I2iZAhsp0jFYyCEOGTzHCVfmYILDqtk9g/VHY\nTQzEQjfCxyZBbzCDN2/+G13x+egL/5z6puFC94bIMfWz2v7YDAodXHFRfBWJ\nvRGdhvaBfkVo4PdzWE6uDtTFsn6fV0jtNAB5gzWjBdZNnYQwxY9MXjCg+7LE\nTdx07EIKTrfvdS6D35NQlecKbi2iY+Nrk8sEIS1VaH3NhD9n/BPN+2xYXFCr\nqn9VtEQAw6Y2kH/e9VsYC9ESOnyqcRf67X7f7J8maAl04OcNm+aMLlIZFUNx\nrvtcw1nWc9ZRh5ZjA7F8tqQP0SD5dNHLX8gRwTjGoWooR5GFEeNdJiOZE8x1\nKIiPMFcNniZfegmBd/ve7Q5C2fkCVRtJCfOgZNgPPe4Z6F+XGjAvEIKWu5jG\nW37X\r\n=+0PN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.da38969ec.0","@material/rtl":"11.0.0-canary.da38969ec.0","@material/base":"11.0.0-canary.da38969ec.0","@material/list":"11.0.0-canary.da38969ec.0","@material/shape":"11.0.0-canary.da38969ec.0","@material/theme":"11.0.0-canary.da38969ec.0","@material/ripple":"11.0.0-canary.da38969ec.0","@material/animation":"11.0.0-canary.da38969ec.0","@material/elevation":"11.0.0-canary.da38969ec.0","@material/typography":"11.0.0-canary.da38969ec.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.da38969ec.0_1616105967750_0.4614298114044233","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/drawer","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.f5246264d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d018493c1dae9aa17c7375cebf19e89a4b07ff3e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.f5246264d.0.tgz","fileCount":48,"integrity":"sha512-W1RnEV/Spn3svi2ipNL16kx1zgI7dDaoA3hc0wfbbwDeOne+2BDp/oyUempMNiOpzgKKQeGE4L7H5xh1tal14Q==","signatures":[{"sig":"MEUCIQCE2JUzV8cohOV2HbpYxoa1A9tN7W3PAiMAv8vfrgpYEwIgWVK2cjpYi4I4sTeA+HSu+Qg3+sTZREJYQgS7ag38mnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/LqCRA9TVsSAnZWagAAJO4QAJ+HhqXtx2WphQ1fEQmq\n/aH2m9yMWSKoBnAH7t8cNuzKJh+lbXZDl2Is+Y9IcnRYo9XgK90b/pYGrIam\nn3C/3TfGe324R6ae1+Ii4VSbivWLus6ZOURTJouourkgGjepN5em43pKVMAd\nUC+ALYPG5qlPdv06V+2odcU3OzvZTSMqm7AWcomL9zn5hq70UWB/r1/BFry2\n6ilvPoK/5T8j2GOpnhOAMHrO8LhCK26dJrzZcWRSxwVdii2yopmM2D0P0Flw\nTgTE3zfpe5becdRT6klW5G+P3O6czDw586nJTJKdUEn6vlnjlmJ8BfUkM628\nxCwifjpWP4bbbCYZRs9OqcGeghHPvzlTjxscp8lxN2TgSPckBHneEJGgmrEX\nQ0W/oLZpdjMBKRGDNgWAqoCxqeHE2TRF1npQ5HlmtXc7RbcIoIFrio9nwnQJ\nJyPdd9vR6uVDYkpfu1/+XB4P8qWqipo145QpfD7j1uAa/LxJJyMR4g+K4zJz\nrIH50vGEdX7IKVEUgtdk3HyNuamEKj4o3YvlZXhYyZoPZQP/K4ilZHhbNNDQ\n+/FAtoAP5eUOcRyj4dC0Yc/fFer8JLEarDTJWOpYNr6I+cIS351w2oXfzJoT\nWeUt7iRqrctH4PBCnGAfjZOc8H1iAvb6cda0sNpf94q6TrsT4rkz8UhxtpYp\n76KN\r\n=rfOp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5246264d.0","@material/rtl":"11.0.0-canary.f5246264d.0","@material/base":"11.0.0-canary.f5246264d.0","@material/list":"11.0.0-canary.f5246264d.0","@material/shape":"11.0.0-canary.f5246264d.0","@material/theme":"11.0.0-canary.f5246264d.0","@material/ripple":"11.0.0-canary.f5246264d.0","@material/animation":"11.0.0-canary.f5246264d.0","@material/elevation":"11.0.0-canary.f5246264d.0","@material/typography":"11.0.0-canary.f5246264d.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.f5246264d.0_1616114409463_0.14197387894914226","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/drawer","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34a585f499439b572bb385e672847f35dd23568b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.03d34bbad.0.tgz","fileCount":48,"integrity":"sha512-fJWuE8ZKTnie+RWVA+sx3jseHEAQEx2rKZwv/55CI9aDPe093fTkakFxMdin9KIP/IMXa9QZFIudR5t7Z4QKMQ==","signatures":[{"sig":"MEYCIQCDiBllowU5S4sSnQp+mQ5kk9He+DmjkcuecqdLt4hAuQIhALQo/D9eWdYE61QjYBOg0+KG6Dmgp9hzuSr4EsV1KIYZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/XoCRA9TVsSAnZWagAAi0cP/0CaSHcfCxts3k3k7XyZ\nh2NNJXELbHOrUqkCl52CWEk3jC+lY56ylkVu05g+BsHsKIK4HdXQakl/ecPk\njpqNatQwCFqmLnG8KU3VDZ3OARjwj1c/IpBHtCjgazD6orKBfkjOWLr9lsL/\naK7Aki4Udh9BwJ63hGPdPRAqwi6wtcQ2f1fTBvoX77HjkjznFQYMtWjOxBgi\n6MjdQVsk+ge+eymmortBU3x5xiRtcF9QcxoV4VHcGfIh1dEt5H/eNH1ML7fo\nMNoUybEqxZHgJeeEA5ehO6R4JBue+hy2Vv0YI/khroxLRlViAMk7NiQZ2jrM\n5Qv0tOvmGx1/xFQR304pz7TNeHYChD7AQlDia81UaUwsjWPXwpNVG/cuju2U\nYBDAEnd1WwqYE++EyCMwPl5MEFzdd07BVJXfE8BwE26J6AW6iw1YwxYLtFI5\nisfc0mndLF8yAbnWiAa3fmHm8fNOnzaqZcVJLeHCOtV4FOzVDL6c8+0KGyLs\nBLJx6ih/a64sHldsRwnvke1zL2WfflinR/UoprMwh3J+QHdJV0yq3Mg12EYa\nqWXYtftJH25RwPGui1SSqQY4CdUf/HAkHw83JM6MTaGoyRBBEO6IvFk1q8Oi\nX7jlmRMoSX9PE2IgB2w2c2Tf/IYSoVsyNx6Vpx0U5S5KOEyT34uxV+1vfOqp\nFA6+\r\n=Vpiv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.03d34bbad.0","@material/rtl":"11.0.0-canary.03d34bbad.0","@material/base":"11.0.0-canary.03d34bbad.0","@material/list":"11.0.0-canary.03d34bbad.0","@material/shape":"11.0.0-canary.03d34bbad.0","@material/theme":"11.0.0-canary.03d34bbad.0","@material/ripple":"11.0.0-canary.03d34bbad.0","@material/animation":"11.0.0-canary.03d34bbad.0","@material/elevation":"11.0.0-canary.03d34bbad.0","@material/typography":"11.0.0-canary.03d34bbad.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.03d34bbad.0_1616115175806_0.17974195712729157","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/drawer","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a44f80f8ea7d027751c35faba3db9a168e4c1f66","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.cbc57c600.0.tgz","fileCount":48,"integrity":"sha512-sYpq2aV33y2UExidCnspGGtEQ96X2z8G9jD8AiMPxuqm3/M5ad9lfno3D6YyBK27FlTTL1ryklQ/pfSmr+t+BA==","signatures":[{"sig":"MEQCIB6cyxa/A432BRRHLJOg1t+on/5C9QgOTQib5ArMg+vTAiAzDJmuArc8q4gwTV5JOQilRdS0FitC+l4QcaF8jOOEDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/fXCRA9TVsSAnZWagAA7cQP/RjUUaFRyywB2BL/Mb4q\n3hiS6PeWgAQu/FdIBiWOh9oPixJwLK/hUUyqsFVxkoY0sgQgDPu1Z+CJdvd1\nH2YuixuiKP3hBGR3xH4VaFKpPNqUsETa4EFdI6R9zw5bFv2EyJg1/EHCeyEO\nYOF1eESsuarRcFou+CUixUX4JNekabnYYMYD9bHxTIzoVex4AytbBBwGc+az\nj0FbFmjqj3Vr1MmpysIYo3QGudx9VS19u9z3IhZV2QqJio0pi7QbGHF/H474\nMdUa5Eh+RFcM/jRdkt9l1xyHVEeglDbslsZkyyTG2vYcrm+3986sRsc7UYVg\nrj//gUFrMCYvwm3aCtTGxkjPczueZGhJZ27YqXRdGw7hqXMBO/A62FzMTyDC\nLFFXfudFKaU7d5pOQBpi0KgauiEOD5QtamJpw38xt6f6C8qvkWaRXa3zeboo\nE88KOLn74Dnm39rzQGEpF0DpRdnnbURx/mdXp0tEvOAlMtUM3tPSgKibL44N\nJlif8muB77k0o8N2ZdTQSCR+zgIBLBWIkzkOzkMH3ayobFuzrko5PJi9BTIo\ndxBXHCtwiTDwragriWXWMf/ssUslT6M6Jf/3xlxVI1OjO8AHM/BIOGA/BXUj\nRfRuCLTYzN+xwlD8vSk9as9RvLxso65s6IxnmzMI5PzQsIcr9Tg1CYTe1fhE\nAjjL\r\n=R2AC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.cbc57c600.0","@material/rtl":"11.0.0-canary.cbc57c600.0","@material/base":"11.0.0-canary.cbc57c600.0","@material/list":"11.0.0-canary.cbc57c600.0","@material/shape":"11.0.0-canary.cbc57c600.0","@material/theme":"11.0.0-canary.cbc57c600.0","@material/ripple":"11.0.0-canary.cbc57c600.0","@material/animation":"11.0.0-canary.cbc57c600.0","@material/elevation":"11.0.0-canary.cbc57c600.0","@material/typography":"11.0.0-canary.cbc57c600.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.cbc57c600.0_1616115671253_0.24045098175360846","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/drawer","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a4e7103742f61b17dc264d700605183a543ebd6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":48,"integrity":"sha512-/Zvumw3T5Hr/DmMDzRJlbOUUov7d7LdkXZMbSAEZMXD/rEbBl55G69TjGEiRujnVYMLTTOZBXuJYhMYB8Kqf4A==","signatures":[{"sig":"MEQCIFx/vhgHubJ/FpijeigWmfpYJOoW0E/3jU2QMm1HIvBHAiARLS2SqAtvD3s/ni444Ue/vRq1VBsxKXbPHP8xOZT+Mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/rnCRA9TVsSAnZWagAACHoP/A11SAZHLPLeRC7C4Kuw\nQbDcl+e/jqerEZ50BwI0fwiSqgpwg4yh4gJzfWVS708mM4w4DupRRINZotdX\nJ0ELJFawCq+ALCBObBmRu7eLSEHHXqnymcKZEeD1xF4AUjCw6ua82j8fHvnr\nX6n9xnUWCqAtJyMSscY3CudWIURFhD87CaRHAhtYDHgUFQVEv5AanC7qhb9Q\nP0KHTmCRZo84qBtOWLKiAF4WrKBJ5PQs67VbOmBIL1EFBfWn2mKCewe1iosj\nPYJYEAO6wT2LLvrZ0oCritgtORb/QHo6cEhdEPCQQEVTDR6QxmE3+QnWFrYk\nqhKO+oG0+bf2wEivB7pnjwZwam3WtFHEK4qafWibJJmOA8qE1j2pzWyPh0I1\nFtp6CECox5i74Rxu40OE+48e4GtPno1/nb0yi//AKEC1shoZ8FQHwoUwjkZ4\n9JkKjY+9BdFuNstf4kO9pWbhdmw4GtuvQHbMNCtI+CugWRPaKjnPpxo83lw2\nJbcpLcAsYsKwzupxdFJ0BfZ4iZKx6RpYPg6dit/Mrr1crqkv9UY36Y+kJS/Q\nqw77m/FN20GKEswLjeO/c95/bXMJM2IAHWrbIvzhQS4RDa6UlKfuz/4uxaEp\n1xb3IxNRBryoTl6NhnruVZVu2hc2JbiGeS+DcfVUrHTHYl6Jlg2dUOYUA6Yo\nlqRU\r\n=njRe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d6c5bcf37.0","@material/rtl":"11.0.0-canary.d6c5bcf37.0","@material/base":"11.0.0-canary.d6c5bcf37.0","@material/list":"11.0.0-canary.d6c5bcf37.0","@material/shape":"11.0.0-canary.d6c5bcf37.0","@material/theme":"11.0.0-canary.d6c5bcf37.0","@material/ripple":"11.0.0-canary.d6c5bcf37.0","@material/animation":"11.0.0-canary.d6c5bcf37.0","@material/elevation":"11.0.0-canary.d6c5bcf37.0","@material/typography":"11.0.0-canary.d6c5bcf37.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.d6c5bcf37.0_1616116454776_0.7438989080566429","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/drawer","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"842233f69cda9b36db0986f5c4b6c44a345838ed","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.fefc668d7.0.tgz","fileCount":48,"integrity":"sha512-gzG5FD9p12lhjtmNi6LoKiW60wUjJ9GORpjGenZBA7GQ2GLM03pf/ZUM6uvLmM+WHfgt3RVXvFdJtftH7BD6fw==","signatures":[{"sig":"MEUCIQDQIyiU8Syf6ONTlOcK+gkScDO6cJ3bRCY7yMTj7eQtVQIgHW5bRqSzocMgHFjf+lm2LlftSd3JNEE3wn21o82Y5iA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU//nCRA9TVsSAnZWagAAzssP/0DLbt0kzYAQT+GwkJrK\n2k0BuWZCAUc9LyXX2M75ZwNtbN+sGQF9zEnXdipKCBdUha/4h+DuiDrMxQVW\n4RXmjdB4vWCOdHLZcWnm8kVUQt7gdxn4237IxT7YKt75saqpkn6J+T1B8Lnb\nI3Zb0CnBUbFH8y0Iw/y7nRVLGu73sU9tevvs7jxd6ca0+3FR+HS1dT1Nm3v6\nfUlzSfOW0h0ZRKgaEfKRtM6pBgG83R6UQAKKXJBLWIl8CaycvvNsQA+H45+y\ncbruQTTY903daScqVm800so9uMOmFEFGbFpaAifIebD9ih9q72sLladeZbhL\nFhj/kex0QvF3lNx3VYuVNL4hGJvm5NEjirpKDo1JeRIcgWXolgOgSOvRysQ/\n50anWGZt/aJUVSPwyRMSaaRiKew5KXO68jJM947bS4aPRcR4bl6oXUL6qs6q\nDwwTs020aHgLDZWvhPsqNFhmzLB0eTCNmCmyQxsGqo18jVuWuOPclCSmk3mQ\niHDtHP8jZZjvDA53YjuoiQJReFq5wLf7BaYKJhibEzzDHdyYp9+mcCcKChiL\nCaX10RhK3B5AzsIhptvQJwg16FRO3d0vT7YMfdJ16dIPPxyV5g1hJEy8qWPO\n9qE3Fis3yKLiz3tfIpBNZ1LMmPHYerzQeBQxsuwCn0zjF6FBepVbMQZdTX1/\nwNRr\r\n=YyzB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.fefc668d7.0","@material/rtl":"11.0.0-canary.fefc668d7.0","@material/base":"11.0.0-canary.fefc668d7.0","@material/list":"11.0.0-canary.fefc668d7.0","@material/shape":"11.0.0-canary.fefc668d7.0","@material/theme":"11.0.0-canary.fefc668d7.0","@material/ripple":"11.0.0-canary.fefc668d7.0","@material/animation":"11.0.0-canary.fefc668d7.0","@material/elevation":"11.0.0-canary.fefc668d7.0","@material/typography":"11.0.0-canary.fefc668d7.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.fefc668d7.0_1616117734502_0.2796449305433306","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/drawer","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ad1c7bf2fe9875f05117c78d8a14e1a8f59a086","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.faa7d3226.0.tgz","fileCount":48,"integrity":"sha512-c1RnYe5l1Iqyo1pPqE52F0638/o0GJe/HI3BXOQuba2aHDBZnXXJW3j/yxzYiACC1lbzktKomGhimH6n26oxrQ==","signatures":[{"sig":"MEYCIQDOaKhn6Lb3skLsdGhRCvwA78rMVeqtyYl3SePVcjKE8QIhANzRBIwSulwBoUZmyGfrvbOn2Y02+yl4N395TbYsPLUB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVONMCRA9TVsSAnZWagAA+DwQAIcbdlbwWqduZSB0Kck3\ne0pLhnenK0H+yUsqpmLoQheRspjDXWr+B/lDZHpeIAHnD//FBIeDiXY7EAvq\nujIelP+j2YZk3YYVhU92Np8fmYpke8jYWUrTUrpjxex2JypICc1UFQ4XJdlc\nN8nQS3A1AaaStWeuH5JPka9szGRAvHPKrSI5aIHMuu6SOlMLYZ6W/wg6OyOm\ndDeqcoQqHL/inrC+PlT11hYHdjhTszi64zE/9PDKoxxX8EoI6RACViEBhOut\n1uRcoq1DGxik0+uwtbvZp69aZqrjExnn+GPGaBdgm8SqaX/UDpLaF8HnyJcZ\nSK8ZqGTykci6vo3YHc6ZdeZE058uX1ix9csKRDSjnwrwNdvcbenHTqxT9gnd\n8OP49CnqLesT1iaJxGo/h4C6/kPmcG3xVaxyUuEvUZfhZbn6NKlbAblAQ3NG\naNf9iOqNRCRFkGzHz7sezO75p/ZlDyhfeBlqGzVJASmVMKoZICgYhsZ1o1SZ\nIo6ME+lloHJjGZPqME/Ha5mHfxKHDr4UGWW38lh/B8uLZVlWMaDcYSaMzY89\n4d/BsXtZKcSlHbcX5QA6pu9uAZHRSnpKyYOmLPRjkn3IsP+2CEDqg+yOROu6\nGvcDJQywxjke3f5kGMu730zrlVeWdmVBP+o09KhperCF5pE0bBFHX3IvSI1h\n5aSM\r\n=Ow9E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.faa7d3226.0","@material/rtl":"11.0.0-canary.faa7d3226.0","@material/base":"11.0.0-canary.faa7d3226.0","@material/list":"11.0.0-canary.faa7d3226.0","@material/shape":"11.0.0-canary.faa7d3226.0","@material/theme":"11.0.0-canary.faa7d3226.0","@material/ripple":"11.0.0-canary.faa7d3226.0","@material/animation":"11.0.0-canary.faa7d3226.0","@material/elevation":"11.0.0-canary.faa7d3226.0","@material/typography":"11.0.0-canary.faa7d3226.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.faa7d3226.0_1616175947393_0.5651965437284794","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/drawer","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"902713ed7c04cc7bd27aa909d27778e2094d9296","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.c60449bc8.0.tgz","fileCount":48,"integrity":"sha512-t6mSyNtil7kfnj8FMJn187g+Q4L4VaAxhjrpXGStYr2U0eI9sLS9lBV78wRl3uFvcwIOEUl+/WLaIaqOZ1Dxyg==","signatures":[{"sig":"MEUCIQDYIGzJu4I3P86eKTryXnyJjdr9QG3IHrkdQSA+dGdxCgIgQlbnUlFeLCFoo0E98sbnDBjp4jQDu+Qp1IagwGsCax4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOguCRA9TVsSAnZWagAA28AP/1AyLn3gYSK6O372GwFf\nE4HDxAHfJCD4IaU5/t9LhKGxBl6O3fZXVvM8w3HBMmdLbI+xVLDK4BbK0hBL\nYfj4S/utUXSsgJGmJBPHMw3b2jDoqk1AZhKDP3ypXkMiWnpj3slaW4pHU76B\nLfCK/kk1RwS0TGn8MqdgrTwsUy4rr7v0HZbFLFEuTLP+olj87uH01adJYD+M\nrNTvb6JHeJHFJAOAFgNDcTbBE2oawHha+67JN+XTQZ+re22AuXtLPFp+2ZSd\ndyYGF5BoHO8IKgKH3KGbZgSgh+M7uTW7X9wFFZmlh79bxAqM2M7/XNpvt0tv\n9XACanKRpwk76gz3PU9SieINRnbchtvuL7ASetPk4CUUkSN7SV6hmwOweyCa\n5ISGSChUD8youVMy+QpDRYivviiON7KfNcVdBQCMs2Ybzq13X69Qr3sTfFUZ\n5uaxzX07S1Xd2p951k3qyBWPVSqNvpzeCSB6szfJQiva4WnxxfTaIffm7+M4\n+jMlylgZpfuR9DeyYmYDIfY7xcoiNZGN5Xw1OxCVTXUSoOLXzcgwvJsM6kYl\n/amcH2WFfzjcJBjN7hy2aZg8GBqJg+uZOUmAfS1QnHBSsxfTQWSkoCJpKfEq\n2tL0jWFFyPku/rxS7xeK6I0t4zA5gv7e0QWKJghuAerpY2uZrMRDgs6pprIm\n7tLw\r\n=VStg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c60449bc8.0","@material/rtl":"11.0.0-canary.c60449bc8.0","@material/base":"11.0.0-canary.c60449bc8.0","@material/list":"11.0.0-canary.c60449bc8.0","@material/shape":"11.0.0-canary.c60449bc8.0","@material/theme":"11.0.0-canary.c60449bc8.0","@material/ripple":"11.0.0-canary.c60449bc8.0","@material/animation":"11.0.0-canary.c60449bc8.0","@material/elevation":"11.0.0-canary.c60449bc8.0","@material/typography":"11.0.0-canary.c60449bc8.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.c60449bc8.0_1616177197202_0.8105524003898814","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/drawer","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c728cd6fca1c7df12ba67c3aaca6ecbb75dfa7b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.5f0fc444a.0.tgz","fileCount":48,"integrity":"sha512-s0n1dV95JSP2A5nD2bABXF9lEUyhPgASJIyKN21CDDbfdYHHhz8rHCCT1STiRrVFaxaMgJF6qZFTdMLh4yPpMA==","signatures":[{"sig":"MEUCIQCn5NLtqgMN4slQlR0J2srlrXe2tsjSGtszfhGwPUcr0AIgNOZNZLSJRBpSpSTuGBf7NxiQORZ1aOzh6uQbi9rKRIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":959658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO/NCRA9TVsSAnZWagAAbfAQAJcX36pLx+iESHX2g0S6\n/c4JOzMwfDFp+5LNUWJNwD+txG9W6vwTDaLCEGPHYMWt6XJtnYWnU9JOcIvr\nPyq0HwC+USt4lIrhR+G9JHT5dtcnCY+xvureZGLaEmUVNjzQP3hspLmro6cj\nZy1UZ6Vl8SWeqz3OngB2v3UR0G4NErr6STdKZaWtRgNU/HkY4gNrLu7OoUJa\n9u6Ni8ZuTR/TgSSdVh5sXp9ch7D5Gq64wYBCzTa33O+5AKXXvzazPk25EpE2\nz0/q7BKjbpGUdQFWKOa8SLxdmYCNt/O01/7ZIgnNmUgKNK/Xpf8hcC5ZqHOp\nnAUi/B/bfoX8AYnhBGwrnR2SEP2O1NXAni8BfZvwGHRJLgBIAOJumhsOvP9Q\nZlc47s3g/o9fcdjqydovdDLS3NKgw+kxtEc0AM6Vb9l2MuQ+fCLK7aPBOWke\nj7U8rkTfloREVdjcuhIWjcrG64GduKRvUL9VSrtTJcXmjjdaH8GADxr9b6ts\nTI5pUNax9Ct+L7H38aF0Sw33NyFp99mZH5nPJ/apd4z3CdjUi3HmIDd9Hqne\nhm+vFcjl6lJIhPDO/Mt+fQmYghHf4CRjF6KWj/09VJ8znsL7qSXp8UbVFxfG\n7RpgiW6M/+jdYVYbVswfcgGWryzaDRWxON3lZ/hPPudkS9l3f+G7MWVLJ4fb\n2odu\r\n=zGoM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5f0fc444a.0","@material/rtl":"11.0.0-canary.5f0fc444a.0","@material/base":"11.0.0-canary.5f0fc444a.0","@material/list":"11.0.0-canary.5f0fc444a.0","@material/shape":"11.0.0-canary.5f0fc444a.0","@material/theme":"11.0.0-canary.5f0fc444a.0","@material/ripple":"11.0.0-canary.5f0fc444a.0","@material/animation":"11.0.0-canary.5f0fc444a.0","@material/elevation":"11.0.0-canary.5f0fc444a.0","@material/typography":"11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.5f0fc444a.0_1616179148828_0.004115447433359121","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/drawer","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.4567a750d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"344b87f6ebe4d513f4b1c9f53eeca6f6f1df8ef3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.4567a750d.0.tgz","fileCount":48,"integrity":"sha512-VykFH4kGRm0dyR6+8mbmtMM/05QyMMQHkNRRXYKnpMol9IrLbySFhn3SgdWQpY6QE2Bg1wFW433YXYWHUkB/fg==","signatures":[{"sig":"MEYCIQCfPnSNIlIeu/zKc9RIbJpUbzrNYt4nYK0xo7PUHty4vgIhAPOlaAJk6hwFGB8Qw2z7WvlqMlSBfrY15Jg9LqJEwVKA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":959658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVlTCRA9TVsSAnZWagAA9lwP/1EEyTR6bJT4Vbdj+ElK\nR79ljcDNXXhqbC9EhT/xNnyt1lxDKvVKk5R9HbA8PXRoRdojxH9OfTKjyIzf\n2D1MjKod2oqBVBkluoIWVPg0PFqr6ggD4MJ3sRGG90UouQM7wWo0kUB2dClD\nSpkhmnXTz7mnYAyUDrT8VhlLAwc9VXPzJ5T7Elr2/LnwKX6607+3Lbh83NlC\nAQwsnxBGh7yWF4tglwbJt1XGDk3tXYl9li1Dod48UGo8t9CYl5G/3BHgICTr\nxnl6W8YS86IqIYEviiZxYtX0+hFgB/SZmqYoMl8oGFCr/tr0X7O4sBiEXlwx\nQhJYmNK4d5ty0ixl4zHf/LFv5mUvwGqGPrV3nEa7bdkFDH9EyuYnSLN7pLGh\n2qvVD4gx4+lvGvGIIEqKq2xSyKjZlG/DhasiZNllilhYAb7fHY/q4HHJSsVn\nnC7zC1padjjyI2hYPF1NZaX5a9NGPe28/hdcMxFp1xOYH8bFo0hRnlVmBMpg\nk975GBHa4vz6Wn3ZPpMUC0PLDY4rbi34Yea4l5QsZWuJOJ+7FFmSdT4fRsOZ\nid76o0jyUK/5EemoFOdHgt3kPPXzqiZKDDyOjux2F56P7uRfswoUVIk4eOgF\nHY/DXcBGqTXMOTBBntlBqZn9YblGWjbaDBXeGn0HzX7E5kDL4cdA/zXkGvHd\nou50\r\n=8cMF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4567a750d.0","@material/rtl":"11.0.0-canary.4567a750d.0","@material/base":"11.0.0-canary.4567a750d.0","@material/list":"11.0.0-canary.4567a750d.0","@material/shape":"11.0.0-canary.4567a750d.0","@material/theme":"11.0.0-canary.4567a750d.0","@material/ripple":"11.0.0-canary.4567a750d.0","@material/animation":"11.0.0-canary.4567a750d.0","@material/elevation":"11.0.0-canary.4567a750d.0","@material/typography":"11.0.0-canary.4567a750d.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.4567a750d.0_1616206163435_0.7907015066220251","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/drawer","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dace89ed46096cb8773824849d7c278413d4e33d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.0cde52f5a.0.tgz","fileCount":48,"integrity":"sha512-H5nTBrdk0Ep9K/W4NjQJ3oYvixOb8BmMF3v1HD/uTswIh6hYpo+4xbtFoj37PVGMoilmQroWTblT55r651sCvw==","signatures":[{"sig":"MEYCIQDPKh83nKDDBwvB1JaEGY0UbQSyDmTStbDozpue4kcmWwIhAO6TaTCb5aHzSwkPBuYoB+PBgXmWpEgc9b0w74r7Lkup","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":959452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTCGCRA9TVsSAnZWagAAJCgQAJcFnYJf5AJfavS0293o\nd+RxZq8pa6mVBK4ssgslxRWAADW3cOSJnkVVJ7QeKvxAx5Gm6wkEAnJWQ8YY\nJOtbI4LevxJ8Pbo7XZA/epu0UVdykH7PxgoGzfQHmXk9ryX6Vd3GXqrtuep0\nvypeLz7emawMyPG6ZBjYZ4u8d3mXgpdMmTuDEtO/atmm3EX/eP511FizHjtL\ndf7uJc5/A6sCHJBMkFDKfdlZxdkzg5MEgeTwu1Y8u40YlrjTQlUI7teotzHN\nL74WEQYKzTlHsXsv1xbDcQ95MSIOjQh+Di4hVE/Sl60o7JSRTN+daeH3LADU\nJnSwwOhpN38csJKZmd6hNJgQc6gmvWTyPaL6vMnyA8uCLpkr4drLkxu5Y/2c\n1z4b0TSOqHFG9c3vfptV28gLaHcZyhCG7I+SsgW4sYGN6rnYktUJl08A1Oo0\nUN7BZeqqh22DEvarYJpwz9PfKhM8Cc218xvaBcIcUm5gyZVdIPm+4scLWLWc\nZflahbWuUMa2Jz4iUHSAwNxupPJD3Sh8t7WbO2Gl+Ah3RF9PWuLE2MzlmM5P\nZcqIlWjqWCP4eiaJDNFIC7NdRxz5IrlAbRz1oBqW9Yw3lWBkvCJ6ogdOWeSI\nb3n1hRuaegphSCtujuoBzdICfauX/o00D5osFM1R64M9E9oZmbtFIlFx2JcC\n0GBV\r\n=S0lV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0cde52f5a.0","@material/rtl":"11.0.0-canary.0cde52f5a.0","@material/base":"11.0.0-canary.0cde52f5a.0","@material/list":"11.0.0-canary.0cde52f5a.0","@material/shape":"11.0.0-canary.0cde52f5a.0","@material/theme":"11.0.0-canary.0cde52f5a.0","@material/ripple":"11.0.0-canary.0cde52f5a.0","@material/animation":"11.0.0-canary.0cde52f5a.0","@material/elevation":"11.0.0-canary.0cde52f5a.0","@material/typography":"11.0.0-canary.0cde52f5a.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.0cde52f5a.0_1616457861632_0.6562127469125869","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/drawer","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeebf2528f0be4da39aad597708878e91ff8f774","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.48f4b67fb.0.tgz","fileCount":48,"integrity":"sha512-cMIrIeYhW7RWXRHIpKUYs8+98SqprrSuNX5ACMBKIU43YKEw6LEh4ybJSS2kA+zyNdhOCXGNMidoVXosewSY3g==","signatures":[{"sig":"MEQCIFIIGrrdKm0PIHQiWukxrl4uF5Xm/wIa6QhmQGgYI8iPAiAJgxlhFU/J1/9CYSbl1OAe8Nl+1scuvwVoZ89t0OlJDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":959452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkfKCRA9TVsSAnZWagAAqHQQAJPDcFiuyrlNrydS5D8g\ny05TKn6ZXzBunAJcu+ONCmfjgp4ZHzMd/sUOGCXKlu4OBvbm3eqlCYomPVbq\nefjIn/KA6+PTM0Dn617s7BwOrEuidzxhY4707qjrmsHj5QOn/N/i/plrYv9/\nMZ04Oc0IXN0PQMOoBE73IPPVjxsERUZd++cW2XMMbuHQzS0W4Nu06W56P1I3\nW2CAwSbWu8Pjnm2k6tsU0SLT+pRo6i5jAZuE72wOZze2I9A0mCyYwmBJDRRn\nSdgJtSEY3+dvTy624GzriVo3NGvCRhmqazmGy3v6p5K+SZMR/owftcAP4t3M\nwJKoFgi3un3O6girKOHYXQV0SAIP4hhbCkuV8UWTcaCRJkmLN5LqVQgarMT2\nOd/hp9CUbGfAZ/ljoCNVzvlcYV7GF5B81uj9CZQ46yvQ0Hp9u6NWHlXogW1t\nCF0nSmub4gZ9BWjgbQpjluDqFo/YrNEhUED1eO5mwiLZCyV5o3lFPwQRsS6X\n453KXgC3d0Au053HzeZ4a4GOSbZ6XsdVR1D/MDbTZDu0/i/ZbHGe51YTGoJu\nE/InM54zNxDTS1PyX4vdfdBGwkSj9eDuVupu+7lVm086I2NWYhwKgZAxZVgU\n732AqgDwyuxICcDAhCBHMFAYXjYDNMJF/TH1xTpi4zdAcGa6sr+zYeIoGPjX\npJt9\r\n=xXr8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.48f4b67fb.0","@material/rtl":"11.0.0-canary.48f4b67fb.0","@material/base":"11.0.0-canary.48f4b67fb.0","@material/list":"11.0.0-canary.48f4b67fb.0","@material/shape":"11.0.0-canary.48f4b67fb.0","@material/theme":"11.0.0-canary.48f4b67fb.0","@material/ripple":"11.0.0-canary.48f4b67fb.0","@material/animation":"11.0.0-canary.48f4b67fb.0","@material/elevation":"11.0.0-canary.48f4b67fb.0","@material/typography":"11.0.0-canary.48f4b67fb.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.48f4b67fb.0_1616529354016_0.11767861981098582","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/drawer","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6a8e75833d729158a6983b090dd9240b5f14b1a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.0b8cff734.0.tgz","fileCount":48,"integrity":"sha512-7pF4XJMp8ikYtUPgby4lI9zWkL7C+6N6O/LqWw2tWdXBUtoTUqga0wWCAohRmImh+is/Qvd3+wcDdtDg+w9LVQ==","signatures":[{"sig":"MEUCIQDUiHlgZVIBB/oHeOpKqd4ILrDrb2bKlBL9GpertAeeOgIgbzc+jzdm7dlVX7VD4q01Z3tnaxuoyAS3OM2NRZxryhI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":959452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkouCRA9TVsSAnZWagAA59sP/1zXIWQ7anluciXSrpcG\nxnfouomAhgjjaBOdde8o2+lQGofzWEctZ9zuQydQR/5LQb+gf3gJnkO4wAdc\n2S4hqUIm66RY823ZTj1OlC01fgM3uZW+FxyHZvr9zs+j9ZBJZwzMb46FZEN9\npdDIB5k0XIQhyQg8KDq1plvFckde75rb16h3CT+AluiiyKzA28NfWnfa/RB7\nOerMmLTSmnYSdm4mAv9063ZMPOCG5sktxdzC7moQ3Fsc+dVo1WFzg/BTZ2O/\nAuhFH2V+Ox1fFrPyXRnts3rHQQfvrXkxuf5rIbutUeJJkpnHrmavrqeIVGiS\nYR0612HNEckKbcA9GGNO8bZSAIgM/wI25x2QPhFdXg1L9Ys55Jqk9HINTzED\nPljDmRW+63sHSojhEifvRPc29eG4wOT4ybyLdudqbdI5LY6HgH4S09hwzx3S\nVSiuGtyC5REtCwkOdnc+lMe04ydK3CZfz8Te68yMrPXiNCD3QdvAozZV1xj9\no5O26Ih+boy3A6/6N4mKwf9P8oRsl4dQJ+vQCki8Oo5/IMJsBMLvtJYbbmDx\nCqy9oaI23CBd7HHH8KwNEBW863fdNvw3eu4ttjquqnuR43WIjjRG5AD5w9OU\ngj67PJPuWdNLjMIo5N2HE0jMdnPPzSwG8CmYUgYWYU0c56FKGu0yqeJ2UzXk\nWzkI\r\n=TVgi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0b8cff734.0","@material/rtl":"11.0.0-canary.0b8cff734.0","@material/base":"11.0.0-canary.0b8cff734.0","@material/list":"11.0.0-canary.0b8cff734.0","@material/shape":"11.0.0-canary.0b8cff734.0","@material/theme":"11.0.0-canary.0b8cff734.0","@material/ripple":"11.0.0-canary.0b8cff734.0","@material/animation":"11.0.0-canary.0b8cff734.0","@material/elevation":"11.0.0-canary.0b8cff734.0","@material/typography":"11.0.0-canary.0b8cff734.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.0b8cff734.0_1616529966068_0.8295022861217007","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/drawer","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.8943b991f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64ebdb904c80549fce9c0a37bd3e1261bf9e5f00","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.8943b991f.0.tgz","fileCount":48,"integrity":"sha512-ImqUXhDdXOIlJRc9rn+2fmjRRyxik9shQ9uZKn55lOgovu7AOd2IzoPlNMNG1cBSD2NAit0ZvhwRS3saNDqlFA==","signatures":[{"sig":"MEYCIQD8ii3nVfsqAaEWSa7QDkJ6xSzS0XVg9wvbYAY8n6NM2QIhAIhYmY2Wrk8H8mlH7GujqgGSiZYKxPIgxlgBfPMfOhxZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWlAPCRA9TVsSAnZWagAAsrQP/0Fj47LSDOOkkG50P1qu\n4/67T5AAsssXVXLqRc2SOYVKiACzgsMqG85h8D/N89m8VYu0oYF3d7W3KlAG\n7MrGI5IWc2DzrDJ4DECfhEvRvXyEzH+QvSy2tNDFWeZIseKPr0ndchum6jYQ\nbTnDVcMKlrJiS9bEi3cfTT38u7y0CieTPyXDM21cLItmFc4gayYHO92rRKWn\nqEzhtLGn74NcGPbVsiZ+gMA8sP01+oD14hxIVXyAbVtcZJeyb0xWwvadxc3B\nnLiVM26jjQEyu07rhl8ObcVc319S2doN9Pyh6n75T8xQw0gthlb3b7CYm8B5\nuvevJ/lr6+LlC6ORPqkDZsZiLPiy6FPNeFjCek82t2dEL/SAxGqwAf9dWni2\nJVAQxXU6myC/EsFn1KQ5l/DWHJC4pGg3FLKlzWByPQ/4k2cWDeZZB8kL9dQ2\npfF4NzSjSYtbK3M1EZacL3TmiIPZNDeptlMYyVnniILAsEsTzvd8et1D9EEh\n0Y0OGfJJq3LwPK7aFpoDubQYLz5akoBy3gyr6hiUWmsaN3JdIM+WTDIEEQZT\nS6LjP2eBmOMyVLceEK1zBJnkMEZYbLA4/z+114LuGWDxql8GRAwA3pOgIFTV\n5HYk/n0KMvyLBJRtNSafAHHbj5IP8Edd7HuEaWs+r1eBUSeziiUxw0Yp6F8b\n+gZZ\r\n=Sie9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8943b991f.0","@material/rtl":"11.0.0-canary.8943b991f.0","@material/base":"11.0.0-canary.8943b991f.0","@material/list":"11.0.0-canary.8943b991f.0","@material/shape":"11.0.0-canary.8943b991f.0","@material/theme":"11.0.0-canary.8943b991f.0","@material/ripple":"11.0.0-canary.8943b991f.0","@material/animation":"11.0.0-canary.8943b991f.0","@material/elevation":"11.0.0-canary.8943b991f.0","@material/typography":"11.0.0-canary.8943b991f.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.8943b991f.0_1616531470931_0.15467400851091084","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/drawer","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4725056edd2cb452895f98ff62a9881cfba03afa","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.3955d8d3d.0.tgz","fileCount":48,"integrity":"sha512-SGPxAaN78Hlz3Cj9th007syQYA78LEIbU8YTGMtuYK49FV2NIOdAMPiCYYsWXTI9cUaAYb3DBBHThfrqsrQF0w==","signatures":[{"sig":"MEUCIEdtH0eQUDGJpBbuOYKoIvzh1iTDJcs4fH02OzZRj/g4AiEAiNkNyHsP0YYeBF4HkE7x3yTPRxGiClsK7Csgre5DFuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5ByCRA9TVsSAnZWagAArpcP/i1KRoJEgS5KyUj8BnGY\n7B7u4Qw8+iQU4qOh8w80Qkx+a6GpOxLrhi7GAZUJKAsUakni4vc9WgzFDoLZ\ncuGDYA4LtEO0v/Bu1YxpxqNMvIqsSRjDjrN6JQZ3xU98ZAwU4YHHWTgYPPiQ\njByAzjaw6iCbQ4OlK4RwyeIxnj42pvxmt/Uq89c5EGHU11uOMtjQY/IW+tD+\nFFho9akKGrR70p6D+vIszhm9exwtxMgSH+tnlKnwQ4uU1Qzyk7awgKA28M20\nuUrzUtwsiA9B/jJxH9+PS2QEy4dCgrLn0DMcmTtbVS33Q3oc7lrt510P81TW\ncar5Tt3vH/oW3AQWiGti+7xAqdSJjqIZhN7fEe4lomUv6az5UrszdrfiIJkK\n0cerWUufvxOBdR8nozku5St82lGv9myw5fN11ejb5ObscZHRiift1OmQB+3J\nXIBPl6nobrMm8xM8j67VJ2Egu/2tuo3B5Bqf30Xf//DZLMVPBj4ZU6kcvNzq\nx2tE/ajKSIVPHOM4jR6Lmodu/XuN+lvxIoynTmkYatZhUuFjeWA1nO5LzYls\nkueZorZnowqL5MCoR4cxnyFGhgrLqePQ7bnHdTp/pOkf1uQfmD9oHfn8R7Ip\ns7UJzQHz/BKTVjdaOX2J442UsllgCOQnOvQsUyVTFiB589Pbv9ghhHhpxzeb\nIhC+\r\n=SBDC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3955d8d3d.0","@material/rtl":"11.0.0-canary.3955d8d3d.0","@material/base":"11.0.0-canary.3955d8d3d.0","@material/list":"11.0.0-canary.3955d8d3d.0","@material/shape":"11.0.0-canary.3955d8d3d.0","@material/theme":"11.0.0-canary.3955d8d3d.0","@material/ripple":"11.0.0-canary.3955d8d3d.0","@material/animation":"11.0.0-canary.3955d8d3d.0","@material/elevation":"11.0.0-canary.3955d8d3d.0","@material/typography":"11.0.0-canary.3955d8d3d.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.3955d8d3d.0_1616613490039_0.682402879373093","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/drawer","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b9427f645f25d8164e8441bc91a954ab41d9c1c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.23ea2d85e.0.tgz","fileCount":48,"integrity":"sha512-HlH8tnRXhjYL7g0UFTRJjWwKe0skvUvH8wd04N6iicdRplHg5dgzzy7MHWI87p375krbHS56XZaaffyH9IBqgQ==","signatures":[{"sig":"MEQCIC5Ir1gjxFkWhSkqtGbGxXfZeT8I/FSQyXVR00ZxDbDdAiBX+IYg71TFPvXhKh8T7oUCqYSFsetrpxkTC/taQwjNZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMmcCRA9TVsSAnZWagAA7tAP/1li5PWkFEKa+eLUeKQ7\ng8V4sftqxxgrOM7jK0N4NNUkvK4xxlEKE9I5IHv94vtRAj7Gqn1unICAgC1A\niADdvsTNXzaAmM+1uoF5Teoq06FdDdfFaub6CS8vCx+yA9hiR1NH01JAZheE\nn1Ompnk88yv716jU2EYn3D29L+lIARtRZj/Jo1dLhCT8voXWHojx4t7QBUlx\neNVbBS3YtgNpplZkMn+WcxyoCYaG57sJ97XhswhFIlzZGGsOx0ZuYtU8tEmM\n96m9nOsFkzFF7xFXTDtFojeclhS+Dzgyq6FrgOWLEtshHyThCoKYluw8lIWx\ncoxV9Ft+PgaqfoDQxnnSKxLIpssQ58rYU1adripZf8jSrDWTj5bTn0fYkAzS\nRe7Od5Dax6Gy370xuihuTIcp+PGhqiheRZdie5XUmg/Igj9OTiTnAxSVTYgM\n8R3WG2nqexYTVpEGOzm+Pmfx3gW/PjwrBK5frpqCQVIyXO572+WQMoqnz92z\nSmob7x5FgCWER2D+8FbtRTpqmJlNu+AfSde+UgV5aPuYAxPPy9FItiHM7jms\nE3yhQUtbAoYNHiIHPO4mF1vWh8Aanq7s16zDXyAW3XjnodRobz4iEayCN1lI\nCO+xeCh1TcurMZLuKBo02EaObK7c4IYcji8LarKZheDq0tdPO1dsbusIp9eL\nrV5H\r\n=okoO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.23ea2d85e.0","@material/rtl":"11.0.0-canary.23ea2d85e.0","@material/base":"11.0.0-canary.23ea2d85e.0","@material/list":"11.0.0-canary.23ea2d85e.0","@material/shape":"11.0.0-canary.23ea2d85e.0","@material/theme":"11.0.0-canary.23ea2d85e.0","@material/ripple":"11.0.0-canary.23ea2d85e.0","@material/animation":"11.0.0-canary.23ea2d85e.0","@material/elevation":"11.0.0-canary.23ea2d85e.0","@material/typography":"11.0.0-canary.23ea2d85e.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.23ea2d85e.0_1616693659793_0.12210320993785517","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/drawer","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23acbc4d956d28c0b0d5d76fe3f0f9e3c9b70e58","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.4ceb42220.0.tgz","fileCount":48,"integrity":"sha512-jBXHk2MVkSkDVRbfM6vOiT2+bMRfobQMhMT2JtT5D09fEHyzjwbI+D2g38RiUs8BYesZr3fA1qrbl+UL+8ub9w==","signatures":[{"sig":"MEUCICgzPrwVNrYqiqGwwaVyiDlfZ3FLzVLsGS7lxe5qQblOAiEA+mwzAFeGgp2U/u2FvkrfWrt+BDaux6WgvkUpUaV3GZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZRECRA9TVsSAnZWagAAtQoP/0ZQot1F0wojCmWVAzkd\ngFObpYafIPVPA8WYtMAtTW2G25mn+Iz/z8H1Z4JO5qM/DO4Sf/7jZFtjtoO6\nMb3JAlSYI5nG+lkwE51pcrFvke6XPo/X0oNMxjMK0Pmh9E4Qj4gTvn2pFy6e\nAAOguRn+tX5MCjn1NDULbrzXzQnsvZCHXl+LAPkNHS/9FbmMOFdHg6aAmDLS\n3E9bsNYYiXmbjT+4lIOkriyi5wjjiF98uHnjsCsCq7C003ctYt6mNuI8FfoH\nUnVv/pmlJkV2R9/gQV0F4msp4OvfBSsJ1Bd/7cgGz4ojn9o1SS2wZipHigeS\nXJcGAMB9J3zyG29kIqq894+oP+iTqacvuBq+hBWtBuIH9rBCXh5FMXPt6kyZ\nOiKaASbkmLQOkEtqpAdhEV0qRF5ysbOk8Duq8LN87ldjSo5gn9IiGtJnGWgj\n1TZL1xl6/T8F/A3XDM+aKUtQo6NGF41D8B/yWD1g4k3wiLK9OTp20L+MZWoM\nU9oUW6v8s1mhoG7s+7VpL+gI/+IOIyFWstde13iSKx9tvQcCBVedgqEqpeDq\nwCb9/ENlVgvVfOVg35GhM1FfUoQHIqusohqL6Ll5C7V6pmMWpoknMirhAasG\nyt5dpbs/6X+42YU4eCZODIqHu7Ri9s3jWLIFdwuUQ+/VwDx/QXzmh/juXqJM\nbQVJ\r\n=1rNM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4ceb42220.0","@material/rtl":"11.0.0-canary.4ceb42220.0","@material/base":"11.0.0-canary.4ceb42220.0","@material/list":"11.0.0-canary.4ceb42220.0","@material/shape":"11.0.0-canary.4ceb42220.0","@material/theme":"11.0.0-canary.4ceb42220.0","@material/ripple":"11.0.0-canary.4ceb42220.0","@material/animation":"11.0.0-canary.4ceb42220.0","@material/elevation":"11.0.0-canary.4ceb42220.0","@material/typography":"11.0.0-canary.4ceb42220.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.4ceb42220.0_1616745540061_0.6323077087385869","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/drawer","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"117d0eba9977125b766df36fb68c5719fb599a4f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.dc9c84023.0.tgz","fileCount":48,"integrity":"sha512-ABXlddl67fOaP4qvD/ooddex45BKjOnpONGqKu8ZEV20zkm4DFkQiT60uSfIXdjTAbQmYgxBokc722xqz2mNIw==","signatures":[{"sig":"MEUCICkl2qS7ZA4VKw9IpCWhv/W3DkujkFxvXKqT8a5xwEGxAiEA17ke9/K4HCocQuL9hfdhWKcWLFbB30aeEukXq0NHbLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2THCRA9TVsSAnZWagAAIEgP/AtoZ/i4s8ePSwubhEBS\n/iYaooH0dL/9qq4YuO1OM6FUo1EWx0Iyu4HW3HMEX5l61wTPjePHWr/gXO/z\n9Wkkidq5HXRpHyUvtR37rK18ibn4lVVapeFUVxJsbVDEmo1hSITE3woOvIQG\nazJg7ss9e8jUa5zMjkVE+mueaZBaYCrnuxMaGQzcaaKQMXkN4tc64ikl4/3N\nN96snx+WCSetgLQruz0uXr5IyOLZuDcIJVEZPkO0kMnHltIhFAWwQjuUKQs+\nCK02A9cn3lstxZ2a3zzwcHdVPdCAzzXsFNYkDKcif2XoQvWFwKHI9HHzSN2H\nYQy/vrQmxG62omIr64Mi4XGGhWxeENmh/XqaEp4Q4Rt24C2I2RC3uaqXpD+z\nc8KDDxYPAEwSbVfPqIua4DpEHY7w2sHpVKgCA7IpaD1/KgN7fNoWtCHuyqmE\nEz0t6LEUH5k9YnxUdx3Pyy/6jvJmpeireK7xXr4tBezAFwujSonwokvfdMhY\nl1HbYQu9X8f9XB0HzhXBvv0BWmJhGhNWXZGWmJdehrRmkFfXoV3U/w57ViA3\nLkbM2k0vOFoLh/KaKzS4cG7idAVo6xmD+l7iOWZV2ON8aTV+OJoK4DePzvHm\nVlmDrzndh1ZfbZiB8c5Ng4wHfogHBYXmvH8P6+H4tkt3z7idMeWNpP6nxXz5\nOH5+\r\n=RaBI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.dc9c84023.0","@material/rtl":"11.0.0-canary.dc9c84023.0","@material/base":"11.0.0-canary.dc9c84023.0","@material/list":"11.0.0-canary.dc9c84023.0","@material/shape":"11.0.0-canary.dc9c84023.0","@material/theme":"11.0.0-canary.dc9c84023.0","@material/ripple":"11.0.0-canary.dc9c84023.0","@material/animation":"11.0.0-canary.dc9c84023.0","@material/elevation":"11.0.0-canary.dc9c84023.0","@material/typography":"11.0.0-canary.dc9c84023.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.dc9c84023.0_1617126598644_0.30885731909554015","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/drawer","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.56fc26962.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1300e0ed1970f499b298c8a502b7587b41b7db2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.56fc26962.0.tgz","fileCount":48,"integrity":"sha512-K5JihWNCq0pKCX9W60KUcUxkjsH4++il7cpjs/LUGe1tzcbq68nZqCIHc45bCVnUOtWYo0ARw6WM0CrWA8/dpQ==","signatures":[{"sig":"MEQCIGPzw3H8qDPyVa0dz4CtFz3BGfAfSHOP+eSDn27RpYIvAiBs9MpB9ycQJHVtNlkvOHHQ03mZUCOPhGm9u5Z77ebEKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8CvCRA9TVsSAnZWagAAHisP/jHa2JY96XEzVQsWRUmO\ntIg/dDL/8UEdkGIK6HjY6ck8JJAi3vHwaHHeTGxS0LXKWn3XbK1bxgr4LT8z\nIaKRlAHB6urLxnfLX5GEovUFs5X0Ak+P1j43cJ3rpMLzdK1XGa0WJOe7xIOP\nW12IZJcwyw4InALDkVBM30i/EOYXUB5VFe+2DPNLf3HyZwbzsBocCsFBRqnK\nOlL64cplxWXsO73ZFN/PHdwlxctI19DqlTrnHcUyjdHe3aBKDlOADz3J+Mte\nIdZB9edr9jrlkLDvYjsPL3AB3F5vYLygoAgLathnjJbMVQXynaDQAeAF1lPu\nnNZoTedlIdrjUx1umcTO3RPnyiV6jz5fHe54oHvKQ84TexvCTu9QUGHWTUju\nzKDjauYO0h9cjjSCOg7iZjKhB5akM8t92oyM8iWqyvXUrJTrPEntO1OmK1hN\nhhe806gA22hMGv0+SpuwtcPCwbtVx5xJJ6d30RpmDDITENPDZRbltXArVNhs\ndnjr015sMRpBI4K8zl/L+Nl6Ownl0HTLvsxGqOA8OFnvyfcxIxMYyCkqHc2L\nGvdEe9hRI58msLRVe/sQuFK8e7BYpmoT6SSJnUDoBypqJQRZi7Q170qKoU/2\nJQuNlyfSgq7ldyZhBS/szHXWEnlSHQJspNfxAH5BYakHYlSksafpUFlwUGCS\njsc5\r\n=j05A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.56fc26962.0","@material/rtl":"11.0.0-canary.56fc26962.0","@material/base":"11.0.0-canary.56fc26962.0","@material/list":"11.0.0-canary.56fc26962.0","@material/shape":"11.0.0-canary.56fc26962.0","@material/theme":"11.0.0-canary.56fc26962.0","@material/ripple":"11.0.0-canary.56fc26962.0","@material/animation":"11.0.0-canary.56fc26962.0","@material/elevation":"11.0.0-canary.56fc26962.0","@material/typography":"11.0.0-canary.56fc26962.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.56fc26962.0_1617150127151_0.222510704326923","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/drawer","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.bc318250e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15f998af9815c9d01136cb307f6b98b4fdbdb055","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.bc318250e.0.tgz","fileCount":48,"integrity":"sha512-gc5t8Jph6j8rH8bFZA+znwj5+eYhc7xmd9KY4usUvZDHsSruMZCjyyDw2SkjwvgvNzZiYrLiIjWUkkFutmONew==","signatures":[{"sig":"MEUCIQDEDaVPytz+kv8iihJp9pCyNPs9sOkYzIsm5MBEXw5PgAIgDsSY8h2bxSxc+GKqsSFZUShMmmEQutbRDhtZjkL84TU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9HJCRA9TVsSAnZWagAAh8gP/Ay7EMWy4FvxP19OmK7k\nhi9gLu/XwOjH2Kcr10dhcuxHXLLlnq1rEdylmFhW4vm2ZsMdyfbY4wXWcTI2\nVev1X0vlA82YXPy9zZ7B7DtmTX0U43b/NMTKPXx3Pk/q1HF7Or0SAIdLzmG9\nArgPt/0Sy0bxYup3RnMxQC4S/frv4XOE7kQ+yXO8iLPhKjbLCJm4NK7/IKTS\nojq78yX05BqtFkQAr/jrizEpM5H29aDNgxZttnhkQajr6mYq5TPEzw8TyXCf\nU8jIIleWo5WWP6FzwI1aFg0JnphuEDLWzOYI75FEwVWOSPJla4Ia/FyNfSXq\nQLtDannAr2R0Jz7R2F7U7m3B1OUAN6VSXlrd1gYG1KfF4tm9S9djJSbXcRnV\n23Ok/2xCS2b9TKXWnYnvdoBx2GllKlN49Wc+QCYLy2Ju3U2B4WUDW99O9vBB\nZZ/DcGeC2V+HiRKlLoUBneufKC+CXXfC5o+5pXxGpR2gu7ntP8PDzJAd4V/G\n0+S9ZxEICKVyO4Wm5z5jhuercSEGhHLCRAEsRrfdRb4n3ZtQsA3QMvzh5pCx\nD4D+rBXYI+J/rCltvcTZlx8vrcMXF6QTfrWdKA1ufCyOWPo9rYtr/73LkpOX\nx3SWkhqJ1jdI5d/JzCTidSXNlD57Hsip3PxNkYK69v0UI8wlD/fJxtc4y7H9\n8JMj\r\n=Ehya\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc318250e.0","@material/rtl":"11.0.0-canary.bc318250e.0","@material/base":"11.0.0-canary.bc318250e.0","@material/list":"11.0.0-canary.bc318250e.0","@material/shape":"11.0.0-canary.bc318250e.0","@material/theme":"11.0.0-canary.bc318250e.0","@material/ripple":"11.0.0-canary.bc318250e.0","@material/animation":"11.0.0-canary.bc318250e.0","@material/elevation":"11.0.0-canary.bc318250e.0","@material/typography":"11.0.0-canary.bc318250e.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.bc318250e.0_1617154504585_0.7593243968553891","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/drawer","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66446947107e87e084358d759124530d411676ba","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.edaee19aa.0.tgz","fileCount":48,"integrity":"sha512-q8HJ4J6wRo8rbGVDOYxqCuNxLcgRev3Uk8+bIM6n6NMFGoqcCWx4s+1Odx2izsoiBpfhn8kJo+5RiplPEaHDVA==","signatures":[{"sig":"MEQCIG63UaSajCXftRMIIX7BUeWO252K3AvcTgWFNCHNIdS8AiAs8eVnYIGplJ31vQxyGMJQFedN4zU6n03uRuTutkwVaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9qtCRA9TVsSAnZWagAA/pEP/R81do/4nO33mnCnA9tz\nvogrMcWAwfybQNgRflI8QfcPzPN0XU9VZ+kdgoil16fgYjuk6bOUCCZC+FtO\n6sz8C+SgeBz+qTcSuXG9pAOB9zJUwTiPFzwNyiQzqqocV8+uovwddlmG/aa6\nNJqJYu1Vsstr4Pg6AoX9mX99bHxxYwLDKI4UJ36EUzOvqvb0iuoYF3eVB91r\n5r8xreZOzKVuNuUevuwKItskxGzQuXmnKemed9aKn2RyprAQrRt4N4dsSOFn\n1+vtLqS1zhnaiBWnjwLtsUIR0m8UwUXOnPtDKAkNgSrvWUoM1O7T67Eq5Uvt\nS6XpQQ8bbOtQuAArx/AOUR55hT5+t6Ol40djy4vQCKlkhrjrbTwRoo1v7YOn\nzDANjxvbgjYTfklgSX4rmfMFqSHLoH426Fo8gnwcu5B/sE1eopEKOgRfhqoN\nqXikUftD82ByPx+jDuTXSKAaxXxmzHVKZhh24RfE+44+2mMPDHjeGOHlPN6K\nliNGhiUgjuNfUX8sX3mjQIV7OGqZWB5Qz8d0uMkYTw5qi7RTghz0QKOA7e1e\nHwZ/2l5sLHo7BXHTfDA7rMvSETRwOvy4n7Ue52+a+HdHMHIY+jYCh0Iyu7fa\nWGHyyszreSBJa32kObIWRybxpO8Wa83cSW5hLtazs1v69xvHi3vHzuX2//km\no46p\r\n=IJUa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.edaee19aa.0","@material/rtl":"11.0.0-canary.edaee19aa.0","@material/base":"11.0.0-canary.edaee19aa.0","@material/list":"11.0.0-canary.edaee19aa.0","@material/shape":"11.0.0-canary.edaee19aa.0","@material/theme":"11.0.0-canary.edaee19aa.0","@material/ripple":"11.0.0-canary.edaee19aa.0","@material/animation":"11.0.0-canary.edaee19aa.0","@material/elevation":"11.0.0-canary.edaee19aa.0","@material/typography":"11.0.0-canary.edaee19aa.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.edaee19aa.0_1617156780881_0.2733525187573975","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/drawer","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.24609b822.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66b076bcdcd1e651d6668657427ab792155848b4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.24609b822.0.tgz","fileCount":48,"integrity":"sha512-fqcTvOLUcQUBJGdTCB0pEXONOEw9tFttLd93nG5NyWK4i8/rB64G8lptRato8jZ6N8aOXzFhRFZb040Gs58GrA==","signatures":[{"sig":"MEUCIQDBkwkan7vls0iUztfVEbLYzGhVcg5sCdH/mixxj2CPbgIgGORKL5VyCbZViDytkNkT6epzBzaYG4C4jw674K2wQRg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOJuCRA9TVsSAnZWagAAorUP+wU+SuzgO7ucqkYo7b68\nM0del9LyxV++1irNuHGSJza01BN1wFW72LsNa4Koy4NFSWtKN5EPNEQo903u\n7y1m8C0UgYmkm8vvwPIlFTYTHPyZ/o3H+uEL6povX66Iac6snw0JDnkTH/pj\nVywEXO/Ud3+bpIBJwVaYxeCHiiU0JowXbVaYK6f+yyLkDAVJQ76bVd7w8ONM\nVM0V7Cfg/kFkDTRPjSSOwR6YB1PYjk7wNzJC4G34r5L/CazuOQZ3ts97NSEJ\nhXawIta/OEzuiEHMNiMc3ie/2h1BBctZVRzna43Cx1MpumS2xVan8UzpD9xP\nyBM+7R4weLsbqV5EsYcJzzR6OncOHAA0hri44D0niBm+Cs1CijW/Os+D6JJW\n90YDC9B4bG7sBfeFidnlKq6cdCvimxI7oCZSmxxma9+8T/OobLgjrvuBevBv\nhpDaK+TnN6MQ2bHjUWtmCj+zUPXQN1HTMBmmXqhhq9UJzYPMR8uIVHafSpSp\npEdPN9APfg9rOBPffaenUPnbhS6E8sX+KrMArCZJXSqPjet2xfLbQRimQ1QN\nnBDw9hcSOuGsbK3e+nMx9gg4Vt5mL6hRuYwDx3U1zhxD2goJY07wZGHELRMr\njlUeLrqTKeuQYuUhuruqz/0f3Ju4tGax7lgWiQUWj3FpSWa4oiNhY099PR19\nkili\r\n=N1tg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24609b822.0","@material/rtl":"11.0.0-canary.24609b822.0","@material/base":"11.0.0-canary.24609b822.0","@material/list":"11.0.0-canary.24609b822.0","@material/shape":"11.0.0-canary.24609b822.0","@material/theme":"11.0.0-canary.24609b822.0","@material/ripple":"11.0.0-canary.24609b822.0","@material/animation":"11.0.0-canary.24609b822.0","@material/elevation":"11.0.0-canary.24609b822.0","@material/typography":"11.0.0-canary.24609b822.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.24609b822.0_1617224301875_0.15849886586913398","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/drawer","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"371f17f1e9bb8eb4b4946f2047603f47b479ce8a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":48,"integrity":"sha512-FTDOpG+oP3j8uVfUAxswnA1yw1PXeEIVwA3XdDeYmqoOoKZs/PWA6NM2inxwNxRH31tLdzMIlL04WTQ5LRLYmg==","signatures":[{"sig":"MEYCIQDIhwmH/A67/U37s7LjIQ2sWpOaBOVYVKqLqlMUlG11qQIhALMFcKeUlP2R/n12KBJObr8bIXY1c0fnaTaEXV5j4UCK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeGGCRA9TVsSAnZWagAAxY4P/0knXxT0pjw+S4G6u57Y\nPwqu2FdB1YX7A8wzf/jDMDbwTFVHRo0HRsCjG3Xz8vdVnmt7asfAygDORiyB\nQxdU8HwRLPMSRLlOmXkbAa7RL0UgzV14m326CUQsjYIiXQoyeztrw6CdAvKi\nIyaQR4c/zLpnpj0AerBQd+3tPbgnjNFxX9My0hQ6gxhog5S/tAxzh1afNmQn\nfTisre5CI0DnAfEAelYpbeXAPgFhMyI+8qW2kEHM+50rDPrSB9FxPvKiGV3Y\nM2cDy7DphKXYCA7qm0xbUCIO9LfYlZTp4/c8zcaQKorkb3KM8VOD2IYrDZcE\naPGs3Wdr70mpJpsRf4zVvIQHUXW3xLcR2pauV/1e/pxsnJr4+BT0AARtqLZO\nctd3Ekg1CYvcGXsjoGBlww/fIwNdNDMG/7z27SunY7FRxlUINzXSkBkBeU2y\nt/tNlut9gDxpNxf3RpGwxW51HGX6gSTF23pLg9qwRfdjeanghamVKw3ppNJ7\nL4SWoODqvs07mmY4lu8mMKi2x30dJq0kRaH3A3FFnspRZoaT5SGoK1kz4Il6\nVTUlhG/Czeq0y8y2kdK6bog110G5wI3HEmpv2okwpSdxrLrefAsk1JhdjAeK\nylqUKBjmUCXlXorXyRpGharlP0tpha95GISvHGURYjauc8t6HeYvDGd+bgEp\nnyX3\r\n=LTGH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b6cddc2b7.0","@material/rtl":"11.0.0-canary.b6cddc2b7.0","@material/base":"11.0.0-canary.b6cddc2b7.0","@material/list":"11.0.0-canary.b6cddc2b7.0","@material/shape":"11.0.0-canary.b6cddc2b7.0","@material/theme":"11.0.0-canary.b6cddc2b7.0","@material/ripple":"11.0.0-canary.b6cddc2b7.0","@material/animation":"11.0.0-canary.b6cddc2b7.0","@material/elevation":"11.0.0-canary.b6cddc2b7.0","@material/typography":"11.0.0-canary.b6cddc2b7.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.b6cddc2b7.0_1617289606415_0.435006752298984","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/drawer","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.94937c78c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1c9e4446e615b4e66d9f60bd57b0d7eee646f04","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.94937c78c.0.tgz","fileCount":48,"integrity":"sha512-UpVluVW26D7gB3uMUoYSlj3NWlGi8vZZe9VTO6FOEfdjJ8lr6MgZkoiAzqVNm+B0jraaJidUkd9LQEDyCNEDYQ==","signatures":[{"sig":"MEUCIG/cseoJ94h2x3v5SnxEFt5oLHv3fq/HJcptwSPYzghwAiEA4HQvQNOlQRAmJ4aHhqrKyq23sinu/D96rbTUvdksEIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjTcCRA9TVsSAnZWagAAVGgP/26Q9KYQof/uIonHFulx\nfTStytYvIfwe+81tHxgiythhdKpWKLsPUiqjmXV3dJ6rAyvQqR3IEea/0EiU\n+17uB05ZzXD2vGtfNKlKJGbZxCEU4hUA4edQbcwRxgbkaP4LObynp3W3VAZi\nL23vnOZC5WF9FrEzKX+XHvMtQW4ieQhdACEDshFG7vQMSLiVVqUQyCqHrGad\nWzTjs88MKtAMDtntd7gMr4qfcibXDBcCnfZdwcAyYMkd4YlPu3ZRLEBTOswF\nQqVpI0sPOPyDGtflzui+hkjs2Go2hgefV2/6SdWdxiEGKYO47VWiWGQHYZRH\nYiClqXnwgQueAAz5oda6FnKboSr07a5ufXdF/CzY4BZYHtbJSXtyggzsSepQ\nRqoDuT4ucCNKy2LzfWYE/MzWfmMPeLD912OypNL/nOp7hQNKTtUH0e8aZKyM\nN3e5d9nOz1uDipOp6FDHUf1+7hzKxlJdC+mWwEwFFKHFVrQbMkBn4xIFxItm\nqFY0v77xXSR1KZXjrm+WFQCKS4SQ/6sajfsXIrBF+bJj8UmhbxJNpVPQMEhL\nM4EzreWU0E9as5S5IrVxJ5Ior9zuGX7QG3rnMWgKIIjb22w6QdYH00/tDC5o\nfea1WqUAVCaUvL679o7SxULYcjNLbCVZc9raPTA6QnIUoXClo+oM/+ne5fx4\nsUf6\r\n=+0qD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94937c78c.0","@material/rtl":"11.0.0-canary.94937c78c.0","@material/base":"11.0.0-canary.94937c78c.0","@material/list":"11.0.0-canary.94937c78c.0","@material/shape":"11.0.0-canary.94937c78c.0","@material/theme":"11.0.0-canary.94937c78c.0","@material/ripple":"11.0.0-canary.94937c78c.0","@material/animation":"11.0.0-canary.94937c78c.0","@material/elevation":"11.0.0-canary.94937c78c.0","@material/typography":"11.0.0-canary.94937c78c.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.94937c78c.0_1617310939564_0.9037683185299519","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/drawer","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ee8ed89ec4f9542916ab477b85dfda759a85c90","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.e7202cb57.0.tgz","fileCount":48,"integrity":"sha512-tBEEfHm7aOKTbxC+dPffNLqQV5x4mMSO/1n83lOuvDE+Atby8KLSM3kGsay7GmLBZjeJXwx3P9Vd/2JcHCsr0Q==","signatures":[{"sig":"MEYCIQDfHoVMuiPX1SKesBN4cwXFgrXjmeq0iaATM3WhhEVc7QIhANv1KZvpWG8anlVE9kGjdWcVTkezyYHouOZ3jR/F0N5s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk3CCRA9TVsSAnZWagAAZjcP/R2eMUfSSoVAsjZvphk3\ny3upwA2CQTxf+CiCY1TV/Q7dpY/iH+VOAiY/ubkr9OA6kh5aUtduRTMMoQ6X\nLdmAQavOdDys7sNd8I1zddDlnak9UKmNM27F4GBRI+ZnKq1rPuzJhx7k24dE\nlnNRxDt1rVO+bsEPTA3G0azHNHS2Ha1GaO2oKeriGDEkwaQekpGtRTCvgXCB\nnNSerrOixcI+oFOoF/U8h0Fpz0QNMqi7BxT7BYd2Md9lwIjbeDBeQoFMLl4g\nIfjtBVxhUg9ulo3cvpLGm5ONy/VwWkIdgvWzkNeTgD+twzCGt4flgSyK5G/m\n3upBMTu/R+kewQZxRLWnsPypF6uVzfLsZOYd/ButY1aTKipaVvekUyhyBfIB\nB67xu9ia9a8+ntaD0DokIlrq+uUfpZr4f+saV95GH0TiWGKIe7jzQ3AUOTaS\n4AsQbOTjk1zd4ESKTAL6FgGaw+HlAuF4mSSifL5/NIs8v7Fdfic/NZenIRI9\nPcVHZSWa6I2K3SWlV4r3A5q7lnGCkxqg6c6O2YS8DhLcCYWu/fGjM/KbYlCK\nHC/Iur2VlHRdQNndGaVGIqX35Xjo6UE4jQ93kmNgdA1sczg7LehOrIVOx61w\n//ltipwiToe8NixkofO1wooI3afubeJyW5NmSJXxs7uIZO8u725hKrbCkGpg\n8bej\r\n=AcA/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e7202cb57.0","@material/rtl":"11.0.0-canary.e7202cb57.0","@material/base":"11.0.0-canary.e7202cb57.0","@material/list":"11.0.0-canary.e7202cb57.0","@material/shape":"11.0.0-canary.e7202cb57.0","@material/theme":"11.0.0-canary.e7202cb57.0","@material/ripple":"11.0.0-canary.e7202cb57.0","@material/animation":"11.0.0-canary.e7202cb57.0","@material/elevation":"11.0.0-canary.e7202cb57.0","@material/typography":"11.0.0-canary.e7202cb57.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.e7202cb57.0_1617317314193_0.8157376520346507","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/drawer","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.1f636b205.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c16cd290f0adf73bef118eafd04ceed79c380920","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.1f636b205.0.tgz","fileCount":48,"integrity":"sha512-ftmuHuavIzdCm5Jj0QDfl36AiM03vy16zEfadDUhue9Wr8xmdVrmx16sbe+1JhQFnl8dDSgClcpcqCA1Si3LFA==","signatures":[{"sig":"MEUCIQCumV32FaqKnVC6sQ84srTupefFrbXxIxgnZcU7DR+77wIgFNsqEnXy7Q1YummpgrbKkMUCjSHm/LWLXtSFWc55emw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5naCRA9TVsSAnZWagAAqW8P/3FocFeCFrirwSToOVWK\nIcUFAmGsLuK7jgagydLVFTNlRbahjlokU+o7Tcd3DAXmIsYxxuEvCH5VYaY+\n24LSXeYDr/s7okb7+yqE0/QMhRm7s88Ps2zahJ17iAs8ELwFjqgbZheZXcKQ\n3OvpMMnG1TfRX/tVqgKlkh7wdLicFJskRcw2PaR4kzMlESwIKX5mOHJHWFwe\nOylYogKVWbVwkrqOG9qT13bKODjYi1WJH+SriCS6Xc8HBFezbs/ph5/ZnzxT\nV0giUiibz1IWdfvVgA9B4j0QeodhrlGsK5SpTBIVyp/I7zS6xlFzb+lUKHGc\ngjZmolCSEGRYJZmgbOCST1INj2mX8lVHio2UDl1j1zGNsmyRFlSIF8undWHv\n6JGkEW6JO4BZR0NOgUdNmBAPpyZ1O1MYbjuw0etP3RG/UZpAPVNey08+dDcS\n0O8UEvOEw08dLklVtTkHPSFmUerPuW4UIR+FR5LQfhdjs9pbp/NPR3EFYHeM\nEmZ9JKhxuulHhcHvDkilUDpEeH/Bx0ly623fDmMP0vsXIqFIN5LFduLqGmKX\nVUnkScxHonCR5qdyw2JZISbToGpGNkolf0NFUlDECgp+b+BSXVv6VaUMkw/r\njmYTgdJ7rP4e6TWBOaUWT2aurOGO2ZC1ip+9hbnVG9dy5gWFBIkxPts5JzIM\nJe51\r\n=PvNa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1f636b205.0","@material/rtl":"11.0.0-canary.1f636b205.0","@material/base":"11.0.0-canary.1f636b205.0","@material/list":"11.0.0-canary.1f636b205.0","@material/shape":"11.0.0-canary.1f636b205.0","@material/theme":"11.0.0-canary.1f636b205.0","@material/ripple":"11.0.0-canary.1f636b205.0","@material/animation":"11.0.0-canary.1f636b205.0","@material/elevation":"11.0.0-canary.1f636b205.0","@material/typography":"11.0.0-canary.1f636b205.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.1f636b205.0_1617402330236_0.8404567804742789","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/drawer","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.94f50b260.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"854c6747af9359f085e17b64f36cf9e424f4d5a4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.94f50b260.0.tgz","fileCount":48,"integrity":"sha512-BzKttydYqaPNtwx7R/Fsp3HPFn9XiyZmfffP7Reslcd5tcTKfS26c9SEXfHT/pLdjqZgt1RQbmDplmpnZgia/g==","signatures":[{"sig":"MEUCIDygxsmaScMNj+TdRG72bBYmqyVXtAI+GRKGlXmVdTN3AiEAx1hGLq/hKpzxeLluSxjJ9DOpdqgRj8IkP51Ip2Q4G3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgayd8CRA9TVsSAnZWagAAq/sP/iaHzsYfc0AshOfqBNhd\nHvKSZoe73hjp+HiZmc+mR4dK2mp0j196jVJnim3d4zixNWcLgnf0HjWsmuns\nFGlXLIkPPqgLFkPbHLd9TYjQdFVaQNsfPvO4I7SX0b3Rw++mionZDOuExnfs\noN9qsMvj2W3O2d5aarOhvsz7IYdreROThTCI4XvaYBkX1ULLjcF4AC3OhJ8u\nPR+6CE7yt4t6rv6q8rRCfE49wei1lGlHBSvAGZ9uLsaa46yW4+eAB9rZzcuQ\nfEosHC8uTHz9HzHDOroIARyd0EjaEh3hOgt8GG4r+VbiF9WO0M7J7eqyemGs\nvHJtgK32j+WigUJ1KSyGxH16+XJdRVuuwJYnpKnDIwrlQ6HMQJtp6MeKtL+U\n+OZ27V6GoB3M75af1Jcczz91K7n9xUOTAI4g407EPuQAhtnwINnrzCRBk0XH\n0LMeyb9ATyqXC6lHtFucUYXZnx1QgcifH5ziZn7HWD8teeZkepHoLF0fJ1zB\nJ7rRAC/pPPcth47idTPBh1dDwd9ElMZJaI1f6uZIJbfv02XLz3z7fQ8OuErI\nYkTP4mfgVEbHpVlpt1tqfcQGAmbuyij1Bq7uqd2OPMQMGmLdzOJrMoSWUgSg\nA8UL1UaVvjaP171WxtvvncXf0dC8+x8EKdxlJJfR8oEJKYmSqv9XG3QyJYy+\nFvFJ\r\n=8UZz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94f50b260.0","@material/rtl":"11.0.0-canary.94f50b260.0","@material/base":"11.0.0-canary.94f50b260.0","@material/list":"11.0.0-canary.94f50b260.0","@material/shape":"11.0.0-canary.94f50b260.0","@material/theme":"11.0.0-canary.94f50b260.0","@material/ripple":"11.0.0-canary.94f50b260.0","@material/animation":"11.0.0-canary.94f50b260.0","@material/elevation":"11.0.0-canary.94f50b260.0","@material/typography":"11.0.0-canary.94f50b260.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.94f50b260.0_1617635195301_0.026830517352025574","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/drawer","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52bc2697264f95d0a3cf3222fcc89d37851c1ef6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.a4009b80a.0.tgz","fileCount":48,"integrity":"sha512-BFC04vjDHEiqlYyb04Rf8kPmBhWBlmxlFR/LW5P9J9U1eIZ4JpEoXIj8mfSZ4VdRRnrjrgTejP1/k4E+XGFM3w==","signatures":[{"sig":"MEUCIQD1XtiND0R7FNxD4dsoi5mMmLpkB6FeIhDxmOCTRvzL4QIgbBiUtqEt4Gpnx/WAPhQe5v2JYm1Dx+tBnSiL6wQSk/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4jZCRA9TVsSAnZWagAA7DoP/2PWz82fVxHnCOVpFvwD\nOgAcIuO+3gSYSarzQ6EcqE6QillcB2viVSXRhmLLydjvtJ9vQHTcU8YloKi8\nQpVtURL0/HKDlvoNIHF2FG/F9WpuXK4HWYeERLEEUt3V0FND/dJK3BuqwFvR\n/5Vo6cZ5Zz0KnH00wnVT/ZAB1NZGU24YiFm6p/KKytob7wfbicsU/+VHYq1U\nUdqDPy/yWr5xlTFnx9yw5XOSc6G19kntMXR3zb6x1R+IcBs1456/nsz7noGZ\nkaXtkt7Vl5NvR84m8MJVqoc5J69LU4zJK39EDHIoEd448/ffqtjPckMrCtcs\ntI/4h+waQJVWQGO3zr7tvUxkhe7T1CQbbYkrcbVfuTa9aGMio5td34A6Ie7a\nsibUsOwN7m9/LrSvo3tk/AScA1z0VzE7P0wM07Hh119PfWFa0eCxIRbFZE9A\nsmckYM0+6fefwiUOULRVW26zhim8evMs3K2rPEUqtDKcRQzIThMPbGLAsP3W\nHEvPByuliBZDzh0mU4Ullq9v0IqRNzPRAoxhU3HWQmQZVnirutbP/K6B4zMC\nKIbB3ekgtS/4nxGiEA1Vu1l5+qm20jB9l/IbMkWZeqkXA1timiLCFcerZTKM\nDI2s6CUEGGFwRE4ia4d/C029J6y8qTKqkUpkrK9T7EU2P3Ccw9tsHpCwYgHY\nu+/V\r\n=UX2r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a4009b80a.0","@material/rtl":"11.0.0-canary.a4009b80a.0","@material/base":"11.0.0-canary.a4009b80a.0","@material/list":"11.0.0-canary.a4009b80a.0","@material/shape":"11.0.0-canary.a4009b80a.0","@material/theme":"11.0.0-canary.a4009b80a.0","@material/ripple":"11.0.0-canary.a4009b80a.0","@material/animation":"11.0.0-canary.a4009b80a.0","@material/elevation":"11.0.0-canary.a4009b80a.0","@material/typography":"11.0.0-canary.a4009b80a.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.a4009b80a.0_1617660120831_0.6910491800749534","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/drawer","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a57e69434a14a9ddc1e87defebc05698a03aed96","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.15604bd0d.0.tgz","fileCount":48,"integrity":"sha512-W2EF62XUDNz/Gg1EYYj744cf9uymtNiqSj71a7AuwkBGENhAy7B8tnKOHF7RYftVnVHU7M8fn4au7vMStNmHfg==","signatures":[{"sig":"MEYCIQDx4KID43r5bHNaDxZV4rlpViH/EoaOWD7QaaSOlQfEgQIhAJmLiTGgcNXA2S6dFr7eEXu7NuAFcUTs2izzqsVkT/6l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5KUCRA9TVsSAnZWagAAdrgP/2u1EQ5PzY3vUJJYFuC1\n9iaQ2UNnjB9RTThtZNsWRblTcXUgC1HNbyeJKd4HS9KfEDMrMySvg/CWB7Vo\ngKRfSvLdqA7hDWe7pX4XLqt3sUoc8wyI+v6jDNHGO5TfD1jwLzqceyJvzRak\nZr1eNK2ryPNK9JLXr8HqnfshZ2wWFbN7bCSJe1bHjnY34AYn+rHFa/qLJmSY\nKCVvdk5dBMJaZwQj6jiK6XrWhA0dZZQlcLbB2yz2jwV344H3RFwcFe0SSaIu\n0Hja2UHvCRNbSEfDXGKuKTly4jDLPT+nH3MP63ThIJBvKM06FeOaU2KOnih6\nuCeEQqD1uV/s/x4nUhEHsSUabDOE88H6oiIvLOqFJRxi5Drm0P1jT2NX9SQm\n1LjJnEWWobtKeCRIa0Knd+VQ4tZ36IzKjrbBVRQmMpdL3CpxPu9vUZqcBj0R\nb0ISzcBwvvJVbzPVd8+rvoXwR6Pl0xLzAqCMXVQiNbhQV2eqxyCxW01yLvfw\ne4ETafwUELeFqk4U9Hcic9f3CWM7z7XQYa8QRaVBBvapNDMSj5cfScPBwryX\ntyqPEIxnrC9kbM67TATKMqx7r86BkyFHM9YdlLGLLjsPq8Xeimtx+DucafMK\n9cCTA/V6z0kuctETF87TwhjYoAHnp4Cafm873/1X1oqiLUry1F5WOPaDlfOp\nl4F4\r\n=Da7N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.15604bd0d.0","@material/rtl":"11.0.0-canary.15604bd0d.0","@material/base":"11.0.0-canary.15604bd0d.0","@material/list":"11.0.0-canary.15604bd0d.0","@material/shape":"11.0.0-canary.15604bd0d.0","@material/theme":"11.0.0-canary.15604bd0d.0","@material/ripple":"11.0.0-canary.15604bd0d.0","@material/animation":"11.0.0-canary.15604bd0d.0","@material/elevation":"11.0.0-canary.15604bd0d.0","@material/typography":"11.0.0-canary.15604bd0d.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.15604bd0d.0_1617662612475_0.44389781698317154","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/drawer","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.76da7876c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f90ae0a443e2de26a964a30d1abb550fd0f0afc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.76da7876c.0.tgz","fileCount":48,"integrity":"sha512-+3/3X8WANClihkzYuePERiGXELOCk/LHnWgV0H887E42eh9Ftk/LzVodV0NcJA7l52dPRrEH+uQBbAkC1JDh8Q==","signatures":[{"sig":"MEQCIHuD2avO78Td3Ej3KE2rzeZpwQkkqQYtgmWZtKjnU40XAiBu3c0MCIByoUfdZz2KMiWq1tIJ/o7FPiVNiiHN5qBRkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ7oCRA9TVsSAnZWagAAV2MQAJ2sSzI1hkWxxHyO9HOI\nAyxnmdhfGMe8ytL20peGlvO2MBgWXXdF3tWClD4Ehp25seF/Zj2K5m6gDLqe\nmeklAUh6D+zloRlMtg4OP5rePH3r19U90QQ+zab6f5DCATlpYJui8StTQRBm\n9Zu/AoH9nhisTVc4lNDnYUWmVZmNuQcpvP6RvC8mal1ZoFTvCF2q7tFAGFgh\nWFUwvbOs/jNu7SyPtwbfAzoZL6hX606oxDs6X+vshbGSG0Kj4TFCQqoD/JEn\n2BAUaMioSpwazdP5AMkD8jDRXhxBR9CCxvcb/hiI7p8JWspRRX7XiUYWSZ1M\nMGvXxtiJ4SgjbZ5bM6Mw7o7VOTedxfeBzWVx7XVn01OBs5tnH3/112JaRy8s\n7326pUAxV3Wzzyd4Vfybyy7nwfOA+J+4kCr+eRjvoRhKHnYGdJCVcym75IMY\nIfj4pcCRXHbQdm1fPY6C+24mJghXx3rjxH5pBo++THuuYgu01GlsMBfCFrvE\nMMhOUuXFeVJH/YQXUIvs1ngN7ZNR7g0gDbhq32wNgbgDmkC5CvAc7uemHyAM\ni5+1yEd7PUcyv+zO0h68yRCD/bNs0Fxg3mzDDCoKAg1RlHgYCPEA21v5iUcn\ngD1zKRRlDKZaQriAoe058pf2D7lVYJjSe+qUatJC0WGrfMBCtOWLIH1+SIZH\nuGCF\r\n=slfC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.76da7876c.0","@material/rtl":"11.0.0-canary.76da7876c.0","@material/base":"11.0.0-canary.76da7876c.0","@material/list":"11.0.0-canary.76da7876c.0","@material/shape":"11.0.0-canary.76da7876c.0","@material/theme":"11.0.0-canary.76da7876c.0","@material/ripple":"11.0.0-canary.76da7876c.0","@material/animation":"11.0.0-canary.76da7876c.0","@material/elevation":"11.0.0-canary.76da7876c.0","@material/typography":"11.0.0-canary.76da7876c.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.76da7876c.0_1617759975814_0.3209174556970318","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/drawer","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1aeaa38b238696492b5b295f5dc10a60f660654","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":48,"integrity":"sha512-nf+2990U3fYXbGcqz9r9AHnFbE0xX7CJG0sSyMFTDWgdEEo1MtHpejjREcoik35HtEQN/AtUsUjNeq+B4/Hpcg==","signatures":[{"sig":"MEUCIDkDc5nPJI+sk8KII/CtukRgwZQ4zix1e7pubbSxwMiNAiEA7y9w8BjyZxPLeTnuiimO3DHhmYwUULk4ES4oJSptGPc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgAPCRA9TVsSAnZWagAAooUQAJDB2EMZHUafc7ITSaJ4\nDXMBKBzVZFtngftkYKL0oIbkPyqhel0quG8+AIVwD77kJD7jcQ/S3/h3Uz2p\n6K5LfdTbXpI9N/LEwAyWbudq/CPN+2icOy+/tsyOeVWvVLmNMUUPq4ZqlLY7\nHaqoovrN8pVC8VlsgNdGbU+2yOFMd56mzEc9DVWT+U7Z4m8gTofuTkzE+lJ7\nTRK0Aj59ouckk8PNxfwp/2SMDX2bpvBqLnODEV7FId6vHBYI8GW6XMj0pZ1C\nS9KRr3p8OkdKTywFODZfWzt0jB6U+yhToXgbJqXwVf55MowAj5guJzSs+DZ8\n3BlsFXU9WR70WkMalZrYiBxcIiM9VI7ILnm8FiKfbOV72qb4fpemwwBti9dj\nEEQos5IUW7sMhE2LBKZ6Q0RDR6u5+L8okZEPpKRdXDaRB4aSR6LiVEN+Up0M\niJMK5N5if+60CwOM1+LTHp1bbNM/8v7nJkEDWh72oH37k6CtSlOXpKI26KUr\nVpIcim6P+GfP6r9ZEY60IikXW9V/MvuCpMmmUFppEmVx5HxLPuojLhv5uTKV\nwbS3cTzwy1yidlUwP2O5yENTCsu4F1/gTozusxWNUNdQqpA0lMffsFWUNbap\nKzOmyXfPQPGEjftJzjas0PNZAS1Pd+SYm/G9jLEl8hVX2qG/IF5tXZUe7OxA\nxP1v\r\n=8ejj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6bcb6cbd2.0","@material/rtl":"11.0.0-canary.6bcb6cbd2.0","@material/base":"11.0.0-canary.6bcb6cbd2.0","@material/list":"11.0.0-canary.6bcb6cbd2.0","@material/shape":"11.0.0-canary.6bcb6cbd2.0","@material/theme":"11.0.0-canary.6bcb6cbd2.0","@material/ripple":"11.0.0-canary.6bcb6cbd2.0","@material/animation":"11.0.0-canary.6bcb6cbd2.0","@material/elevation":"11.0.0-canary.6bcb6cbd2.0","@material/typography":"11.0.0-canary.6bcb6cbd2.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.6bcb6cbd2.0_1617821710415_0.2695015364897406","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/drawer","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7940fe6f8a524e4d879b666e6d0e7e540d0d30f1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.c91e8d141.0.tgz","fileCount":48,"integrity":"sha512-TuVo3BdUriiyzTVJZkdnnTT9FPwjhuo11qlSFZc1J5HLnQHIszLai+5eThexeUwOYg/M8ixiSv68oiDyglKa1g==","signatures":[{"sig":"MEUCIQCqb98BBbijLDZdU4BnSbaN8i8Omqzvi1LKfcW0z2RKlwIgL5+ZKrogXrOz9FET6nvEGXCc8JmN0oEnLB+ySfGKfLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgD9CRA9TVsSAnZWagAAQ+sP/iQidqY8piWuo2FwRyM3\nxSzRMzuZp2/Kgi3wHaX8qdUx643Wok2iX+6v+Celt4kLLEMNOhhp/2yrp25U\n3L/TA5+Utsp/yXFiLng2l4wux8pTHm+nv4TnhNF8xOkpK1xuDhOockNWoWEJ\nKQYXFiMtSE/mRQfEgmLCjMfiNTqIMcVskW6xBPwz+KFvIvHGc0fH/chNDgPg\nIJL6oveX5KQAxf+fZmd7okGOG/fICbQ4pjBJ5K6lDZVJFKswyh6utM7LB0IX\niO6PrCS5L3atMBr+D7dhObNItFNyKdRiWmfH0zra/v6HEdHNFwoUDeoDdQLZ\no/tt9Ef6m7ocmOyeVwWEx1Pi1IqlZS/0bpEfKcdQ4NebobVYeBTwvhD5wi6h\nDk/XqUweHcwuEdvX7Cj2a+p0d4WCAjXY7ZAetDZL7STnL32a50BEH7z3BFeL\ncKxARLa34JprKN32i4AmHGjZfIdsShyk1Z2ok7BnLqH0ISlg1j+EMh+iVkUe\n6XhiaIkcfdyvRCteXW42cmyXKVAHVwwam+L7bktdmnd3w8sug2AgRePOuZ0J\nOT4/GLnTj97u0sPbZqZAikV5llt7iYdUDk1az9g7aWSsieFP+LD6fFFDuJY9\nIxvFvJMId720CyL1iREhZfqpr48lGvCwtqRt5UC6LYXzbACxKK66QCwUa4Th\nPxJM\r\n=Srfq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c91e8d141.0","@material/rtl":"11.0.0-canary.c91e8d141.0","@material/base":"11.0.0-canary.c91e8d141.0","@material/list":"11.0.0-canary.c91e8d141.0","@material/shape":"11.0.0-canary.c91e8d141.0","@material/theme":"11.0.0-canary.c91e8d141.0","@material/ripple":"11.0.0-canary.c91e8d141.0","@material/animation":"11.0.0-canary.c91e8d141.0","@material/elevation":"11.0.0-canary.c91e8d141.0","@material/typography":"11.0.0-canary.c91e8d141.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.c91e8d141.0_1617821949270_0.3214996181982164","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/drawer","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.f77c50860.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c25cbbc7ec87b94e3be109ed52c34b26f053bcac","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.f77c50860.0.tgz","fileCount":48,"integrity":"sha512-w0GZiqqCdU9fkDTMONjo/j5OXegVKBKEl4ZzAprnT6Ir/NBVe3VAdoPTRvKN/3cyQCE496i/lhOFra9hcgxO8g==","signatures":[{"sig":"MEUCIBWDpsK8hfRsbtfmVZ0ZKk6BsIhTEoS9adaMsclBDrBDAiEAw+L8XDyd/G9B5hl7AmiMVqkE5hm5W7W7XnXvS9cb4o8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyMqCRA9TVsSAnZWagAAps8P/1X1HR1AxyRZ3I47JfXA\nt3sjeBA044IFcP8/wCUiOd0pmz6D6zjlKiwno4WZD384SERAUN2oNbQyg+si\nJLMSCi8Fd1hUUbve8roZry1VROpiAEVxpDQBdTq8NYG3sa5uPZR+sHvr2n+Y\nVyGPhvY7l+L8/25ErqQjYTeTwmq+zOd/NC3INcqz5NJqeWNnmt71OiIqEX2A\nPYV05kdo06MfZZv/xyfq6wTAVsff/G5wCUycjBqi0zYzuttKYpdFUeMiiC8a\na4WqVon6hDKOlv8+QCDbWB7EF8HtkxV9M/0DnHAeQf48THQah6Hl6EqOS7I7\n6gc5jxgVN7H0mllH4y2B3wsyA5GsGluUlN4VcPVsq7yDOGJXgslPCpLRw4rL\nXdMxB/PefTT96g53kg5OLZaFwPYE+KBnfqz1kdbwBkX0QagWcd0FKQycKcXP\nq8cIAxCMPrmVxy+fSuB1sNfZ1llli6oRHsApwajZCbhVbEYbTcsfn0VNF54r\nY6MkDCIbuusy7GBkrxmHCo/6vvxmTObv0/XX9n/WrijVuLLPem87YKXrOQtH\nXCicz4ovD1Z6wn+hBrzzcc1vYxYUlyMCpuBKkVv8brmPns08lCIZzhu+Rbor\nMTBcWnPH/aPKtTNloQbkXJLZwdVG8eBw7giRjP4Sz9B0o0/e4iB1hFgk0rdZ\nrNEU\r\n=fNC+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77c50860.0","@material/rtl":"11.0.0-canary.f77c50860.0","@material/base":"11.0.0-canary.f77c50860.0","@material/list":"11.0.0-canary.f77c50860.0","@material/shape":"11.0.0-canary.f77c50860.0","@material/theme":"11.0.0-canary.f77c50860.0","@material/ripple":"11.0.0-canary.f77c50860.0","@material/animation":"11.0.0-canary.f77c50860.0","@material/elevation":"11.0.0-canary.f77c50860.0","@material/typography":"11.0.0-canary.f77c50860.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.f77c50860.0_1617896234305_0.5723993910916887","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/drawer","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4311d43d8901552937ec0b74e751c1fe2f7b8ed","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.367d88bdb.0.tgz","fileCount":48,"integrity":"sha512-cXJIwUFYwalC6z+d/AF7lblfosk0JvGhU7vA8llzaPsU9wCMNRGtShkXJXJ6ltEpcBZujwxCdmBD/3bxvLm4lw==","signatures":[{"sig":"MEQCIFe5W+z9UlsK6B6gzrcnWLtYmRhz6xCB51VT+mU5JZEdAiBephFynFxSgQUHvf1PRaEZkZeb9pTGlTaAi1hLrW+WmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzHfCRA9TVsSAnZWagAAxXkP/2BACMVHgOI8SLMD/ke3\nG2056x7rFfDmdliR+qNdvFrDmiRz2EokK37XrIvl5QJQoaaYpUxFn1ROUA1L\nGHTTnVqB++zpFj/jEcVoORB9gEZwO6gOOgPwqAHvnXDorIo6inx0LhcvgV9D\nz2JyYi4tYWyw+4+Z38vzEx+uLt3Ldj0/qFcQcRDDxQ3tJEIx0TZWXFhKCjQO\nOX/9PccCPWnxX4RzDxLt0Kk6kyadTzjkkQsJ4RT8NJsKfB8Hc7kionsU3Skm\n34z+qJwFSqRzgoiZMLQWvvE+E0k5t+PFzyFeZhqwQ6nZLiuY5h6JtBJnTPxh\nC9Qhn0cxa1OtTHCXD0YUYB1Y2xl7YP2Wm3yXctZxEpsGmwp5L5a7Zanz+TMV\nPDVUFMd0tmUaEe5DslBpkMCC1hmyGl3g3G+ogCaLd6vPZwJtAo4lBMbj0Qby\nbCusrpg4MQwZ8VJaAk9peBCIxLOavbSqGUk/Wx37TQ0V6KA2y/sCbUf27Jt0\nG/0jztjT+1/e6WYzdFq7hpjBgGlvCarbF4O4OIXik32wK9pZdOTB2DElsq7t\nWY4EQmf7gSO6dtWpcY78czlJwUCTK6vjZCitfXbe+xYT6bbPXdngw9OXE2H2\nJorPSMbgJhqeUtVKITo17InvL1Il9TutOQzjA85fFcD8zWq40eCE2lNw5kgy\n/SzD\r\n=6Ju1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.367d88bdb.0","@material/rtl":"11.0.0-canary.367d88bdb.0","@material/base":"11.0.0-canary.367d88bdb.0","@material/list":"11.0.0-canary.367d88bdb.0","@material/shape":"11.0.0-canary.367d88bdb.0","@material/theme":"11.0.0-canary.367d88bdb.0","@material/ripple":"11.0.0-canary.367d88bdb.0","@material/animation":"11.0.0-canary.367d88bdb.0","@material/elevation":"11.0.0-canary.367d88bdb.0","@material/typography":"11.0.0-canary.367d88bdb.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.367d88bdb.0_1617899999215_0.9411877604614287","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/drawer","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a5f3bf3b75d69c0a60b8dfa6564114d37d5315d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.0ec437d3b.0.tgz","fileCount":48,"integrity":"sha512-DQKrp0X5OyBtZc6Hi7DFOmPUX1zc2J2gWyUAUuFdaN3Am3B08eqrhaLTIxVmp/eWtTeLTcerGO6csyeKPaF17Q==","signatures":[{"sig":"MEQCIFU/tuvViA+isvGPNC4LdMmVE/opkEVhpbi6GcEisN1RAiAz72Z3qDYMQShP1NZaxykzrw9TRYtteg85oTSBz+K7tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1tQCRA9TVsSAnZWagAAdJwP/0BxsBDI4Tmj6O9wyFPg\nYAZEAI7o3jOZWbLJs6U1VqkUq/53CtxwVGxmKL+CmeqmV3ABluMpByCtGQeI\nEqgsKd9UuAtAU/4DugJnkvLe0MUxiGB1oYS001jPQoj/7KwNvxVyFMnCR3e3\n0epnMlxlsaMYWhvyT0I5GgglO4TtN7cALR1KYrwXQJokW1/S15jjyQbOMzxd\n267DJpZUWUsP+SGjT+fq/CK7UlvzHiJB/0jzfz6QP+uns96HxqGNYDw2Mbxo\nWyoHhg2efFCqq1q9YEfAmS0rZ4mOOQrz0tA7WnHSTD3KkkYhfmXI/fqgY/H0\nJIK+CiZg1eafi8RwUMiVq4i8NWSU2rJJgkrTfy0Ve8g3o16C/ENMQ45lqAF3\nyv5XyCDoZsPIZL/5sQ1DBzDUkUHNcbfuGVpZ6JtqJAHCox1eZOj/fHP7HKsx\ns6faWkWYmdseodsiJCEpCeQZoqe45lZ5lkMsAsvPRDW4mSnecQC18I2l5WJU\n4YhIB/jcbkpxQO/RRZI3AN+Iax/7+VsJrizTo+LYo/1BupyjZ9Pk5hAAKVzK\n35axma7Hc8UKpBz0CgWkB1koVPg93bimn/UX4Ga5U9a86pZJz4+FnJvPXqqW\n40S0miCgD+E9kEG4WhDaUrFDhuCKrIqHuXcBQG2j/gicicx/hAR/V65U6c6p\nZi25\r\n=hHMX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0ec437d3b.0","@material/rtl":"11.0.0-canary.0ec437d3b.0","@material/base":"11.0.0-canary.0ec437d3b.0","@material/list":"11.0.0-canary.0ec437d3b.0","@material/shape":"11.0.0-canary.0ec437d3b.0","@material/theme":"11.0.0-canary.0ec437d3b.0","@material/ripple":"11.0.0-canary.0ec437d3b.0","@material/animation":"11.0.0-canary.0ec437d3b.0","@material/elevation":"11.0.0-canary.0ec437d3b.0","@material/typography":"11.0.0-canary.0ec437d3b.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.0ec437d3b.0_1617910607886_0.9119441652442235","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/drawer","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a4296981c8c308deba89ddfc962e16fd15d1542","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.b2fa996a1.0.tgz","fileCount":48,"integrity":"sha512-W4Cn4U6TJprcO+CnhwcPL+w9iXhGDZEN13iDD8KpzhMXLpydjx/BN1zkseOhdT2RnRu/yCQ85ZPaEBlkhshk+A==","signatures":[{"sig":"MEYCIQDggkt1SXVHn/ehFgSelXY+2kUmHIV0gyoCoqyS7R0cwgIhAIFyao9lhpXmgnLuTptEgMKeGUmJmTKv4J6BttiXZwgu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG7gCRA9TVsSAnZWagAA49EP/0c9KGISBdFO4oOf9EIf\nlAdWQj7g5X8OPAGfWtsLvsTSYNjS56608O1JNrMnky9uyLOewmzdp85olqJ2\nd4TJk2hoOQGCmUERukn90sPjBHg/OFAybJKTcmfmxNclRY0uSy872X/nTyUU\nvCGUJ/Xr0BJqHEpvzZ6FX00Jpd76t69V5N1e0YB+ZSHfFVTCPeQUXFXDTzhD\nZirTTRHyezyPxIGEhIlZdNpVronFAb8KMprF/uG5giMFY/SLWKlxhTR+bxWS\nkm+LOlxfXAmW9T+CWqjehUqfIkFc3XEYzxReIFKrxm/cjb1li2njEwRCsay1\ndS5KW0kj6uUlMzRtM9BlcM3bR/A5SRKK9GtiGflxusrYM7/BQ6ZsW6nmVGNU\n8sP7M2Actx3s9/mg7smUd7265FN0gNiHkNOCElM518cxsKOEKm2ULysjIn4z\ndGtM2/wgHN5q4vdt3jUEnNvePk8B8M8FqEUsEvINnz5c31iGhXn+AlIckQDW\nXx2/JntsnhinOUR3UYKaxchncq2PXMV71Ylg6yNCvEa+4j9oMZ1ENXDvHuus\nK5AhvIm0ipJEh2iM0MzXO3+4SXJ8qciKAmeSObTQ9SOBw/Aaqjjj7XSFPBHd\noC6gW8I5drV2kM4O+CHMROfWD9IWqIYGfutMc8Z+3JbORDTy82YpbPb6oCyu\n5YqM\r\n=lmUb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2fa996a1.0","@material/rtl":"11.0.0-canary.b2fa996a1.0","@material/base":"11.0.0-canary.b2fa996a1.0","@material/list":"11.0.0-canary.b2fa996a1.0","@material/shape":"11.0.0-canary.b2fa996a1.0","@material/theme":"11.0.0-canary.b2fa996a1.0","@material/ripple":"11.0.0-canary.b2fa996a1.0","@material/animation":"11.0.0-canary.b2fa996a1.0","@material/elevation":"11.0.0-canary.b2fa996a1.0","@material/typography":"11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.b2fa996a1.0_1617981151191_0.7171295650202116","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/drawer","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.24255c408.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dabe428dd54e2f7a237845c556864c3fdee30f8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.24255c408.0.tgz","fileCount":48,"integrity":"sha512-WMmrNKBg5gD9PYHUEdKqIcErj29+Qn2RvvyqZHLVdj36b4IBymXqhxAlKh9OMZgYJUXoJ9BeIpXy/0kQLI5RUQ==","signatures":[{"sig":"MEQCIDsOiuEJTteX8BqV6wwfMpQMS9ZCK0erpLgAfKwHj62DAiASvYkSaoOCrCRgxz8K2nMjCjmATPbFwMLOmIr+agZ8EA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLWFCRA9TVsSAnZWagAA8t4P/3HSgM1G8Ph8POB226kU\nqgWgCRWMFwj8Zf7JeCT38QDLaW3MumT3yoVmDFbsVBPH7Csc6zBUydyyJIPv\nnKVgdeo0Fzzfs6Cp4T8g0x/qmiqASetqkLuttS9bhlL8Elzg7gegVWXhSnhA\no3R97w6BpTrAnNDfbNp/bubgL0Cq68mzCuZivp6EgRxVIGLe26f8DqV9lU8A\nnMmfDCBc5y1b2lczmCxFkatbujxTaBT51u7EkIiS6GWhlYb528WVZX1ODzCf\nxlCp0DOh58718lSfyblrrdFHWLUYMe3yV1LNjWcWXp+L4ZAS5AuxUf0GYTzy\n/ADHIXbmaEBPktXY1nviAimXaXDcIhbikVC+TS1sWuQv0xQLhg+fxKANFYXM\nUfyi4wiiGkW3pxxpXV2SRHTb1vWBhhbqZ5PWCbWR95nJ29m7DmuqX75ihhxE\nqZq8s5qR4UqT7d3x3IdF+dQ9wyHrf9ZO1eg9sPQp4zYNdRclHF619o1qFGv0\nPkx1mD9TtKJ/x9F1TBbjIHT/JO0UJypGzYg1C/cHLinclPTg9QywUashBMgm\nfwN0LkV6btPdWb1e6gSVJq+xr5DTTpEGzCPKSEW8NXkTbC13VpfeQrETiPRJ\nfQiEki83OKt4r5S+cEG8XPik5v3wexT0yke7rJjrnMEa137I0CkuRKf9zngS\nCr9v\r\n=Xq+4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24255c408.0","@material/rtl":"11.0.0-canary.24255c408.0","@material/base":"11.0.0-canary.24255c408.0","@material/list":"11.0.0-canary.24255c408.0","@material/shape":"11.0.0-canary.24255c408.0","@material/theme":"11.0.0-canary.24255c408.0","@material/ripple":"11.0.0-canary.24255c408.0","@material/animation":"11.0.0-canary.24255c408.0","@material/elevation":"11.0.0-canary.24255c408.0","@material/typography":"11.0.0-canary.24255c408.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.24255c408.0_1617999234224_0.6916799007096219","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/drawer","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c81046c056e835d864a40e579b0398b1ab31e276","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":48,"integrity":"sha512-68vZwW5dfKjEgsoQeRHCMaSHNlMee8oGJ1ZA6+msD9oYHsuPmpjybVwH6xyzfn1N/XD0J6p/Xt4anl39o69ULg==","signatures":[{"sig":"MEYCIQCAcLlwEYCLZ8PpPJyZ9ERDxcjMkb5y8JA2b+1HUuOixAIhAMEUD4JoZqN8KIpOIBoo6d0ekgi+6decpAbO/n9w/DIk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNs+CRA9TVsSAnZWagAA/1wQAJsDhWk3F41Kel9C7wN7\nzjBWsU295iVMX3dT/K+tkDKOk8tSbxaIUo7uoMO5sLsKUNLR1PxIXVzd+r7I\n2hN4y45XHUgUpBzvjl2xlFBQ3fdsi+4Iep/zvLI1J5+NQWVsPxLRQEZNlbrb\nHqlz7DdHSBTzmdUUQ0ri2tlXLCD9UoExGbJQTb78S8KlgYdHqxvVKfzl6Vxr\n5iQwwCgsgOza90qYEduIksiOulPwdXeT3paAXnIsG6ci/DY8ivUO5oWm37WN\npn4JImw/17kWOyD4V705EYpNBBFamJXt3hs3PhMA7BHRHY5gRaQvVplMB2W9\nQASYBBmKbr27ui7mkVTj2QqnWi9enIL9CS7t/cpxgiBn3H3CYrluI66FUb0q\nt32MTwgdo2npcVuScd9BPDt90TIkh2r2ghVdNjk8EFRo2y3S3nS1BJ+8I1ZD\nZXSN7Fa7WYD7LF5/pryBcFb4fCB6lJgxb9eRdYpbrx+q2hfHNJnDEry7gYdm\nlzzWTly3Tsz/98nq/b9HFe8KaZV88QRzDdqFQsAzwxbe2OMX88yTXN6al70w\nK5w83GmPW4Ch4UFb6i5//RnCQs928UwWp5EuHJyeRUAk1aPiLcZQYgVbeYud\nm9zTYhNQ3UWAozcHAgKwxQkgmjIKrR8yLORqcc+i8013fs3+79iXzuvQK6t8\nkPi2\r\n=31PC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7d6a4bb72.0","@material/rtl":"11.0.0-canary.7d6a4bb72.0","@material/base":"11.0.0-canary.7d6a4bb72.0","@material/list":"11.0.0-canary.7d6a4bb72.0","@material/shape":"11.0.0-canary.7d6a4bb72.0","@material/theme":"11.0.0-canary.7d6a4bb72.0","@material/ripple":"11.0.0-canary.7d6a4bb72.0","@material/animation":"11.0.0-canary.7d6a4bb72.0","@material/elevation":"11.0.0-canary.7d6a4bb72.0","@material/typography":"11.0.0-canary.7d6a4bb72.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.7d6a4bb72.0_1618008893498_0.6135515396049238","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/drawer","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.352b295c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a658d23e258da594da3bb27097a387804c18e23c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.352b295c1.0.tgz","fileCount":48,"integrity":"sha512-YSGiSKkGC4XYXJIQULqYEZopc4jr0SCVfjhlto1sg1qsBE2QreKCWulXjdeMkiDoPwy8/QWmjimIlRVBDf2KWQ==","signatures":[{"sig":"MEUCIDvnxvVo8wsaUX8zle5hQychwB3JiiVL8d6fk3Czyc+9AiEA1+PlEs4BzaFb0PlUyixqqFYZ3O4+Ipoz/W7uKs/4F3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI6YCRA9TVsSAnZWagAAyTsP/RJidCwB2+IUFcPLS7zu\nYYiG/zSLpHqlC7MwRU72DZ2rAtir7MotwBsHfGNYHFdHJRAsoR5y3/hR/d4r\njq8wBfw8BmfNrvMrXe6uGlw3Qd6O1a5rWUfUMJ9Cq40eJDIfRnyGNngnokSm\nUNOTprdktZwb1mY9LTrcGz6bHJLp55WO0ofokS6bUnADjgYjWWLwnPIrJgJO\n1csCPpVwxS4V5IcpXOLmMq6YmlRRRAVgS/+pwnf2OkHrZ84hCqLdfUwzAua0\njorqXMVa/hhEPEQL4dAp3RD015ydDavmqTVDEC2MMhELOBvuRgtZz43xTW/m\n0VJ8xkM6yCLGjNj62jPeVrI3+jmOTkk+rkCWF58lakzPmi4p+YLDMpflf2vB\naegoZg742Npe8WH3odHUAQwwGx1KoSy3vqvpc1eVDw0A7H5oF9xJ3Uhmc4xM\nc+7csiyAFQL4A9ks6YuTfO2x335/89S4luXp7lah39EvYCh1V7AA70r/E322\nuwRgfSy7QUCxYxoEByREBXMTya3CZxlfD0InoP589iTEg2jYu/feW/QwY89o\nQwTZ10u3zfdaia0hxd1yugHGC1lzN72zG1NLqAV/4QpzEzZvEhq4eDPmNXre\nNf7VdEZqQIJdV9FYc9you+wqVRKkMfBIIqJU2lA8GeXZ3J40PJh8Kvgper+P\nn+Q8\r\n=7E/c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.352b295c1.0","@material/rtl":"11.0.0-canary.352b295c1.0","@material/base":"11.0.0-canary.352b295c1.0","@material/list":"11.0.0-canary.352b295c1.0","@material/shape":"11.0.0-canary.352b295c1.0","@material/theme":"11.0.0-canary.352b295c1.0","@material/ripple":"11.0.0-canary.352b295c1.0","@material/animation":"11.0.0-canary.352b295c1.0","@material/elevation":"11.0.0-canary.352b295c1.0","@material/typography":"11.0.0-canary.352b295c1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.352b295c1.0_1618251416417_0.8805754229988612","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/drawer","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"444ff987400b3f0d764989fd10a2b93f0d548a10","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.ab99b8064.0.tgz","fileCount":48,"integrity":"sha512-Iwn28vWa4+V5NgOmBK7yiNNexOhvcYIEyanPA+oPaDdHnfwMPC827ZceOcp8u0mc6PJZVBRzRo0QpO4gSsrZvw==","signatures":[{"sig":"MEUCIAVxXSHdF2kNWOW5IyLMNhF99Fkq33E/qbU4SHd3fHipAiEA+Q4wkdyPapRPfzVyUJZVhw6/gLsW2AXgFAtVlGrfKJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda5gCRA9TVsSAnZWagAAGi8P/jU0sDa+AMo7tExkDaGG\ni9wPd85RaiTpM7VwtydqQAzWUPraHcizDgZpzHmKZEpnLiKsDTZGqotPtJMg\ne3fJJV11spUeH72yujKH2QPJiSYiGSSSUGdB9zkkMvpNqwQwSjLGIbjoJjbG\nLDv5MV13hUxknfuQksdi2Q26oWrLw8GradW32u/Om0okTof/SY26IPB3xkzS\nPKFbOPbfxtdPwoUMnYoAAtk6XpRTpv9+vUtccJPDZCHCWvi+oJxAx5jZG28E\ncQ91R7Ml3L6TZ95FlrAgzlfpiuM0hqgPLe4lwORC24ruPCu0oKRRlP5XYMqR\nSHj9oMKx7h6pKTPAb4Llwk07yaAjnW2oSCTqLrTnbFHvp1Q1YwPcE8B3UCyv\nrs3/rnagciKu62Bf1HPdq/p124qA5S5z1JHNeekbp+EK+ETg5CcH3VUEUXy+\n7kFLPHy2Oj0xccEGTnQIxgTqLkla4Ra4mdU0wTJ9QP6PN0zzYUS8SRnp7mcx\nAamxRB6GWLuxqmhckqkEtKdtkxE6VLgxxZmXymfJyOtaAAAfy/5pmJzpzdwN\n8sKAVOrxlFFe3obV0LRiQH2TCWp/+p8MmbTjZSsC8k1BV7L8v4apdgT32x6x\nCmwOELhACywkFi7AQNl0+GL+afsa6Pz5mx2gpJ7GB+kuP5A4NN+wjL9iQbPe\nsnCv\r\n=zOE1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ab99b8064.0","@material/rtl":"11.0.0-canary.ab99b8064.0","@material/base":"11.0.0-canary.ab99b8064.0","@material/list":"11.0.0-canary.ab99b8064.0","@material/shape":"11.0.0-canary.ab99b8064.0","@material/theme":"11.0.0-canary.ab99b8064.0","@material/ripple":"11.0.0-canary.ab99b8064.0","@material/animation":"11.0.0-canary.ab99b8064.0","@material/elevation":"11.0.0-canary.ab99b8064.0","@material/typography":"11.0.0-canary.ab99b8064.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.ab99b8064.0_1618325088340_0.5797366100734545","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/drawer","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c132bc25764992b5e71cd166384ddc29963ac9d8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.8f0a11e32.0.tgz","fileCount":48,"integrity":"sha512-Qq1YMqgkif7rhe+d2vLOLj0jHZy9B5UhAICFwoc8jZKpII1HkpTOUo1nppOozPHf+9KMHaDwLl27dMp/uCmh0w==","signatures":[{"sig":"MEUCIQCivvmCsYEO00p+F/yawBZ8Z7lz12tUsoL2FV61WE44HQIgaGvUuKCsxK8O2vm9KDAGU4nDFkKdg96LvJdOtNMC480=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0rDCRA9TVsSAnZWagAA98QP/1fHp3mpCHq9IBVjjhDd\ncz6qfZ4yQNN5NELE+dYiD1S/zI8vk3pr2IrM8bFC1mYQYCiXWvIvtUqRJTZV\nzzvtZUix2twLbB7SZcPwJb0EGK+0x0xP0MjtXCVOBvrtAxcZdoYHbwPxtDBJ\nR4lRYFTs2+Iqn6KYGiMhutilTE62IEecvY2bGLNJOnDyMZnT0RhbNiiV3YRm\n0gF2hLFrLJ6J0CjjhBSSoKs7+I9L7WvFog192ua7kEmaLDo57nByDqpAIahl\nnLvC9a22e4gciZVgR6+Rq6pizhPB3OtWDy7XGcQJf7N0wU1LO6yMnxM4/wj0\neK2MsuTYbfExapsG7orRrU4YQvvOSQoRdPAe/f1+nq3o2sr7RD4PuXYT1ZvK\n+reAlHUgQO039JAWtkV8Y8WK2LICE5MeJwFipkqEc6RpJayCjlEH+d+4dmXY\nX1ZCWhcKK0D0jc8dnOYBe1sdNWidvtnzNN6CQ1gFaB12T3RicbOsavJfff73\nb5V3SRBe+6rAh7x0wcVLJULSbJnFI/4CAFcOtxuSsk61LTbwBfLGORxi+67p\nQsgJ/L0cj9rLAqiBwVCWj6ncMM0o+E8baszaswzXtdJT7L1qobKRlii4vU2w\nUQLUzujyumFZm6h4L+GMaO+VZ8vTUPrLvtUaOW5HIKHGuqQND1uT6+RQIV0V\n2rVi\r\n=ip45\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8f0a11e32.0","@material/rtl":"11.0.0-canary.8f0a11e32.0","@material/base":"11.0.0-canary.8f0a11e32.0","@material/list":"11.0.0-canary.8f0a11e32.0","@material/shape":"11.0.0-canary.8f0a11e32.0","@material/theme":"11.0.0-canary.8f0a11e32.0","@material/ripple":"11.0.0-canary.8f0a11e32.0","@material/animation":"11.0.0-canary.8f0a11e32.0","@material/elevation":"11.0.0-canary.8f0a11e32.0","@material/typography":"11.0.0-canary.8f0a11e32.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.8f0a11e32.0_1618430658924_0.9042026734752062","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/drawer","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"590c6c1770ebde1b7894005392a00240e4a68c05","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":48,"integrity":"sha512-mlpWPauvQ+kDoPab6+PLNprv4GN52CrLIuWQ38UQt7C2vFl+oh3XY2DhyU824xGYkPVpBoubzKkibgpfLfn84A==","signatures":[{"sig":"MEYCIQCFLLnFuwJ5f0iOCrZG5rt6JNNFmPHcGRJ+QiAWpbkIlQIhAKfD3FGLSEC0PMsjVs66BKCtORTASewROkF0z9sihWx7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIBnCRA9TVsSAnZWagAAUh0QAIS+L+s1GcOXObZL6omH\n9KaPlWTTnDRT5U5i80wUlK/IA+0HNUx1No8b7QP378JLmImDOkIfqhU7L7MQ\nJQ3g2q6Lgwd2qE2JJ7K414OcBUBTqEHpuEhd1SE7f/FpAVKHz1sopeYyLlSb\n8qhDwqDEH/63ItPpGGuROfyi4VynYoAC4rS4FwZr68pKZgQFf5622aY0q2at\nv7kXGSJZHs4AFmJWLf9CpMaeJkrw78NLuJdIteI6cu/ZbTeY50IfWYkr1ovS\nJ1D6ZfmZh1MUVUBhzC+1hUOHEJ3rKtOU6vw2W2CfWN9I0NV88wP2PWKlglrF\np8PywK4LgvTM9ye+5M+RLimKlkg7che+yTOauwPt7J/z5wQRGiwM+jOPcfUu\nuqWL7eGFmQUnLRJ0Oz6HdSG0ohKd7GCNqzxsLzAcrOQvCScMe3dfsHFc6apL\nakOfn4PY1KgK0y9rS+qYnuwda6fVhxMvKteqNSnfnf4jX8eye1/GTDp6BUWo\n3ltIyCpwzgyKOJ8S0VgNQBVk24vCblaAPv5evL5hw9Vzqm/eauaxfEJTGY8L\ntprWPmms/DncPKkn7Q88hudithp5paQosw8QIfk5QgLzkNwRVb6SaOpj4c8s\nYtmonk25fI5V3gcjJy56f9v7ihFF61q8MLBm1BfM5Vbv/S3LjO9MUhYpaqRN\nvU2t\r\n=Ftws\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5c6db8fc.0","@material/rtl":"11.0.0-canary.f5c6db8fc.0","@material/base":"11.0.0-canary.f5c6db8fc.0","@material/list":"11.0.0-canary.f5c6db8fc.0","@material/shape":"11.0.0-canary.f5c6db8fc.0","@material/theme":"11.0.0-canary.f5c6db8fc.0","@material/ripple":"11.0.0-canary.f5c6db8fc.0","@material/animation":"11.0.0-canary.f5c6db8fc.0","@material/elevation":"11.0.0-canary.f5c6db8fc.0","@material/typography":"11.0.0-canary.f5c6db8fc.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.f5c6db8fc.0_1618509926985_0.9967485481043805","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/drawer","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.3793a3143.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58af5433cef50fd25ca713b4e553baa6515cc4d6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.3793a3143.0.tgz","fileCount":48,"integrity":"sha512-y4LNcnrTegzIEkABySsiiObM9+/Y65LUR8o/NH4ON7eX/wgal25sLRPdG9qU4vjR7d+/WCATH5tneNcW+gRHPw==","signatures":[{"sig":"MEQCIArt3iC0+6hfTz+rQ8clxkZa3buU6mNm2/aohKn+Ep4hAiASsXb5atzMQSTuhaxlV2x2emfy2PVJ5tzLf5a7JO37WA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIbRCRA9TVsSAnZWagAA2fIP/18eRKwQcS8gLwQiztD8\nf+xGbmqb8lNw39xXZqnp85fG2K3surtGxcW0WUUcxEYW7mLjy40JTpGpNGta\nHnD51pzasvFTzKfaUh6im5K/KXcz0IAnSSc643sIHHxmb600HykD2n8ZbO0x\ntaprPQdMoV2wb+ZTUtVTyOOALM6cYAcLxk0DwooT5cC81gMw6dyYrq9Y5k0H\nzPhzbnSUD8NkGaDHNOPiJl+D3Z0u1rRSRM3DT1r54U1pMkytcoUHvhZiDoIM\n8U5www4H3/IVb6RvrTUDbTrdiH5EtroykgAYTWhbCPyj3pRlMeNB0FdztXAB\n0e5C93xsvccuDaCsyGCq7NEeVUejvfnhsfrwDupzfpGeJ5d0qpu9SwXZrW2+\nGWg6Lv9K6BIj8xaiSXrFHsgd7Wx7d+fcl6RMC16EX38qdqHoKqrwMHL1mfA3\nfeiavJ2gjF/gfTKeJqf13A4+RTLFyxOgrk8X7UxfVxXyHAmDvVBVKPx2dKwN\n14AJs79bDoJHPA+GWO/jvXNj0YVfw5U6oNzVYOPfWxqfg9HxXUa3b6IdiKdV\nx4SagOq/hrUuF2eIvD596fq40lr9RHDS8A+LLBui8QYjdgBWF0xuJyLESdcx\nL2kOXDe8L70gV72eGRsondrueKuFjTKDWHeKzZc7jUrBhaFp0hgb67ULM+GS\n8tdk\r\n=NQuX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3793a3143.0","@material/rtl":"11.0.0-canary.3793a3143.0","@material/base":"11.0.0-canary.3793a3143.0","@material/list":"11.0.0-canary.3793a3143.0","@material/shape":"11.0.0-canary.3793a3143.0","@material/theme":"11.0.0-canary.3793a3143.0","@material/ripple":"11.0.0-canary.3793a3143.0","@material/animation":"11.0.0-canary.3793a3143.0","@material/elevation":"11.0.0-canary.3793a3143.0","@material/typography":"11.0.0-canary.3793a3143.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.3793a3143.0_1618511569507_0.05588860360727832","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/drawer","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af98c2a6b32c4d214128547c5dede88ddd6f230a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0-canary.bc104bae7.0.tgz","fileCount":48,"integrity":"sha512-rhFeOK5b3ah9HQDVoeahvR104sQx1h904NQNhPg+vTHfy3uH98bhArn+AAVQTERPMGS5JPuxC7NYDxes4WD/TQ==","signatures":[{"sig":"MEYCIQCZ5+kHI6WqTqD9lIRLEqDuFnmN2ZbptJpEF0eYQLk6XQIhANY0EJZdg68HQTQSj9TbeWkIk4rPI9FM87YsOBklo/L1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJhXCRA9TVsSAnZWagAAaBIP/0Dr1VQgTj5APPXNgctd\n48DoOA1rCEEPPDjECch4HzGWm7rtj7lj9SLn+PunkRIPS8YlWeA56pv+P1wU\nEVYB705lQNYz09csyY+/zEouoL3jkLwBL4uKIPg2XI77H3Nl73gZSxSxCbAo\n8okD41rnBO0FiDosGjUW2LLRpk0x2lqGauV2Z1Id3pTBwXNNa1h0Vx0o2kzV\nXeJ756x3iBwRq/d9PRhg0bSTVmUKWKcKuAfM+D19AmSWqqgi43Z7JroW8GIj\nsZDoxFQ4XjJpsSsSpumsAvSWrUIW+qBAbM+BhcUQlwwx+bhHHrU2rEXG3tJk\nMEp4oMOw3K/obYkhIX+5YdEBiOHPCkYY+bQ8NCNVzgRA085IiqVb8Djp7dwX\n3GbwpZawgh5ib53rHJnJ6v8XY46h7iNQxQIl8Qp2HRtNomVfhWs1+7j6pt43\npswNwkg0Cg7UQeChFq8UCGUbUns7tsMRfPwGA/bha9Wk/QqFnLOtHU1+eMLA\n0erPapHy30oiaOEOxStSMPT39EuXwtux3Mmh/awIDvGXDj1upuHQr5XINLzi\n7LQRfWjEqojfMnT3Pn0Dv28X1O4qbxQKdDkGY7Vx2gkKIC763v4tykoPgSUK\n/ldbvQ0hYoqtbIttbylTR4ytsAZbsVTWBL3F9ggCMOF3ciGofX8Tgsxn6ePN\nxTAx\r\n=/337\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc104bae7.0","@material/rtl":"11.0.0-canary.bc104bae7.0","@material/base":"11.0.0-canary.bc104bae7.0","@material/list":"11.0.0-canary.bc104bae7.0","@material/shape":"11.0.0-canary.bc104bae7.0","@material/theme":"11.0.0-canary.bc104bae7.0","@material/ripple":"11.0.0-canary.bc104bae7.0","@material/animation":"11.0.0-canary.bc104bae7.0","@material/elevation":"11.0.0-canary.bc104bae7.0","@material/typography":"11.0.0-canary.bc104bae7.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0-canary.bc104bae7.0_1618516055119_0.5271215647850134","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/drawer","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6ae10b2912fbc4b84dfe8841e22ceebdc5fc2cb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.3f342c3f4.0.tgz","fileCount":48,"integrity":"sha512-uhMJswGO+lK8LcekRZK6cc/ZV3GCDgsht9ypUYITrSOTldFxnd9FH0RCyBr2q8CsELrL0cE7xcQQ2oq4uEJpEg==","signatures":[{"sig":"MEYCIQCUljeDtHzP0AtISG4wIdDnzEFekEZjhneqC2Z7OsN2sAIhAI82bRAHsHod7E2HoO7BS2//S10bjaeUxF8WFZ5Tnb2l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMRrCRA9TVsSAnZWagAA+eUQAI7SSLYRgtZPvSsM82i0\nvWiWhSIf7gwSTD5o1ACsiJP3gppGVQAetXdTS61yWaG/txjWpxOZGAnuyRzq\nY7unxsSUd+o+9jBUs9Vo35hJ8rj0hDjbh7PNd2gbBnjXeWt3fviTuhr23sJE\nf5IhBsoE1D+XV+ImsSfbWk17VE5MjUnsh5GJVYmJwPX8cxBt6HU3clqllYHc\nmGshVgLT5m387cS7yQBt6I1n14fpqMcxRKoVIipxyRCQoawoCiQ35Lbm/UDE\nkrSP5PYk5zI+3zLV24I9h+rO1x87QcbaTrhBmwDl89+QP3G+dwXcdMoubJ4K\nqlWExFifulHls/RsVjO3LU5PgVKJ4IAcSlh8YkppOofP2Xg491WqjWF0yaYN\n7xsxFxtukaPjMS/+EqAGjmkncdBOSVIKsLkijF1hFGBXugEcMKIh+tEMHNv8\nJmH5ht4yww1YlpLvY43HBGjl24PC62zXSjMrQ+BMHGIJGyHpLABquYxRavYh\nAQNZs4OOLUjsQvmh3zS8WefBaG71wEXrP3Idq9vKlumcNuigjTAxD6K0iCe5\np6yBC/iLYc5hkP44XITWYaP7f4jwedT9XkzRKhPNOr543dt5VVXLyJdgYdrO\nywZQQ5o5hTWYr0dy/AxU7wXoKKJ7MtM0n2FOgSCYhEWBtqgiM5i84MunOSus\noMYo\r\n=C5gq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f342c3f4.0","@material/rtl":"12.0.0-canary.3f342c3f4.0","@material/base":"12.0.0-canary.3f342c3f4.0","@material/list":"12.0.0-canary.3f342c3f4.0","@material/shape":"12.0.0-canary.3f342c3f4.0","@material/theme":"12.0.0-canary.3f342c3f4.0","@material/ripple":"12.0.0-canary.3f342c3f4.0","@material/animation":"12.0.0-canary.3f342c3f4.0","@material/elevation":"12.0.0-canary.3f342c3f4.0","@material/typography":"12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.3f342c3f4.0_1618527338599_0.011057683672589969","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/drawer","version":"11.0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@11.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be53de6ca0394b5ce570c176495c66d555785b40","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0.tgz","fileCount":47,"integrity":"sha512-pXRGlY+/3kiXGNZx2fOdLbOO2Fb3IXVsSm3FZalMO+EfVFXVJVFrWqkkJnuelJ46R4wCvldXEeaj9E925qMg7A==","signatures":[{"sig":"MEUCIEshhxDZFiQFcYjV6+5C83QdJ0do3Wmh4nqf6D6VgmIVAiEAq74mcm1NMzoiMqJq2drZHKMFYcjLA1mvvoSTutJ0esY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":960836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMVdCRA9TVsSAnZWagAAp8QP/36QZ5uL1Dc+KWgAO8dm\nOT5SI54I8gCH5ds1UhuMCt83EDjn/zCzSMCBKronIeLyAvUJa6QWVmap0BEo\n82SI+loCQURYAwwoqcFWPE7ezcN9X20GbJV4oLChPgMBqJub2DF45Hnz71zl\nCltp4pVbt5VQoPeiEg+8FWiRnIqPoTaXmvbc7NNx1thH88Pu0lHBjd4nETTq\nrw52GaJ+wCfdJw70dW2wlSCZqW7xzn4fVB8q1Dg91kInCKGSrekLbdyRsNpY\njFMZIvys7ZFVMrxE/MJBkymYjD1jNau4nzCUQk094dM8khJOb4NQBXTaQdbj\nD0zgVwzVpDjlG8q+O9qMxKPmZJJSkywue23ULDPSKYv56vTHc5aXYKLfgPZ1\nqJuiJFv15mVAyKz5XZSiN5jTLmHYIP/LxEWkbU3bft5VBqtb2q3d6zHU6y6p\nNmUUtfYGJHb1bKl/iO1Dh/QBb9amjIhPR/tVmFZb2zhDygi9c00mxuZmQgUO\nvaG6FxtVMph+op5dilsQDzqZxT89ix80tgJfvxdDXjOzu6P19EXZeBaQ1s+Q\nlixlvVxg4vYstRJQZDFcNkO+MN3zXRigbn+otxqmRujeKsBEeGvbpZOUkpnE\nTuGPpscvZ2O2945fB2bUk2nx49ObjKaoM8PY9Rt8fsWyPXI2r9FlwWkz+f4e\njXXb\r\n=kWHW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^11.0.0","@material/rtl":"^11.0.0","@material/base":"^11.0.0","@material/list":"^11.0.0","@material/shape":"^11.0.0","@material/theme":"^11.0.0","@material/ripple":"^11.0.0","@material/animation":"^11.0.0","@material/elevation":"^11.0.0","@material/typography":"^11.0.0","@material/feature-targeting":"^11.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_11.0.0_1618527580641_0.11684918585937498","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/drawer","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1017e66856ab6e0b3c1f4a9f6fe982d383fd5e46","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.2ebfc5374.0.tgz","fileCount":48,"integrity":"sha512-OfQZGLlqqk/Dcm0QPUG/bTtf0RcpiDe0VCA7VeP6A/LAo8jUDeocaJ1916Yneam4FeUV0+HmvgDx/E9cEcSNuQ==","signatures":[{"sig":"MEUCIQCm3JySvoA6RBS0giNx0Z7ByBYJfBwg/BcYZA6YhxaM8QIgXX2yCkhilYzlgQdheZcKEOxtr81TDBnGo6OdDZS7lB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefeiCRA9TVsSAnZWagAAHkwQAIplT8Ooy8TijGhhZwK2\n/mJC49f2dZMMCGEQ2ReDm0vBJv52CvlwPNljD6MMxqdkIdHCRykn3aufnzE4\nUrexIf3AFMQXTlE5SsNHGTtvcVIjEs4u1/vdq47vQnjQxrSnN2xSed9QYSMf\nUcUkalMEPFmpSkyyTSOkpE2fluVvdAGxPoAGyd8mPCMGny55g8VqPpRQc7Tz\n/GT0rIv0VlPV+vXzZz2NhzLoVU2+JD6ZGc/+uEcY+EwGui9kGNWiI+Tqxxt/\nVOnINhKkVGMLjnKnIPgTGdqqnBGtVdtl5h57iHFud7Dj9bUUe+7svlV59Rmy\nwRgXSZ+p3ET9aw9Ig5p7Kt5Z6V2JN98nqirtZwAu8gHb960qkz45lDKR7jir\n6/AxJet64KuDXyY/r6QlULFt8fx6eKFcK5jjrAA1KoQq50CDTy88ibmyqTzd\nZKRAMX/m62EhoEsOGNw1A9xAfn++vUp6774hlAtW7ciLGhJ6zA2/ZFg0RfPe\n+d4VXpTvzJPZ6/DQ2UM5hARzfuG/mTAB2NuJdkPBk+dfq0VAhN3CVKM+lyCH\n0h7CjVfmQbyLllmW18F9j1nKdQKnTBYRFn4Ly651IqD91rB4KAitmkotGBQq\nQj36Pd+AnJYIbiHlukyV/KnT68sFzMT7RgevzGA71LcfBoEOE8rS6I0OiSsU\nxsy0\r\n=oz6N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2ebfc5374.0","@material/rtl":"12.0.0-canary.2ebfc5374.0","@material/base":"12.0.0-canary.2ebfc5374.0","@material/list":"12.0.0-canary.2ebfc5374.0","@material/shape":"12.0.0-canary.2ebfc5374.0","@material/theme":"12.0.0-canary.2ebfc5374.0","@material/ripple":"12.0.0-canary.2ebfc5374.0","@material/animation":"12.0.0-canary.2ebfc5374.0","@material/elevation":"12.0.0-canary.2ebfc5374.0","@material/typography":"12.0.0-canary.2ebfc5374.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.2ebfc5374.0_1618605986177_0.89312235038902","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/drawer","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.5631828e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84524b416369475a49bdc60b724448c58bfd9f14","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.5631828e1.0.tgz","fileCount":48,"integrity":"sha512-o14ESTwNyzka7C+votgkoNaJUF3IMO50PM0XTzGC4/2spFmWPeQPjRGG1XGDeIgPuNPMh+ue/2aZWEdcXTR74A==","signatures":[{"sig":"MEUCIDf5cQ/8ygomse2/r6/Hb8OPBK4SR+GF8UpKq0JyrIMiAiEAhRrcrnZwRxcDlTGACRet9CHjPR0/cxaIzAPqUrihrb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepLCCRA9TVsSAnZWagAA4UgP/11CTQSquNAbAWF2sGeR\nf9gRqGw2GMCRjIPFCfQduuGK2Up1hgbaQ6UT9sAjL9FAGLvaBrDou+2egC1w\nQWSqMGQZ4dn17O8VYrXj1S/3eW5V7jwhufclogH2BZPRw7PL4bh1La6opTa3\njwLpdZHhf0c/fprlSuEki07b3xmgx6j7503DfEjkUUVYMLm+JTuIJ/z1r661\nwEooxsJbvgDpxFs5NtpPSPkM+Ojqlw6WkdmpDJQaZxH0Ln/shYsgPjxm4dki\nUJLSu3s6VPY+fpebPC63vT9BKWJei3jm2B0icW6j4EYDwdvtfIArDq/8pPW1\nVCvQaLyRg36za7kcSJ0ZG9oNIpokgKAs9Yr81kwDKsC8/7WYFEydb+6+yjwr\nSWGOBGfftWxvsYav+x8aGM1f2ifk7fqiREnGywHVh8ZUZfbMB2fSaIMk9Kx3\n+DjNkIs8WscH/JbmcA0g9StU4w9zaEUxrZewjUCfdciUnnxrQtWUVeRrtKJs\nszEy6GHpxH6MeRpquNPv+eODMhKXwYVTzoPCBblTDMKm4FKWhsJEsiZMMkzb\nVgRue+VEj6T6NvoflJDhRuUEqb9eG0ut7XELieLmEDEXzCfAfvlTFMWHK4wR\nEX6nvPboW2h2FgZTDY24OQujhm11oiWyWHLqixsirJziSlO/znTKzgW1/dOL\nBgsg\r\n=urPc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5631828e1.0","@material/rtl":"12.0.0-canary.5631828e1.0","@material/base":"12.0.0-canary.5631828e1.0","@material/list":"12.0.0-canary.5631828e1.0","@material/shape":"12.0.0-canary.5631828e1.0","@material/theme":"12.0.0-canary.5631828e1.0","@material/ripple":"12.0.0-canary.5631828e1.0","@material/animation":"12.0.0-canary.5631828e1.0","@material/elevation":"12.0.0-canary.5631828e1.0","@material/typography":"12.0.0-canary.5631828e1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.5631828e1.0_1618645698036_0.001713758530512921","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/drawer","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.bd685395b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7d37b8852d8440fa25973e6062c43e269959a70","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.bd685395b.0.tgz","fileCount":48,"integrity":"sha512-vOnVW8mRPYEk8HIR1F/EGKilfzHxU/LZ/rjnxcP9Nj1bSMs5KQeRSfC1SFCJJB3Ev6dJff59tvoeVpTruR7kEQ==","signatures":[{"sig":"MEUCID14VB/j7icdZB2w+GMIq5BgY0bRA87UT2Fk+anc80gBAiEA5xVBmGy7SYZfX3u17o1C5ZqEIZxHxNRh3kFRm7Zsj64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc8cCRA9TVsSAnZWagAAlfsP/0RcaQJEuFsoFFTUM5uu\nK3ZlIsbbTPfMSIJv4eBiWICOK/FZve/n+HDgFB30t5Gc7h0YE36ytxoAUgnR\nFthyE/XXojatX/WMNCEMcYv4qjjbqYDMaOoTUFudFFuujKaa14GbBE4jODvx\nx922kuTda1Ti5bvNWjtCkyNarYYfkj/X8B6zZYf1FpPJ2yLMEJdngU7kzGw7\nxeY8MvJxLGTiiQTI8KB6nT0MoJSagkkBK6bIvUMfcdVr3bHzOl47i0ejxBCc\nuzRc9Vkjfh5a4y2aTOJ9ufuyceb3nhM4orp4W3yhNxRGg1MQ+sydBBQ1cbJG\nehbHTxcpCyrMreRYYGcU09rWqHHjkOmuGm6HfgP/oK+GvFz4yheR8RS04Qs+\njiXZjwDQxvdJUfkQZ2khLej2F/Vmjl3qbfOt4od+o4yBpqi7wwQrOPqolfo9\ntD1ZeIH+kWKZ5FVf44q7WxI92lmd6MD+TozBKB9rVdyoeLBZgoQAW54cTZbl\nTubjKWlcKuLBzDdmJ0W7zEYkX2gjmc0tGucucHdC5jDVjKV0/6cCi5hWx6oF\nwG7RSlYr9q+n+a8HOSRPTD067NAZsh5TZZDoY3AMmmNKVGQ1GldpBJSpqFiw\nwYrj9nrPfAHQKjT49hUJZvKehaEfZKGUMM+UZladOS6AHgxeAh7rPbiPdFgZ\nhW8C\r\n=q4T5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd685395b.0","@material/rtl":"12.0.0-canary.bd685395b.0","@material/base":"12.0.0-canary.bd685395b.0","@material/list":"12.0.0-canary.bd685395b.0","@material/shape":"12.0.0-canary.bd685395b.0","@material/theme":"12.0.0-canary.bd685395b.0","@material/ripple":"12.0.0-canary.bd685395b.0","@material/animation":"12.0.0-canary.bd685395b.0","@material/elevation":"12.0.0-canary.bd685395b.0","@material/typography":"12.0.0-canary.bd685395b.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.bd685395b.0_1618857756149_0.22551421621551748","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/drawer","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.b52196498.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7192b2a6b4ca0a6d960ea1a1b29fe0eb9a5e8845","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.b52196498.0.tgz","fileCount":48,"integrity":"sha512-NwvyByW0Yg+cwiikVMPfVUuRM2L0ABEI7FmSn+h1pKQ2W6KTJdXB8NkeeFtEGf3MVeqpEFYaRLdOtm9kuX0dOg==","signatures":[{"sig":"MEUCIGEzQMWgrw+MeqpZgH4cUAMCI5QwpiHKkfTp++TRJyiMAiEAr5ty1Iwlh76qksyeqsdXF15lOWIkQTKLNsxmy8eo4Hk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeEQCRA9TVsSAnZWagAAtyUP/jgg8+zLq+pdP9L1d0ny\n4d0O63iXMOCQd2KB9ReQq6Wgrxe/X+YEJoM2ARFM7GaUasuVja7BWJQIp/oO\nQg83epZge8jfOvyzxum232/OdSJDUTs4Dqdk3PL9CQaSzMA7+5SEvZ1horLg\nAzNXDuuRPoKGfYviyu/gBEFOQMeksIRkFT4zLpFdeL4fveRA7rjgWVqoj1O8\n1z7S5h5kaMSSGamzMT8huI4U7NzccDWyZ4KhmWgGQFXuOaRN2hmJAIKl/z09\n0LTMS7v96XzGjzL1G75j6iDNiR8I1BMyJAn4yTp4gMKq9MnH05jDdak3Alsk\nNRPD/lT0d0CEhMitt15oCtQrneAL/6RybwLSh8tqPoprpv67RK6cSuTgYxwS\n6Je+N+gD9+Z8Z/wjnkqTpnDXifyoS3iUiYlGN0mpK/wBkoqAEXIT0SJvT2J1\nhaz3flxKhWUiMP89habraJLtF5esrFnzn+uRHqubcCh55YpEiWq4inD4UvgW\nyaYePi1DoN7YH/P4tkYgurHsywgBdbBJr95A/Cm0WxfW2MjXfIRuzscn7iCa\nwADhfnXI5zKPgjzQO/ORhBaflW0doGgmtk5Gnd4T/z3dPpo4ewIvOjf9SEXR\ngo4obzzEtdPEpZ2U0/O5jR9JUoWro24SvdEOVvKkXag/ZHf+Tlg29nx5fnIn\n8+Pi\r\n=3Tdc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b52196498.0","@material/rtl":"12.0.0-canary.b52196498.0","@material/base":"12.0.0-canary.b52196498.0","@material/list":"12.0.0-canary.b52196498.0","@material/shape":"12.0.0-canary.b52196498.0","@material/theme":"12.0.0-canary.b52196498.0","@material/ripple":"12.0.0-canary.b52196498.0","@material/animation":"12.0.0-canary.b52196498.0","@material/elevation":"12.0.0-canary.b52196498.0","@material/typography":"12.0.0-canary.b52196498.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.b52196498.0_1618862352196_0.16097308687766376","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/drawer","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e56e23ffc0bbfe05f738aae3f33ea569cd68059a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.8ba3e298c.0.tgz","fileCount":48,"integrity":"sha512-bsi//1GjWRToKl+tX2X0JycCsT2dHPrD7EZ0dvT2IlTKhX63hMix1jsdvTywlLf2bOf2TD6wBbtfQtgjpcJvGg==","signatures":[{"sig":"MEUCIFGfy2rwlH3Vjxig/faXmHPToLeYX4TsCkihTM2BF9/4AiEAkz+KOKGaETsobwOE5IkW7SgXlhofMVh3sdVwbJ8xlMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDI6CRA9TVsSAnZWagAAztcQAJF08/u1h+ioX3PA8s0I\nAPzk2oOflhhq7Izo1imc30QDXtPU4N9evb6NST03R494bL0Pe/Mqi5jAI9dI\n3d9EDXRt8RmLmVaeGGyVAJL7GjRm5GxImTpKR65uLIFTh3qwmJ2zauq9nICW\nGOalq/4U1RaBUHr3VpHM7894M2wINl94LHfltjQqmdLtuhL6u/COsnD3hb+T\nRklda6fPCvB5MxSkdD9Q29nIgL5euNvsr6IiwQvay7KMWqzAnVFY33wefBRB\nLKC8GTpgR7mlUrOYjIDVGJLtwPTLJMdLx0yF5UGl0OMMveWmje/A5oikL44f\nxCo095DylLfVSGwWsVVveddvurW2ZjCWwy/E8Elx+Z0NfpsHgxAKOdYTpfVX\nE1M+TOZnVovtVxohKC+3jnY9ykpKgrcht5miDDCpduzUWuKP52qJTut/DnkL\nDT1H7APC2V/uWoIB08/vuJHgouqXyzELpqKOu94W4B+XbWngd2AgwUCRwLC1\nBEP6CYUaZlJGvG/tvOE51ldZg8BA9cxFzsb1IGsfTW/FWRZZmHns3F6iWxDB\n5fNxNgn1D10UehG8n3m/JUL3gu7FpZcEXRsOLs3cjW7XAk9X5cFvr7fme+Wk\naKDH3+uevp8UGvC9qdnfMhRIr9Qm4MIspclNiV13Gqs+oEHMA+xe6PJOvhPN\nSUmz\r\n=lXce\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ba3e298c.0","@material/rtl":"12.0.0-canary.8ba3e298c.0","@material/base":"12.0.0-canary.8ba3e298c.0","@material/list":"12.0.0-canary.8ba3e298c.0","@material/shape":"12.0.0-canary.8ba3e298c.0","@material/theme":"12.0.0-canary.8ba3e298c.0","@material/ripple":"12.0.0-canary.8ba3e298c.0","@material/animation":"12.0.0-canary.8ba3e298c.0","@material/elevation":"12.0.0-canary.8ba3e298c.0","@material/typography":"12.0.0-canary.8ba3e298c.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.8ba3e298c.0_1619014201865_0.7964558033802756","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/drawer","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.c629eab71.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc92f2a9ab646236d6a62cc6afad4538ff7f2ce2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.c629eab71.0.tgz","fileCount":48,"integrity":"sha512-q+SC3opyiiS8i+R5PjqEjYEMriIT+s0tNztQBCa3plIUVs6nr1NzXXlr6X7MVpPdsJCegU7LqVnhLARa4gqlMA==","signatures":[{"sig":"MEUCIA6JapPQKh+LC1C5JKfTopN25anW8mvCvZCzAwSFpjW2AiEA3ykBVu3i2Hikr7bFK/aWYkB4YgsZ7vHJVk/DznxlewU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIPqCRA9TVsSAnZWagAAA9oP/2nVaGIfhtrSzqOox2Fq\n5zu6k0s9GobaESl3jOsj5JitBmfnjaTZbWyOJfuXFHBDIPU2p/st3Y7Nqc5j\nEQ6vsRzJLMkHg12OASkZn1+WHu1pg8w/uEgvsmjQsR6pVTkSXoGhgx4YXOvW\nDaaJ6akv3ahaYCb+LgO2V6OoJYPjFSm/X5zCmUU7Bc8sBqF5PF/oae0tfAXL\n1X2BG6f3D+nMEHaAmVENVwYW/iCCwrrN2tS7tYvH+cG0QxAYLljHyW13IQaH\n7lyNZXooSejdnIJBU/JTqZIGKV5NJz1vhv4/MQnma0uBjHFMykPTcp0HJt1c\nsVUZkhIhM2WZMGFZy8Pyel/1AjonssEIEx5gj6FqlYMbqwtCIGCj3/c8QpYn\noMfWHImmmfpsqMRwrCOqZKX5l7qAQHisDgSyYKptz9xq/4NHWVr/xGXFFy48\nqOdHrY4MwvqpeC6StTvXLtNGuSyh5DkTAa4LlV8QsDU1x63zbG86KDNYRAdi\nu7g+b2nFvlumZLtf70yM6xhhamz5Wi17WLB17HlYtleiQ6F03NUxgBh/JlMB\nQFmoKTVLCHi5m/xz99brqdff+Fr+zzKhHM9RN8x2eVbB8Ac3+rPsuC/S0V73\nGJdO1QKHvFJ9wNjVl/fEF/IX3hbXknxEUw0A4tAEqhT2GOLrOWBf4emOqQQY\nspbi\r\n=eAjl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c629eab71.0","@material/rtl":"12.0.0-canary.c629eab71.0","@material/base":"12.0.0-canary.c629eab71.0","@material/list":"12.0.0-canary.c629eab71.0","@material/shape":"12.0.0-canary.c629eab71.0","@material/theme":"12.0.0-canary.c629eab71.0","@material/ripple":"12.0.0-canary.c629eab71.0","@material/animation":"12.0.0-canary.c629eab71.0","@material/elevation":"12.0.0-canary.c629eab71.0","@material/typography":"12.0.0-canary.c629eab71.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.c629eab71.0_1619035114045_0.3201559906821778","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/drawer","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ca05da3af333258199f0b004e3620c886f7c720","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.8ace3b810.0.tgz","fileCount":48,"integrity":"sha512-66Y5pl2dXWrE7z4nRu7wDFknee0opAN3dLZx0TS2eF2DKthWAb/1sZ/SWY5ScHLXVbx0YgXHAxjj9ASMPaX0bQ==","signatures":[{"sig":"MEUCIQCYJQrj1xBLMa7YuHLWsO8ML45pX4LeqpAyQ7K01J902gIgCEGOWLjl89aMV6eh3j0z30kRjdvemvp/OSGRG/o6iVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI1xCRA9TVsSAnZWagAAJhMQAJfO5LsmOT72+G5eYzrp\nKN+ibnANIP53zadQ1k7OaCf8XGj/6lsPZrjHC5/PHdoDJ1c37CX38jaIhl4B\nFKrY40lEjjvmqw3EeFGzZ64bi16pIjmeELHdR/o7IEz4sMcf8HXXgOPyWgDd\nrRCns7u7GuQIWLjz/zSM/hpzzJFjtPnYt6ZcxEkRf2UolT2QmwYXsrb2bDhH\nHROQR9S8BtKIlX4plbLU3JZUcwj8/DDJQTtGml7yBFNoxNjb4/szDOIwg89L\nhHwH+5MLADowk5B5War1cJq70bEMOKK/o66X7hcMXU6loKQqRqud8g/XSqYr\nmqAzxdOajOe7WgNc1oeuccFXj/k3420sKdPkGPEa0O0bM6dR6y/vFNhNGnZ9\nEJIH3DVQ7ErqsNqbil8gIhwJ6a+kGX7ynWbFsCIFbbbMEwDLcM/miAu2hd3n\nMpDbKhD5lDa39XMNM/Pq9G9k6g9p69GlGOrDzYWdNvIZ4PqUNfckv1LPbo03\nF0y2MsExcVy0KbYm5xfmG+dKMODlTt6fPijANSQNEBHavo0CFi3uzKPpHM6P\nUZclh4hwz9/9GjAx8scphyaCzV5ySnMGfYdRTmy7VwufMc/Sm7aFiuRCiIfv\naI/t3eaq0kfaDsfILK7xGeHl/1qA8MyhTqYIWTvEE4dgw6uOwFZ52B/gsdLq\nrWlr\r\n=5/Sb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ace3b810.0","@material/rtl":"12.0.0-canary.8ace3b810.0","@material/base":"12.0.0-canary.8ace3b810.0","@material/list":"12.0.0-canary.8ace3b810.0","@material/shape":"12.0.0-canary.8ace3b810.0","@material/theme":"12.0.0-canary.8ace3b810.0","@material/ripple":"12.0.0-canary.8ace3b810.0","@material/animation":"12.0.0-canary.8ace3b810.0","@material/elevation":"12.0.0-canary.8ace3b810.0","@material/typography":"12.0.0-canary.8ace3b810.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.8ace3b810.0_1619037552530_0.4976334089563643","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/drawer","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb6e37da90c24dba6ab075fd1d7b2e61c28a5da0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.70beaf42d.0.tgz","fileCount":48,"integrity":"sha512-8RRC31ZkxogxIQT6kdnEq0dQx1CHm1H+HvyugM+4yIZDD6Km2uJmEFpazQ3HxufP5wCfLYOzCw3w6AAcjvvDcg==","signatures":[{"sig":"MEYCIQCIke9fo84jLtxbzTBIULtaR3DGBRoubvfzI1kOMBnPyAIhAKWAN4KGnJCqp29kTc2xpVjvDi+Y+Fj0aEdLgZZnzb5P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggJAjCRA9TVsSAnZWagAAeC0P/AppnQE9ep3fV5nGXYon\ntJ2h+KTpv33fQn/35xCBi/1egWTehUdgB6JqAMEbub5Ivmwx8CV/QEYTT3XF\nEmXZZYxfGOdE/yB7olOIKtsU8RGG6heG0gQ/dsSUaloA2JVoij/DE3zFqL3D\nF2C5W5ve8mbUotKtrjqwI+KLfJiiP+kCQ3wo9lUEZtDxpDUcrFB1sVrNXfqt\nNEYvzHPGMdF0G/VTFEWlT7l5oZjpA3hktwNyVbR885i+HknCqNFf/YR/H2OO\n1idP75UjxM7TY3cUj9xulqHoh4rdEtt7HRfECMcXFNnT/EucEsQIsjhuLIdC\nGwIHd35iKs2S9/YbekjhweSWQynBiGmb3GFjiDwSbgl0cpEcH2JZAmToo+en\nY+Wo9EDLJtx7ySSOwlDOw9UrjjUxpLmZq2Y/+4eYASeLLRwKd5QxoZ3uIUWl\nwvXCud+D3n6Oits/xlDABbTTj7MsZvYO+CK+NeheJb4YKRhfmOiNtLO1Et5P\n4owKlbU9twGHokYWPG2SH1FFWwsgRKIQOmQaSy+FMorGQCQ+Skv6oc0IbEP/\npaQhgnVCdwB0bXoDYQ/KHP+2uR+qvYx7i9lqDKZsCJnxqiGJHe2/Zn8M4Vot\nFRUsFujvp2i+vAkjpKiyIZP7rU1Yz4BkqNFiTqz2m1j+8L4WCRIn8dIGkh3h\nUP1r\r\n=5CHm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70beaf42d.0","@material/rtl":"12.0.0-canary.70beaf42d.0","@material/base":"12.0.0-canary.70beaf42d.0","@material/list":"12.0.0-canary.70beaf42d.0","@material/shape":"12.0.0-canary.70beaf42d.0","@material/theme":"12.0.0-canary.70beaf42d.0","@material/ripple":"12.0.0-canary.70beaf42d.0","@material/animation":"12.0.0-canary.70beaf42d.0","@material/elevation":"12.0.0-canary.70beaf42d.0","@material/typography":"12.0.0-canary.70beaf42d.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.70beaf42d.0_1619038243215_0.22469139557334494","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/drawer","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.cad489689.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ef7205839fd9f602cc1e00abadb0726f760917b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.cad489689.0.tgz","fileCount":48,"integrity":"sha512-Wl0LPUd4m1NKIzc3dvc5IFFpLtQIMBLLAvHOAjQWa2PsmJF6kUhKHPp8uhOyyp/rtD/DJlKZEZjHErJMXpoYbw==","signatures":[{"sig":"MEUCIDYwgCnhfGAXwO+rJrxMnjK4he4eshn3OgQW8PKWZotEAiEA/1ZUfE0Y2yiZNj7h4VDZsFFNuOaloe8E784vOStuPuk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggal1CRA9TVsSAnZWagAAx1kP/j+daKT8ZaIfdjKSyKSd\nHyGBEuIEeqcWZhiXIsLhEWjCeFATCO9Rk7QrALJe5MtxXfR9dp0PNwewU9w5\nq1DNycBY4q9NXP6xlVZUBoAbs0VaWPxZ5r8P8g75ATF0W/EzhP/VYsD3RUp1\nkTbkCVaiWH3scXARLFdEobYqBzOjAw0ILxqYxMgXdZeEC/pbRmVGlB0hMRgd\nS52eKRNp+SNAgXNXDgPNH/Ss0tZlao2faPsb7+OOIurQqn65YuBA4Ca3euuT\nMWbzJoE8wuOzlgXMAvokgiXuZ0tmgfiKTEWTo+bfEdNLB7XxDys7QSBGgIYe\nWJwgfYDSAh8TZYFYcq6uIe3LBnmiHJLxcczwW4rrivW6NrElWeEwY7XZABDY\neZ3CKGNQ5CAlDCzvqsyzjucQDz6IqxV+72LplnRIJqjnDeya6vKuVjZCqTmu\nN8CF9m+yXg8gOWrryGttmSzy8Nnwh7ffbV+PkdUThONf5n2xtDU5kgj6rUtt\ntvHg18M6xEAeChGk/9lNppG9Dox41BFQ/XMs7tbtLXw5UOnXVm0VTqTjhWg9\nDt9PHTJmx1BBNroatmky0srKVE5DRTdzYdr0fm31WrVbcl9C6bTrwXw612PS\njTVMKgMbyO/ycQhw1rZyxB+aFj8SFzQvH95QldrgLEcz3TgVQaOyB4nauYIC\nXDwl\r\n=pw1Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cad489689.0","@material/rtl":"12.0.0-canary.cad489689.0","@material/base":"12.0.0-canary.cad489689.0","@material/list":"12.0.0-canary.cad489689.0","@material/shape":"12.0.0-canary.cad489689.0","@material/theme":"12.0.0-canary.cad489689.0","@material/ripple":"12.0.0-canary.cad489689.0","@material/animation":"12.0.0-canary.cad489689.0","@material/elevation":"12.0.0-canary.cad489689.0","@material/typography":"12.0.0-canary.cad489689.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.cad489689.0_1619110260612_0.23216513708807995","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/drawer","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.d928692b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f845358f3808cf5ecffa20cafbf3098d6b3d2784","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.d928692b5.0.tgz","fileCount":48,"integrity":"sha512-w5lLq7dD2jyvH/wCYMQmYZYR2hF7UY6npz1i51S5oKXK07KX+uRck8lYGJRVHmFGiYEuIpZGVypBM0SB9YHYvg==","signatures":[{"sig":"MEQCIH5IHZ6qQXy5uJlgC3IH0/a5og8kD3jGPN2iuKxVjutvAiBVERucyXSKRAEuEq2m0ghFAK/D0VltKARm6ku4W8ojYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwV9CRA9TVsSAnZWagAAm9gQAJ3cYzRGY+t/wxJhxWX3\niSMTeBioIPHbDT4J/YNjryBUDyWhOroGMmQRyzawKdGV15V0tX7eKmAuw0qp\n8RZX6qvtnDh1++3mLqRKmK12OBVOYTuwS7omOIM8kuocqPUefeAsOr2SnStB\nmtfRDWyDiTZS2Emj65in+U6PYgrMm5xfT8KQ8U5zC4JaAbykzI1NXk9KeA43\ndF547cCiVCObfYi71ZQ3sFB70tSjTZlEjWs6mrhFb7ys3jFPW/rwIio8fVZ9\nBe+cXKgFfyT5lfURnE9tmZJNrbbW8a9lHzQuVGJVrUL/Cp+HKrWHohI6Y5v0\nkX1jShXdJZNRL0L2WZYgNJyPUcpL9BDL6JnbHC8rPPDn9YiHg7SoJl2lUe4q\nVRbxZxscqiYjlY7j1wDI/I2kWe1d9A7nxvggSAyxdKNia2oHwrTqjS0LZxrb\nKGxoQisI3TU/YU7q+itvTbzBT0L4YM8oTu7Kc4RxBC2uBtFTYbj3Ef0mEGqn\nu2KhhyRXv0qttMdEWNILfWji22EKy/mZi9AGJqywRR92YvwQxVy/32yR6nqf\nbv5cr6rrpYt1F/p2n+bYM7bj8sPA4klZ0ENMQBKnswuddpfjEcblHYhga4dz\nLeNuhmqJwtmfIM4YQhfiJOnh2DMDyDjUz9ZBDpVV0yykDIST8Oybtp/e46RZ\ncuZF\r\n=A6ty\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d928692b5.0","@material/rtl":"12.0.0-canary.d928692b5.0","@material/base":"12.0.0-canary.d928692b5.0","@material/list":"12.0.0-canary.d928692b5.0","@material/shape":"12.0.0-canary.d928692b5.0","@material/theme":"12.0.0-canary.d928692b5.0","@material/ripple":"12.0.0-canary.d928692b5.0","@material/animation":"12.0.0-canary.d928692b5.0","@material/elevation":"12.0.0-canary.d928692b5.0","@material/typography":"12.0.0-canary.d928692b5.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.d928692b5.0_1619199356960_0.5144914974301205","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/drawer","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b599d7bcbfa6148468ad7d014be94c5a6613043","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.8f68de8f3.0.tgz","fileCount":48,"integrity":"sha512-XnTILLwPgNPbfwYyJ/lqy2XimC74Ake2wNyMSLt4WGMzcF90cwo/GtV+3TPFqKL+QvUXe2/le69yQRo6itOMOA==","signatures":[{"sig":"MEUCIFfhdgO/+h4kAVc3FVLa+IvwqcwVvdSsRBDCLdqNkWISAiEAzJMj6AsesEAD649t1pW8MTS+dMPF2bkHqeuxSqXNsSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw6OCRA9TVsSAnZWagAAeFwQAINd7e+bSfpjvSeWDXm5\nQ7PHoZ72gayBsUzZLF4OLw+9wW0U06Zqaopd72GyfuBSAPymM0cGms+XOe//\npbkx6yNbjKspeYP8+lSEklcEJk/kLGmbH61QEVqwZIi3R64OQphJ7WPQxu9k\npW2CNe5+5VwbZvrzcbxiVRX6J2bBO32sGcPqg+xYxThOxTgqxWpzeGzsHKUR\nNEC6kO8SThWVhJfkvBPlfcnaQz13nGPEXX9eoh30ey8JDJkXGL8UutwubQIQ\nolD+XD8m0MCmRQaUdsWNlRiWrkbwc4GlHMfWSZmzGLDEyDA/wA1SxSU/yhEv\nMM2EBhYcqv9qJXHolr786tmaAddMGa2/1z6ef1BdUVfJRp9XjjqX1DAH0zBY\njDdikgRkbYhMko2ppZpYxPpBDYwYUdJs07rZtkOUXS86oO8BiRpwSqmgvxJR\nktFwR3SiMaTmW+dgo79+j2iHm/9vhj1uy8yHnE4/PF1dN8chMPUUW8S9Dnog\njkry8LMjDe9zx9ocOY5DD1E97OiUnH9s5K40s/ekwv5bc90b2oEd0nDAhYAY\nsGB9HRtxnwtBwbIgKYzLXnTjgQAS6vHvvA4wyL61s4dFIhrpgAm5lUFwpkBl\n2mhxL8FV8aqGD8dxdX2mb01d7bC6BiNpEaYYoQEmcMCevxZ7s9xSN/EY4E/r\nCPSJ\r\n=4LAJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8f68de8f3.0","@material/rtl":"12.0.0-canary.8f68de8f3.0","@material/base":"12.0.0-canary.8f68de8f3.0","@material/list":"12.0.0-canary.8f68de8f3.0","@material/shape":"12.0.0-canary.8f68de8f3.0","@material/theme":"12.0.0-canary.8f68de8f3.0","@material/ripple":"12.0.0-canary.8f68de8f3.0","@material/animation":"12.0.0-canary.8f68de8f3.0","@material/elevation":"12.0.0-canary.8f68de8f3.0","@material/typography":"12.0.0-canary.8f68de8f3.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.8f68de8f3.0_1619201678394_0.7006703237971303","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/drawer","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.05753cf77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62dffb1208fe4022619457c6a6c316cac03bb032","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.05753cf77.0.tgz","fileCount":48,"integrity":"sha512-enGt3lBKKgLv0j4hw/y6Q+f3GM3nm0QJBDkcFWfO8ohn1LQBKBqNKE3qTe5bdnrrCfBvcu8rfRgvy+UTZZ2cGw==","signatures":[{"sig":"MEQCIAZPKJhfsNueNhAFDcfgFpCAMgngUG6Ue5+J8Q3VByScAiBlP3cHJ1VihVgweo0If8NnCPMpkzRtBYvJhUcYvr4WYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1veCRA9TVsSAnZWagAAPoAP/i13tOusvLhKwLr8YscR\nwUQMChxJOwfL89oTIrqcLwaCJGFONRuVnEBRXD+eZ0qlXYggTCvHYYvXG6Hs\nFBwN/jMNxrK+Osbw1r3OxbHq0ouGRd78Upu8L+tu1UQ+cb5dSLje7D8xt7Ay\nDt1S0x/wwet8jc4hmV1DgwFTNrtcK1ojqGwMradRlb8ZpMh7mYEUsx8aGWEM\n3G4UNJY0LV4qUgaER9Ns12iWoJcBqmt7T+aLvZWatvjTzH09+0H0lSUoHI0I\nZ9GXNfAEycXQtcpf2KxKG1AlhFpq/87usUCLVjgC/q0abVIyt6e4Ub49JL/v\njevfhNdzNpmZ+eZ4e+OjPM9mzMwM0ut6t2eb2cCmSooMzn/+Z6xo6+gIpoS3\nCIUWTKPL+jGcjLgAYBCyPlcnPQRnSsnuLwk8nPx/BVGpaTba+pD5RpxgMkAx\nQdIMTy6+u3nerPeA/J2IIAGyvkVGPGI//T8ojzxWzhWZuyE8ISLbIHbUOYu9\n6F1CCiu608+RNxuew+F++6QGBymC9Lqqj4SepxVJce4S7ozAqLcivSY3V4F0\nTzwhfGOn9825vPpZG1AJ20o+Kv/xz8XDYwWUwri8pkrsja4tOlm9AbxrPbCr\nSKhmUxD6YRbA8Mc/8hXXjLLY7UZSmMCoMaWdGXbViWsBtZOHag/6IOWY5n0y\ng5gX\r\n=Lmxc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.05753cf77.0","@material/rtl":"12.0.0-canary.05753cf77.0","@material/base":"12.0.0-canary.05753cf77.0","@material/list":"12.0.0-canary.05753cf77.0","@material/shape":"12.0.0-canary.05753cf77.0","@material/theme":"12.0.0-canary.05753cf77.0","@material/ripple":"12.0.0-canary.05753cf77.0","@material/animation":"12.0.0-canary.05753cf77.0","@material/elevation":"12.0.0-canary.05753cf77.0","@material/typography":"12.0.0-canary.05753cf77.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.05753cf77.0_1619221469668_0.7282423592261444","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/drawer","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0227ea698b23adf26f74a29deebcdabbf58df3b7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.ef43e6d96.0.tgz","fileCount":48,"integrity":"sha512-bD5eIpdy4qw9kJFTxsco/H/5vqeAxXmjNaPb9+ZwwgYqd/WpqnU0jrnFGYiy/A3vKGadJSra324/yiQgH7m6qw==","signatures":[{"sig":"MEUCIArTNrwx7EgCs+W0wyEu8UYlmqNmGz/ugUza0B1DwBTlAiEA5O17LP9vfYSjNPVjVZGirrsTFgvbyYY548JYeMYgQzQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg11eCRA9TVsSAnZWagAAhBYP/1exZAvuvbGYYZUIiSjW\nRuRxl+INKKZwnC5EG9A8Wz0PE+7MI4XhzXzYVorw/Rd7DHRxRjIdnpM3kc/P\nagPwksZQeXXO3izQIKOiEJWWuBmKCbYdes7kSFIA4g6rZB8n6QsP2Fv/ssLu\nQYrVrU5YitF3PDV9Q3zEgLb5L6+7mPEbZiaO2/hr1sb9BCnRY9CWm1hSmvNd\nxiTrOdVOEiCHQXiPr73tvqcXErDZEvdK54wh3SINfxxqAuSdT8djyZYH6eaz\nIt1UUKPdkq9+Hvm1aYmpHWJQYg6dZyKs9fsEIlQsohmD/HDisJX5mblrm+jF\n9RdVTY7pHg1bHGAK4M7C+GJm61zLonpdEccj2O6ISvV+Zy6W33AxO+J7+na+\n5t0SqAd6o9POAbc3ikj4z1v8DaA3hbMbLIiaMHGHWKQJUSNTCKVE+go1vJxN\nCb9JWD4zXSEkneBjGFNJ9KVTdPxcwBOAC+93MgSZVhtnSEIsdWWg51/x5Q+y\nzY8ylfXC4xVYE+wlyf35Q9XOA6dcFMSDSKFp37yIsn1E06Rembz4OAGmdzUS\nT4tQP1r8mISZMvrs20jsq9ydUnVt8q+bkDfRycJcOwtOY2WSw6JoDVIVBkAj\nHTnBG9/PxQVZJDoojD3qIcG0cnfJlo1RKcPe3oFMamsCeJLFUfQhPdzbSxpT\nWVzv\r\n=++H8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ef43e6d96.0","@material/rtl":"12.0.0-canary.ef43e6d96.0","@material/base":"12.0.0-canary.ef43e6d96.0","@material/list":"12.0.0-canary.ef43e6d96.0","@material/shape":"12.0.0-canary.ef43e6d96.0","@material/theme":"12.0.0-canary.ef43e6d96.0","@material/ripple":"12.0.0-canary.ef43e6d96.0","@material/animation":"12.0.0-canary.ef43e6d96.0","@material/elevation":"12.0.0-canary.ef43e6d96.0","@material/typography":"12.0.0-canary.ef43e6d96.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.ef43e6d96.0_1619221853954_0.8980585946970896","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/drawer","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d95e6242446b05463ab026a28a2e3d4b08a3fdf","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.197f64fa2.0.tgz","fileCount":48,"integrity":"sha512-a9aIgMc96HIUX4LU4qYILVzP3ixHM1/1XMMgrk+7yr4dnhxigDIpvsRPt09LlOUumVPwr88ifiYY2772olYuZg==","signatures":[{"sig":"MEQCIEDhXDGuOB/B7kbmOCkIF+07t42c1ZIO9rX/BCVPfIMqAiAkgo/slaUBMU6jx8J5k5gOYtBAFC17oBkYoWI22TjjAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvQ2CRA9TVsSAnZWagAA9RUP/AkuVh1U4c3kNXbbZM5o\nZOx/IGeNpPPmzwY46hAwFDc5Afa6N3JwzGP1dU8Qk+HlyV7Cvvr6Gr7mIOIj\nDxxA2yI2GOooaT4tPxxhOL1zATatMMa2WKh3nxw1fz3gEFVIUMyc+owhcE0p\nNnf2IgrIWQ9ZxOEQVPujR0fWdpIfehYYwoFIr+mdF7hwPs/QcGilX80yJFUf\nGvvYJfxNay7TjvUbGWxpt1qG8rokFc7vNQGXA+K4w/xgiPsI5BVS1BlhKhAD\nKj5+xTAuj3Ost18Awe+i0QmiDGU2Tlk5OQBq/4/W6Y5v+xFJ9x92EZQXG7Wl\n6RoxY5HoBbV8mQYGzJyz5z+Ymfkl3lf2KquYUIK0VbP24eAo8YJhzSVXcGIy\n5ji3jMWCWaFuIcX5Z1aaxVpuJlF0BEd+EYZ2lvmiVtXLIhfTbSsOJ05H6pvz\nboAwxCu/9QhiMqUeIDVq8j7tc+nh5AmOCnrclH9r8QkFh9cKVo4OePWyl8/0\ncid6/E24sIuydrzoW+5LJKRvwjAtj+pT1hmCckkmIqnaUr5Bp5a4ZFnApE6l\nq2LyaZnYuJgWTT7HikMxnf0J2NohdUxtXHyg0CJKVn/jy9zGksozAuOfzBhJ\ntSbjzIG+iPwdlEqg+7vSct6KSDjGhYmIBda06WydhsnH8HigWuKJwzC7ITbz\nJu0L\r\n=bCxf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.197f64fa2.0","@material/rtl":"12.0.0-canary.197f64fa2.0","@material/base":"12.0.0-canary.197f64fa2.0","@material/list":"12.0.0-canary.197f64fa2.0","@material/shape":"12.0.0-canary.197f64fa2.0","@material/theme":"12.0.0-canary.197f64fa2.0","@material/ripple":"12.0.0-canary.197f64fa2.0","@material/animation":"12.0.0-canary.197f64fa2.0","@material/elevation":"12.0.0-canary.197f64fa2.0","@material/typography":"12.0.0-canary.197f64fa2.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.197f64fa2.0_1619457077707_0.323963334118075","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/drawer","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fc8bbf0458567602ac1db8f8a9e44cebfe9b7f3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":48,"integrity":"sha512-QIfZvnGGzCyfZOkiR5gP52yrF5yyg6A4yaPJ0MBQKoDOm9KD3osS4nVbmfEXwz0rmgNYWn1atQ76UVrNutDrnQ==","signatures":[{"sig":"MEUCIQCUUH7q9y544l5vPqvuN4D1+VDS6MDwHM2xOvN1D8mXZwIgEFlxKPOWe8ehFnvr+8C9l6xHz/AQ4JAAINAE5Dm+ULY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":961430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2cLCRA9TVsSAnZWagAA2owP/jrTcwjuG8aYzjUI3d6Y\nEn7KmYK9yrn5plUyVfD1Qg1iP6EH1FqkzFvr18xCxZ0AcWW3KuedeW2fKdLg\ny20xtOREFR7oW/8BApQtUhvBfFWDA2NYIHZc0PFoLYV4oY/cTbpUcvoOJ+QM\nyo0PN1fKdeFFll3StZ49Hx29/2h7NR/sgajecFY5LDyCLPgnD+AOPbAjWl/9\nvB0di+6ReQdYtEFhaSRIF+yGOSSWz5EfefJWJ0mr73SeH0hFTxPXdrmCGJhE\niIL9RiIg2IJPQyEMixDTYeQQ4fdKYYL8Nk3Mm+fscK90LTKfHxoW30ahT6EI\nSVvCWXiQhGf/d+h/dga+cdGUC9vW/bYIfbhbND3ItzHez2HGNtCP7tphRzAK\nT86uxZkgStqXLztl4CyuTb//juBCfYJo3hgJI+qcAyxr2vudSX7jsoXmIYVS\nyVsy9poHpek++xvq7lo8uM1T2ptPGJcBUlDhiOVixskD2OuD1uch5UDDWU6n\nMVABaAEo30TEQGpIjR5IF3shLSiMuGvFKwLbNwsjHSvKPJs9cLRfWMH6goaa\nGUG80P3hCzAtGaVNP5CGZmcmoR+cfhpHW7VsUhEOZgl5rftCivAEjMZ3cFyB\nJJ6p11hIkVP2uHr09pKKTEcxoyMANsfl5LE3rHGsUBeYKv6SsWRcPsxhN+iU\n4AdR\r\n=N4/k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.55ad2d7d8.0","@material/rtl":"12.0.0-canary.55ad2d7d8.0","@material/base":"12.0.0-canary.55ad2d7d8.0","@material/list":"12.0.0-canary.55ad2d7d8.0","@material/shape":"12.0.0-canary.55ad2d7d8.0","@material/theme":"12.0.0-canary.55ad2d7d8.0","@material/ripple":"12.0.0-canary.55ad2d7d8.0","@material/animation":"12.0.0-canary.55ad2d7d8.0","@material/elevation":"12.0.0-canary.55ad2d7d8.0","@material/typography":"12.0.0-canary.55ad2d7d8.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.55ad2d7d8.0_1619486475422_0.21586264097860708","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/drawer","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a313a3a961f485bb8eddcd1458a9cbfc740dcfe2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.ec4ac5234.0.tgz","fileCount":48,"integrity":"sha512-+PReMYDh6HuS+OLAg1pYGX2lSXDr4JltL1qT9W6GxY00Ug7EIFkpo3tzglx3+9v/+iMiRqqqRRb9FZ82Gs8Geg==","signatures":[{"sig":"MEYCIQDw2BglcZlEK42UyJ2Rac0bX6a+0SpTJ+52U3CXJtkV8wIhAIRSzjSNnPhsmdks/eJdkyCIquTK5xz4h+2to09p9XR8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8R/CRA9TVsSAnZWagAAB74P/2rNGjYfbF5+8g9e59Bb\n10DotSn1RfVDIzCg/lNHcEpUytAiKVpTfHPkT+8YgVbiuSjjpRfHlVAbPs1P\n3TSQoTm9Fa3DEGk369PA5958DnX4o+nr+eLlWsG8b7GPvnmhvDclEN+b/ObK\nvw9MFoqEn4NJYpLJAB7sJKeTne7PEiEJd6dy2b+5xLCNAKUFHlY4YUOxYINk\nYj0dQq6RSQ8uOlN0dZLDtuWO3pmcos3B3dAbnMLC1aVW7oFKGWZjDUlQVkUq\nAxmb6FYKZ8JTsW/zAmZpVpT4oLET+viJh7f/bSkPOALJpLvxf8eoy4VpftQq\nQN5A1sUT/51+XCm3TAk5q/oIPPukkrzrjtcS37lF1xnCW/Cob2gy8olguH30\nDPT06e5MdQDhdWHac/ZeRYmG7RElouJfInkAev2KzTPt3bXV2OLC5L+gOX97\nWkW+oWqOveBg0JeFZ5d2t796WcjBLVMwy+jxdjD7F5X21gZeB+c2qlJQlUhh\n9HhCZ+Wtpmf2BidB4OE4r9V66mCoIuFP+v21iqkyB5xwqdl4nj/vQv2LhH4r\n9wv8Le7pSKfwIKYlXbupI2xFSu5fcdStu7pFboTMacc4Hl84FFVXQAi2/4Nd\nN0xkZT7V4YnfjXiqeiDGpgKElkEgAaxVHb8Wk4Fjx1hLMmOkeGUOOAt3jujP\nBsUz\r\n=KDDc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec4ac5234.0","@material/rtl":"12.0.0-canary.ec4ac5234.0","@material/base":"12.0.0-canary.ec4ac5234.0","@material/list":"12.0.0-canary.ec4ac5234.0","@material/shape":"12.0.0-canary.ec4ac5234.0","@material/theme":"12.0.0-canary.ec4ac5234.0","@material/ripple":"12.0.0-canary.ec4ac5234.0","@material/animation":"12.0.0-canary.ec4ac5234.0","@material/elevation":"12.0.0-canary.ec4ac5234.0","@material/typography":"12.0.0-canary.ec4ac5234.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.ec4ac5234.0_1619510399272_0.8431489083439492","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/drawer","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c4c06acd37f67b1c7b0ebf3a91500d4ba1510ea","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.b0579acdb.0.tgz","fileCount":48,"integrity":"sha512-lOrL5E3XhDqLR4emaR1IWE8N9PqQTDrb6ASfj0HjTLeqVWrPmyYyKXsUSJ2He9Mt9KjsrbTSKfy5A/z6a28F8g==","signatures":[{"sig":"MEYCIQDe6fVNBAGVKj5GmIsWsdcNAN+nm85wBXp8Mb6OnFyXmwIhANAqSofWp1wa4+YsDeLo4FsaTlRSwcQIMSKpZMdI9WyJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh81jCRA9TVsSAnZWagAAgbAP/iqrfhaj8K+GcJBsYPB0\nWXclh2kvO7MB8NWhvs4WOaa1QJ8CsQRu51Nvt1BjtpcJZglu/TI6bNEdjiMn\nBibdYY22776B0OensnEmjCBXjTT+m/i+lVuS3HqY5y97GC0a78WQR+sRUtMY\nRiO/Mkuu3KKwBzPi5wnOYw84CrI7kz/XPe0nDYJAddbaWvWhaVC/I4Xl0o1D\n/tHHLDwybtf+Gv4tQBwTvJgQx/tFT2o4HJFyCuZM/ObshxH4PLSkTizqIplU\nBQ5up661QhalU/2gRD7mKrm0d2jkZRNqfyh6Arcobyjoxoq5Au7w7AuKzWzm\nf2jnbcYr51pvTuKUWFqtZAMSf1Bd03V6/btXOoNoapu8MKxJpxuN7HOP7rBt\nFzgo5LMK8ZA4BMvlgCjiNBwr1JSC8W96LubeaK7FDcw8NqaP518sRihItih6\nhxhl/UFr6viVA6TX38waN24CUm/itZ8P6BwV1Lhf6V4KOhMVu+NwkonLuf8M\nKAC+5Lfl9lm8A2GJk0BLY8/vSimv6r55FTNJG0VrE6sLoQK3usWUWxoYVAfj\nw3Fd303Jrpn8djt6Wct7JRemxgXZm+oi0eDZKcOWfty85UeXJTeq7Uy30f1P\nH8mU38sHMI+6rsntyCto/IYivawdGgBgs5rLDhdW4ovuRXtzIfUXGR65CI4I\nvO8S\r\n=k5Qj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b0579acdb.0","@material/rtl":"12.0.0-canary.b0579acdb.0","@material/base":"12.0.0-canary.b0579acdb.0","@material/list":"12.0.0-canary.b0579acdb.0","@material/shape":"12.0.0-canary.b0579acdb.0","@material/theme":"12.0.0-canary.b0579acdb.0","@material/ripple":"12.0.0-canary.b0579acdb.0","@material/animation":"12.0.0-canary.b0579acdb.0","@material/elevation":"12.0.0-canary.b0579acdb.0","@material/typography":"12.0.0-canary.b0579acdb.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.b0579acdb.0_1619512674978_0.14354168847325544","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/drawer","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0863930075b05f2f7e2976016134b24f34dc1017","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":48,"integrity":"sha512-oqt4cg7Wqs3SIu6XT3gu6IGc6HgP8DwAfL70e6BwmPScsp/5cLj2IVAqe0W8hwqCNhzwHllEjgzRglWZ8/s+5A==","signatures":[{"sig":"MEQCICFdA713tU8dnAvaBHxBjVO3wt6co5rG3Pf9PfRLxW1kAiBTeBbydIjR/O1TXg+DHVEMt3wIY1rAQoWua68A2rLOwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHsrCRA9TVsSAnZWagAAtc4P+QDgYYFuLLdpKQf2rU2k\nht/D5rv42sI6itmi/XLioWqJDWvKrCJuS0BpAxz233Gm7+dbqN95eoAdYLfM\nt/pjm/cqIfXN0pDBsD9JDboZsjsGIZAhPU/HccSi+IRdkE5x9Vm5NMAomdXc\nAh8bGp750E8/SsY2VCz8SR+UIyXYA7GSHR/WXSlXMuuxLwwxd0s+owA9UWj6\nK6Wf+7mnhN7fT5XyLPw4KNeueSNDkyl7lzU3U/5dYNAI0qxa9oQunB5r44xq\n0h+j0aBzqJd71159MMbY7zxEqnuPtfCEPqZjjk9uF9a+GMttapliLTG4GQED\njYDAp8stVltndxWOILouXZrHort1EislQX4Xo7fwCh8IzyiuMvzdpCCxVr7R\ntkcQnkLJC9crmct0EPC48NNRUxzY3kypizAC8cpGuK86MCZQ24wGn9HxBrOL\nhiOEGUzD80K+MSv8Oziexma/R1h5mAfzOOO22ozbiqvBTk144i5wy6Z8jMrZ\n9XNZ8H4k1GxkEVrIEmm3fGgVwOU41VBKjtng8/hzol3tji9O2J5akWxbGSBr\ni/KqRzkr/A6OTBfjDBqhoxAH8T7VAy/sZIGoKaaW0EzFv0VsNmpSoj6XAs5x\nFGWR6alIKcysKfmZYH/M1hw2azRfID24yMYMBLbd7cOq0BjOd4f29DYT20wJ\n97si\r\n=7tX9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.81e2d4ff3.0","@material/rtl":"12.0.0-canary.81e2d4ff3.0","@material/base":"12.0.0-canary.81e2d4ff3.0","@material/list":"12.0.0-canary.81e2d4ff3.0","@material/shape":"12.0.0-canary.81e2d4ff3.0","@material/theme":"12.0.0-canary.81e2d4ff3.0","@material/ripple":"12.0.0-canary.81e2d4ff3.0","@material/animation":"12.0.0-canary.81e2d4ff3.0","@material/elevation":"12.0.0-canary.81e2d4ff3.0","@material/typography":"12.0.0-canary.81e2d4ff3.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.81e2d4ff3.0_1619557162575_0.9111519779195201","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/drawer","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a074cd0d3c293ea020ae694c58ee68bf440e6053","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.c8edee52c.0.tgz","fileCount":48,"integrity":"sha512-FVzJ+D2vvZEODz6a8Jr+GG1UHz9Z8LwCU2c9nCfJMM1sL4RmdWUKJOwIRzeYLU8hEnmvfUlPtcVEj3KgomzAqw==","signatures":[{"sig":"MEUCIQDZ7+i+TgskzyObKtp9o41wLX0iNekFyvXkn5xBAEVVpQIgcMm/YHx0Gkbxkkp3t9TtBJx6AkTvoveE4kCZL6zJ5zE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIZ3CRA9TVsSAnZWagAAptQQAKDTAh4Dc9J1ddDr/f6G\n5MEQ9sENi/2RHw3erklWBgZRkZWWe0Bw92lDVxwksrG4gCghtje982bsohOo\nisr1gI+G4JtbngYjlGm++7DrBnwFeB+FKIpg+gcr0jt4sNjjtJkNN412MLMD\njfcgt45Nq87216wuJtQtEjbvUjWh3dlSYffdfbayX5hEYkiSl3SXBiCon7ci\npPe6sRq2SmRcIg+ozUnC2AX2cb7ica9wkSYEu6z+4F6SlvT0YKtyQrfaJwwi\njdV9yBbwegtMjm3IYqpRTMvNmlVYYW1ifQhb5nzTneWHdELj4OcFy3MDfl3B\nCNA7A7nwsC75MzmXp0lofSoROzCZV/DZHtLFoEdEVU90MiO7zbw7ffTXuMw+\nymYVqwmZMH0vQVBqDiPCJJxxKV85JfQh9PKGkN8cm+kY52Ge2kEkTaDAE1H3\nJOdhzuJLiERveq3An78+2t2YptxUEDYoREFSgKTs9xGOJw3oMK94QRoAQWXU\nrUrNNC1nBXbSlX2aXLifttiBtwHRrDLMNi3NlVQXUZWKO7nf+LctVdLPdaFb\nzY5E/ghN5utskXInJSJpBgLls2BE4JCPi2XOdXMUJPY6VI72LrvalK6rilpJ\nzccjBDrJiT08EpgdAXVanOwpx+nSzuflVqY/aH7BdPc86pJX7w2EdAWmNuPz\n/RIX\r\n=03Pl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c8edee52c.0","@material/rtl":"12.0.0-canary.c8edee52c.0","@material/base":"12.0.0-canary.c8edee52c.0","@material/list":"12.0.0-canary.c8edee52c.0","@material/shape":"12.0.0-canary.c8edee52c.0","@material/theme":"12.0.0-canary.c8edee52c.0","@material/ripple":"12.0.0-canary.c8edee52c.0","@material/animation":"12.0.0-canary.c8edee52c.0","@material/elevation":"12.0.0-canary.c8edee52c.0","@material/typography":"12.0.0-canary.c8edee52c.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.c8edee52c.0_1619560055395_0.35309770901436544","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/drawer","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"138ad31bc3a304f44227b85dd5b73c3d27c98827","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.f5b6110d6.0.tgz","fileCount":48,"integrity":"sha512-vEPzGcADK9OR6VuF3UmzS679kivd8vvVp7fzqqV6X1T6I8p3++dLNQAir7xY3jDyCvbNAWX1WOQQMYbifJlL7A==","signatures":[{"sig":"MEQCIFncrErsWwO3fF29vA1HOan/Rj223E4P6PcZYn3z/J/cAiAqEEwfftw5EKcU7tAtgtTMaZWf822HLyfmlWtM865usA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIt0CRA9TVsSAnZWagAAFrwP/ilBoS6Rb93l39mPOKJP\nQqwrcNMTCyKXuR35SaTLX/LAOjMW0gNcZxJYcr3Fqd9udI9AQg6bMZJx5f9W\nP7naxmL9WFHUlCvnOgz9CQFFaKxqaeZ3321nBzQL9HrUMzYD3o3yKMySuESg\nQjni/Gzu3sqGaYaQGlGO0k2q9ZED69yKLWvcxyMJ//NYenRuZmu3q/+bIjut\nbtbVd03Ki8RHP44QiqV/SgeqPbv1ijjt3vlEHmG90DgwPwNkcayszxiZWOTt\nfnMAX1G2dBj6yrYUGF/sbnLa/ae0cZkXqdYw3f5erJM8AYCFArbAjnfaHkQr\nxGLChSYeoKTc8RfFaxXJNVgvADnKYX3QckVE+DHxPeRmWl/rgLS4oyXQWOT6\nuvkUl9ckukZTpWnzYmjUWx/korNDghnKv/T86lfmaLhcYJDGQa9E9PXWqS0J\nFck1rD7gGsBcjLVMHvUoQBlKpXEYF24TZEKvPza9fKtEqPv8sHSsrAKemF6J\ngMto9G5cy8vMX28da9CWt0J3OPerivVoiJLA/cr79dO+RvXiIkS7aLNSVE8J\nqn9UviLIwDx+SKWyheT/xOKP63KAWzn2+N38zpKflf9dLjZo8HnyeA+PikKD\nbrCXbWhH8zGYhCeR/B3NVcLzGV25m0/2W5JQwDOXbv0mVpX6DJoSVlFUfPBv\ntWkt\r\n=fwDt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5b6110d6.0","@material/rtl":"12.0.0-canary.f5b6110d6.0","@material/base":"12.0.0-canary.f5b6110d6.0","@material/list":"12.0.0-canary.f5b6110d6.0","@material/shape":"12.0.0-canary.f5b6110d6.0","@material/theme":"12.0.0-canary.f5b6110d6.0","@material/ripple":"12.0.0-canary.f5b6110d6.0","@material/animation":"12.0.0-canary.f5b6110d6.0","@material/elevation":"12.0.0-canary.f5b6110d6.0","@material/typography":"12.0.0-canary.f5b6110d6.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.f5b6110d6.0_1619561332096_0.26205477703746816","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/drawer","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83306752058ea0496192634922a60dc2a9641da5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.cee9b9e22.0.tgz","fileCount":48,"integrity":"sha512-lGOCcfrOE4blq5PJ/YizvWoyibStA7ory2DHQqv8Y6rwidi22pHmR1JYMAx3YHWCESyTZCAlXoQvelFTj4h3GQ==","signatures":[{"sig":"MEUCIQDZsVsBTqouTpJ4DzyRjGVUSFuy2DgCKBHaUYjm9hEBywIgfOQ0ND3gyDvUDVIGGbmThVwNzQVOsWjz6kwyaNowQ0k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKjjCRA9TVsSAnZWagAAj6YP/3YDnIG21Sk9RbBRUbcn\n6zZpnF3UmQO0J07lb0Dh+alBecZZri78ttpXu9VixUO65NJGhbXjaeGy35e3\nG+ZAiNSFQnvTGRUwzpbj5zpAeFjZhaGJZS+Swh0CH7QoviTFksQrlPvfxRHb\nXLQLn4QiTKCgtiLHkb1RcVynrfnCAEYo0WHPBhFvj/VMyahPyrgy8sHJLgT0\n1Q8R+dV+XiOJzl+bigZlvTMZrs2qmIOFxOAIqba6KQJxTUGdqOLAP9w/dDCg\nMDDAMHgf8dkR3yx9/bEmYCWRK0GxshdAEXjuY2vj/VHSjfytw8nQU01EQURs\nXy2y5m6HUByes8FdFxFAUS03OT6cIB8fxD97reG/LY5bZg8wYecdCkZBUJPS\nSu3D47KrUE4BhQzrCzedUpQWCXdTUyArdNIOv2ZbaLQExUMZIxbYIepV/kU/\nj7/NwldyFyZ6HtzpDZ9VrgfSYJwrPFAKRoLRVV3kRNmTwsIipVzUCLhT4Woe\njQiMV1U3V6SqMFjga3OSjC9iRH6fdrKrVz+zC1ZeO0d7IG4SUqaypc+JFibl\nUiY+ZCZbwRA40BrqNdgLKmAOhTmfIQzmuxnHHW0TQ5kfx7zm0fuObzIw37bk\nyfYl4G985BOU09ES8cQjddJzgPLsEEgSrxSy37yYwLiNz2cW3+7g1r1E7wo6\nUTdM\r\n=b5Uk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cee9b9e22.0","@material/rtl":"12.0.0-canary.cee9b9e22.0","@material/base":"12.0.0-canary.cee9b9e22.0","@material/list":"12.0.0-canary.cee9b9e22.0","@material/shape":"12.0.0-canary.cee9b9e22.0","@material/theme":"12.0.0-canary.cee9b9e22.0","@material/ripple":"12.0.0-canary.cee9b9e22.0","@material/animation":"12.0.0-canary.cee9b9e22.0","@material/elevation":"12.0.0-canary.cee9b9e22.0","@material/typography":"12.0.0-canary.cee9b9e22.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.cee9b9e22.0_1619568867419_0.11757162056453718","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/drawer","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"687160e6d4a2d7e4734798d758062325b018d2b1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.96e83fca7.0.tgz","fileCount":48,"integrity":"sha512-dWYwlnal8zAh0jCklkpeR83cCyxDAnRLT5ai5Mzx81Cy55qwC15bpoqszhAhrQnvoFNjo/9ZOwmrcwMS04mVXQ==","signatures":[{"sig":"MEUCIEKDPz/q+NezJ7qFHEUwSCiHNzVTKynCZ0ApjsXXlAn2AiEAymnsBc8yEbc62oHmid4HSJxcrU20R07+SBMVst6cz8o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiM0uCRA9TVsSAnZWagAAGQwQAIQuunIZ2ZjaOsHSiGHw\nC7rx9HW+wN0YWVvbkr7E3OjllUdubcFJRdMmwom6w9rZd/sLbqNj3HBR3qxr\nvUXZuoECqpwqoBudlaa9P2DmegPVup0ebMPX5qMas+daI9jhKIluVPwMNmJM\nFDlnpdHpxVrdw5r4/UcThUpTrUqmhPrSfAvw0kLx4sZtKDHsQVwsVzJUjK1/\n8JviqdlQmqUWK8whMMDP7xiwqYVMTlrdnicmCkjP0oMaBuDVhqqChCaapC7U\nYdMidlNzzNRpTZry9Voy3Qn3t5BW6ovKNzushIoT/KBywjYJwNcExsjCAKhq\nzB2PbHDz3dUIBpXen4JcUNHNIXOHTZzfYFHsMuXNyZ+ET/JRi8Zzzpvb1NrL\nDoPjqEIW6tNtlUziHZXFA51ZRmv5ebqrJek8pqwtu6sXcQRhsFHU2RojmgSC\nKFMv00gxGZUdehhGn0Wh9utEFN0Oswiy4zDALtxILgWxdB6GhuDpobwGrzna\neSKKANaR1xqk9+PLa1Zz26qZFy8ZM21LRkLmkw6NepylFq4HHhCqXPoZdhRd\n3ctjVCK+1ArC8AsAY0D4J2mj6bY0UHpzC6/5ied/oKjFhyPw5yo17Ph2fy6H\nKuhfZ3PXOd6X9p2b+1RYgS4Om8Hogm+SPppHB+uY+ApHYFXAMu2J7Xf2B8H9\nhlk2\r\n=K2yZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.96e83fca7.0","@material/rtl":"12.0.0-canary.96e83fca7.0","@material/base":"12.0.0-canary.96e83fca7.0","@material/list":"12.0.0-canary.96e83fca7.0","@material/shape":"12.0.0-canary.96e83fca7.0","@material/theme":"12.0.0-canary.96e83fca7.0","@material/ripple":"12.0.0-canary.96e83fca7.0","@material/animation":"12.0.0-canary.96e83fca7.0","@material/elevation":"12.0.0-canary.96e83fca7.0","@material/typography":"12.0.0-canary.96e83fca7.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.96e83fca7.0_1619578157650_0.9200981829165822","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/drawer","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"113595b614cd05a972e3322e312890e6fdc78544","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.4c497bd19.0.tgz","fileCount":48,"integrity":"sha512-mRMLxXwTJQoPwQTazJwU0QP/i/fngjRK0sADBYLjs9UNQ2GI3uJn9U1+X/+eXKvMtne/jU98ObSY6DNEnqQjqA==","signatures":[{"sig":"MEYCIQDvexkpX7VUHFYozmVZBwG6zh0H/I+0vxKFPDfAuO+KxwIhANVw6BeZk7QwdZ23DGNU83hlxgBW8ykv9xVh9lWag9h8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaF5CRA9TVsSAnZWagAAs1gP/jR5BNLzwwk0ImrY+VF0\nzLItnqKUse3sKMgbJ8mm2r0kf76ZFOL59PNWdUyxCnoJPXU8G73RK8uSZGPk\nBVCYYhV3cW3m2ADVnwYtJEmWZIWCJlSJ8HaROLeI/+8FbPXkYRGi2/lTTiYy\nwTL+OKYN77bRDSESWWZbqqGfZTH+RuI4bpVCIWAxr9xlK3YAGkgZRcK/teVd\nuMwJ7LuayzAhP35x9bB/i7mA8fEJL+y3mbbnfhjFveJ66LXm/9aFCQCUWlhQ\n6rOflr7rfVhqXl/NhQ4e4clgjHZVqskUhDPvVoKfdwOZc819eI+wNjyBjvsb\nbhpsqIxiY92wkH0yfQGggQIqsSM7Nt7N9i/M1y7U7MqN+hkt3IJ2kkKyLrbG\n0kjP+S2S8phvssy6P2lIGRQQ8bBW6rA9fbqJSC3rfc1m/nAYo/i1PJTVvPLM\nP1iEMfIZQTiLJ6tf1h20AzIcQ5g8NElTylIZUjqR+TltUwLR7AoFs8NzvmuW\nDTKRJiqxB51Le/R/DVZ/oKI4ybs+HoD3oe7DlcyeD91KfX0cRJPRdvQJuoSq\nLuXEKKyxLs2r+auqSiuBBoSwQIoafD47Vy94793If9urfNMjqjrwl4Ml9OWK\nKGIkuvPTC64LdMUF3Whht5OS/OHErSACxgtQhnS4YA3BYUTPNCo8TqaXJmoi\nyLtm\r\n=RBgd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c497bd19.0","@material/rtl":"12.0.0-canary.4c497bd19.0","@material/base":"12.0.0-canary.4c497bd19.0","@material/list":"12.0.0-canary.4c497bd19.0","@material/shape":"12.0.0-canary.4c497bd19.0","@material/theme":"12.0.0-canary.4c497bd19.0","@material/ripple":"12.0.0-canary.4c497bd19.0","@material/animation":"12.0.0-canary.4c497bd19.0","@material/elevation":"12.0.0-canary.4c497bd19.0","@material/typography":"12.0.0-canary.4c497bd19.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.4c497bd19.0_1619632504764_0.8011527050641984","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/drawer","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.105b15b96.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3cd15d3d3c24f5c3d0fb2d4ad090686ecf0ed32","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.105b15b96.0.tgz","fileCount":48,"integrity":"sha512-99gLDmtm264S6hZRBe/KWEh51/OEwCYKt1dCJPFrZOwfaiNm/kAEcy0KjFgE3iy2Y4LolnWEKKCy9I6dGp1b5A==","signatures":[{"sig":"MEYCIQCwNCXCyHRcFMJw0Tm+kNQwdGLMyc1hgBnWo2wf0oQ+MAIhAJUMVH/z7KLlzDtp3xUOneCSKWztZIE8C8CxZdiZsH3z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidelCRA9TVsSAnZWagAAPEcP/Rc7/kfzYGUiTvKOLjPS\n7Mm8Yh3NjrBP7VUcefLlQc+G/uUyCslX8uoNb+LQFKl9Gd314ekRCNVu1Gbr\nZZ9meqX5DLWCT15eEWv+4vwfjs9a5Sj0exBSXAZ0SlY7I+seDD3Ht0K92oQ+\nqwMJ3bBFK101H3Gwo0jzQd8nB8PxVqHBzJMgIqzxMRcQhtHe1kanTgYewMIN\nTgf13KsdTUlsQt0IOR+UkRrTs3/NhE+hmpupbA0eNYfaMQlbvpwj4cZJCeLt\nF+18S7D23MHkFKndAliTyim4Rt34wYgQKXF1jT3IRFotJpkO72UjI/2jg/RN\nqxpYycdL+3T3byHaswaU1VE5rX/dIbmXnCespQMiqvWe5O41/JXdcPI5uIg7\nMyN3C2mcYPMTCutUSEkdTe8nXDRaHfxihBHQvyslMAX0HD0M9vVZwMjQCblo\nlafpjdn4y638aUUMG02qfw+Q06UTlceJenXqPT21Pw+pABzKySAsuSNrvLdz\n9UzMVOtJ4dLKJ9D2h0+5q58dApIE6TWWzwlJZq67DdJ4O1xJOooZ53MV4TZ7\nYtfL6tsZCtjQLvvv9wdrTvS+GNidViLDGeNvwKmclPCdPSSR6125YqnnN7aC\nMlSusCTDhBp1I/N+CAoc2i8DbTYlhypxKdtugjf4/UjLNWq6yJJ7QGbL/Tcp\n+L6V\r\n=bvTr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.105b15b96.0","@material/rtl":"12.0.0-canary.105b15b96.0","@material/base":"12.0.0-canary.105b15b96.0","@material/list":"12.0.0-canary.105b15b96.0","@material/shape":"12.0.0-canary.105b15b96.0","@material/theme":"12.0.0-canary.105b15b96.0","@material/ripple":"12.0.0-canary.105b15b96.0","@material/animation":"12.0.0-canary.105b15b96.0","@material/elevation":"12.0.0-canary.105b15b96.0","@material/typography":"12.0.0-canary.105b15b96.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.105b15b96.0_1619646373517_0.7690913148498337","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/drawer","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d3eda0a836c841eb17966cc99855afc81d567b1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.6e20259e3.0.tgz","fileCount":48,"integrity":"sha512-nIwDFy3cXb34zT7frXdqGWGnIRcjTbJUQgaT0LVC/Z3azEz0NsxOwi7NS9e3EbpKtDue2ITDIiToUn6F+l2hcg==","signatures":[{"sig":"MEQCIAw1G4/ffzkuSCy8JLSSa8SlIynB7fYNHezyYvzUzBpKAiAbch721GbEoME8csaXWO4JHSufIYUvOJVcKCH8xzGImg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidiyCRA9TVsSAnZWagAAxEYP/jftliBq+fEiqkIDRr+J\nd+XZ7sA2AxgYPEptiBzB/4yiVIBegahaDJtV86SEq6mmEyHc8URNaIHpIdwX\nI27t97vLoAgPAA4+KPB7/5ZXrOUEufUMEHuD9D0HVU05eAzpJsIpli2U9i8v\nMWxFmOtxAMjgXE1j5x2qXm62ECmaSunsU1dfz8UgVhd7qpDH6IRPmlshqMKl\nXtBc9BDZJYkSaXVPHdTiFBjwttUEQ0Xee3akaTMTGomyeSdt+j+GbVfGKt9s\njtk1u98TlL7LLTWLryEH/ELIlgaDljhLo7anUX04nRvogNhbza0Zq9howOOk\nP2w7jCkzM9K3UAflxuQlihbwKk7kOgQXaaTel/iS5rwGOeMiJc76xQgP7gOJ\nI7bkvoD+UWMZxPtwPoTIfA+bX21EYc4xoW7ae7vjnWqPPj/mGQYsyiB0C1o2\n2+Ab1+JEcWIngG9rxkKVHiOeoT2BMK6iGBdOcMMGwIdCpG8szUaAxNIe01qR\ntHl0DbDDyR/VebO6pO6WiKft2HhYQKnHw6Y4BmL7jtu6BMWs3aGUcE0A+iBB\ntEwsWEcjr7qtjjfE8QWxdyoo0qwhCVoTwdNyy1X7bwYqWTK8JvWqdv+1oxY0\n4GOcDl7XuWedfq4Wf9PHfeTuI/6vqVkuJFjAnT8FzsGwxdiVk0KCdSn4neW6\nPf0p\r\n=Mcpc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6e20259e3.0","@material/rtl":"12.0.0-canary.6e20259e3.0","@material/base":"12.0.0-canary.6e20259e3.0","@material/list":"12.0.0-canary.6e20259e3.0","@material/shape":"12.0.0-canary.6e20259e3.0","@material/theme":"12.0.0-canary.6e20259e3.0","@material/ripple":"12.0.0-canary.6e20259e3.0","@material/animation":"12.0.0-canary.6e20259e3.0","@material/elevation":"12.0.0-canary.6e20259e3.0","@material/typography":"12.0.0-canary.6e20259e3.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.6e20259e3.0_1619646642079_0.1478900818982425","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/drawer","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e74e6a2f5ffcbe32a84e05e1d68a4aa9a3494d11","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.0f79a5d74.0.tgz","fileCount":48,"integrity":"sha512-SVFrk7qAMeOaO8GHFJBiEY46z4kFn3+fjJC6o/21sQLJZOlo1XAtH1TmX+EP0k2/QxGcP4FD3nhosg6Y3D+eiw==","signatures":[{"sig":"MEQCIBUxMHMiZRQL8VvXK6yDXzV3E3tzu6PTf3iYtNYuJklqAiAUBbY7ZdIN1ir/hlvMJJ7Y8a3xXK4jRQD5/PaadtT63Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieVNCRA9TVsSAnZWagAAuFAP/2hCKtZiWV9evDdGopkw\nXWNHp2Q2qlJZgZ18/kV4kj2aLkxZTmCPEf30ulAoF/LRfziualNtpvsZwdHH\nce3uy9LCsTffnW7SX8lgxJQHy8/pjZi14Lj9SMX1c0lqrGmSJwYo+ZPq7SuP\nvVNuAYQ/jw+bsxV2Whkcs6fpkb+f9Btn0fWit72HxrVoKtyhnOnypmwUIWWD\nn9ucBhD/rQ/Lp12tGOTXrLyPnM6ahkAnuthh36gSKI4M5m3z2/zTWEfK0j2Q\nN78u5SJBojtl5GKWBBsRtjcYcASD/IT2iFwhzlytvPymVEZWIj+P6ye2wQiI\nAxvIuIsqtvfAy89M6rCv1DgczBDXrOpbe6VMWCGGmiIuDBbmrxmHzJlnsf2x\nz77r8a1t80JLwmLWFSHCuCLM8pkKMgNSbtRVsauGYcdSgOcoQVZckbQdvbsY\nCU7PO9Q78ITLM1sMjoS8ui7STQ4kLDnXlaqwJCqNpfviPUiQBGAaBMBbL1Ws\nfsaFCjha8CAU8T4KZExSEXUBSyBBywgPXovSrUR902x+xESE9L7YN3TqQ5ES\nXyfg37na+1VcALeJujS4lcbF1pRS20lghbXkubUL7aZ6H7J05DcqKeMdcmcw\nYPeAixN1HEToxBBtylic1yXx5oTpYpvbElP9mgmsoaLZ9Oso/m8zjVS5jA8c\nElkj\r\n=534E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0f79a5d74.0","@material/rtl":"12.0.0-canary.0f79a5d74.0","@material/base":"12.0.0-canary.0f79a5d74.0","@material/list":"12.0.0-canary.0f79a5d74.0","@material/shape":"12.0.0-canary.0f79a5d74.0","@material/theme":"12.0.0-canary.0f79a5d74.0","@material/ripple":"12.0.0-canary.0f79a5d74.0","@material/animation":"12.0.0-canary.0f79a5d74.0","@material/elevation":"12.0.0-canary.0f79a5d74.0","@material/typography":"12.0.0-canary.0f79a5d74.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.0f79a5d74.0_1619649869105_0.45338960311628673","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/drawer","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99beb9239e6ae04c745531639d0c00111d1ba0f6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.84f3db9ed.0.tgz","fileCount":48,"integrity":"sha512-vJXQsyj/O4oa7aQSLP+FUG8NC9xHm+ZQBqzBl42mgATrwOwqCXeq15bzVoB/bPOoRMrA/DcXivXS0uJHuXGjNw==","signatures":[{"sig":"MEUCIQCxNsUQ9PKArXjcZATumHIQzFiSGzgc9MZ/R67aOMdpGQIgP8ClnrVw9puR+18/+6kFVKwQmd16TnZmkbn/nM4xyOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisBvCRA9TVsSAnZWagAAggUP/RM0k92Apj8PZRGw2xVh\nCKgiCoXJSM71YuKJ25r7npDLvVCq256hQsBWwsXf7TR9LjXLnfs9Xkz+/Wor\noY22ySqfDdkJGv/W0tqOVMsxSqPDcZhBYnQTQbdnemZRhELPI1emt7wqg8HA\n731oDzqx2rjQxfP0nDauW+e0s6nQaIes9/pTBeOQWykjXlM9N/Oy2COPxgnZ\nTkdiBlVjQPZJcjrlb4mYLu0LHnnjIdXWO8DjsymZU8AfnvKcfI63XRGwy8PW\nq0Fs7VpXzeyyZm7dkXWqXyda4ZuVQwBpiZ0lrT4+8z/R6c0/SlYHlzZmnL4o\n5JDTGrgq8FR621Do3o7qCnLIiQO4YU1fyA4Gr2vy6Ml8WnG7+w7PxZjbHlZR\n7bi5SFazafBIZDlsbGPHXtgBA7KH/MS2TWm9lTfEoo7hUrweN6pComfYNNBd\nznjT4WAUy44qEK+PlCMw738A3/RAAQbmhyDU1bA+bLahACoEnT2CsM2B8avJ\nY0fxfnLHLZKTKurj9HNrmHeRTMo8H9CliqJpYUsUYO7fmB8oYFbAbsWNtXqp\ncOpOhnbkxFiC0rDhXT0iQJNVuCm4hMLIBJ9lOwE8V58L3IAtJPZkXliSccnd\nEkLRZJf1aqmThzCsYIoe3W5aTpE7M3eRSENi3Xi8A3bjsL/JdC2t9A/XKzIo\nl+b3\r\n=Dnd5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.84f3db9ed.0","@material/rtl":"12.0.0-canary.84f3db9ed.0","@material/base":"12.0.0-canary.84f3db9ed.0","@material/list":"12.0.0-canary.84f3db9ed.0","@material/shape":"12.0.0-canary.84f3db9ed.0","@material/theme":"12.0.0-canary.84f3db9ed.0","@material/ripple":"12.0.0-canary.84f3db9ed.0","@material/animation":"12.0.0-canary.84f3db9ed.0","@material/elevation":"12.0.0-canary.84f3db9ed.0","@material/typography":"12.0.0-canary.84f3db9ed.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.84f3db9ed.0_1619705966891_0.10102175539275704","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/drawer","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7cdaed60c30f27204b09cbc59a08d74c8acab58","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.8fc29273c.0.tgz","fileCount":48,"integrity":"sha512-6G5IFT+inaVdw8Lv4wSpZG84V6zDPjfWCFcPuQbzTc8DCWC8DPXq8HqMA+WTSbCMiijAPuWRHyDDRUmqAdtgAg==","signatures":[{"sig":"MEUCIQDR/emM4UGTZpjFDj7uOUpgLLkQP8BaATDjVt2LTmyqiAIgGMi23HrjPgZrlqM7XByrq1cmxJ1xal/svovb3GpQ4HY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyQ8CRA9TVsSAnZWagAATnUQAJVM5dMQUgIx/CWlnVXC\nIVY4cqWAxbYS+Z3X5UXAr19cdpmIG5KH1iOo/z30L/qEpDVx0tJ3kZw6wrwz\nv+0Z4K6a5wY52N9+kyrP5S6opWKiXTUBvalq9akFMF+HrOhv7X89C1KXpObm\ns/9pTa+JQLGYz6vHtYw0f4bRwwCJVZ7o7OugIeXVrWnk9n94Gkmo0EAg1Mwz\ng1kOaODvsyxSoNK/biCQhruKi/GTRJ6RmPIIxvcXOae5xCB3tkx/XhMeoVAa\nM144nCt3+MKnSky5joZo/cUl+rgLg65lZjp+6QXmcLiy40jV+Z1fUgQvR6hD\nCzLHjIK0iUdbpwIex4woe/YYus7fook+DtnnoEaLMX3jhEA5o/wR3oSWegvm\noSRpCec1MB44iUszLD+GYjT7/NyxJGcfCWDrIe0m/lPH2VoxkSLfL5veGAR7\nGjQ1EiRSr45gw9qv4A7pc1RAHHY/UmDI7LKeT0hIXGOidA9uPtidzix5u8In\nq2BIVoX6lkMkTPsWuajQW3QPCTALovoTewjIq4cQs5raRmn3YdXBAwuNf0PP\nMTF6yYhjlh/ZGHCdq9vlNb6/ji8pZ5t/kShkQPOyfBoIz2rkrClbdZ6400Jg\nLLQrlRouNeONcAiSq2W2PTJKFOjgtRfqrnSBck45Q58Qp9w76VWd0VYI3SSC\n3r9+\r\n=RUOB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8fc29273c.0","@material/rtl":"12.0.0-canary.8fc29273c.0","@material/base":"12.0.0-canary.8fc29273c.0","@material/list":"12.0.0-canary.8fc29273c.0","@material/shape":"12.0.0-canary.8fc29273c.0","@material/theme":"12.0.0-canary.8fc29273c.0","@material/ripple":"12.0.0-canary.8fc29273c.0","@material/animation":"12.0.0-canary.8fc29273c.0","@material/elevation":"12.0.0-canary.8fc29273c.0","@material/typography":"12.0.0-canary.8fc29273c.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.8fc29273c.0_1619731515949_0.20862539945917358","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/drawer","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b235fe17bc7b4e12bb404deca5ed51b5f7bbe2bf","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.c50d20bab.0.tgz","fileCount":48,"integrity":"sha512-tIdCYHkXcZB5BHEFrgPZppSgR603miuZwA6PkMfSMO9dn24C52VMPU/hamgSaYTaugefbTS/UJIc+AZsBz3Dyw==","signatures":[{"sig":"MEQCIFIb13tgtXCJZy+VNdNhemmJ4MapJ80R0uPpuiJCkoidAiA6bZ+SBGeUeccXlH+78s6esXBVsdugqVh0+egclhxZHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":963102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiztACRA9TVsSAnZWagAA/NAP+QEODL2h1mYEpsL1+hKk\n3f8CBm3zIyIYkZdTIAW7t23oVU4RN0pu63RWbRfeGkGZcmrL7QjqkZdTI4ZG\n4lpTR7suqPTbEOltVcx93zwk6/aZQ1mrsA3PvowrG6jW8hqfk0v6LOzqEvvo\n2nkgwdK4HEbv09yfJCjJSbLL0X3PtunjVVF9biufKnw2GiDG5GyHrvY3O1ia\nT/wuj1Pwsa2ja9dM4HgxiHWzBSCqFx3VlseKum8Kg8urGSlwdcILJMygtULh\nV4Rlu/8ITzOPcRij+kb8td1+NaYmphoDI6mmfGcXXLZa1uquCVzUsJE2pg+w\nojtY/3x3r7X2RZF/6g6jq8y4AEpIWXOb/6Z0QuwhsAXPnQaU5Qy0XCmuZyad\nboSmZTr1lhQDoLHWhFLs7QrXsa+VqgZHprYcIcQI43amUhzqE/77GSzdSZen\n2mMToshtAwQF8fomsiUJ60v4pnm6HwxudQot1b+UaJ+CZsNXf0ehQ4M15tYT\nYRPswSnmR6My/yXopUpQMRsOc0l11PXE42OHEbRA2UP8wu2N3O3+AFgKJ1In\nz+Hqlm5r0HxTd9BOf+VQ/YrmaIRx0NivZrFoJraoK0IURXmG9CaSLN3lzCAj\nc/AqbobLpUMebQSmXVPRIu/CT1vFdoANjtgtgzcqUP/ZhLfsZwrLbxiV65RC\n5yCz\r\n=uToK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c50d20bab.0","@material/rtl":"12.0.0-canary.c50d20bab.0","@material/base":"12.0.0-canary.c50d20bab.0","@material/list":"12.0.0-canary.c50d20bab.0","@material/shape":"12.0.0-canary.c50d20bab.0","@material/theme":"12.0.0-canary.c50d20bab.0","@material/ripple":"12.0.0-canary.c50d20bab.0","@material/animation":"12.0.0-canary.c50d20bab.0","@material/elevation":"12.0.0-canary.c50d20bab.0","@material/typography":"12.0.0-canary.c50d20bab.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.c50d20bab.0_1619737408498_0.8543679111624118","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/drawer","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.474836ad0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0234321487034f38265d76a3e09bff8a7b283b6d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.474836ad0.0.tgz","fileCount":48,"integrity":"sha512-W8pffZHqaVHwYf2igLRWgzTqmCfwMI7ZGoEoB96QrgfRJEShX2jf4zLDzq5VaFkhsyo+2vVPTQ09k9rpUTlJkg==","signatures":[{"sig":"MEUCIAy6qJVOTHTFMh/eSOhjIfx2j96HQiqwzVcAcevcoE1gAiEAiRmj8BkCOr6AZUQNPIapd7Eu5HqvZvR93ipO1z50qgs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":963102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM1gCRA9TVsSAnZWagAA+PMP/0RzK79XMHWgeSZajS2a\nwK/1coJZ5m4K5iMeKZxPkRwhS1iy+LmwO6T6mWPpAwcr2fy/NC26V+kvC9XI\nZKB0q0pYaNE4P4KIHOmJQhEW8gvG03Vwt2R2TUClzBfqDJfN0iYwHkQhn3uc\nLxIDpuOSoJZabWW8AX7B1FskZeV+y0chI+cWrY/fjU1ARjSh8reDatP/NqD7\nPuhyQJwoP/5CZi+QslJgXINQQmYgV0mxmhcedCRuUiR6iab2GTTzWqEHSWZ7\n3HTewATDLP4AI0TfDfnhgRKzjs0V9C1HY7jkyg2l7RshDiaB8p4OqbAzxKWD\n4Dif/TkaheUqxaPnQjOxqO/5kmWCkzmHeL9QHlSTgx/MW+4kPLoFhgImc85z\ne6dJA8SPgmvfIKB4A5lOzFUzxbgWzfSvpvxQR7rgMbuN6hnREhCbsVHDTfXf\n9xEHAb+ohlSGOZHkDMKoqkBEBH3Kw0ht9G1fSEy45Y/mHCocoHtWwaQOwizv\nL/3w3YrF3INIicb58Rls0Ou1uKdMNf9G5p7cS4kwQnD1xZojIa2rFcLrRaKA\nJLBQNmpsXn5OQgACdkRCdm1dcsHFKAEmjtHnWCZNJT1+zUQPeGcSWKYj8fof\nCHSkrNVHMtg96s/RsbvSU0aMxJfsD/HoGf9EM18nwO6ZoMl9u7CsXN5IgZNb\nZcjn\r\n=ZfGp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474836ad0.0","@material/rtl":"12.0.0-canary.474836ad0.0","@material/base":"12.0.0-canary.474836ad0.0","@material/list":"12.0.0-canary.474836ad0.0","@material/shape":"12.0.0-canary.474836ad0.0","@material/theme":"12.0.0-canary.474836ad0.0","@material/ripple":"12.0.0-canary.474836ad0.0","@material/animation":"12.0.0-canary.474836ad0.0","@material/elevation":"12.0.0-canary.474836ad0.0","@material/typography":"12.0.0-canary.474836ad0.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.474836ad0.0_1619840351817_0.5704812529244656","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/drawer","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b26ad5fcda8108703cb1d89b303f82f3df1a2330","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.f5ad92287.0.tgz","fileCount":48,"integrity":"sha512-jiYhjtpiVjZb9enfYchu5SRz3i2LWQ+sGaxboTympYNEsftH8hUz6upvxvLO/AB7/5gF7nOmBCQBaQy98KgClg==","signatures":[{"sig":"MEUCIE6m6G+76ZwwAzqsDlhespJNgP4IPyU+dhE9WKST1iVUAiEA8D/LpCsh3VvMNB2xR+nPSoBQ2v/ic8aHTL6lmfKd9/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":963102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD+0CRA9TVsSAnZWagAAQrIP/18KsTmMgpOvR/3B0tyN\nJRWCBqeadLl4S2Nqh9n7TYjWvJx4SOeEY0FFu7FjfiHIcR2PIT/4NK5UVOeJ\ng1a9T6vnT8H9pYR6s3DVB2uxgDhdLcn1GSE+qNFpxCalFBNKTHSDlnDgVG0D\n/1F5Fo1NYAU9x+6ksG/ie1+9stxKVsooM3cJ4cqATbGsSjk9Ds3oqN+GAMcW\n6Tk7ZbvzG8jf+9wIF7s2PIllQWsMgcnG1QKJB+pmr1p0z8y4uiBvlwvPX9ul\nLZlte/VpoXDL/LTVI8tegPI/cS4L/ntX5sseVMxrbgXRudEMjvQwGT17CYiw\niJe2EXoq5AATHeohMeQhrdyE2twYqs6ypJH7IwMdHWdL4/9f9KyrjiQ7GCTt\nu9MPNyMp2ZSkpol3jHc5avFGDd3yZ5pFl4QqCsS3lkJpBoR+7wFdALUjCIL1\nzA0WM5LfGV3oaxTrAOUKJRY1oGId8a4nNT+b8HQprBAE5AD3jD0k32IHT0Cl\n4tch9HbIFFoYjm9oEKbKIM2rAeUYU11e8bBCph7XFLWGxSaRcuw2HXWzO1oO\nfAEKl3bAlGRN8pMv45nY/BRfsXTsrAxobuXHytMUQm8gfI9adthoBYVAy9gN\nMq2G+9QxApRY8xAUQ4bXJ/3Gu7YOqH6ycctTVx4wFVr24wlI61Y5QtPeDd3e\nzuMl\r\n=0yhQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5ad92287.0","@material/rtl":"12.0.0-canary.f5ad92287.0","@material/base":"12.0.0-canary.f5ad92287.0","@material/list":"12.0.0-canary.f5ad92287.0","@material/shape":"12.0.0-canary.f5ad92287.0","@material/theme":"12.0.0-canary.f5ad92287.0","@material/ripple":"12.0.0-canary.f5ad92287.0","@material/animation":"12.0.0-canary.f5ad92287.0","@material/elevation":"12.0.0-canary.f5ad92287.0","@material/typography":"12.0.0-canary.f5ad92287.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.f5ad92287.0_1620066227927_0.0418646405229246","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/drawer","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.af453daf8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6db5dd7957dd7ee7afeac5d7d247b237894127dd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.af453daf8.0.tgz","fileCount":48,"integrity":"sha512-QHKWRzXIF6OwJxT7Hj5187KsqHYT1FkAvMVDLzdkeepsLLq7/idFycdB3vpa5+REaVmxKPJatuoTHlqmxDsZqQ==","signatures":[{"sig":"MEYCIQCyhSvvBhQ1SBAP9x5qyGu7kOd1F6nzxKUn/55ZR4UfTAIhAMXDYJfwh3n2mb3ly2Zn/0QYblUIThzWvLu5n8DxRAtn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":963102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEcECRA9TVsSAnZWagAApawP/3m/y4T0TZ3PrybX6Nz0\nvKRxLx26n4+Il3qag/XjzK9ySTqVnaKTXyMnfuzByjhDFprmuiIqfHIRVKuN\nOC2Hmm/DayEdwJ/f8/jPc8nJijg/5xQerzw9wOnyXl+TKyzNJeJUPgdT7kKr\n9ovZ4Z6rSyVQAht1y+OkZB3V0ZOxHz/3FvDtnsT6d8jOUxwH+SqDgv/mBhST\nNlEX9h3VGbeUzP85mOWcRiF2RhXnHs1MKJ0vdSbh/mCSaPEi5JR6rlM43gds\naSa8RgEZoxIciH6UjGDcesGFGW6E/JS9Wwgvbw0SkiPtQpanH+90HK0QbwOB\nKAS6d966yz1EzjYtZ8s1oWB/w70THZOMdHNf5bf7kMoNbmjQ5qaP8xvKgI2R\niZiO14DSYaavkbTy4hv+FQ56PYfDv7JmJd9Rd5vhMLkxFNccFrLs6T2mtG7y\n4nPDo3LPWuevBm6ZCUt3pBE1F+lruoEv4GccX02M7caRmPcLYoO/kSoldLN+\nsIPR/4e/PoUJdjZeapFk7kIhW6AQ91WEnSXu4weiYZQEJIWJ5w6N/usFAM9d\nOCrGZmIrQqDQ3JX1zCmJA9ipx2g0KmN9CiHZdEJ8luqwGNogSOftQRG6ghtD\nKG2C241TfEkuAvbDgHdRSxOBTKh+ynLN4k5a64S6WYOaX5Xnqrs6D6bmCOs+\n4f12\r\n=LlAD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.af453daf8.0","@material/rtl":"12.0.0-canary.af453daf8.0","@material/base":"12.0.0-canary.af453daf8.0","@material/list":"12.0.0-canary.af453daf8.0","@material/shape":"12.0.0-canary.af453daf8.0","@material/theme":"12.0.0-canary.af453daf8.0","@material/ripple":"12.0.0-canary.af453daf8.0","@material/animation":"12.0.0-canary.af453daf8.0","@material/elevation":"12.0.0-canary.af453daf8.0","@material/typography":"12.0.0-canary.af453daf8.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.af453daf8.0_1620068099826_0.9951322060532313","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/drawer","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"024876f7fedb0af1e443a4443bbac560b656a73b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.1f1918c24.0.tgz","fileCount":48,"integrity":"sha512-e4yCAtFoKBpIqe4mvj/VRGAEb/h5cpZ5NYI7aOXa20eIjer6J2QEFMmuEjxOcwfWCXdsBZb+I1vDaZQm4jaIxQ==","signatures":[{"sig":"MEQCIF03g0yxKmQ5jVaXQICL5EZloFMe2XK8c/PX42ssgo7aAiB2gFCQ6zKGDf/wpU0boCWaDq4/Qi7/qRGD/mbDrhIZmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":963102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE3bCRA9TVsSAnZWagAAmYgP/16YOO9b7mST3t20Mrgk\nocGtOXThbhW6/f7i48tqpm61zUAcnkd9nj2X1WgLiL5eiOLlpF4SCwXYLN6F\nk/w2Zt3EBz/XSI0DUOq686BeNGOwmlm3NzqK+icadcKh0S3Qwv5+BVnax7g+\nJRUgjdiLwaeh3Wu+ZBMrVFrkuWsntwf/bpn1nMrXsZHzi64bmf8QWkg20EfZ\nAGgxh9wjwlLNr8bH7MtnWsec66JStdXxfW3SdKICl1M4V/+Nl3CU9VCTy0nG\nXuHGMNthK+Waz0ImxIQDQ+f7bi4aMqxzSdCIA3/JRnKZp+y7ImtemIqWAZIT\nbgXwi8WQ7Bp1H51AfC8sS//yLtjtAhZiqzcganEghGgjM/CNrZlMuboibhN3\nRvfYeqChYi3DLbrN+0x35FDqIW2RrQdkoPFCtXOCXZ9/sgSv6MQnIGge1LHY\nVLP8v7OX4bUNstOlC0vuoN1g/C9EbiNyL5IsGnu9NpuPpi1lHG0gUd7CPk5P\nLQh1iUqozBnm49Rk68Ts3v9ayfDZSTP845FUUaV4QpAO7mBxqly1V/OloTEH\nNNChGdu436+Iqo/CsTdf6BLP3opzEt9y8vVXdHJ+co/g8mqAaNi9G4iOGMmT\nixH1+3/ap5xkJ2j+q2yuaXogds11A/pAMp8GKPKIm5IP9yRyfr/XQ2lcdg4O\nHMBc\r\n=Aqt2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1f1918c24.0","@material/rtl":"12.0.0-canary.1f1918c24.0","@material/base":"12.0.0-canary.1f1918c24.0","@material/list":"12.0.0-canary.1f1918c24.0","@material/shape":"12.0.0-canary.1f1918c24.0","@material/theme":"12.0.0-canary.1f1918c24.0","@material/ripple":"12.0.0-canary.1f1918c24.0","@material/animation":"12.0.0-canary.1f1918c24.0","@material/elevation":"12.0.0-canary.1f1918c24.0","@material/typography":"12.0.0-canary.1f1918c24.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.1f1918c24.0_1620069850602_0.061553984057184596","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/drawer","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.33148231f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36898fb616eb84fc92782d9d433687bc33118e77","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.33148231f.0.tgz","fileCount":48,"integrity":"sha512-qM1BHGdFdbjfkubuGl4R5ji/9PQ9TlEX7j0N+5xGVwQAePLzPkQhph6BhNJuRkk0uev/fKv8D/jUqUGCm/NDMA==","signatures":[{"sig":"MEUCIDIOt/nOE9itK0nabRwb2Ozkg4uITaVO9wD3WzhSk3IlAiEA09yK8WNSl2wjjaAqJZJPO6fUeWWzdArN21qDysuw/rw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":963102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFGcCRA9TVsSAnZWagAAHdkP/irmIqimmoRe80LihJ+r\nb+K8WnrYpRxZUjlaE6fJ+zTBT2vhKozGKfzzqFJvl6Yxl+5mZG4YiZxFDacC\nW/W5yLbHbmm5Rg+VMWHd4/F9dyyfPuGUWhBcjROafSEAna56ffftGPSDS49+\nJbkThBxirZF1ASwKrZSrsFOwHzB+d2vHJNVe/LK+vdHZ97tZCpmWnluxuMwl\nub3NyDc483SJ9pmnmsfQ/rbeTgVKo0D5xEtlzp8y7ZEPOXIqdm2TfW+2jNUW\nmVIKU/J5XBaqQ67U8PHQliteYR+PC9GUXkIQAbtuPJ3+DY0oAw+s9NEcLdjN\nMupLqcfkOwNDDUCLLL2H7UVPtEIXOjUCIS8TOCUBHdC0O6yJ2MwG/Wib21Po\nQ0EyrUMp4IdG1psqleJZNb2I4VMTf2apg+SmzELLjjaZ7p+1poeAkE83VtmO\nD5NJ2tmKyejMCJMFPC/4P6OYnpHnK2+eJpVBDJ7sDcyyKiZVGG58dHjjYa9a\nRU2wbBRH/0xP/Fvqvv2OHXl7Tj9DIj2heB3yVSIpNlwR/ceFnDFx1uvg/Yzm\ng/Sw9pzPZHP9b/GJqWp8z90/aqdn3eSBwq0Pu7AP2BJGNSutEtxFCkf9J0nz\n6pJKFXSHTaw9cvoAgVN13LA2d7Wy6czrWEZdrPlTHA9AKYdU3x2Py54m1VUl\nUac4\r\n=kcyv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33148231f.0","@material/rtl":"12.0.0-canary.33148231f.0","@material/base":"12.0.0-canary.33148231f.0","@material/list":"12.0.0-canary.33148231f.0","@material/shape":"12.0.0-canary.33148231f.0","@material/theme":"12.0.0-canary.33148231f.0","@material/ripple":"12.0.0-canary.33148231f.0","@material/animation":"12.0.0-canary.33148231f.0","@material/elevation":"12.0.0-canary.33148231f.0","@material/typography":"12.0.0-canary.33148231f.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.33148231f.0_1620070811855_0.17849808444975146","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/drawer","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77f6ae4cbf56da0a68a87b260abfa4aef58d52ea","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.06b76fa74.0.tgz","fileCount":48,"integrity":"sha512-2KhjZ1eNG42RmfaCioMED6+jLq+r4ZssGWJfsBBF9mPXysRg6ZuvgtYL9BXDRaUaTAZCvO2XVlAXuy26sJswuQ==","signatures":[{"sig":"MEUCIQCKmI76bc1IBuv6Uw2q8rLgxBKoqGCoB9MrhLwOR6XZnwIgK3V21KFK4oJVjC+I8oYO++AKFJ6DJx6l83RmMvTuipw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":963102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFNGCRA9TVsSAnZWagAAq9IP/0R4KOUoKzuH4KRCWtc5\nyzUVqQl/7vWVitWc5rfKr14lTd86rW/bVisGv70iEWcONYHOUy86Afpk75lf\nzNg+S1WHJ7mo39wEnV9NOPKC91+7Vn+4M9v8Ra9J4vgQSTx0s8nV6KePGPTP\nSdZQ6mpU/aIyby6nlZL4LXJDeGgAzJu+Hbqqv5qEe6jD85tYnZQP36LhS70A\nI/vxwKgrGdRDYC6bkAbAokJe/NEDJR1iQHMcuxrZ2sK++Y63VQUu3ushJiHp\noDeT9WcATamGj9rZdS3IxPHyG7AwaljGWhR8HzlS+/qK9bndS7Pkmo122fC4\nHya/i8WjaRIeHGZMmaQPbtGOre2UqPw3irrvVRsnELmdZeY+p68u4Stn5Ynt\nSmvkndHVXpaO3KKNRvGki1qRTufTlChSNZVtep+QeuebqqRTbt1wSXN6chug\n9zPpSg3/jVrfftd0dVowbuQ+dEsm7KXj/wuG8Na87oddMBAaJ9uAqq1mW4nz\niNREqzloTFYzTwGUNpFwV5y1G9g4RSLaDpMBKv05L11g27WEqa4uPIZ1tCQ0\n8Im9uy1RzTOpJxpKwDmfOZQ1sdzm1NnQgkl/UGL6dIgHFcogf6ERcPIk55qM\n7NPQ6z5l4aAYOeOAZ7AWcoVWF8DVcs5bdqrxKymqWX8Q777s7lFZzRHX1B+2\nB2PD\r\n=2Qqq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06b76fa74.0","@material/rtl":"12.0.0-canary.06b76fa74.0","@material/base":"12.0.0-canary.06b76fa74.0","@material/list":"12.0.0-canary.06b76fa74.0","@material/shape":"12.0.0-canary.06b76fa74.0","@material/theme":"12.0.0-canary.06b76fa74.0","@material/ripple":"12.0.0-canary.06b76fa74.0","@material/animation":"12.0.0-canary.06b76fa74.0","@material/elevation":"12.0.0-canary.06b76fa74.0","@material/typography":"12.0.0-canary.06b76fa74.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.06b76fa74.0_1620071237853_0.1961467171282809","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/drawer","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.7c5000473.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10a4e2fb7e78399cdc322c7faea44c46ed3f22eb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.7c5000473.0.tgz","fileCount":48,"integrity":"sha512-U95LLSR8AYiwnBNFRbbDB6m1D4l/LIiByX8yqCsqZRRfmOc9VMzJk6t2E48kG0Kh0c7yPaF6mSACVt6JV2rZpg==","signatures":[{"sig":"MEUCIQDeL/KL+AKw6gJKXJS485Vc29WTG8mJqSBarwYXSi2nowIgMuD5n+oTHF3AkW1yOp7HY/lb8VzsLA6US8UQJTRJ+/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHx/CRA9TVsSAnZWagAANs4P/35jTVyYZoT7DtSvvVd0\nPcNAfi579qf4j+jF56vYV0/1IvYki9hy+W5Wzz/Ve4jBP+9AbZ9BtBDYOxEu\n/AxZ+gPVWVdNAGzmNT7kJOqoCZAr0uo7D28IYEvtmKL1IJjwZrlrpNQYL7cA\nJ/IvlnIk2e7VojJQV8fYKLSn1bFaDYu/Q0GRxcni1LyUmgWkHorwKAiyKdzR\nQHeFYENz40CVgAsFr7d4ee3HSP3sb7GzdBtBnzxDwU1mnJ2Hy1E9tfVpc8WA\n7pYrWRSGAhPx1HhVreXHFSr4cejgc1kyIBKoQKm+OuKrWUxu4cmWGzvK7ecr\nkO+qqMpNXQTbfe4zflaUUL6pUUgMhg0xKBByeN8Le/VRNuLMX494pPmD+pyX\nQ/CV3iEi8Bj5bdeMZsDoe1wDb0ALzKbIIlxlM49QVdu5wz7U2tLFFtscQN+m\nfPz6Ibpnog3w64XSjp0p+8El1p7oyr2ZFjlpTtFSmMY4UrdifY01CU3aHcO8\n2kWxrtzs7At6QGaDlU6HLHpXmIOg4iwNoz/CBSWsD2P97a3DF98uP94npJr1\nlDmCUik3VKBJ5xNjsBjLANnbcE7vuWvfxECwOSWN/RPexK1C376Ydmrd1cw0\nlAG7CTD/aEoKf0nsjw0pcMDgkprxuwjMRLhdKJXVg1jDyxgcepdk1kwhiVcO\nVpQq\r\n=Xg2p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7c5000473.0","@material/rtl":"12.0.0-canary.7c5000473.0","@material/base":"12.0.0-canary.7c5000473.0","@material/list":"12.0.0-canary.7c5000473.0","@material/shape":"12.0.0-canary.7c5000473.0","@material/theme":"12.0.0-canary.7c5000473.0","@material/ripple":"12.0.0-canary.7c5000473.0","@material/animation":"12.0.0-canary.7c5000473.0","@material/elevation":"12.0.0-canary.7c5000473.0","@material/typography":"12.0.0-canary.7c5000473.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.7c5000473.0_1620081790971_0.2657568843021709","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/drawer","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.de997644b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a69b65483ebd3dceffcb417ff186e385b8955e0a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.de997644b.0.tgz","fileCount":48,"integrity":"sha512-U9ZzcM4jyqcA7hzSmmJ582IPU0lqIyAmt+eyCJpEHOzlRyU3WcBs1XHUlGltnvThb3ook9+YQRv+6QDDpdZmNw==","signatures":[{"sig":"MEUCIQDNlFzHeXYfkpgjA0slklGaSmMtQkfaRgZQ4UFi6JiGbwIgK4Mx9y+HzsFQyK42B5xA/bz/ABXliQuwDL3VFJu4n8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYSICRA9TVsSAnZWagAA1YMQAIhN2toI8ErACIVjagPJ\nkRq3YLEiccdhuC/KGtlWSHkpi3ASYWukyUWGWZZMQmgqMSOOymLYvjuIsuVY\nnbdwLL/3EDYxyvaRWzDpa1ZUEFphhcouzJJfm2zw+OI+9RSt8rDkZgQ09vgS\nMwb3+wyt2Ndg+kzcVcl8sqOznKHmgLy4IKRn84yxpHMJcc0kLsjDsnWiaLFL\nT7E70OiMb8EMAR9zaXCvC5PymtqPXH5V0zvJ2ru1l49OlsNJxTKKIT4wpiNt\ngiXsnLMR0IXal8/V1TdpH/pdpzpc2DYlt7kkg63pH2AFa7JCFYFWr1wdFoRK\ndqWCkgP4Q9bNSiNpq55MGmUbevqEptcHsSLbm8GAn3gOt3+dhAcGmmYvimGk\nPLlJ6sjXGhV3H096trtqS72NB943g/yGuIq0M/N0zkFlZSxsm99RlQb5G8rr\nVxfqXr3bSSh4aL2Xth88z2j92WsrqlS7zayWatBMg/NN98iMzE4lsd6T8Ca3\nBzqsKDmlOQXvtSa2dIyV04AYvc2r9YJiXLsjtKCFFxcOii2+frpd/vKQmcaN\nSHNzrRbUV45PE3YVWfOj/GGjUmvgwSgU0e/hcAufG6DzvUWAF2fR0sP2sjtP\n9VzYwGXbF/rF34q/RNBPwMr8CZjG/1Of3fZytjGfP21vl4egXS3LQaP/WUfr\nyz3I\r\n=pSwJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de997644b.0","@material/rtl":"12.0.0-canary.de997644b.0","@material/base":"12.0.0-canary.de997644b.0","@material/list":"12.0.0-canary.de997644b.0","@material/shape":"12.0.0-canary.de997644b.0","@material/theme":"12.0.0-canary.de997644b.0","@material/ripple":"12.0.0-canary.de997644b.0","@material/animation":"12.0.0-canary.de997644b.0","@material/elevation":"12.0.0-canary.de997644b.0","@material/typography":"12.0.0-canary.de997644b.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.de997644b.0_1620149383536_0.6674902947924806","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/drawer","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdc6072952422abbd2f9b7c74d94922a5ee3cd58","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":48,"integrity":"sha512-JWCm+00puF8wBePytGNRW64dNyp59vB2RFQNCPgUOJVrGlQTnQ919/SS49V/UM6HSUgBTJWs0Yrf6yUGgrsazg==","signatures":[{"sig":"MEUCIQDe0QWpndFb6YX9So0zkrtxdKSoz4/nhlJGWiKs2PFtNQIgA0+zFnbp11rXhAJjwp7m4KPnOGPcQqrBsnlNQ/gdP0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYrZCRA9TVsSAnZWagAAAykP/03DCk5n6SSU/g/EYsKO\nEwesbb7rY82mYnYem7M91M7wvPUpBh3HCYeZ142IYU8fxX3AQl3bQhSUwdWA\n+mywEAt4sRh/H4SWLUeEW0DfoqRaMYAcFhbEkzlsynDGPgvwndj0zGElTdND\nA9wY+VoiuN0UV1G1UWnxrg8RVaN8m6QkNr1a9UGrr8/uul2usY+KLTNty1a2\nj1PQ7XwbL/rCiaEmp4wbOAVw7Mo7/70ZJTjNamaU2XaJjt1ATIIO47XCtj2p\nXSAzTkVAWu7PlteFY0mLwfZ5wBX7E7RZxabK+AIA/ev9d/iAuTm3GiO/0zZ/\nF3NhQaCWTOPbsS145VtUYaq8bwlKNoAbGzKgERL5h+Mtmy/33RgVJaYvtNFE\nA1Y+o7jHLeWsTlYrZyyDokbuP6p2LY3rAEBgFfzk8VSzGVOFTXDQPnmkWECO\nWzVICIowrI65psQzHEQ92o8c74Y+2YGBcb6fXwAsc8S5/bc5bIvTwUH9Kz67\nTbSeUPnp85D4l/MmHTFuKKccUZrCRjT6QiLQGdj0DS8AJ1EgmIpXsT4eXwR/\nmuhiddfG1tqVdrO18eniFIvvSpMEQm5gDAdOFKH9RtWHL4G1BAlRc4UJOEOM\nG80f3WP2oT9EXAlzMjfVf7ExK+s5M1Brofi4T0RlOxS/vLHT+DRmh9b/JAMb\nnodJ\r\n=Cvu5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d4d7f1cc2.0","@material/rtl":"12.0.0-canary.d4d7f1cc2.0","@material/base":"12.0.0-canary.d4d7f1cc2.0","@material/list":"12.0.0-canary.d4d7f1cc2.0","@material/shape":"12.0.0-canary.d4d7f1cc2.0","@material/theme":"12.0.0-canary.d4d7f1cc2.0","@material/ripple":"12.0.0-canary.d4d7f1cc2.0","@material/animation":"12.0.0-canary.d4d7f1cc2.0","@material/elevation":"12.0.0-canary.d4d7f1cc2.0","@material/typography":"12.0.0-canary.d4d7f1cc2.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.d4d7f1cc2.0_1620151000651_0.25937851333797","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/drawer","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.be999eb08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69a77e2562649c483352807dbf3e2860b3bf09cd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.be999eb08.0.tgz","fileCount":48,"integrity":"sha512-iAMcSjyzkWh+jqgB4rIFVpBvH7kchOr/DyoK0jrmTPgo7JVXLh8NSBbS+ogeU3hgZVvObqxuBg4iN3FvyvRhaA==","signatures":[{"sig":"MEQCIEmnf90GmRqdOH50gXeuC9Ck1XRahOlSG+1kLVNN2bzFAiBY/QPq3Lwt14XxzbxLKF983qTGhgmv40Wy8CB9kTmvUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYwQCRA9TVsSAnZWagAA5/IQAJW4wpPbeE1xhOLVfVnJ\ngVvTw6LSDw5knZm0TEOYdFJ8We+3NPf4uLdrJpcVbF2aDQN3oDq70AMbBjGy\nLloalTMC922jB1XkuBZhKYgTXKGoPflYAi+/5iYyGQEjvnwlxRGWZ5eczmwu\nlKloCyTp+g3xl3f9pCeCYN7vBRTw5jggSkOTImXgOFyVRgOi6BRhE2VLi1YU\nnp6TKrhmubHmupjBpNSCqeFrRrzqcdskpcVa9WkQ/zhbSY3J/UvJu3Ah92VY\nmqsDO6rjOeqboeO5os77DtuKxWC/UJNK3rWaVtdLKKYAEW1j/a1rsyrT5Rx+\n6g8LVKw5pzT47yfsr7kwsUzdhCfluwGMyL8A9yX9sAiGZ5E0d3e333xegzCY\nBhOWGQyN8M/bJUGc2WOV4Z+6/BkG26Tq42FVojis46VI32Jj/Fys50Pr26mU\nBf33s4b6//EA9VyHHz3M0wJWNPHydJIc1CVi40r66x4i4V2E29jwioaiPKmw\n5+xUXyXtHem4OsyoimbP6pfonBW4DgaW4BEu9kkgpcFpuwSkeWoAdJgoaDWL\nxOx2dBcSkonsDak3kJRo7YqcVwKFSN9Edr2lkpj1qzKyayBGIOs0DoOmDhy3\nv7MZaGuWcGPi8qq7KPbo1u8YNGK6Nb9aFGtooi9pKMMHb0EdUP9+72d1QN1N\nYUOi\r\n=VVVK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.be999eb08.0","@material/rtl":"12.0.0-canary.be999eb08.0","@material/base":"12.0.0-canary.be999eb08.0","@material/list":"12.0.0-canary.be999eb08.0","@material/shape":"12.0.0-canary.be999eb08.0","@material/theme":"12.0.0-canary.be999eb08.0","@material/ripple":"12.0.0-canary.be999eb08.0","@material/animation":"12.0.0-canary.be999eb08.0","@material/elevation":"12.0.0-canary.be999eb08.0","@material/typography":"12.0.0-canary.be999eb08.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.be999eb08.0_1620151312079_0.16023392517939494","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/drawer","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b68a70d222f7ae216c0b5dd1b7c142cb2ef5c27","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.eda1705fc.0.tgz","fileCount":48,"integrity":"sha512-ikp5kjtq9n9uqsB2EqhH19tN04cOS1yKlTePMgGoxuQR/doQxnQdotwjP0TWpdlYtHwARw8C28rysSEjweNrgg==","signatures":[{"sig":"MEYCIQDF2iHlrYtYcsMJ4Mt71AvgAuWZrq9Qs2vJNCedc1oeFwIhAOkP9HHGpQGQ896NhchqAuMzH+dVYZPYxpyn+i2EwjyU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZx8CRA9TVsSAnZWagAA4ToP/1ASi2O25nB4ENjXi+FP\ni9S0yVFBwi4TaCtSFCCpt2zL3Fc51C6L8rx06LJSzF5DZ9SRFJcQzqyOb31O\nPYUonlvBTAKZfuLDl+Xdb/MdesYaSaH/OIhxlYj4Sl9MlojVISZT209bFpct\nJ4zIENXrYOQ2bMfdRnYIGS/X4pH+pgKJN3/bQi8Bj9DFMEL2Ary4D2RvN9rv\nCHSPbjnlh227w0J8Em9k3GAt1W6ts+CbAJK4KTj5i3D6FSQIdGOiKRStuLpG\nuNOkQOEWVmvep4yBDddisI8/j0Vmy/lQ4Cj0jgPyzFSRiZrRRk0+1P7rRWmL\n/EPG0ueGNk3Fi4VaUmOMTtq/0twkywyXP76zXlGt8fGRUfQBjB2nzvF6dqSE\nSqYkZkMY/3qbLJadhd1iBdKPGGFpii1kQ4Hs0zjl8lLSkaux1YXD7UCkVkSu\nXzsX0rnwsT1Yx+CRRKJ6RbKLOL84pRAB1fJPvXu0pxkiymeX7uH5YYV2SBAB\nI41hGfRqPA31MhmK3iZx6+pXYAZOFdI91r1FbJH0Q+gzS1TExYWlIGNWkabt\nHvgkRLrsT5XEoqzuxDvuFxAdoVhaQ+nLPoWIqL/Na7Auwf4vqev/mkYqVMyJ\nNDfZWoVBNoR5FgBfYO+Wa/dDU7yOx/QXiTHfx0r24lO1MCyEFzNcmLPP/hUI\nBP8l\r\n=WJkF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.eda1705fc.0","@material/rtl":"12.0.0-canary.eda1705fc.0","@material/base":"12.0.0-canary.eda1705fc.0","@material/list":"12.0.0-canary.eda1705fc.0","@material/shape":"12.0.0-canary.eda1705fc.0","@material/theme":"12.0.0-canary.eda1705fc.0","@material/ripple":"12.0.0-canary.eda1705fc.0","@material/animation":"12.0.0-canary.eda1705fc.0","@material/elevation":"12.0.0-canary.eda1705fc.0","@material/typography":"12.0.0-canary.eda1705fc.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.eda1705fc.0_1620155515354_0.14049648866490405","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/drawer","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.718c90178.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15d44ab3d8dc4b7dc485823c40add6661295c12e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.718c90178.0.tgz","fileCount":48,"integrity":"sha512-IjYh5XvO09bao4kHBYsS7Uz3oONuzwutqmNPp6GIzzYsA6uTsPDMUPmfhvYuHZFhg7BGzjitwWHHYG6JnW7Ctg==","signatures":[{"sig":"MEUCIQDTe836U4s8ONWDI1P79e4EOXyjLPnK+/9k7Ulluo9fKAIgJKGh73SANcea4Jk+GRQLR3Gg87v88GtcoD1gHPGxeRw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaCLCRA9TVsSAnZWagAAUaIP/2d4oOOgp1YYYvEs/WGn\n/F7og9qnFODyfjbH/G3EsyoJEQPxIRp2JpGq4W87z6ZOYgFj6IOwfnBHZ7FB\n8tGu+ImIqXJLIksSb3RND13R1KakSJbt8KybiU1ispaOJxvzfK+TKTFv3+QV\nYJkuGnMeSzW5UkEcVdL8BYiAPpQAdvYcvHFVvYq+yaDa5fIwEVNEZ48UM6Bz\n03twzvh87lKtarK4aapM3PsMulXHaBiOVjl0ztEmfu7GbgRIZrBKzgQruS5P\nhyVEsTa/RDLRPovaAzEjy0mQeB6UWauiWqrY+lgsDv0y82CuxGOu7eM6qG72\nu9tTX6PXEjqosz6YfTGzjOcCd+bYOsg+DrzhbIpby7bSl47nymD+AiEGFFjF\nnCk/LKmuQxLkWiw0mT6cCP1DAQN5mV5TuAO3cTlZKnOIhXhJShooNTcerKad\nRjDz38139RbDmi+/IOnxv8UpYV4acPp7HVJyDLqwbvoFWReesMcAlw4dQsBe\n2rtzSAx28RMXREKFdO7zWbWa/Rs1wU2qJ/VoySgjWK0Gmr95pvq+Adgrb1s+\nDywg7OnHQex8hinSVhYQ7jxx/+KMvScvb9qJ3r8ichmGNTbYwlmcUf32Np9u\nlGaX3P+OeIQ7PTu8yoVtAAYQ4kRB6QZrHyTkLKSQQaquJKP4S+GE6lO0+2gL\nGiDo\r\n=3PZh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.718c90178.0","@material/rtl":"12.0.0-canary.718c90178.0","@material/base":"12.0.0-canary.718c90178.0","@material/list":"12.0.0-canary.718c90178.0","@material/shape":"12.0.0-canary.718c90178.0","@material/theme":"12.0.0-canary.718c90178.0","@material/ripple":"12.0.0-canary.718c90178.0","@material/animation":"12.0.0-canary.718c90178.0","@material/elevation":"12.0.0-canary.718c90178.0","@material/typography":"12.0.0-canary.718c90178.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.718c90178.0_1620156554777_0.49359884463398274","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/drawer","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.0e3917299.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd51b02351c8f33a881a899b41c97d063f1c89f5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.0e3917299.0.tgz","fileCount":48,"integrity":"sha512-rGv96aYHBOBjoFDCkY/pB20jSv0BjhLn8r52EiK7GLF9UnOQ7E6+7gqZJQBcIHkP23SFdn8BS1BUx+NvkaYgpA==","signatures":[{"sig":"MEUCIQCkM5Rm307EVtSoP0LyD87ZNh0aF2xsEbMVLpdfE6hcBwIgOBUHnO9tBXQq6BVotwPxpVdI9q5/9so3snXqWcWQ9kI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaE1CRA9TVsSAnZWagAAggoP/AqJYCpB8GuLycu4heO1\nM58ooh0qESycKjqL9bV3Z/0UmACr2GQYXZ5NA57OwjbQ3qpoHloxRxG8FWby\nmFXwq9yIG+V5Z6/+4Ahj/paTyxfxqDoPtkDm92cQjYcp+ikVSmeOqbwqs6fA\noWaC+E9wUxVPoA4achf/un78qMBNAE6wunlyGz9qQd4w3B0zhnx0KsUZUvzy\nCQ0DLXZjsNoTbtC5YSbtGutS+h3HamYAfG2zJj85xZw+NzpHr+D8FpTd58cs\nmi6CJwaw3SxVitmiO9643SFLta1K/RGf0n2jSXjKz6HdoVSuzHzwAZQ/AaQY\niVho1IoV+f9x24dbaQqNhbtEmOCVz25QV2KY2u0VKEh3xSQMKJoX5TG93CTy\nCQ3JkQLeBUCfVxL+s7fO/jtCUoso1Town5HAarjFWDGl/E2JD11CLyQOjudV\nQtrnKNNJdrp30gwHVzc5mxpqEi6V9m32KqlVPEOTJvqVrwPH9cWVLzfNFQz4\nDlWTGYfj3o2dE5LWFhL7mESdr6JhZG0AvQISPf/6yWX3rCtcKIAcIRBSriPN\nBeJP2eVDLTEv9M3WPGbt/KbcJ9r8qaRhPD7uEUjVljmTTwDL/JsVzINsB2/E\nu2qvnniG/vr7mRu3RrKZQiRxxN4q5uHfFFrRG/ETBAGDocHzZSVHtgVDWwKL\nbp3i\r\n=zLlm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0e3917299.0","@material/rtl":"12.0.0-canary.0e3917299.0","@material/base":"12.0.0-canary.0e3917299.0","@material/list":"12.0.0-canary.0e3917299.0","@material/shape":"12.0.0-canary.0e3917299.0","@material/theme":"12.0.0-canary.0e3917299.0","@material/ripple":"12.0.0-canary.0e3917299.0","@material/animation":"12.0.0-canary.0e3917299.0","@material/elevation":"12.0.0-canary.0e3917299.0","@material/typography":"12.0.0-canary.0e3917299.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.0e3917299.0_1620156725400_0.2048211170164711","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/drawer","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b30daaf535b8d50fb2ec35cb0f994e58808d9e28","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.836b3c7db.0.tgz","fileCount":48,"integrity":"sha512-1GW2LjEA+QXmcugdB2Tgyv5roCOL07mcYIzmdftUjqjnUp1bhtx7fBbVzMO386hgIjpS58lKPlD4PVn3RvqBkA==","signatures":[{"sig":"MEYCIQCAPVlZr/ppDFLjgS2fez1GTSo+lbQ5BBWVA2E+PuHRWgIhAIYrbkN+erdyoRxbDxwcSqh8HquS3BTBcadZrF1em0ha","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbAJCRA9TVsSAnZWagAABbQP/iNBDPPWqGPtKOlYLbT9\nfTOhIq4tBvtHC2YRfO9Uid6sS/zO8LMufVEL/83zonO+fPI8DaYqKQvHIDUO\nHfe881pcg8HiOnFbdcLmMjb8Q/s/FWF9takgK2cRrtbvBwi7HptiKwmwX0B3\nfDc0jNtJH/cbNIp864qJjX3LQwJn3QOYLKHfV/up90AoLEZmMhsIaGtYTQY5\nwbb5F31myN/pYoQFTivgEoFyEav+0vEFoyQjeZgcYu46zQmiCBP19kgQQ0XM\nh8c7vYS/++wYLxMhrsVXPqkf5XP8uJHPv8ZTSzrdaIqc5u11/EKHkKePdPTp\nI5RQi6H6WR4TIxo4XxB23T2RDiPtAmXQdn1wKtbhbTkZw6jXtlGkmot4oqWz\nsZv08O5zxoZ5eP0dN7Gs2tCh8Fd8Chrgo45i01fbbyYizMgFAMf+IrT+Fl/c\nIAv+u4IxmHoiOBDkYxvRHkDataGaVgu/jf3FK6O1n+9IfsU+EZuiNoo8+5eg\nTGhey23weC8bzyp0lAKrOxSCXQNYk+/IvvjC6T3y9HlwfaqOi/PjS0lFJPxS\nPbA2ICmXlKP38e0jaBDeLeBMQZ7yDBIsETBrYReNOXLjEPOY9PZGHiuHnJLN\nwH+azZd0iA4uhFUfkxqh6I7y0K0DlqXEEeJ0/r8xXVkxWBP0fNrM2li7DhOk\nHsi6\r\n=IZm/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.836b3c7db.0","@material/rtl":"12.0.0-canary.836b3c7db.0","@material/base":"12.0.0-canary.836b3c7db.0","@material/list":"12.0.0-canary.836b3c7db.0","@material/shape":"12.0.0-canary.836b3c7db.0","@material/theme":"12.0.0-canary.836b3c7db.0","@material/ripple":"12.0.0-canary.836b3c7db.0","@material/animation":"12.0.0-canary.836b3c7db.0","@material/elevation":"12.0.0-canary.836b3c7db.0","@material/typography":"12.0.0-canary.836b3c7db.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.836b3c7db.0_1620160521367_0.2065336301770575","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/drawer","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba8d27450e08c0a8d666bad749aae911e6a523e0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.53d4e6d59.0.tgz","fileCount":48,"integrity":"sha512-HC8mzJ3Wq5ushXXfqbSG+XWyPObK5Z2zk+T/APrbPVpZGYAv/P03h7PJo4J2+eJ1t7o0G5jX6qFIHaOl4omrcw==","signatures":[{"sig":"MEUCIQD7yEF6eLoSdhOEfguhuMVPtzT4/M4xWHDRLv8qkgx/BQIgQqL2/Dkwt3vbYDmIBNC4HJQFIsVL4OFJ1T+Ql5HLp0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbO4CRA9TVsSAnZWagAABO0QAI44u77MCUljAF0wS+li\ncu0TEYVEktGoumA3x/ZRT05ztH+4au/P6b+3XQ1fmLbWNgD7PDvjkYpz846Z\no0tUS31i1SMOcEUHsMrwSbRpXr1p9Gz3sHZfqy1fVQYaZfk9HIb6clO8E6hG\ncNkXPKiTHcVcJzJnKnPTmOMvdVVsQcXw5K1PKDxSwDmj+SRtmM4nPj2/pM3V\n/QhYQJ+dHMHQKgxfYMNbuKjBRDzX2d4S+WQOC8ZZrCuGJhR2EYJpDQttfGEm\nCNnHjqRArr6YUKPN/zqYuZmcPVO/q1zv1nrevQ3ZHzD/CplWSp4JGePLZx4S\nfRxXWVy8r/CjrzxOifSMeb1TCl7JL42mgQrFVG4GqaEfVMmUNWRHEmSLH9ce\nvM73fQR4XdvWKIAk3khnGHMBEGpdIjydLIPOSFzBPvBVlcEnBfQTjiBHG16w\nQXtBXewrX8kiUDbb0TG8JK0WAYl/YVRAPOxArz+LUvDyRwg8jK4XOn1ZNtn2\noBM5/IgZ5KWVcdEHk6Mkve2AnXNgSnBT8vs/j/+gtCh+D1V/nuox/8I9lCmT\nHmiOyrq1u9uRgF7cqC9t44mhNe/awlic3BEmXT6+nwWf/UxoDxf8lbKbNxQL\nD588I0hySF4JIwEzDfW3Nu3AJypmPARLgnMrKszT8vUgoJcSU0ScYJjhrSG/\n808A\r\n=rO50\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.53d4e6d59.0","@material/rtl":"12.0.0-canary.53d4e6d59.0","@material/base":"12.0.0-canary.53d4e6d59.0","@material/list":"12.0.0-canary.53d4e6d59.0","@material/shape":"12.0.0-canary.53d4e6d59.0","@material/theme":"12.0.0-canary.53d4e6d59.0","@material/ripple":"12.0.0-canary.53d4e6d59.0","@material/animation":"12.0.0-canary.53d4e6d59.0","@material/elevation":"12.0.0-canary.53d4e6d59.0","@material/typography":"12.0.0-canary.53d4e6d59.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.53d4e6d59.0_1620161463879_0.05090160147224054","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/drawer","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.18d147e27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52bb8bf96fb508f1f24bea1fb98557c2e020f649","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.18d147e27.0.tgz","fileCount":48,"integrity":"sha512-MNK0YDgr1QgOMnKmW8HI8XqVDoVVyzJ7g4vYcnag/Cnbho63gbXBFia6p9iywB14Wnl11S3uIgwCQryugMsbkA==","signatures":[{"sig":"MEUCIQD4UwNs9qSWJMcAOGYqVYLEeatw43TSSZ350s6BiCsIPgIgK8DANU1/zd8REjHgTb0PYd3zLFOporRA1uJCosZgf7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbWzCRA9TVsSAnZWagAAxLYP/1SsHmQgZrm5WHHjpIRS\nupUKNndcMnE80Z9se+dQjBvic88DpPo9NDWc373a1rWaGaCJmg3YY2D6VPYo\na143P5XVkYOx2IX541eiQpn6fqLz29CtpWMUAr3009UdUn/sB3zYE85xkKY4\nHsl+de/qlekMHAT16qAl9kVV+FecdQuHs9zN50dKG7V9mggsKrvjQCVU0wKv\nGeXje4aqvBupn2IsZJpF+4f0fUSMp4ac/L0oroWXB1p9+FaNUNzlGrhNFgua\nJj4UAYg8CaeoWujmfYU/rDc3nV5M33LO0xu5A1gJYXCSoZZeJs72e4aEXASk\neG0Z2hT8U41/SIjpYVzgpam+XxGOr2BziDWXzoVUJ99hVe9FvumUQk405zwW\nYhCDGfetOsuvvVOrkIk4bUeyt1ykWu+QqYWhjv9ouqkkXxwZjZSICp2OKcFI\nna90OxXI+0BO1ra+FviIaFeIE7jwq8CqHjB7v6RrotaxTJw7GushT6J+Y6U3\nYlKsOUk5KSdYndA9qi+sRcrpUwrwUwq3jWpQAi9Ya/fc9hxqQ7fYMlwlAdWV\nSlol+mJcFMILTGWIZepfwAxZhhkRfEm8Z8Ecfwm17hjzkDxJHEmU0QBGHpRx\nZd77lwZezbKWgTnVC9Y6OXHUGKrRgPJSe63DwPSe+z2ZrmCSGak4UykiiHAb\n+tZA\r\n=9gpL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.18d147e27.0","@material/rtl":"12.0.0-canary.18d147e27.0","@material/base":"12.0.0-canary.18d147e27.0","@material/list":"12.0.0-canary.18d147e27.0","@material/shape":"12.0.0-canary.18d147e27.0","@material/theme":"12.0.0-canary.18d147e27.0","@material/ripple":"12.0.0-canary.18d147e27.0","@material/animation":"12.0.0-canary.18d147e27.0","@material/elevation":"12.0.0-canary.18d147e27.0","@material/typography":"12.0.0-canary.18d147e27.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.18d147e27.0_1620161970524_0.7243245491367487","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/drawer","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.b9984794e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bc13a613e0b8b2bd91c63d12e17612dc7c2e8fc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.b9984794e.0.tgz","fileCount":48,"integrity":"sha512-mga09Fg6aVBQ4tuRTlVRCmzdMpByIos5Z4tBqniZ5vu6HDHoQ+scfnduaChcRxQ3cuEGwFyzuFheNjD8q0FPvQ==","signatures":[{"sig":"MEYCIQDeQd9w1IS62kqH7QhJffzDRkNAaLx8R5tD8WWMyi0gSQIhANzzo1lI/1kkIoXA2FeW/lQUU7GNwnRVpgn4maBWWG/t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdMECRA9TVsSAnZWagAAviQQAKIlJwCcd56R/phwNre1\nvdcHfOuzbC6RIWlNjHuqK2/A51kgM6yL8lD1ffQ4QeSn7qE0dr/mtAwu00Vz\nXjpbAl8htInT40U+e2rQbe6jtijq2QYlg+pxDMC9Jqx1pKbc9bQlYgIt7A2j\nnjMoqxC5M0TI2bqO0FzMdHnUhffY/zKwes+AgljttDL4TVR9OeZtqNT7g6py\ngXUprrJQOM7k6tzl7N1rQ86OpPSlUpikJjXw65TJUhNtBMAC9pE51JfaeFqC\nhjj4Pk4zGJYz2d/DIzJkzwqVINefefCUNSmaF4BI/PbeqmS+IaByiRLG1PDZ\nY3C34phdDEUrUJSDD/dbBhQF6icLpxe75IBqGDlbIcbSvnXZNaoJXD/0/ZlV\nEk/YSvLD9gcMRPP3jEeTvYdouFmQhpiam6K6jRVfA/23iLudEw3koWyiBzcu\nOouM4MvvSh7drYhqFa75H2rOi7pItTo9z8hesMXEwOSaP8IUcHbylHRj5sPp\nqQaNj9vVX5peAqjP070n6Y5WqQhGzdHpP7J+a3fv8ZY/LEiNeXygyZMMjlME\n7T1x8EmSJgdqI1nD8DrxRxVdGvlr8CaVJxc6sEJEQeGaY3ztplw0ZIwfjHZi\nSwKXqOS9bYSlF+20ko8UBx2fUl840mmYzlqpw1gyPH5674zRE4FpjTz029Ya\nkaoG\r\n=U3Ci\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b9984794e.0","@material/rtl":"12.0.0-canary.b9984794e.0","@material/base":"12.0.0-canary.b9984794e.0","@material/list":"12.0.0-canary.b9984794e.0","@material/shape":"12.0.0-canary.b9984794e.0","@material/theme":"12.0.0-canary.b9984794e.0","@material/ripple":"12.0.0-canary.b9984794e.0","@material/animation":"12.0.0-canary.b9984794e.0","@material/elevation":"12.0.0-canary.b9984794e.0","@material/typography":"12.0.0-canary.b9984794e.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.b9984794e.0_1620169476435_0.6307917910800345","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/drawer","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9062997d1d29505f4591120572b06f41b17eafcb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":48,"integrity":"sha512-Nv8wjqfLnwIDl+WJnYDmMB98EQ/aOaDlqaJCGcuSh9v4kuVT0VnLFEKlSJMaVyMr5i4GL6h89AmEvBgPhysVYw==","signatures":[{"sig":"MEYCIQCTMZZYkehpleGHGWw7seldgK8MlD1+FphZRCgwYQ0CsAIhAPeCuYsfGaDYhkZrHLGv9cyqas1/dNybmi1ohTP8UjCl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdPUCRA9TVsSAnZWagAA69MP/2suib5JPzznJEBnLcIj\nqLs/VIt7doWNypmDXMJVW6vd2yw39Orcj5wLA4svu4zDG9abaSEmsiyxt2xM\n4lV8FUXOFmc6jkECQ4OOvnAVpspMxymdJdg/kyD+/jvNbWwAnCyQdVUtRDL0\ndR5KxiYJNSk3RBaoadbEMEC3/d9WdTb3I47N7eYVCWu1rOM+gxhH5eWOncGN\nPtbmLMbTJtEjwk1U1vMlXxn7NfWdiZ+CcET8iPmz1BW7VAIgjJ0vDoG6J3mB\nAM3DEI2DxF4JOw/HORItws6gluEWEut4zDKgmTGcs7V7Ew1LcTrNvwfqF8Yc\nA5tCClcJBJ1N3ON96001Lh0DXIXVtDhH3d/196LBuzweuIhBYt8X9lv2aCBh\nkiSrknFyCmrrM7o0KzPe0kl+VLzfE6qdjP6fX8Y97r88CULXaiOD4WP8Uo/Q\nqLmh553ybJS902p73MRtec7PJ1lA2P8mG4idmOTuen9XQ7vxSAHz/mjtTiAU\noHWTvVx0Mem90T+xsc5N2yvYMC0puTvmpqGxnAtvL9UfuvD5Diq2q7jc9RvK\nRXpZ/wNjSZr233eYVpnqVzjCkjCEtY1QDNgo5aHcZSEBstdMf5QFwN2huUho\nwvywMuHCwTrRNlecFcYZn2xIYe2sUiQgBYVPi/bUNI7Hjp7XHrJGzOYX/8ML\npRj3\r\n=GWlo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b76f5fc9d.0","@material/rtl":"12.0.0-canary.b76f5fc9d.0","@material/base":"12.0.0-canary.b76f5fc9d.0","@material/list":"12.0.0-canary.b76f5fc9d.0","@material/shape":"12.0.0-canary.b76f5fc9d.0","@material/theme":"12.0.0-canary.b76f5fc9d.0","@material/ripple":"12.0.0-canary.b76f5fc9d.0","@material/animation":"12.0.0-canary.b76f5fc9d.0","@material/elevation":"12.0.0-canary.b76f5fc9d.0","@material/typography":"12.0.0-canary.b76f5fc9d.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.b76f5fc9d.0_1620169683736_0.17173725273818286","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/drawer","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1340cb7d9b06692ddd0b907e36c49244af3368b3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.055d4f10a.0.tgz","fileCount":48,"integrity":"sha512-+rKHZsve7/W2JbEzuEzrnQUvmrM3WjnuqH2sSppbTV3OD7llIh8BvFMWJQ+Ux2lIOHsyzHQnljDI5w1VBoM+XQ==","signatures":[{"sig":"MEUCIQCMClU3YOaDzqcNx/e2nvBQULiuq9YAyLMDswA1jv1WfAIgPd4DSzLiEZb581Tbr7YCWzwfUCexkfLl9cO/ymmlpdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkddmCRA9TVsSAnZWagAAKhwP/iDg5/RCYtpb2OrK3VJE\nC7n5+xQDP4xKR/ODZPi89VyKDztV4GnP4Oho7JbjvMYgSooF13NtMCQwXhge\n9NIfE427BC3RoO9TO2Atve27Dugn57sd5VgFrXF/2w6k4oCOFMWBEqlR5VWp\nvB0xjbXZxoLknPiHBgAT7Eqap7QT+IV+MacAzkkLHlt2TXpKInM9b4KUROOD\nGTdG+1FwjxGZTnDtzIpbP+t1VbhWo6s4BAEvG6nCsQYubf5mCTi07iOH5bFT\nuSNuUPpJargkDhcLQiYs/0ACc9KGsWdjoVtOxgx4OL8oCrKtrL8ig8t4jG3Q\nOY0isWgc0555hsva/elBB3ia1yWTDv/9Iebv8LV5lSVNumXqJXtUQduIIYWF\nTX6j2BNl9MqNV2WM2edr89CGFNlafKUszdbGh+h4Wh9TEV4nws914V/HUegu\ng9qqxPEtQ4o307+/KAi6/NBVrTtiYS3B/3M0GmJ0H/EhaJJ/zxOfkE0z//K5\nCzrWyZJeltl6RkbKCsG3iMlfSFfCpzPtPYfGivyxRRg/bYTNZKMVcS1OCzuY\n5s/dgfXokEFzHWsIG7bFAOoD88sRw4BpL2+UbQ+0Yg9GK+WtNqcvZJPfoeso\nEE1+tyaPUwyqLZyplXf01HKhP/XowSJ7cDyCIreNgniqth8ilIFs+61Wm5Pc\n0F1/\r\n=a8vC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.055d4f10a.0","@material/rtl":"12.0.0-canary.055d4f10a.0","@material/base":"12.0.0-canary.055d4f10a.0","@material/list":"12.0.0-canary.055d4f10a.0","@material/shape":"12.0.0-canary.055d4f10a.0","@material/theme":"12.0.0-canary.055d4f10a.0","@material/ripple":"12.0.0-canary.055d4f10a.0","@material/animation":"12.0.0-canary.055d4f10a.0","@material/elevation":"12.0.0-canary.055d4f10a.0","@material/typography":"12.0.0-canary.055d4f10a.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.055d4f10a.0_1620170598154_0.9159319771215257","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/drawer","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a10065001f1e4e0c925431a02acfd7f0a7b32a2b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.5b6a46016.0.tgz","fileCount":48,"integrity":"sha512-8kNH08PGEti6IIWC5OIhHBOdCxz2hey8r/cbZzCNlSbD3yw1QAzl1ZvpVX0Edlr7t9pOzrYoYLdzYyABXAocRg==","signatures":[{"sig":"MEYCIQCFhssg/XfhUjxlal8JwFB1d9Obltbl6g9/VGbIqvPwygIhANxfUkxApWchHQ5x4m2/oqpdDXeNoDg1GAAHTehhmZ2S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksUwCRA9TVsSAnZWagAA+d8P/1FrSBn/bxdVA2QUVsmd\n9sr2+t0YCcaEg9QrwzDZ8/jbfaakRbI6pljDWEadPMzoOjT8iGiW7ntxlKFG\nXczfEACt4Ca+lUwSQmRtJo9yxPZcVC0oiKPkxb8p2wdMLrL0Hjgvf9PA/CKy\nYpPYcXiiANzYW/PEo84Ay2Y3fQGn/DbJeaEhsl1XVeMpQUNB7DOyVCWKZm2K\nW24ciq/X6+gJEyQxLrM3TKN5FsvZDluxoALnC0cCntqatcZRAmDrgcdC00wb\n9e1c4ewnEQDY/s1k+owFcMsDJw1n2u2lD9ajSpmGGgqlm6z8H5fXWtKvbiCe\nlhhWbnqsrxPCK4JMHw5E/h9573faENMkgDcdANA3Bs02OPJ+yUc7G6Ml6AWp\nWV2TEU2wnUtfP9rP2gEzR9uF8S2we/rVW8K+Mqi8VEnokqh98FjeHjwbFrKJ\n4WXWaapfUNjKGkqNcEC2b8/fXpJshoALeSNaPWXj0MspmNi97z8CHMVdo1je\nxbS8zimH1Zns0mN4wdtxSu80E41u120WzLwPg5nOX7Pgu2bLDJbEjJdkXks6\nFdJjtM1Keir4kzavZpjryOxA2qi5aqHodsEmLZOsB29P3lFpIjhi/OzV9aFF\nUAoOMfQZwepsoMFTOBgfCyfMVkYwEkXH5Wag4RpxVztaTdmrH0dw36F82BMw\n0jbo\r\n=kjdH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5b6a46016.0","@material/rtl":"12.0.0-canary.5b6a46016.0","@material/base":"12.0.0-canary.5b6a46016.0","@material/list":"12.0.0-canary.5b6a46016.0","@material/shape":"12.0.0-canary.5b6a46016.0","@material/theme":"12.0.0-canary.5b6a46016.0","@material/ripple":"12.0.0-canary.5b6a46016.0","@material/animation":"12.0.0-canary.5b6a46016.0","@material/elevation":"12.0.0-canary.5b6a46016.0","@material/typography":"12.0.0-canary.5b6a46016.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.5b6a46016.0_1620231471511_0.5756376948855788","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/drawer","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3164d8dcd8294f087babbe6e75802ae19ea2199b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.33c9a737a.0.tgz","fileCount":48,"integrity":"sha512-drSSFyEyy0gZH777gYzU0xWEIqUUQbAJgiVL4Wm4WS9XO1EJxp/xigpbHHOhSQSSfxMtFU8Xrney822yP6Ju4g==","signatures":[{"sig":"MEUCIFax4xmrHtkLHLEzfGY3Df7c+2IUvfkq82AuNccH1EeoAiEAsvGZKR2MdYmHjibnFgUZqgb+ELHdLh5/iCIgmBf2V9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktXPCRA9TVsSAnZWagAArxYP/irS8S3xCtG/9vzs1gpo\n9VjJPdkU32QPttxO0/TJoodCg608/pHE+zXARVM4pqqrFQkiBLOt4qCMMven\nTJPhuJKjRxVxX+aqhw4hw3SXY42PLj3LzCLQdpzXhYhHZERZRY+tP/G1YoNK\n+pThiVhQNg+zVseYHeKeAdXf0hAR/mxa0G4sgAKVWHC34ID/Gup3JsTIkW1l\nWpmS3IU9dwAom4DWUUUczyArbvFVBUBEwLbJbgAj+bFkW2Ms8Fo0Uj5F7A1U\nVWMXuSo5/z7IEiHj9+91UWSsUxev9P07x0eusev7VD5DWKUO+vFKUL83UqLY\nmIMOJ/rzASwZDaQ1yx6Rq/vMKF1ZxfuPbkR7pyfVTy3cMIhsNauN29UJqLZr\nE5aLtsW6evNrW8W6pDEvrTsLuEpFx5/uF6OZl237JnSoS7ZDqFE+HfGCBVvt\npgLCf7mMlo+WsQmpI9xU0E/MCOzyJ0NvozpjOGwAuzrqFfwne+sbRoTb7290\nRderhJRcSNsr00xK+JoQrBKaJGPUeIzSEMa7EaMCBr1eU64xybXnSI7PIUov\nmPZrsrZb2qQLcEfYRr3GhR6zl2VWOU0mUh96ubB/GqZDePlhB+3xB00aORbT\niAN7F+o1w0G+Dr5IoGJz2NVQxdTPU0D0IXz3M6T4hCHzyBxFO5x/U5P3Ixik\nezIS\r\n=+9bA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33c9a737a.0","@material/rtl":"12.0.0-canary.33c9a737a.0","@material/base":"12.0.0-canary.33c9a737a.0","@material/list":"12.0.0-canary.33c9a737a.0","@material/shape":"12.0.0-canary.33c9a737a.0","@material/theme":"12.0.0-canary.33c9a737a.0","@material/ripple":"12.0.0-canary.33c9a737a.0","@material/animation":"12.0.0-canary.33c9a737a.0","@material/elevation":"12.0.0-canary.33c9a737a.0","@material/typography":"12.0.0-canary.33c9a737a.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.33c9a737a.0_1620235726811_0.039454282777648286","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/drawer","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a81cc07c9d6986d210724f96cf76948f6ac30164","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.9bc0effaf.0.tgz","fileCount":48,"integrity":"sha512-P0830SYjUBb9R2r3n2sK2oK3nfdxdlLvBW3f8xDSe0w/73jt6aUqBTCKWt+ms7gkF0Ik1zhjlvlIOVqGCx5KBw==","signatures":[{"sig":"MEQCIFA8Rhm7vp52WOLSGaWukZ84YDehN18YNs0l42I8d5lwAiAEon81wGyebmzgm3K3YGV+/V5TNrtTSBhSSxbbANXo2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkweyCRA9TVsSAnZWagAAwJkQAIDAidp6bAEbrKdB4q/t\nc81xYgjFt8m1HQ4ACdKdLw3+LiJZhh2jY5Wft9gtlTMuWZzwJa0Roy1UwEAz\nvds2TrgV80M8wG+1S59LHGAaiRJUv86G8mwp1IRWMCOn4zmWPDP2eY9uD3FO\nseEwEzGjZwH6BAn7+x4hEdVEk42Q528FI76KsD/GaMQ7TuGEEVR29ukqpiNC\nYR7sn0AhEO96mwjO1rNV39rUR2movzzQZU+atI9Nbxw2s8ClCkC8F8FIogYv\noVt2CGB6sD2iGmn+pyGskQbw+7q3p5AagR2V0EG6LWqnzDdEWa+5qYUOnqhM\noDdaBXsu6RDUCnyX09kwxqp1YsQIIuLoR00KPtcXorf+gpsYxTrjyQQoUhh9\nPULIa2qiNdmzhetdC0NxQADRAijzB5s6LDz8NYutCjBITTmxMh99/zaoX201\n/RlQ0bHLEooYFAyNoV9w+oYzj2EyU57k2qkGutr6/KLHcu6MvbL3mPcMpN0k\nfs5rFdv9LZZSi/CCQkNDIMV6lPWkrbE/tL02EE/mfse2Nczj1MkPxrfayZe6\nvFBO/QbAY2s+OIAA9Zexl1QU1GDJgUteQ2CWl9QcVivKl8OFcpIA2yALyPzh\nn4FJaQGoVO9l2aJvKMhdXaKBkww7zDhh6/Z8AieVuURB+75DDVhoZcivNx4x\n4lAe\r\n=BmyE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9bc0effaf.0","@material/rtl":"12.0.0-canary.9bc0effaf.0","@material/base":"12.0.0-canary.9bc0effaf.0","@material/list":"12.0.0-canary.9bc0effaf.0","@material/shape":"12.0.0-canary.9bc0effaf.0","@material/theme":"12.0.0-canary.9bc0effaf.0","@material/ripple":"12.0.0-canary.9bc0effaf.0","@material/animation":"12.0.0-canary.9bc0effaf.0","@material/elevation":"12.0.0-canary.9bc0effaf.0","@material/typography":"12.0.0-canary.9bc0effaf.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.9bc0effaf.0_1620248497520_0.12304918343307913","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/drawer","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"152b0533aa43a2acfdf1a09892ca01227dd23a3e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":48,"integrity":"sha512-XCm+5Dkf8YFnlIsQw+3d4IXEfQ5ny1ypqt4q4CTrCdhpFkSjjqBoDUzcB1bn2nbVDFyb5Oq8PhMTYN5rzEWeDA==","signatures":[{"sig":"MEQCIBWksIxU2nRCxtEpg6irTWNbsUba2uaQQCi5LrILg7vNAiBNreNc3DCpcrn9xPHCnlx5L0zbk/UAoEwMG6YaNf6Zhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxFICRA9TVsSAnZWagAA1YEQAIzVzbsbaOx7bygthDF4\nEAxoYbY5AQso5iSX6Hfjt6fjVfF7aUUKDPS5WZylnimRjykorLX6TZoDWC8i\nOzuA9vpGM9TXALj97kI8mYoNYoWM/3/H/AisRv4tMNN3FuVHKwWWOOeH2bdZ\nuYD/Mg1D1vJR9JbgZl6Chmz4lG64XuukmNxXZOExQpQyfbaWCh0tt2gb7rTU\nRkj4XxIG/6DJPHr6Hq3VshzEtDIYCNkrgg32buHstkCz2mYGwlkWOJ5ziIlO\nPVO0KkFtKClV7zkaJdyiCMd4XjbtULaxnJobZIwS4NOGzkMgc6+6eRaut6zs\nUMDFwOZpXyCwyUz4fyBBR24ZgxXXTK4Qw/2WjKKaqKvlvqNVL3e+PnbnCrM6\nVn+5t3JTH3iOkoAZIXm13JYtwjZPNvpf4MBZtCMxD5OATEaLuosSEnw3ohiM\nfZBOs8hAtOIttDR2gB+RNOWFmzyxg+Os2m1pKPmvc6yd0SpQGe2GIgB7Kitn\ny7gGZE/zIVisuZuhFDmDGOtgm+Wl/Bzqy2LoZPo3qO8dA88nMmDaeHBCo3E1\nxhpQkmiXjj6YpcalFAuthv7fmbhnlOt/QTPGWuXeY80tzT46Knm2VZsEF+SH\n3C5yqQrT9MDV5qYkl0VtLExI4+6gQTkp8m/Yyb4bzLXjE9JXCgIVjwfq6il0\ndoH5\r\n=S58i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a1e0f2af5.0","@material/rtl":"12.0.0-canary.a1e0f2af5.0","@material/base":"12.0.0-canary.a1e0f2af5.0","@material/list":"12.0.0-canary.a1e0f2af5.0","@material/shape":"12.0.0-canary.a1e0f2af5.0","@material/theme":"12.0.0-canary.a1e0f2af5.0","@material/ripple":"12.0.0-canary.a1e0f2af5.0","@material/animation":"12.0.0-canary.a1e0f2af5.0","@material/elevation":"12.0.0-canary.a1e0f2af5.0","@material/typography":"12.0.0-canary.a1e0f2af5.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.a1e0f2af5.0_1620250951579_0.8576998719528348","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/drawer","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.06930c96b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"375895cc53c2954de4682dee1d64c29afba8a551","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.06930c96b.0.tgz","fileCount":48,"integrity":"sha512-Cc7HjV/NPtPMt1uol/S+ZL+6e0uf4XElOIRhmQfvyZz9l5NhryNp+vMlCuCF8GJg/vl3g5zA6TuBGZ1DQ4BMIg==","signatures":[{"sig":"MEYCIQDByE4jE1R6xoKFW4iSDpWR36A5bZBfiaahc3lYtoQGXwIhAIjeQL+3Z0qaXI/e5iIFxSvU/0Ng7NuLggY8n/egK0E8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyz6CRA9TVsSAnZWagAAHmQQAKOvCj8swneOdtq9KOA9\nQK3QcsNo9fY+wC2vQzDQ+f8v2GmsBUaol1PbiNVat0Wv9R+HkgikS+oWAGk/\nGf2w1tGz+sKGUobaPN8ret4angoMP3oG51Syi/6VQF0MnrQjOe/x4sQHKj4j\nzAfcdBr4qTYUvWeww8ft4uFE8CZalPotm/vDvL1eTH6bHwF69hPZBWyuLBzi\nnpoSylRQx728SxsnwawF+jyy0P7z7Mizgj0V2nqdmeBqwlKsLgPiij31DV9a\nlCbnp91LYKk4L1h7xPGApu6FanOkEl+U6YnkPoYUKcuDfuEPfRadxbUKdhkq\nacwY6OC/8V5gQKwQNAAIcBplpkWIyEkEtJKrF7JB/JvFfuLwxYHm/ROAM6ZW\ngjf3AyP61hzpWnGvRXqGPdaYt3BBBVS/OaEpuiomuoMt59Relh6ZAKJnk6ml\nsaUxqbGzmvsFpRbPH82CpSdLzsvgJuPmWHr/Hv6vV2m0pJlpw02DvvSIq76c\ndBZr1YAhvNvUj278vsjoU70LqAcIO7FeQZ7pnJk2bVKLmGAK3BT9jRuXgJjH\npfdgX9joQuEd0l8EtqZumhXoayaalYw3jqBtvFIV6/rNuV57/ig0U51vdRfd\nrRmG7RXWl3/67QCVBM7bvqIU1NEQvLtMM17r/+ANrUuo5lta0tcLzXp31C22\nblsd\r\n=g/nW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06930c96b.0","@material/rtl":"12.0.0-canary.06930c96b.0","@material/base":"12.0.0-canary.06930c96b.0","@material/list":"12.0.0-canary.06930c96b.0","@material/shape":"12.0.0-canary.06930c96b.0","@material/theme":"12.0.0-canary.06930c96b.0","@material/ripple":"12.0.0-canary.06930c96b.0","@material/animation":"12.0.0-canary.06930c96b.0","@material/elevation":"12.0.0-canary.06930c96b.0","@material/typography":"12.0.0-canary.06930c96b.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.06930c96b.0_1620258041643_0.8287734491117646","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/drawer","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6db1853d5147634efd98ffa579f2128d0f0b5fe","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.03f525f9f.0.tgz","fileCount":48,"integrity":"sha512-XLWUkZLSY0IRrE4qodIpBa3MdJs8m4IXwAHQO41YL6Aj8eQHaWnL0IEcYmBsepsSY1ne+jRWJKKVuYn8yMVs9w==","signatures":[{"sig":"MEUCIHIy/RAga4gultnEMRs1n8vifweUOeHhdRzSCyTNMgQCAiEAm2U8QnVQQkwmM8ZTAAI1iDTAuXJOl6Yh2ZQz2kYuFQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzjsCRA9TVsSAnZWagAA5lwP/RuyPgK15NjoeewIQMbz\nTCQrSYdJVja1O33IO3hoohuYFC2yb+OFhCtxIE3VA99at0ahPuN8Vqu32bV9\nsEU+iCZcmpfyx+dUtKP/sIhTU4iRabOJBkkHHAmlnIJd2+/cE8hWbtd9bPM7\nQI5nkrJR0KCXFtLUY2xUWXy2vohGHrpZkC/cYiUzn8eFP1uaj6m3+ADu29kO\nyzmDteyGxpDTEgbcBf9LatG3JIZiyZI7xxfBXVi5PdgviNPsNLD4vJEkNIYc\nbgA4U7kCm0Cfkb9xLq+NnD8yAmJQ1Ozm1X6gCPcpLO9rE393j1bxG0631w48\nBTH+6X2d1SPYvEUD7rrWsNWSsmOhWtEsAqENex7qv6eSsVtPy3BWXMKqTiQx\n5tefCo4PQfkLiC/igDDYJQNojbPBw4Hc7AcO9j3MPLyZMX56rSGbMNkGAO/Q\nVuNsZypxLDJL2HQngT8MUJCoLeCgsO/M6iPR/Om4x/0tdo9hc59NTCeVxgBh\nW/fGQECBYfdKgzXr1FOSemw67at5a0UtEVtiO66QE1OH1p6BaV+D2OZiUj6t\n6+WCgXN0xCLHURgqNVAfX+mNvuGvNMw2ZS2w0PUM3wFVCYX/xBpAXx9P1Mc0\nEhSBUe2CcnSIqk75itzOT0C693uDy52l3ZghizSytO54Z94aEhG4YbwWe72+\nxm8J\r\n=M77o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.03f525f9f.0","@material/rtl":"12.0.0-canary.03f525f9f.0","@material/base":"12.0.0-canary.03f525f9f.0","@material/list":"12.0.0-canary.03f525f9f.0","@material/shape":"12.0.0-canary.03f525f9f.0","@material/theme":"12.0.0-canary.03f525f9f.0","@material/ripple":"12.0.0-canary.03f525f9f.0","@material/animation":"12.0.0-canary.03f525f9f.0","@material/elevation":"12.0.0-canary.03f525f9f.0","@material/typography":"12.0.0-canary.03f525f9f.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.03f525f9f.0_1620261099560_0.1348401092766338","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/drawer","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4d149122ec50c425ec9d86093c252725d37161f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.e82ba2a26.0.tgz","fileCount":48,"integrity":"sha512-fYEy4c43ZMDkZxKguPtJC5zB/SUasMDavp9rozrglHzkxKo0goV7Ob5X6XFR+AsY7PMV95Oc/RsV/t63OkIOWA==","signatures":[{"sig":"MEMCIDO6dNPbmBXlrj9aEy/i/yq8FhfaCSRW0YMQpNgwL+gbAh99uGX/tzrqnzvSMfHTDA9ciIz4yZQF9PIZ3I2T4nQP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBIQCRA9TVsSAnZWagAAD4UP+gMzNlGo5yNmNWA5TGWh\nYiwRAnOng7aVNlgXSVilQLgGtABaOgkFX9AIW9WWAJ/9gQJD5wXIxZhrvv7M\nXwcuN3inMvTx+W5ScKEkevb2hDhVIWrTaJu34HcWMYMLiJE5cYieVSNz8tRB\ncIaF5Cy4/QRMWpvfUT8NmTCzH8JDDGKYQ2oczyl849c3jB0rbmuFKaorOM8y\nomm0CKDG+/jZpPSCG59Rbd6L1iZ9X7kDO1afIar4tTCr0AdKvaj8o6mj4vRj\nSj/55nDzc7r5PlGNeFxovlwjC5t96k5fqlZXaOHnmqVMSxKzuyUDL40rTwKT\n8dYjzxp2zClIIUJVaQgdJfF8ckrW9bVAukKD3NqQII5nsUp1eqIinbF1owxI\nhzqVBnxfYtoyCcezCFWmvUaeeCtrVg03oAd1PDELe7To7vggsieyjlmdgptZ\nIGNyw6fYD80PBIkYfctUiJ+P63rvTT1UaF/g/DahjagJzlzGJcJSd8HgMU8R\nx7tloCVRFjDd2J2uoR/e/For7nIJD81jDetpXyUzf3Ddn21cVwKS1MsHmV0b\nlmfHzWZa4Xk3ujr0D4ye7/XZ2brpGOV5ceWvnMomqCcmA6Df/Sg/J80WI23d\nx5/R2wELkrckX2o2eoVrsrVIyYJ1/RA4BFAQ5+Qv1FiLq9spBBg4Z9HDDX7I\ni/qo\r\n=oO7+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e82ba2a26.0","@material/rtl":"12.0.0-canary.e82ba2a26.0","@material/base":"12.0.0-canary.e82ba2a26.0","@material/list":"12.0.0-canary.e82ba2a26.0","@material/shape":"12.0.0-canary.e82ba2a26.0","@material/theme":"12.0.0-canary.e82ba2a26.0","@material/ripple":"12.0.0-canary.e82ba2a26.0","@material/animation":"12.0.0-canary.e82ba2a26.0","@material/elevation":"12.0.0-canary.e82ba2a26.0","@material/typography":"12.0.0-canary.e82ba2a26.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.e82ba2a26.0_1620316688017_0.820580379767148","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/drawer","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28a905f44c4ba9998a8f592d896cea37fb25bd68","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":48,"integrity":"sha512-5O2iyNRM32MT0FyYD/KQydi1PoHpYape3FnAHu37y9FfwyBFYT2ho74/OOfkHNJQXFB34hDKRu708wSR529FEA==","signatures":[{"sig":"MEQCIAv3X8t0nysKul316IYsg8a50KHPwIgbzz3zFPuLDLAxAiAPOgdqRqTXybnkhquS9oCTdepsbS2+PQ2ha4V3MMQTug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCfRCRA9TVsSAnZWagAATo8P+QGJO1Jr1CplmwDMndlJ\nrDX+tBUQWyj7ItRPCRFdoLp4ThuAGAgqp1+H/QpI2GAhJDRB3SbCKqPiqEeK\ngqFdTGFxzOLCvaufGr58/iax8zO3FZxTUKcgDI//P5HjL0zk6YHbFNXvrmnT\nGosaFUFOsl+VDxr+KoO57JSjVNqIYD7epkm/bRUNSi6xKuvlCERgU6ngYLDw\nvRqEg+YlLK+VxsP0QQp/XxnzOC8grwRWk1mB2Mo+HRccmVdg3g7+N7P200WV\nQnIPIx2VRRroPwic/rvn+v8TJBzdc1tbXvb1Uwm7BXR5BzUe8r0FD3s4l/t5\n4MX/aPFZO+F6/CwAFlXwLWY1lz29Ljjv/Ko7iPs3qQqW8YeqJ/KwcOd0MgeN\nlw+zufQUd3p2TMu43n2AmvazMXy/PhYOofJjmrIXvlTDSkYaTW+mYT9JG043\nNCooJf5+t9aoQQ6ELaObvTn7YzsEdZFpqyPchOWFoZDPpMjKvYuLK2oL1xdY\nMxGjvbiElCu25ghiSxilO2OAWK55H2X1CWLF1Ri7xfSdJRhKPlH8NOxkBBHa\ngxVgr43QJ3nprEVOQoP4t/2p1ZMIgy3nodGn3w1yqty0IZltY50Zk6isah91\n6oXI7oeBCaoYcoqgS3U/eohtMFoVjsnwxNJkOnZ3gMWQb4FbRSXH4qNcXzW5\n+Sal\r\n=NOR+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fc7c4e5ce.0","@material/rtl":"12.0.0-canary.fc7c4e5ce.0","@material/base":"12.0.0-canary.fc7c4e5ce.0","@material/list":"12.0.0-canary.fc7c4e5ce.0","@material/shape":"12.0.0-canary.fc7c4e5ce.0","@material/theme":"12.0.0-canary.fc7c4e5ce.0","@material/ripple":"12.0.0-canary.fc7c4e5ce.0","@material/animation":"12.0.0-canary.fc7c4e5ce.0","@material/elevation":"12.0.0-canary.fc7c4e5ce.0","@material/typography":"12.0.0-canary.fc7c4e5ce.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.fc7c4e5ce.0_1620322257222_0.23929084199576844","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/drawer","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.65c04514d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b0fbd3f2ad84c8a96c8c261ba28586689d5cb81","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.65c04514d.0.tgz","fileCount":48,"integrity":"sha512-aDzyLvk07B6UL2mbednQQXnpX5A5hBZLEzB8xfqbUj3IcRMj4yWxPSnwVJkpQ/CWFZv3b1UIXFL3Pazd37FVYA==","signatures":[{"sig":"MEUCIAw9hmOz469fUQWqKyMp1cv264deVzWAc+C+h+jiMeJ+AiEA/mmgQDmRdqp3meaKhZKDb4EKnDNuxsnXGuvyGKR45Ss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDlKCRA9TVsSAnZWagAApsEQAJyUg110YxvOj+luoPuS\nwNCqEWADRbmq/uH13eXpsKmGlH36q24jFCbuBPzisHlRDBz/cSp3iCGhoI1x\n8qM73vRSGZcNHQrsA87cphNPyTnIL511Oq254LzQNmyWS0cuObVIScXCLjDA\nUiDsAW+BZxaE3ZCZBabo8V8CJTsCZT+22MNptR7aa5HdLk64KcMOfgzTucaH\n7ZJX9JDUvhVUHETZSY5+CX1TGVWSo+brOL2gtP8f6JJL1tzcgE5ZFQi9kh76\nhgn6oVObA4/GWnyWgTwGE5a70CYCnmo0TBt9Uz/cmRzrt4mVczrEf3cjC4Rv\nUPVGslpkyKtqHEef7UQ7jcCmV0MlGiu8MyB/Hcf6EiBGf15y+zqsUT0ek7hG\n82wpYc7mHdm9cvyauGotjItgd56e2QVe2g4KQhZ1LJ5qEoWoEkzz2Mv0zY0M\nCgd+O2ikgs68EMySak2KGEkwitILkeeUOmfrET8gJfvTXOxBLOr3il4scVau\nPSu0MEHs4ziEuq0YsPpZe182lWdMajFBlof0MIkWpZpvHFqArPoAwQT4nOKD\n5PC9N8j90WL+VsoXJMZyWilb9ULsBLbbSf9K7jhctoj+FG0v4Ska+ra1zRcW\nDrRHpjZrHbx1zpnh6aAtH7sqqN4dXCfs5eKjnqjyB0yGVMR7e4UyC9kQzG44\nthRY\r\n=6qfY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.65c04514d.0","@material/rtl":"12.0.0-canary.65c04514d.0","@material/base":"12.0.0-canary.65c04514d.0","@material/list":"12.0.0-canary.65c04514d.0","@material/shape":"12.0.0-canary.65c04514d.0","@material/theme":"12.0.0-canary.65c04514d.0","@material/ripple":"12.0.0-canary.65c04514d.0","@material/animation":"12.0.0-canary.65c04514d.0","@material/elevation":"12.0.0-canary.65c04514d.0","@material/typography":"12.0.0-canary.65c04514d.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.65c04514d.0_1620326730105_0.42540925597857293","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/drawer","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac314ffa050bb44476f79773f363f445163150a5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.c97779ca6.0.tgz","fileCount":48,"integrity":"sha512-uXfeRy2gOH3+l5CgNaTYVxRhmZFumXcVcUfp1I/yK/NgVLu4dgPm26V5kbN8csxyhCTazYj37TJ3CF1gusnMDA==","signatures":[{"sig":"MEUCIHwsD5dyp753uNBGz5KALqpbGkv+Ykc0Fjcc+J9qVuxCAiEAyFm1hdAjpQryEDIlTpCyWubDGq0SC0jifZirx8Qm8cQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGNTCRA9TVsSAnZWagAAtqgP/17ezKzkVzn3zcnB1j9M\ne6jtkohT2NbUl8Y+ABfND+FMGL1iQFgZ6VpdPAKzxweKUSZdrueFFOtmwj2f\nYl82yjRN0YFCLPDc66tBKvSwF6VMZOYCys3L5WdDmG6KsdeZNI0o9KtpV7Lh\ndRVbQxNayFKXzpadEPRTcYphFn2m2ZeFAFAYRvCe3+oYmbFV3tFuOKsYHxeA\nE+Nvq0jMlqP/lMxLtIdm7Ang0+4n9Uvg3BvVrKZ6cwgj9RogoLfegzDETeJ1\nMuziU2kDfePxZgmbnDhRIqbO6OEOVc0Ow91RQEe+IicOdHwy29gj8ygyLVd6\nHZ1JsH3mLfppJv/RpAMyErxv9cpqMKJwDFiK9HeIeuQ6x7OLDF4yTn5E6lyV\n9jHTSgHSndn54rol1jQVWKlLg6mJu2n/qu9y4RVA8XaoC4F6R52C5gLtSvMZ\nQNB0zoS52qN/ycIc9i8n2b5sPotuGgGqUuStAiozY4QvdIGh+g569PQIdgC6\nOIm4TeRDo3G9cbuKmcZi+3vBW5QuD9Jf+uCy3q/WT178oD5h+qtO2F1EY3Iy\nXUvgvnOLG7kW3O4bZcf2rJ28UKCKdszAlZLMMm8cvPOijBilAjDoZiWba2YG\nWqfkeHmZy2wUBARsN6Pea7xUjOyNnsngj2sB27RQOiWFh0QiMgiTfaK5MObC\nNvp5\r\n=Kkge\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c97779ca6.0","@material/rtl":"12.0.0-canary.c97779ca6.0","@material/base":"12.0.0-canary.c97779ca6.0","@material/list":"12.0.0-canary.c97779ca6.0","@material/shape":"12.0.0-canary.c97779ca6.0","@material/theme":"12.0.0-canary.c97779ca6.0","@material/ripple":"12.0.0-canary.c97779ca6.0","@material/animation":"12.0.0-canary.c97779ca6.0","@material/elevation":"12.0.0-canary.c97779ca6.0","@material/typography":"12.0.0-canary.c97779ca6.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.c97779ca6.0_1620337490871_0.17067304664895588","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/drawer","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.869d890d4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0061a40cc4388e1254a87bfe162e22d412b0ec29","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.869d890d4.0.tgz","fileCount":48,"integrity":"sha512-P9ooE77fQ65GbJBmADiybngsFXEP84hp+3fXlrXYi2cABlUvUSA1ruW6dcRoVWAVK7nPTOH40h0T2+TEjTZw5w==","signatures":[{"sig":"MEQCIGQFV2uegVBFhzPlUeGpDS39i7Is4NrRpttDCf40E3zDAiAst1bnwUBSG1nsfutdKc0cNaJ2xAPJD2bZY0CDgeYOAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVq4CRA9TVsSAnZWagAA69cQAKQh6q4q4oRcdN+UGKY/\n3Uvh8wOmO1OJxCTtU1LoFm7ozg8aEn7ph/G5cEuCdbd5ir70A4YLN6KdFlNc\ngm+o8+XA93m2Kf5urrYAmE0rnVDtJTJOSJX5eeJEUcXTpC2as59DWIc9QsJu\nLdRE+S/s9Ebhl0LMGc6KWdhMAgbRo2nzSy/PoAZKIIx6pjoOzcE/F1XiLil0\nGbh5B2MVBUUr7S+CmRG47iso92qCmce7dGUwvBietpNmEGt5B1Tdc88qGszR\nugCwl+2yvIV8r28PAZMozoCYYM818smz11Ag1DX5wMCpuM6n5CCVPNwBa7eH\nnjmAWdkzWTM9Pd8h8of69b93kOg44Qv97T+sskaLxvzZ3iYsLMuDrn0OVke0\nGD2mWjnBp4oeQtHFbMVjgUFessyu3XE/h2FHYIWtcPUKCFy9lAx/3Rpv2C4L\n8EgzokAkYzNnU/UYwYDJGyh6rHf8mgvusp4GwKuTdWEVxMjAGDUjzC+4k6GN\noWzqia8U3kPCIxlZlyAjofdR85nkMRxPdr2WTW55r0tKqIYIOSnhf4OQJaVz\nSb4/ux2kS5vMrcXt9MYHHJ+5ub7H1sY5WO3/3h2yK1Teu01HhhmgMyoua1H0\ny/uCQiHKi+VgBia4dpzGX/e3/NFIXPdvMWHrZY2FfpTzwGi+WOhcrAnIAK40\nhM3v\r\n=tW6O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.869d890d4.0","@material/rtl":"12.0.0-canary.869d890d4.0","@material/base":"12.0.0-canary.869d890d4.0","@material/list":"12.0.0-canary.869d890d4.0","@material/shape":"12.0.0-canary.869d890d4.0","@material/theme":"12.0.0-canary.869d890d4.0","@material/ripple":"12.0.0-canary.869d890d4.0","@material/animation":"12.0.0-canary.869d890d4.0","@material/elevation":"12.0.0-canary.869d890d4.0","@material/typography":"12.0.0-canary.869d890d4.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.869d890d4.0_1620400823648_0.2622827352743493","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/drawer","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"565d64004e78f15e1628465707044206540f1d67","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.ec22e1da9.0.tgz","fileCount":48,"integrity":"sha512-Jwn8iBzTPf4M+axbny8IE+UhrAz+1fq9oZqsyuLEXY4Fi/Jdt3lug19/xo7fc1TPnj9tOAGMKbFbE85o2FqEtg==","signatures":[{"sig":"MEUCIQCRPNcQS7uQeQb1piQOq5IxFu3VGyl3vhoyN9kOjFQ8egIgbP8k0ms75TfS8EddF8kJOiRgHfPYF6WR0ZShhvqxHDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXp/CRA9TVsSAnZWagAA7ZMP/3Ozit5DeqXMm6oQ9Lwd\nwjWNWqKYsay5e8/7b9VaBhQ6T4qtIiFlzLPS85vcrlok5SEo8/agqBsMgFHW\ne9OmQ/A7rYSAeSKjB22Rvx4UFeNTKRwLBZOv/Mf9fP1PXAkdDpsKiRFOlRjF\nllDPpvWXNpUqJqy+PvdZ1LEsKzRo5/mIlm39uYPb16aaSjm3pggQQSMSJMg3\n2Whq0u4ttIRmBbOS0fFAz0/YXBWhlsjkvONIENZmAXpERWph4ZgnJzc6wnMw\ns+esdtQpISVa2fjBxQQ756nyJfkr/uRVTSlhmj+V/ouDvnWDkfj+UmuhuBwC\n7tzpJQEPZJKMbdStu6ZnVKa4gs5keBMElDUupyhZm7PaAdDIsofwbnPYD4cB\nzq9HMvP+8CRw9GVqcgxS47Tz57sq3ZuKgwoNcLNR+qK+VLpV0BNSyB4p1mqr\nQz1C1os/qxv/GQTU+PHDOQ41gB8Gtia38Jp/pjyieoLctFI8kVVvB9EYtrae\nJ+lvWIk5GkDXKwU3YajZryBOxqi/BZVEnhfrx61ivqPGd9QW2UMAl9DLGJF9\nDxCaPDES5OQsBuhYXhDdXhMu1Hy0eIMnYRKyF+j8h46UyleiQM7vu9fmSMSD\nQQRbVTUWD4om+ZIIjKnVZFRMsS3U3P+dXz7WRFZagiCp95U59Ezqy5HcNsPg\nXa+C\r\n=ttW4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec22e1da9.0","@material/rtl":"12.0.0-canary.ec22e1da9.0","@material/base":"12.0.0-canary.ec22e1da9.0","@material/list":"12.0.0-canary.ec22e1da9.0","@material/shape":"12.0.0-canary.ec22e1da9.0","@material/theme":"12.0.0-canary.ec22e1da9.0","@material/ripple":"12.0.0-canary.ec22e1da9.0","@material/animation":"12.0.0-canary.ec22e1da9.0","@material/elevation":"12.0.0-canary.ec22e1da9.0","@material/typography":"12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.ec22e1da9.0_1620671102981_0.2381813695024444","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/drawer","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"300bf0c1c2877058bfa573b9d00b9617fbe6144f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-nightly.7427449f0.0.tgz","fileCount":48,"integrity":"sha512-JV9wdzJgqp0Cm0l1fyN1+8iCeIC0KuAJ9BKO4Z5yjm6Cxp6849xKu9E8XlwTQXoUSP9dHlh+D2pf03Dd+dn3/w==","signatures":[{"sig":"MEUCIQCdUZCORW3PTNyAJaghLe1rp6Ib24JyE9ORzL7bxpmL+AIgRIWZcpbPXChL54PFjxoC9dZQAHbby0Pe6pFolvJsKGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX9GCRA9TVsSAnZWagAAgqYP/jm9Q+sqOE662n5LND2v\nkspW/8EhUQSczG1JPFFgTXBXN8zZ3g/xGNV3ngGLtgP4V8P2T0oqV0he+2sn\nBRSDay63ZOJtUe9FmrsDsMtcKuqumLFiaLGw6guplrjNMD8U+oelp5jrtrcS\nlEY20lwidzdLAlbvwHy6Xl1EJtzazkqxvmumG9kL/WxrnnVJ+zTxgSN/ezY3\njkWsGlV36NgXdt1Dp4WQtim0qFLmVczrr0q+6I0DqB+vZj9DzHDxyFgjPWjV\n1/HHZYqA86BvT85M8cm0cobiDyFAm+0ghJtQgr0269bCKNrQOQNu4+ofFL/+\n/XClNMSv3+6SYyg7lEmqAwPNd7jJElwKzHNe5DfkbPrqIu601Cl3G5mZoVVZ\nBRjsJuR5d1TylI5xYJS94C+J9uQnpqA/1gMeM9HdkXqOiIUSRLt2gTj+UljR\nGP4TLl/EPGXjO5wmCw72fTpIxWxUMVDnZFCDiqCCbTnsd612PVk/THPNcGVM\nsyRs9f2jCON1B6MYDDV2Oay1QPy1rvzTDai56+dgWNahu8gqjcjggryEUiE9\nbQw/iNbf/ieCnAjY22+xcGqgDHmt7g7KHi2diRFZFFVtCUKFVCujGK0qN6/1\nzJcNozZfzrvcJ4ji/3JDvGLdm7o5g/JiYsOyzZVzCQJlwKr4B2rvFBkEW+nJ\nxIoE\r\n=W2N6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.7427449f0.0","@material/rtl":"12.0.0-nightly.7427449f0.0","@material/base":"12.0.0-nightly.7427449f0.0","@material/list":"12.0.0-nightly.7427449f0.0","@material/shape":"12.0.0-nightly.7427449f0.0","@material/theme":"12.0.0-nightly.7427449f0.0","@material/ripple":"12.0.0-nightly.7427449f0.0","@material/animation":"12.0.0-nightly.7427449f0.0","@material/elevation":"12.0.0-nightly.7427449f0.0","@material/typography":"12.0.0-nightly.7427449f0.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-nightly.7427449f0.0_1620672325853_0.8608861720097059","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/drawer","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8b11589db1a4bd0d4e0a28cd836ad4d768dfd61","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.957cc3bf5.0.tgz","fileCount":48,"integrity":"sha512-ejmztmIBhu+s7yHWLlQYlNBurV7fzDfwo5WQjxnz3yO/rMkQCWsN5XL2oVW5rSaCrbDHRl7/ZX9zVOpTHe1BSg==","signatures":[{"sig":"MEUCIGVbKcBnfJzMgp3WprxgDR7vWORXBzMZiQHxvOO5xDjdAiEAuvxacX6m43dAsN+2Yez19BLFR2APYGnAJjug8mB/Ge4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmax8CRA9TVsSAnZWagAAg+UP/R9TJiq+8jY9V8rsZlXW\n0nRwZISFiDoTfg+c4e9VROLOxzDXqUAiUfmSZzZb/XRIPTjx9lONJkWEBfom\nEA4Y6yYosV270S9Ho6V5on3hXqLb/o6vTbmFCSIqHikHoQZtlvis2muqfrIW\nDu+GK0vbRwIZ/WyI4PkR3zgL5kR+N3eJwJ+itO1YJBVXYickcZyy32TjtGmw\nD1BpYzP/jyAnN6hn6/vbS01+VFucND57GGtviSRvfSIL7e2qPeIZ30gzaooS\nSNzCOUYgqOBolW57hrqyXCZ4l2vlx8yxH/lFYhKPU4MUW/94aQLZsQq7Lw0V\nZMUkab404sNBG5LxC+xU6q3NC7p9Wz4hFzcnbFJH+svwdzm66/oG0waXgr9h\nck0xiJYOP9r8H+Gvv8yAmKoUxiU7bdXgM/VutemDnNNzHGF3Xh/nlP7FLmjE\noR7AX8Ow+uWXJ+yJIq23YO7bsdznKsqZ/+M/BB0mTtu2uHRAvAgbvamN43hy\n8jso4sCsTlv59qQaLt6WLFGXshhXdYfjOCA1UzpxOtTo7EudNzTN+y9TBs8g\nhh2TFwxicoElBKvtqDVBmKyzUJuNRrKzsvWgmpPDMYQOxohIc9AZBpaIPBG4\nxrDjeo9PwnVQ6IZfb5+0No0hsklMpjn3bzJL/Wi3E4ZF1ufR/44zZtkziw4n\nsvBn\r\n=lskc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.957cc3bf5.0","@material/rtl":"12.0.0-canary.957cc3bf5.0","@material/base":"12.0.0-canary.957cc3bf5.0","@material/list":"12.0.0-canary.957cc3bf5.0","@material/shape":"12.0.0-canary.957cc3bf5.0","@material/theme":"12.0.0-canary.957cc3bf5.0","@material/ripple":"12.0.0-canary.957cc3bf5.0","@material/animation":"12.0.0-canary.957cc3bf5.0","@material/elevation":"12.0.0-canary.957cc3bf5.0","@material/typography":"12.0.0-canary.957cc3bf5.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.957cc3bf5.0_1620683900032_0.16603360361329123","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/drawer","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"920fc7672022e7c8361207c687b5abf9d4ef36ec","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.88a33cd70.0.tgz","fileCount":48,"integrity":"sha512-v91QntZsjSw1vJ1v8UZvZ2J1TvmtvyJ8p2QZt6v8Hctk/vvrTWdIKLg3faL19u8WIwQB46qdLpOaW7Gj2TvfTQ==","signatures":[{"sig":"MEUCIQCoVSVmTIHUSaXaRM1eMVABmYBCSs4qYzTDiN53ZGcygAIgeE2WXFD5nU4CIUJsA4YUY70N9v9u1b9/Td5zHEqdTzQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmctvCRA9TVsSAnZWagAA6NEP+wbQBzVFV1iM9gcTX7HX\nZvyBpfELCdAxv6KUCt58tLgDm5B7Pkz5HIevUr4ovHVD7rDtxF0VBCRupWLQ\nVXbD44zIlBlsTMGLBi6INC2sRRjBCSxzL2vwnwz/9Z+jt+MeIfJgeHrTeRW6\nNuyRe1sx3CUHnXoblG+SHt3mPo9z6gxxHq/8vDsfd/rED39Znz96hYTElxEB\nMRkpd5LfBQPdQK/ReHvQKxJEHDeyxh4zhj7HbAWMVC7ij1r7SRlt4voEluET\nCYz7eBl02CjE4IwkwP6dKE04AqnuwP3iN5k3tS3vTyMCuMIkxDfQP5ptDrRb\nUxrkWeaVv5m/QnAuBR6TzU86cohDUlMd1P+n9WmGyQqDLlqLw+GrkIQ+OFFo\n+GPnXtdFk9/O6ldttiRsKa6y+ti8DR/OJ0iL0zBPWmtlvKE8WN7l0r0OxtCC\nPcCg+6mW+b0oEjyqR9/NS2g38wi3vko8pUo93fWM5N9JZmtC72wGpGXhbnZc\neur4rNJLJq5OeGcYEk2cI1rqGhTLbaaJbIAhts0WRJA9kif015J5hwovpK0B\nV0V7nMNtXt9n9QdqTE6WDyUxtnaVDlZ8os6ehQEs24idHeJWyXyZoImBlgqz\n/2V2wIUFH6HIUxVgqqXx3tZQhG9nJjbP1B248gtfzY3ERax8woWOGij0w8+9\n6kJ0\r\n=vZIs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.88a33cd70.0","@material/rtl":"12.0.0-canary.88a33cd70.0","@material/base":"12.0.0-canary.88a33cd70.0","@material/list":"12.0.0-canary.88a33cd70.0","@material/shape":"12.0.0-canary.88a33cd70.0","@material/theme":"12.0.0-canary.88a33cd70.0","@material/ripple":"12.0.0-canary.88a33cd70.0","@material/animation":"12.0.0-canary.88a33cd70.0","@material/elevation":"12.0.0-canary.88a33cd70.0","@material/typography":"12.0.0-canary.88a33cd70.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.88a33cd70.0_1620691823003_0.8636983898562773","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/drawer","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a1fecd192041f7bf778bdcfaf0e78619a7c50d4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.d20dc6dba.0.tgz","fileCount":48,"integrity":"sha512-6KJ644WgKFHFZBmKSuPbttcfzU91ptXgQ9ORz22S1CfG0e7Gbar4WbDvPosSca6lSmeMFQ2NNf3eM7wbPCoDmQ==","signatures":[{"sig":"MEUCIQDkQtbWxgP5n3lkS4ItdgrxC+AKZKwLpwr/8Yaln7r5oAIgJvsn6yoZGoC0JcwXV0zzz7LkpXTGO2GJXuaBXMpvQzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc8vCRA9TVsSAnZWagAAsjYP/A8Mi4yNl8G4FayQFVli\nzbX6FUOMqzJY8exHE1srlc8ZbDxq3Rq2XYZf4vk4l9/ZE9MHYWS1JvxXSY9Z\napIeQBvzdQgiGMGAHJNGVkyblvnx9p2ahbi35z8SjLqk6Oqp1N2FXaZ+JaHs\nNjrEHs3aUbMU52IwfI3/1JCWt0ZMC+dJaavkU2fdTi9tviuGs9ELUUsZWcfN\nRD76BfUSNJJ5h/wqKqOlkMysnBCI8yX+R8QUoCgic/7Pob+IerB+p+j0PBnV\nmihB6vov1u1wl4ReLgs5pIMIfiyYDG5ib/84Sgp+Ju+9X/3xQUgvkKqrghRz\nkpsyYVH9fl+QlTwmUyJIPbLPR25Bb3jcB3f7ua2MG846IwGxUfNQ/lK8xvCK\nOcP7w3zC2xmE+M+uWMggJXuJeeRAVwT/gkSEFEG83eOquJkkYEzSQeK6w7sY\nrA/5N2il3kIj4cCuG1/F/kj5Cuvna90evUTYAhVxTBK/ONOn+aZNYuLRLTyr\nS1rICsYTDUKxzlo+pKUeekxxhGyCtSrHHkCrMWk5AkZTIjP0WOna+I/Q5Aev\nFPM7AaTjFOO9UGxLFYMSB4Gg27a+Rz3YTckhSRaQ4T3h637ODt00gggNApJP\nzGsIFRvqmDlNNTBz2RJuzDEqKEm++x7yNqf18z82jD9ENXkCW+6ZGXVJegl7\nBGZO\r\n=9kvl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d20dc6dba.0","@material/rtl":"12.0.0-canary.d20dc6dba.0","@material/base":"12.0.0-canary.d20dc6dba.0","@material/list":"12.0.0-canary.d20dc6dba.0","@material/shape":"12.0.0-canary.d20dc6dba.0","@material/theme":"12.0.0-canary.d20dc6dba.0","@material/ripple":"12.0.0-canary.d20dc6dba.0","@material/animation":"12.0.0-canary.d20dc6dba.0","@material/elevation":"12.0.0-canary.d20dc6dba.0","@material/typography":"12.0.0-canary.d20dc6dba.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.d20dc6dba.0_1620692782487_0.8716779776737646","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/drawer","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53d1efd429c0ab9c35aea8a5224386f2fd640b7b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":48,"integrity":"sha512-Waxlt/jFcQFt68AhiVELVGEz6VrjIsWNfvJKJ7UtLxRMP8qxzn3gtK1VJFld4KJMDrEzIRUPZXCPn0S+hcgR3A==","signatures":[{"sig":"MEYCIQC6rcS9dEjwoeVwhIiRPp+whMtWRS1Equv3wMQMujOJ8QIhAJ6gaYsws4aU21ekiLeu35vAvxd9/Mv3u2nn2xLlE/qT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdccCRA9TVsSAnZWagAA/oYP/RwZulub1erZTZ8TN2wc\nPAq7EadewU8pjRMTEq8SI/uiSWrHq5FYFopMuIe6jUENbNe7u7jk5qggcK5b\n/Vdl4Rob04GHQKouOrfM4fLawxLUKxAkO+vdyBvYcYoEGL2TibXv9SslPLwH\nGLIOY3RotOvDnc+vtwAvvaRI/TXFlHeml18GQL44woEjqJxPeic/2SglHFXb\nSOxV9Wd961ntvbbtFlNeNikTr41CRSdAJVQfrAaThsHQ4expFe3pG+HTLzNw\nImwgtDXNPlRWHDRxzfG+ZBFSQ1L8MxUHjA63vpsz5KU0E5Hj1AAnVio+D9x4\nIItmiPPSAFfCRYZPmn/dP1SgH5kYo1wb7Oy2wU/it+U04XXN3tv9CRAYRemr\nJdNEeYRZ53y3fcHeOc9X0R2xHs17pcmKiPSI270xB5oB1pNxZcTNWuCDuVIV\n83mO/UVMaW5RVgQo4M92ZV8g0aNeRISL1mjG8fMBiGs2GFopY9X4wTKiLmym\nLekDfULQ3MlMWROMcpARd+bb8Vx20QQ/Jg7OyiahpiTl6PBLGjfjukjKjj9R\n01BtZxJT0gEZ+Sc5LANxyOKXgaxyGrYCvFpzxcGymQF2KmOXThSxWrRPq8W7\nWzsdcXWEMTsf1J2AX6rlnF3ElGewoIPDpbnj9L+ZMP5MvqvhxlyOBYRY4zUF\n4nHc\r\n=iiL9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0ce2fdb02.0","@material/rtl":"12.0.0-canary.0ce2fdb02.0","@material/base":"12.0.0-canary.0ce2fdb02.0","@material/list":"12.0.0-canary.0ce2fdb02.0","@material/shape":"12.0.0-canary.0ce2fdb02.0","@material/theme":"12.0.0-canary.0ce2fdb02.0","@material/ripple":"12.0.0-canary.0ce2fdb02.0","@material/animation":"12.0.0-canary.0ce2fdb02.0","@material/elevation":"12.0.0-canary.0ce2fdb02.0","@material/typography":"12.0.0-canary.0ce2fdb02.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.0ce2fdb02.0_1620694812144_0.1194918981575448","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/drawer","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.cb162da37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d60e5d8677a66eedba333bc577e3a0318b50b23","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.cb162da37.0.tgz","fileCount":48,"integrity":"sha512-4owuJ3C0CAVkvxP37Tl4AS4N1KyDiRh2CX4GkzN9RLUh+fIwvJM1sO3PHDlvWhGXHokLQxYtvHz9qB23u4qi9g==","signatures":[{"sig":"MEYCIQDV/SDw+J0QmTAVaaGnWKLASYMpvgvnn4soYuE5+1vFqAIhAILxEJwJG8op9RGYU+m5L3E7pQGYqHw5wJWDQkx7uLUt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeUpCRA9TVsSAnZWagAAt20P/0u09e1wZAP8MCAZzBI4\nehceaZIXdZQXvAzJgfc0C6B3JS8AYJQC1n+pHR3/BqS4AJZuEVXbfJMyppLu\nboyn5E7sEg9k1NdkjuqregKoi/3f791jTcAVPjKEUYgiE1mB2dfQzupuDYhZ\nrOIHH1XnRfQsVsUBgmxuPo7OhbPkl6wF7HHMLEgbYKNAfoYfAmbaBCry1WT/\n8oU+g4r/OQMdXAxUShiAqwArYeepsh5uuTDc28LgOXgyCZ4/9s9Z7pzCcZnG\n2G9l5J9WgcQ11AD7pm1gKukKgcMQXfPLyN15ZwpHY/dF5KEdC73tUihj/icZ\npPLsr/AiDbqWPP41gFzrYKTvXh6FEGI+bUXtRlyO4xg/3LknAmnx09IN9h4+\nnYrtK8tIkVdET1FXlSN9NpUgL0j5nMehX7hKGjUgi7urn6k3LlBV/bAU+Nxx\n4FJvLFrRSvvyCS5vtMTz1J1Bdgqh7XRQoZEPveO7V1h3USAsF8MJqQy4yZDI\n6V2XWq4GVYjFqiwjX5WFpo9gpVVdrJNzdrsA7HFjniRXfNx+1F6sAm7WlkdK\ndlMU4d0I2ZydKHg6QS0/E0tYuTi5r0jmsrLByH7LSjZcXDAMUEkZ9ALdaxJT\nECoB0wDML14PQGvIHf+1GeZaHCrSNR15b2LbyLLZhPWN47lrch1qqQBRc+p+\nNNWr\r\n=XhkX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cb162da37.0","@material/rtl":"12.0.0-canary.cb162da37.0","@material/base":"12.0.0-canary.cb162da37.0","@material/list":"12.0.0-canary.cb162da37.0","@material/shape":"12.0.0-canary.cb162da37.0","@material/theme":"12.0.0-canary.cb162da37.0","@material/ripple":"12.0.0-canary.cb162da37.0","@material/animation":"12.0.0-canary.cb162da37.0","@material/elevation":"12.0.0-canary.cb162da37.0","@material/typography":"12.0.0-canary.cb162da37.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.cb162da37.0_1620698408919_0.8330466578442686","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/drawer","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1132ff7c9a64238de76071b0849c98a84434f129","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.573dc7ffd.0.tgz","fileCount":48,"integrity":"sha512-JJb7iKK7psfJwA/mPdaySYBh+FMtCNj0TpnRc0Us74BPgO3T2vwLKxlCoi7ojn5zNt6fbW3ia8b0knB7pV7TvQ==","signatures":[{"sig":"MEUCIGMmKNc0Q1wmWcnJ3Og8BgwJXkPuy3/oc5XgEy9TUjCYAiEAp9rM2fDUZjPxuAf/6i2aw3M4jcX8P7IpAMYd5zcWWT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmemRCRA9TVsSAnZWagAAzBUQAIF8ww4EFOB932KKEIRo\nC1DE4WpJND2kLPxGLbtlFK7AouNLKYb1ciHkoTHUTORfz4W9vNZSRz2cj2uV\n5EfvunUKsCwLNQicsmQ+myL11beglk8p9wTJE9LG1VqfXmo3A44wUpcyjxun\nPbVLWhFZvxbm/xLC/nUJ5hq5SyaTrvyWkjKb4ptocfgjTfW5rxCA4nawIPU/\nINkdzqqkFXjjbcujUDLpTUqnFK48aFZOhO4mN6V08NJoC03TSQS+oc/CthXL\nQuQz+vvIx3DO6iv9OHz1IbIYPsU8J49CP3oKONoS0C+9DmcGOgoGyZeYyyNN\n8yD3EXNwG0/rjdxHB27g3xfOH8QRUH+K5jhonwfZWgCQVxkxgfX0Q6kD+2H/\nYA2a6B22BFRaefQbMX0q8cgtJBpDsEYO2gxwQx87vXbV5kfkHWPzoJiMNK+Q\nQPAfzcGnGhPQ2AhQT7mAn/g10K0nh06LD20HeXtC/KFiUQc/vAOmb2wIKPHv\n8Eo+325pQty6PJKcdA9F1N6XXXVHsp51k6MkOxAc9TRRV+hGxf+tH+sBDQH3\n5rkSvQm56REkMV7Avqk+WcAAjrksaGZrDUrpVB2mD9Cp38EzPhg8bStPk3YX\njItYb23ynUcw9LhaG4g56P5hqimV98gpBoJN67mqUU6yQlqTZh6qjPXQC24n\nZMy5\r\n=l0j+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.573dc7ffd.0","@material/rtl":"12.0.0-canary.573dc7ffd.0","@material/base":"12.0.0-canary.573dc7ffd.0","@material/list":"12.0.0-canary.573dc7ffd.0","@material/shape":"12.0.0-canary.573dc7ffd.0","@material/theme":"12.0.0-canary.573dc7ffd.0","@material/ripple":"12.0.0-canary.573dc7ffd.0","@material/animation":"12.0.0-canary.573dc7ffd.0","@material/elevation":"12.0.0-canary.573dc7ffd.0","@material/typography":"12.0.0-canary.573dc7ffd.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.573dc7ffd.0_1620699537365_0.7073790150434562","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/drawer","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6336e10ba3c85f8be42246d7dbf5ab1fc93dc8e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":48,"integrity":"sha512-yHy0Uh1NqhGCi4mnVsD26jz/Eb2zRrIGSqufJhP4o5X0TVH7yWc97cNdlCviQGQNMztv8b8SJDAfEfvb6te7UQ==","signatures":[{"sig":"MEUCIQCrp8CaicXatsMkKBBmBM6l8/+6a2lBOeySAS0Wf+AmsAIgUgzznY4xGjjvOQ+46aUdBpSdYpvqxfIhU/wRtWeyKrI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxIRCRA9TVsSAnZWagAAItsP/ityYYM9qel1yG1VVInu\njz63SXDnrn/QmF73D/cWnMe2q8Cfk2bF70oBKx6ik3ZuoG/UYVBf12WQ4GyG\nZevRnA/sFRdpotY3+vMqwYGtEbKTHeN4iVeaK/8UpQ4v+3djS5DUP6PbkOQd\nH5pnAWLyg1qBKIbrR6lQ8O+qOLPOk9tOMlTSE2UKOKJBWiEEV8yIhyn3xOLI\n1KgExObTyq5QJhxbXjOHoxl9UNRU0JQ2nGwF0cPk4pdH/nvEJFulYMuJS5fQ\nvUvQCYq8QXTAxXlvZHizYyFUaPyutfp2c/DnrDrnSg1PW06gD/zpYlCUxiq/\nJNLqF904NCAQ7w5X6W/dkZbmW0UJPBzL771QIyNZXbVFEKIpr26aQlqN1tei\nn4G/REPUFzfqlv8gjXRqcxUSd4f3/1cjWbHmnfyA/lDWNI0WNDde1IRKAxYt\nR07+1kE0fyEZUKA55KScCDvVrckNEjgQ/Y5Cq+se8/Jr/wC6IkBkMAVsKXfO\noOJhaG2+JmQrsy//3EQ9SDzkYKcjXhxxtIT6nmSMaR99KuyAQgCaVR26kDa0\nDYcOIzENpUBdF07JVdtgCW8ucy6z4xYm8BkH6pl7S6wcdZ3yM6hvqucuM7ry\ng34HJ2MjH7gNCjdLZYFY9by5DtLQI/6aMQuCcIk0T61FbkvCygbWGIFa4M0c\nRxIC\r\n=k3bd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f6ad3fe.0","@material/rtl":"12.0.0-canary.d5f6ad3fe.0","@material/base":"12.0.0-canary.d5f6ad3fe.0","@material/list":"12.0.0-canary.d5f6ad3fe.0","@material/shape":"12.0.0-canary.d5f6ad3fe.0","@material/theme":"12.0.0-canary.d5f6ad3fe.0","@material/ripple":"12.0.0-canary.d5f6ad3fe.0","@material/animation":"12.0.0-canary.d5f6ad3fe.0","@material/elevation":"12.0.0-canary.d5f6ad3fe.0","@material/typography":"12.0.0-canary.d5f6ad3fe.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.d5f6ad3fe.0_1620775440562_0.3119860766442655","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/drawer","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"311a94b62d4f78a224b747251fa569b4e211672a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.25751d2ed.0.tgz","fileCount":48,"integrity":"sha512-HM7EhYmMUHCBGt0OF8oVeCRvxtxc3tl0gOjw5j2RB629PA6F93nFSeniy4+hDXi98fcwmtVMRwZYqd9PUACgAA==","signatures":[{"sig":"MEUCIQDRCsmxIku/gwXpac6Afv4fl4H7Uhn5SpJJWgDapSJrhAIgAiHpsA7AxENRmBaLFwbpuJinquih1x68Quns/7mKLlw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnACMCRA9TVsSAnZWagAA8UoP/3MLoW7FzfNt2yJz0j4K\n7+qtJMd3C5LkXttOH5W8/rgc2lRPWtDpq9G23b8U022vEWJd2ujQJFju2fLH\nvne1UM4EcTpmHYwWTswvQWBBYvEFtVRGAiaOgrPVE6iWCyLCSVtjLcFpWKQX\nN7Db/hpd1tESDthr9oqjOebudNZzTeoQ8D20s4/+A7FmpkIkYZQt3nsp/HiX\nopMLrpgAVQRXqwdYasUBRNLRI0LnNFT/XFHNOg79KVm1+YGZvFljWzJzi3oz\nRX68unluhAftENCBtzaZObSQ4HVJuHJY/+wTurmChxK7XbVM6W1u32Ld/AwJ\n8GqkdHFhcJWAVC0cFuXTsEzxG1Q1H7Yw1VzT7F01sa/WxqjGUti/FgwwJFSN\nxJJKFUKDlWHurYGZd/Xql0ElD/P7y/QH/cYUTJzwFA2bnH56t24Ligzc+pxX\nDCuSbS5ED3oRaUYT/XdaP4jHSVg7sTW9t8IszeRiYxQrFmfVnEaC/mY0m2DT\nkz+NuWBIbzxcXQAKuejD2TqBaQhCqcQ62yk3HYfF0pFyJ+TuXyOLRP8NlsTL\nvon4e4A9p8AgnWzNZJ+CKb+BqITI6bHf/g6vjJypB/lr0NDViB3TTsGpuu2s\nfosKhJ9iNajwc7SwrEb4CrgrBdmtcP3YYtPYATj8Lb+qeHAxD8s/2pvLJuq5\nnQBy\r\n=VfqI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.25751d2ed.0","@material/rtl":"12.0.0-canary.25751d2ed.0","@material/base":"12.0.0-canary.25751d2ed.0","@material/list":"12.0.0-canary.25751d2ed.0","@material/shape":"12.0.0-canary.25751d2ed.0","@material/theme":"12.0.0-canary.25751d2ed.0","@material/ripple":"12.0.0-canary.25751d2ed.0","@material/animation":"12.0.0-canary.25751d2ed.0","@material/elevation":"12.0.0-canary.25751d2ed.0","@material/typography":"12.0.0-canary.25751d2ed.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.25751d2ed.0_1620836491905_0.8554232682352336","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/drawer","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bee8530af3cf7f3aedf78e95b871deebc88cf41","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.a23ecb682.0.tgz","fileCount":48,"integrity":"sha512-qPNAuYn1MQiqm/6EXS1O+OaVXaaO/w3GAZ7KR1mbruWQrJJVErpA/LUznhngHJ8DXU3ORvOAIfX1CqkxoL4YcA==","signatures":[{"sig":"MEQCIGZF5T25HBX7WLfkvN59SHKP+Ls4OgzmXxMHfDTkqVJGAiBkITBQt9neTzI3gXmUI8VbcBkkAiH/124KmhkyLA3iMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB10CRA9TVsSAnZWagAAyh8P/17d6f5rIO6epVyDqDrd\n6XZ1U4TF8F3aCpMdShtLd+8d7y0PKk8fthQpCkslpzx/3Dg1oQYMlKtw4+1L\nf1OoYPmznPESctVOpFNUXvwOectgPEjKL9BPaReivtb++COc5tEC/Ota5zoN\nYwbJ4uJevlJTBubwiuSpbHLb6RlopZGYlBNYWpDn4LYmev9WUn/KOvwmUXdj\ncC7q81V+XYCqDCmBtsblcZ1qODbfku66HJ86YNI5xc1x6LO0zSTkhlfYoDQW\nTkmlBMf1j3K9gjpvwLaHwiJQz3J/fOmgMNMZB/nLavHOD38CvUa/8cojvGBs\nKu41yVNWFThVE9JKwvGzXKEbSwcChmi/ONoZz4Kom/14c9eB6I1yiD6y/IxZ\nxSOiMmItWmACs0Hr3Ie+mNgDht7gl/v2I5HUoiObwiUZlx8P3zppThRSWJKZ\n/1iv/rpf37GiB8Oi3xiMyo27b5DA97TspAYo2hJjZxU7slyVNwgYJkz9UQaZ\n2JSB/9eFwpE3bU9pOZK1gbX818eCrMVFWFPF1hEKrgGMS5eA0ARenhJNrzzZ\n1lDuycfaqaIUoCZ+fvcJo12YDZn3VAlY7aMmx2I1VxLvaSG4B75PEeWRklmv\n8eDW+Cez5PU4tgSyh9EHMFRUMyM20xpUHqz8/zSOpuduzpo0WUMAOxuuUM7k\n9lFS\r\n=yspG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a23ecb682.0","@material/rtl":"12.0.0-canary.a23ecb682.0","@material/base":"12.0.0-canary.a23ecb682.0","@material/list":"12.0.0-canary.a23ecb682.0","@material/shape":"12.0.0-canary.a23ecb682.0","@material/theme":"12.0.0-canary.a23ecb682.0","@material/ripple":"12.0.0-canary.a23ecb682.0","@material/animation":"12.0.0-canary.a23ecb682.0","@material/elevation":"12.0.0-canary.a23ecb682.0","@material/typography":"12.0.0-canary.a23ecb682.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.a23ecb682.0_1620843891800_0.48442144705064694","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/drawer","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.33a954852.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"874a7a768532c6a25fca4d47f8d1ebbf98a8a2a2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.33a954852.0.tgz","fileCount":48,"integrity":"sha512-IlrpY3Ojmm3eDkE4lCEQL2gcrDGBb26uvhvEtuRoWsbL4WGr42hrfNmFLIRfFy6PuXhI1JO07ILH+hz1PvU3rQ==","signatures":[{"sig":"MEUCIQDkd9C7dIvwCQwFlKDG9fAeJ0Lq89KGexAfDR9cLH+9lAIgTMiLmnQsuugnSJY9MAXCpu0R5O2opdp2GPk5h40/O34=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUEoCRA9TVsSAnZWagAA+NMP/06wTDGqiCtpTUnSGv9o\nRoTlyyXYqhqp//3F2n23gvpo4hfKSVgQhGNjw78VZL8zpqZzpc3zRERaC0Yz\nWncThUIYrrtOelfUXmiG8ghYOkR1KNSBRttJP848T1UtR8D4TYRBxtFNFJR8\n/HRphGRL4l+nySyGxhJt4WJt0pW5wcaLjYCoHmuSlF9mGrjBEddpBgy+Aocg\nXgMAoTMECQekinjN2AUpHvWVmMVf6ee6OZeFEjb2V7Bx56cTc+YigR4UyHH9\nw+85LiNGsvDP7nNkzWcBhpWnGrvhFI2GsVINUHMiN6WMOfiF1DzVP/uAMsvc\nnUR4GUhKbFQgepS+yXXpUZVTwB5eN4gYrywdze0VUDYwvnSO7x1bRg+3GwSm\nSdfJ9NlzRPbXBzsWKeW5/9sSTA8row5I5y9y4L692gcIra0QiAQjEGIi5dbL\nDGJgZAEFhTkVgLMkTEzuIz8+M9Ny1ypvleF+C7S5w4wn0KSwqOz7RQfnNcC+\nB3lvFL9emm6u3HcSaG3UCI1iBIlLLFmd41d5L4I/W5sBEpVTZ/u/6G6ZS+jU\nEZBL75z8+jRLNqyIh3Z/a9WxES3ekU+y59B3l1HwUOiHvjcaH83R5tqPXO8q\nVUIBsMRQDtCl7+HSMfIpnc5c7PN8FTihB90sQV5GVA7gOAK93BHTqahKEtFm\nuhqn\r\n=8fSq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33a954852.0","@material/rtl":"12.0.0-canary.33a954852.0","@material/base":"12.0.0-canary.33a954852.0","@material/list":"12.0.0-canary.33a954852.0","@material/shape":"12.0.0-canary.33a954852.0","@material/theme":"12.0.0-canary.33a954852.0","@material/ripple":"12.0.0-canary.33a954852.0","@material/animation":"12.0.0-canary.33a954852.0","@material/elevation":"12.0.0-canary.33a954852.0","@material/typography":"12.0.0-canary.33a954852.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.33a954852.0_1620918567904_0.7508423300461957","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/drawer","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.a4484849b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bd75d608b88ec0cd66e318976612397b62d2f07","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.a4484849b.0.tgz","fileCount":48,"integrity":"sha512-XID0dJpGY0+ac3rjOT7APhDpEbDMdjGfYokIqLvuLEViZ3OoKEfEbq31pU9NhSpkD0quGEbEmIshJCDlt9xUZA==","signatures":[{"sig":"MEQCIGf7cfLuxQ6SAFRZhxir5spmwOLYsF8NIUcfOu4//ZJoAiBkuNi0tUUZkbgM21WRtpRf59sr2zIHGs+0QnKEKaeZEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUaXCRA9TVsSAnZWagAA/XAP/jW2JWga+HY3/FooKXOr\nnQsHbOjAKZ3a+QG5qMm8RpqeimMYX9i8FS+s73KhYBJHIVxH27T1VXlnEmSb\n7vfTPv5yM1T5mcNZPKrDKkaun+FTj+5/ifdw78Df2Fbr3QglR4MOQTWXUEGf\nS+0AeI10E6fbHXBfxyogoCv9YGPG5RQ+Y28Dm/vPlSbVOgyg8d2lmytu4u34\nn5mnSfYA1jBw2EMRJ18k/eTs0sm06m+41Hn5KqGPtAF41Z9MQ76IIQ1ZELUc\nekjHnZZG+6Gyt6dp+rgvvtKlc0aIp43h3PK/n6fXQ7+LWi9FgqZGXMqB9H+S\nlPxCJHH0NzwnOq6xkRRX7kac1uxfu9MyIxs3vcqZQguWk+YNrKu+zyZnKE8w\nI4+mmZG/KdkF7Vl6RAtVlS4l+qAq2ROLtPMTqrPsMhxl6C2FHrO79YZqkjmf\nDLAm6tG/LvDic/stpBtraigZkEiw52/6D0SeSQRCz/z/6dEDIsUVwNu2BWce\nPFiHOLOAo+EtRaURa3MnmBhMIXGGmH7yYJbsYgpcQcr3GxHFAdJqnbSGFNYh\n+1YzgVQoUH+fzYP6QG+F7TRrnA1TCnksCuZym7HSfSr10WQ/4fJNtsaV2Ifn\n9YysnraOzrEBmccNygUa3HEyV+siI4nC93MwvuCErEJTceh4SNlbfBFlT9xF\nKf34\r\n=Yznn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a4484849b.0","@material/rtl":"12.0.0-canary.a4484849b.0","@material/base":"12.0.0-canary.a4484849b.0","@material/list":"12.0.0-canary.a4484849b.0","@material/shape":"12.0.0-canary.a4484849b.0","@material/theme":"12.0.0-canary.a4484849b.0","@material/ripple":"12.0.0-canary.a4484849b.0","@material/animation":"12.0.0-canary.a4484849b.0","@material/elevation":"12.0.0-canary.a4484849b.0","@material/typography":"12.0.0-canary.a4484849b.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.a4484849b.0_1620919958771_0.4500186680747962","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/drawer","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff1723b07d01520a330ace144b154c61e3151dc2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.b4c3f513e.0.tgz","fileCount":48,"integrity":"sha512-f1AK4uxfCQiEeSvCJgvn3KLmQfOYj04CaO0lgIjgid1RV0xK4OWVqaMa1+ajBG4rNcQhL8xt/IaprZggp2YcIg==","signatures":[{"sig":"MEUCIQDlRPSQ7yBBk1EcejRdvsSPErHZ7+U0+f6MFeZDWr9yJAIgG1cU+aUlELkBTuVR0kc9zO1k4TL7M7yXyvbPo6U/SJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU9ACRA9TVsSAnZWagAAE3MP/1Jmv8KInHYSl5P4pQfm\nxgL2uvUTot4Dnnh2jqBUjZP+M/FMF5LrTJihDSDtqX8vMasXDcGEIZrqG9Dw\nmDTX8CVd1YPZzWAONVXa/laQMcot7ZV7MbyQV8jrd3uTIOwQfVVi+7cZDrPo\nCiIDbtJiMwDtBSs7MhzIE+vaWEN8E7u1U54H4eNo34voRc595Zt+X3dT7fS2\nfagGNRAEIhsdwmmt5SsQqJW/j9Xdv6MGq/WRbg6JvYu6tTZ6Om9TVbvfpO/D\nNCC8Gj6Zxk+WdxmfrIo+RDxrMcDwbifDmROuI2U5Z8YxXYlXKT2Z9pqcCWo/\n5J4I8a/7Xnt1z3tg6APhNUu+M1PbhGEFxYZcYWQkx0v/LimpwVlOaKww16Cd\nR8He3F7Q4Xls0h7vAKEK4MDkEwLR21409HRHT5RYqFx927dwOuCdKwZc1PYH\nShrP4XmEbR31JFoi4hPiRAPz9h4Q0fhe+YLS55l2QdsClM6sFgcGO1m+6+rt\nmC4M+syVjgLA7YNwxCejfrzGeIuhZyQSSSC+TYSJh/yLyde0+j8jFKzWMXvj\nA3OFqwcEW9KoDg60sVZuVMNRkA1D/FuVisWounJ3F+dPbdT0jtmzIfVb3pgx\nyfuXS75RH3D9qfkK2t5qOeikgtZgjbGbHtDFmnqS6EdANSQk267VEOopmO+M\n/pMW\r\n=26x3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b4c3f513e.0","@material/rtl":"12.0.0-canary.b4c3f513e.0","@material/base":"12.0.0-canary.b4c3f513e.0","@material/list":"12.0.0-canary.b4c3f513e.0","@material/shape":"12.0.0-canary.b4c3f513e.0","@material/theme":"12.0.0-canary.b4c3f513e.0","@material/ripple":"12.0.0-canary.b4c3f513e.0","@material/animation":"12.0.0-canary.b4c3f513e.0","@material/elevation":"12.0.0-canary.b4c3f513e.0","@material/typography":"12.0.0-canary.b4c3f513e.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.b4c3f513e.0_1620922175269_0.42498927845903234","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/drawer","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"374b3540e9ef89bdd070b120f52bf130ca661b70","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.1a8d06483.0.tgz","fileCount":48,"integrity":"sha512-VDcnQW9Y5dgebn2et2x9cs7CySkV5vE4BeGN5CcjL+p4CDC1ThG9MuO0ZCqkkv6EbqZvABruH0JX4oahLwEw+Q==","signatures":[{"sig":"MEQCIFxL8zztyCER6hu00fTJZqwroG6lFwVDO1AhnSSsPqQJAiAx1VdzPwSQL/YOUq5UAT5dwOMAJMlxYcLyiZ9Z3Ba6hw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVCUCRA9TVsSAnZWagAA1WkQAJmNYPLDlnHqwSBZ6dFQ\nfWi5tus4lY//m/MAiNYlrqCoesD1/sZxIib+4m2CU++6gI/hlPVRdpysj96v\n+HZVymSUx8XHzULKuFXDJ2TV41R8W+hg8zFt1vsKTYHFNtyGGwma0zwKoT9r\nRpVLH1qoVJFhQEuZm5f91gdsDDOYKMu/u8fiWJ02zCSTrfvmFRuJmobeFvl/\nxHgQFsMO59sNhXoqZC3vWkHZ7qy6zlt1sYxayE8FBGH7T7OXjNlMEglX9aQz\nEJpOQyVFuwryFM7SI1Z2+XJs2vN5GsV+mho8jEo2U5IXfetLAp3v0M9dh5UT\ntYt3ygdOoIeSKZ/ljhDdmb60Vpqs4dvaUlE1x8L8k0aCsNxQFc2HiXJxIRMO\nz97lNvhnjtyYbT8QqCutG0JZeW3XHTE0q061Ak4HflLvcrZhn2I+2YDFFt6y\nZTfPpOAtAOCxSR6fwMXMD8OVFUTaFu2u8D92FOcY+RrTNvfRcO+zQ72QxEto\nEc0D0GWr+nqrUceqBD/l3+VpQZP0+gFhT1colmpl0QwI7OAlgTfslgcg6g7f\n+4tGO6R1eoPgOQdZZd0Q0DhZg1qA7+OwSGfxe6f4UFFr9hj3U6Ih6wa77G0J\nagAlEWYe95eD77gcAF6jnJ1lIwvipYiSn7pgsg65MuuzPfVcx5E+C8QtmVrv\nqxWV\r\n=XPcf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1a8d06483.0","@material/rtl":"12.0.0-canary.1a8d06483.0","@material/base":"12.0.0-canary.1a8d06483.0","@material/list":"12.0.0-canary.1a8d06483.0","@material/shape":"12.0.0-canary.1a8d06483.0","@material/theme":"12.0.0-canary.1a8d06483.0","@material/ripple":"12.0.0-canary.1a8d06483.0","@material/animation":"12.0.0-canary.1a8d06483.0","@material/elevation":"12.0.0-canary.1a8d06483.0","@material/typography":"12.0.0-canary.1a8d06483.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.1a8d06483.0_1620922516039_0.9659621233891951","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/drawer","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.8e6081836.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dc0722db87f709228acf572a661968ab9d7d8e9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.8e6081836.0.tgz","fileCount":48,"integrity":"sha512-Qnc4E+Q9Q1Gv66tvSOqDNybcX5gKHTCaaFfQgM2debFAT+aNY3oD1J6S49AUsYg8X9SS+J6e45UMQSPCzDyWgg==","signatures":[{"sig":"MEUCIQDFgnK5jG0RM+hS8zS5OgdsQfZ5RHk8X7FgLHfSpFQ+vwIgZQgVjYKaf/zmOQCvmupXfurNG6wUYOAMPgq/iowgE5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu6wCRA9TVsSAnZWagAAcXcP/jOKtVfpv7wIVnSkCncg\n/gTsWl0jQ8WJvWvcFyHAoUEu+2NGh/OWUo0yofhrb3vXFgsWmfix7ivyMPb5\nZsdl3bFZER+AurgHHWmnna0SZ22s6DD+Vk9dcfJoEw8mx7tMuERlnLKzMdXL\nAPCfyfGT5P6GAnkYNBoSspG0tB/UYuS+mpxMOkq5X6Oxp6zi/cCjXxjQDqdI\nn97ZNb0ZCODKUKrI0OGGXnmCHGd4AulOdlfcTy3v3SwA4AHzsYsg/NlV0d6C\n/pMK1Wj7Pa75Xhw1Hk3OsZItqU2yjDC2BBpJ+viGNi6tQengxdhuAaMCea9x\nq4Gu3Mrg+p7hwix1VhOPZVtgHbVPjK/IMY5VA8HAEAnc5Oh/WjNx6F5ghzFo\n+6Y3xbW5iekMrrmZbfczrarXqhC4S1ypVaC3cLDm4ECIT+zYfwVpLd3eIo7V\nCfvmESWQxj8r0wNWXNxM3+M5yHjwk5nlCksuCIYkskYsBrot0p17ahtuoFbv\nWTTH1MseXOhkxTVT0Ft00QIitdG6mti0vesGPEBuqx3dgbLEuACtTd5oIYlt\nJb5ZE/fijD2RK3yAfc+a1vUYQ8wySQVUfQeXsuBqA0FB4snMNjjurLLMjebp\nxcVA6Qf9vuPkbROEc41uIXYpaP+7mK7O09HXty6vlrh8lnMcueRg9QiunAD7\nTV51\r\n=5j4/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8e6081836.0","@material/rtl":"12.0.0-canary.8e6081836.0","@material/base":"12.0.0-canary.8e6081836.0","@material/list":"12.0.0-canary.8e6081836.0","@material/shape":"12.0.0-canary.8e6081836.0","@material/theme":"12.0.0-canary.8e6081836.0","@material/ripple":"12.0.0-canary.8e6081836.0","@material/animation":"12.0.0-canary.8e6081836.0","@material/elevation":"12.0.0-canary.8e6081836.0","@material/typography":"12.0.0-canary.8e6081836.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.8e6081836.0_1621028528412_0.2017985814907599","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/drawer","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"321f8204949f79127b7da614808b489d4d2188b5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":48,"integrity":"sha512-WJu3SltKLPC97NJ4gldfEVqzjdagKDucSoIkvsW3sj5NUMto21147X+jkjlmLgYGFYi0YUdIeWTAq5uEGR0O1Q==","signatures":[{"sig":"MEYCIQClMq9MAy1LYnNYYOxGwq6T1fieLBGLb4ihf/sZRv5a3AIhAMMydvWwunW1U3AZepJHerc9tB4P4T0DMOmVjattJy1w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvHPCRA9TVsSAnZWagAAyN4P/26UL2p2r2EhKxg9KIRi\n+9Xuv/sT0IjX4xyZF1K4G7KCp8B2+w7EjdjCnPcpz3pMY6aCdgMPcyUB38f7\nTfXe1gv996laDUyBQNksuxknPdDs5fMZ+y1ADqDp6VKMkQ+SD0MkQfVSqPjD\nlH/ZeY6yVb7XUBvT7NeiTnudj7WXvnVXBqi4mUUaAw5LD2BgvZ37tLVqyot6\nThwKUg0VZe40p37UJ+MKhFbTxDuwiKnhmyH3CCv/iowD7U4bgBPCy7eQxBeu\nLnjQ6gFUxza999nu9zyGaX/Zmb7D2z2Bnk+yvXFQzqs3/SYdQ1TmXE6gLkFk\nhpVLRrvrZHpSG0ujAm8UxErh1ihjVsgsCBNI/n7JXWhaxMT2Vq6AqFgcg8lW\nlIQA4M5nmSjUiXFciEFCB4A76o822AGEFaYdK4V5tQzxzPiTCaXHAftt0PbY\nLp+LJrqHEADK4pj7SYR/+mQniwnYCjALQv5pBVQU1m2RsVG5eeUtrfg05K1s\n3uhoKSyIRyhAwGl112PjN/XLd1VSfnBVTRj+hO/G4hsy/hKa5O/0hv+tODY0\nyrj4K6QkEJzoZywMoSUARZXJ5E+p1pycVWkZRT73a4bbypOcCBjYyutPpje7\nWH59ybSAzZ6ryUTNzI9GOsHZkJz+djddPevF1Dr1DQL+/U3x66F09ZopcihC\nef1G\r\n=7OpK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a2b0f4cee.0","@material/rtl":"12.0.0-canary.a2b0f4cee.0","@material/base":"12.0.0-canary.a2b0f4cee.0","@material/list":"12.0.0-canary.a2b0f4cee.0","@material/shape":"12.0.0-canary.a2b0f4cee.0","@material/theme":"12.0.0-canary.a2b0f4cee.0","@material/ripple":"12.0.0-canary.a2b0f4cee.0","@material/animation":"12.0.0-canary.a2b0f4cee.0","@material/elevation":"12.0.0-canary.a2b0f4cee.0","@material/typography":"12.0.0-canary.a2b0f4cee.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.a2b0f4cee.0_1621029326900_0.8233301972743006","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/drawer","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79e9b671050cc72872770695db42d58ba04b94fc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.e8e39ad19.0.tgz","fileCount":48,"integrity":"sha512-ZmdTo3DT6BD4ne+mJTJMDopMmOGwv3XYVIX1zbKYWNS3DeDAqt8tZ8J48WfIFzuWgQZ/lF7N9kd6KccwXtWavQ==","signatures":[{"sig":"MEYCIQD3fsQ4wng3uV/YHw+Vwx7wbh/5VTUK8xYfFqT06VOsZAIhAKt2wnPAObMGsEI/3vUGBnFhjvK4c1vB2kUpOK5fc7i7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpCAvCRA9TVsSAnZWagAAPg8P/2Sh7PuCK7nqc2k00umL\nPi58TwtbFBxsRduWKbGwhQLiqke4q6haUOPcBc6+ojyV3b8w83Qj7aXCZOQ9\n8VdQeqSBcUEJH083UqfG8BD16VVxVMb+6JkX7E6Ys4zQ2Qir4VX30rj8TXbK\nbI4JtZlvr3mjgfGmw6oPQyN5s4TaKUELcyrcoR4ESLwi6+nJBeSqDLl/6Yc/\nxWPWWxjunCbeSstuu2H3MLUit+TZi43HHAZQtdl+X+lGPNi/wvXXMctfvYvX\njsOdL9DKJ7zFxFI7ryNIEUaFRofl74U0OxhSdakp3AhYgh1Dxvz8/zboGFQm\nZgTkUhxLwb38Vow4uU/Gu+KAyN67X9u2lEVQiYZSonJk9d4S/rxoQ+yMkJGN\nls4J4MdjVDZgIKKtjtll1KcKFvB1LzobfhcKJqXRx+1rZNM1pmy5mzwmp+Dc\nKpVOovm/+aEOQaXaWBd7waC1ORgHrSCVrPPTLEOWmA6ADznq9+PUIUKu16Mv\n1vjy5HOSoTJ+AzEVCcxeOtThNCVSufdEUdSgBTYcX/itiCCpkD8Q3u7OPa4H\n3IUepQ0JUHeWRyihOXgZIo7aP5YwhzCrKNMiTOuUKgfLIf/Zb+uG+5a/3qkZ\nORKaR0txyiZuwk6kttgbEXopZsN216Ywi1hzd7EFCyh+rjilAI2UGwlIjcxa\n8LWw\r\n=mCnS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e8e39ad19.0","@material/rtl":"12.0.0-canary.e8e39ad19.0","@material/base":"12.0.0-canary.e8e39ad19.0","@material/list":"12.0.0-canary.e8e39ad19.0","@material/shape":"12.0.0-canary.e8e39ad19.0","@material/theme":"12.0.0-canary.e8e39ad19.0","@material/ripple":"12.0.0-canary.e8e39ad19.0","@material/animation":"12.0.0-canary.e8e39ad19.0","@material/elevation":"12.0.0-canary.e8e39ad19.0","@material/typography":"12.0.0-canary.e8e39ad19.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.e8e39ad19.0_1621368878450_0.4669162206740316","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/drawer","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb98ab7f326aa7a053285cb574e87914a2809430","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":48,"integrity":"sha512-o0g6r7/OGkKMuOClShiesBQGAuTIFmNc57BUnakaoHYVgCpScEUB1l7Kv5iRLnMJmrsmLoOXvlC++MSOLYGplw==","signatures":[{"sig":"MEUCIESFZVQHRT+XM6AK8MGSyzodAQQT29BbLydgyfVN8Ry6AiEA3sRC2x2R7lP7z4IUY9v0jE9FzMM96LX4cT24uBs7tmE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS7vCRA9TVsSAnZWagAABiYP/RTnz/xhJfp5h/ji2W98\ns1rJsLtCKOMwxVj/UQTMH1nyXy8092bai83YLwO0bMzpAONrBrjMyl0FTw7R\nBiHq/C7W8+M8WkJBhMdcrgYWtumQ9QPb5tfHJxv4bespH+MYnuxWIWs5bruY\nw5swimt9y5Lcbzs1WbLB0uGHD2v6LIWuEsII5S4LjmkNVQtFdEc2JlcvDQ5z\nOuG2httjynZ3qnQ75ojyIB6Ncpy0N+j8ZH+psceTAmXKxuFNliZwalb1HAGR\nyDl6Z5CHrn907zEbX37DZYh7D/hVtP8+/1CSUv2ODrCyEF2LzdxV5QVwH7vQ\na3UqsJh3qpvFFyDfbh8/M/+GohusfEzSey3PWvCK98h9cqInYOENtxDJxe/0\nIwFuBqSJjc+lVUdGjBGjJtPoyH6GReJXurHypdl+n3jVZBAekyflcpXOPW29\nBlHqgI/oF5XmyYLiGGKqbSzopZXWs3xkd+AutT9bnnfRy839wKHeAMcxbg53\nUNiLs9S5YE8D+LZ7TAKrBgKiaRgGGJILZpCmJY/W0h2+zyzy/jfdaVCIEdGm\nEN4H627wRBbADdVcksSpox0TABjiXpiPj8XgWn3L5D/XeUC+UZC1CSuMCBKk\nC0rvnFXmjsndQMDg5YeZYSwwzagqSLR3Hi+GsuFCJqXLAMWpIk9wv0UmQDSP\nio8t\r\n=uaLS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4bb5eea2b.0","@material/rtl":"12.0.0-canary.4bb5eea2b.0","@material/base":"12.0.0-canary.4bb5eea2b.0","@material/list":"12.0.0-canary.4bb5eea2b.0","@material/shape":"12.0.0-canary.4bb5eea2b.0","@material/theme":"12.0.0-canary.4bb5eea2b.0","@material/ripple":"12.0.0-canary.4bb5eea2b.0","@material/animation":"12.0.0-canary.4bb5eea2b.0","@material/elevation":"12.0.0-canary.4bb5eea2b.0","@material/typography":"12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.4bb5eea2b.0_1621438191322_0.8559239117842632","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/drawer","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f236be76fdfaf2e7a469cd0fed1a0558e2cdad23","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.ccce99cd6.0.tgz","fileCount":48,"integrity":"sha512-D/6LChNPLfVOZkDQfC4oJQ5DJLOlsWQvTrBfx/KsTLOA/XeugAcruo2FCtxiRHP3CtfFxxGgjKWa18ytaNdpiA==","signatures":[{"sig":"MEYCIQCxYfbm7q+zFMKL5DHZRzh97lGB5ISj1iigqNuSdQDAqAIhAKdxSj/39d5tC9FaSJGQfCIi5EA/EgU19TpPt53xzakZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":962639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbQqCRA9TVsSAnZWagAA+m0QAIAIOPfqXgYy4n7kwlkj\npdM/R6z3Z2Quu1TyiO81HqpiNbJ5nt7tDzqk1JzBt9ckeh0PuBqUrDYNyvSf\nTjv3NzSu/6Rvd6mw1pIpC+pJXGg/8cPAooaq3VFp7II9RZus500q29gMLzBc\nAdyQDoY+haT4gORavTBpRjYtMcbL9q9odq7TrI7aiDqvfrDbplmjbylQtVI+\nwPE89zLp32cJPyCmgv+kgyWNxeZGNznzlN0WOvP/pJQW7aGdDgV5SDbKcSSI\nZpgnG7eNdNC9ipVYcjvY/7LC7XynbJBcu9jgdK1WmbGbZ7JnwsNFVL0AKzup\nRgfDw1CU0yfcz6MmxwMfsON6AG82sjJpsVgqbO++sV2dqsE8A2OEQw9IKAJQ\nDvm9ac66o/YmIV/Cy8+rT0o7YXlkceEL+tmgpGBBgjcopm6jHmI2rdj/23KY\nPuii0F5Y2gfeqKTRK+eYp1nqd2796I7ZqPSBXbFfku9X06iLdM7mY5MkZWsu\n5AHLEkh+Cme5JRNFGSkILswwnxAlg67tJ58zeMXILFVcp99R2w37JKvaOD5C\n0i7V6HKcLW4qqrf3aqJsNi1GD72979SmfOteFYESikRe35e546KR/+B+pt+4\nPzXoLncPzivSYhcrus3vp/OxWu0ZvIAbKapCQkBs7e+Ga76Cz/EvQcW8nWzf\nGZJj\r\n=a7k/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ccce99cd6.0","@material/rtl":"12.0.0-canary.ccce99cd6.0","@material/base":"12.0.0-canary.ccce99cd6.0","@material/list":"12.0.0-canary.ccce99cd6.0","@material/shape":"12.0.0-canary.ccce99cd6.0","@material/theme":"12.0.0-canary.ccce99cd6.0","@material/ripple":"12.0.0-canary.ccce99cd6.0","@material/animation":"12.0.0-canary.ccce99cd6.0","@material/elevation":"12.0.0-canary.ccce99cd6.0","@material/typography":"12.0.0-canary.ccce99cd6.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.ccce99cd6.0_1621472297698_0.011438070658250421","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/drawer","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.14767a8db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"959fbe1141363dac597292e43c482773ab7c24b2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.14767a8db.0.tgz","fileCount":48,"integrity":"sha512-hFim3rFgfQ8H0fUiP3k7wFg8JEbbW3I5fp1ylrnyWQ5PAQwRknKEEv+dbEAWB3i8IbgdjcmgDgMk67B+10fyiw==","signatures":[{"sig":"MEYCIQDFC6mRkIOH9hSnT+Zql2ti6Ae6pYWWMAnOVspgzWQUdAIhANGhFEhMRy3LriE4JKXWCflEiEwgUjRdJtqfFsVy4IQA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":952620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpswYCRA9TVsSAnZWagAAdqYP/R/GI53EZNRxBr0bzdcU\n+c6Bxz+gCxNbPgyf2DDdtLVWBlW/ZamUcxk3CR+r8gNCBNdYXtcffXGh7sdT\nZM0ohfG5JwPLlnqALyi6b76PQFEx8+kI7C6Rl45dtzTO76Eobx+5Z/5XlR8U\nzNEH0F4OX3c4UQTUukRIv+B5yDg/FdR/Q5URh1RpFP5gG8ok7EWFA+8eLIGT\nQpxD7PtwxMYR8etTYEAz2Gn6fmHRy79vZVovSt+b1XZHKBv2ivgA5ucRyV9F\nFLbHQMs3SdQpNAhotnxE2j4ZmLxlVVYE+6GBOIE/OAOzreZuIgtqNhukvAfR\nQgXViF8KWTSUnPaD/CCw21uiNU2ezEt7bl45ofNUO1QzQHPTB2Fh+Khs1wIO\nXrsDj9BLn/BPdzc5xLddZoAf+ByMb8KCJKTFknnXTczKO1hny+cNp8TtHJUw\nkvUN6tEkpZOp9r3HILIP54yYE/PDDWawHLWYPSQFShuXyEwjPNPoQFrxvTPY\n5cWaJ8EzhC6+/h7N6rV5JD6BQbUKeVk68PLCRTYG9mjJgVs2wRU4QyAusKgt\nFFlX27/1oUyT9/hsnVoA/eG7JCrewSEDaasyqZIDoPoKQvFgSDED/YECL4Oq\nDBN0cDrODFGLrCPvng7nlbcxxZHjBgEGU019BjjWkIs3BQjaxaIchdhbxF9Y\nz0sm\r\n=touN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.14767a8db.0","@material/rtl":"12.0.0-canary.14767a8db.0","@material/base":"12.0.0-canary.14767a8db.0","@material/list":"12.0.0-canary.14767a8db.0","@material/shape":"12.0.0-canary.14767a8db.0","@material/theme":"12.0.0-canary.14767a8db.0","@material/ripple":"12.0.0-canary.14767a8db.0","@material/animation":"12.0.0-canary.14767a8db.0","@material/elevation":"12.0.0-canary.14767a8db.0","@material/typography":"12.0.0-canary.14767a8db.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.14767a8db.0_1621543960287_0.9377455114094271","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/drawer","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ea67d001d0a07ca70717e50bab5aa642d4fb80c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.22c6dcff9.0.tgz","fileCount":48,"integrity":"sha512-jChhY5sZW6wGtU0df0wR3sVmZWe3c5JOzKLA6QGPunsmpTckfGLya2fJObxtGerJTrpJy16BTZts4+dEFeUZBw==","signatures":[{"sig":"MEYCIQDSJ1TLfivexV5l6A3ItIfsr/QFbHA8SkwEmJTS9ur2MAIhAOx+LpK5YdUw9f59QF5rT3+9KwjLeUnFOky9SJYAgXtf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":952620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8RICRA9TVsSAnZWagAACO0P/jl+L1oeamInfUwh3AY+\nTh5tD5U5ppoi9aebca2I3EeJnRxdEN4hQ/ZFKd1mN0wgZIj3OXNLbHU6VyxH\nzXgH4wDQ7pjdOV5OVvl0DsYXeqvwQu4jH/qlXguhcAHM2yU4HFDQjIUeVzFt\njJuR6Jl467kF+Prlqk7Yvtt8md9GK7dXJqSR7TNg2SY7XQmZhFT4G4L5q1Qe\nIUuXUsryGctTsLPFapkbbzkyniYzBbJG2SSuMNCtg4E63bEEwXnIlB7g3uZK\npMravq3GiJpjutByUIizWYqN63fKqBvYbaO43dI0HTlETNDWXzt8j6ojitrS\nhNRonUpwwcYEYHy8MUkfEhXGPKdiWkVkAGpwQVGYSOeV+mbSRS38aKI9dUnV\nSprsuxtCefHI/TQ4GZjIbz71r2U8uCPyZPeAKAsMcKI7LW/0Y2N6VkHWYCI5\nnLKPOPlXd7yk8jRRt8nEPn9Usxor6ZA3yp0ObgjZKCsVz21b+fyRTfRwoapp\nz4HgdvKHieg2o4rJhs0snVsFqHlAqw5AGeNgsaMvMqUOsEtg0Zp2KrpmYff3\nXB3JVuHqudvX932+c5w4Mbf7Uq2tyPSRN80jtid+tsT0gdjS5quBAeuI6U23\nkYHlyo6NBuhL524lsSIkerPfsliUJakPAdGX2TkavXtejVziwarkVBv4/pib\nPoQk\r\n=Flaf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22c6dcff9.0","@material/rtl":"12.0.0-canary.22c6dcff9.0","@material/base":"12.0.0-canary.22c6dcff9.0","@material/list":"12.0.0-canary.22c6dcff9.0","@material/shape":"12.0.0-canary.22c6dcff9.0","@material/theme":"12.0.0-canary.22c6dcff9.0","@material/ripple":"12.0.0-canary.22c6dcff9.0","@material/animation":"12.0.0-canary.22c6dcff9.0","@material/elevation":"12.0.0-canary.22c6dcff9.0","@material/typography":"12.0.0-canary.22c6dcff9.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.22c6dcff9.0_1621869640350_0.3907254408131131","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/drawer","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.fadab3372.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c364f36751caac37372e3338b570aa04ae013a98","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.fadab3372.0.tgz","fileCount":48,"integrity":"sha512-JHULmXv3Sg+kvUc5sH6WZUVq4s+qcVgecoxpZs0F5dckjaFYwK16awqJr1/VRb20D9yaFKer9/JQxjQmO6piqQ==","signatures":[{"sig":"MEUCIQDqYdlcZMjhKh1c/6mtTi/Hiz/6H6+eD0Owpjnc7AsmsgIgT1m8r+dVTfmdppcFTii58mTBSS1Wv6QZdPBy9W4ZsE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":952620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq887CRA9TVsSAnZWagAAEWcQAKRZcJIfStOesu28yH9R\nJQ0VxzWvoPYH0XOsvzMpty++zcimD83tty5V+/AX9LSojEYx+zq6z1q1zvLO\nOCHjSFo9dnggBQRcY0d9SMgRwhhx7aEF5JxbdMt8LhpSeuCvuAgi3e3TZVAi\ndXlM5ds6EYQqg2fDocjfBWkKAke631EJuDOX7j4tvOEUOhceH87RJqnlKQIz\nWo+Z2CAJ+NHmOz4Y3NZ2gTwooAE/ZMhOPimlehMMLN8C8xNqObaU3l2gnzQc\njxbJ68lIMX4bqyfu0EU//hzmRi8p0OrhmfbHyulKmm+puDo1ZvEUqPQVytJx\n1JLaeVR089nFaGdeQ7fdQAaks1JNRqA2OM7r9PrzkrJtvpHyBvP2wZJyLxT/\nB5oQyKRFd5aD57CGxBjXArpopWRu8JhBzyL+Jh9YLDoLSUj5BCyuRU/wZdYQ\n+37652VVlbCOeWztzue72PxF3WuypeTBilmFTFQ4ixYdH6DaN1kG0ptzM71Y\n9a51v7Trfn0v8nd72tm3xuwFUb3o/RvF1g7qWKn76ybJHc/f0TdQXod6YjKP\ngMQbgBo/SayOvXw1YQjw5Wkpwf24OnnmxOK0Cj58kibiZ6CDACFKg46QrUtU\n8Q29j2H3bTXl2CZnQRKyhOL1ahm1H48pS+g20q3Nl0UNYzUudz7Suq0mekNR\nFzYW\r\n=STKL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fadab3372.0","@material/rtl":"12.0.0-canary.fadab3372.0","@material/base":"12.0.0-canary.fadab3372.0","@material/list":"12.0.0-canary.fadab3372.0","@material/shape":"12.0.0-canary.fadab3372.0","@material/theme":"12.0.0-canary.fadab3372.0","@material/ripple":"12.0.0-canary.fadab3372.0","@material/animation":"12.0.0-canary.fadab3372.0","@material/elevation":"12.0.0-canary.fadab3372.0","@material/typography":"12.0.0-canary.fadab3372.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.fadab3372.0_1621872443573_0.5702670846840718","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/drawer","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33911fa52db2158985fc064ce6c8625e7214f6d9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.caa73aeee.0.tgz","fileCount":48,"integrity":"sha512-FpqSohdf4uEONNLUhGIcA2/ttF3AKgb6knxn5OikysQRNwB6YSSllAKF55kCpFr2g7erlQy/hi9K5WE6cyfWHQ==","signatures":[{"sig":"MEUCIQCZTolC30b37Jif9oMAFSN7WZx7MeEaFQqeugRcPu/JCwIgJ9eik++6OTuP+XafTu8MW630KAPEuM0HotkfbXH3+8o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":952620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQaeCRA9TVsSAnZWagAA/H8P/jpmzg93zIX2vPW0+F9q\nLKi14DlZVxQEK2eacvJgtmo8YY4A8E3fqz998rWgAOgb1/iYjassGrpHSsCD\nEMSCZWFlzZqFYmXd2n5TpC9WBojeyraOm0Uhh9hQjjrC/LOx8Xd7Rc46lZd9\nEXPy7RpiPX2ejtyOyyUrNdKELfTJB0J1Gcp2Nnw1FjpJS7xDluC0beRXnsiq\nEg+Wdrv95ZUP6+HElej1K6ptNTSxm8h8oCzeoW07L32GHWaGH1Nvkr1mMo8R\nhRXn6H/J+pJ6bi3oZjyth/vPK4wsS/bOxx7hjDurxb1eKHq8UwqYSvjCSybx\npFdU5kX2XEmHLEVoYryPNPNuxdjbHuHHrt9l4CnZK5jXktKL+DT49PAt4GLv\n002R1Wlx2iPuqE9IYDFLCu6ifktcgg82FFcldD5fLChSv7fGtzro1Uzd8Nes\nFxunGmrSKCCgJmxrj10XFB4XZl3eozp5uUdEWn5qlaABIGOtPkgiGvqsCYry\n1sL45mr6+UZjsR6t+numNh9IoclnWrzS9aB373Cx7pDPVIlY4RhjnAlC98wj\nQ0Go4C8WO1y1CCwN5MkFurkJZX1+OQVe2UZQiqrWsIX4032YUmJnhTbcJOvP\nwNQB0Hbp8dwMJXvjRjlG+ow7CzkGef4NbN0/yGLapFJc/wSvK5aZCjEa5kU/\nN03z\r\n=+YhA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.caa73aeee.0","@material/rtl":"12.0.0-canary.caa73aeee.0","@material/base":"12.0.0-canary.caa73aeee.0","@material/list":"12.0.0-canary.caa73aeee.0","@material/shape":"12.0.0-canary.caa73aeee.0","@material/theme":"12.0.0-canary.caa73aeee.0","@material/ripple":"12.0.0-canary.caa73aeee.0","@material/animation":"12.0.0-canary.caa73aeee.0","@material/elevation":"12.0.0-canary.caa73aeee.0","@material/typography":"12.0.0-canary.caa73aeee.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.caa73aeee.0_1621952157822_0.6095860389034864","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/drawer","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4a2478f711c83d6a6c0f1c10e2402f2776665e9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":48,"integrity":"sha512-CYLg4bF018cEozePr48HAT93OE0Dj+zdUURzXO3bgGk15IOngAm3L+l0U0UGccM+IHcIMoh8oooMll+uKzyWUQ==","signatures":[{"sig":"MEUCIQCUr3N+/XGVBeyrVYGDj8OZByU83YJV9gYURCzWUss2ZQIgag0oKAeG7HtocgscLbD6jtSjvFHck6FSjKecE9HSH6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":952620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV/qCRA9TVsSAnZWagAAhzkP/RK7WU8kPZ5dw7S8H35u\nZcqoaoXNiyTD/OScpEJOJJuWjTu0wx6kWgMGBTCdZ0dRfLpmqMfhCho5aDXb\nS6y4MYOi78PlMPDkb3dnSb+3ABqccMStJlvgH+8vKkTfG9YPqKR64/nnLIuw\nvh+h3qkssoXaKKmcCdKpmWcrk/6dZdBeja4kFuin3+mRUNde7AjG6r5QY8EX\nDa/JxFDYGMbJXFocpxppM50HG+9ZIFTJLp+t37QNZ1jRuE7411hRLOoeHOW9\nN8wHg7xrhjwuorkt3k9ys4cpfZhNh46kvjBnKvbCWZWkbl6bThHt4WKujSuF\nO5vHarKw+B55nX/bWmSNyhsCoEUQDXVnPkAANNuR7x2emo3EFs/TQyctu+Vn\nLwHeiRiO1PI78S4e4nISEO3bbWJ3mg4J2ndcDUF9JFSUePM915jmn28Aca/k\nUOaIcWe6L7VFRxkdQZd8OdGtV4e/0CpSuCAQyp8QzDc8aFYYLgGi6OVEAyd/\niFgAZp7uvwBag/2VVk0JRrn2xeGqh0VGDP12uN+5j6yTFY5GzaTcjNVnBOrd\nakpObb12dq3OdQ9JWy+PXX1GPERvIWTGopYF2vZX+pbHuMngJloDxwDRTbko\ntDypcRZ03V6Wu29RYYjFUbCwvkurIxaCXbcB0P7zO1+Lkh7CvM/z1jkfM8lq\nU9GA\r\n=G4o6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec31ae1ed.0","@material/rtl":"12.0.0-canary.ec31ae1ed.0","@material/base":"12.0.0-canary.ec31ae1ed.0","@material/list":"12.0.0-canary.ec31ae1ed.0","@material/shape":"12.0.0-canary.ec31ae1ed.0","@material/theme":"12.0.0-canary.ec31ae1ed.0","@material/ripple":"12.0.0-canary.ec31ae1ed.0","@material/animation":"12.0.0-canary.ec31ae1ed.0","@material/elevation":"12.0.0-canary.ec31ae1ed.0","@material/typography":"12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.ec31ae1ed.0_1621975018449_0.9936433547640899","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/drawer","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.8530d3514.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f8385e4d1387afd7126edbf97b79486fb1bcc0c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.8530d3514.0.tgz","fileCount":48,"integrity":"sha512-O5S1sjpnpbIA6C6vxf1qOIKaj8y7wTD71jVwsoiNMhCqRvZ/UYG6pnrLJiefsWb/JcJ1pRiTazvCejuGzfBUqg==","signatures":[{"sig":"MEQCIBiol7XUD/puSDyf3gSkXocVSW1nMN3AgX/yarbrmImlAiBcS9KwTLKiCM0vGbJ38BDgllRNxGyV9m3h7LHsD74Y5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":963915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8N+CRA9TVsSAnZWagAAQosQAJRprbN2y2vh4w2+tk8b\nvaYVKgd6kT+7ntAan9Ye66zSOue3mnQ9N2lYxLuzWCtiTBdzn/aUEbA4NDpN\n85pmoD64jwiZNsnJKYFAo4NVjKfYMql/+QoWTgOjd6uaEMBe3mEPG3Ec9APB\n4Nq+tVKhYbo8bMlQdPHj8z0DpkTb6sTo5oGVsKo8VMu1JtKvSCdYf4JNu4mu\nXudrgTGRpAhrDYlVYQ5OaajVgza+cPqTCgwSaDFy5rik3g8OpB4CmDCNUqF2\noSsEhaMP0+rbEnWkJC2BYsGZJT4Z5XBhnKhCRBsRZEoM047YU1ycQXgZSUbU\nNTdeNiw4tipCTSljAsSrxXoRKXU3dCiCl+r5fcq7DtbYbPNo5DDymLWUf4c9\nL/b/UOLJF4vrUVEcbE7mlsUc8FTeZoqbjCf4g9OIZlV2lHbrdWinG5Z3RIiZ\ng1DtIYtY3fpHDIwPWI9SkehwLDOhqxtF+aRJLBBJkhmPa0mb7bA1KKuXc9/L\nLfj0CJ5qdXkhGya2w9l85kR06qqioQJvhKPABWb93GIBDFnQrtP+DiHoIYU+\n9cFTozvrphqYqN94AwS/DXSYd2osjRJPP6OgOihmPB3NoMet/yFHZMfHKBWp\nu3/SGtGntz3dnzPfLZBVdcquDMZGlg6z1bCe2F452hFSPlLLG79XfJTPSeFo\nhTVr\r\n=Atec\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8530d3514.0","@material/rtl":"12.0.0-canary.8530d3514.0","@material/base":"12.0.0-canary.8530d3514.0","@material/list":"12.0.0-canary.8530d3514.0","@material/shape":"12.0.0-canary.8530d3514.0","@material/theme":"12.0.0-canary.8530d3514.0","@material/ripple":"12.0.0-canary.8530d3514.0","@material/animation":"12.0.0-canary.8530d3514.0","@material/elevation":"12.0.0-canary.8530d3514.0","@material/typography":"12.0.0-canary.8530d3514.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.8530d3514.0_1622131582420_0.5360908898035461","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/drawer","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eac51b4e889f353e08c6b7da8a560c9f4b556122","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.00b5899dc.0.tgz","fileCount":48,"integrity":"sha512-JcXwss52kCJwvXDW9pW3WexTauA/mBytISOGhGFq3CGaq/aTNe/I0afVBIi7HQyfbZFcgDb73bfKBwNAz2DS2g==","signatures":[{"sig":"MEYCIQDOewvAQUrW7UYDLyNAtX4iahgOImkkGVZevVSudWE5HgIhAP4WZ02bvtvSWUxPYYHHrMgNW7O74XcuLQaDxmWt6s+M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":963915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtrjqCRA9TVsSAnZWagAAhE0P/3w3VGSiJMqQFtJapT3S\n5Z7ohnEBHRGhIUEEg7i9tIld+uC47VEs+ZMiUm/QWaZBXX72tq+nISbE7fV8\nTKAf9BIgm+FmPAkN3heBApCdvxLuGZLabee38LWiUYv+XNGPVd9ZtLMh/ItR\ntdXvNHZY0PoxhfquhrFoL0Fadgk6TQ8K2SOXXvt1CzHxD4OAVUPXeEWWwIgj\n4+WTuMwAGemI9sa9Bvaf/mB3XM6tlEHzlJFG02IePTcqkKxVRqiA/4+2nTx4\nL//kUErAKpBEbQA5jzSRm1MSNRNesbGVHzup4tStcOTFug1qpyGKAZqtVRIF\nL1Kl109j2GOPgud+R2Uu8EuQl2dMFjPSfwaiuMuF/ZsWd5VoP1G6EBICYFGV\n0CRvFeGHheUwfJwXSx+F4eh9q/LLSKt+ikVqiO4iYr2UqBkvOfAZ0VkQFd6G\njcWEYLocrT4vxTC0gF/tF3sSdsYqVedQRWM4IGcHJV/QalltnVWaB9kmFVXJ\nYY7s1ZlGxiIn/drFUN38mQdFma4Bb9NSFN+gruk61OxyQm825zXNOifp98eS\nmT8gQ6hUBzcJXkh/Ai/VghDTnZxHwGo8SbAhqGOCnSCZtdhB0qw3xx6PZycM\n6WgBotX/XH34yX28xD4YRi23aAZtl1ebtSBI/Jvsh2VBvRx8Pv/REQw60WB8\nZ+WO\r\n=knZF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.00b5899dc.0","@material/rtl":"12.0.0-canary.00b5899dc.0","@material/base":"12.0.0-canary.00b5899dc.0","@material/list":"12.0.0-canary.00b5899dc.0","@material/shape":"12.0.0-canary.00b5899dc.0","@material/theme":"12.0.0-canary.00b5899dc.0","@material/ripple":"12.0.0-canary.00b5899dc.0","@material/animation":"12.0.0-canary.00b5899dc.0","@material/elevation":"12.0.0-canary.00b5899dc.0","@material/typography":"12.0.0-canary.00b5899dc.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.00b5899dc.0_1622587625725_0.5506359800954879","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/drawer","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a624959373a201367672e7256153fd4ba94bbb6a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.f1525ea3e.0.tgz","fileCount":48,"integrity":"sha512-KCuYHgLho3ke1RpxnZiyIFnegjEpDWZAZQNI8Ci56DNXE5EFYZB8LuVZSBK8pNdpj2nHZy4XbV5ZabDkC9hoFQ==","signatures":[{"sig":"MEQCIFnzxDYTZcyWiiHaL1IKKtLYxq0Cs6YItrTvZzG11sa1AiBcBvlkyZ87PHFL7DZp7Co0VVDCR52XAN75vJ+MkJmhQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":963915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN9sCRA9TVsSAnZWagAAZhMP/2lbCJlJ6iYWxByX3dTs\n1LKiNZ15AK5oURMIh5f+W80AI8ioMfPA6s/MsR8cspAK7sIc21Ynjxp/3cX4\nyUfdt4jAFhFYmy9wBnxloIW7xb+RI2Pj7CncbSXEY0Ze8yEEq38zN5k3zVKs\nArEvIqRE6lpwnJAXzvxv1Tr1Tk+jLagivLodq5XtbEduWGl+VsOgeu7/h3Pf\nmyIHQmnEzqu94pv8SXczOXKegIAdIrkOVJem5DfG11ntgIe6oc2yLpoe8Fjx\no3JWEqvnaN0O+1i8i9RSYtx2P9rLWN8WsCGyoiZmAKYy6CunXbR8bC2HXpVn\nkDHd5Sk0HUCMSzPr8Ag2qeMTIgFkiPjWnW9aBW6OGGZ7UAbtQgbIGhcNEA+0\neB1lQ2QvdvW0QyNThrifsbAtGeMs+iU6j89kGYRbSfzocH2jymVc71YDHSUO\nd5WTIBiFpBRpCCCgE7aKZVyS/O7+PC9UbTJTOhdl69psSz6nYU8XA53oeSyW\nl0HRnwwn+xCBV70hBa5mRoWAg9P8bB8iyqnsrI1HFbe3KM9c6EcobTpKOnf0\nz0w+q2RObE21BdzRYYecUo7Xvt5LBAZVZN496Z8mSxQ5tFZx/bK+4zEJZvOP\nwdOTPlS0nuJ9334vTGArzW6w+biyhZK1hx0K3gj3eCqaRi9wJX/Us0Os+yqa\n9Nt/\r\n=a3vb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f1525ea3e.0","@material/rtl":"12.0.0-canary.f1525ea3e.0","@material/base":"12.0.0-canary.f1525ea3e.0","@material/list":"12.0.0-canary.f1525ea3e.0","@material/shape":"12.0.0-canary.f1525ea3e.0","@material/theme":"12.0.0-canary.f1525ea3e.0","@material/ripple":"12.0.0-canary.f1525ea3e.0","@material/animation":"12.0.0-canary.f1525ea3e.0","@material/elevation":"12.0.0-canary.f1525ea3e.0","@material/typography":"12.0.0-canary.f1525ea3e.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.f1525ea3e.0_1622728555891_0.8382291429519761","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/drawer","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.464a00286.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8394dbf85ff22fa827bb37f06348457ad5cfdfde","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.464a00286.0.tgz","fileCount":48,"integrity":"sha512-Y8PSVtgLyBh8J0vUKw64LU5AQPvJF2AOPObT7mh/b8D6L3cUkw42q7A3cY/ZzGNfFGz5CtFobPG+4ZkBQ37NZA==","signatures":[{"sig":"MEQCIEqngnla6S+3xoTJxdB0O1SArwvVZoYSI7znje3hqRF/AiBgezdm/eSc8JmkxjO0mgGVIfsgoksd3UY6RALYyrF8iQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":963915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOuVCRA9TVsSAnZWagAAjJQP/AnxapyqaMOFjHbepAAl\nFE1zpRqJtngHMyeejJbokwKOm1Q9/e5Ji2W7VjRULXe7VcVnstlgxPeHBRE7\nCYmCahmxIfryYX11URNATLtoI4BG4Co23qhIQC8YW+RAbRHom6gytb4Pw88V\nzczuCpYyXW2BieQBClVUXERP60J6C4EDdmCNsXVTxUOZQx5s++9+eQ2TAgKf\nGEE42TDmlvB0oj8ru5Xj1EQHWqCPFwmXkOfmRt0TKoJzL/d40MXpt70b6WTq\n1NR/ErSgP1puzCJGtZaweQWKlHt6az56c0g3w5iwkULC3vi6WL7v7omMyrdH\nFuUoPbF4FIv87jzLJtK4z5ZTsrGziUPi3kABIyiuoG14kwm6mfMSsmI5iPQr\nIzlHgDvYoTwfk9OpI53h4GQZXOeB/XcpCkOJYf+wxEzr0JHNTLGzISbUV3H1\nrsIs12T3j91EQz2snfmdd/gzwUk+QB9zmL9mOglS5F3r4Ufb3KZLhYNk9kEk\nBpZmCXRV3afAXu5UbMIOFNhZEzbpDqMzG/c2w59uJgIY7mz0LainbyhHIkVd\nodQ2wazjg2/fBjvOCtjYb9WidRPyjuPDktj7pVp/w0YlZ7VONoC3SS4VBG4y\nZBrBp63C/SS4y9FvD6zcD3D1MOY+OZNg7PiiNSCM0oFLcla+sKACQPmi1zol\nnOvz\r\n=Tr/7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.464a00286.0","@material/rtl":"12.0.0-canary.464a00286.0","@material/base":"12.0.0-canary.464a00286.0","@material/list":"12.0.0-canary.464a00286.0","@material/shape":"12.0.0-canary.464a00286.0","@material/theme":"12.0.0-canary.464a00286.0","@material/ripple":"12.0.0-canary.464a00286.0","@material/animation":"12.0.0-canary.464a00286.0","@material/elevation":"12.0.0-canary.464a00286.0","@material/typography":"12.0.0-canary.464a00286.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.464a00286.0_1622731669315_0.585369222453179","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/drawer","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.474de7878.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"798352c78a499725d2d0fa7ae596857cd7e39d3a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.474de7878.0.tgz","fileCount":48,"integrity":"sha512-fr48t5JvbScWEQqbvW9+a6HzpHIoJxzOO9fgiFrReiGFRMZg3opXUwq2gYprj9gJwkU/YCmDqCHyALvyj7l27w==","signatures":[{"sig":"MEUCIQD/fEatJDUbbpSWNsDHXi9No+gZ9uWbKB15c1Xt9i0X1wIgOKn9U6GZGvlhoynq1uWWCPMEWtUvyLgEYV0ZmDCOABI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":963915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPIhCRA9TVsSAnZWagAAJPQP/2Ocp4tjNasvwsA0JNXA\nOwDxrsAdRyNqi89T4DeDTnQYClroOjWWSJAkXwRtaBD3kdHTTgEOu2Q+1A+M\nvOUxSNY4SN93DpDXXP98DxEBjkP9l/g5oFGrWGC7C5asDkDK/n7031kwY2ml\nJtjKSj7IAj+XWZEXVAsOqeSjn/dEpceZrOuozKdRhp556WmTV1hIp4TdGvZ6\nJFmPgB11zclRSPNunVSHTVmXCoe9AB70PtPwEuPn17NwyYmP5vikwUd/ReED\n6EdutXMjq64vaPZ4BzxXfwcBqgBWEtX4L+TIsZ67TgMRQrnp8DuMQ7eDRn26\nV06icmOJSmALnjFVsqr6wYtdmjCwwh0jueKqrpx/V6djJsnaEZ6/CyyBC1d0\nAkmXKhp24Yf1PkbpjIScBjIigGMfP1QZxeTWP26VaHIyaGdD49YajyQs9Sze\nAwfwPF6fEafzQ3lZ8rD/5/FS+DcO1EtreRHBYm370wYGSG5zLS+XsKW7gCWV\n2qxUIZzIjT7amsdyRXFZvwlI6t8uT70u3yGT1nkh+EZHKvEzIcBdTTruoJNB\nQi/S5oTNiN6TfwiCeoh7gpHw/S8ej0RtTvL/cOK6ujmj6htOYsyQO4lJ7mgj\nQhCBm6J2eULApcjGsZV8AxAngsKo1rm6aX3kpaUgf4Xb10bAAXDoj2H3VNsw\nyabb\r\n=e3wZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474de7878.0","@material/rtl":"12.0.0-canary.474de7878.0","@material/base":"12.0.0-canary.474de7878.0","@material/list":"12.0.0-canary.474de7878.0","@material/shape":"12.0.0-canary.474de7878.0","@material/theme":"12.0.0-canary.474de7878.0","@material/ripple":"12.0.0-canary.474de7878.0","@material/animation":"12.0.0-canary.474de7878.0","@material/elevation":"12.0.0-canary.474de7878.0","@material/typography":"12.0.0-canary.474de7878.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.474de7878.0_1622733345166_0.43184379740494006","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/drawer","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9551a2fea2110c732e35ebfe7b9503a878e12f2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.b87ebf74d.0.tgz","fileCount":48,"integrity":"sha512-VVgbtsvVLcyRRz4MhDiyr0jLmH74eWxqGm9zSwhIvaVST1g9WPajU+r/nn5mBvbKOETBaI1U6YpwxjL23qn6SA==","signatures":[{"sig":"MEUCIQCG6ddJq0OkCzeYXlJEecGo9DR4ggE3lDjiOilNAMAM5wIgCKMoj4xU20HfVyODINO6btimRoUSiUQoFt6bRuCFkj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":963915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRXDCRA9TVsSAnZWagAA9xwP/RepDPk2uvplw5AUTq78\nFs3k4AUKoVkQYeJZAZOC5kmGFw+3Tzazv+zhHbxI1Qff3+QalNBhTN5OL4LB\n7RRwqOX9X9tAQKlLT1KV3Q7/XC1thPTS2m6uNPXYUrjSWucqw55QdUHJZkpA\ns3ZHF3z8pQ3sPF48ibi9AnIkxyvnPu2RkUzoWRvgeop4hIiahQkYaQkDN2GY\nxRwAkUQQJuLf7FS70rtbY5cOiKu7gRktt2PYSdJTRRA8SpiIhNAo/Ypgl+eW\na0HsBn1gQ18/SF/PlYsq/6/N0s2cclYchrsfCgnOzzCiWI+2rqfwqmtCgLwK\nOkL7V+4q3nPVvBAA35HmG20agUY7xnzt6SeLvMK3G61g9H71lGX/6hsWD+vF\nGKlcVNy/tPk7uvNA/F8AmTPqnmWlVXDjWHAJwte3x09a42uXiNa60y31yeW2\nyYivvg+SYowIE4cYei4bDyqID0IyC25ANE5qOZCnQgxM3XbmDGqHid+Qpxas\nQRay+qvL8XhCj3fzcPEOHFtvLzhiY3Xo3gSVkxDojcR0f0wnBPhUMXRMBa9l\ni/0t0b8URcoOoMa6WrF2hvMqirjEZTlXBfmWZleibRk1kDh8PJp1tkTDND5W\nn+OIuP9C+e8q3LJRqtD8IywPrDYizKD6ViofZ22Kr4zTEBHVBlaWv8zz8vdo\nnKU4\r\n=jTFk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b87ebf74d.0","@material/rtl":"12.0.0-canary.b87ebf74d.0","@material/base":"12.0.0-canary.b87ebf74d.0","@material/list":"12.0.0-canary.b87ebf74d.0","@material/shape":"12.0.0-canary.b87ebf74d.0","@material/theme":"12.0.0-canary.b87ebf74d.0","@material/ripple":"12.0.0-canary.b87ebf74d.0","@material/animation":"12.0.0-canary.b87ebf74d.0","@material/elevation":"12.0.0-canary.b87ebf74d.0","@material/typography":"12.0.0-canary.b87ebf74d.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.b87ebf74d.0_1622742467816_0.14795056635034665","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/drawer","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b370b41dfabf63bf0d9371ff6b2ff3cda539fd25","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.2daa49b35.0.tgz","fileCount":48,"integrity":"sha512-txku+WbeI1eqBTJvsdK2vQMyLlReAgbwuf2Bix4sBCodD6mK9Bsgg0iyHKpidIvxcFZo5egFbBDQi8aBKrYzpA==","signatures":[{"sig":"MEYCIQDCNkAKYvjr7MlJFIH3UqPnUPDdYrXPMPJ3NmHAAHyRSQIhAMJsr2QawVNVMbba8cv5XNZbTmru42xdN5zw+xyxohFy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulGrCRA9TVsSAnZWagAAFJYP/i9Hl4pjxdyW7WrVRkr1\nQSzOT1NzRa5px82MfrMkNx2PLhowd9j1tj3sHZJ5G7XRnvpCKbFs5gYIPMbA\nNF0tAyZtzGIpBRCgYxQf1MW6/oxIvoGQvMDB1hTiN9HC+eXJSCZpl8jtbDS9\nV+k/wV4mOs238p5nqVQzKZwyi0zHpH7WiYodQcDeHEJiN8yGittf5SRK3lKH\nJt0AUFl3ynkQthzLTQrGPPCjYhB66Z9hS1Igc/6Jhd94h+1XvBAW1bexB+rw\nsiXxm+q2x9O4Tx94Tkfg3iuzM5O0pHOaKc8xEyEc15sjBTx7WXwwHtgfyaLL\nsRt2CPgo4J2EGNuzmoS/u/GhZbO/zaH5c67aNqWVIHPgajUeWOmvnVR9hS2s\nXHKYxvaWLWcCFYggI6HT5hkoROK/HLtI9SMwDjf9Ci2xVQUbIPBG5hJr4hqb\nkTSePidkL65gMPS9WDEBEHtYD5hbB0MW8fXvSA+F/JjVymnw/O3+GBDW93gn\nhY72UBAqDp9LDnyN31MXK+YqXFV+B/EjwgNBtByXLZXZT6UePMMCfR4y0HUZ\nUla8QclL04gKdWdzHhItcSeqagwW5Baqq9jhBZ+kfuLNmJd0we2YkU/MvJbd\nLYixQl1Bozva1LF3w7rEnnwlD3vvu42lXv7QbXsQL/o/syxV4bzecq0WUFH5\nAspR\r\n=qiIi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2daa49b35.0","@material/rtl":"12.0.0-canary.2daa49b35.0","@material/base":"12.0.0-canary.2daa49b35.0","@material/list":"12.0.0-canary.2daa49b35.0","@material/shape":"12.0.0-canary.2daa49b35.0","@material/theme":"12.0.0-canary.2daa49b35.0","@material/ripple":"12.0.0-canary.2daa49b35.0","@material/animation":"12.0.0-canary.2daa49b35.0","@material/elevation":"12.0.0-canary.2daa49b35.0","@material/typography":"12.0.0-canary.2daa49b35.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.2daa49b35.0_1622823339390_0.14089142186162196","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/drawer","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.08db3d737.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e883ae6d59bffa391a33ea0d202c6383a2e6ddfc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.08db3d737.0.tgz","fileCount":48,"integrity":"sha512-+YHjGkjszXySeEiz2xnl16RMcrb8GzJXVNeyJEUQWNGDup/cMnpzdvQ54P0KrWnepzq6mqZffNVvL2IbKZzukA==","signatures":[{"sig":"MEUCIQCWHMPJrOecmJH5YJjoNwJr1Fasal7SgkIfNIoxC+DaVwIgM6RozTWLH2L9ZMkJuJYNhHHUo4ywxE8Uq7EApOjsT20=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoJMCRA9TVsSAnZWagAAGsYP/Rfgti1g7c9i9oCawnLA\nYEiiBD67S7r/gZ/nagF+W8E7QkQWukzWuwDmURtegw/heo1mY8U+H2pwuIdd\n+8z7GMqSpnQgiIJe3OyatBb4MYb/YxEXmNx4HI7Tcano7ywNhhyJVC0IVlMY\nUYyO4K9jzsi6Jx/7QvATN4FksgOklCzjQDOhmhQKSDjAZndGxqDzgwC3aiB6\npKHyo9r2aTVlrB7mqPP6tfy2nwjomrGLC04QMNGcQ1bUINOu1hLPwF6j/ET3\njEq+6V3JR8TW8GPq3A7Z/g31UNI7qM3lH/6G8qu+vsObYFUIH9/YdtDO1E/q\nmc4fYLefzH0wK2d/6LjH5U/W6EDnC8oiYw0TXIUV3VS7XsFBIvKm3rpob2ON\n8iXP3ieywwP56RpA5ENKwY2NbWzZ8DLLoKBOud/6+5ornZ+gXveaJQRc+wbX\nKBoODNWwU2w9nSoDnXlivGMuYHOR1duNKethVDtRpslWPHjn/+PSDk4DiQwe\nZykkSDWRzunmso7GwJUFTZxvNS8/sZCrykGnkTTTCMHZAxOG/Cq60UkI75JJ\nKXDNFC+jZiEOAcG9ygFTGaZXIvgg3bE3fo13gjRDzdwvnDKN2UAuNcyaLukt\nL8AM8CJahrxBPiPaFEJFfNLON23BBiYJQz2mXc8L4S1zp0JikP0GK/VuygAs\nnQZ0\r\n=fCts\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08db3d737.0","@material/rtl":"12.0.0-canary.08db3d737.0","@material/base":"12.0.0-canary.08db3d737.0","@material/list":"12.0.0-canary.08db3d737.0","@material/shape":"12.0.0-canary.08db3d737.0","@material/theme":"12.0.0-canary.08db3d737.0","@material/ripple":"12.0.0-canary.08db3d737.0","@material/animation":"12.0.0-canary.08db3d737.0","@material/elevation":"12.0.0-canary.08db3d737.0","@material/typography":"12.0.0-canary.08db3d737.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.08db3d737.0_1622835788024_0.09838927794809682","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/drawer","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.5823407a7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ea2eb7656c4951553086e31ad29d181c453ef24","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.5823407a7.0.tgz","fileCount":48,"integrity":"sha512-dyrCKTgWt+bA1ZIcKJr5sIauBMqdzosyQOg9wGjX4tkn1LM3OSovRcCFoSVmNBK0hL0MEiIoYPhLgy2Qd0mbvQ==","signatures":[{"sig":"MEQCIHlxS17HUijlo9dMSVl5TH4qHlsB3ogpPBN5TOLvRTjIAiAWLjFT1E+PdC8ISOQjwaqntljxFHfqiTxGuqfhbi/YZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr60CRA9TVsSAnZWagAAxhYQAI1bDW0uMbXLjeopVWef\nTg9wuY06TXYeKsHToncuxsSq1o3ytUUFgCveRlmUu+XLlZRpTZtuTJVk/NJW\nSaB1qQHD+ON2eqrZyimJyaGd4dRtLhIIqft+rqT9zqlawBjrIRWt+oRcn60X\ndJrg08r7EwS6GkD75AzaoyninwGmVyHNv0qItWz6Oo+pQBMwe+Kaq5acG68+\nj30aW7cKf+vaiNkFEuglh0Gl2UCuwrLwq1azEkKZQwd9+zzeRgDLYq1hReWw\nuH4hLDxJP5q9F87Lo+giuV1nYsDDL/OzPODYKnBY+z4WF5q/bwmFhYgJPHGJ\nvyhgJVMjByRIHqzelP64HWWw0Faba6Qk3kzTG55U3NoyQi5I9wFufhunQuv7\nMnDDwanBSZXcO8yE00Xq6Dwj3eTBGx1f3BHbZJx3a3X6XOcEDD2DrHhrXcEe\n51nyYpjP9IUtM+osPKs+8cCbHoc3Hzo1tLQc7QQGthuYJa5pKNPfP+hGu6GE\n1yJxq/zacg3xYFvEW/+cuT7q9/7sGkD7BMwvIl90Smoz75K13/hLz43pyo88\nDfSFzUPbBKlWV4ZfYolhPbqlo6VRBsnHuVwKQuQz6ll/LjR/KTjdZ2zGyNej\nMBfYAxAq4ddCuOcGsvY1UL1RIN19ZpXQgBfrMtXb+N0W+jx4zqK+B3A8+e+r\nu1eC\r\n=FBXC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5823407a7.0","@material/rtl":"12.0.0-canary.5823407a7.0","@material/base":"12.0.0-canary.5823407a7.0","@material/list":"12.0.0-canary.5823407a7.0","@material/shape":"12.0.0-canary.5823407a7.0","@material/theme":"12.0.0-canary.5823407a7.0","@material/ripple":"12.0.0-canary.5823407a7.0","@material/animation":"12.0.0-canary.5823407a7.0","@material/elevation":"12.0.0-canary.5823407a7.0","@material/typography":"12.0.0-canary.5823407a7.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.5823407a7.0_1623113396030_0.37835348833964466","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/drawer","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73112cd116488446b9046bd2c1807776712f8d1d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.23b0c5e22.0.tgz","fileCount":48,"integrity":"sha512-uUU2jQVS4jZhaEvhXCapxP1NCk5xXawSvnh85jG61Drq8XicC+ITf152EQoN21RmpCthG6fYCCH38m0SgZkemQ==","signatures":[{"sig":"MEYCIQCz7BqFt0x3oedJKnq4jPtWZJbUlObL887CsHCp6xNlfwIhAOLPn0CCDaS92gZsfoLKND5qMxPEOia7BRGyTDoHJtyI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5mPCRA9TVsSAnZWagAAW/AQAIvQpGyKJUNKxIei+Het\nFnDhvAB1J4gvrDtH66zNZ/zPB9XQf5AhhToxXMNBdYkBZ1If/S+XmTPFqSsj\nD7AISTLsd8v9wEd4585MlmypvcvsQ0jkl4Ewt1z+W2LXNiTVVkla7b+zk0V9\n5kJN71/Dw5vqAigyoP/Hz5hIT2Aoz4uRnrWxGCr5Gcis5jAFeRaJeFn3anCr\nYx7xh99j0JfkE8KusoG2FRVIDHCOlA7dX0Dm63KAUfyXPc/LxZGuW/rJagAx\nZoUslAIMa8ENNp+0NMq0ehKfZSIaZG+vfpuoZZcStLbWsLZtdEdkSmwf3ULs\nfW6kAQIGbXPcO2zCYRYijXe9QQnE0Rr4yqx/tpuiYeqHI0ga6lbw6FWwatYd\nr5ZmFuLoB/wdZREmsWcmVlitFu22FGpBwD211gM2bua+tz7D971piFK0l5n+\nAnJp+J5uXT8M1+d0d90/b2RfKI9sYnYPa0+ZnECtIprGaUS0tiufsVUjlsRh\noDVsrrkBqrJ/Hdh+xELjPjL90R1JVTALXi/cfInqg2L+6ul5QKIKk0WwzUmF\nzFQOeu4jsRDu/AQM6SCtptsZkT+h3a9Ygajc6hXkSH220BZVaCZMJZvZZuGn\nu8Xn5gY3tYKJPtvaSYlQflUODuk7mtl4Zst02DNn90W7OVjWjPRlGCdzb0u8\nSC0J\r\n=Crwp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.23b0c5e22.0","@material/rtl":"12.0.0-canary.23b0c5e22.0","@material/base":"12.0.0-canary.23b0c5e22.0","@material/list":"12.0.0-canary.23b0c5e22.0","@material/shape":"12.0.0-canary.23b0c5e22.0","@material/theme":"12.0.0-canary.23b0c5e22.0","@material/ripple":"12.0.0-canary.23b0c5e22.0","@material/animation":"12.0.0-canary.23b0c5e22.0","@material/elevation":"12.0.0-canary.23b0c5e22.0","@material/typography":"12.0.0-canary.23b0c5e22.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.23b0c5e22.0_1623169423572_0.38278049246686185","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/drawer","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11859b08e3d1f241e7815d79e9b8ffe5250ebc04","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.2952c6a76.0.tgz","fileCount":48,"integrity":"sha512-HV09hbGyKVhybnpOCRrICZB92h2qvWBpHGvnSq96AKkgazx1M8wIlIhgn8LiRaPxAUa15u2xKh41+TMq8rwGRQ==","signatures":[{"sig":"MEUCIFli+UxJ+d58Bt+IZ20dByTWhgB8dDEHVOJ57ME4MYHyAiEA+eW4UiWachNZZfsH9vLFwcx4CKkagzSTwwh7qgTUqa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6v7CRA9TVsSAnZWagAAyXgQAJTIRmqhvP1mwKvMjntq\nU818UXS4nLM9TzyKll13y43W/Axmp0SEGJj+fdVSkXWqVXFeouCi8BOxUyBT\nxgYNvWAP90W+vZ8Jum3UEZdHvswJoN/ovWQV7Nfvtod9qUysqulXbRmpDP1D\nODME4SGFgT+1q3DfHGrh5suw+U2zprLcZ2v5DLuFJhiT5ymEhKHQHPKiQjum\norUGb9K+dexOrNDQn6NgHvR0rtBJwtA23psVvpHAV+QFkgsIBEojUO0Xr+fs\nlXu0OT8fbUrUXrzNkxRVG23Qnswb/vOgfbZJsYA274dcilYHhUdAkDi6XiBG\n9rp92zKB2vvu826zxeZhEhQIF9pixEak9kcEKk6XB8alDuO0ENofIF1ZRXWL\n2nH4Zr4FHZwXEnaxuipTWSGS7Yb1SYKCKeVcFMCDVT+YBXAmIymkpsMZ/yX7\nwgsaxiY/X818Ij3ZalRF2KurX6e1DWHkEB780QCCCj4SaFw3f8STO5LoMnEM\nMBKRtNR5fPhUTX+jYegcaLBqO0ZGwCjAmLK9VH2mWm0A7c/WpLmWLA54eg9J\nSNpFQDKMk/CLs2h4iayRaPI++woYSEGBERuumCq1k3vEFBa/I3XpPb8vZCro\nZsyyRNZcH0pqbtErdXkpVjIDFxzm6h+2bsa3ee5rAOm2oSIR9tf6mHvG6kQ8\ni6kc\r\n=F1Sx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2952c6a76.0","@material/rtl":"12.0.0-canary.2952c6a76.0","@material/base":"12.0.0-canary.2952c6a76.0","@material/list":"12.0.0-canary.2952c6a76.0","@material/shape":"12.0.0-canary.2952c6a76.0","@material/theme":"12.0.0-canary.2952c6a76.0","@material/ripple":"12.0.0-canary.2952c6a76.0","@material/animation":"12.0.0-canary.2952c6a76.0","@material/elevation":"12.0.0-canary.2952c6a76.0","@material/typography":"12.0.0-canary.2952c6a76.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.2952c6a76.0_1623174138724_0.9684623378151815","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/drawer","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.f12425f88.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75faadbb824872bbfaf918d5dd93072b6ef5e824","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.f12425f88.0.tgz","fileCount":48,"integrity":"sha512-sdLhC5sdkx+KwGrRWacx9tHxjtmSd9KtTLz5ijN72csnwZcPR0dveTPe7h9Vc0Qt9swYOT0WITE8urUCdF8hLQ==","signatures":[{"sig":"MEUCIEIFVQRFS/oM0pWiyMgUZUvka8YsJo3Leh9ioRw0TeeYAiEAg/8kUwlUN7zbG+vzEYtdPjHBEzOx92d1tJzkPHz2+xA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWXvCRA9TVsSAnZWagAAygoP/R+5Av1dF8WdUxCWyPwH\nFk4v9VbZRFwoHDiLl5pYRZoW43s1m+4SxiN0VJOrOarS2sXPjhaKzQpYFpZT\nedGSKjt+ELxFT5cx/15gp6ye+a3Bl4a0dSsq0KdjFaQr8gJkAg7iEH0IKTBE\nnL9FHEIn/TQKUCRzhhsDMozknymhlvl7LHihFKnI4CTREoULEEX7CSK/gexL\nBGMqdtdhRNUbvB6ZuTfMVFXc5IoMFoVva5U+TwDJFcKVdsNDzjKyIy0HvhvJ\nBCaTHZp4y/JZTy0aoib0pfCwKf3wLPVOXNnxT/M3a81aQF+ghSbfoRLRoS4e\np1WIWktuv9FRfjwqsomoQBzeQpEuqP2o8BvPXuyJk2I0CNEKwIO9F+ttnJP8\n1TH37ITtK4mS8DkmvOAUBXwyPTl4dwT/yDMQLLtY98D+uIDuDhcBimA/tehL\ncyrzNSQ8Dc/nGwzGTCX6+WOXlrFtNxXRNDv++EcZ9C9s0C1EROap6ERoomM1\nP4DTaLF77Rie/hzdnB0I9Pjr7244gO3dPkUEE6IYUG2waDpYO3NYxeKG7hq+\n/bG1sZFdb17yY7NITrM4BBDGTqf49BrePKbeGczQ3tVZ33blm+DfbtJfnank\nVgPJFrvvb7aDIqbPMcS9Vf1UCpKt54ZJKsqUEptwlqXfVmu5Xm0wf2pvmYAi\nQI30\r\n=/nZ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f12425f88.0","@material/rtl":"12.0.0-canary.f12425f88.0","@material/base":"12.0.0-canary.f12425f88.0","@material/list":"12.0.0-canary.f12425f88.0","@material/shape":"12.0.0-canary.f12425f88.0","@material/theme":"12.0.0-canary.f12425f88.0","@material/ripple":"12.0.0-canary.f12425f88.0","@material/animation":"12.0.0-canary.f12425f88.0","@material/elevation":"12.0.0-canary.f12425f88.0","@material/typography":"12.0.0-canary.f12425f88.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.f12425f88.0_1623287278941_0.4801989362089649","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/drawer","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.e543628c3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27c796697fac040a97a60666887765040d7752ff","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.e543628c3.0.tgz","fileCount":48,"integrity":"sha512-x/O1JJllwWXjut3mmyRPvadmnkX+FRCBMbkLDCYyZmKCyCuKOCYEUoHTZHbFjLjWpbNgYpnrgS8ok7Fk0/0F9w==","signatures":[{"sig":"MEUCICeXOXaUkxyvbhP/NhHeo/N0QdFWqeTiaM2EDyctRgs5AiEAuW6gEtHF5QJD2x7O1NwRgQoPWQBgttpSCsO313F5Y+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWYmCRA9TVsSAnZWagAAqIUP/1kPW5hwoRhBJtCnSHYC\na/xgzOG4DhEJ8sRk3h67pcdF1b9GGEAR9y9Tu6e1JO6cgzDvCsH1qNFq0PAE\nCO8PjsWVgxDyhs0TUEarIIvsgpTQe3Re4fPKX0Tof8AUj68cyqGvcRywGxxR\nkfPo8NTxSWLcLFAiQ7500xjNhVfnW3yIl1qjZB4dn+aesGuxZ+CXpDIYZqih\ncmaXLessjMkXou8iYuVG313kMBXp7M6bLq0K2IM+EQ8ID+YhfaU8u9Bfna6I\noJWYlSD0FzY+fbzbF+tgArCd1T96Z9DqhTLm1nEUm5XZqd7jrxF0E7aDGPYy\n3p4fPrjdyGziDISX+FaKOo0YDbzTtaIOL+iSutN5mga/BJoWpU5wBLmHTOrZ\ntzQEZeKPIoc+QUctXYSH4xw4i2ZXgsOyNqJu94pLQmmcT21mzII55O7il0Q7\n83keSYXTHVY1sFXLWJM5uVB+zSkaOzTeqf12WysTL90mrvXrUUbNB65o4jXs\nO+K728E9c905HFuTUhbD5Ny/JVCsNxteCjEeYPDWyeKRH+r7ANjFrtUAG+j3\nx8/Dvxpfn+tRV2F5vARWAgv9FC+qMGDc7saP4E6V7pLejSU3kAwTMDwoO3DT\nOe3bhLUbuvFxAYq6rfzCkB96NXMfb8e/lgD+HB1SR1vJIx24L7qDD5oMocXe\njReN\r\n=stHn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e543628c3.0","@material/rtl":"12.0.0-canary.e543628c3.0","@material/base":"12.0.0-canary.e543628c3.0","@material/list":"12.0.0-canary.e543628c3.0","@material/shape":"12.0.0-canary.e543628c3.0","@material/theme":"12.0.0-canary.e543628c3.0","@material/ripple":"12.0.0-canary.e543628c3.0","@material/animation":"12.0.0-canary.e543628c3.0","@material/elevation":"12.0.0-canary.e543628c3.0","@material/typography":"12.0.0-canary.e543628c3.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.e543628c3.0_1623287334290_0.0623355661615117","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/drawer","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.e0c346286.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0202232ae79d83a0692ad21a5ebeace16c308bbe","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.e0c346286.0.tgz","fileCount":48,"integrity":"sha512-0085HaMaXZ6SR/aeAvQKrLHgikn0bW5ZKT2R8KZ3yPv9YVJ5lixzz3wY76S1tgtAPWq3HyCVqVNEZcPOlVbPQA==","signatures":[{"sig":"MEYCIQDntx/GjR/t2bcEUZ+Ksc9JOcC49IPF6ShzES24wbw9ygIhAOPoHo23wF0uif11I76LTQUbDUYoQGwM/QYF0gx1ytB2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj/ACRA9TVsSAnZWagAAV2cP/3fXvgGeBr+UYO5nugbw\n/fVYNSxHosoXiBlEKssa/BaJMFMvUpC2PokQ9XdYFwhrbXICEnZQpfzvwbeq\nw/sxIt3IxxQKne7Yo3DNwN74Pf3TU8HPW8JvZnB2OMGJwJq+fiIiVtkiCuJv\nTcQ0vcGYu5uhuRDftVrdyHR8cWgLRJ6Rwwa/KvOykd5dJa4ocbZ7BWLEHi64\n8cayOfrWpA/R4B2RN2Xtk4uGzdy6VvQpwmGDbcDwdPZyHjfsUSawPss3cmQF\nL9ezSz7CUHZ2PhAApYbOWID00ioHTKrxt576swhxujq5n+cDOmbi9rdsNoWm\nZJHq9jujBax2jAIbTO4CoGSu1rMg8nvo7dI9elajb6VRhK4N5ziUVZ8Dwi49\n+u0sjpYomizNZob2CHNoai55e7iubAEVJop/B7lcdpWPJnPuXUji8sD4AllT\n4U2XN4YMJeAu2u9tk3bH270Gxce+bEvZGh9Whg1LxycLmCYVnZYkL/DXpmY+\nEXfBKXjijccbFKfLAzIoNFUHC8uqt8gqpgU5gd1sv5KNAzDpRuAGngOvOoj+\nf5LtHmWoIopyKVxLRiVOlYTABH2UctFjcbBxdidzCt+GbQu8Nvm5ZzjVMCF4\n22Dw2Sjfdd7++KihwRd6qiK95BYuVj/aJYI8/6JioWKy19+aXEW36djkmdlr\n62o6\r\n=LX2+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e0c346286.0","@material/rtl":"12.0.0-canary.e0c346286.0","@material/base":"12.0.0-canary.e0c346286.0","@material/list":"12.0.0-canary.e0c346286.0","@material/shape":"12.0.0-canary.e0c346286.0","@material/theme":"12.0.0-canary.e0c346286.0","@material/ripple":"12.0.0-canary.e0c346286.0","@material/animation":"12.0.0-canary.e0c346286.0","@material/elevation":"12.0.0-canary.e0c346286.0","@material/typography":"12.0.0-canary.e0c346286.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.e0c346286.0_1623343039963_0.8084576163359973","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/drawer","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.f43af5633.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d281295afc22af219a00959485ef84fc857f0a0f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.f43af5633.0.tgz","fileCount":48,"integrity":"sha512-U9Cv6uNVUOhMcnPj6NOm7FE+TtpbPnra1NHdzR6mTZulg9ACsVAdLty+IwOE14VhASzerEOZb5wpWVYteMPS7Q==","signatures":[{"sig":"MEQCIHkN3aZnRTWR23ovctUWs8vKongc/uxUk180c1pYXyxrAiBfwJ2EZHrfbPn1hKu5n1EkMKAIS0KD6i0TNu131CabcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwnf4CRA9TVsSAnZWagAA3MkP/jVODLbpxVT8CvhNof5+\n9ig6ZMWrLRYdcEXt9gn6LzA0T6JQWyPdJQCylVpdkm6BzCQAPPIKjURwU5By\nBlNC3T7pDMmvGKZkL9shYnPo1OGt8TYiu6Q1sNeEoZAOLgQ1jH6+xTZdO5D0\nSTnINecRx39P4GQ18UMqZsnSd+vleSA9uRBtJF6C4WmYMraeYLsbahGN3TLQ\nProRnXA5GvROPUcYeKsSJ8SGir5lngKWhTTaZia18KRgzGolAuB7Qnc7+ZW1\ncYmqqgXBX8Nmzk3tmQkORQSTD+UEY2ysq7s7aNudZ88N38LR0wf4kmmPb2tz\naK+l6pTEubKr4vmnEO6Loa+Vd7qjdbzyUW3B2csxIxqTGzQip4tbF1EtbJG5\nvk6XuUUGjRfc7pR3XWn/RdgI2lRBEP36I7KX28iQYPsmczgWWPVh1r8EJr6p\nKkMFQz5DMf4a/jV/QOkBARWsmTo/OAlEUoE4iJmGZZ3bGfw31s8PDM3kYJ5o\n34FVNU9SPaefw1HaWCOq4VQAzSXWJGYBNQvnZUk6eoYxh6fixKZ7YICUIsel\npZpum7gdNiB24c40NqErzp89O5FUNGM8Bk4CIBI/TeGj+Bk/IwZbxbib3+fQ\nkIW0GqztBVs5haNCoBqF538vs5ATtFierdGDzJtR6zRRkRiUqy4ZEvluNrgo\nP2YE\r\n=03i4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f43af5633.0","@material/rtl":"12.0.0-canary.f43af5633.0","@material/base":"12.0.0-canary.f43af5633.0","@material/list":"12.0.0-canary.f43af5633.0","@material/shape":"12.0.0-canary.f43af5633.0","@material/theme":"12.0.0-canary.f43af5633.0","@material/ripple":"12.0.0-canary.f43af5633.0","@material/animation":"12.0.0-canary.f43af5633.0","@material/elevation":"12.0.0-canary.f43af5633.0","@material/typography":"12.0.0-canary.f43af5633.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.f43af5633.0_1623357432253_0.00023412575326497986","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/drawer","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.8415ae585.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"248ce45ad27223dc78802b7221d4c69fae17c255","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.8415ae585.0.tgz","fileCount":48,"integrity":"sha512-qFcfXe/KheVKRUxjvG/mvhTq/RZZVdeIE0yJXYiaXgjVTcBt/71/AclnGY/+a9Vj/9+FXVCO2pVh42x4eF94LA==","signatures":[{"sig":"MEYCIQCffMg+oS6oIJ5HcHqlGawAr8FogrV6szHB3blA1bjD8QIhAPwCerjAGxKtMU2+fVqhkB1eGiRMaF+OGrH21rw4o28Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4o3CRA9TVsSAnZWagAAzdwP/3klw6ml3mvHTLZGY34Y\n+bl7BseJ14Z0rPmTpLJw0fRP73WNVPva+Wn/fCRoDApkmG/oGlEBW+AARGBW\nDtrdVuNGVSyZ3oQay/vfn4gu5p7b/8oL5IuB1vS61N2EgfxSwfZTyqFPZObN\n1M2L1S4K/fD9U1U8Eg8kJMwWS5dDNDZaXtNn+o3UmUR7FJsk35DFCDjvEvJw\nzIu3104AdpbFzV26dffGy0t+YJDyXXqt/WujdX6TFqkeArR3YlqGpCj+YMP2\nlGoaNC/3XGqV3jDqkz2d0Qf6tmF3a7NdQhXeN1m1SFQpCuJ5DXJC2ji56YnJ\nJWq1O66enf5kYUA2cQoPhlDP3ucLC/njqjQB3AobpvdDCsiu5OtaHbx0E9Gf\nsu7alwuJJfA6LL6e+zXNvVt3d68ZUkE75qvFYttQSNwU7SikiR0rm3F4sOcX\nCsWvC7gyIIjxU7tl/4p7wBVq3pwqvVnAnaUWQ2j4Pm3so29MPL9DqOLTNHzQ\naDbHpWbis19vXfUvDRb5BSqaArC8pMVtyO4b0A2Ul7HWNhiRR2XzXBC3x5Ro\nxsKsSsqQkzMLCzqNc7zRqKQd1JNok7LABG3MHVj4lh/3mWMingaEAVZvCjXj\n62edXh87oV1kiQibvpHhNRVH4qb2yfK0xQz9VxzyOC1SZWlyy28EqtWcg93/\nYNZ0\r\n=8XQC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8415ae585.0","@material/rtl":"12.0.0-canary.8415ae585.0","@material/base":"12.0.0-canary.8415ae585.0","@material/list":"12.0.0-canary.8415ae585.0","@material/shape":"12.0.0-canary.8415ae585.0","@material/theme":"12.0.0-canary.8415ae585.0","@material/ripple":"12.0.0-canary.8415ae585.0","@material/animation":"12.0.0-canary.8415ae585.0","@material/elevation":"12.0.0-canary.8415ae585.0","@material/typography":"12.0.0-canary.8415ae585.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.8415ae585.0_1623427638852_0.46859330555486256","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/drawer","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cabba10ce813d00c165cd5fe65a69a8659ca82c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.598fcccc8.0.tgz","fileCount":48,"integrity":"sha512-yXxn9MEkr4Iz+BzSZKUNCxONUbUPR08otqu7s7Zl6/A41kLLvocuzmm5Q1/S6DoqoNLiZxpl9enEcXC626odtw==","signatures":[{"sig":"MEQCIHeMMHvvtz5SSk39hGXt/ARxgRREU/P6ajGXKAwUtarVAiAejlSXzNwj5n4uA0Wmfgr+yR0ChRuEAy99NOgtXbh5Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":964068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9oECRA9TVsSAnZWagAAj5cP/2YdHHZJxXp4dj9qaaH3\nmVXL0wP5z6JAPic+LalGOBwVp0tZJEwqX/AijHFUaWmrHeN77y6r4m3Bzyei\nmA7y4gsHx9vQGgTC9z8hEACYkG15Iqbbrqh4yKJFRtWtw8YO4MqQ44jzx6tP\nIS2+nGAFtIFIbkznAimoxIec2XRKJBnWfSKj9MxCaYQWYwuEjJyb5ElnT2yG\nCmfc9qjx1Fiyz6erLA/EPn/DcM+ghur5VfvM+2YuQCDMAhcMyl4YM+2oRyrT\ngetE+x4FiP9tpv7+WM79/w1WJYNEjKqXhRDHQsEvuv2NEbJ3I+3rsTnrt/w1\nLb7V/kPS+R6Zd+6tTVOzaTIxzAx0FQeF9XJrLTYqsJ8r2fJGILHrZerR/Ysv\nPII3kc0aArwLFPzNDUKi6Hp4jgNkB0rP5hPgTd21YTS5vhIqwLPFhvftMVRr\nnTOOQ6o0P9vPA+yxF0Gy6X0c5H8qU3C9xMb9WVcpJWBvVtCLbl6vdGbTG8u9\nXe4aBub6rvqbq1UOXcBkU/sJklB14CRFcok8h4h+agJ/qboceH9Py6vYeotr\nLEg+uTDjo5ZG0FNYGhEpDgFHRmKLYr0kgP0Oj5eKwM3ssUjTXwZoL97+4F1C\nXTJDA9WGJ60wU7duVvhzassdtw1AzSbbkdbjHr/bq1rEdTvebOIxfPzcn5lP\nmNts\r\n=5Kv+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.598fcccc8.0","@material/rtl":"12.0.0-canary.598fcccc8.0","@material/base":"12.0.0-canary.598fcccc8.0","@material/list":"12.0.0-canary.598fcccc8.0","@material/shape":"12.0.0-canary.598fcccc8.0","@material/theme":"12.0.0-canary.598fcccc8.0","@material/ripple":"12.0.0-canary.598fcccc8.0","@material/animation":"12.0.0-canary.598fcccc8.0","@material/elevation":"12.0.0-canary.598fcccc8.0","@material/typography":"12.0.0-canary.598fcccc8.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.598fcccc8.0_1623448068777_0.29709669202440936","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/drawer","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.5d0605188.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25476ced8cd3e7919cfef12e78b9952251a47617","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.5d0605188.0.tgz","fileCount":48,"integrity":"sha512-kiEzRy9HvibpLLTj/6A/Gdul3WKl3Il5s3pyb0xeyqz52kbJoqZDcFONxawfE5JEDTAaV4qRk+OX8RrNjKnn/A==","signatures":[{"sig":"MEYCIQDvgPz6n2xWS1EGN7NYNm9WbSeozrJRQ1iWtc8rMKk3vQIhAMcdypUT18jkbx7mOK3HuFIqtEcn+Q4GCVDOuwFPMffx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5SiCRA9TVsSAnZWagAAlCUP/iVnATLcSaSLTUY7PBQ+\nBr76iEcJDsRvhq1X2+3QsJgDMwH79OVKjzKDUoud0AK2p2KFfnOFFIHgYYRf\nZs2VOCMSBYzcrqJ4Z+YxSYZgjERs1yVAP1LZ9negJD9rHrNy4ige1CBJuJcp\nXISjUXg8efrcLik0enldCSAbhebUbo/i5dpYqm+kiaRGQP5vqlwVoDaT1Okl\nhsX6WvRmYYbbuSKmE3BJYrsIprqBX3nE0YMvXBHGdHLQ0WW/jzX/P+SVjZ5x\nadSIg6cLpfIPT5REsKRhCjMHHJQpo54U5MvSzKoghEtlS5/LwufoTpWjFBNA\nMJ+c/2xgkTB+yvm1D2eQfQ5zrGFhBSr2ArH4GXU+JykXgRKoTwXquG73wbGd\nQE+Jbmdr/gZPFuD81T8ZZ3eyXp0qA+CxM+vnyaXM6eekr6ahajeP1SEcmS/M\nQYxH8KyJmPpT+whQ38AWZTStJdcYTMw2oZypXLGAKilvMat1GcMYRN8rjgjW\nmTbyimdkIpQCRiwSfnfdD53tm0M7og28+47G1bmfaoN2tdwrpH2eW7+H56Ao\niQR5ZDSjskRRMXqrtB2cqmMMudilLHwfqHqcP5Ib/jwgegItq32i9wh1XNKS\nXTd9pBqwZb+4d1ovCdxbQ9lNiC41fFooeAcBW9/quhngcXju6PYvI6ZIvawD\n7Kda\r\n=oMZT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5d0605188.0","@material/rtl":"12.0.0-canary.5d0605188.0","@material/base":"12.0.0-canary.5d0605188.0","@material/list":"12.0.0-canary.5d0605188.0","@material/shape":"12.0.0-canary.5d0605188.0","@material/theme":"12.0.0-canary.5d0605188.0","@material/ripple":"12.0.0-canary.5d0605188.0","@material/animation":"12.0.0-canary.5d0605188.0","@material/elevation":"12.0.0-canary.5d0605188.0","@material/typography":"12.0.0-canary.5d0605188.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.5d0605188.0_1623692450074_0.7182025549731934","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/drawer","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.f147a2271.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e933f80ec51cd0d51dfd46feac0e877722ca681","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.f147a2271.0.tgz","fileCount":48,"integrity":"sha512-C54IDy/suHJeAkem4BTTvTZYjPETQWwzlwgkOiZpTJydhiMmqvogFUMuNRfnUFH8PlF93gpOlSNF23MKbj82vw==","signatures":[{"sig":"MEUCIBVyOwoU0gWaLE6+cV7+PBffl5j2IuZEK0qhYDSEGS/IAiEArHA3nSkkaMURp5j5Zkmu4BhAXkmvaj0CZehuJVueR9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6vICRA9TVsSAnZWagAAmKYP/00sZxcH2kVIoAmRDDfk\njc3tV54dgH/4t5nRgoch9+OQvlZQTA+r0j4oC3cKnGPFkOMdeI181M2+7r7e\nGEx+nRz2pu5A3V4Gl6CYRbR8C9mL+ym2g2XJe4piCels2CCWKJUUkqRwIl12\neOb8MsO49Rxyj5h36AGYpSHnGFcnrEwI1ta13a1zGg3getXSVGOu1UKW+hxd\nd38Ey65r6GTzPb7pKxP6YQ5dMzp6hxF/8x6tQ+C0tvhvTWi5lgSFmevDtTW2\niuAG6D2Kp2pJPxVatPMar9E2NfNp9Do4B/S6vb+6JHim2+rd40mnsnETAtAF\nB/gEtADTJTJHijvWCmiY6ZAMDMlgoa/NUVy0bAlzzX6PdVnqIy69jzDgDRu9\njl2EiAZA6tlXa6emGkJc6/1haGOKhZ7F/eThpvPHCYem5FvKazD9NiuMSa1e\nGHKyqFszDBzNik/seFUD4l7EPW4O4gDk42pLOcDb2jqOvrdJaBGdds1STkUi\nKFKbcj1JU2kXcgvGiNg8xLfhGjqxBr/BV3JJJOWg6L0By8KXWo1/0w5feAR+\n2QWPRVvcl7VUlRFcUf2eStrVNQ1D6HJ+FuNvmz3Hyj7/3NUIXr2n120V1zoV\nkO0bSUjlJWfjeAUi8o2MzXawzJpw2mcL/szZE5mf8egHfIm30PorlDQbpB/b\nKse3\r\n=sN3b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f147a2271.0","@material/rtl":"12.0.0-canary.f147a2271.0","@material/base":"12.0.0-canary.f147a2271.0","@material/list":"12.0.0-canary.f147a2271.0","@material/shape":"12.0.0-canary.f147a2271.0","@material/theme":"12.0.0-canary.f147a2271.0","@material/ripple":"12.0.0-canary.f147a2271.0","@material/animation":"12.0.0-canary.f147a2271.0","@material/elevation":"12.0.0-canary.f147a2271.0","@material/typography":"12.0.0-canary.f147a2271.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.f147a2271.0_1623698376115_0.21151640342210887","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/drawer","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.33579e00b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b58d16b13e0c1be8b2de49e9ca1cb759c071b2bc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.33579e00b.0.tgz","fileCount":48,"integrity":"sha512-/Cy6iYAzHXBR1T7AqnzMb5KVT5edy2eMPnFqHVzdh3usLrB2IXDA12uSEnakXVzzgRtczYeND6KNEYXweVTTQA==","signatures":[{"sig":"MEYCIQCc8nXWS1rN2BW7ghteGjnoNVcrC7XUgsxftPdhrnK7jwIhALZOddkH3KzeawB3uFdY8XgWu5zMBb/ZJOqJD92ZJq5s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/MECRA9TVsSAnZWagAAKkkP/2Jf9OJPjlhGgItl9I3f\nd7gHPIMMjn8Nv2SOhPrOp/gP7ubQS9wt0DCXYXcHXQGTrXa0+lQTqCK9lRzk\nAkr5b9KYJR3fMGactL0dEqqX2MIzhr44+z4g/94sgTe7FKE7rM2/KUgdeOX3\nIZnHHEBRCXKZTULOeaFWgVX1n1yrB6+qVcw4Y+Y4f/9zgmn9PoEPWLp07DxU\nMyLsUtTWvZrnmzRSHjmXSFv6wrjaRpkQcexbleFU26fTMIGUo/xE9IBUfNRu\nMgYtP7XovozrW3SNUUd7EaCV64YANZl7Xb/D1o/1CC6MIt+oUS98qQ2W632J\nxlTImAffcb/XHlW7keZ1ZLwRz9W3EtW7KIOOHWB43gT4A8G+rfv2QQrM51OI\nZmDkgQ/n+hOjmW6N8qFx848jjD9IxcZTec0K0rGnS/KKdip9Xq+VHZB4CX4o\n0my1kxqCYGZmp0sz+A0NZ4DsPg28Bh9J41jAi1NyNE7jIFMtgxrxqt0l5LtG\n5fdLry7TNz9C/MKrLjRrQ0Y72xs1NvcZT9e/ZKHj8/0gLDN+2c6xw+x0YVvP\nI8pWr13kJCl1U37MH59+7q1k2Yd5i8QXOj68wSH6Gugm0d3OLRAlzAb6P/tn\nE21Y1pT6AIT531I4wiaKFPvthsUhwPHPZ3rDw5j1qx+5RE7leFroZGqLtoai\nJDVf\r\n=p2Z3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33579e00b.0","@material/rtl":"12.0.0-canary.33579e00b.0","@material/base":"12.0.0-canary.33579e00b.0","@material/list":"12.0.0-canary.33579e00b.0","@material/shape":"12.0.0-canary.33579e00b.0","@material/theme":"12.0.0-canary.33579e00b.0","@material/ripple":"12.0.0-canary.33579e00b.0","@material/animation":"12.0.0-canary.33579e00b.0","@material/elevation":"12.0.0-canary.33579e00b.0","@material/typography":"12.0.0-canary.33579e00b.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.33579e00b.0_1623716611952_0.23297103182849588","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/drawer","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddfa0cec410d9d8f61d799a24a97add51370d750","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.a6909c0e6.0.tgz","fileCount":48,"integrity":"sha512-f6/9WJ1nerPoa0yb6F8+sRtTOTweg0IbW7mw83cAa4Lm6w/EAlpi0e4WEHQ6liGYpsC1anwnEwSWTf0O1o6iMg==","signatures":[{"sig":"MEUCIQCzLfBJtNTlWNJvpcYqvtfcM+WZB6uksAs9qTji4wc97AIgd/9tjZG49k8zWMB5ckm4aF69+FCtVXZ9w6Zb819sWOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":965078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPIMCRA9TVsSAnZWagAA6+gP/34Gsz+YDMNEnbgSOL0C\nVdQ+uTS4QZcERUTtstEE/PMj9Hcxv5RPEtaIyONUd8BAI0gPPCexWjwOoNw/\ndKWcYknbHfwKjZfJ/+TO7SXSAyP+5RhrIpyuW3xeHdY+kxgBNRKO9fnhMEQf\nhQDeUp6imb+Q4xOon2zNf/+q5mXz2KAD9ImU3WezpNRa7yALGi+kPNtOOaB/\nfgsJi2qAk9woaLUWJaY4e8pT9FAguYFFuYuhSDRbn6qWMA63C0fhHUsb05fZ\nFhNUiqs6Ia4AFdkYKQSHhVRAGEk6biNRaffqGGp4D6SakJWtuOl8cfBI4gaE\naX+4lDoetk/YuQqIvgpHaS0TOyrWdUwlry0ATpts0iwQ9bHc2GNe4Qaojxp2\njEE5db3YK0VONiO/grKIgfYlcCI1m7eVeUiBm4ZETWl4kbDBuANLlnwrTNI1\nMZ6UgYH4iGhet2RNUOPozPN+YR473hHXW/wMnDRrMuVwYec+LlOg5+Uby39c\nanyOI8Fmki9Nj0r0CpXBQThbuuUshzioyMAjSPMszAcmfHp0b7CHBw4/4d2d\nbG/NayDLMreO3vWwT8sSrRWY7sqWWrX9RQEEHG3bzDqgpYoXFmYsvMqcYLX4\nQ2xsTX9Cuq3Ypjo5CbxG/EncjKv42V6bqN/HGxZ61HZgPEgHN1Yi6LTuEj/z\nJKZU\r\n=efD4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6909c0e6.0","@material/rtl":"12.0.0-canary.a6909c0e6.0","@material/base":"12.0.0-canary.a6909c0e6.0","@material/list":"12.0.0-canary.a6909c0e6.0","@material/shape":"12.0.0-canary.a6909c0e6.0","@material/theme":"12.0.0-canary.a6909c0e6.0","@material/ripple":"12.0.0-canary.a6909c0e6.0","@material/animation":"12.0.0-canary.a6909c0e6.0","@material/elevation":"12.0.0-canary.a6909c0e6.0","@material/typography":"12.0.0-canary.a6909c0e6.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.a6909c0e6.0_1623781900050_0.2596215133709867","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/drawer","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a35d09488f8d4aac5b84a4496b0b59bc9ae2156","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.c18b5925b.0.tgz","fileCount":48,"integrity":"sha512-vJ2GBbuRM15FWp5ONzGqskfVb7Miw5fIZiJE3eO+QFJAigkhW6mUjr8uXQTDdm+RRfssBw0HKZn0ioI1/Ldkgw==","signatures":[{"sig":"MEUCIQDUJfTiJEoR10MeaXahvvab4KmfTV+yADvoRNM0eCjbQQIgWIXIUA9QvOv6tghweqyeHhDOfN102HP4AousBNrng8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":970492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRYDCRA9TVsSAnZWagAAVTUP/iOFRLgxXBmJpY5fdu0h\n9aW21C/SkI80Z2ODNSuxWQdYSoiS4SBvJSPlMDF6GtSjF9D1cuNDB7KZEvsc\nCOYe5Ct9su0RMdb2x8u9JK1yrtQwg1N1Iwuqe85gwosYaQ3kQRFzTuetekls\nO+Xv05YRQW/00w3WfvAA+fYeAlYqp6fZBt7Ps+sFAlGGagUYZx7hZnhM9cqJ\n08jTZ3nUUe0p64Uk5Pg0bXuJqqd7bHWxR2U3JqGmNKhwEYok+WETuC2G0JaB\nWswcuPEL2NeBzbIjQ8yCnKWpDGM9cKcZXXA2Iq3X+MJYVF3yDWXD7CqIH0rp\n8NFicjHMKu66CpRASkDwIkvw25Tk7hRUsqARYNBUY3eK4LSS2Ax9jVpozCMK\nR5GT+pQTgZqmnlAty6QdGlUogKa6LGSHANEqlLL3Z7EPZJ0SbRKVshOkzWYg\nNW5obCf5QjCyaNn7nbETh1sDhOKnfUumsMzCyph5Tu/8cdJpT4rpoGEJBgrE\nb3p/+gR8lMv9q3MsyWNjoLFGiy14r90ZhWFlXj50/3IRAXZamwOehE6uZ154\nheIRM2SgRM7p+RqvHifhpHwAGRMmzMakUpIj3xhA7Dz3zkjoNpMeplKvtn3A\nYHs68b2xgpxPaD/iGVJCbWyKYuaSELUg7uqKDPmWrcCzPyNV19GztnQUefF4\nBjK4\r\n=pA+G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c18b5925b.0","@material/rtl":"12.0.0-canary.c18b5925b.0","@material/base":"12.0.0-canary.c18b5925b.0","@material/list":"12.0.0-canary.c18b5925b.0","@material/shape":"12.0.0-canary.c18b5925b.0","@material/theme":"12.0.0-canary.c18b5925b.0","@material/ripple":"12.0.0-canary.c18b5925b.0","@material/animation":"12.0.0-canary.c18b5925b.0","@material/elevation":"12.0.0-canary.c18b5925b.0","@material/typography":"12.0.0-canary.c18b5925b.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.c18b5925b.0_1623791107498_0.7994825910736236","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/drawer","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.271fff902.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db59526baa44906b8dd401bb678c2856d7e63276","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.271fff902.0.tgz","fileCount":48,"integrity":"sha512-pKkehHvXTAkpsqpVJqwaiT2LuGrCFFzTy3fnVheGH/zGbA8xzKC8F7E+4jeykW5wQA5xKsmGEuaZkI//FBu8aA==","signatures":[{"sig":"MEQCIBRhdsjivVLbBPavszVTSTP+EWjM/v7E42+p1dwopxljAiAIxR/Gilc/TkgiDdK4oXxJ69TziXLgKMiJrONAcpd2UA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS8zCRA9TVsSAnZWagAA9AMP/3XGWPnSPht2OCwwZA5G\n5GqUV+idXP3FJg0hgfFpF+yidfIvHwb32gZP1+Meve6gsmQxRfB8M/ESabqe\n6bEVQJPiHIudUUU+GY7t8GnvR0X0r0ULx33ISKE5+/BLr5PcN8hrAeXL56K/\nudEUfKFpw3Ob7u85bz30BJm8yfxNymwztnYvUNuK+mIW157H9jUoytY96oRx\nt3j5+km0TAzoSfp/nhBLtpHl+nGQhn0KZgerHzBA/GUJSD9ULtuyLKw8goQd\nzs8tt6GMPSpExSH34BVYikCkCTkj+aDyMEYx/4c3/+tuSOmiJnE/IGHJWXAH\nj1xyPAtTE4c0K/mG7nwYGLfy7qNoOAlbJoGxdRLCLTDSTgtAqKqDF07A6iu2\nJv5UCnlcKu0+p3bCCb6sNxUSw3zSg2W20DWeqCXu1LiNryBgpcDzK5CaSXAz\naahdc47YBrMSWAgw8WmX9PvZf9nvDEflEQ92eGFvumA3L7SY0k7NlfqA3bXL\nnvEOpnw/6lxf6y1Lk/cRN9ophrQ2/rxc4Qbt7w0hxjYdgJ2cu9SuSJvYGQO1\ndyLTaDs0uwTcPX6fyhkCaNySvf4XP79WUJpzJ9Ro4IlKGhKV1SwZKv9kXC2N\nH+6juFK4GaFN9N2Un0aFfxV3cujEgDRBXeTXn2OIU79oyfNVKp6nIxRF6t0d\n7Zfq\r\n=xIln\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.271fff902.0","@material/rtl":"12.0.0-canary.271fff902.0","@material/base":"12.0.0-canary.271fff902.0","@material/list":"12.0.0-canary.271fff902.0","@material/shape":"12.0.0-canary.271fff902.0","@material/theme":"12.0.0-canary.271fff902.0","@material/ripple":"12.0.0-canary.271fff902.0","@material/animation":"12.0.0-canary.271fff902.0","@material/elevation":"12.0.0-canary.271fff902.0","@material/typography":"12.0.0-canary.271fff902.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.271fff902.0_1623797554966_0.1074323501856227","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/drawer","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a31a361ce2ff3599c56da4cee9b2d7cf10ffbb16","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.7ea2e830d.0.tgz","fileCount":48,"integrity":"sha512-Q36TlYZpBqODYl8ipJFjqjVjKdK/IwKnC6/j/UHhWoTs6NW8wWrGeoCWwHebJPtNxwTuO9ZzxoZEMdejvSq3+w==","signatures":[{"sig":"MEUCIQCJRda/cPjTD8pCYjeRGURlosnMANZvrUW5cVf9n30L9wIgNnvE6riAYb89wEPT448XytJqmDlPKIxVCw08t34pazU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS9qCRA9TVsSAnZWagAATWoP/1TzlmrJtul/ebGy5eNK\nghlZbXpS3s7i9HK3ypQ20ztwjPnNtJpQ/CIa797ahoB8VKg24kXIwkA3ZIXU\nBxa/4iy/0ErnX2YHCkBDBWZJRUIQM+69HMXdA3dL1zw0W/0faFjNTldZYt+Q\n1IYefG+2KXLhKryi/+JH6+8a3ECm+0uccgnsTHTnBYzUIF3MRcpfMbPfzNIj\nJQyQN3DYLW+03rMbhEiook64TWcWCX2gFQ2lrvOF3TUQwFaNydmBwGPGfDY+\n86vCXPR0boYra6RNDM92+ttKrAwgIhPDTZnOzgbmAdugsbYt2xF1lZfT21oW\n1pp5hmgWgI6CoyZAHOVek89P34R1nXe0Nv3z2SM2AELpoFzim8Z3TZVhGHWs\nPq5BA27i/0qOX3XlcACaadjJum/evzWU7WwfSGEjMQdMheGBZ27Jqiq+hZC7\nU1Av0Do5XVzv/XTHSVRx3bC00xhg4/sKppfGkzGJIbYdJBtu6WxU4hsNQkkK\nTrTzbS+0Iw727yNFI3Cof8r0JfQsQfw4+0yebPSx+rW55ozuBr/sKzirujul\nW5mgSJX+hugFha1xTtJMJ4oAl4dDrCzZxxvvFPuniN1OR9yNeAcN22ZT9VSu\nLzr4GdrtFca/dUxuCqRo214FcYc1vf87LJYEmuzV2cFzRXpmsdcbuNKtBn0G\nRliH\r\n=M1rn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7ea2e830d.0","@material/rtl":"12.0.0-canary.7ea2e830d.0","@material/base":"12.0.0-canary.7ea2e830d.0","@material/list":"12.0.0-canary.7ea2e830d.0","@material/shape":"12.0.0-canary.7ea2e830d.0","@material/theme":"12.0.0-canary.7ea2e830d.0","@material/ripple":"12.0.0-canary.7ea2e830d.0","@material/animation":"12.0.0-canary.7ea2e830d.0","@material/elevation":"12.0.0-canary.7ea2e830d.0","@material/typography":"12.0.0-canary.7ea2e830d.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.7ea2e830d.0_1623797609990_0.39518309419560826","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/drawer","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0b159fa65f3f8208d572d8e79c1290065e6ceeb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":48,"integrity":"sha512-mMa/d4Agt5XFeoCL890jqd1X840+M+Pvl3+H+xJFk5vkgAGtfVs5GzmivhN9tV4ym/QM5lBd71ZwDg4c/8qIsg==","signatures":[{"sig":"MEUCICezR27nd9bOSg+ZHe7eBmaYzzNShW8qoOgJ2K9RXegAAiEAhGZy+0H5Mb/4T86p6Aymq1rl5NQb+pDmdR6QT8HRodw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymgsCRA9TVsSAnZWagAA2Q0P/jx/2QsGfpKv9cyU8AYV\nQI7gJ35NXCMFdsB67IXqP0VgdYbOTeNNKqShIkQQeNHOgQjkhmFPuO7DUDDd\nyR80xRoz4Rhbkzl866mAFXn/qjzdXDp1d3WJU9YFwl6EzRt/bxhOGqMzqAU1\n43sz2ajXCc666ku64QDJzWS7MF9SjGR189fnxiR0SfkVVpMXPlHPZsTJl4PO\nVhhQeiwXnSSoRxpPh8wYgqjL8V5r1N9Y1FXt0DjttTXueC7OIBWAc+rZWpqi\nodvuT93HK+0T5GcUSBHj3tI8d91bQnOLUUgtecNu3W3Q1L9h3scXCFXC2dyb\nDEFOHUW9qsHcKYO9VhYYCGSos4BE7hlEmb4sbAvNPJLMR4xFCXNJ/jCOKXId\nX+Z33w8zszmg/bqpq6/+Djz3He2uEVAaDdhUht8OQAIK1HdWwSImPbJE88y+\nrMya8RO+LgNVC/PzyfxmGTowRkMrG/aaliJ0CYWVrLsCeQhWbtIVNOQAqvn9\nHXfiJ9Y6Jb9f9xRV/F757EIcvDhLT0VFsbOKWe9o1mTGvH6h1hyiJW6W/kHR\n/80Cs3th0JMzWWPyEUSK+3VtUKWt8IRuZfvYeUWbbRbr/QXoEz8YxaIshPuh\nFrJbnBwSAOgx4LaKYUj+jalKZoGT5pXCOWva427uS3EvGyCcIhyPDC6b0U4r\nTjBX\r\n=HNpY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d96f0a1e0.0","@material/rtl":"12.0.0-canary.d96f0a1e0.0","@material/base":"12.0.0-canary.d96f0a1e0.0","@material/list":"12.0.0-canary.d96f0a1e0.0","@material/shape":"12.0.0-canary.d96f0a1e0.0","@material/theme":"12.0.0-canary.d96f0a1e0.0","@material/ripple":"12.0.0-canary.d96f0a1e0.0","@material/animation":"12.0.0-canary.d96f0a1e0.0","@material/elevation":"12.0.0-canary.d96f0a1e0.0","@material/typography":"12.0.0-canary.d96f0a1e0.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.d96f0a1e0.0_1623877676192_0.432780730144924","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/drawer","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.a6183801a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d029ba9a2ac8da64916c8fe21865fd8b1ce60b22","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.a6183801a.0.tgz","fileCount":48,"integrity":"sha512-h3DlWhV0hGb90BPqENmejs8ppPBJSF83D8+ztBYCrAeBW95VdoDYnTf8xQmHjy1a4GYg5TYs1YBYlbFjGiNZ1Q==","signatures":[{"sig":"MEUCIQCCSpp/lemT0icHXUgiYQWamWkF58NWjcY/aSlEZ5jcTAIgVPAeSeYz0X2mYcA26YqOKSmHYJBdBU1BzAddntkw75I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynYACRA9TVsSAnZWagAA7bkP/iBfRs6eag4azfHdZU3E\n4DW4UsEiyNuFmPc2EtxxVBxWN7K5Uh94Z6RblZu5lLCypheqEFHNoud7B3bx\nxlHOv/TimdF9u6wgYqrcsUmt1pBVZQhVMv4TnH2E0wrXP+vWPr10C9NHQ405\nG4stzN5M8c1lRvjCu8YhI+KLCYl/y5+oCwGwcNUbQlXOp/1yd8sVxFmtdiA9\nCUpILFritSR81ZU2LL7ktPqfS5qV8KYvFhY8sgCuHMD77l8vILgVMHnHp1xL\nVYYpImfEaBpQj6hPGyrx5ebZAbwDiyKeTX5ilnCUWmG9MZjS24XLpSsXd+SZ\nS7urhwBr17jGAWUkjxqsaVxScBAh7JGxzpRpCAZ4ZqiwC8kRRYDujj5Bb9qY\ngU1F/0eE61Kne8T6T5GMuVpgH0wqj8GlwNZjWKZ/QmhRzBcLXH4pHZAR2/5V\n7LFI9EpaDb4YI2SHho4ekabHTZx/WX8ImLZWp0zAn/EF51hODhwaSidpdXuY\n5C6eMRCrByyVFeZDfd3xrKwgaPt5Qm/8eUJ/o1xi/gBChaqnH5CSkb7UXrQq\nbYd3fW28C7sKuKGWPGKKGoe67bdZSVCMXyD3nU4nKxap4slIEucdWjpl+sP3\nhGaK7K9+bi+Rl60nPSuaqBepGqpRS3LadLf9RSeJd0/A8lC7OOpvdLUzui0N\nXWBd\r\n=OH5L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6183801a.0","@material/rtl":"12.0.0-canary.a6183801a.0","@material/base":"12.0.0-canary.a6183801a.0","@material/list":"12.0.0-canary.a6183801a.0","@material/shape":"12.0.0-canary.a6183801a.0","@material/theme":"12.0.0-canary.a6183801a.0","@material/ripple":"12.0.0-canary.a6183801a.0","@material/animation":"12.0.0-canary.a6183801a.0","@material/elevation":"12.0.0-canary.a6183801a.0","@material/typography":"12.0.0-canary.a6183801a.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.a6183801a.0_1623881216423_0.46333696373857625","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/drawer","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.940550232.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0772040c6fa96b46969d8f4fe7487e6a45eb26f7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.940550232.0.tgz","fileCount":48,"integrity":"sha512-IxZYx0s3SEN5tQf0MnOkLf2JBjKo87fKwpyTjPW1CZDpLRL0x7c34JMgMDL2tZu3D8G5ZI4VG//VzwM4KGmQTg==","signatures":[{"sig":"MEYCIQDKvupnGMV4v4JHrqmQUOzS37A+/MiNDSJKl5n/oNB2kwIhAK1G7R/4Nk4TMvNKjCmVdW3ZFLN4XJiwq/N/pqtdW4pw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6V5CRA9TVsSAnZWagAAs5UP+wSO2KOqYCDPPbzLpTTP\nVcZVQF3QvPYb0RfIOTqKbjISbXH2Bs9xwwQhmHOVJPineEF23K4Z8f9/nUkF\n9MLg+X+j1ysh+9M4gDPU6MJ5lU5h2rrQYxdUPnWVsb78N9pzQvTog0CHfxzd\nuYWktEtnVPXescH01eFeuTyofLWBnGmsEb3pSK28mkVAB8vtvmACYYpHFoJB\ntfJTsYqDZ9k+NQd4VL+/0BtB/U5jgByEg8siZtneqSSQL+TB4k53yDCtusEn\nrEl9l1MiF6CuihIa7noEQ3n41voi581+1HlnNCgUyRvJPBfev36wn2gkgtrD\nlVkM10+F/QOdWow/I/Nr3Aepku2A0vmcgDYTbmzC29F6u3+c+QgQlqxycy0P\nNsJf3NIKs9KBhiLS21EMtnaOJJySEuyUfNRyngbD1GqEfkTym4YbiamcSnL+\nja3jvh1TyQiMIqRwa8imWoeo4IyZa9OB+msJBR7+AV0BTwqTfHJ3WsBMrrYF\nl+SnxWkhcfpBG+keoHzDseni8bFG8vv3EVtZTLiLnCOlKTX66z9Nc3TpYonE\nkG1SP/tfX/RP/8A8DxI1ux5RlURQ9nx8i6nfQt5iYRTE6UMqEz+ZaqT3ZXQd\nYaTYr5S6uEVfLS/LhX41OzOJx+rLA6JU6SoR4LSYclnP8uuyqeI+KMfuQRSp\nCuex\r\n=TrNc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.940550232.0","@material/rtl":"12.0.0-canary.940550232.0","@material/base":"12.0.0-canary.940550232.0","@material/list":"12.0.0-canary.940550232.0","@material/shape":"12.0.0-canary.940550232.0","@material/theme":"12.0.0-canary.940550232.0","@material/ripple":"12.0.0-canary.940550232.0","@material/animation":"12.0.0-canary.940550232.0","@material/elevation":"12.0.0-canary.940550232.0","@material/typography":"12.0.0-canary.940550232.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.940550232.0_1623958904565_0.035759165269583226","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/drawer","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.f705e8048.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"508bb68dfa57ffc93e6e81b93ba90b0a0bdfe7bb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.f705e8048.0.tgz","fileCount":48,"integrity":"sha512-LRGr28BehzP2D++xF9rPnqGZ0+y/Pinqgpx9hk1acDihDQutQSb/A8bP3MdlabU7yK0UrjBZ9HRuskdGlbNdvg==","signatures":[{"sig":"MEUCIDhLCnYj4BjRzLg9Bc+qbwVb14YSTX23oA27PtkhnHshAiEAkqJCjVp1XksTaVhysHUilQXTBF+HhVn2va4GknXq9IQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLsMCRA9TVsSAnZWagAA31kP+wQkisUgLYDihq6ry4i+\nvtQoAgG0/NhdSdIUTxUqegj8N5czbjDD6q3XqZKDOz8iYVGTqJsFfyp6Y7i5\n8a0TMmhPiwdsIymg2oT+8DCytCAKvaBVSkMqKpqakEkupCAMatFZfvSsBo4r\n5H3XKK9RLiFD4QZa/G+7e5HDxPrEDK8nradMaXc/VU4eg32hujA46AK+PbDv\no0S3vgG6Z3YejzxmigkEGcuAIq1+UMph9pH0seDyd9Pq/lCcWDJi1MxrepiE\nkkJ73xt9UBWotkBqzXvGxeENWBzoFPJnhv9RhgFt4Rd5l1NiLH1BeoCii1YP\nCqzpDajUtEG5GKBUwq5Ox204Wq0ClhYaXevNuROHe7WM3Zw5WAiBa4IKfAFL\no4+7KIh7q0nz6TfkwtSm8yX2EDX2vAXYyA6fbGcQlDxOqVOJsDNNM9XPVHtt\nKGFuBE69Z0edLqXRJqOsTShV9xLXcJClgmH9DTOi4dmKjnMZJIc7deErdIoK\nllQjBwliXwnJQ8YP5TM1isHFqRd9dBQlqacHpW3WnwQ/LtjnHBr3eVu1APJG\nY2oCE6bZ+C3rSkTT7bkl+EnVqplZoOCvvRcglQMF+dFGP8j420V+4f72/rDa\nQMBgX44qgJ1cmTYyDL6jFXBtMiFZ/3NYxiUYieNV+UmkA3lqTqR7GcR3cBYU\nAxU6\r\n=WUj8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f705e8048.0","@material/rtl":"12.0.0-canary.f705e8048.0","@material/base":"12.0.0-canary.f705e8048.0","@material/list":"12.0.0-canary.f705e8048.0","@material/shape":"12.0.0-canary.f705e8048.0","@material/theme":"12.0.0-canary.f705e8048.0","@material/ripple":"12.0.0-canary.f705e8048.0","@material/animation":"12.0.0-canary.f705e8048.0","@material/elevation":"12.0.0-canary.f705e8048.0","@material/typography":"12.0.0-canary.f705e8048.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.f705e8048.0_1624029963266_0.9438841107902669","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/drawer","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.08d791f37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a293ba35cf2bcad3be1d754b8fdcc43554509da","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.08d791f37.0.tgz","fileCount":48,"integrity":"sha512-sY+XCh6heSduMra4vjAWuxwoFFmAkFznmA60P75iq+PWIoVm/63LqV3Vw5FwfyAPeceACMZzMTFUwp6Cc2f9Jw==","signatures":[{"sig":"MEYCIQDH25uKCHdb2JPcHN4PQ3JjQE9Wc4oTSF7STzgqU+0UNAIhAKADisR6538u8jZGZIBKAYyDuE3A8a6y5+IKFL8RpAAD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQxoCRA9TVsSAnZWagAAVSYP/3SX5uARys8jPLQ9HiJ3\nJQvyjI7TbY4WYYWPAqS0HCrlRlZswB91CtxQUcWN1cQ3D68NWY2IFuwxonoX\nScicE3Ok+/9r+bEvpRJl/KmLjKsGPXBA2YdVODubEx9VVqwFFtC7sdyhd12s\nhnibsMR9YN4eWOeMUgYhazT2hd2w4LlPr4CrNbwqJkh84hGaQGVuClHobsgd\nEAEEJlbVTrRYknMb6oGGZN0Ht1SP7pb7zcCcvB7xGYKcpecaw/wCSvku6DyB\nsgaE1Jp/xj08wn98UX6Xk1lWqbMrzA+mQyp3CmM7GxL1E1kAkpN4VwKHEHOI\nMRXJWHGAmBrRnsB2+21bSb17U2ZBt7ciFf1Ztd63Kb7Jw+GQsZeF95gdzPpK\nfy8pgxok00RoKardQeOULhJapyp28dwsIA5kq1He9m8cFk5ICfdNPNlTOG6V\nfYtMBs9I0zRcRdngVazRwN6T56yWn6UnNwx2y4z6DkskD5Dv7FnO7cGsWtD6\nKU1yk1IMmQTqAlpcqpYg24XsIWBODR2Oon4OJtiULdB5BBTpzZCTZi6JKA6x\neD0r7d7Is+VL1DlVoFa/mXuVBK+KvvrT+WJHxWzzRDyayQ0xyiVA4hdeiq05\n+20S9S02bGeFLxA8HRMPxD19ovlC5IsswmxWzM7cgWhkkMRUI66dMESVkLu2\nK1Ex\r\n=FM0Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08d791f37.0","@material/rtl":"12.0.0-canary.08d791f37.0","@material/base":"12.0.0-canary.08d791f37.0","@material/list":"12.0.0-canary.08d791f37.0","@material/shape":"12.0.0-canary.08d791f37.0","@material/theme":"12.0.0-canary.08d791f37.0","@material/ripple":"12.0.0-canary.08d791f37.0","@material/animation":"12.0.0-canary.08d791f37.0","@material/elevation":"12.0.0-canary.08d791f37.0","@material/typography":"12.0.0-canary.08d791f37.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.08d791f37.0_1624050791802_0.2432094307327024","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/drawer","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"940e6459905ba583d262f790471b4408e4170211","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.e38d7440f.0.tgz","fileCount":48,"integrity":"sha512-jl4JQfJADi2Hl0oPx+/AG/dGJuS4N64aKDpu6R6WYfLXiUJtCliCRtRQKdSbz6mxhO7sVPPeKIRUj2sjP35rHw==","signatures":[{"sig":"MEUCIAGEjh7oHZCo31SyrCxYFv3AyhwcBV54wuH2NKrUHM+XAiEA5U+lfKVLiOda6PaGDMe4xTm00vQOqTWCFIAwHB6J4Ss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M9rCRA9TVsSAnZWagAAM0wP+wUsaYtoxrBjRrhDep47\nKKXKvOFkTEMiSn1cgU9Dda7y7ow2dwP05HBo278Uu9E/u0/d4LQrbSenv9vX\nSod+HHnVCliqUiyBLwmQd1ItlSMx2i9pjqUydrsX4de5wupweq+Yuqn2Vzp1\n+sZm1w5hlkN7CJ1xy28dJxY83gcw1PPyBy0jT2788qr5ePwnq9zH2Y0SSIAL\np252s9YMgnmx0jvjcO2pJhX5kITz6ZJDYOuXMs3b+NLCUlggkmlPNHXowvAS\no/RDfxtrN051TGpyYx0C19SdNL6P8ooFj4NQOnGguQfjRPFE/zmyBce/zV6A\np2mMeCzoG84cdD+pcwxF+OOyOe8xO1cR7+nWWKC9EJ/LZJNLKoTpKGWLAGl2\nH0VUSCNTUixsSfuPYdA5PDEcXw+Fz+/E6CRMImFLcUfngij8GQvcr+caWv3H\npOaco60dJHhKnso/Z2lr4WVzV52f9BtHOzItxDZo8YtyREQFbXdj8+JGemgK\nBQbAbdKpcHNGq+nPLO6TI4rZS8N1aXcUV7AcmyuDbHGyDewbEytL3+VmvG3c\n/vAHd/xbtC+G6ZrkkOi5QPhGwzyQ1LUPwxA3LIMIrHTpuJVqVfoxrwZrXVeI\npoXDhR+8P8PCWZIJxr9RGqltQ3MfysPSflZBveqlQ6pUgTmoB/LhvlRtYeFv\nVZbz\r\n=K7ry\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e38d7440f.0","@material/rtl":"12.0.0-canary.e38d7440f.0","@material/base":"12.0.0-canary.e38d7440f.0","@material/list":"12.0.0-canary.e38d7440f.0","@material/shape":"12.0.0-canary.e38d7440f.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/ripple":"12.0.0-canary.e38d7440f.0","@material/animation":"12.0.0-canary.e38d7440f.0","@material/elevation":"12.0.0-canary.e38d7440f.0","@material/typography":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.e38d7440f.0_1624297322915_0.4170638284296786","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/drawer","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e98b19e6cbeb214ce491a53add46b1a16301f46e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.75900a5a9.0.tgz","fileCount":48,"integrity":"sha512-AuB7PeZsBe1N5g3/xSpHf9ZCwiDpoV44a65ZzXYZEOsq++lV+hZrqfQi85JOeKpcAVDTmZWwUH0zHHL0S8aCwg==","signatures":[{"sig":"MEUCIQDsFK+Z9SPqWdNHYj2bl+kPJXFv90iAhAve26r9ved5jQIgcNXvUkywVAA2FnFhigyy1V6aSH5MfwO6zzMB2aWpYeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NytCRA9TVsSAnZWagAArfoQAIBnLm15KBn/t5gGv0NS\n3ZGKQ/eq7nqXSFGeJLFIo+hKeg7M9VqcybWIiBBgBBq4kWl9qyVeR0q4uBR2\nGS1bkkcPNnGbNjixI5ZpvCF1SWD82/8GjDBy5nmkB74PqdGrBlB2glKO5GjQ\nH5xwJNb4phrIPCjZjhS5xfD/pKCZQUviPswEkUEKdus12FKUoBhQdfWCq8jw\nEoDZZ/lATFypvtrpcDQZkJHfnhDX1g8+oOH3ZqneWTAESmQnfXpC2gQD1Z4B\n11iiiXX3SzAxaedCWhTNCScS0b9MWY4RlfRAimlrxmwSoUOdR/hOH8eWk2LP\nc5mR1NJ/dbBOpgsroQAxNPWjQsvPomEXgZYWksYye/UYW+yL00CYVAgW1la3\nme6PQhJpreAGZgRGxhDAYuFN42aKX7H0DehuVJdVC8vb4ofat1bVlCT847Wn\ngC5CepLXyIf2Qvh6MX/t6wYH0GOPAMT30d2Cq9Hg/DlaQ2hZayO0DF2RBpOj\ncOgEHInfRKXdwAAnzNO2GLXYeP2jfoaWrGwXsc2GKhVw6Cq04xvpU8LS1Jj7\nNDr8ZId4bBCV4S8hLiiBER01pOf2sTL7VFu2Hx4hDh+3m2SOUBqelJ8Ic3zP\n04x4OM9pqBtG8MqwTPAzkkPQADZU7PR2fy/iSmyr0S2lh7IAzg9/J4RP5BfU\ncXlG\r\n=A5pd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.75900a5a9.0","@material/rtl":"12.0.0-canary.75900a5a9.0","@material/base":"12.0.0-canary.75900a5a9.0","@material/list":"12.0.0-canary.75900a5a9.0","@material/shape":"12.0.0-canary.75900a5a9.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/ripple":"12.0.0-canary.75900a5a9.0","@material/animation":"12.0.0-canary.75900a5a9.0","@material/elevation":"12.0.0-canary.75900a5a9.0","@material/typography":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.75900a5a9.0_1624300716643_0.7835923945574248","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/drawer","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b4760b5fc5e14b727f6cd9c8c4d6bb831f33613","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.33e6f50e9.0.tgz","fileCount":48,"integrity":"sha512-d3coTrttdKU/XrMojhgCN4VxNG9dQmXP2yjuMa4QUrBRg823U1ZD3r1A5kRYOg4I99s8rkAWVZXs+SOT4I0AIw==","signatures":[{"sig":"MEUCIE3SP7o1HM2HtT9NgkHfmQ5ZmIMLN3DH4v9OmgYdbHkNAiEA1cAGezUt8X0KJdaQcZ+ezZCBM+Oj3vrZseil1BfhlIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nyrCRA9TVsSAnZWagAAO7MQAIV+GB6i/s9MHXre0P/v\nzlLoOERpvqWCjCaLAtBoz6891i8EZA4B3eiefPFIvFcDO+K1Yi4U+hyDnZLv\nEU5kbvkWjabLYGmpU/NjynQn6fhzQHi1vY0qSvu0K1VcPQ0RGB4QrRHdvdgJ\n9KYjQEJ3+xBaYdvcLg6LZzgUy2+ood5KT1lbbGGicJTUBxP0x24Gp3n3MlWV\nZSZdA4F6CMp3eaJmMKZO86ZTdrmeIUQDwh9AqQiTf8Wn8yKok4Eq2w4zbXrs\nEq6MRlNrJTPKY+PxCQPYRoFlhHxlI8TXhCv3azGVRuh9jRJkY2Go6wsEdNJM\nXcEZx5XiEU1qXbPFGXLT6gxbruAnpMuHQi4DEOErN/wJU+BGNOame2e0evvv\nF0Sugz6HagaDjM2LN3KaJXk6e99XNn5V+jLSvWcF9l4Yx+GM7oEXCKGwhHMg\nTuvqfYEPy8H5CKCKFH+wKOWwdT0EAMW8/VsJRyYunwk/nrYVpkLGnMMm+AiI\n5l6bDyGJoUZtued8Xwh9ALU1ddh7VanhBwGpXCG/QDu3qbTtgnSRQDHnzehE\nJx9TKX3T987UENsFZWVvYv++tFX+HBoqLg7j5OguMeCLm+qOJesEK1etJh73\nlOd4b51VQKkYqPsv73xJqltt2d4aU9xDptBk0j7MZFaRT4AolR8eHbq7YFmq\njyjZ\r\n=gUM2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33e6f50e9.0","@material/rtl":"12.0.0-canary.33e6f50e9.0","@material/base":"12.0.0-canary.33e6f50e9.0","@material/list":"12.0.0-canary.33e6f50e9.0","@material/shape":"12.0.0-canary.33e6f50e9.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/ripple":"12.0.0-canary.33e6f50e9.0","@material/animation":"12.0.0-canary.33e6f50e9.0","@material/elevation":"12.0.0-canary.33e6f50e9.0","@material/typography":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.33e6f50e9.0_1624407211499_0.5306340835768046","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/drawer","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.8c685301d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fee9f29a7df7be31bd2c126c98cbd6053a2f3326","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.8c685301d.0.tgz","fileCount":48,"integrity":"sha512-gqbVhmEikJ0k+Fbod/8XoULAVlDmXje3CbFwQRjWKck3ilPrqGWapfJe/El3qH9cCGq+6d9MJga8/bsCWMTuzQ==","signatures":[{"sig":"MEUCIBTZdxp9Iq1U1cGCVdvicvl4GJeHNSHUDqr7OBQMa4oyAiEAo53IDBIGGpjSZpLrC3QSD4MiH6vCbduAjG+DnSzy+5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03y+CRA9TVsSAnZWagAAkNEP/0dci+zU3Gr40LTOVaXE\nvwj6grCz6Wd2X+0E+9NJB/XuXCYnqq8JBos7/2G8buFKm52HgvX2mpyMNdOC\nEm0G/cawn8thY1B8h2efJfCBuft5omCNPDFN9XSFEOum8Z387nmoYIYs3Q3p\nvLtmIVUALfQ5eBX1D836oGn8L4H1ljQKM1Gv5appHfyQ3yRamdNHgTRi4pm0\nOI35AnSESrPShQGHjhInG3gFPC/UUqZQ2N6DmUAfZR1iljGJJWJrw8rQBiTD\n5LaPphtXNHOPv0scoAjnPRWQKwPVlas+irBS0whZLJ7ibo55H4/gUGN3edzU\nLSY78MKccwNQLzGYqUgg4DVgBggPIQljUFZ5HxfOh/xcjfEo2t0AS1ASH7kB\nzPTG02ggFqx0CSsjJys8rooZbe4lYGwAm65Eav51B0dico2jRZP3sr1faN17\nSPogxEyI+DBC+86k9JLNYJq2ugm6g7zdRaXSar1rkuzMPRcbP26Er9KMjKRc\nTkx/nxgbGXfGb/jxx4h/+td231dMxIe/YfHrbQMAnxj/Dx45KefQrh0mEGVn\n3UHB8SwcASmauEo3q5SVD6hY1Slc8lvCimzTw0/TivlYrnyXuCQrSX4UY7W0\na0tCtSmgVomW9pFzloRHrWdbWM/q2XUvaqrml3fdyaunzard2cZ9n9pe0gg9\no++5\r\n=2RsT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c685301d.0","@material/rtl":"12.0.0-canary.8c685301d.0","@material/base":"12.0.0-canary.8c685301d.0","@material/list":"12.0.0-canary.8c685301d.0","@material/shape":"12.0.0-canary.8c685301d.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/ripple":"12.0.0-canary.8c685301d.0","@material/animation":"12.0.0-canary.8c685301d.0","@material/elevation":"12.0.0-canary.8c685301d.0","@material/typography":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.8c685301d.0_1624472765248_0.9659777053153003","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/drawer","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35595f3e2c77e74ae70ef51838f09530b1e3a633","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.8c7d994ae.0.tgz","fileCount":48,"integrity":"sha512-w2AfhpuD8fgnYu9Yi7GlnDZj48OhrhXZc9aGQruLmDakC9XS4eNbLBhEcDvM30eT7pwi2PNaRd5mbWLsSjbNwQ==","signatures":[{"sig":"MEQCIGKwyvaWNWrtk/YiyQtJOpE3ImQRoSqNgobHMfuy4vtsAiAOp5wcNAFc4FggRCQMi/i0dsWoBGIKPlHOzOaEHcYXHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04t6CRA9TVsSAnZWagAA4JsP/2kDzY333Rk31vTZ5Vk2\nLqrl9sc/dm5UZrWK8PnO2nnNPK60rDS5ZRPAROLd8p+HXUxQ9MvyDI9vKEKf\nd/4r7AQi755/Y2VBmBUf6cIj82clzPsUKjYUlO3rST641j823nJODwj6fWhM\nGNFQBShXLINmCHp9U9kMfPBZNiazxOdfGVQhRPbYAoU4W9A69GqQtYyNg6Gt\nixS8Vn2Q8JnWx+tZXkhw1NQqcukQTk997VVMYxRe79zWQMam1qHn5IaWTAMr\n4KP3OKO+ZoJJG9foKEXhcuL1EPgRxJx+SVzwBktjkyLqf3ejr+k5qJ9yRmii\nGU5mwIc+7BLOsBZJZgoeDSf1CCQKChHAqlYmgoX8Lmfm6Auz9nMFG0PT9QaI\nCgbFkfc85UfwU0XWDDbLrVvN2CQY7fE3KIct3e0vKEh0ta+jjTiRhLM1KRx4\nbsDGmTe6kWfACAnjEoKE7vMID02CnbE3o1K3EUNIXcoNBx7nD6NBcep4+SN7\nNB+hsyDeF+sGS2mosplcu7vHuLZNvtO5LQFKCPUBB5a2yRU1fC8Sa2aH4piV\ng3o7Qy9S9edM64zgAWXJ1H5zfHZfnpZlCSXGT4yEmuaiKYncmLo3Q1WP4Llt\n/Cop5pfF0MbqSK3wkhmfC46S11mrflw5DcA8KeFuVlIaK47aQL4XLRyYvq3I\n9/uX\r\n=RBXv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c7d994ae.0","@material/rtl":"12.0.0-canary.8c7d994ae.0","@material/base":"12.0.0-canary.8c7d994ae.0","@material/list":"12.0.0-canary.8c7d994ae.0","@material/shape":"12.0.0-canary.8c7d994ae.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/ripple":"12.0.0-canary.8c7d994ae.0","@material/animation":"12.0.0-canary.8c7d994ae.0","@material/elevation":"12.0.0-canary.8c7d994ae.0","@material/typography":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.8c7d994ae.0_1624476537984_0.40350959537293596","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/drawer","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0edd12e1f0e5e9e555817fd1d0c565dd75013e2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":48,"integrity":"sha512-VPyXyT+jtzr2cqXXXXgX8P7b78JZY5cWrQwY7hXxJQoLLdg3u15gLJbPkhVz5Jrh8Gol2/FbjiGcsQr52u8xKA==","signatures":[{"sig":"MEQCIGv9Hf9IPufBByR5DwelxD+PCeY3hb39UXdGboKQOjzTAiAxS1QwVW4tRmHbJ+58Ns5RVK3hdYu/ZpxVm+Lv2Xh2ZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K/bCRA9TVsSAnZWagAAMBgP/A1BaCLPzi2VStbQF4RJ\n3e2A3r+kqeN3tu3gfR0SZclM3agDgs0hbxBmp4l+hAR/EN45EKxZNDj+JMc9\nV+3T85dMvJbX4bVIOCcfCnAuvEq7v9F6+1TNtsxYNWVcFbS/kZOZW2k6sUHW\nDDFhvwNdbkQeU7fnPIP7IThEGbjVKS6fjDS9PDo35AXm62qIrBFbhTEGIWRP\neBlBWYbmNiuOFHzy3js2Oy+o+mlNia5nyzOD45tJ6kEbi/Kv9Cv9fUQ6dCgq\nPfLlMib4Uqwu0xthMn8KK1mg4SPX1CYvqYkVteWWkxCv75t6osZmd6VSGYAk\n7TIm9FJC2SCN1nN9Z8J6Tl0ssRTa27tG7Wp1ueedDxVgllgj2WWJeizL9pg9\nYoX2jSecTVkLwsekS7dhEd0MwU+I6oJOHOigYtDt2tjiUhaqNLhYcN5k6Bkh\nSs23vZ2da2eVROPmJj1Jk+ddglhIq18FIo1QPUHUiF+r6CQUSsFM5ow8IjuC\nkXwrI7S3Tv5DX6b/nru9qZu5ei+xQhURpvVi+XpzgWkW+Fz+WcifLD2W60fz\n1EogOAsSPgw8+5gvmLsMz2XLvyak3jfSphQgN54VsmdfrW4IIpCi/mJ4T0yc\nlbWAWpA1Cwvxh2lgU9IiKONjLo7TxTUhAeE70bhSV46PPGBV5K7MM+5G9j0E\nGUqH\r\n=p0ZN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4ccd39bdd.0","@material/rtl":"12.0.0-canary.4ccd39bdd.0","@material/base":"12.0.0-canary.4ccd39bdd.0","@material/list":"12.0.0-canary.4ccd39bdd.0","@material/shape":"12.0.0-canary.4ccd39bdd.0","@material/theme":"12.0.0-canary.4ccd39bdd.0","@material/ripple":"12.0.0-canary.4ccd39bdd.0","@material/animation":"12.0.0-canary.4ccd39bdd.0","@material/elevation":"12.0.0-canary.4ccd39bdd.0","@material/typography":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.4ccd39bdd.0_1624551387236_0.133448644660336","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/drawer","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a540e8445153880cf2de615167d71a5245ad1413","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.17553e9f8.0.tgz","fileCount":48,"integrity":"sha512-rOji7K3l9fi+D4hJ2kVr3Kk9cP0GdT5s8psRTgJoejwOHmxjvszhpuMlQ/44Gwsmp+pD5s2v6/3Od4hPlRi30A==","signatures":[{"sig":"MEYCIQCJ44qh8axQOhpWnZO2CTP7Ys2a8vU/Ps90Ubyk9RibkAIhAPj8vW1lx6Jom5oESViGdeUiXJ8oLpBM9KPnQWv/00EL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lMLCRA9TVsSAnZWagAA+UAP/2kNsTWcrRu7R9vDm6zv\n+gnH7Xb+ARs34cN1eExZCoCOxGCrrd2A9vU4Ix9hC9yzEoynFs/WcSpYFumV\nG+vrLstGD+RBhOK/I7tH6b3Ct5BYwYYvZLkmHrZ2JmaGI9hA72qduitwQlBu\n4cHK+lxiNhdP7ESr8FoRfg1RYS92VeVlR5fQE71jlwVGuM6XwbMrAlP00IF0\nhx9QUSMBh7vXGh97DO3P0ac3UASnpBaDFFz6n7ScuxFustloVp3rXg3WIvJN\npjYkgrGr0TIPKB1wTgAl5FxRTDIPG7qBITAZW3Vel6n6/Qcgwu5YbWBdmXuO\nY0QSW0RMTydaA5pH19NdzPYsOewwNUZlutONQacN2Z91pq5U7HfD88D6cluU\n5mBevqX6/O9wjb61E6G5cR25KsTSsda1uvgwAXfBjgME1GxYdn7AzCxqaTSn\nhPTwiEwEfTUuoVTzm7kA3Usp8ZZnPVW26O/M6w0ke7RC+SsBACTsQqzLyuLY\nR804GCfXPYnJbt6Z9NhXvY49c6TJX0jPjjyBk+3OeoIAz3D2Zb1OAXUUIFyX\nqz61t5rNWykOANgst66N7ppUQ+GzubSUD9fxvmNdLrcBzc5iETnp7KwdkalA\nVAAlz3YzrOaymhPk84c3RPkX345SvIKYO7qyLohtBby+11Cqixwij7n6t/l1\nnZiO\r\n=7j6V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.17553e9f8.0","@material/rtl":"12.0.0-canary.17553e9f8.0","@material/base":"12.0.0-canary.17553e9f8.0","@material/list":"12.0.0-canary.17553e9f8.0","@material/shape":"12.0.0-canary.17553e9f8.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/ripple":"12.0.0-canary.17553e9f8.0","@material/animation":"12.0.0-canary.17553e9f8.0","@material/elevation":"12.0.0-canary.17553e9f8.0","@material/typography":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.17553e9f8.0_1624920842964_0.7640069303413923","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/drawer","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a147007480556012a8c9571001b1b12c64a572d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.4c80072fd.0.tgz","fileCount":48,"integrity":"sha512-SuZwvQZzAUluZe4rA2WjdfXgNpYZzp7Wvm0dC8hYsWjGJdTwNd9CLCsIYGggYqIUET4RdXdE72Hnqdzxu3tZHQ==","signatures":[{"sig":"MEUCICgl5Y0v7iEPT594uvImafsVr5YF38bjsd+lAG/B+GAbAiEA7FIsVCGwwjSyJDDxPJcPWLLcXPmppNVwuQzvIDDhx9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22mRCRA9TVsSAnZWagAAbqYQAInN2vAruvLVc82pC0IZ\nnojOewNGngb54k7wvhTP/6o5oLHnrSCCUfq5wWIQlBsoCewRsNY0Wdrfe7nv\nJaGSkRK+szlj2o6kiq8ce5/bM1YTURPej5m+HCJ3unC44gF+6VzcQvpHFa9Z\ni39OAiZiObGtD0iliJtfYpm0n3ZfLaBfMh1NWCSEbyKiCGW8+jArlnu+i8KP\n/Ckr+mBSWaA6euheHP5SvaXzlBQ8fsw8W/B1pDJ6tQx2sp66pQkByeBOSww2\njjhvTuZaml0PgMyN4gkSeEXzsrMQ001gkncXzTlGRCQbkHFViug/302a5l+Z\nH8WM69HPyw/mnBjEekqQCyKN+6gpFtVQ9EsaE6NJiD62QSmznlxCIfJb/1Ke\n5uClYm7+xwTMoMk7GDWiXwM0DwdzIeKWf3R4LvzFxIY2jz3dBL07XAyzLAP1\nlI6dl3QITVkJpQ2Bs656ZBJocqhTFFJV+HG8gIcW8w86jjaKZkfwvBXiY93w\nXE8Owwa/R1SJb92pQh4Y3cQhari9m5clWW7LKxoQmztzPh/tVxthcOXD4eaf\nWUgxFdPqQPc3AQ5vc0TrOjjNBC7Y0gwgI3uRv29pawbNuy7cAjtVXzGAnAc4\n+XxGq2hX2UJ5LDPj9c9eATjSK6loB/xguQczNDb0C/3dIdQXMzjr6YHHaVDW\n9gc0\r\n=9Aod\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c80072fd.0","@material/rtl":"12.0.0-canary.4c80072fd.0","@material/base":"12.0.0-canary.4c80072fd.0","@material/list":"12.0.0-canary.4c80072fd.0","@material/shape":"12.0.0-canary.4c80072fd.0","@material/theme":"12.0.0-canary.4c80072fd.0","@material/ripple":"12.0.0-canary.4c80072fd.0","@material/animation":"12.0.0-canary.4c80072fd.0","@material/elevation":"12.0.0-canary.4c80072fd.0","@material/typography":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.4c80072fd.0_1624992144709_0.057114113142777034","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/drawer","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.796811db7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0662266e0504514f56b28fdcbee5114c3a5e11bc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.796811db7.0.tgz","fileCount":48,"integrity":"sha512-Jzp8M2GFn7aKkd6t4L6q2cKubAv+PyRcMDxSuJhSb9iT4NhdlHWtVPkZuTlTdtD4fbFU+X8CK/ieVbzwFI+3cw==","signatures":[{"sig":"MEUCIQCGSxAiUmC3fmu9ck/gVFBR1y4ThLBhZNfoeH4V1LVP4gIgYMmR6F1OgrQTTIG8pxKSJVTjJ8ifx2MEuHG/VrTlfTA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QaqCRA9TVsSAnZWagAAAcEP/AxDJCdQMKBMdkl8jXbQ\nNSPeYQLGQ8LeoEjWL6uf3rROk9YE+ig7Gn28OtrQi23wqWjo0Dmhf4wLQ9O7\nq4FdEXr9oAUwNc4b/WEl7nSbiGLuekD4v3yuXvm3pPjxCZhavj27CEAjsqe/\nq8ywSzKF7fSifmae+GoxIoUNrjcubx2ozbZCKlWRCNgblybRMG6wrqoMfRJU\niaSS0N/8jsTYvqHtagt8GesYyFWKu03UollAObfF255LlJS1CqM9C+AixSIz\nC4dOe49cjDJE+mNl0QQXWOrjEafSOhuOklIR4KatztCGyfUb2FocIpuSPn88\n6m5Z8tG0uA1HFtaA5FGGK/QvIgHTofutLLFZZfJ8IX784KtEYq5qq67QAy9r\nmYS45oBw6+7dSvgkn5ukztCxAxxBJHsyU60V5cOk5xEh0mE7/zU/A7ZYVPtA\noSHpJwpLAWu+zl2ESA2s/q9D3EMazt+JAYSmo68G3uF0nbvytcqyCG+A7a0q\nq1Q8Ncg2//6wvlrin+Yp74z/K9p+tHXb9QD8HUYHLHS2fwRtwtuAyXc8zjfy\nBJnXrHk0qDDJmy5LSG8NBr14RxtDdm/nNuBU/0YT4cvUF1zaBiiBUhCAQJCE\n6WMsMjl6GoDgIdDfTpPpwxxp1Opb6WP2oSh2Lft3BpoQtEF4k1wlI6QydQzJ\nmgmH\r\n=2s0j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.796811db7.0","@material/rtl":"12.0.0-canary.796811db7.0","@material/base":"12.0.0-canary.796811db7.0","@material/list":"12.0.0-canary.796811db7.0","@material/shape":"12.0.0-canary.796811db7.0","@material/theme":"12.0.0-canary.796811db7.0","@material/ripple":"12.0.0-canary.796811db7.0","@material/animation":"12.0.0-canary.796811db7.0","@material/elevation":"12.0.0-canary.796811db7.0","@material/typography":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.796811db7.0_1625097898250_0.2555459508989979","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/drawer","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"748af7dba1f3ba39127bed9d5daa4f734840eb35","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.70e1efdca.0.tgz","fileCount":48,"integrity":"sha512-yvt6B3rtWsufLR1lG46eOyxtadVY1D2VfR9CNPog47giA3snJVxTUnsQNJaZ6aA8MKORuNuA7Unx9fwuUV3Tww==","signatures":[{"sig":"MEUCIAvYcnwh4qUzf8gz82rg+kwgjpQ54UuixiRTuc04JGfyAiEAyfnrae9VJNR/o0+gnNzXpM04zhy+qWpxTfj+LHYxJAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fZ4CRA9TVsSAnZWagAA+AAQAJNexs8ddcbnPH2WFYaJ\n4J/GSG1+CBjTRhzti773Ga7x/wD1UA3iVaa0D5WfqKHLBLdlIPsedEHz5F+Y\n8cXNuiT3/1UxaLC7hXVWRfd04PX5Nf3ERCj3nW9YWRwRPVv75hlJXqpVzAMg\nplU4g57O8TzdoZU7iP9X/v9gTnisSUScNRDMx1NFNV4OYiYGm1k89cx4XqlX\nu6ovaT5roE7Jn0Qo5legTrP6SmHT4ViVg/vMxU3PcpDwJaWqmh3GX9iGrYFd\nUdc/YjS5XuDjO0JZ+gtVusKwDZi+RNW9+WM0RnoLSZwanOwfpd+KWY7Zjo0r\nE6/5eLsUDELGvBvPZFtHVmhvfVFUITVb+V4/361iECio2K/D1N2zOCtb8/cx\ntLxRJrXQnTG/bHuj4rgs4Z0AbZQ45M76eHALvRP+iaJFUheHDE28Z0JvpRDt\nyjUrEQv3OLtia3BTSbYM03uueQ/Oa04SuUEhsC3aH/FRjMrN+Nr8dDqRyT69\nIVB8wLdnU9VGu5fv1SVWPJ28nDi69/wAcTEhmSUCVLWtBwCXGNOAztp+V+SM\n/qZ3jTbAPSfqAqPjWsAEVBcwtF2z3BN++J06SHYIKsALCiczNKJdxAr1AxN0\nj8+GCFvUsAPDxW4BB9keCY3g2A3pBwabyVdKvMe7TKkWyUyay1yeo6lTo2Od\nFxrk\r\n=huNe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70e1efdca.0","@material/rtl":"12.0.0-canary.70e1efdca.0","@material/base":"12.0.0-canary.70e1efdca.0","@material/list":"12.0.0-canary.70e1efdca.0","@material/shape":"12.0.0-canary.70e1efdca.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/ripple":"12.0.0-canary.70e1efdca.0","@material/animation":"12.0.0-canary.70e1efdca.0","@material/elevation":"12.0.0-canary.70e1efdca.0","@material/typography":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.70e1efdca.0_1625159288156_0.010624492555626919","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/drawer","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.435866d32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ae449f00ef3a6de71038c3bb78086a1d5d98ce4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.435866d32.0.tgz","fileCount":48,"integrity":"sha512-E33laqVAIWTThuIlwNQOlFYInl3TP1Ji8GwJyDAY4MsC+QTBrgi/l8kdMiFnvkz7jS9lcxm7NlRaWtjvuwjxSA==","signatures":[{"sig":"MEUCIFQYV6v5pZG0UiCfem6VbsPZzXH1hPBCeKQz4FatfwMcAiEArzM7zG9biydbmP93NgSFD4CLVE4H6Zudrg4J06iaFog=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31lyCRA9TVsSAnZWagAAezIQAJXa/LB3DitCU+ZfVJ/N\n3+V9ASqfpgDRkt7Xt551YAYITVZ3t9cAnY+Su1OtgNoRM+kRryIvQ9Ps6Gal\nwtGFLdh+KqQS/SfMDXpUHHiivq/SARAQTSuSBENFFshk81EaMAMwxcInqZL0\n54cMRa+p+dOwFTmh4IDIrTMdO3baJUmpzmzeRwLHJwhUW8VviKZMxDXj+PbF\nTMSt7BBfhfN5w3ZMkkq70UyLXp9GV+Staf79t7cTnjDNmkd75tjCgc5L2mJv\nrz8mjsIfqqK/emz0kTzIPrSGxTbHifP4Oflo1LJkUCfesLgPa/bF/4MFcC8/\np9SiJJefe2uczGNfmsBk+lJm4ucA7uOoc7aDvdsLhCj7tMy+QvIEvG3EFY5D\nE4WinT2tysUDZ7r1EV26FeHYAnDCHO5rO8I95Tu7xQxuksMvyEvAG/NZOMCX\nfEZ89SLK3jtvfYxGcE2pAVymwu28AOtbeXsj4Cc87ZcEWgV2Nq1u2KyytSJd\nztPtD+IrDwq4OeOHRkPV4N7VButY/hki7aL6mAQVebcRJjx0dzjvpKdb5I2L\n7uT+kXsfffxNV9oC59lGBCPNWRJOV/OyNtA4ymFSHGoJvbBY4kMug5CEeOmW\nBVLq1rXGNPnM4WUO35pURmuad4vxS6vc86Tuu4+MvTu2i+CEN4ngpkoY6g/n\nIkVX\r\n=ic3j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.435866d32.0","@material/rtl":"12.0.0-canary.435866d32.0","@material/base":"12.0.0-canary.435866d32.0","@material/list":"12.0.0-canary.435866d32.0","@material/shape":"12.0.0-canary.435866d32.0","@material/theme":"12.0.0-canary.435866d32.0","@material/ripple":"12.0.0-canary.435866d32.0","@material/animation":"12.0.0-canary.435866d32.0","@material/elevation":"12.0.0-canary.435866d32.0","@material/typography":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.435866d32.0_1625250162012_0.7860675244845468","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/drawer","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f9d2705220c1d610800295ade5a67725dca59d1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":48,"integrity":"sha512-Eb4gGU1RajRLnqbPXNNJkorqhA7xwfEktBL6MCB0dXJpnfqjFrCw1RJvIezaWGtdH9E0CeOdynmBdjKptH9CZg==","signatures":[{"sig":"MEQCIEHv14nQPkdgy0G3dkH5TfgDV5HS/iPAV5nSPyAg6zaDAiAyhaGWckicEnZzetanl2jS1HlcGo5Ikem8xg+4RgHNRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36jfCRA9TVsSAnZWagAAoRkP/A2rdbH2TBV1yYkmRJeB\nij0vMaBUQ926M/dhtYUEbL6FBoeJym9zEVdKqON/KPpjuqI/LoM7ZOamXZu6\nyiXwYn2Q5kPwFLWdeP9ujmx+/iiQeiUmq9G9tyb/weyeQ0dv/wbUGt4OVDmy\noxYMAON+L/aU4YegOegVkutGnqEoF/pMkL2aUHwVdjTI24c6JDvI8GGD2MTq\nfbUjYdncQMJsXaaTptX1+dpy4RNl8gUpAEmjheghf3dClDdGObLAwGxLSGG7\n0gtPbg1/Zt7I97Hk7OvsWCmsieFmmZH1rkYZpXYpTy4cBiq8N9ph1Go+uyIk\n7BqaJg7z32puKs9cx+pgChcevYBUGUaS8mEP/miJS0IPJqey4JL6q7Ccb8GY\n0X0BHJgEtCK2B6Qe/CN+rs5pwvwAjiXjCz1GIhUIWfIH24j7i6rifN6uOjdS\nAf1osxCP9qKlDmUPI1QMkTMHKb08fXKd4tONWhpGti/CujeAAPirFGd9S4MC\nrf2kH7pFgsaZC4EBgiF87ugHiL7bzJlkH9qAyLUDPdtGj+hT+HKKgqnJojRl\n4a75zguTIoekKTq23wyX4kiI9TRyiOXMgaZ25L0/JFS9+fXFE2QxQSbiWnlh\nGu6SGuxurQ3jBBZDwPkecOzjt1pVsNsNVPSIGAqCTb7WCRKbNxZuzigQ5g29\nJAo0\r\n=1Dc3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d0f9f3f2e.0","@material/rtl":"12.0.0-canary.d0f9f3f2e.0","@material/base":"12.0.0-canary.d0f9f3f2e.0","@material/list":"12.0.0-canary.d0f9f3f2e.0","@material/shape":"12.0.0-canary.d0f9f3f2e.0","@material/theme":"12.0.0-canary.d0f9f3f2e.0","@material/ripple":"12.0.0-canary.d0f9f3f2e.0","@material/animation":"12.0.0-canary.d0f9f3f2e.0","@material/elevation":"12.0.0-canary.d0f9f3f2e.0","@material/typography":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.d0f9f3f2e.0_1625270494988_0.616574129869033","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/drawer","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.adeac0549.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4967778270ee885594b33854c6729b56f73ccb2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.adeac0549.0.tgz","fileCount":48,"integrity":"sha512-dIAImq2M2CDug6hTdCVDHr6XwRVHZ3+KuvoI7qET8DzapznGntTmNWEN2B102lQ2aj1wv0omh5fe+V/R4JArDA==","signatures":[{"sig":"MEYCIQDmVLEwrYc1upMHVqEFMMwpxKTinVwcDb7mYXPgW9VNbQIhAKBSuA7NGBsAabFzuxXOkDihrKdIWobC65rNZxJkhW1T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xWcCRA9TVsSAnZWagAAK7oQAJygwvyxR+tmRWAw2zNJ\ngT/UBUSKH7Yn5O94W5/3t/k4xkAvFbdowiDrhNCBhrlc1qCLbYsTHcH00Nst\n9a5YSCEYWUCnhmApZbtIzEZoPeS4rp0n0qwjcY5HK5jWeshXHAUafE/6S5eM\nqCXwZgfikk/ZR+WunuVoZ39uVKNJkHKRLUTp1IRxRh3uMolc2Bd2DEUzAYMJ\n9RbuJ9rQ4ksmeAuU6YVT8PokkBAx6RnTW67RonFlL2sZgpEaCF2AsOH69AAQ\nCsaY7mN+IXO3vEEGW011zjmcOg4/gn7k/SRI1Y2G+TIO60KWexi6W6S6XyRq\nDt6bwiLN5hmvvm3q0qycbFqIAeQNuZW8VgI8dyck9WF9LibpeRwh7G4Eqt4V\nAu+eToKxstsmlnqHDkM4Ycsl3nFvnA9APXoCHdkGuPdSckWQVOfOP9WFAbj/\nx8iN/2IkR8qMoWnWnhtv7fSwQnpW0YWvyMRS73aymoqx7XG4YVq42+EUzwR8\nzm09XGskZDj7xM1k+KPNu1OYpcAo9bdL81Rl4EHiAFf4EkSAngWBXsyPhU2R\nlzroXA2Lw//dLpejlmsOvX16uOoTZQMciSu3mM0r0/o2PYAzsgLW5tJ+VbqO\nbhlptnHltganS8zj/FFO1Sd2TAgdpCeNdOgCFsOeYo0KdFBu3mjb7dwCXNCH\nuVw5\r\n=Hf9t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.adeac0549.0","@material/rtl":"12.0.0-canary.adeac0549.0","@material/base":"12.0.0-canary.adeac0549.0","@material/list":"12.0.0-canary.adeac0549.0","@material/shape":"12.0.0-canary.adeac0549.0","@material/theme":"12.0.0-canary.adeac0549.0","@material/ripple":"12.0.0-canary.adeac0549.0","@material/animation":"12.0.0-canary.adeac0549.0","@material/elevation":"12.0.0-canary.adeac0549.0","@material/typography":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.adeac0549.0_1625757083536_0.9394819308948064","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/drawer","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.068fd5028.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f90860ec771d671f65f233afc12bedd912317bd9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.068fd5028.0.tgz","fileCount":48,"integrity":"sha512-GHY9t1sb5bbqYEX/Mh0VibVlNXzJRMJhZjAqtBBivp3PCNr8OcWubeebQ68fU143u2C8vbNnlLCrmx3izgx+2w==","signatures":[{"sig":"MEUCIQDqJwafyBbHWiVLOYvIqTACUhJSVEKCFehLKmuRgyvStAIgFv4o2+JAnRi9Uq/Fe2WrZ9j/b/8J2Z2URroNogcKum4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":981223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50xvCRA9TVsSAnZWagAAYWsP/0JNNaaz5n28mBa50f3u\ngle/WF1aeipEhVgifCG847pnmn+SYkg1UHSVQ9nXTEz0p2oXucb7VUe0kUL1\nAlWMKVDLLmmoSGwN8aziEg47z5DlQnWXKpo0iMzpjYyq+u5Z2xFu+j9IzsOO\njHqhiIYR65mKXTrzln0TCSWKvBW0VJB5SZaVRUoqTBCXIExjM66ip7KIVJ2p\nkJv3RHd04bgteMMnzqCCOMP8wVmX4kyaRAOTgC0civOmkVP51qgKXm1JSAqH\ny2fTHbiDRFIRdeRL2HS0dI6eYEYDQkag+r1M+XqfRLCOREsDyq0I37Rv5CYO\n3lhqYJRp3WAz83Ov8fZzBjFO1UM/Lde4C/EQgdE1EiyGUw/uf6AtF4VIIDa2\nDVvjGSobzxtPlZ6P8k3lrgBLyEG/luGhXv0HuZB048QP+Iu2660RYXIQMi26\nV2diTk9KERrCA4IRoZu/NvpN0E2oRcD2LeyaikpulzvCYV9lvFfLOn5viij7\nOx/7bckFPgmujXs4rOgmW1Bz6zOpzl6iAzMRj/EWaNyIbitMQfLkaZTVU+Vk\nlOSrMo4AOlnLsK+eLfq+RcIffqJ9PWaP9uk4HHhogku9ThV/9/Dtq8Oqse3T\nCXRLEwz/t3wt+IP4ZAnOSxp1abOPcGNqzCsYRUpRh/Ly3zXPG5bzN5oM7BWE\nLP6C\r\n=FhMx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.068fd5028.0","@material/rtl":"12.0.0-canary.068fd5028.0","@material/base":"12.0.0-canary.068fd5028.0","@material/list":"12.0.0-canary.068fd5028.0","@material/shape":"12.0.0-canary.068fd5028.0","@material/theme":"12.0.0-canary.068fd5028.0","@material/ripple":"12.0.0-canary.068fd5028.0","@material/animation":"12.0.0-canary.068fd5028.0","@material/elevation":"12.0.0-canary.068fd5028.0","@material/typography":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.068fd5028.0_1625771118402_0.9647841726747679","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/drawer","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aaec8b4cfdcccc7e30903589658019bf8823e1a8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.5dfec7a14.0.tgz","fileCount":48,"integrity":"sha512-yy+8QIB5TZ0ww5lqNspr5MFETpSebldufrcb+tcZT3KUjnAHymoy5bVx+gnhzpdqIviu/0ww4FRpBIcvke+hpQ==","signatures":[{"sig":"MEYCIQC8v6/g57G96Oh2mTCCNT+SzLdBrDYYtgcyxhw42TUsGAIhAKGFaN33giv3VSmsYYsr+EImbVyiR0cJ6ZV3qs9klD3x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":983267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KCVCRA9TVsSAnZWagAArjYQAIYxNQ44rdYflkbGtlyS\nN5XOUIQF0uC+GW7M9h47JxHox1x9oQojr84deY3zYYpDHdzwnNkLlwRFwAY+\nGVItO2R176GeVpo4DlfTVISUkNnRcNDke0CCWNUeI5wOGoa1H7u+iKzIh12U\nYHXwFVwzGMiycrRg0LQiOCvjYfGnlLyLNfv4RERnvj8DDsUrWoj1fgf9rc2P\nRgmswAiopBfFtyyFrimCqKEjnpzd0EHbP4nvHvdBWc2QBIEjYF/Wt8M2jboE\nQ5KZHC2IF8Yr1U28LOHTcaKR/JM40c5/g64A09X1lbyXPTWVLZKkv43BroWV\nvbXZzw+rcyJPv4WmWctf+LfdbJzLYIaSSbt4i8hSELxkxvcs2Py2J3jBZQOl\nbP+Hml98HLxsH8lRKXy4Q+z1Xbs/psgaavVq5Ml7i9iQ58Vyh2zlCHwOcKb5\ncCDMgrhYzBHLdtaO2UnFIDaqFU8ZKG24i4CCjgDE3uFGJth1qVZaIgAT/SFJ\nLX1r2yCYfwlYXuPywhCJ0bX67DNTNauYcv/JXxs90Zay4DdmVfI7lgfecG6u\nKGRZRpapgEZSGNJJP2k1dUCh4Igsebks8rwO+rSdK3+L5xVY2w69wFuP5EOy\n+N7CylP1IbPlE/7SVY3bEl/QlVxkBpedgO/rLcJRd/raGtCcc59VUom1ZVJK\nHoYX\r\n=w+jP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5dfec7a14.0","@material/rtl":"12.0.0-canary.5dfec7a14.0","@material/base":"12.0.0-canary.5dfec7a14.0","@material/list":"12.0.0-canary.5dfec7a14.0","@material/shape":"12.0.0-canary.5dfec7a14.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/ripple":"12.0.0-canary.5dfec7a14.0","@material/animation":"12.0.0-canary.5dfec7a14.0","@material/elevation":"12.0.0-canary.5dfec7a14.0","@material/typography":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.5dfec7a14.0_1626120340370_0.9334511030496322","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/drawer","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.07a73750c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa0f7f1fb177f63c0ed6992bc932aeaeaf9e66bd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.07a73750c.0.tgz","fileCount":48,"integrity":"sha512-nO1PNJnNCEuDT3tUs0WIGqO3hrTAg9ifY7w7s/rp0NqVYOfYelm4BxO0Y+8nQzKDCMlXupacJ8x1Owm9LkxAZg==","signatures":[{"sig":"MEYCIQCAz520iPGbCXX5DBJvqfDgj6CydsuGyIDusz4g9vi8egIhANsJYlTr0JjQYCqWIzJJGtMV62gdpLLpWTnJrUs2IFrJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":984039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KWSCRA9TVsSAnZWagAAsMcP/AmKCzne/HK5qdTreL1/\ncZhWYeUkk3RGxPNWDQOhO8srMkuSvS0dGmdh/+FOXzh3JaDiqCR7dLkcAqTR\n6P+f9zCokE4haZsZg0GQ9Drv7NB9VqVAoh7hhWR85+Dz2NOhyegZVWrG8auq\nPoYfMpwrva2aCL4OoJratICC9adikQ605r3K/7a/UglF+mlLCZAvc33SgFAc\n5QmjNx8e8/h8YJyiMiKrxYemD59ozL0sO1jlXUhumK6Nm2f8nJYD/nswq0Sc\nS1MiAuswdkXMkmbA3LKWsFI3uDhGuqU5CfqE4LGTPpoO2uA+Yk+ilbd2DQ5o\nCWXqiGjOAHz+RZfM6R7um8fF5vH6DcsEahrTYqMj8sDXxbLkqkEDs0gfNYe1\nuUU8i6q2XebB+1saSpuiHw0C1YYNd62+PdNe4F+c8lXnwt44iXHkgutxXIMb\nijloVLPO+djhY0yVJVihYHiDTUiXtxAJ/dHg8awpLQXhgYF2aiuNisCKHGjP\n4UFtydrXFZV6vKJr2wbbTI++qZLxXNEQbHcLO8+lLX0dGDWPwsE+12m2bC8d\nspt6jnb8bWW11/XIZZ8HALxtNUaVpw578Bavgyy+/c6aRlBW1TeINFD3WE1l\ngZc0jCtEUnzWmIb3hPF+8aRuJg4EmE/LbGFckTK63MSVjGyVQ/cpqAdaSfe6\nI7Gx\r\n=7ACB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.07a73750c.0","@material/rtl":"12.0.0-canary.07a73750c.0","@material/base":"12.0.0-canary.07a73750c.0","@material/list":"12.0.0-canary.07a73750c.0","@material/shape":"12.0.0-canary.07a73750c.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/ripple":"12.0.0-canary.07a73750c.0","@material/animation":"12.0.0-canary.07a73750c.0","@material/elevation":"12.0.0-canary.07a73750c.0","@material/typography":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.07a73750c.0_1626121618475_0.17770235178352078","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/drawer","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"562711aa0abb5d5557bb32f593664b4c0758116d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":48,"integrity":"sha512-VwcjR4YiwCh5gTNZR00KRMlfqctEiA9K9lO7sbLOy6qGXzYIaMXtkBUQ3pvC54wgIlgcSL8vMoMlXipSX+62qg==","signatures":[{"sig":"MEYCIQCAquqAkO/JRAsPCDwUhTmEX3MnJAVikQCIYXZ+U+Kv9QIhAORptRbBh3bodsd25QUVtkgPpnvRTyBM/nXGdORErbyi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":984039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PH4CRA9TVsSAnZWagAA/hgQAI4x1sgohrBu1QXYjvda\nPnMkABdKsqu9iegkXXyX9Y2T9KyJJJ0ZTx1/WtLcQ0t8+BV6FwR5APfe/k8V\nx9B2pDa0u7sttQhR3uyuIf1H3sAxnAmlqObXL4SI2/Q2fXXe89WKUlyCpf0D\n5fXiZ6SqlxkWkv0KViKPsfqgdtNiYHKdVF4trr06V5gF26WS6XnmW3BapTjF\n7ss4tyZndi6oxfvVzEksqS3yiQ1PxaJ3ZYdW5h6KZlZ5HSWguGxr8tqE9ye6\nv7wRLAyzGzTeuMeYj5aWobVqC1j1FWPTAubkZw6xnUoOnDf8R6vXXo6IO3aV\nvJv44hqxcOZoVaXYboTYWs1hfNy7aiHC9J8JRxm1Gssd/eq20bc2jf2A+LYA\nrxV9cd7Vnu8wzDYhhg1m8NFd3GqBmyjda8ilBJiW6htKKLqxaehMS28U7+MQ\nzVbwsibchh+dUBT3/008Zsq41AVI44xYvQZWGFxPGbUoWI7v+uZf6ynO7V80\n8VlMQOqcRh0Z3KGKdrEkAcC7cXpEyJSmsoC/1fV8X3FFnc/zqyLakuVmWSmG\nG7Olobo3BsPToPjS94sCV9JFdLAarmHj/vo5zsUbnWJIF30I8BVV/qCxwnJC\n4K2KKogcrBCTBr2bh3F9/2IxXOxqGTkuarunw9js1V00D41/RDBKsdS2x0QR\n4bTu\r\n=/Bp1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3e4c6dca1.0","@material/rtl":"12.0.0-canary.3e4c6dca1.0","@material/base":"12.0.0-canary.3e4c6dca1.0","@material/list":"12.0.0-canary.3e4c6dca1.0","@material/shape":"12.0.0-canary.3e4c6dca1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/ripple":"12.0.0-canary.3e4c6dca1.0","@material/animation":"12.0.0-canary.3e4c6dca1.0","@material/elevation":"12.0.0-canary.3e4c6dca1.0","@material/typography":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.3e4c6dca1.0_1626141175921_0.03347136121191663","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/drawer","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d38c4a24a068e83dbe03344ea9df88b7932c9f5d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.ea77795b1.0.tgz","fileCount":48,"integrity":"sha512-cF4NW+5+8ceHFmwtCOiNmVsc65tyvXST/ELGJvsmIy68fjWkbeo69UAuXG2EJWh6cFBHkQCzPe2hcM/uGrLFDg==","signatures":[{"sig":"MEUCIAUW9BbkYryMc2bVCrvAc66NQb399k0Tbgg4Ntiurm3tAiEAlACotNIQ8r5ST/+ieLruw8bHroXaIF+QrDD3hZOH+x0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":984039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bZgCRA9TVsSAnZWagAACBsP/RCmU9Eg5BoqNmaC8cRB\nEdwNS9CFe8OgcRtfQVSaUY7DNSP7lM0Bky0PDKbmyKI+oidZLKhur9qjGUpK\nuZ9spWhWTvMep6R5GAxVVKcjWRgmehHohGpniKA0PQZI0mFVSC+223fwKiMJ\nPHvr/6DLbNuwkNwH/vl6kDr+jOd8e+1d9wKWsJQ4rcLExrS7083Nbkz5i9z4\nx26MU6cogbn0GCtAY2SJc9v1Lt39eBP0F230o32r+6grLQEhKGQeTMSO6gzr\nPoufndREOB+rWZT3faHtqwzUSrS14RKxTDzss1gTtI8fRgy8mW4CLxJw6/Nj\nAUbh8rubK9bbpGEEj91i9bug+lxvM2kf3tNI+DMEhe9MhJaF/dLmFK7eHL+W\nuD9CQzpKzK8dsR/f2G10lN9AX3ZxFP2QgQ95lzSKyhwg9Z4aJiA3454bnUz7\ntiNns8ojXYpoCFE2MnUbkh3xlg1BPBRTW+TSB9ff9p1iJA9QxN1SPtsVPStF\nnK94ydUoij7RBvdt4hHkNu+ePw2Ob5rgeuE3nQgVRrvaWOAOebsvm2eeboKV\njp7momQx5hxamPI4hK3mnl7WjbNnAnXaxkNByPtwAsQaQ5dTzg5GkcHvEQC/\ncUWV8OWt9vV+kJLTsG0n2aOqwtSIM+OK6Ru/iTKk4t5Lyok//nRjVJu1HtTu\ny8GD\r\n=U4PA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea77795b1.0","@material/rtl":"12.0.0-canary.ea77795b1.0","@material/base":"12.0.0-canary.ea77795b1.0","@material/list":"12.0.0-canary.ea77795b1.0","@material/shape":"12.0.0-canary.ea77795b1.0","@material/theme":"12.0.0-canary.ea77795b1.0","@material/ripple":"12.0.0-canary.ea77795b1.0","@material/animation":"12.0.0-canary.ea77795b1.0","@material/elevation":"12.0.0-canary.ea77795b1.0","@material/typography":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.ea77795b1.0_1626191455651_0.05437599012803762","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/drawer","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.15a179fad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6940a84a3bce90b4989b230ab6d63bc38a1bb1af","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.15a179fad.0.tgz","fileCount":48,"integrity":"sha512-Dh2n9wHsDcX/AgpsbdRINWHExX3O1Nl7ZJ988w4auQdzySkL4drLQRGc8daUTD0TPIXa8BfuT1cEM6DG/v5ukQ==","signatures":[{"sig":"MEUCIEhAZ0ejL5BReCyA+075wgH0exuEm3RyktMWDI3zdWGzAiEAsCQXiJkcN7zGGImqwaSJVOk981z70++BBp06VjmRExc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":984039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dc4CRA9TVsSAnZWagAAiBEP/0plQJeDGFyv9XYVbGOu\nlraysmmzU/G3UYUtyJMzVYhU7GQFnKhOLRQ5n8kLpbMStxeLfZtlr03zXMRC\nJsVqXS7N/iwMQexgLw1a1aQxGX5VP4vT4zTrwi2kZvbQzPYvsjiOz5Lfx0//\nHbJAdvNHfjgAZ7jVyiZcL1sAWcCEPNNwFIdpnVIaGHINTjdjFMWXpKrWqYYY\nzKwaksV5NguZ/AWGRjUeO3At/CHwPh/gyPNb0suojknX4SEuhg5a8yayuJtZ\nNtLvVH8RfXZKjatsmaxJxRgTG+4qn5eXdgrFs3K6SXqo5jgOxZgqc8MwwIfZ\naaTuefl3jNKcP8XGwXLgvO4qm9op38trmSFMFtcx2BEYOwMRvBdBvDHgzLY0\nNVIsOUjOZKjTFxLfHeQgiIqXoAqf/6qVBDu78ao6MpFwL3dskupsusPl25UJ\nUM4R8uoeB09uKvDW3w3OOstXDkhy35GF/dK2KRGNGaqJk6JP6JIXw0I8kDLy\nluPqC67IkqaBP7kceeoQR+vUyEGhK0+8jXhgxaHI203otzyDlri9CUOjrKrd\n8QYsNY9NxuVzJS5Ibumrv8XsHf2tmwdT9zJRsszVqjelK2o0KXhLBy6Fud7e\nMqrPyokN3Nde2XCtpAWBpZaLpa1JADmeRKZFA8sh05mVQO6rPLa4QXzizHcE\nEC3e\r\n=H7xm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.15a179fad.0","@material/rtl":"12.0.0-canary.15a179fad.0","@material/base":"12.0.0-canary.15a179fad.0","@material/list":"12.0.0-canary.15a179fad.0","@material/shape":"12.0.0-canary.15a179fad.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/ripple":"12.0.0-canary.15a179fad.0","@material/animation":"12.0.0-canary.15a179fad.0","@material/elevation":"12.0.0-canary.15a179fad.0","@material/typography":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.15a179fad.0_1626199864051_0.5761897964573444","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/drawer","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aebe685eceee528fd1ca5789e96400becc63aed9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.c73142a1b.0.tgz","fileCount":48,"integrity":"sha512-SGjClR8i/1s4OdwEXtTcJNPyXt3S7leewbCEemRTenAGUePITZcplUtGf4Q+pVqr0khqJaAMuZ9+9OIBizEDwA==","signatures":[{"sig":"MEQCICokHlU3G1HxHkCGZuFN3uTJ8HRIOHLDR8LDW1Gb6V4xAiADhwjBPnVPnNXEIo9sNOY3xC1qafXRk7MdSCVOPcv5tA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":984039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d9gCRA9TVsSAnZWagAArJ8P+QH394AeyOjIiCwOAq0L\nCFz451R2o4z5cafhGwFTUtXt+PCxF4yya1vkdG8NsMEWbSHYHx1iWKbppSgX\nixa8XYqGr8lXUU0o8c7xdSZHcXS01a1FFAyusumOTkfv9ZiPQyRrT/rzNhmG\nDaagy+2pI+jh0WWtSYrVbwv9tzyc0hb6UNO8HhbH9EpUSgwJl+tJuy1Z9FhE\nqH2t3ap1H6vwjtZgcSKHCxABgride0h3ZE5zTc3N/N2jiL6sJxscJEU8k9aM\nMhgUXBA83i5/HMnRxAqwajuRsE4tzsm3ZmLVPd27hte6OHiiaaWKcZG4D4Pu\nMCQda99Ve8l+0VZTonsODvQA1sp+W1r6foyEPwO4eJO+GXdFYYkfT/OBRAec\nH/dBk9+0zocJ1qcStV3tlJuPg8jyR/vtQ91lDEr/7Efv0FXhm6XN4md1Ky9i\nohabew+9qXSpXMpSTkt81gHeJo/vHAPR4c+hUBocxYlWCCBoi2UFnTZRVal3\neOQ8hLSAupy+LaLeUd2+ueyrrszFhWyoDz+wnRxjGh2/mwkzQKjhNjMuMmK6\neQtP9R4HsfAjuhNS/3QIFGQ9Md8ClkDfrKytu+yvReqpnyVntNUFjmi658te\nmxp/98TBtwO5ZhqI6tapEkeVTlD4bjl4395baqmf3bcZWD5kqGdguVa0bEI4\nQmkV\r\n=JGVD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c73142a1b.0","@material/rtl":"12.0.0-canary.c73142a1b.0","@material/base":"12.0.0-canary.c73142a1b.0","@material/list":"12.0.0-canary.c73142a1b.0","@material/shape":"12.0.0-canary.c73142a1b.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/ripple":"12.0.0-canary.c73142a1b.0","@material/animation":"12.0.0-canary.c73142a1b.0","@material/elevation":"12.0.0-canary.c73142a1b.0","@material/typography":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.c73142a1b.0_1626201951582_0.403751694121095","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/drawer","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.d923db73a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"386dc7ccce0c6df49ac0ddbb880acae89db91485","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.d923db73a.0.tgz","fileCount":48,"integrity":"sha512-wObPT/8EkJmm+jo6Zn83QaR2CR1kWpNoA3G7cMmPn8KyWLilQrc+f8BqaebmVmlsr67JtrXqWqzuHhczifAnKg==","signatures":[{"sig":"MEYCIQD0JLh7OO25G1Wv3KTrV9NMkTyAAHjir6xEd//ISkQWPAIhAP+4nwwdEwpg86qKCXxa4xxrG8MYtk7ndUxIoYiZgvLE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":984039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f2+CRA9TVsSAnZWagAAuBQQAJO/qe1G3iYfWVh3ZHES\n8hRoYGr1kmmv2wqSU9CTzgTUazMlciZJwDYwsSQvtDandBaREzBX9Ge1yM/x\n39ktjDOjlG9CqhujsGAQ/o3HI98ZZMv9abx6Ake/2mo732I0m7WLAjta8ZGk\nwtzcIM8YDIrU9w/BD8jcBOI9zSliLKdOmUh2biqq1/9ZsVVyrtWOeFjRIwIr\natI8tsBgTlMWf7Du/dDEZ7WPNxdwO9jDjhmL4tw4MKmzkVb90fBJuY2JU8oA\nggtDOxrWwc5+D3Dj+kK9VoeNwpSJmVhBNo8gvSe/SpVHiC+iSWM6lXkPgapv\npo7ak1yzuh9n5vSHTGWEBnByqyY+3wvKd6mlATfAFMyfMIMMZi0pYQDhyZBG\ncW3vuUJDJBwu1uuV+17i+nOW/NgTTbWdpqbNprqaAU/4bkbcNiYhKs8mozbi\n5EdyGiiZ6k5n1X2aSqpVf8sTEUbKQaTciS+vm5I7t5S2XvQiBOnKNf4AFq7I\nhEQt6UIVYMDFv3+q52segaY6MQNGo+QtVU/PPPVPJmzrEcZiVz9lfKBsXP/a\n7dHbMPKwf2CQY4gehZLd30RsYaTJKhhiql6w+nF6ma4ptmWdnZpmMyD8eLSx\nn89bKnKAaXjcBipHpqGgt714V6U4VDwAjcGSMcrvQDywqPbpa/jyzzQbjTfg\nW/FQ\r\n=23XM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d923db73a.0","@material/rtl":"12.0.0-canary.d923db73a.0","@material/base":"12.0.0-canary.d923db73a.0","@material/list":"12.0.0-canary.d923db73a.0","@material/shape":"12.0.0-canary.d923db73a.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/ripple":"12.0.0-canary.d923db73a.0","@material/animation":"12.0.0-canary.d923db73a.0","@material/elevation":"12.0.0-canary.d923db73a.0","@material/typography":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.d923db73a.0_1626209726265_0.3980660012531383","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/drawer","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c50f99259f7460dc2f07ccf5d73e6c33a46e3a14","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.22d29cbb4.0.tgz","fileCount":48,"integrity":"sha512-a5tGNXOXJglDpq/5blE3ZxbfTnuYU6pnkswWHliSUc71fC1A6XmK51vLz/PCGPGV3qL8JS2sakOVMdssRuLPxA==","signatures":[{"sig":"MEYCIQCExyVkik+uFLM34iQr5r6Z0mUSf1j3OfjbSkL1wlx7zQIhAI8sBtg3mnngv8az7gZqp6SnhTEp9sbBTvyLeSAbp26I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":984039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hkjCRA9TVsSAnZWagAAc3oP/0liNH0rMqqTSCjRYy1w\negeA4U6JcKgW9Vm0gq0Vw4YY+Am3sbYpKz+td+OSEN0XW5nk+2+GyUd+wEu/\nXeJ3GgRYAmZrzezElO7Zuoemhfg3rNjLjd9ycUXtlec64/QFDQJ3jedjcVv6\nYRIymr0EuCLMbPkQouyp4npgkHtDsLiyNUeXf45R+uf+cFgpCK9ijQRxCQwU\nR7nCA1UVtcTvFQLiMTzvHyBvNxea6GVtgXG7YGDsw+Q8gVj0yGRPBFsr04a3\njllWWeos4m9n6h4mvwWbNQID1DDip8LBd/P2VeyL+zE729ie+aDFK1dRrPo3\nJgxNq0xy4L4J9X0gsAIa1tPdSh14RAQNQuUFnEtLyVcB/W1/HJesR+Y/cZuV\nAf/GnJVBXSr/UKIlFtq0w69/jWakPON8FA63eiTlo8nb2wnN9IRzQYfRH15v\n62fS3U8UeUGmhM77lBrsRzNKfzlJPJdTWuwKbgwl5jjfeCHRMKGYwrII8UyW\nkzNAN5KMdYjlzUdIbjgD5V0KM/032nN5chxDmg+claPSz+c6ThSCNGDJGrZ3\nYTG+0L4+Uc8LxHyBfqiY9cXdmdT39tH+bTp6F7O3T84vrMuKXanT27aYkYit\n3sWs6zagxf4o/fMiQ+YVbff/RxKC6Q74rafJyl+LXcTevHUXABES0e/wTYFs\nDrE+\r\n=0ODS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22d29cbb4.0","@material/rtl":"12.0.0-canary.22d29cbb4.0","@material/base":"12.0.0-canary.22d29cbb4.0","@material/list":"12.0.0-canary.22d29cbb4.0","@material/shape":"12.0.0-canary.22d29cbb4.0","@material/theme":"12.0.0-canary.22d29cbb4.0","@material/ripple":"12.0.0-canary.22d29cbb4.0","@material/animation":"12.0.0-canary.22d29cbb4.0","@material/elevation":"12.0.0-canary.22d29cbb4.0","@material/typography":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.22d29cbb4.0_1626216739128_0.20457039122779586","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/drawer","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.2749604bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07ee07fe55412256d16d6c5e2ff0a7dbb39223bb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.2749604bc.0.tgz","fileCount":48,"integrity":"sha512-I91R6L/cVb1twSNeD/V0QmTYylLUokZMMKfYFADrzkyc3ZwpZhKZNrFY3uxXRFXrHlzXAmlJ+ksMb6UBQqc8Dg==","signatures":[{"sig":"MEUCICpCMV19tmGtSdG86EtwHfPXpQA4SicaI9CoKwywQUjxAiEA4bObGnwBJdzMA+R9km/XenYOTxObgzk0Y+EPrCWqTZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":984039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w+kCRA9TVsSAnZWagAAtC4P+wdn2Hrc/OGFuM4eZ/VD\n46/gaRQ0JWaHpAB5VvGtxHtOEd9M70d5o/r/ipU2ES05qQfH324LPqtkg+Z1\nogoJlVusVsmc0Q5YetC4QxmqII3Z6soRsO8FOqBnAiYPyLTQLNLXEpPkcH2V\n7u+/b/Gjp/AaslWWGZi1LokqKIu/2kyjuvzrfTtp6ZXjE79/4urOidt2vDw1\nv2EtyM/Sjp1fhfGDo3dDpPknVJSyqQPqASArXyYZZPunD1G3npaab9TnTYWJ\n4nipsfq+ggFjEhU5nqhkeSkc0J45KKjBR6Os/h/mm3CtLkjp3vA9frl5hvkl\nSebWO0acn5or6uNUU616M05Fo7XeH8pG+Z3RvDJq1TTEPNroy2sXBCxrW+c0\nZdjPNOeZ2hhOWKZxA8FnRR+P4qZN4ajqqUusHJOiADLNxMYdB86xrfR07dAR\ncqAsAzy6hZ6VuSY2fNc09ij3UTiMKZmwt4L3O2dgm13uX8hVqFBrojhLNJUj\nZ8PVq0ONaVXZOk0FnrXdqF/d1K2sXzo2TauXK0sH/djWaptZQVq1Otyr+/wN\nubD5riu1uDvZdIHOHoa4EtryEKv6zFknz5h9okl7odEV/fFvz8lfsiM0nqVK\nKLKcJ6VS2kPOb2Fuk+uEHxJNyKe4ev5xKdq9bNqJV8YdSbuGYaxGIvRW9XPP\nkm+n\r\n=/8zS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2749604bc.0","@material/rtl":"12.0.0-canary.2749604bc.0","@material/base":"12.0.0-canary.2749604bc.0","@material/list":"12.0.0-canary.2749604bc.0","@material/shape":"12.0.0-canary.2749604bc.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/ripple":"12.0.0-canary.2749604bc.0","@material/animation":"12.0.0-canary.2749604bc.0","@material/elevation":"12.0.0-canary.2749604bc.0","@material/typography":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.2749604bc.0_1626279843421_0.022893306929868684","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/drawer","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ea2b839974242ba15751959ea03701737af0d97","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.e1703bed9.0.tgz","fileCount":48,"integrity":"sha512-1DNYZ/rDyQhm+B44M3rtdIM6vOWGqbR8HEZD9uxj2Y5DJmN2zFhbE5xcDC4jum7kc+XYKmtIa5V/RVt7m4wu6Q==","signatures":[{"sig":"MEQCIAGUIw5OoAH+r8azWzLI9MtgAMtDTJ2QgKwDRm1tL56EAiBwkpGNSdRwX8ipjTSB7ZFztJukjbMUm+sN3N1kjq3XRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71v/CRA9TVsSAnZWagAAtsIP/1I3OSkaBK0BGuGP0OHx\n0qug3ak29R8iRo+7XuhXfKEmNOW3PIYFBQ8cP6oLeeX4pQt/oec6ei63s0br\nS7zct5zkqIRqw/3qIM+fOgS+Du91aKQYVvll76s72yAF0n/1ovfjwCWpdvnQ\nh9osIZQggU00FqPTbYfwogc+V9X/BvNnI0WrWecL6X2fWi+wwUTYlLw+FUSO\nj89tFUdAvxXJ9N6HlRcV9QX3GhIDLUF3u1v+E4XhuzjfsEBavKx6cOK0UR5Y\nQ3H/TQhwHqkax+RDireaVfxihoYnhdphsYHdX6V3DMPl6cJX1vVA0RL9BiIV\nYK1btAdxdhCFmVJHT3zAOMJpw8XRlYTZlfkj5Eor9SFB3psCb0rC1meFPR0w\n+TjUy8m59Rh3H9sG1vmyd7FPdu8H1zZGOapdbwveo7CWwdhi73KBPkMSiszi\nFUFo/Kz8p0ItqKlF07eWOGmuGHjwTduQKslwvIOC9ZtIR1+/4LPfwThF3pw+\n1irir0jyo0y58zEHwRk5X/oIoyzTHdpMfICxY0OqCxFDIsjt+EezpkBV29Ao\nyOMJLcnPURwZwmRhzWYmRlM7k5sgkgTYL9ichG+sq6uPBISkY7E4Hm7pLK0A\ntjBPa42gNuK1s/8lLQMjNcDGjBWqraDvx5pIxP1FLwAxz17VMfGkkRcDbcBR\nErMI\r\n=i/XK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e1703bed9.0","@material/rtl":"12.0.0-canary.e1703bed9.0","@material/base":"12.0.0-canary.e1703bed9.0","@material/list":"12.0.0-canary.e1703bed9.0","@material/shape":"12.0.0-canary.e1703bed9.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/ripple":"12.0.0-canary.e1703bed9.0","@material/animation":"12.0.0-canary.e1703bed9.0","@material/elevation":"12.0.0-canary.e1703bed9.0","@material/typography":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.e1703bed9.0_1626299390597_0.4175533031519161","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/drawer","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91705e9349e8e6f23a9bbb3060309f2ee2632618","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.de48eff0d.0.tgz","fileCount":48,"integrity":"sha512-M5mlKcMm27mN2Hdb811qnJ95kXF6Aq07AeoLD+bueJRPSwEdKqW6WKdgnBgsozQ2jy60FGsrnJTgxGdgWqXaeA==","signatures":[{"sig":"MEUCIAtRltIAg63LzakTcyrMdfOgIrfb7KAQKYy8nmaD7hTdAiEAzhpt7LGm7Jc7m1c0raAVYDEkXvzZbKkYvxoSibDI1O8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":984885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GvXCRA9TVsSAnZWagAA2usP/RMm+b+TpbcNm9HTpnEu\njw9RwRfM3FpI7mqcK0RT/drVlRmE4g5ytOB3TSFHK73GDVw88n8JJpekkwAs\nJSkv/gMtvm34xtVsT7ErqzlzlhUMGN+euH6zZMQav8dYcTq50CyAeTCEacYh\nHYL22PqkosyX9vrsqdlcdY7L5Tb13EivVY/B1f2WD/p+8UWGt5Ye63LDlzoy\nmkaqRhi4WJ7Eh2SFig737hQdqHdZEBuFWSnNGL30ZHR8vSQ362Y9uLqFnoqP\n6S424OEPCGOZ5tLzZrVZlOGuSyAfDNMjSAZvt9KWCYREjd3ft+kFEu6G5MEX\nDw7NBo9VBoZcjBrU6Tnha6DNhi65ziI41G+FylsJHUezvpSb081+rPQDl155\n7l80pjrGoPbiHFJIAlU/GW/XQIk1HR1pYnnYcvBS9VwP0+rKhd1Dw0r9PBZP\nGQFxSBz7TRpTltkM5tjF/CN2ryQ0wcVB7KgvEurs50XNGe6/MefQ2ZlZK4E4\nPxqI44vU2FZ4loDCjE8vPh1wMEPt8nqDmnhp5l4009YfYuXqn1ChDZUljxsD\ntq3RnQ8GDBHhet6/641gxqpjIW/mvAuRSb95m941bdAVOObqdbvamzQ8K3Vl\nvJZ1hsAKMQpSlE4nO1e8UInB5vk2PC1X/3uAAlYkSESlhK61Py3+uYLanToW\nIplJ\r\n=864w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de48eff0d.0","@material/rtl":"12.0.0-canary.de48eff0d.0","@material/base":"12.0.0-canary.de48eff0d.0","@material/list":"12.0.0-canary.de48eff0d.0","@material/shape":"12.0.0-canary.de48eff0d.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/ripple":"12.0.0-canary.de48eff0d.0","@material/animation":"12.0.0-canary.de48eff0d.0","@material/elevation":"12.0.0-canary.de48eff0d.0","@material/typography":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.de48eff0d.0_1626368983078_0.0942576991152293","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/drawer","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0420dbe44dc0e5741302fd15ada9891f1c688f4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.4f060adc5.0.tgz","fileCount":48,"integrity":"sha512-UoSV/nRnzL50K7QK9pscNAPDUcsyaIYa1r5yAcisSTAGusOE9aiqmbKMEaKNtiqhe6RDKBAKSfNAYNtwqvXYHA==","signatures":[{"sig":"MEUCIQDAqt6wJEXqkdJx99bOy+eiFnBoIfSyC7oMetTXv5izPwIgIHoA+udmxy3s0dMHw4aDSdESgoSckED0BHkpzFA+Xdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":984901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IswCRA9TVsSAnZWagAAYXsQAICE1UN8BD/sIhO8HW7S\nitWUgP3cXIFMyK/Ay2iaK0rQUDKMYOXco6xNe665068xwQ6tzMr5zDioROZY\nxmVtWYhDPA0XzTQodQ+dgAH/Ab0dpMMFn75EBk49EJ5l9WHYmJhk9eWm1dDV\n/Oy0+259wLWUYFLkWUNTiGL2UcAKZu8TlqmMTOL51BA+W5cc3thz22vtt8vR\nmuX7Bh23YS8OT4c+JTKoux5H8mqhutCrkqPWJg+AuRy0+cNmPgK3a8nagi1t\n+9Tf0EyNyXUsJqfDfgODkYcMRfJT/dLopia+ycbRt604KUepRrz0XwfeEg5H\ntNXEZjd/n/PiKi+NcVQfvrIzTstcT0njB36v2YR4Ek99EQkA168/ne/rfr2L\n0VavbOIYlvVy2Hv5I9Itpo/8ZtwYhAcTEEfNGI2FmHEcMYPDzkxc6mtj8CJ3\nFWNELawhdQLn9njd+DZqES8X9xz+m19HoxI7y3YfzwUBWvtDcNGsr6SduUlF\nTb5Ba5t17Q9kptxFKpopY940ZXT5lCDI38Bg3kY+4rDU1o7HpaT2wSElrbBu\n+XdoIhfBiSiGl6qJBYpEhyJZZWbhw9HBpfsSblIlDce3d4weBFVV/LZ9AG2A\nxXFeV4jTX1wDgpYCxRdFtUvxzjepvOfu0fHfnmiN9+KuqMnJqxfoHwZt9rI0\ngnZd\r\n=rANS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4f060adc5.0","@material/rtl":"12.0.0-canary.4f060adc5.0","@material/base":"12.0.0-canary.4f060adc5.0","@material/list":"12.0.0-canary.4f060adc5.0","@material/shape":"12.0.0-canary.4f060adc5.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/ripple":"12.0.0-canary.4f060adc5.0","@material/animation":"12.0.0-canary.4f060adc5.0","@material/elevation":"12.0.0-canary.4f060adc5.0","@material/typography":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.4f060adc5.0_1626377008408_0.3572491441905803","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/drawer","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"850957a98eacf70809ff337d38d34dc1a8fbbe12","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.bd25779b2.0.tgz","fileCount":48,"integrity":"sha512-FMye3xx0PAYWKoi4sx7Bs2wJhdLSq2tEgNRfcY6/EBoDZqk4B7BwSzeXMjKT/7uVl+VsHCupLDfPSxfrrxYI+w==","signatures":[{"sig":"MEYCIQCMAwJ1K/mD+1CXThT2Wk4t8+soIhpYVzxc2EFF9FC1PgIhAKFphJ3yUo05Yw6N+sqydUznHPUpd4x0vLAho7wwF2hH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":984901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J4ECRA9TVsSAnZWagAAqDYP/0jT1ckg2vXARgfgEiRj\nljiasXy+9rH2Tgk4Qo0QyQtx/PR82NCJVPbo2+tcIyHA9h/VHaMOCSbN2FqP\nPhUnmdUIC3IrAtHDmGvy7preZ239BD5kN/cbAkBOxlf4qs2MyQooiB9tSiM9\ns3CPL3dgNdx9jFEsJE3TlnGvmp9Y4yvc8+bYyIZS+JEAQ1tgwPpCTKyukvEL\nJqzU/KoCVNbzh6uDFojWhmv5Kbe4eAM/8iLJ7/KfEayJmhC4PVE1kOSGermC\n/FylxV8ldgCMp7TRNzxkEpf0BcNKFN9C09vy49FiaPW8qh5b0bWBRdrkDm9P\ncLPi5X/XseitcqzoAItrr4PnEfHVFUzGVHaYXyi+BZNAtW2uK3Qx2bo0o+Pr\nnHYrnjKZxO7AjtVR1Q87dxuJeBsVTx+YsHe13UlsZcE4qHrp+CKbxxr0aTmn\n1bzHumIirJLpeIj7VIsFRg4cngOxMYpjY1P5lDAMoNl+TkGjKAYcTAFUgaGK\n/qYbbUibAVM/sw24HCrLg96Q7vdRQufxdaEUpYsojDLJu2MaO3GoJ5R66WF8\n8PcryDXlvyy+CSalCvRIK4SQxEVrsEtLSoeggTVqzzsUL/FGm5dJIN+hWjty\n6a+R6maGTiJl8lfejuIVqOtxNf1BOQiA947/925p1M21KTiE0uzOh6euvH24\nhlk4\r\n=tARh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd25779b2.0","@material/rtl":"12.0.0-canary.bd25779b2.0","@material/base":"12.0.0-canary.bd25779b2.0","@material/list":"12.0.0-canary.bd25779b2.0","@material/shape":"12.0.0-canary.bd25779b2.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/ripple":"12.0.0-canary.bd25779b2.0","@material/animation":"12.0.0-canary.bd25779b2.0","@material/elevation":"12.0.0-canary.bd25779b2.0","@material/typography":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.bd25779b2.0_1626381828730_0.5331740083816627","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/drawer","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b41bda7b9db75a2b3e5f4a42a6ffb38e6f84263","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.9f68a932e.0.tgz","fileCount":48,"integrity":"sha512-MPNqM3BKwaIENkZEfFk28/AUF9qiysUENHe2i5/o2xvSb0g9tiA5lho9A5U6mZAvjFNIfazNGQUcyMTMiJmP4g==","signatures":[{"sig":"MEUCIEjWfdkpLnn3GTb7sOIrQ+DpbY5skDkOtRob2/FNlyZPAiEAtlVHE/WkhdtpdyWEqqZsG8x7vM9ER+ufjqJxa23Luoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":984901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LHpCRA9TVsSAnZWagAAUvcP/RCKDgUHh25dJlbEFQBS\n5Qwci8pFhex83dHeb7xTJw2MZuaDxoK3HS0LrKO4Ow5NkDIioWsYEKZxBw6g\n4j67YBrz09aw5tUVxwokOsoO4YCrW1/jgb17wmS2jBgtxRw9sEWhG5xqqm+4\nJ2VyUef6FNL63HzjyMcuFPz/F2IjRYjpLjbgv7EMWuH4e0Geb3IYTIDTog3B\nhwM5Er4vp7XKBnya7rZHNiVw56Lw08eu3QKNxiY7QqrGMPyjr8VBAuhy3NSS\ntMaorYR0b/UmLiaFVS8TIbq+yl9S2W2DwH8XdcmsHHclVaCl9kjmvsWsfdhG\ndEuRV3Rt6N3rLz54cZ/qwz67REjFsFBxuznDN5aiIXILDSXE1p+nT1jRa2vj\nBPR9MREW5Wt7r+X29KFlEzFYWkCj4ULIOpdwEAoWe9gFB/RQ+5xhomjVvxbE\nigyKx64p/7OYsWKGjZ/B9HLpSt43ilm/vWxaTUwE/MrFVdoYROC4576RY3Hu\nQrEe4sZ8dEnlQRw4GL2JOBQXtXs/NYHzBl/jE70QReXfQcALQPqa3muejIyE\ng6qn1BAnYQH8DicZNQqKe7s3P2UpCCFwlZvXT1+MLIgnxUSeJwT5BQFzLwFz\nckoeMu9iSRRhVXqJwqWngQUfD3agNFC6da4AW40Gq9L84Wm2S6MdDJgdzQ6+\nqqKi\r\n=m0ze\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9f68a932e.0","@material/rtl":"12.0.0-canary.9f68a932e.0","@material/base":"12.0.0-canary.9f68a932e.0","@material/list":"12.0.0-canary.9f68a932e.0","@material/shape":"12.0.0-canary.9f68a932e.0","@material/theme":"12.0.0-canary.9f68a932e.0","@material/ripple":"12.0.0-canary.9f68a932e.0","@material/animation":"12.0.0-canary.9f68a932e.0","@material/elevation":"12.0.0-canary.9f68a932e.0","@material/typography":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.9f68a932e.0_1626386920918_0.14081839645212835","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/drawer","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bd3299a8272c6a825e8d5b7b32775afbd155403","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":48,"integrity":"sha512-TfGDQx72p+23DqGDRd3N+YcNXedi1TirvA5wKgT8cFQvbnuFmV8FlQr1HpF2ORLYNwEvOuPkxRNuHxuWov3jzw==","signatures":[{"sig":"MEUCIQCBOHo5cmUq4OwE2yKJXt1mNLpYj+wp7dvH9NK7cj+FRwIgNeJ34gIA4kijCzhok5ZsG/XDG0G4dDcNUcz8WfhH8po=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z7SCRA9TVsSAnZWagAAv9cP/iqAyDdZJ41jSrKflHMo\nbXVOFWFloq6H5Sp+6QdjUlJSrlElVLimGHvCpzEK4sHKCxJefhfrSLxWDe+Q\nvCDa9/OhsN/3qvPo9qQk+IB+UsxJrOcXCOSd9Amiik0TUyyAyI+yFpwDYgBS\nIz2tsmZpKSYX49r1U4ssYXltpbFx1yj26MyB1Xn4TcXnoFtf4R5k1hsvSaFQ\n24ELKK5VBalbJIhuW6ynxmP2H1v+uPeLyKzcE6K3D1mErooJTZQ0FeJTIPQk\nOklCphxquhW3Ic8wkdwlunM/fWPQoGdumAF+ueC21qjF6VsPZhv+ZmmGOef1\nUFPENwTFXcbT4aAI7zO3u2AnIsa7M68xeCceOXBU8CDtMbm2GxAMPliuO/AO\n96nd7h++s66Ffyd/dkrhFp2gt09Qhzi10E/gegjubzVmwWAIEUfYDAUyQ8Ff\nZzw1GzWyGMWGSeonyAhxCe82i4X+TkIDwv6EOct1YSlXb2T7ge/3qXlF3PWU\n8ue2sV6f1O/vtEvEAtjdJRw4Nutz1uOyYJ3SoP0WELTDXTdHBH7FQH+JaXGW\nMBZ4+TGJamUwAn4A/GMZtRJXWR8sYM/mHvrC0Cw3yGsVNpdqdojkiA3vX3Al\nBbt4CstEKbAMD/T4tgD3PywvUgexnUN07Q/zcZFS6APVhQcZp8U5BTp9DMfW\nJBJ8\r\n=yODp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4eecdeaf0.0","@material/rtl":"12.0.0-canary.4eecdeaf0.0","@material/base":"12.0.0-canary.4eecdeaf0.0","@material/list":"12.0.0-canary.4eecdeaf0.0","@material/shape":"12.0.0-canary.4eecdeaf0.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/ripple":"12.0.0-canary.4eecdeaf0.0","@material/animation":"12.0.0-canary.4eecdeaf0.0","@material/elevation":"12.0.0-canary.4eecdeaf0.0","@material/typography":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.4eecdeaf0.0_1626447570738_0.9407643791955447","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/drawer","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.7239684d4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5777f4300520b3d0b04a2203399c02b6db63f65f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.7239684d4.0.tgz","fileCount":48,"integrity":"sha512-4sTpkWG5he16ShJtuT43U2R9TgjigOLjuNtgzp2Rbp+GwVmXecTXrknh3LJifccsXiFHpP1IiH8iGpzkB536pg==","signatures":[{"sig":"MEQCIA6aGvcDhqMDxUGZ5/lifzRmw+EKUKIG+E5kZQYFtJz6AiAcJERcQYlV/LxHbaqkY0IqRXwIaNyEw7RJ88G4eGPrWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8a0lCRA9TVsSAnZWagAA/94P/3oqabSMRlR/JtRXcxoj\nOMtmO3FO/hXja23xgl9N1PEBBlfH7/xOGv/R9P82bMdnUWmh1Xj8GLSAAMP+\n5Bq09absCsMTzK0BlDobSfX+hPVg5rBTNeDsmvpV7diQSUz0TIwHjw0HHfiw\nzoZfCdsR2jJHkNeNPvozKBi0/RguDrEBo3xzuFhsGWLrMV0Y8KNZoAWLujHw\ni+XAJnVu3pVbQyNgEkTqi724X0xuSQAKW3CpD0NF1jXZAI9CeAXN7iIUCtuD\nXhohXou4E2xXcaO3rL+AxVVW4FFD+7DkU8OHX2QdloVx4heKWkU4ZHZGDwAY\nLnrl33LoMjwVECwzwvoYrUR5R8ILnutkdD8MUTVCPrmi8bFVyZ2aC4O8ELnD\nZ9/0TGNu16FBj+tyRoHtEgaqxGaMVrfgq88nwZSi3DQ2yTYrvvM2aaaKEvTJ\n6e3C1zGur0HVc6i1NNjZG647BzG1R3Y4K69LeG8QIwIXO9eiAnFGREyaWAJm\nsjF5je1gRnZrHIb6PGsj7uSuZNdPjGsBzR4fhUziLx4ovIEbNhLsXrmGp2xA\noeDtmcDgN+T/RZuUsJH1Mb3BRCZhFZqjjxXmEr7YbiEshN0T8Fbd7fQwx5nF\nFp5D9JcfV2cNdXYcT0ukTh7q7Jd3CoWT0+sAegeLkLni9Y0qXT0hXOCD0q8i\nbKqM\r\n=rWUc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7239684d4.0","@material/rtl":"12.0.0-canary.7239684d4.0","@material/base":"12.0.0-canary.7239684d4.0","@material/list":"12.0.0-canary.7239684d4.0","@material/shape":"12.0.0-canary.7239684d4.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/ripple":"12.0.0-canary.7239684d4.0","@material/animation":"12.0.0-canary.7239684d4.0","@material/elevation":"12.0.0-canary.7239684d4.0","@material/typography":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.7239684d4.0_1626451237054_0.9804805980398703","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/drawer","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c8a411331e9c9300ae02fc2abd613f3385196f7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":48,"integrity":"sha512-bVT2nicsL1NgbXzVdXtKQcGjOixmWMjF1Q22G2ZdR90fGyoUM1hoz/DgaRqVQBO0AZwzaKSv9YjXtA7YxZ2KfA==","signatures":[{"sig":"MEQCIEWWKCG+pktXQwQUQfDslR7aM18Hfg+PMmVWTMyrAk+eAiA2PSqjwvpBO54jd30mPjPt3FW+jLpwWu3lzkDbtNpPJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bChCRA9TVsSAnZWagAAPi4P/3BfRdGTNtnpDGHss4kd\nopg64gb5BJ/gM/AswTA2o1zRv8P5z+atQ+/z3mqFFNxcpJhDJjQyxr6Y3HBV\n1099G3Q5fPe5L8ZSXxK/xZbHDjZxxQexsKs6k3TcZBrNKeDp3wM9KDGNIBO8\nHEz8THRQ+g6DGvEJd0aRoXJ7xp7b45F49Ag5Oqu14XMVlDCUSR3oHl0TJEa4\nP8U6bBbnW8NicwX1q6/plesglXST+EYSGTeNzPRKY6JD9vnT+lDlqdme3UYh\nEy/8wEQMsxtllY/tlI97N6wFbEdMQBhglOO9sa50FaGzEblrVaYR1F3aLMKy\n0BTKMUppFGZhjk+mm4dQelOYDVrDRWRCpPk1pSg3uHI/9FMNS+2QGp467fsz\nkhlVTigMWD41OEdiBmLp9nygoGK4r9ef0r5vx3H6V0m/jfxRL6wpurfL0KYS\nkWdwAHXFixxiMWXHLRgeMHhCWSg6ASXSUbWyns7q6f1dYjf1JrKnWj/42in/\nbbc1xXMYPqARBoG0+Y1bhzYlOzdVk7gOMfWWqCrWljFORBlEJgftSj1jTk4e\n3t3cQxHBdUB/padubKDUq4WZAma1jRVrCxwzN+DfxX0cDr+WU8z5RnxjKI5T\nEURQiRe6ETk0VA0n0qdF4JkTevzQAfDH/+SmR7x7jusNXN2Ic0v95V2b6fVQ\nvf1D\r\n=vfqW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f1f7c72.0","@material/rtl":"12.0.0-canary.d5f1f7c72.0","@material/base":"12.0.0-canary.d5f1f7c72.0","@material/list":"12.0.0-canary.d5f1f7c72.0","@material/shape":"12.0.0-canary.d5f1f7c72.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/ripple":"12.0.0-canary.d5f1f7c72.0","@material/animation":"12.0.0-canary.d5f1f7c72.0","@material/elevation":"12.0.0-canary.d5f1f7c72.0","@material/typography":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.d5f1f7c72.0_1626452129315_0.048438254320090746","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/drawer","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b18d09ca9e49cdf68b5913c416fd171a7ff50536","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.4d95812f9.0.tgz","fileCount":48,"integrity":"sha512-Iuh3h9WrrzjbLfJb6sdQq59Cxh9qqRiBNgDFICowPedhFc48rNOEmM87K8BxH9XeBvSO10aAQr+UvkX7glwtiQ==","signatures":[{"sig":"MEUCIH0P/LSE9T5uoG0Gl0O6af2fZ8dN8wQPuAnER6QbvUs1AiEAncM5nTRBa+cZTiYdu2/1IxwRUczenKgVopTKUSxOOD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eGpCRA9TVsSAnZWagAAfhwP/jqsBIKEhc83P+zE3tnl\n/rxJ4NGNadscYcXaDl/V8qDe6rt4YuY420/p2FaK0S8cB9cW2oWtxMHy4jq6\nY3uybUCjZsVs0BuByhC3+U7lZNCjRYGRF2zQQxIlUSspJXKaS4V/ZbnAYXT3\ns1R0PNNfCDY1rUtE+0TSyMJ+KMZFM4b4/4lO7LCsxB0Bi3WhTsM19j5VSfTt\nRRW2/89ibSZpnqOPt1E0onY+yi6yqbASACSvoAvR6SbH2ZL6x1mgo4I7gti4\n0gM1oe6rGn1A4uKVmHJKA/5PzI11hCJtdHf6qwU1OIGAzLZAbvKZzaTOFA9t\nVR3eWImMZrONtrMx1eGDaneVjBbi46iCcWX45vw0Zf8EPnaqM3vZlOMxcBEc\nn0dmRkZ1eqTz5qMrreLFn7V1ZoDiKFg+rVvv4I2NaoAunVrApMY+KE4BHEdd\nkLMWxxg2F9i5ILBIp6bfCCvttoFbRYi7pBJEbUrew4TsSverDtvJtGhl/UhE\nPlcPtcM5Ma33lRUXOAnlhuqj7OWQLfZufXR0l/SwDJ+JynqpXxKPQNIRJpSk\nJbZC919GvTxz4cTLULMZEPJam11Yrpqz1bUCjmH3r9ZZsb58Vox9wpHIzDoG\nAnvzh1s+G/XRL561RxGVsRwoIiYa/cwcP8hNSz0fh+j4uHAI/YuTtly2yUUR\n1faV\r\n=VlGF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4d95812f9.0","@material/rtl":"12.0.0-canary.4d95812f9.0","@material/base":"12.0.0-canary.4d95812f9.0","@material/list":"12.0.0-canary.4d95812f9.0","@material/shape":"12.0.0-canary.4d95812f9.0","@material/theme":"12.0.0-canary.4d95812f9.0","@material/ripple":"12.0.0-canary.4d95812f9.0","@material/animation":"12.0.0-canary.4d95812f9.0","@material/elevation":"12.0.0-canary.4d95812f9.0","@material/typography":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.4d95812f9.0_1626464681085_0.49491805259284094","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/drawer","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7356e72233b4b0865b00982e180e354d5d768060","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.38d1846cc.0.tgz","fileCount":48,"integrity":"sha512-7PHIZCxvzRwFJmOU0nkqx8lhIX0amlAHs18E98vgBPxZQiRcH3QRcCbjG3E6mfgJxWtLzlxROcZszXRZpsKj4g==","signatures":[{"sig":"MEUCIDQswCUzof1QYzvRy8a91af3GcwH/e2WeSc+ycgCLsMQAiEA5GxSxpeUi2ZTgNCvOcPCVeJb6sqxm20C1jIzlwdnFxg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cfZCRA9TVsSAnZWagAAdQQP/ApvZQK1Rx0pyEm/jRyo\n5yMK2ieHiuK+yKAwIu2x5xlvwfWa3GSVOj/1lH1m3w52ikAmaNUaabT0AGqu\n2S+e1PrvTVFC9328aOahc6mNwU9VogzXQA6Sug/grKZ01kc7ihvNzNHBbgTW\nRiv8XWC/htwoVYw2XKpNWAGsef+IpRAKW03tFy9geDi/oUYmwUOVX+BsXkhc\npBiuteizljq6STqc/nWn4/KUW0K9GJyoYBxr31CFd6qa5WcAOhS6JCcmP5RO\n0/pLfkoGvCU+a0O+nuyI0Y9EEHRyRh6FTNe3vqBtf6yq6fk8BtW/WxBTh1km\nGfiiFHjE1je1gTGwrF11X0WajiDw109tvWWXNSKJXLg1/w2lyDXnJ+iWS/Ip\noeEbkU9Am00EPps1h1GvUOHbbQfkJO8U2mh1staMw9S1TmI9HSFbdDmkgroc\nCh5XyoToCBdgwnNdgEKMoPYMhGaZQLTtUgXlBfdrbwpWYCsVVbtzWOYStto5\nXYY7B3u/Uagii3cZZeI5Y5hcHkHVsnpUviry1oM/JUOTHfBGd/T0GJHP7QIe\nIENSFJBEVM1Q8Z/KPDJL+emh3ax3DD4gEiOQLBdFyctDTNkffu8zdJ2gy0yi\nXvCtBqRrlaOYcK++kpgg7DH7Cps877XOdi3VlB34qjmWN44XSzX+mC3XFlJ6\nANca\r\n=pLeT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.38d1846cc.0","@material/rtl":"12.0.0-canary.38d1846cc.0","@material/base":"12.0.0-canary.38d1846cc.0","@material/list":"12.0.0-canary.38d1846cc.0","@material/shape":"12.0.0-canary.38d1846cc.0","@material/theme":"12.0.0-canary.38d1846cc.0","@material/ripple":"12.0.0-canary.38d1846cc.0","@material/animation":"12.0.0-canary.38d1846cc.0","@material/elevation":"12.0.0-canary.38d1846cc.0","@material/typography":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.38d1846cc.0_1626720216890_0.3720649811756809","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/drawer","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b8015e28b8568f56bcbd6e3695a5ad7be51c244","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.3f691eccf.0.tgz","fileCount":48,"integrity":"sha512-O9pXhlattmdo2I2YgMRCKlLC7ZLoh/crUKqA26nLBAx5vKItgHNMy/SLwt18Try4qj9+dcab3pVXLK/1rbTG2Q==","signatures":[{"sig":"MEQCIA6GL+hf28dOqZy+PblS6JNIp5hBdMalJdh6ltbZuOaPAiADh8/o0c4u00/E6+QUnjCqyfbWPyzyemGyp+0yWugreQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vWECRA9TVsSAnZWagAACQIP/1UBRbRl6cNnKx8PRHu7\ntWcgollyM+zYl2L0P455xk6hFpftJzGw9B40FbEG4ZlLV6+EuSihWCR6qxpa\npfGJ7LKcUj58gMkEGHfY/WIMyqMB27wT/LCtnOuMdq89rKRNgVO3zXb1bna4\n5+S01eEuTlRIuQ/2SRYwe6pauGQYl7dIX1v8e52VJm+inXI0b03jlTS+1+OY\nsXpq5OXjLpJvnv68nwdtZZDvl0M5eTGFJSIdWbXMVRV/uMGu17DCcm6YTEzb\nQO2YuDTZLKb2tmPiL7P/wrEzSu/Ij+bxQ150LGF5Fn7HyVqFTPDdG/ZaW579\nMub8u1dNSe5uInutuwXzIbM6rtYJAStksyVZlltvj8C7wIiwkVD58lfemo3G\n7vboig1bWg6bXhJZyPVL2PcAqJoPBUxjGSCJ3j8VjGxT7uJr1vrYbtMvhXXY\nQju8f50gXVG/0QFWOVJ0Z2M+rNZjd1COVJ+fueNWGWbZQxa4bWAc22WCTCl3\nAWy+TRIbi4b3Hx80GE4kA7GTYTswuS5BnQjCcwC3afofFenMviDL/NrlCxYr\n2XPHFSY5MlNYtYu0/QbW/h//5s23+dimNd0EVf7ZPocVXHVQTxeoISFPyzzv\nKXIRb8k7jKbzcIMhPe8dSr/xCsOQ/egiGON/XsGmZd1qijJtCpslu4I7x1QZ\n0Nyo\r\n=Aejm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f691eccf.0","@material/rtl":"12.0.0-canary.3f691eccf.0","@material/base":"12.0.0-canary.3f691eccf.0","@material/list":"12.0.0-canary.3f691eccf.0","@material/shape":"12.0.0-canary.3f691eccf.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/ripple":"12.0.0-canary.3f691eccf.0","@material/animation":"12.0.0-canary.3f691eccf.0","@material/elevation":"12.0.0-canary.3f691eccf.0","@material/typography":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.3f691eccf.0_1626797444031_0.3376384708761282","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/drawer","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c13b38587e74d1f334f389eef0a3838c66975c2f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":48,"integrity":"sha512-wi83b/8vdchKcQcg/IShL/X/f6f6GpdT3KezEoqTOIkM6jnyPGbI/3SQqwxYQ+4XKCA9b+0thFPd7km/OCfwtA==","signatures":[{"sig":"MEUCIF6Ug9Chg7KKYTOPVsVvLgCNdhxLsDMn0LGUCpP+H+O0AiEAz3qLvFGhzOV87qUhR0MUWedhBTNq3AvLMmaTX8FJbjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wCrCRA9TVsSAnZWagAAaVwP/2Omn4n51ihkoAmI81g6\nWzN6fHZAFH5iyWPoy+/qz30jlsWSAipF34Id/ffBl7qniyo6Sky7k1Sl2Szo\niS3JaTwh+RLF2Eg7/V//xSgKoGnd38upf+lMR3focQ9oSGyOajrIFBd7RTwz\n9ooTMYwyFD8EQ4p4XsKDILvipDLT4WejD9OPUHDlOncXbKBBUskoUueQIpcd\ntGvYRU0wjYwi+8igRqBmQTIriL7H+QV7PVNJjWs/PsX4meOa2nL+7XRv+xkn\nlrCPuDN+qolGBuXdTxp+0kizVnVUFsicQPVF8nPt4iItKnh9Iv/kTWphGBXB\nGKvZIbvyOQglqb9yYFkE5q5GFSEtgO39O45fwp4SxpCTGnhOFeiPqmjWIYH7\nU1J32uLEr/u8n9WRZihO6SjlG4/lT+4mj+UaQaTi8NpRnIEF9z1S/8Xz9t+m\n2yx2DwsqDVUDWGZTxU7cuigwrzX6I4HH2xUUdJV2ObiPV79VDwyJ/l5LnB3Q\nrq3pL4hHEmnqVEtcGCURH9eNxtqtIsLgLBHl2YTDOGGuW9/WJj0qrppVD1Nt\nSLZt9ooYpeqfPmxUXpQpxPensHH4QkdqvJvQ51E54fLkUq+otOAtskhfSloU\nbqUbpmsJxx9ahrc6FVJuuOltSe3kglETmCQWruBUxyygkO9TqC2GMl412U3S\niy9o\r\n=FrFI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ebb5c73bb.0","@material/rtl":"12.0.0-canary.ebb5c73bb.0","@material/base":"12.0.0-canary.ebb5c73bb.0","@material/list":"12.0.0-canary.ebb5c73bb.0","@material/shape":"12.0.0-canary.ebb5c73bb.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/ripple":"12.0.0-canary.ebb5c73bb.0","@material/animation":"12.0.0-canary.ebb5c73bb.0","@material/elevation":"12.0.0-canary.ebb5c73bb.0","@material/typography":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.ebb5c73bb.0_1626800299693_0.22899821357557393","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/drawer","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8551b9d617c7f759c0159b7780d98eed407d6e07","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-nightly.778a0e8a.0.tgz","fileCount":48,"integrity":"sha512-FsFocFARbW+sL6WB6PFJ5tI5NvXlX1prm0P2b4wVM0UaFJv9diHq9P839wwUyMp5Kw+1+HCRoEcZIKe1yL7oSA==","signatures":[{"sig":"MEUCIHexeXhEWMNEJd0oAzjpoBiKRe1XWTJojPz9Xx++rQ2HAiEAjAGwiay4qZ0mOqDNx8UYrnBI/gO/bfcQiMQas39YHIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zr4CRA9TVsSAnZWagAAAJ4P/iW5i2RlAsOSGdVcmRnd\n2IzQHMadw84ZqB4WvQ8Idn71Tzn5fwcyD6D0NbG/2/XVljpU/pdOSbA1Qq84\nCNB5S+6/dYD7ppW9XVR/QZFIKBP1LRDq+GaeMHri+bxA67HUdhbi7cdovwnj\nkYrJG8s3ZR3FwU7GsAUV7D9sMfwwPh0DMWSO2T1wjeOXcNuEbTa4tEsTCGT4\ngMdxpok22ymzST2ClMoWGwRgd8e0LcBsQuWab+lw0ImyiyGe0JDo1Gumjc06\nIsmKJJZfeEiOp8JbTwJ5XiabdbnQMmCGnVWsGFiAq2k5gbb/h1ObXsKHQGMI\ntgv1n4C5RCxfW6lFmopJaMcKjm3MPHerRpOmSctjYnQzAdwv2Etnli2XR1ba\nOZDYwycI2/2yKgAj2JxWGi7DB69QHEK1Ka74hUKGgl+hBRjCJEVZajWILsxI\ntSdpFr6MhSVYPWzWHM/vUM6193O0N4EAWLtaDHdUXH5ccBuOEcK/I2tWmMOv\nAMQkkAV160WG9gkJsWCLwGJlhPa6kEV1PqI5IdsyZMTgAhNwtLakn6xa+HYu\nmTNjS259ryTGN4ViWqe7Hte0SHLmBFDL2fnM56bQ7awXtn/oJQsvL/TDmcUL\nauruFmn0WAFMuExMwgu167AhZ4kgpJiogLmUzLvHouPaiLFqL17/N4BKHBa0\n7rJs\r\n=Y82S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.778a0e8a.0","@material/rtl":"12.0.0-nightly.778a0e8a.0","@material/base":"12.0.0-nightly.778a0e8a.0","@material/list":"12.0.0-nightly.778a0e8a.0","@material/shape":"12.0.0-nightly.778a0e8a.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/ripple":"12.0.0-nightly.778a0e8a.0","@material/animation":"12.0.0-nightly.778a0e8a.0","@material/elevation":"12.0.0-nightly.778a0e8a.0","@material/typography":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-nightly.778a0e8a.0_1626815224462_0.08060709513476372","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/drawer","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.791311bba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4187a045326e80bc39c0e5335f8ce16fae76e370","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.791311bba.0.tgz","fileCount":48,"integrity":"sha512-J+r9s8ki13qvVKapza0ZTzZQAQvaXpRwMnVy5gdG9klxIEKKkdb8M1CFKZlnyQ6imk/hAPgqaF4FNfm6MMQZFA==","signatures":[{"sig":"MEYCIQCxpiVzmuq6rOR/VRVwdT4LAWpyH7ySe0Zc9G5lxbIqAQIhANZQVIyNVM0QTBQXx4PrgbaBhrzdKG2vLaEJgQLuGWfb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90mBCRA9TVsSAnZWagAAFuEQAJgoyn99EiQKvr/tWye5\njKVi289AW35gjL6Bj9lZaiAtUXueiLwAxKAjBl4dSwc8C+PgG3Cf3zEYN8Dp\nJiMHQM40QT/DZ+EZD2xpBTS1coTLBVBXBp1Lu8j7dn+zXAPdT42jIsgiBXjX\nsCDCg0kwB1zbRo30c/uGYG0cPanQEjXjfHlDNsZNV1aklFOjo5W4HtXxNjKE\no5wVtgbSc3vYx7S/5jbetL3HwdgNFENCYY6sdE02FhyA4Kv1omaUKvNDkpiI\nQJIbY2vyYALt1p9J/BdwVsDrJI++EXx1zgMLI+d2Mdfa5BtVqE4qZq+Dwu5r\nXYMrIPYJLr52LTTvJEFYiV4VAhO9a6Rdo0GION0rQT6hTLW1JaMaEeX61Prh\nlE/cx7Zppa2WU0jCr6BtDtPibWKuN2wZ4Kqa41oxEk3u+hdUc5awvL2McJoM\nHh8cjfORpH6NWY6PEnlUaDzNgr8q46sYW9IZT64CvLszMFYx1IjfyJa5yMbg\nfa3IUZdL/lGWuZ3RUd8JTSU9RVVCjrrJVWzrO8fvwpRASasS8jijwD3hgT9P\nBL8uAopTDttZZ7ndAF+EwDH1m6gkgwdOkR9/PFRg243wQCM6+/UhwjwCAMFe\nDUU91uMFIwiBHHQcyY+yyA9vz53DSEYZDCSHQ+HQTEqdlD/ysx5q0MROFjNz\nesw0\r\n=7DLR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.791311bba.0","@material/rtl":"12.0.0-canary.791311bba.0","@material/base":"12.0.0-canary.791311bba.0","@material/list":"12.0.0-canary.791311bba.0","@material/shape":"12.0.0-canary.791311bba.0","@material/theme":"12.0.0-canary.791311bba.0","@material/ripple":"12.0.0-canary.791311bba.0","@material/animation":"12.0.0-canary.791311bba.0","@material/elevation":"12.0.0-canary.791311bba.0","@material/typography":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.791311bba.0_1626818944850_0.94364400088386","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/drawer","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbf81ad86c1bdff659fa61d3281d45d8ebc58d59","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":48,"integrity":"sha512-LKOSB45DwBXjOAHwDJyWe7IEF7LFAR2E9A5zjKtHX132sHYqSLDhSsT8ofJuhIiYMEj2ifNxAMhNEda3oR/I/A==","signatures":[{"sig":"MEUCIQCPvDgqCpnXwQIoF4Kx0LGjaTeaSLr1t548Tzz7rvgiqAIgfP9rW218gvshdw2+uHwuQ5A+3YkEf+sgIsLax6eTRhA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D89CRA9TVsSAnZWagAA+UAQAIQ1j0Ex/wcLK0DC69fn\nsU8wIQ8zNMhMM3WmbRS1/fXsFkCffPVdFrg50mJvbmapVcESa7fB/uE4sc8I\ninFgJZqZajcUlakds8foEff3rtbNiNADeWTRaeMt0V6bFIzTSK7yEWj8cFns\nZ7KkEcojg62TmLK4L9icZdw2MX2l8oknOYGmeWwdOBKupSiI5WV6YV9CzR5Q\npuRMAP9joCrIRjV1FLBaShKdxFTD/8dAx3q3+VScjssiolwx1OJIUOeAmYi5\nd+1wvePoQqWpG0QZR8OgXq2FI3Pub4iVahfbVRqd4hmS+k3FvtiX2GqHzs8P\n+4DI8MUHN8Egkv0COS6AECRq5c6CEnHYGZGHIC70QFBPZZRkT5c7KaWvSEG1\nfUXccaLg/qE2iKCebrrzfmhcaUZ6MQn1Sq3uu+km5DbEXkGxqKigh8MJPoMZ\nx7779T+PHufZQYLcVJuNKjtlfn4YYWJzgrotOa1hd9cm2xocP2jX/U5bhqwv\n051iSjRmeWD0MgS8h/1b+U4y0Kuvfo9z0sOkshSZAnPsj0DDlgN1X2izfZBu\n+a2ucQ2V2a8GvbBY3BOgsIal7CASkCZZKOR/de0MLj5h7/dT1/0+E5E5+ARM\nROkjxKzVo+1A3PPTsMILxjA6A1aY32byfK1txkcOD4B6plts0gzAlL8fIBbA\nZ7FZ\r\n=+6Uz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.85e9a6ac3.0","@material/rtl":"12.0.0-canary.85e9a6ac3.0","@material/base":"12.0.0-canary.85e9a6ac3.0","@material/list":"12.0.0-canary.85e9a6ac3.0","@material/shape":"12.0.0-canary.85e9a6ac3.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/ripple":"12.0.0-canary.85e9a6ac3.0","@material/animation":"12.0.0-canary.85e9a6ac3.0","@material/elevation":"12.0.0-canary.85e9a6ac3.0","@material/typography":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.85e9a6ac3.0_1626881852791_0.6643558840590695","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/drawer","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.6b0442278.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50b82c7c37d6f06383e1e3131e72add757b1349d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.6b0442278.0.tgz","fileCount":48,"integrity":"sha512-1IPyrbrpRC3So+xPPBJKW2ioJ0z1NzEKPKVAltqnqmfXoCAXCgnlLupJZuyfBmJ5RmBgZ4kUh0LzaCUWOhFR7w==","signatures":[{"sig":"MEUCIFxHj6wzqEdFyG1NR/4QWwra4mpf/btO8SAT6bbMkB6wAiEA/lYFTLwyARWd7ISYpCi762IG3IOFvT8rMkvN53wcYIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GytCRA9TVsSAnZWagAA9KQQAKL3kiylFUXSKhgWuNT6\n7hhK8f++LGZfXG1cBPHi8s06ebYVQrlQLqloS4vt8cCxWG1vwIUgGPIEsWX+\nu4PDYiu4jz8FiIbO0BoUWoovoRt61+V36dPa27dRR/gQCvXccb2jaeCcMKXb\nXS7CLaRyn1h9pNyJ2WCwgfqZRGX54zULGUvdn79Nxl38maio398sHa6MQoKE\nh08fQvhv64hy+JmW+28Ripoo3+qBjozUxq/Hz7Wwrfx1aI/pAYwNlpthNl+y\nc4ZRHarl1gn9nvdlr0jScllGlCUp8Nkb7uGL4LvFoZGfDiR1gvsPYPIUnX6X\nqA48bBlUhrjrZwMBUFDB/IXTl3Rih0DrAmitHi2qeicPMbOejI6RM0Go7rbg\nUosgOUZe5PXg3nqA3OzK4hWHJWGlqnTv2hhNalA0RCn2hJtHxgQjM+0QW6yC\ntdR5oeeXOADCj8tH+CHRnIaf4uN3AEhVx3f2eWOFtpZ5NlC8BRYqPujGMJ4p\nl7ZJxJBXxpm3UpyYhsN4VYd8aIe2hBFgGtYY6PqTLkQuaITnH2JAtSgqykVr\nBNJYPpsclK0O+eWdPiW5sTDb8rci6VPMObqO3adzv8S7nAfJHy17O1XPXVNj\nEr2P35ZebdpY3eG6EvQ2tY08Lpiw/p2gnljJMsBE8h6hwTScDAC16nDZf1nY\nFqWm\r\n=L1dR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6b0442278.0","@material/rtl":"12.0.0-canary.6b0442278.0","@material/base":"12.0.0-canary.6b0442278.0","@material/list":"12.0.0-canary.6b0442278.0","@material/shape":"12.0.0-canary.6b0442278.0","@material/theme":"12.0.0-canary.6b0442278.0","@material/ripple":"12.0.0-canary.6b0442278.0","@material/animation":"12.0.0-canary.6b0442278.0","@material/elevation":"12.0.0-canary.6b0442278.0","@material/typography":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.6b0442278.0_1626893485270_0.807209577901937","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/drawer","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f551fb03943b9917ed13839ec69210dc0595846f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.5f00e454a.0.tgz","fileCount":48,"integrity":"sha512-eucYhEcJOLGBXml+jscZd5vmeHp8VL3LtJNRaLO2gUmhQgzc8IBzpdMq+7n6ecbQVsX8GGU9GIMkLsuOa79GYQ==","signatures":[{"sig":"MEYCIQDzjeM19svYEOu2apHMBIZxsjM/keWq4vElVsPX5+c8bQIhAIPL3neHxhF4KcoOvkW//1eXnRNppbTwTvrtFjs/h5UU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aXtCRA9TVsSAnZWagAAMzUP/jEZY+7PCgm0RTYC+MfY\ncAEFZZHAPRMN8pY5AdlUWHRhqznAJYApWe1MXY+uqIWBLBFKa4gsoubSq0L3\n+aa7XmfSymlO0S+XrQOPZrY1QrXCDmbplAmE/nOP7epZ9P2QqzZrNmpN1ZRy\n+1OXu+xb9SS6+v1ZWPgyPuSOd7tErcKTsiWGwqcYPBYtOW3eJiJ82oobWKtC\nBq8myPSLtqanaPJyBj6tvpzCm3LoJI6/9DBOYwNHFwkVXD8wlbo1qCA36bVJ\nnC7zoEur8pV7wqLxzGTMVXGg7Ap41wVL2rmqY/h6qecGcsSasB7GeOeAhG9L\nJBVa/Vps8QZCarhSbpnG1MuAda4CQMhbAUheocojVbylPOwIaiwbGOSRBAAN\nQP4SmKUHJv+waXleWkXq6EMsMbuIb+5c978ebeOoAuynZkBUO+QIKloMzk6n\nHBfBg+/RJuB600JmqXVu4R+KJGrZV/0/t82JvPtcgqlKtNUGTjBwmxjdxze/\nU9QA/FziYNryMlxgfisEhM758vl2+3VL5s1Ocm/nKdv3C1ixTYqBfyopbtPw\njU3Br71Uf+zJNla9FsPVHoaxaNWWBPtmZIajMCxTGbcKQQVGF/K1A8A08sfT\ni76YbqxlXCHXH7oo3kOXmh2Q6b3JKEfhUki68OGo7/KMPI2YI5AYHJNsUOaK\nbIRs\r\n=37pj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5f00e454a.0","@material/rtl":"12.0.0-canary.5f00e454a.0","@material/base":"12.0.0-canary.5f00e454a.0","@material/list":"12.0.0-canary.5f00e454a.0","@material/shape":"12.0.0-canary.5f00e454a.0","@material/theme":"12.0.0-canary.5f00e454a.0","@material/ripple":"12.0.0-canary.5f00e454a.0","@material/animation":"12.0.0-canary.5f00e454a.0","@material/elevation":"12.0.0-canary.5f00e454a.0","@material/typography":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.5f00e454a.0_1626973677069_0.58355002305153","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/drawer","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3042ddfe075139a92429d64a745e78e0b21ff362","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.90e08fc6b.0.tgz","fileCount":48,"integrity":"sha512-pP8nWgex0SNitFsNFS1QsRmsvmcexl3y+x0vVkZmDeuDRvlU/2fDACkMb+QOP9rJX0IH68xPFRMcg8/0YWgHvA==","signatures":[{"sig":"MEQCIEFEAek4SeEicjFGOq3eYKHXTNgorZUumoLDjYMAIJWqAiAKOiiE2aZtFYzRtn7r92fcRK4KACQ3AWYbhlWZyusWEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gHJCRA9TVsSAnZWagAA+SUP/09ZUkVIz9vLmwTxgr/I\nJcW7m1ScVmLaZH5xwvetT43A5kzljAsJpLCZ2iVj/Alp9wd41xQWdyTJFZwd\nTHSJWA7Pz5gCHJsO40uEIB5ToTyp12rEkgfQxlbGkNRHGCm1dAdwcur86aRT\nmuOSXRzGP1Fha7AfLH6nEKtsSC/ef+gt6IAjaF5lgyPcaqOaA2h3Y2e/odPz\nAmOu6U87IhglX/qnXc4bxlDQ7Ewp4AplZxnI2/i9H8bL0ei2NUG1Gk9SfLwx\nSbsBtx1YAcf6n1Pwd9SjzEqcjGeJ9lENINo7rEndXpOMgDFoKyL4T578OG/B\noEYKyFxuJ8UJn4o+i59Ha5UO9b6p4073gI6RhN1CZXb4HsXaUdbxU5I/95wT\n6xDldGVgjtQt5jVKi3v6u1SIdPU61Qdy3T3whw2ZjJkjqf/V0Wd3BnYm5Ocx\n525u3myWWxfthjlIiQBS/5tDnICA83f7rOXIkgcXT6KGsBSOdnARqQdxIs4T\nJBOcWEj1h1FN1oaaJBNvHXCDYpnl5edEaciE9cDH1ThxMvYZO8bUF1/HlzJL\nlvPGqCLpXhU+JTuT3mx2Y5oTIX+xjjoK80/iXPz9z24qj41cGFmOEc423rSR\niNsG0JHjTvpQw3PMnLUXlpdFNEL5XRzW2g1ansqbBMxEydZ9qqW7y0WsMOrW\nn/+l\r\n=Rm6F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.90e08fc6b.0","@material/rtl":"12.0.0-canary.90e08fc6b.0","@material/base":"12.0.0-canary.90e08fc6b.0","@material/list":"12.0.0-canary.90e08fc6b.0","@material/shape":"12.0.0-canary.90e08fc6b.0","@material/theme":"12.0.0-canary.90e08fc6b.0","@material/ripple":"12.0.0-canary.90e08fc6b.0","@material/animation":"12.0.0-canary.90e08fc6b.0","@material/elevation":"12.0.0-canary.90e08fc6b.0","@material/typography":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.90e08fc6b.0_1626997192952_0.35246580835095864","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/drawer","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f515009a275bb30dc112383a44edf0d61ddd86d5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":48,"integrity":"sha512-aM2LQSqHR8pvqgCQgtUKJHkhBBWH0KHtIluDCzS2NACY4jog8cRXg1hqn+SViLNLAp3BD2dVECXB6GCdat156g==","signatures":[{"sig":"MEQCIBg7loyWMiRrI5E0MGgTbKj/+hdFoaLQ2hF0FboNiypsAiAt9iECVq70ISwLTvf3Q3miUtSSUSPALwpi7MEU9nhREg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wbaCRA9TVsSAnZWagAAds4P/i1md0cW/QEXtJNz2MGU\nWwn6Vrk9NyUK4B1fl2jqdhR2Ccb5T9pVIUutA511c1wv9WcFVFJjDKU+jgwM\nNy6/i7AHUpAFKAr4hoTnHIVGu6HS+PmMelQP7o7OR03+PlkpuKy7vxzbC/dl\nCbBtMUuJhd3Si/gzY9jKGceK33paEzw/bycoULz6z3FVdRx4XJmGUYrdcExB\naCRqna4G16/2N6wyqac0dFIHIgaU8Qx4pGIbAUPuaCQiZXyNkC7Qp88FYYg7\na3VIo7y/UzwSEWU/AWJ/9v+tXfSoUdp6wt8O7QF0L7QjlfbdsjV1gJPCLm2m\nWFdDeAsZTkBHmlhk+PfInGXxmY7RxKFN/z2P3VPfYkiPgU9RMiC8fMDvUkdI\ny0Rnqi0P8QogczgCCMHbcf+UTt064n0bniWNYkZMm9rychX1ZnRjuW6rmiIu\n77z+zMxT80b45wp81m+0XZubitJCS3vc0zyQkZbzVadevtsVwz16KZl3kTsI\nRTOGfA+pWAA8m/L8CpeENzOoVCgS8WuFQaXT86joi/73RSx3QTr7tAL70eWm\ndyLYcwpNzy8EqRRAVlkIUw8gBnM8Tqozp+STEbrKN5AhhnKtruglMcaaqtT8\noWYuuaaU4JbW7RzVWepT8QaoYh/yZVo+hAann9T18+/9Z30N4ElYEpICINoS\nEAAI\r\n=9iAf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cf5b9eb86.0","@material/rtl":"12.0.0-canary.cf5b9eb86.0","@material/base":"12.0.0-canary.cf5b9eb86.0","@material/list":"12.0.0-canary.cf5b9eb86.0","@material/shape":"12.0.0-canary.cf5b9eb86.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/ripple":"12.0.0-canary.cf5b9eb86.0","@material/animation":"12.0.0-canary.cf5b9eb86.0","@material/elevation":"12.0.0-canary.cf5b9eb86.0","@material/typography":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.cf5b9eb86.0_1627064026631_0.8252322366900924","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/drawer","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce21cfb172733da4b47551e41d930b76aebc2cfc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.3f36ac75c.0.tgz","fileCount":48,"integrity":"sha512-yFtA/Ti2S/QKdnHokq7BhH00v+rSz+rrzYSEqQ+yRnAI+ska/dPpAk9ZSJGqMxA30llMu7A3MpLVW1ctQipMTw==","signatures":[{"sig":"MEYCIQDlW0WsWiTUw5glWQdArErGxLMb/Gm6YnLilXSQspkamgIhALdyIGWcQFbwCtPn42YZvqFlYWyWXJxbpFvTW9MYDwxb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wuICRA9TVsSAnZWagAAq7oQAIupeEYlTMUkD9ErGaLn\nayO0dUleTy2PWPK/mbLkZhRYZYvqgwufEmBDzHQ2hrwyMHuy/Jz/AArkupBe\nY31UEngQ0P68yFXPwYuvBzkTv+0qQY7ZxTV4MPY3Dh19ZTG7U9wfRQJzJTRe\nn4Rem8+fC/l9sCqjB9/bZ3LkkZYIi0UmVO6gjmN1aKgu4tRcmVXsP8d6NLO/\n/t5oh6KpZeS95ZcewCXJW4GTrDQ0hcz3i1x3RGkfD82gnOjRBnTmxgxtio+Z\nAP1qIMyT/mYqsRwmMTreja8ljQh4yZMoVdjVOk8NXe6HABSrkucbxjNgRGhE\nTicMfSc8o07G9p8ktAKy6rnGiUKZYaOj2VsRk4tvGf8aqwAy7JRLPE7pykHF\ns/t2Sq15rIw2wxqTxpb0PKSY1qzq1Dcitv/ZFob1Vkwhy+pji2c7QOZirTUQ\ncb53Zr1+lrOESH2TPwGlHNJ2cwiFevpahN46JDixW28baEi6e+kCkBh+Ro0D\n5ao5d2LDVXFg4hzWngZa95Gmo/DgjPVbj0GXJqHoKGYxzIDNbntQhs84QiJQ\nZVrN3DwOmPKeR+w8bGnevmXFx34/LAFMkaEUSfbPt6afR6NNkViuCNXO3Yox\nBvcTsTwN72peg3plEWOkk1/R+2Gu9oedDBxS905+P6BClKOwHI/V7U6Of2IQ\nec+n\r\n=CnhA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f36ac75c.0","@material/rtl":"12.0.0-canary.3f36ac75c.0","@material/base":"12.0.0-canary.3f36ac75c.0","@material/list":"12.0.0-canary.3f36ac75c.0","@material/shape":"12.0.0-canary.3f36ac75c.0","@material/theme":"12.0.0-canary.3f36ac75c.0","@material/ripple":"12.0.0-canary.3f36ac75c.0","@material/animation":"12.0.0-canary.3f36ac75c.0","@material/elevation":"12.0.0-canary.3f36ac75c.0","@material/typography":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.3f36ac75c.0_1627065223851_0.2962866156537931","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/drawer","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b54fb93c5cac5b60ad4f3fed2b8fd3e831bc85f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.ea1e1b850.0.tgz","fileCount":48,"integrity":"sha512-91lLDCuTnB+taUxdRremTB6Ah9BxcEkI8tw48AQS8qjdNUVS07WeHaZNpJUJIfF+5Ax9+QIP9/BsxtMa4O8drA==","signatures":[{"sig":"MEUCIQCFo3DA933kDfBvmv3A1zGTfy66Fa4Zbsl569ykvVzDEAIgN8jx6NFHqqsVZ4izXUQc7Vnlse5oPycH2KRqAaVySPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H6sCRA9TVsSAnZWagAApfwP/3G7COARfuaHpzW6gBNW\nFKNmuyztL5KGgapoFxVZz4SMidAm5nqMjBpON/nSkhia7h46R30yXKfAn6YC\ngDbaWc+yszS85SjT4MfiNUeSABeFoj21DO8BXEiWTrYr/iTnHOJyrr27WRiq\njGOzodtVW86vsq8zELmQbSScO+w0jIbD2LgukTdLLReUNgAwkUi3yFBsLsuI\nJTvVnvuusVR0DDRkWQ6OcbiguQEmSBGX0ZNmSfED70sAj1xYslGIO15so1UE\nbuPVKOWrku7BH25YwjiUg6BJxLFA54X02ks2sfoKueEWV8YMgh/60DFGQcJD\n3l5y7Gdv+tNPnyXLC0WlnKtM7rJ/OwJA9XRvk1724IRMOe/SYZzcRJJXGDhl\n6ovK7ZWEey12qbH+CQ3pHofPHjvZNGTedFLeXMg1l/P+WfuEozyEJyYr88k+\nzinYE1khiFaPWVun9tF2LWCl/74NoBjervBY7f/MkCi8ZNuFJjQoZ8ozxcRE\nAfVzV2b5YN3nm/Lw0BCkQFV5l9DadOlevG4t9l6navUleDd3G8zVprVjPLMJ\n472jG+IRzz3sRuUue1B0kUmg4KngaDinAOga5zOArUJKqJzVpLHREpTqBJbL\nGJ3UnEibQSCGahnZjfI/W7wvgM93cX0MjMoK0W+fW9+AiASK2s9gxVC4cXYZ\nxuA9\r\n=JlpC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea1e1b850.0","@material/rtl":"12.0.0-canary.ea1e1b850.0","@material/base":"12.0.0-canary.ea1e1b850.0","@material/list":"12.0.0-canary.ea1e1b850.0","@material/shape":"12.0.0-canary.ea1e1b850.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/ripple":"12.0.0-canary.ea1e1b850.0","@material/animation":"12.0.0-canary.ea1e1b850.0","@material/elevation":"12.0.0-canary.ea1e1b850.0","@material/typography":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.ea1e1b850.0_1627160236695_0.4733872302195985","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/drawer","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0-canary.22f390c43.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d119540793259b9dd88dab18f00e9f8e90c5905","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0-canary.22f390c43.0.tgz","fileCount":48,"integrity":"sha512-9gYVF03FycVMYSkAvAa9M28/99DEedOutBjZNkYUxxOoAVnfT3/9I42ICGQFnrdCqoQ5DalP7MAe2Oa6bsOB6g==","signatures":[{"sig":"MEQCIGh6JPXr61rJNoJllDstz2k7ace7Ssgm0ga7w0xt+xGeAiAbc+fZfsPB4Kz4b3BFMhz35xvfXFSKP0NvjQYsynbjeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFgECRA9TVsSAnZWagAAKtAP/3+64cs+UjZpSfYaOouY\nuXqbSo97v9VaL/RWruprXWfg2uC7MzsZcdh/FLXtd8UwAVjS9lNwOQ1o6nJj\nGdJEoIlDkDmANfJ0C86DygYN0HRrQPApdMALp+CIgQUVcL4XjkHIEDCo5Zyf\nbZ7sxIH6wG6ljmUBtlDnKw8FL+LfkyhKiyOIS4ki8WKqDHKEoJVojF+Ge/cT\nCzE7kUR+JKfB+J+KNRI85hYxys7s03p/TVo46tzmpoaU4HcreTgb07UWhm/W\n+Eg4zzxBP7MigzJ0Hj2tv0OqthtNhO3XA4gHH9HiuCY3bxdtJNy9orNP+hB+\nyJh8hl9ydlmd96TFToSRejvNqYXj8UmAuaJO9BExmS3fiDdglRZ3wTrr7FrL\nNsCaM95FZK1XWk0UXnvU/N47rtOwhMU5mrakkyA/zTo1NRwpQTIGo830h7SX\nQyHLeGgCUET0FP1jUPO5y1hgu7nCmmm5COwa293MKb6OYSrcPRVfi73A4kEZ\nXGPSWCeZJSuKWr7ZWZ8U+ufUuhWPl7CH+lgQfFy9coTFrxezlI2Q8HnZZOfg\nwyPnVe0NSDSptJp3NtZFJ5WTbAlC1NeqD01x9iMzeGDXq3lNfUc3FSe0Gw/7\nk2Z4Dcx+abTCwTBO4PEfxclC+JkH7Z+DElOsu1nI1l7C6beHv/Y8RCUOKUX9\n1ctw\r\n=gyP8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22f390c43.0","@material/rtl":"12.0.0-canary.22f390c43.0","@material/base":"12.0.0-canary.22f390c43.0","@material/list":"12.0.0-canary.22f390c43.0","@material/shape":"12.0.0-canary.22f390c43.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/ripple":"12.0.0-canary.22f390c43.0","@material/animation":"12.0.0-canary.22f390c43.0","@material/elevation":"12.0.0-canary.22f390c43.0","@material/typography":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0-canary.22f390c43.0_1627412484263_0.761210538902503","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/drawer","version":"12.0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@12.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ac540b1e597a03192f9c775e964e1da0d96c365","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-12.0.0.tgz","fileCount":47,"integrity":"sha512-gQBowi3Zdmfa6w/HboCkM64h2APLndVccV9Ub6a4AVpheOtzzfJgS+WlTadwSKjcabL0AzJ4U7itecz6FvespQ==","signatures":[{"sig":"MEYCIQDiJxkcXgoLXUnJCa8GuGpoMz4xdRApn+hJlOTjtdFbDwIhAONoy+9Z4ylsN9OtJBKKKzT4kLKkkaIcLBBwY9JHTUJ1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGPHCRA9TVsSAnZWagAAQFcP/3bA3RTQTg90Ht5boZTg\n5GAuqNagfNVRhdmXu7gIg17m+C1Yl1VNrIR054dmcH0HD6vcDXJBgjUjCy1P\nLIWU/Hq5+VV/LZd8vDP78SJzK+2D0Wm9GgUVlaD9wjjV2TTrWltduUXi3ZqD\nhjSpaNKixvnfA1SrwrOw5YzkxggPnHqJSWsNMZDAof4epFPxOErVZzzEhdcS\nnzzd8a/G3Vb42pwhYqzCGWXEdEgC3AFugQpUXlwBM6hmv6C6R/O/2w3SGtCw\nSrvu9iQ8zuq/rroRY46hx5hwCcMhgxAdGpieLA81C9W+QgTQeDdzrghtarzJ\nWEHVVlwZsc/FBEJvWcGfYpTd3YHXo9OTwSWGDsXI7W9AW7dMlhLS0EYgogY4\nLlhKKwZBCTG3vVNo7tOJ3veVMn0rgOL/+ur7XZbc7ZekYLE0Cy+Mx6TD3tra\nVJP+Lh40qTchJ9RCKBoqmcs6SbyI5BX9/0z0yNAHryGHYF8cjqUxitsmkfvY\n6kO1D50/0N30UNGnkmTe2SpGz7qY8OBArMEgMBSEZ5HNs6PPfcT4CqHgsz97\npBztj2xx1lLc7AJe1jyh/gtuEi9AgwUJZqjwnalweiaraNX8iJt4KG7JGwbf\nXDHlaEwZbqJAmm+gSPw0xcqLFJaQ3Di1iBG5elsicIOIvmYnESlIhz2BnXg+\nWVN7\r\n=dX6Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^12.0.0","@material/rtl":"^12.0.0","@material/base":"^12.0.0","@material/list":"^12.0.0","@material/shape":"^12.0.0","@material/theme":"^12.0.0","@material/ripple":"^12.0.0","@material/animation":"^12.0.0","@material/elevation":"^12.0.0","@material/typography":"^12.0.0","@material/feature-targeting":"^12.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_12.0.0_1627415495454_0.09112342014071673","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/drawer","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20097342cf649ef21c6e58a5714736fe03aa4ed8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.ae85f7eba.0.tgz","fileCount":48,"integrity":"sha512-mBPyFR23NCRAqFikN7k+4DCTfVSMF0y7SHPE9OY9jrxniCyyQmiDL8pdfcl+G+0eAvFywZAPE6kqNJi2yArWxg==","signatures":[{"sig":"MEYCIQDQDvLigwhjiwupvYVC1HRZAOo4l4JWyV6E0CD+lPZ5LgIhAMun27P8uB9BUxtxP7fTb6zSs8vcI2KDd/NwHUtaDctZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGQmCRA9TVsSAnZWagAAez4P/0cFszqiQgR5porNUxnZ\nhSClf3Khg46LuKhTm/1qTaQI93lXJBRV6wTxJmloAvvAIWjtSwP9/oE3SXRd\n2ybmUA3aTiKi6F0E3qKIk4DzoM39Mwj/V3WFfLzS6Y+6OpxptJyGNtAdhx9j\njLZ44g/faoslGe0BR5sN6WiiuBFCa4rDG4nyynNFJ1nEy2iZA5G8sfRjEewX\noWxu+FlGmEU3pUkXKWawjw0buWaUu3Yo0gvaa9+FD9xYESEuH4LEsqIxEhng\n7PgmAwxDDEVMp466L4mWfMzFIYSxGfDz43hNGXEk+G1cT6zUYSOUc951W3YL\n9EiRZvAhc4mp+D7sI+ygDQNDnjG06w9Q2vfK51XOBBbd9e24/2L7waH9RGzY\nP9vEGBZCJmT/FV3AX9tvqgDHPTpfCoP5nS2/tgtXpNuGvUXmpO+QuvLrXHVM\nuQv+Fzuq27kYiZYPE0tMDkfacy2MumKSx+uGgJhAr6S7ke66Ag2x6JEfGpY+\nxqXNmV/wBq1HLvTgm+uWlAjvsBgpY5VzKblJb7OadVm24PmiieM8hONyCA45\nayhfCxkFyFYRazJ8C5zHxWYqNoha1tWVvjJV6zfL5Ge8IahqDk+fLaBGoD9e\nKPRCc9+E/c4j69fbNAeV9FkA61p1elA+qiJKvxft6QiwtJVAqLuETNMiBeP3\nFiaj\r\n=gZEP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ae85f7eba.0","@material/rtl":"13.0.0-canary.ae85f7eba.0","@material/base":"13.0.0-canary.ae85f7eba.0","@material/list":"13.0.0-canary.ae85f7eba.0","@material/shape":"13.0.0-canary.ae85f7eba.0","@material/theme":"13.0.0-canary.ae85f7eba.0","@material/ripple":"13.0.0-canary.ae85f7eba.0","@material/animation":"13.0.0-canary.ae85f7eba.0","@material/elevation":"13.0.0-canary.ae85f7eba.0","@material/typography":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.ae85f7eba.0_1627415590418_0.5085544354327298","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/drawer","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.5981207f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68a9630d301c4d57374029bb24a7291156d60957","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.5981207f7.0.tgz","fileCount":48,"integrity":"sha512-PyDcoVD1j/oJ/Acjqg7tAUiprtfj+GVaBKSTiqmIhPtweA9t2IMnbhKkE/UkXsI227k4cd/3vnmZ5wW8+F99Lw==","signatures":[{"sig":"MEUCIQDVS1YaHktDPwOolCNcdu5OX7/7JX4BgtN/Ew1dFTqwYQIgfz0m4HgoIo5cs4AAJoS/SY8Kvee8qwX1kDN2ClXUCbg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJSRCRA9TVsSAnZWagAAHBQQAJ89lhNVMMifMUj7IgXl\nkP7/qOFPatYiQyTxzE2BRGV4ULRWoXQxDqucTxv3QWUaqgHGcXwKG76MqkET\nVIlXqgr2zYuw43m0AKkRWHYQcYLkbU7Goif/54yuZeDWClvOj3m95jrM3ZOE\nLqqijrgPlJcY+0EZkqJ/kqa1h1I/xUx/tuEITa+b0xiNBszm+FDxr9EBMmZT\ntppUVFacAHZ/yFT75CCUgaCKu+oWtPMMUjjIbYVF95ux16g/4i2/vhT+JwpJ\naWogigDMW7atP8p1YQhji46rhWiOKAIjGWzCwJpnRUlDiLhyh8foCIdI/+ci\nj9AnvWatwQG7peyeTutTpi00rLtY8nhckNbSnv6CjvFsPU0IE05pyM36j7pZ\nygp2o6buSZ3o7ApDj6VUljsyJdUAC62QhSqVJS3s6/QcemRHt0yL6o0g/4mG\ngJt/5UasQ5YyLA9nEXqW5oNBATnNtQmFMeasjmkd7WUSrKjyrgCFX1wHvQEQ\n+JLiAd9PgZJ0zbmXupiV0gYFuJ/dAFp5L1ASi8Yhr05p9+xDqCqnD8RJErL7\nXjShfyLtKoLcwgc6O7fYE4AaJijXaggIvT62W+O9+5fw1RM2fwM7Rw6iX7iI\nqeJgtqr7yH+Gv2FejTINz0u3Gn9r0hn2b4KAw0hB+0cNIr1ht7rav8LOA6WM\nz+T6\r\n=mdzu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5981207f7.0","@material/rtl":"13.0.0-canary.5981207f7.0","@material/base":"13.0.0-canary.5981207f7.0","@material/list":"13.0.0-canary.5981207f7.0","@material/shape":"13.0.0-canary.5981207f7.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/ripple":"13.0.0-canary.5981207f7.0","@material/animation":"13.0.0-canary.5981207f7.0","@material/elevation":"13.0.0-canary.5981207f7.0","@material/typography":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.5981207f7.0_1627427985023_0.7434645378953255","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/drawer","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2485da4a46b51f3897305996f521fa3cee2c0273","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.83bdd0222.0.tgz","fileCount":48,"integrity":"sha512-kUvzLrNh3KMqd/vHX3YRuiSYJq1IM0Fs0CjvQtxN1Ksmz5Q1bsJru72jWoV6enoHBFrGJ24g+r0fth0HYQUkAQ==","signatures":[{"sig":"MEQCIGPB9zan22y06BgPqDyN3NCEE+Q/DFjcH2AcpqdJnc6eAiBTSgm+LMOljNayIOKwpUrHVHnC+QvD1+xgY1+LPCt/cQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZOECRA9TVsSAnZWagAA63YQAJ9q9AZ8/W3lQwCbwCh5\nCb9pOAXSzXsw+4ukkugksIH9Uwys3U1fl3Ubow50vw794pChwcCw3Xoi1njn\nbemmICO/JOesDj7ZUG7Rc+dlmROHhf1pHjLqVheq6d/pAHRAKGTxX7lXVlfF\nc8YRP1qJ6pdywnUBztogps8VczajxUpMx1v0KjEoPdEtXauIECgeGI4+tEmn\nMoZvhtAquULSR3/As0cHR8LIFBf4nd+8jw4YmzsxIAwlzOCmBB1CmZiX9QUp\nVHfmQ7AUJpAsxZ3L46hSjbZwjFhEwYdnYTIzaO7Kc9F/TwxmppNl8SIhGZYx\nB6fkJ70IJ41Kiq62nfBIzKPecY4VHoQH1WRp04IK+9QBnnaqQgMeddIo3plS\nu/MobC1leY7XU2jqQB+70EnFbJyYiuQqkFgbDmIzrW7UkM7kIBeaV/cAsjFa\nKNG6OWKz8hsnhVcRh0R2Vnh6G8qjPG+664qSoVzlR0vmhhrMbxA10NiKaFm4\nIvQgUz7DSs/Mc/ifPUZO2NfmE1DhNkLKx1wwuOKeHVZ44TLjwtv2SM+hgNO3\n5mcs4tIPdCy/24k4+2Fu0dZltsGiV/SL6yx8atxrlEbkNJpW9p8VIn84/ier\nXAV4tY5DROYG1Qj/bNyxit4w7Qxh+kocQ3FTSEtCTpiMox2Xhcs9FXXFvIbw\nihNK\r\n=AMNT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83bdd0222.0","@material/rtl":"13.0.0-canary.83bdd0222.0","@material/base":"13.0.0-canary.83bdd0222.0","@material/list":"13.0.0-canary.83bdd0222.0","@material/shape":"13.0.0-canary.83bdd0222.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/ripple":"13.0.0-canary.83bdd0222.0","@material/animation":"13.0.0-canary.83bdd0222.0","@material/elevation":"13.0.0-canary.83bdd0222.0","@material/typography":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.83bdd0222.0_1627493252097_0.6049997785446075","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/drawer","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.28656298a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3cd9f8c4480fcc2149422f584a1b00b5cc132db","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.28656298a.0.tgz","fileCount":48,"integrity":"sha512-0pEFt2akUelP6y5NkFo3kl1pXAWjEDIk4wjQAR6RsafKbFxpsUieN1xp4nHwLHy0Dqkg7tbiR53aH92us0BGsg==","signatures":[{"sig":"MEUCIB/8JFneOMAqJ2aImH/PVToU+Bj3QmlN5GP8WbSdQgo+AiEAmRfjAf0JL9s1oOjkhSohGxlacNEYKYUbp9+H6fUIGUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvAMCRA9TVsSAnZWagAA87AP/0H+nqNSGXMX4eZq40FI\nFOQn8tWmW8/8UpomGCy4q89yCPuj5BVXvOfga2jLanQAlcxOVFibPrjpiv5C\nht+DRj4u7JCG70+rl0wLNZoQl0XM1DBYzVThpg+OB+1kjtBFH3n37LI2M6TO\ncK+escJUAQAQtpX2Suhv193XefF7D33MfXzbGgIAXRwwu4++Ixmmiw4yJr4n\nWaMiMZ50Zb0zl88AcN4KyKdRpVZSq23vKHBZ3Jl5cdPfF9+OsVg/aEaSuBHd\nz064FYzCJBcewFQGviALGe5x6ZsLPJD+97RlyHc4S2bqVbfigFY7sBfgwJ3r\nVRXB/LJZ/Hqm0ZAQ0fiz6oKJCl07lAPreejvZnPDvaYdgynN0ZQ2GaOudUEH\nmHmvjZVmwwfcWTkcfTSENx7DTOBHtuO20ygdTeY4NQYVs+oBGng/MPwIYPJx\ntoP2bG80cSfQfXMwDGXilNK1CUqXVG9kYVxKw4NOMf5kXKCTmz+HtJ3Xzas1\n8DDBHw3NlSTmJRMGs+isw50t7xryhxRXOUY8I0H3xdZ31LjlzCqSlWUjWvNd\n6fmVcNotRz3GoOPcuc+xjqhKhnbTt5dETEL7tINUaLLy3fxoBj71LWb5GxCl\nCsqGXqr7ZQ9MmQVk3Inwd8Sf9bmOM0zCKf7RomOhL0y+dFpvptRMf5vLTBAp\nYaNW\r\n=PwL6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28656298a.0","@material/rtl":"13.0.0-canary.28656298a.0","@material/base":"13.0.0-canary.28656298a.0","@material/list":"13.0.0-canary.28656298a.0","@material/shape":"13.0.0-canary.28656298a.0","@material/theme":"13.0.0-canary.28656298a.0","@material/ripple":"13.0.0-canary.28656298a.0","@material/animation":"13.0.0-canary.28656298a.0","@material/elevation":"13.0.0-canary.28656298a.0","@material/typography":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.28656298a.0_1627582476084_0.3881502740076175","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/drawer","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85d3e0e70798c7420b9155045fd6e744a82d86f7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.9e797daaf.0.tgz","fileCount":48,"integrity":"sha512-S14mFl7Yre2+0BiElPMJB3jIQ16CXl0KBbdt/CW9qh24t7ar50mvx7Ggef/8HgLv96vLz2L6DqRyr5TsMV9cEA==","signatures":[{"sig":"MEQCIGtlK4omGFAHOu6hoLDGErbafb6DJ9t9W9UlT0vYqvmJAiBT91OHmBLfd9X7gAVV36Nm5p0vMK8TLPW/xOq8hv9LPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvVFCRA9TVsSAnZWagAAz+AP/2j3f3HoIICEs8qlBUod\n/ld8f4yJqXq5ELr0I3Y7PMrjoBObeaiA9wYYZPX10DoSOX2T5MzzmUUgkyC/\nLYkimu1eRr3y7mfdXzXF+mFssZEWx5M3Hqppg4lbY+GolnpR/ohwK1R7DF5M\nwVP4ceBOlQ1MZm65+Tq20oG4jJ1uOFu8S7A8W9nq8hI8CA8pmlDfnNBviLjz\nTQuWHWYc6yXmlH78j5VeH9Oft3sACZFjZJ2RCBO5hDKks4h9EOv20W97C7TL\n9VMXp4apmN+dQlhaERltpJLoAlXXdmv4idZFPtqs+CK/N5TK+qsRJPH0Nlhk\nYuNKOXDrcNkBFd4joCymejkjxwu8d5B4BjcvyaS8/xlnWovl78T+9/nWtMMS\nuQupf/mvLFXqlXTyrD1hxMcnIaxIVa+oCwD2DXt1XzftYF8AnIJgrN8W0gzy\nVjfwwVcZ36SmkfUemhGkHzK0JTU+xVej0dFL/8s60CjdqW0xLzYp90mK698c\nLVWVyHgqX7GcoIzPZ4c9G9KQ/NfxrGimy9xxVKAVG1PBSYRnBnKcDNt/HSaT\nxn2PaH5Y6ZzoQz4xwv2wFY91ku9DX+aDKgMPv8j4HlCEvcTGYSGURyhoFgiA\nztiTR8BB5Iel993kotbiYJmZTwyAlv81xjCz1RmenJlLhglbGFRVDncyRfNs\nOAfd\r\n=fcaP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9e797daaf.0","@material/rtl":"13.0.0-canary.9e797daaf.0","@material/base":"13.0.0-canary.9e797daaf.0","@material/list":"13.0.0-canary.9e797daaf.0","@material/shape":"13.0.0-canary.9e797daaf.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/ripple":"13.0.0-canary.9e797daaf.0","@material/animation":"13.0.0-canary.9e797daaf.0","@material/elevation":"13.0.0-canary.9e797daaf.0","@material/typography":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.9e797daaf.0_1627583813426_0.34740481761883446","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/drawer","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6fcdbddb44666c969f77af401618872f00a6f2c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":48,"integrity":"sha512-uoP/UtyRbWGBfp5R2kDHi3yYiC9+JgCe3DNomZHwgFcVheB8rHT5cJoD+7ihCXC1BFw3/6O6rSvDgnOAwYCivQ==","signatures":[{"sig":"MEQCIGfZrXyP6xgzcP5g+2k5SU75q3W0x2CZq7pdEAZ4kax6AiBmc+OsBeALVfJ1v2hibi4T8AbharlY80Evjv/+7AgZ3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE3BCRA9TVsSAnZWagAAy3gQAJ+s1dhfrmQjblpfKO02\nzJvL/ZAABYgoAuL3BEeL4Hdv1JFCzq4snrMiCOoyYnn8sA2uaOPLfWF4b9rl\n5vPQ+TIeSLkfUYdLMBvOTe1/zBS/zkx/xVT9fzIr8pqUCpZ1CLgiLDblprJT\nmWhVvKcvWloptdqiQqWwXWz650tVN5GRenqIDUMoZn4fdDPpPLJUVYfqvMmP\nQY51XbY/rDgg2An5Yrds5N+NMVS/u7wXXnLku0FeeaZdFiwy0Xr5pIaGXhDJ\neVaTYHyTtuOVp4keXPX7z6lIS4I+EXprOH28Ur8VtshkRYeE0ejTgCblz7Xi\nizONN23JikqT50Y0HHirUead4Q7u76VirO58t4xWr9wQWn82b2nw7EyXUSTQ\n0nTa89a3pL2YqRbmQVR7AoK2DSb1Yi7LlwYZXx5U3JfoJmg/s8WUI+a8fmII\nPRAG4XOR5qNYJOfW+olRKDlSzwljeqbjQrDztchirWzs93lHMvUedWW8HjWA\nVMRHoKBhEZehjUUIh8+YXiz0Pzc/CmL1RL/hV5UaZW0M1VQaKlkjetWKt9Ze\niJem4Eotk5FlfBEtnJd2wrWmCyLqiY9D2PBoBU26rQBcaCBnTvw1N1trn2d3\nMV8GtNDX0+EVjpV7jxUCGr3emnHR22+BdCCRaMZmWfrA8T7oLBhJqHnOSjum\nKYjQ\r\n=Mj0q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.adb9f1ad8.0","@material/rtl":"13.0.0-canary.adb9f1ad8.0","@material/base":"13.0.0-canary.adb9f1ad8.0","@material/list":"13.0.0-canary.adb9f1ad8.0","@material/shape":"13.0.0-canary.adb9f1ad8.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/ripple":"13.0.0-canary.adb9f1ad8.0","@material/animation":"13.0.0-canary.adb9f1ad8.0","@material/elevation":"13.0.0-canary.adb9f1ad8.0","@material/typography":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.adb9f1ad8.0_1627672001690_0.29616767381272124","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/drawer","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.cc5377458.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6adddbfc315fb6d415abd464eaf2c3bf543325e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.cc5377458.0.tgz","fileCount":48,"integrity":"sha512-+VS03Gh8rB3oCjlWNMyEsawnpKuU1jzjcrYzxD7gcxlSiTGI7zZnKJarcbHCN+Y1MSYYXDMXdvKJZw2Mc5NhqA==","signatures":[{"sig":"MEUCIFU/tYWTYn46bq/1DLmX37LLnOOUQ0OH/Oor1QvFdfCRAiEAiO2AOWy9XX0YyI/XBXM9qc0/nRv+ObcWlPWtTi7Pzdo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHB9CRA9TVsSAnZWagAA7xYP/0vruaIGc5T0czyXVZ2P\nd8jgU98RUqqj+wSW944tuDsFTsXiA+OV/9cTU0rXBFjtQVtYbxVAZznF4Sew\nZMBDOPaUXiaW//g+cADb6Aer2wSindkgItP2v+fqLSDAjKESaYS7noBWht2i\nIyV/eNAApzvNmywXnTRbNDsJ1vLDnzXDDZVrpIjSm2NiqTeUqFa1vg83i7Lz\n+3dhyIn39arAwHKAP5plCj33RoSDwKC1TxB0AcITPFj0Ixww9xGx5WEIPwip\nTjR/v+c0xCoZdnj1PVXDki5WbMQhy6/Xj/ZRm5a0tH7xH6yGPmoCpvLY8OkQ\nyQs84g56otodFNSunXdHf0UpIVBnbXDGzsGJ6yzU5fqgwX2Q+OxSuL96orx8\nSjp1P/hxcqfA+2aUspM4DR0buHAYGkSJK5LK8Z0oZJOPs8o5nHLlQGb/a2K0\nDO/HrI/RKisbaOgpI1JXl+0k27NhycC0YZwilPsPm6ojBsH11wsj6M1bDUnQ\n8g0Vd9Etywut2MC0vD8x95x1N0doFg0Py5iw60/MApF2qhXTNOXwRAtHNrn1\nfHmYXzs8c07N0mbY/wzxmBfJiUtZZrbJteTKkmLOnzhrlElSK5CLysvHJ1F+\nFxXJ98shbruiWSYEck4g+/vVLBUi7m1xOPtvPAj0YTbYfu/wKD8NbeHvFhW3\n+ZQ9\r\n=6las\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.cc5377458.0","@material/rtl":"13.0.0-canary.cc5377458.0","@material/base":"13.0.0-canary.cc5377458.0","@material/list":"13.0.0-canary.cc5377458.0","@material/shape":"13.0.0-canary.cc5377458.0","@material/theme":"13.0.0-canary.cc5377458.0","@material/ripple":"13.0.0-canary.cc5377458.0","@material/animation":"13.0.0-canary.cc5377458.0","@material/elevation":"13.0.0-canary.cc5377458.0","@material/typography":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.cc5377458.0_1627680893273_0.07568067185355609","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/drawer","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.a395972cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf98fe407a6dba4189a773dacb5da571ba119267","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.a395972cf.0.tgz","fileCount":48,"integrity":"sha512-yKY0IvqNJZSND4GFu1S/j4qZLCDA56KYZ8tTTPfYssD9Qii+1aBlma0LHjdjZAI7BuGDgkUp80OXKrmc/8pAjw==","signatures":[{"sig":"MEUCIQCdZSDFrtYLMeWtEXdS8uCRKe7xCdgcT6IfkOCAZSHJGwIgAdgpkFOJ6OobLrBnxzK/GJqQQcDPfHPkrhxvDAtPP2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbQnCRA9TVsSAnZWagAAmRAP+wWFjS7rlMgZMsPqdsad\noRX9xmIGPgGCkVu6rIIxWXhsMl+aSjalfR0UJPAoJSBr5ji99QY0zwpHASTW\nGjPM5QG6IoRUYJli0Jjh5sf4qYuPUW4sEPUGFBV8UVnRX3OnNYMbN9u0sPVY\nnYdF/DQwXq8uPE27st+5M4RjP6Fln6QvHg9+dDEVOhyjL67FwJ3eiTCSo71k\nVkDoFZwiggPR9ZJFNtrTR6cN/0bHyZghgxUlNkMt7UUzWxcN/KdDk07GanWg\nSBFiIIwPsMHvkVIxHILWWCh+oQ9SbvJ8fK2FjKIcxCPaQ0OLWFx95Nj7No7L\nyj0KvQxjedrhzFTiF0ny9NxiZrWj17Yw8ijx0Ykw9oj8cw3OB7lclESMhUfv\nU/Vzj5v3PKB0/v6bgCUfIL2DvMB8iWKcTNrhlCD0PD7yI80ebe2YsWCLa5ph\nh0tn1RG4Cpt+kau5SsxSDU9L9nWo1esSk3VSxcA+Q37LpX4p016L35YREqDz\nHzXv8CsvNZ4zqclGIVCjEb9dS5DX+WABc9OWX5Cu11I1r+c3kDP7WaIOOAtl\nYk6Lz2Oxm9EeWeAt7sdC7MTkJGbk8ITEiVT/kQhowXrT9oXC7IRrvC6RkNob\n46jt5Zh0B983rpaSSaYjRJiXUq2oSNfFlDWaaXXlC8TRE0oUrHMV6WsAl90C\nxRBA\r\n=2d1n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a395972cf.0","@material/rtl":"13.0.0-canary.a395972cf.0","@material/base":"13.0.0-canary.a395972cf.0","@material/list":"13.0.0-canary.a395972cf.0","@material/shape":"13.0.0-canary.a395972cf.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/ripple":"13.0.0-canary.a395972cf.0","@material/animation":"13.0.0-canary.a395972cf.0","@material/elevation":"13.0.0-canary.a395972cf.0","@material/typography":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.a395972cf.0_1628025895746_0.3097277409248349","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/drawer","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3801162a8a29522f157911b23c2518e4311a02ed","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.7c96e6b98.0.tgz","fileCount":48,"integrity":"sha512-U4NNr5Vf7ENJHSefrgVCnEcAVKhc6amxylYV/bdyK/xvsI0RBM8NKzuGbFp0dHZrJ7/Po3JUMpDzJVfdyMpQrg==","signatures":[{"sig":"MEQCIBzX78UhRT/RtYbb25TSNq2QPp2YHofihT+gmUmiZdV0AiBYbwxt2dWbYwMZDcyQKxU7P8KFiZM3C79XfwQB4svc5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987334,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb//CRA9TVsSAnZWagAA3WsQAJzm5mfUg9ycz0KcTgVM\n1RCOPI2sm9nktf+YK7cdqbcpPPhRqRwhRKnh1MIwpvcE5c67Gs8MObMI8Wva\nby5SHRRxT4wFX8snS7ln7k45hVOhCEs7dFENPEZQA7ARWzzvy0cxDQcMMbLR\nznOrnF6+55TQXLDq0SLq1zSYIk2YojdNrPvoAAu60UhcOGKaNG0yQ4cYUif5\nMViDdxKeznsPvjOQZHQ5kPtQPO/Mpt2VUpN8slE0ekBBv53bH5zEzGwEzpjB\nNkbJ1HOPDaHE+CnaWuzrq8j0kFOLq8abjg6e3s3cgionOe/fHgv/7N0Mkl6f\npklX3WPbZ9pW845EJ1V9o9+UD2isNjFavy+ECuu082jjy7B1jRqkukO2mueh\nNitvI/eAI8o4c1gpon4AkJ+g3Oh6DF/fQYyrk/7YEOWx685VLU6KKA2uZhZt\nBbwxt41MYBCf4vSru7ioFxu9g8xglfp6kE7usw3t8KuOl+govp7e/97yBCSj\nuUH9XuDYx/ApVroaJFTiiRYadov2LV5jQCZqYQ9OG2FYoI3yhOwZpaXRIulQ\nlbrZkqZBPlCaswRoEEhoXgB7RvcYG4rmtL2XWQ023b+U8p0DpGSKZfqkGKRf\n4u9vAl4isKwTKr3Kfy07OiB4SqO/BdZ6jQ237oXWPq94AziUKWc8pNHmaSu6\nYWud\r\n=iD37\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7c96e6b98.0","@material/rtl":"13.0.0-canary.7c96e6b98.0","@material/base":"13.0.0-canary.7c96e6b98.0","@material/list":"13.0.0-canary.7c96e6b98.0","@material/shape":"13.0.0-canary.7c96e6b98.0","@material/theme":"13.0.0-canary.7c96e6b98.0","@material/ripple":"13.0.0-canary.7c96e6b98.0","@material/animation":"13.0.0-canary.7c96e6b98.0","@material/elevation":"13.0.0-canary.7c96e6b98.0","@material/typography":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.7c96e6b98.0_1628028926912_0.3138388049829288","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/drawer","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"675e633949b135521d271f158babfae78b3ce628","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":48,"integrity":"sha512-HmoyHhzhtdS8HKN5GUuz/tF2JruTiuVv462t3eo1Sfm94LNaiu1aBptvb8QUoAefJ/I//bw/p9VCnV52REhAMg==","signatures":[{"sig":"MEQCIHt7rzybjf8nyuxbYMLjAiDapHH8XS7Suwa6wuxNOMYMAiBX/nZM/mb1XQ0vkLni4Dqmt9vq07TpN0/RzLIMuOs5Xg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCypQCRA9TVsSAnZWagAAQK4QAJdElFLySyIKdP08oji6\nnCRrQZWJ7ISGKGkrG3TeYvd70rjEFwBFWWZx3XHqkxefc/lZULxNS51mMNkV\n7DoRqISRNBExWKBU9uP8mTb7YPSSsPT4Z15Uf4rYSHz54MFkou2pvdPdUh6R\nD6T1oEzWyE7UuLc66oEAyOXgda7/WbDvuySppYwLOC5RJ2a7FhZRz+GqJ80/\n14egUAqZQO/CRVmXWtXlIItVH5kvDyahKrb2RVsVXsdjN9wDr0lS1I+e9ucW\ncxqL5QS9EiWgnCAyQF5LIzjNnDZCq5sWeNHmXHophjMQceCLQ1sY3hIekgtR\nVMWel56aBQdz1KW5A9/++yYOkafHGIXASTBsHnzq+CxNWgfqaSAibPswpw1/\nxbsYcqDYN37LUxp9ZnyeB2O4qCqgsP4M7LJVrVdd3Q8XBR18D42IvG2aTciP\nxNk71M/fRp7UmNrrJJt8vNv9cWknWp6W5ROkfHbWWhI0yf1NgdHgcjJgz30p\n4r9fdvZ9tVjPf2WxaXv4BnPv82MSjiJ/lC3Q+1EZzYSsCS64v0It312VTYll\nDS0PZFnqBco3sy1v31Ya893sKyqr6tPI0newkqNs89Xx28wilJZczHc4J28h\ndyJ/MmaceiOEGhwOMpEmg2JC0mG9JNNotRbwB5hZHJ0TpBCogNuXwOa13PBZ\nW/Wj\r\n=qt67\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a80c8b2c2.0","@material/rtl":"13.0.0-canary.a80c8b2c2.0","@material/base":"13.0.0-canary.a80c8b2c2.0","@material/list":"13.0.0-canary.a80c8b2c2.0","@material/shape":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/ripple":"13.0.0-canary.a80c8b2c2.0","@material/animation":"13.0.0-canary.a80c8b2c2.0","@material/elevation":"13.0.0-canary.a80c8b2c2.0","@material/typography":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.a80c8b2c2.0_1628121679927_0.06884265909267118","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/drawer","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.3dd611091.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e909f7eaf2a1f07506e9ea917151baf2ad5b67e3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.3dd611091.0.tgz","fileCount":48,"integrity":"sha512-jILBEXmzZQvhsUeQsl9uSgXrPSDr7evHXi9+c9e/wi9dRHiLKZBhFi/eLiPAmvd7Wn1Yno5ccvKqKXSrB3Wq1A==","signatures":[{"sig":"MEQCIHOsFI+wTvcrarVNMxtD6b9v3+V8oPKAeW3LgsZByKLrAiBYsvpFvUB84sx0d/AgITQJdOqNO0oZy9HZ1UO1k/zX6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2HNCRA9TVsSAnZWagAAC1UP/isrKaIa6m+AafFi+RQp\npiuSYhem+H3LMprIcnjn1jJEvKYgc+wQBlSbefUlpGgoSuEA1IW1nrnJKNVt\n7TrAN/JrleIld+g6THKuRIHeONxJCw72QPONuoe0aaeG1Zvt0IzJdEJwFAT7\nEGdDyxP9ezudEzZbqYLgGAuF5PREwJms9+DOfpON7Mnd+Vg4T7W5ztBBMtEb\nr3XI7RXZgvx4S/5wycC427Knvn+abqogb0TJv3DSMZu5cFNDUJq8cLebJHTf\nXvjSx/ojp6XGhFvHVp/zjnzk2PEgTeijvM+8SLCgtm/N60MxODHwVFfyE6Mm\n1cWp80XH8vMFS7KM0/Hmz75v83Pmnft3GuEmxNWihCAAJPsPH+HNhN5ngybE\nbJmz0i3oNj5+QQ/fyoXJEump6P+Wd6Typgr0BIGYKNF6oAXixbcg3GWOlFPR\n8Va7coDz3N3IdbcZ8JUoWFCqpax5S42/vOYJbBsVfo/r9wZbNkNtidgn4PNc\nlG0SdrkeQrZpJPSedb271HsAl277HC8hoYxbkJ5RJ9++ojr49tHXOjs4PFkJ\nRmbg68oz6BW+dyKAhPfN/0CNo7XWCLvmN0HbLL6yFdRtS3MhfFy9DvDK0igT\nCbasVvUp18t+WXkMWUucspY2hZBkBS6IOxZse1ml3DTVfXBKRn7bJwsydqXZ\n2Mu7\r\n=/cP1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3dd611091.0","@material/rtl":"13.0.0-canary.3dd611091.0","@material/base":"13.0.0-canary.3dd611091.0","@material/list":"13.0.0-canary.3dd611091.0","@material/shape":"13.0.0-canary.3dd611091.0","@material/theme":"13.0.0-canary.3dd611091.0","@material/ripple":"13.0.0-canary.3dd611091.0","@material/animation":"13.0.0-canary.3dd611091.0","@material/elevation":"13.0.0-canary.3dd611091.0","@material/typography":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.3dd611091.0_1628135885686_0.9789927619806968","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/drawer","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18282b8d5ec3a025055b76b64ffce421e0e837c6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.5dee37ff6.0.tgz","fileCount":48,"integrity":"sha512-LaLWmoZsiYHyyPTkCIo0P+U+7PK6B2UyezGApTw/nrS0odkH2tWE3cu9laKTdldmjKci7HxNt25yodwLJIvXxQ==","signatures":[{"sig":"MEQCIAjWqkdDQtaefxeoZGKC0vAOsM13F3DBGV/8ommzvDmTAiA7U2ZoEjmvHt9iADvoWC6WUD5JsBRnkZqtY+VcxvStyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCNZCRA9TVsSAnZWagAAuRsP/Arqejc2SmAdRXi4v4Cw\nha/Mda/dA6XQ3sRULlNjgbuut4UGbYLYlcTmLtTsVGt8Lf86kRBsdxpn2OrK\nyGS+stVEjB8HVN/OTWZqc6Lw5KgZsu6GWCgIuYaFtpWvm579IsUeC7HFSnM4\nk/VNLkJcaGwRi5y6ScvcbbGdWfeNLQVE93kDJmUuFT+qkNwo4flyfIo0BzbY\nIUhqd2jcnGhQ1yexTKM8VPPIj4SLDmFsy91vuNLqhOhC2oJ5u8yccmZn5fYd\nGoX52AfJOkf45ZzSfiyP8n8SBN7rZ10gf9mOWvlUOhm6QxGiv9bIKCVJ4BJp\n/vGjRldx+oMTt6svnA+dbpRaUu6FuPRRTJfUijvSMNAcoFpB6f38ibeA0oXj\nBZZhI25JWim9v0+vyNnt/KU90ZafNBiMBDu4ME7h/iYWNlyspow8Ro4bWPV7\nusu2/8/2k2xkWvPipN6W2Pxk7saiFEwpfq6SivX9maOY9b3hwXQEHGoDPode\nmxm8kKqaxfN669Kymkmc8L6HVVP/lZjBpeFpTXY7aSQiq1EGQ7Z9DqpsuyHS\nmMsSWDGUkXG37i+JTWNNzaVPzeNYbXKI+cCJEJ/CNbCRpEZ8/w4RoeF6NVZ+\nRtz9AIzwD1MU+zBWdXpJNzW2a/A5D40HTmHS3YCS+V7CB2NOZNn/w8+lQKE4\n0LGS\r\n=Et80\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5dee37ff6.0","@material/rtl":"13.0.0-canary.5dee37ff6.0","@material/base":"13.0.0-canary.5dee37ff6.0","@material/list":"13.0.0-canary.5dee37ff6.0","@material/shape":"13.0.0-canary.5dee37ff6.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/ripple":"13.0.0-canary.5dee37ff6.0","@material/animation":"13.0.0-canary.5dee37ff6.0","@material/elevation":"13.0.0-canary.5dee37ff6.0","@material/typography":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.5dee37ff6.0_1628185433445_0.02725431033704373","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/drawer","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c1a4fc7090e2b922daf0daa32ec533f1defebb4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.bf405d22a.0.tgz","fileCount":48,"integrity":"sha512-CbFXd3sdrLBzdX3jVcxUYTqdyY1uBiNEJQ4BdaNHCLM5tDWzO7+RJzsUTn/9tHW65w3nI/7EV99AnFV0Hfa3rA==","signatures":[{"sig":"MEUCIHrXB+L0KprhRNK7khLms+Be3UuCVtawqs8oWJ3jIRC+AiEAuUWeXcjFifuALYp6WFgz54fsBf9+eeucoQ4GY94mCfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEflCRA9TVsSAnZWagAAL7oP/i1GWq/PgbBotjaHoU+0\n/NIP+wiv1OiCefGaH2cudstvvvCauH28L/W2RYmo+ae5WBrKR/7ygtt5BPvO\nImq/VrYoeuwBNBBL5/A4ogVfD7iZWO2q/0315zV9ehPPoDXaPeTP3NTy/tQ4\n2VY/+b4WCUKfPGlIjug7+mzZZyYa5kjIX7lIimIWPt9bmWlnb/UbLMCfUaJe\nTAz8mDiz2thF4aMgRcaONBtOhKz1GzT+KUivJ5+qmdq8kSO5ft25VjoN5ddM\ngS6dKB84bFkieuoxgeGze5V4mC0XHW71k9c9Whlcx2j3IBQZbxH2pe77+KDV\nY57T9f/9e4shnDkr1yf67S0DXeugbLrJ6qI+CIIYwJ5WJcEhC0vP/RfCq1P3\nnBY7rH6qSw1fuuAarLdWaj6MnFPnGONjchD6nHE3V1Ekx9tcxbWJKXQMfw7E\n83fQisdwlAZWFCcfoNmjPg8+n+AHSJfxJnU4WskBPsXLc7KXp8rVnuHRIKb7\ns7/W+J96F5ldD6pUyNEa8xrLTwq6XEhxAmpP/SbLw181WCYeGFudSZWa/ITX\nZzwZZtO9GLxdLZMirqGtLKbcYAiy/HGolc2wW6PLOqwPXzwNDZucgdDqhXsM\nlVgVL37LNJO1YylvrILaw9zY1hNoC2rhfnzENEx3EcAYOgTy+miR1idvdohm\nJYAC\r\n=XSyk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","types":"dist/mdc.drawer.d.ts","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.bf405d22a.0","@material/rtl":"13.0.0-canary.bf405d22a.0","@material/base":"13.0.0-canary.bf405d22a.0","@material/list":"13.0.0-canary.bf405d22a.0","@material/shape":"13.0.0-canary.bf405d22a.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/ripple":"13.0.0-canary.bf405d22a.0","@material/animation":"13.0.0-canary.bf405d22a.0","@material/elevation":"13.0.0-canary.bf405d22a.0","@material/typography":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.bf405d22a.0_1628194789279_0.18573571308804593","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/drawer","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3e4837269ab55f99b0000ffe5b813c3ddbaa28c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.b47dd37a6.0.tgz","fileCount":47,"integrity":"sha512-fbc8D44QKMfCrWN15Px+nlfAPg+JF4Kn0+PogF2OTy9fHUNTBKZfEAjUZkwH0RurWne9ahQzWifXLDbFThRWdw==","signatures":[{"sig":"MEUCIQDV//G75rXvVtaG7UO6t6b6i8xs5B01poOEnhJ9iFxX0AIgPeGg5ltnKNPDl9AZ2ykz/L4qkm7/QuPLBo7DpLAtuqI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":971847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE9TCRA9TVsSAnZWagAA7EIQAKUFiNr6PMeXyRezwPuu\nkaBluqg2WLncSmIVRoim5ferPqLzpPP/RPKaSYqzpOPTRWGB37+0cRaOODQJ\nO81fAlPdP4N9hlxWsQ/bbk1vPwb4m1QOKF7t//Y3asbTAAMu7LtCB3efsVxJ\nMHoDf0DJOP36uWIAX/g9lrUNmyt9QLpww+dnaSjRjliZRDS4baHAqjob104i\n9mygZhcEtDXSdYM65idJvVd6Ewvsv2A6f50bTV2p0GpqBjx9gRcFnnGSKi8r\nsBdHnMbAgEN4whtSpNcx4A4u0Y6FJRtJ4kZjYEUGwf2Notbqu8V6k4H+pgHQ\nStIDpky3I9NUI3NTXqyhNmjEhGs5AUpU8k8MTtmokiSpT+WsPyo9BMpnSlCo\naz/Xh5BWp3cl6bLpg25wcfeEMzhYFCMIQe/9d3Uwqu2iH2WVi40yB5qP929i\nOuwt5EeWyT8+RmOgJpfXlCSqE9kEw3maoV11dwuZdnkujrnF+oArqJ+Wc2uT\nQtTxBT4a+nDLzLG9fxecineCIR7N1aR2rfL4jqRCihD+tLM330qUCr3K3N/K\nfxOPG9nriaMq0Ua5Ks0fNj8KPLlT6FzT2231ZG+58d9EvAt4gBJ4thFQCYot\nXipMNg9FR+8W1K2RaYQvZB1zBehdp1sCV2u2vnSQA+o0DJ35ph0KXS0FI61Q\nWR+6\r\n=VTqJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b47dd37a6.0","@material/rtl":"13.0.0-canary.b47dd37a6.0","@material/base":"13.0.0-canary.b47dd37a6.0","@material/list":"13.0.0-canary.b47dd37a6.0","@material/shape":"13.0.0-canary.b47dd37a6.0","@material/theme":"13.0.0-canary.b47dd37a6.0","@material/ripple":"13.0.0-canary.b47dd37a6.0","@material/animation":"13.0.0-canary.b47dd37a6.0","@material/elevation":"13.0.0-canary.b47dd37a6.0","@material/typography":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.b47dd37a6.0_1628196690963_0.8945021600995622","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/drawer","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1560456556ead66db2b4797ecde5db046327547f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.6c82b965b.0.tgz","fileCount":47,"integrity":"sha512-FhJC3jiRGr2l1sYfY3NS5RJeArYvN7P86ij/dj8GyXBcMTzJ6kjt8L8Va0RjpAkng1ZjJhSs2DlW4yfaRoDsBw==","signatures":[{"sig":"MEYCIQDbnqlNk2ZMNee0HlRdGzDkli/L6qp4q2UyJo+f50BhaQIhAMT4w4UYRmnLM6dHLBKWZCw1LSvHHVo99ZdOJBFq2yWJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":971847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWBYCRA9TVsSAnZWagAAnwAP/jSAxGzbMjVmjVCAtPRP\njl8WRHOw3I4GYYg9lhKfljL6r8SxzQizySEOWqaf9ZfLTEAgIZ4vsoRj/dxg\nEFUimD3N4eeE8beQ6iZviUTXJsm4MRI9ADQUy/1KdYwtR25A2UsVLej0qP4b\nkrhGchByi4idpN5P7AKrA4/P9PYWv0QqF5vutXQp0hq+CVgk4ZY4TuNbdi6J\n0u+uzksyWP39JuJBYsul5GYEcstTYi9ctBlLUE2DEhlKhvvK6GLiTXJg84Uy\nQNwYhRo0JSFtWpSG4ScGdLBPgPix8bJtDT6K7cxPqVRqLNyxhDkTYP54ymrE\n7PmXG6pNyyvz/meAyeONIH9iF80iDVN8ScFfGLjw+fvZmXXJtMESZy7YPS52\n7gAnryno9g9JZNYuWftROJdDBKI5k9Epfru2tvduCHp9vMRop945KCB1g4jE\nDGrggy+0CPPr973llB1MDpnGWXvB/JcHl2mO/TYwfTRnlEbx1gKWWAIA2Ohd\nv8BMyTB+35pSfYEJgm/GGreJDiYvayTi2IxxiTtKIHf8YM/qc3OtCEPTtQUB\nxl0Ojd1EQqLyUtguixMsiUMNXurBrQh0AEzQaPnGEPga7O4GtAL4jabpfXfN\n76m97m1iwSqoxnNAs6u88NxVdn+2yS9HzHgW5lNVoZaqOVuSLg4l0NSnvLhn\nt0Ei\r\n=j+qZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6c82b965b.0","@material/rtl":"13.0.0-canary.6c82b965b.0","@material/base":"13.0.0-canary.6c82b965b.0","@material/list":"13.0.0-canary.6c82b965b.0","@material/shape":"13.0.0-canary.6c82b965b.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/ripple":"13.0.0-canary.6c82b965b.0","@material/animation":"13.0.0-canary.6c82b965b.0","@material/elevation":"13.0.0-canary.6c82b965b.0","@material/typography":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.6c82b965b.0_1628266584481_0.47063545702190734","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/drawer","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8727d41a6bd96435938f1b4167126ce044f8b2c4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.4ca11fe76.0.tgz","fileCount":47,"integrity":"sha512-J/Rd7OKKMsqq6KBQ4reesTstsJtO7UQP3e9o6f837u57qKUq3a+7CPZKE5b6Cw7jiRYtYzSsaEeOyIV35Zi9Cw==","signatures":[{"sig":"MEUCIF78CyWkpQlCJF24cmHTRzhopuyWawCyVKe1irRqGB0EAiEAzW82w3S4rbq1md7Wcrunl6iHr7EmS7qYl2hnLFt8HVc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":971847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWyyCRA9TVsSAnZWagAAwHEP+wdF1R/58uxZDAagGlN6\nDnGRtDejGmVoCOuYhlFS83AsSfxBSn9VLhDHO5IPBOG+TNdNfDMCiY1RgcN5\nH7HuRPJJ6pUSEp8ZGWgi2XzX+W9t8QuwQK97Vb5tmpCZ3LVoAmxePsMP6gBp\n9cFuDvef/MON3dQOPerOy5PpJLFszrFVHbxiVj/+CXxHGro8NOI8c7kN0FAl\nVzZOSSpl+fmVYoL2rfdMT5EKyhX6t2px1TYyWnsbQLyqEtmC2jj8+phyDuwZ\nBAB222ao8rHEDtwiMD2YQvWwUnixjCcpCbtXHscwU5R8Xk/Dlns1Zub2dwaZ\nKBCSYO1ZmtNEP6Zbc65V3iz65GTSWrJpe+jUxTfvNISfC8SrPGv1rE7i1v9P\nac8FcePsnFKmIFcqTA+CXN+0cEZp5DdVxOaMnTIiUutxwYbOUsvE+CauTksn\nMMl1GAXh6oWD6VPLi3wsuYjtQ459Krb6K+7itzhd0JyLiCDRVG41pKg2nLRV\n5El1uLnEySyy0tSLUuz1b+O1Fv06U70xXPv5gKJ/QlMd7/Ptt7Qxok9wYNMm\nY7f4lUecnCJWeZllzEujVJu7/TpUqYHAY9XcC4FV3BdAnCZ+hch8jF85uwv8\nkjI9p8pPQINRQsei15DTicfb35uI0orOtxOL30Gzz9lFI7dkJluL6TeKvM2L\nXI9j\r\n=bFXH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4ca11fe76.0","@material/rtl":"13.0.0-canary.4ca11fe76.0","@material/base":"13.0.0-canary.4ca11fe76.0","@material/list":"13.0.0-canary.4ca11fe76.0","@material/shape":"13.0.0-canary.4ca11fe76.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/ripple":"13.0.0-canary.4ca11fe76.0","@material/animation":"13.0.0-canary.4ca11fe76.0","@material/elevation":"13.0.0-canary.4ca11fe76.0","@material/typography":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.4ca11fe76.0_1628269746585_0.2656823200432943","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/drawer","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6a17dc008ff3785ee68f83f2fe4821e4328d1bf","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.510cf90f2.0.tgz","fileCount":47,"integrity":"sha512-JhnHtX8Cpx9hrVw1BRSiWunD7ZZ23vznKb9i8TnAFVBR7FRpvKj5xl0SMw/92yOtmNynkvtqwMw3ghn9jXTlsA==","signatures":[{"sig":"MEYCIQDk9/MTf9tmeVJ5gyG5k2JBmC9ViFG6vN3jGvrxObCkJwIhAPGWv5l+L+2DRvp7WxbAfjbe8DqUWqARYO0/bC6AdDCl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":971847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWN9CRA9TVsSAnZWagAAoL0P+wcVkWY0lV6EXfSy9wQZ\nRq3lCbWJalIA/xjucoyh3A5W4JUy5h7zFOPX1vuoElxG5sEjjqs5Yir6gGpR\nvSFM04Q3cKN4nMR2FRwmPqwXzRwNGZURinzvAf0AhXGj+LRblw1jsxs2i76x\n6lFAjot96hVtGQ+WEf9cMrYONNwZzFGvtdy+5cyOiYO8QiakGeZqwxKDCHbf\nF+BnesTprYvw7tEQa3mmjQ9MkeXccJpXb3q+bOn2/BduVcQrcIbHtlD5lEgX\neGavA/6uRdsRXlELVXQSqf9SIxIgDksO4m2NNURbz8dDIFabGG3R8dFBVvGl\nLhjblPOtwnfND7JvCJVgUrMnlGY903ziZvVH40TUQebdZJ7ZdbfnpZTBIWGh\n96kZtnu2FQIVUOSIBQrYTHJqTvuMFqaMHT0yYVie3Xxiot9m6+NlGV0IWeqd\nT1pUqT7o8JRwDiCY0xGql/BUEsaZHWCr0hD1XcAd55oxx0ZuRONpS4eb/UFn\nT6QPKc6Yc9ZdvtABtGI1RIm1CB0fw1xkSXO5JpbTjz+6AtA12mQhBekkNvAR\nsGbML6FZPDIRH3yM6av6vYAwPX59lri77mn5CpeJcSHOVG/wbMpxsGKF3krp\n5V8W3T8Hy1konQBXLb42aIPVS1G5NZwEn4Z9lKPP7Y9/v2eNcLJumdYmcMtS\n3boF\r\n=UTwV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.510cf90f2.0","@material/rtl":"13.0.0-canary.510cf90f2.0","@material/base":"13.0.0-canary.510cf90f2.0","@material/list":"13.0.0-canary.510cf90f2.0","@material/shape":"13.0.0-canary.510cf90f2.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/ripple":"13.0.0-canary.510cf90f2.0","@material/animation":"13.0.0-canary.510cf90f2.0","@material/elevation":"13.0.0-canary.510cf90f2.0","@material/typography":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.510cf90f2.0_1628529533151_0.17125938576149746","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/drawer","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d3d27b098b32949122ea57a9d366681138cea5d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.17580ebf7.0.tgz","fileCount":47,"integrity":"sha512-gkLAHMo62x3lsLnrwZdSVNIt+U3oiQUkNGtGohaI5eeVr32ijDTX5wfxR4mHtUYUTLcVg4GdxrUrBDcxPsKDKg==","signatures":[{"sig":"MEUCIQDzQ76SeTsDtQ/Un+oltjCiOYNyyh/ZyHBsQeV4MQP8kQIgLfv6coNYynMxYhPxiP2ta2E76pzpm3e5HMv1hVAzSYw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":971847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXGgCRA9TVsSAnZWagAAZcwP/3JhxyiceBJ1aMw4y5Vc\n9fueTj0VXs52kjhVs9nCr8xLpMcwU8EKPANoeYFdXBSVjHZGVFbXhvn3dIP1\nR+zydRmkxF00yJLIum+M4gEM+dl8dtkGmi4xMtSMk0PgW70ksVBd5isd5sUt\nM8fC/qy1sEnSn2jCQ7oCOcI0nV2taR76/8b8EjGM79PuwYyms/qt7Dh+wbkk\nxx2pxvOBi3SPAIXTem43/5DExZC9rxUWDcnXqAsnIi9yxJ8YMl3qB+s4xjiA\nx2W05vr0v8V+ztVXeruok75aFodKcKmScPjzbsABhXg9AVbr56R0CMq7AGiR\n0O2KjIvAStmW0+dF9MedzEwekO0XG7dGVdBHMOQyX4Y5kLmyRQjTccPjc5xx\nAIawyt/x0+CBonyLg5i7JA38KIcuJITarrgdx3rNS+Py/ecJnyo+jMp/xtmD\n0DM/ZmAJJWFI5NZnfItjNtCusLazDPnLGf7ag7keHbixWB3kN25KfQ5zYpUo\nijZVRysg0tTXo7tuV7KF3Lop639lF7y52T8hex5CbH37XZO40YMt+/7e8yk9\nRnJf0jLDzunFQ4maIJfZcNEFYT9niwLRX+qjioVKxlwFB3QsMAwPbPiJ6Elm\n532qSb9R+IAye3K8hiHFaWBJJKNlekMf0fsF5+aVJnJzp+bOe4vFWdn/iPeX\nPU6+\r\n=F80Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.17580ebf7.0","@material/rtl":"13.0.0-canary.17580ebf7.0","@material/base":"13.0.0-canary.17580ebf7.0","@material/list":"13.0.0-canary.17580ebf7.0","@material/shape":"13.0.0-canary.17580ebf7.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/ripple":"13.0.0-canary.17580ebf7.0","@material/animation":"13.0.0-canary.17580ebf7.0","@material/elevation":"13.0.0-canary.17580ebf7.0","@material/typography":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.17580ebf7.0_1628533152392_0.49935480144092614","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/drawer","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.7249a3060.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f4a7c0ba13b92bba4f61066672cf713886c9011","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.7249a3060.0.tgz","fileCount":47,"integrity":"sha512-9WGD2qEDh3QDvvKluouznniyTDN+tKdbetGH4pzz8PE/UlDDFp++wuM5w9BMN0ump1Mo4631zChEi/JRSrn5Tg==","signatures":[{"sig":"MEUCIE9OsVQoF5Xe1l7jVKg8SgQKfzwcpcJ0UD29tLA2kRKKAiEAz4iEpfM4WDa0UKapBabt5gGQRCpTUc9954iHt3N5Vhc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":971847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXKQCRA9TVsSAnZWagAAQNkP/18bSKX145d4gHmjYquQ\nGpHH0FSkblpwBldo/roihgqMubVQBJw169rToRPVgHZF0wc+d84p7bfYeDLX\nVp42LK6mwYAQpBdzyjp4wZTRdFt6J97QJUucsExiKk1+6n4QaOYO8zZd8wwv\nMw6eNk3pwJW5RI6zlMubrJg1OOX00DNxSEXRo4ixeqzSW1ZPAJJF8UUjiW1G\nqy9PGgPmHtVUDULfir2RieflzXBV8pzKuFD4Fax1xC3BHVJBNJF33w2a0wIQ\nxq5wPteiwCnY958vV9cd8OYBvMFa5iPZxGr9uBlIiT5/AYQuwzXellJfCAGh\nAjD2e/vVIxGqtZAl80kfC+Q2dZKWaIaEwHXTYBgFvHeYYb3++E3VNAhR6l1o\nDB7utOOHl6WSi0UBN/IlYNCKuJuJwRrqcwsw1ZYVMzjSln1LmUz6UzVHwLYy\ntvEhki4KJRD0U8esQe9sSmCvEXnQhkkGFj7Jf/yqh4ozbdLaV25+F2I0+EKs\nWSEZK61S8GX1TrIyOgkn9fXgAI38GMGD+7EplQv7QC3mFutclPWdgLs0oBTb\nlszUxsiGN71/mjcHVqc4VOzBX8YJGfVLWkcdx505nf+4USxFF99Apf9jarJE\ndP/sukpMeyx2e9egtQ39Woz1Io0ZwVCCoRjhv+Y1Fgwc+6mo3AFzOzDaacuS\nHnaG\r\n=a6yK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7249a3060.0","@material/rtl":"13.0.0-canary.7249a3060.0","@material/base":"13.0.0-canary.7249a3060.0","@material/list":"13.0.0-canary.7249a3060.0","@material/shape":"13.0.0-canary.7249a3060.0","@material/theme":"13.0.0-canary.7249a3060.0","@material/ripple":"13.0.0-canary.7249a3060.0","@material/animation":"13.0.0-canary.7249a3060.0","@material/elevation":"13.0.0-canary.7249a3060.0","@material/typography":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.7249a3060.0_1628533392054_0.6578301573182854","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/drawer","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.4c405863b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14ada0f98ec4fdac79ea95c1897e3b7dc784122b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.4c405863b.0.tgz","fileCount":47,"integrity":"sha512-mEPtwUk+t4PTDlD6aFeTW9cGyX8ypYlEfGHzcJsJ7TDxwxV45otdSYPTVIk2ja7lXUmgY+24+JQs/J4Avr7Fkw==","signatures":[{"sig":"MEYCIQCpGy/LyYn55+bEXmbeTpUQyvKdI+2B8E+okjqayRc8cgIhAOw8DM6ngw24T/2tF7Ypu7OSu1HhbGgn2esp4Eo7aoe+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":971847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErp/CRA9TVsSAnZWagAA7lcP/i+j3zKNV5KxCMOHEZk/\nmfEz/JuuorzR6L63uFL0yclZHNhxxmPCBk0MhEKJyR/5j8u3lueMeeoTyFSa\n/5D+Z1T1zvTg4TybuhltYSuihDBE4dgirEntU7X4fcwVJfOUSUYjpU44HOL9\n13t3WtA+DV/m3rUNJalY+x/c03sIVwqzPZSNEZBstTFQyRlTWHqfmXzm0pSQ\nMA6pXOHVB+OJ+3QHadxvta5sVvuivw3R+t367YUzYhZ3yyfsQCXbNzag23NH\njUFFYuXB/uHFa12lxXIru5/A38SQYuA4E3LtHQUvpmXhMuF5p8LACMd8QI8E\n6yZV7hpVdwfyWLrQtA1Vc2zKi9mdrykkN6bZsQ2NVa8tpcGOeHAXBHe6whem\nq2F8rcGmgW3xWcaNE+pglyx0kud30CuXg2oEZMdwGHv34zZ+Qy6Bzi40fJFt\ncutnI7qUC3l3FqbYvpIz1Mm5nhyeTbHClJVW3Uo44tX+8sV36dx5zIDSc6ss\npOTaP4oFbgliw9NzpQHX3a8zicfaipKxPt2NYRjyiPWgGJ/thyQMNGMPjQz/\nS+cg7sBrhqvVM09Ro7ivkXG+aLtWYtXfCWESyfuA/V4WAIjSx5I3FkZ2WAft\n+eXqYV9WNGtxNpDsPmpL9iK7RSoIa6nf0jKoDYlTLki4y7jTpYz+wAR4CPIo\nO44D\r\n=e4BZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4c405863b.0","@material/rtl":"13.0.0-canary.4c405863b.0","@material/base":"13.0.0-canary.4c405863b.0","@material/list":"13.0.0-canary.4c405863b.0","@material/shape":"13.0.0-canary.4c405863b.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/ripple":"13.0.0-canary.4c405863b.0","@material/animation":"13.0.0-canary.4c405863b.0","@material/elevation":"13.0.0-canary.4c405863b.0","@material/typography":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.4c405863b.0_1628617343733_0.3870537957480913","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/drawer","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"306fcf9749539609e4153291cc5b3dd83a1d8218","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.f4241a42a.0.tgz","fileCount":47,"integrity":"sha512-jlOCciFywRdaxlMu1bWjRki+LekwUxfY/b/xr0x/VAfpkz4BiFot5oXmHcv6OHARl7MHin2XDcFv5YH0maFc7A==","signatures":[{"sig":"MEUCIQD7HQxVk0BQnRJA1OCbp4fFchxpnN+O8NFiKgUd9wNSpgIgUQeMD9OsSIVgs6G/UkyGhF0Nxbj909+lZUzro4c9T/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":971847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAJaCRA9TVsSAnZWagAAaQgP/R9jn59gbniIBPyTA3ft\nXbBuXnFb+wUw/i9EQBVE0f3kU4xOODGZIvN3nTDFlRdYgDylRizc4dZnY+eS\nvo0f8arfMljwiDBBnFRUI71Mxn/85ZtlJvbiDUJL//NRZMLjEJ9U+UqfWZyz\nwCEaVpBE5ElPe+ZhDJpfz0PHNuDxD/zbS4BE4lZ9jdZK4olmjoIZx1+F1FOW\nlO65D2+0hVGw0yHt1tHWIpBuFlUW8ncq5NAO/kjaDheWkAdSaM4lECQXbDh9\nAkg7DdoWkkDSV3zVoyv7brTshxRITHXnCHvLmr6TGrfxtoXBapTf6TbSzqpv\nGwT9eJjIWtSLPwCHUUOMSK1/wdu6SLk2yZJoHe/hhNBVPESV5AXmYl3v2QhQ\nF6FjOpjmwxkPkmlG476kzDsKnM2ZY0JipFwie7THgg5N2Upyafv+qeobw54a\nI9EswlHb1w/mWIzDqBzHGE5I7CygboWwzomvv+TomRqoZJXBAA+e9LMt7Qp7\nta3Sj+UGSoZSFU1kHFzVQXSfFzym2MXKJUBzDNK6N+TFJ0K1wEnV7VGtmTJB\nXtAt9cxzbttHs1k50nDR0AIjNUqpvzyY5c4HkSv1ZZASgnx0UNwR+tyneSp3\nlpb9U+eRCuZ5v/clB5O/noHwqLXg3RQvxz7gU+aF3HyGWZ+mEnfFVjSiR99M\nvQLO\r\n=gn0o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f4241a42a.0","@material/rtl":"13.0.0-canary.f4241a42a.0","@material/base":"13.0.0-canary.f4241a42a.0","@material/list":"13.0.0-canary.f4241a42a.0","@material/shape":"13.0.0-canary.f4241a42a.0","@material/theme":"13.0.0-canary.f4241a42a.0","@material/ripple":"13.0.0-canary.f4241a42a.0","@material/animation":"13.0.0-canary.f4241a42a.0","@material/elevation":"13.0.0-canary.f4241a42a.0","@material/typography":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.f4241a42a.0_1628701273904_0.264201261820169","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/drawer","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2091ad0819a7d952dec5911deec00d22cce690c7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":47,"integrity":"sha512-QWbF2RrS6tXkK5ulx6MEPPJG8TgxuDUknwgWTx/rjjPHIZkTLs6L7UoQjLKMD18qAFYfiMnLrVlAg+y3p3IcuA==","signatures":[{"sig":"MEYCIQCG5Pk7Sr/Y7yK2+Ac+szL1Eg2gU1niR0ugfs1yVen9iwIhAOLk0vg8v5qD3FErFCPqAdYOsnnLVXxOroY3lNRFhQfQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEFtCRA9TVsSAnZWagAADKUP/1E4gPP8C4z5Gmje2bA+\n3E8Or1DQqQ52w+YW4L/3btDlht1cJtskuK8vIGLW2zUE6x7jw5tSXjiGyI1V\nBramQ8oQdUNF0LddW++zMA2yazBUfDD9mhEHXgturHNIReHUnWnbkEABO0Kk\na9wZRix3Ztr7fVLJsKVKHQ17tSZWqKRPU3Jw5eI6l+L/Uib91wI9EljJpwcL\nMBRw0SrP8E18XIcOXcaUvwfUII32B9PnsmhnAzZIbvlIOU0F8DBpzSYJGPjI\nIKqdnF9+UIm+nOX3G9NRwLKGXxKTx0d9t1V3NagZH8K8EMA1OywYZ1AmKR/u\njaP9CN5fPTOr6naCvdn7tviXnenETYZeNaX7oC8x93EVtxe57o3b/pVuC4Jb\nkhYfJSMvFmC6jppHV+vWPh7y+pG7w5vriTMu0w5cHrjXaOzlp+VfJeHnkXDl\nyCl/zUYkSg1q0wJ+Q+C2MxmdiH+7PsREgV8kEl/GjqqLBnck/Ar+zpKZDvIO\nYtPSYNpJ0ll3AXsEeuqP6lm9XIefRCa6uiOUHoA6ISXUH1OMyD15z6sMG2rU\n4EusDwjwFktLjh++IzoZ0siDT3fPVLSERVaLr/UvLz8Shx2qdQA1xLGj7Rpo\n3l2EeZvc9wD7WRU1p0E7g3igl5NEyroyZ9dWe+vW0PlYd2IHdDKxY6CNyRhi\nqF2l\r\n=hhq2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0ad12ed3c.0","@material/rtl":"13.0.0-canary.0ad12ed3c.0","@material/base":"13.0.0-canary.0ad12ed3c.0","@material/list":"13.0.0-canary.0ad12ed3c.0","@material/shape":"13.0.0-canary.0ad12ed3c.0","@material/theme":"13.0.0-canary.0ad12ed3c.0","@material/ripple":"13.0.0-canary.0ad12ed3c.0","@material/animation":"13.0.0-canary.0ad12ed3c.0","@material/elevation":"13.0.0-canary.0ad12ed3c.0","@material/typography":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.0ad12ed3c.0_1628717421478_0.3769260829329708","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/drawer","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6474d2887afd803adab9b28421ec8f42009c2531","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.077dcfcfe.0.tgz","fileCount":47,"integrity":"sha512-S01qDC5AwYnQhDrhq0P4gnLVPnkQPdUL7AMFUl33HgbE51Rg4iRZaWzleUGe4X8n3mlMqOCuIz/KuIKPLipbcA==","signatures":[{"sig":"MEUCIQDsN4/eH3Fz0Tnpo+BamMvHtxmrQ5j1kiLm3Gt0tjp4+QIgCSUartS5Ca4NZwLvLDU5Owl8Vv8QBTGR9PjQTltQBPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWDwCRA9TVsSAnZWagAA8NoP/jG3uuKujHDRbFADDcl4\na8ndBM9qyGSo7a0Nw2KRHqbXF6kgmlNWPFungqWJqPvF28kD5UYIuTrMBxJz\nL9ahkBRvQo4r2s2W10QCDxucZ9MvEcjVARrJOKaF2b0r2pkFwjU8xSeDF9/U\nGQ4pBe9QS2Od+rwichzb5x517qpTbH3NNxE/613q2+xoLqBUYA/O+fR+K/0z\nHQxpkBYLkioEWKdhIF8xB6fa4Jagn0ckM66bvsDjmNn6p0f88mDdpX8jqAne\n1+f+fO//w15DEXb2eal8Z4KNtjRMRXUOd8unkalxc0+5epUYD2P6et1cz2rG\nMmJmjo3QxXjlthnajRHLUsafY6h7GorJjLbXw99zVeaLKY6w4yTJ09q/Pkqk\nSK2vpcf070fiBqAkWyRmmI/RImRTyumAx2R5CoLceoTxUWn4uezUib92eGdH\nuhpYeCwnmZ5uBppLSxuYXWo8WwrZTKTsAgEhUknBz6n9ZqBoGmlieud2a9CB\nFUlmWPzsyKzBFg2eIjY6USaNPCiHsnM/EKZHy+GShcGJVnHJfs//vtre7lW5\nQLHLi2Nkj6vwUxLz1969XBTU4SaZdVyfprCk0uCel5rucpCwKm/Nd+DjKc0p\ntlBQeDGX/OyIJIa0eSkp6zB8TFQ30lT5GU35wiTQ9PXb377///R8oYZ9O9I7\n2QGA\r\n=9yPA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.077dcfcfe.0","@material/rtl":"13.0.0-canary.077dcfcfe.0","@material/base":"13.0.0-canary.077dcfcfe.0","@material/list":"13.0.0-canary.077dcfcfe.0","@material/shape":"13.0.0-canary.077dcfcfe.0","@material/theme":"13.0.0-canary.077dcfcfe.0","@material/ripple":"13.0.0-canary.077dcfcfe.0","@material/animation":"13.0.0-canary.077dcfcfe.0","@material/elevation":"13.0.0-canary.077dcfcfe.0","@material/typography":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.077dcfcfe.0_1628791023828_0.6731631197295682","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/drawer","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.e3346766f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6b56f754d223c5c0f222ead831196020e201c96","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.e3346766f.0.tgz","fileCount":47,"integrity":"sha512-u0cMGS02taGf/zmdaZnQF6ljivNE2yz4R6ioMP/F++cyALJIub7/SHQ1xN9ygxYVuXwCXI7gpAXEi9rCseGGaA==","signatures":[{"sig":"MEYCIQCDF0ZS6d1rUHRidkUOiOfYvq4V+V83rxahnVxX8MDlwQIhAKmf7A1AJ1zb7w1Uj/KnhWSCtrc1J32uAMYePkXNqvvZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFswwCRA9TVsSAnZWagAAnG8P/0tsyN+5CtiafbEW97Af\nHIgns2pzPCF/LAlU8GkDNTcr0an66PGCPhaR8cu2lB50Cvy8vjiSGRxY584a\nUTa/Use4eP/Bt6JXSxo5zRQ+jfc/7w8pGPJksJFSM1OX893F15pQ+otLJPn9\nQnu70ji1OZI5rtIxTXTFl2wVzcAfXryrwLkD9Fhn1ttHfI6k8RweQGwcRt1y\n9ZbfctFv+ZfrWXK7IA4I0mVeuDuwThx1/t4akBBo/H2hu2DeXX7O+DE3488k\nXmCrcj3ciofbAkDYj9kvMllEcFwakLjuqxYkfcea/uqqCetVnRXGUkk1O3KQ\nuS357Z3jZ1eNDRMSMJozUA4d7lu3iTWa28suF7UYlPE6rXMe5IaeIpUZGwH5\n53ZK0SC7Ou7tZn9eBQVhOuKuSu5XJ4118Ac9ocxOvMvC5BGIpNWz6zsmaxJL\nLjySlXFmhklIfuR1963jbRAT+j7tvkUIwbi5u0V/qtTZ4w456cOItW/1L4fK\ndsNFw+5ZbimQBuqAmRIGm1EcdHu1UYIGWBB9X+PRX7s3HILpv3JhJ1pZTaBl\nrOKBvw8oAIYDuKrD6hVA22WKnpodt0JgtA6JSGWJEZFb4PgqskHExRP33NGc\nFZXv0jSLfFdIU/fTe2PBkSadwaYm361whlHbvBN4dXVlKEiWU+GaBYGQFwjY\nC6FV\r\n=Cw4T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e3346766f.0","@material/rtl":"13.0.0-canary.e3346766f.0","@material/base":"13.0.0-canary.e3346766f.0","@material/list":"13.0.0-canary.e3346766f.0","@material/shape":"13.0.0-canary.e3346766f.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/ripple":"13.0.0-canary.e3346766f.0","@material/animation":"13.0.0-canary.e3346766f.0","@material/elevation":"13.0.0-canary.e3346766f.0","@material/typography":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.e3346766f.0_1628884016676_0.20235648993630995","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/drawer","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcd7e9e69a8b842470740975c05af572dbf86c27","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.2fb068fb0.0.tgz","fileCount":47,"integrity":"sha512-kG0yZNJ3UYlecxBtFILcvZ4Wt9731C5LHZhslNDKyrUCkTZyU5wzGpIRI6M4b+2UFxYdB26WycKm7tIVibhbYA==","signatures":[{"sig":"MEUCIBZkDibIwjAXC+xua70xq4cHVX3bSdSvv6fhvSB/XYWKAiEAluscNkgpjvmLIRXkraEIPqHFfmqG3F7FGg+ooTQ3USU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFszxCRA9TVsSAnZWagAAProP/j+/2wH0E6s8eONzXW2b\nsikrMuEUWQbS5VZ37Jc/90q5mY357ULA0qndjs+p8GM3DwqbzH3/dxcUfQIc\nVHbiebBWAIPiADIiFeSiJ1TaGsfzVQhjMjFQH5shJ8qUS7NfT+IBrZARkhCw\n+8jfgJ9CWw5Ile/f8KVEcQw/VNsCYV66j65EId427MXCuiIfto0wbiRtqma1\noqSubSI22xiN0baTlNDSnLwMVnVIKSpLJhQWjdCnt2BznArTGhEMRqgBrQHb\nAa1asRESHeOjTInDeYwPszIPz4OcNQnhFWWQ1IfXfHTz2B/NPYIIhrXQBJSG\nyipdwKnW2MyfOb5OBCoVq8Xr85NbPILYA0bxhULAzJKCFGGxaI+80L9j3TN2\nxZZCL8Z5LchGsV7Y9OFs0u7ifHdsNIyFVfkgUFRQnfabEGOFnTwKgBmh3iW8\nBurjoAxNkI3wV4h+xLJv48421nxkhiscrmd/os+Dx/udkxxLjqUXhu6Q0oEc\n7u8R232yuDGas0f0O255MUHTzlPn4l/DCRlTO4w5H2FAmUzPTALw0UkJ6NLw\nqQ0yojxdjaxCn9droRRIiC4gb7/zzTeOofwyW6iOKlkDMocFSxpHI9N8DVoF\n7652IwfKVcuffSxFcx0mm6yqW/8yEvchLK8sEGT9YMX3dGLpE9P5CAe2n5tm\n78u9\r\n=d9c5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2fb068fb0.0","@material/rtl":"13.0.0-canary.2fb068fb0.0","@material/base":"13.0.0-canary.2fb068fb0.0","@material/list":"13.0.0-canary.2fb068fb0.0","@material/shape":"13.0.0-canary.2fb068fb0.0","@material/theme":"13.0.0-canary.2fb068fb0.0","@material/ripple":"13.0.0-canary.2fb068fb0.0","@material/animation":"13.0.0-canary.2fb068fb0.0","@material/elevation":"13.0.0-canary.2fb068fb0.0","@material/typography":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.2fb068fb0.0_1628884209238_0.2951992756822228","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/drawer","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88cf74e06f950a067bf9b0c9166806afb7e3ff69","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.fb76c5069.0.tgz","fileCount":47,"integrity":"sha512-Uc5OhA1hCbOAM1r+M+q6Z8pOOp1mQt1kae4ixr4/B1XQ2QtJMrQkQ8RjXtulVYyUKjLPx1FkkfPjeXujgKZtjg==","signatures":[{"sig":"MEUCIDlb1FDMgW6v2Qc2VPuZHJAEg8N4YdmPoQKh/zAU+x2LAiEAhasx4mPVdrnvh0i4Q6Eo0Yx84Y5EBoJlxAitpk4jhEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsYFCRA9TVsSAnZWagAAUhMP/Rk3tBzs4QBQ8ZVAAuyI\n4rXQoNDYYXn1bx2onCNwmty7lS9yStHPpRwc7mdZZonCA+vjfDWs+bb8WX3T\nMzSdHnbRKeGvOyQoGaQneXTRZfTRto70h3pKFwgWIfOz02bsnThuDq5zkGaV\n+4sHfzs5Pk15X3+6n9X3HGr3jbPf19kLipLzuFS9gIjN+EBKXZnEkFTWmSAj\nyd+R+kdDq8izpZb508vR2RGX8gsVGlhAAf0tavViEZ+E38nDr+YiYLhKF+5f\nULb8IAuBA2G0uXkfLy6y6THmVz+AUQ8tKjCPqf6AehOMNIf3xYPkECN23s/q\nV6mQZs1IKCnLLTZE2cFxKORKPx/ynqLO0+5481MLvwA/31mbXazJwbnHj6Z6\nbyU5r45MoATReaFOMo2LGkyZA7XpGCzQUnlZrjcHqGD3W2dJijpeu7b5gvxh\nzpnyz1W33KV9i5Y2h0tZOUihjcxLouI8hyv3Zp0LkleHj9yAbmq3T0huI/eo\noELGBbOZnhkmF/M07nKOvEcBy8cbLYu5KGAUCa6qG1am3Y3DVqy3ZfLtod1l\nl1OrBm8gyDA+GcR18bOijjwLZ6Fr55IotM8ICwwFYnhWumwLRTTUHxr1r1Xb\nwhcyM2ayCIOGb7B448EjyWTgWkilb9E3bsSjLWGqmX6gwYwuOtNN/cadHv8j\n9JAb\r\n=pu4P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fb76c5069.0","@material/rtl":"13.0.0-canary.fb76c5069.0","@material/base":"13.0.0-canary.fb76c5069.0","@material/list":"13.0.0-canary.fb76c5069.0","@material/shape":"13.0.0-canary.fb76c5069.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/ripple":"13.0.0-canary.fb76c5069.0","@material/animation":"13.0.0-canary.fb76c5069.0","@material/elevation":"13.0.0-canary.fb76c5069.0","@material/typography":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.fb76c5069.0_1629144581735_0.5374568903496935","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/drawer","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.457d89aad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2ab945be958a6af13c4ae3f01ffd550d6c9de4c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.457d89aad.0.tgz","fileCount":47,"integrity":"sha512-09kGx6XsDS4q5YrRkHOziwqZXufW7ErDTnF7DqoMiUa93K/NxZnqnHUakMB1DHVniSsScbNrrdxaTKIFJnvlQw==","signatures":[{"sig":"MEUCIFlM0ZfdkcdfHCHzKU+JALiXzl5ohM4i+Fzit4OEQUPtAiEA/lglW//2K+xpAA9rtafv0bbQZpXNn4CKRKxXExD4knM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9RwCRA9TVsSAnZWagAAsAYQAJIozhMHGuTNtqOCWdYT\nagpVvRBurrY/AwsvgwduKHvOlOnbXIa0OYsGb72vRIwgpjpDeKddHIg9iDgb\nVrLkfUXujf5vpAR/URnhsEq4S5uD3MES3o+fgF6zA/X8HERQH+afqiwgZRD9\ny2NLAmF2K1Aon4d/yZY2IZc68Y9f4skVMzhyvAhjClaHxeE1g4xsYc9a7Qte\nEez3VmSLfFEpSKaEQ1AfKGN91z/4YxzE7MGl48FmuepXnXZSymR/yYNN4kR3\ngHTCvIyA1ryYFXFGJ5WMPPM0+qctnMbdSFJ1RVwUJoKLUUiHTAd/6NFVC5aT\nfnDtSZmX38SjiXx+KDOQlDGu10ttvuQvMOnaL2lLefJwaZtjFqJGfoC+x7+m\nYIMBg5j6wBqiC7aVa+5qpu/jTFrY79tOJA1hCr1y3juUoeD7tnh4xdOTI2GV\ngZ0IXB4aqZjTXB/HpnNLYYhaWXyBG7WO2dXtxOCIU8pq86X+63wK0gVIdynU\n1dymRLYajiXbZGGlCWwcKPRGm1UeLZaVWOYnD25Z9hh+jvBPtrB4TpqbyaI9\nYWAUOSf5j0HdpVMV5DhQeV3sxqXl8JzvhAQIlH4ViFy6hbmwbjtqt7cftoes\nUHEmK3Bd0PaiMQ09Kw1DIcdLP+hocCvIoLM/p3b2kABbidEhLSMPALbvme1s\nvg1S\r\n=YoFo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.457d89aad.0","@material/rtl":"13.0.0-canary.457d89aad.0","@material/base":"13.0.0-canary.457d89aad.0","@material/list":"13.0.0-canary.457d89aad.0","@material/shape":"13.0.0-canary.457d89aad.0","@material/theme":"13.0.0-canary.457d89aad.0","@material/ripple":"13.0.0-canary.457d89aad.0","@material/animation":"13.0.0-canary.457d89aad.0","@material/elevation":"13.0.0-canary.457d89aad.0","@material/typography":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.457d89aad.0_1629213808679_0.08800083747071552","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/drawer","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be482f0fe542932732d126325b2274dff4879c6b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.0de2f2edc.0.tgz","fileCount":47,"integrity":"sha512-rx5xThqRZkqxhmz3ZgeGRMobLZd0Xq6eGwDF98cBbHxgjyMGn/PsM5zZttC5PFsS5FqfYFmtNJszMlEzhgcleg==","signatures":[{"sig":"MEUCIQCW1YMuG+K9qdn6G/1JQK5xS27Cs9ifreQ4nYAopnzBWQIgdZDsroECWq4vkERMOXV0ILicKERwD/af4GiDKUsjIh4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCJUCRA9TVsSAnZWagAADugP/iqF9HuzPPJ3peT88PFm\nDpBEgN4bqzwZl7omXFc7aJlwZkRDhVHyjiJ30jQUnQoDQ9LcoZ/xyLyhg79g\n2a0yuheYThnUJtODOpfqBNIeo7c81JC3dYO7Au+66N0YMDCweo/AQQk++pso\nbzl5Ja0J/WisyH7IRitruaARcuKe7eKa7wc4eHK5pnFucuW9FYEGfu5h+e+8\n79DgF+pKY9872jT8lFm1f6xuvjHax8Xe6oJ+NHzKox4PJmF3frY6ybujS+xh\n27qZSAj42e4QfIcjhq9uiSv3sAeXG15OMrdpX5StDBl0eDeHkqeKUxAWbc24\nKcplYb4aR+6WRVddt8DiA+D8XYy95/8HqTGxPVt92sGcHcKFOnlg+1fW43Br\nlfcKK9FyktlsZQr577hUAK1vqXeE8Zx34M1GkxFgrilCom3YmUMkF/2Xh09X\ncPN8D0rLEqGnGnBSJNiofJLwxuz20SicK/hAzhiBgji4TDtlkuPLHBJdzFM6\n8pD2TA7RP2sKjEQGCAn8o3EMM6UI6mJpICMQPtsSSlb4XMF+Si5woSJuR5Hr\nLkZo0kIb7O/KEjYf6pajB0Qv5xCuvLd9Jgch1fe+U2KhhowskrnjpGg3L+Si\ngo0WcOPgT+lGgILr4hfLdSdsweyn7enJh0KzsSVjq7gTn+MjXlcp0sxH5h9v\n4o64\r\n=qMiu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0de2f2edc.0","@material/rtl":"13.0.0-canary.0de2f2edc.0","@material/base":"13.0.0-canary.0de2f2edc.0","@material/list":"13.0.0-canary.0de2f2edc.0","@material/shape":"13.0.0-canary.0de2f2edc.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/ripple":"13.0.0-canary.0de2f2edc.0","@material/animation":"13.0.0-canary.0de2f2edc.0","@material/elevation":"13.0.0-canary.0de2f2edc.0","@material/typography":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.0de2f2edc.0_1629233747724_0.03122635524220474","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/drawer","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db51f7c04b6ef5039d8e23e4005cd36ac5cb29ea","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.1f9259b9d.0.tgz","fileCount":47,"integrity":"sha512-Q1FsIuWrtamU4OlVO7ZwU4CCiVNoiVuEh7k8r6JSxxCWr3asPG2wvxpWXC+4Jetmh8wMk2Hc2hcg4id3TANorQ==","signatures":[{"sig":"MEUCIGhINqc0aeLbcJj3767HYh7Z9HypnzZ62jWUPk7ll/Y6AiEA5CZ4rswkWKdVwNYWTbxOzb8zrG3zLrXhKtHrZGQ2/9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDUXCRA9TVsSAnZWagAAAZYQAJcO1Pr1AIJ+1Qpk08/D\nVq8a6QPccFelZ+QCUDCr+icTNH3dj84ltv8pzRiFh4Bbn/h4xWDsN9rDx3Ez\nYkVQtwF9491Xx83Sx+5KfUjEheQUa8R2WWwXdPGAA04eufIvliw4Z7FDxYhm\nWqVRL3DkYeqXGcXyBvrRsCDTPg4OBCKbbbPD28p0hTMCq+W0XxvOvS73rkuL\n26G26YeQR3sjXKpSmaG65ebmuGKdeuQGlopDsmE6PgcruYDoBtAder1fkJ1k\nlWvJ5wQ9lxRJn2+5CmmqCTEGwTuZPLSNk09Llkk5JWE03gVOpLbvZLguQSta\nzegU8lcpbFGOE+wEeGoX/QJr3SSxhAyB7wN3OtdJRJ1wD91eBrnsFscxOlxI\nYfS31XrmpkDAdQByuqsGe4d2IuRHWji7WRUkiuAdbau40iSTrzLqOD0DD2U8\nJyqRj9rEhsVWyAs8L/HW08T7oxwisa99pqnZL3fZossBEM61kjJGbItl9j0X\n0eRwzf4njJ3nLixYRiCUgdBM3O/adnFCYJtKV1+TpZAVB7azpH5j+lnxKZ1v\nmBpgUoEyN1lhfnAYBuzT9ZFoj/DDKHMbdoVg5/66Ul2okSkDffmvoJkFQX+Z\nDbNpcBNcACmwDhobGJUYl03+R0KoddiFhRMNNZRpdbC0woj9TpSTwOfIBemH\nzCP1\r\n=Jr0f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1f9259b9d.0","@material/rtl":"13.0.0-canary.1f9259b9d.0","@material/base":"13.0.0-canary.1f9259b9d.0","@material/list":"13.0.0-canary.1f9259b9d.0","@material/shape":"13.0.0-canary.1f9259b9d.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/ripple":"13.0.0-canary.1f9259b9d.0","@material/animation":"13.0.0-canary.1f9259b9d.0","@material/elevation":"13.0.0-canary.1f9259b9d.0","@material/typography":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.1f9259b9d.0_1629238551748_0.062462358546389485","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/drawer","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.3b9290351.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f8ecb6147557e2f6efa04bb453225eb52188508","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.3b9290351.0.tgz","fileCount":47,"integrity":"sha512-Zm+hTfQVEBcOnq4YbI697zuyY1ykU+s92jcAVowjc4McSR66NRtZ2aqG79Xt+A83pA8z9M56SxraO79ChGkB4Q==","signatures":[{"sig":"MEQCIC/7hqA968beRSYciSPek3ESszWRjLjeHN+791SKlLoeAiB99l+w0baXQrSbgUG2YX5pj4NhvcU4BPTy5NMSBCZHqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJnXCRA9TVsSAnZWagAA6iEQAKDVVYz8wWldMmvtCxga\n2rRAUnpTC3Iny0ikBDax7GgHpBat4cFQEHGdyxbjegkOY7T5Q5WYbAESps74\nwO3OKoiJ0ZaGQzGDFK3rKcbak2LqW5YY/j8QweXJZ45r8lNHMdtqmaT2ugfb\nNLIOHUW7gWIXoRBm5qBqmOngfqstHpevk7AvgudjL152qAFoIlODPk8ZbCUy\nD92NmpNu7BLJk2ps1nPaPaVz8iv7YMMhjywI9m0hNArZg4Wl4TUNvUNdvpMk\nT1Bw9kpvDTCbIhH8YQcgbI8WxATHviXDbQ0u5PoEcpV3S2p66JMlzN8ONyS7\napRbJBHe6AbCcwVKjVX00RhoYuMveX5oVv5UcXeQD3XukPe21j63omUbo4Qq\nJ7N586lE4jKgjuhM0z+zctbmvTE5E60y89bsXn5v5tDekVO3EXuLcWGxkj+w\nsRxrvSUOetOr4+VDloGx8fD7FG7hgVmmjVYHCtW/TMNG7bib8LNJguvgq/5t\neDCPNe36NKZhbNEXYHt0i6+sk2z956G/J4xtTUXMd2yaUV/qLmYZFJBtsO0k\nraoWZOjsUrzBTN8gC+4HfLU4htow1gvjeATmL3x0QeKeF9H2Un+Y9iGofTcA\naD/jOZhHU4Wn+G8Nr42FUPaAGJxIEJu1WsI0LDr8SO0TYshZHbbDN6gRgGVa\nmfzy\r\n=jg1h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b9290351.0","@material/rtl":"13.0.0-canary.3b9290351.0","@material/base":"13.0.0-canary.3b9290351.0","@material/list":"13.0.0-canary.3b9290351.0","@material/shape":"13.0.0-canary.3b9290351.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/ripple":"13.0.0-canary.3b9290351.0","@material/animation":"13.0.0-canary.3b9290351.0","@material/elevation":"13.0.0-canary.3b9290351.0","@material/typography":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.3b9290351.0_1629264343495_0.7194763361789893","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/drawer","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cfa5f53c30e9b2d1da7c3210bc29e3db5c29f02","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.43d2eed2a.0.tgz","fileCount":47,"integrity":"sha512-bgO3PipO/tl3BzRYDQqyEKAxeVV63Zkri5ztH4SyVxLfTAIuM1lnwf1QcmiZEgyPKzZXrCyVZGOEjZEyzWO9Rw==","signatures":[{"sig":"MEQCICXRNzxRjk2wNXGTN2uEJjQgSN+ZlvHMn404V5lrGBEBAiAXOlyweJdJUL89N870ATi1eywn2BBpFlMOnWG6q4qH0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS9jCRA9TVsSAnZWagAApT8QAKEhb/1O/5acugg8j4wB\ni16UgQPxKSXbcXqw0doC8CdLP/8NFrrqRHqsx4evP1NfdkbPtbbsit+sJ3F9\nsgG9s7/twMesmE57+M6fxRhNzJkVrL/OCKSeAw64kYJft4+5KRfKIXhMlQU7\nff0CtLhbYiTEhWS6AkVBj/IutZ+2Xf7jvxgLaQryKQvsYgNG3BVaDj9HnN/4\nFIjg3bleiOZrSCGGoY20qaVvb+h129aTHL6GT+R/M4zGuCH47nP9HDq95zTc\nh6kZPaACBdvswUYkbGVo3EY4xXfHXndRBRqHjNyf9gCgMOfw2XDPcp0mDGyy\n6ARp+nZ1jjxU6BYPzES0LA3AkPiYsWgBDJ/EC8GxkMgIVnvTwIMwC8cFBfY3\n34BAiuSHDE4CDhEZlrXX/M96qv+OdCT6lh33ekL832iqzacZbbKCleusURP5\nwNofHZjhAj9kuv0nEG56IpQ050XpIntN/yvNyCUGCcccck1W+FA3XWrVTYjx\nOO9uzq1zhxSYTRtkyxIi3yRB+3izmUWs8HoXzHPhBslN8unskXEncdsEwPzu\nEN+keJF5Y7fSkgY23F2bQwnpG/pJP66D3l0piNZydFO3QPWfRSO4bjliBcC3\nalIPx2SYRDu7WsRtzDaqtWdldJXBARUkp1e2K187qMu9hly1xGJXO2E+UCNY\nY2VW\r\n=AkxP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.43d2eed2a.0","@material/rtl":"13.0.0-canary.43d2eed2a.0","@material/base":"13.0.0-canary.43d2eed2a.0","@material/list":"13.0.0-canary.43d2eed2a.0","@material/shape":"13.0.0-canary.43d2eed2a.0","@material/theme":"13.0.0-canary.43d2eed2a.0","@material/ripple":"13.0.0-canary.43d2eed2a.0","@material/animation":"13.0.0-canary.43d2eed2a.0","@material/elevation":"13.0.0-canary.43d2eed2a.0","@material/typography":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.43d2eed2a.0_1629302627398_0.04570653150494586","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/drawer","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.0a9069300.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97e29d076f8b0ec13f2da07bb1dec86be1661493","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.0a9069300.0.tgz","fileCount":47,"integrity":"sha512-ysITbJgJOsEFhWU5SDoTFyGadmNHRkOSKffLRBzahMbA711rUUHq3FA9zoZAKp1r9sZTao0pA6OjnHwFsew1Uw==","signatures":[{"sig":"MEUCIQD2ZOKCirS7yloHDpnILRNdV+whIjJlRZavX+Bn3jJ31AIgdJSn2JIYgF/oPi/y9fF1wBkTyZXW9Tm3AGAy076tK4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoSDCRA9TVsSAnZWagAAqQgP/2zHcVujGmI+rbLjlwK4\nB+zbKGwL0Crk5rgFTyvUSxf2DbSQ1QFtAJU9+GNMChZQfPVPityW+NQtTng/\n3jXZM7q2eYPI8VW4bDMRDZh8s1tymiC24WqnQ3EHMIUivoPpG7YWatiTAJGm\nvgHIaWB2xf+10tfj9xtjxF8aWue20npNYQRvUOIjorFEPGaSPoaOjFP4qxRD\nIfweuzVqBBkOq0EB1N6uYK9426veCLIoBFcUDJQUXSvdgItPONM6bsAB2MwR\nZKLDLHVg461nfL4Tk8nS8haWzlT9UVMW/CqYq6yjviRTRorXovKJQMbzs+SI\n2HFKOtqRNylUQj0MoFFqKMyQ5sJ5u5kyd8rq/3uTZeNKCWWogESpCxBabs+X\n916wBVFK6hOTeyJihwHP3QBtyPt8bTgsJwVo5prkq+M9v9TK44S6Yl/588wT\nsBBnnFYGA1zdhVWKJzaPWwQBN/qxaMGRsPN4Vq+q5/9i2spz999i9huSso/n\nqy/lIgw6DnbA1bwrWWQCSQdqjHkqNEaN9TrGyjrgDhTUFCeCMR9+9WDFl+9I\n1sQZIbneXEJ4MgTl6ZfC2nYdlghb1z+eEc1srLU1pKQHbtEdoh3uDZF4cxzi\nMpN10jjNGRnNsiFr+gdY26N8aGiQwlXddkdBWZ9Gve/VbXpWy0qj1J6RhOOO\nHqwf\r\n=Eug2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0a9069300.0","@material/rtl":"13.0.0-canary.0a9069300.0","@material/base":"13.0.0-canary.0a9069300.0","@material/list":"13.0.0-canary.0a9069300.0","@material/shape":"13.0.0-canary.0a9069300.0","@material/theme":"13.0.0-canary.0a9069300.0","@material/ripple":"13.0.0-canary.0a9069300.0","@material/animation":"13.0.0-canary.0a9069300.0","@material/elevation":"13.0.0-canary.0a9069300.0","@material/typography":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.0a9069300.0_1629389955222_0.18051202605569183","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/drawer","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2dbb2b2bb7c035238490e83a8dbe84216f90e73","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.7da413ed8.0.tgz","fileCount":47,"integrity":"sha512-ZDE3HneZ4/AvA0ru8oE49PoSqdrGZ5+bGe6LKxJJ4CEu+OERjC1eA5bJegHim6/9dpXTtOot3UOxquXXrHUuag==","signatures":[{"sig":"MEYCIQDjSFalCny71cl0kUslDKKM3KjU5V2mxTkSQK4GhcVPUQIhANjgWQi6kWLTA4O9sztz2ETt/xGzoQ89j9gMMGdSjyZ/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH89HCRA9TVsSAnZWagAAFD0QAJQQ3PjQpHTj1rf8qt9m\n4vgEmLlqLSNVoYFBFIeT9Excx/oqTWd6xdOLZVmldJkKW/dzGQMjaLbrb37A\nzhJCZYmf1oYdIQkzpuvTLKFdGZBwHNn6uywyR95vCNol2mL8m/yCA8HiufWD\nrcdrWeBGANez75RMQNAJ8PPHIbkQ32WV8CERjuGZuT3JS5JT3Q/TUny1A3u0\nJ5SNJp9XnY2ZJLcVnGYnwF1yXyy4difktyGEZlBK/In7LZjtWYpw9QfMStnS\nrKIntoeLr9nZ9WKvWXx4TDodV8pdym+2QixOeuYfYDLxAcPFS5oZpKxOnXRv\n1Vm5QHDccfJXWetg1Zx3iGf5njuAF9fLKPtTz0pfpkIgEJx7P4pv8RPd03yc\nJvGXzKA6CZezGkkSbM9zUrPlKkY/ti/a5YQw3rcq2p8ei0r/GpqLc8DQRvt7\ndINEqDxumVM5EUidrgtc9ltnuz5lk0QVC4BMIODKxnBDxIGH7WE663HiyV7Z\nfzBrhZmz2DUQx9VIFK/6QVYEELksSBbD+sVdlyIPUd93ob9eC2lcyR4h6yhz\nVfFoXmzNRwUo3WJ1C3EajsJBpR/oWy52e0IvPv1Ff/eyPLM+OVXIh7jPattH\nHNdhoejpG0Vy6DI/aUqe1BEPXgsXMQz2bDEIrwG0DR8rbITE3aqYZ9+9VVNe\nwcIR\r\n=/pl9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7da413ed8.0","@material/rtl":"13.0.0-canary.7da413ed8.0","@material/base":"13.0.0-canary.7da413ed8.0","@material/list":"13.0.0-canary.7da413ed8.0","@material/shape":"13.0.0-canary.7da413ed8.0","@material/theme":"13.0.0-canary.7da413ed8.0","@material/ripple":"13.0.0-canary.7da413ed8.0","@material/animation":"13.0.0-canary.7da413ed8.0","@material/elevation":"13.0.0-canary.7da413ed8.0","@material/typography":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.7da413ed8.0_1629474631349_0.3891282507176075","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/drawer","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92b3851a46859cb3558b4fe6ed5eac20d4b00df7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":47,"integrity":"sha512-BmAPqvSqDTmlxSPPYpwqmUWMRuFBtkzaEK/nwpBesK+RKpH2REuMvKkHkMOm2dXd2iz/KMv7N6KA5AqUj6t9Tw==","signatures":[{"sig":"MEQCIEJqeHQaB6o1l8iwE+8MuFbwHwPoIbZi3Z7UfrPwhhlzAiA01tNCnPtvmGWNdCmRt2AEQ2YL8EEy4y1gw7IETB5mmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIAObCRA9TVsSAnZWagAAjREQAIWQnYEw5YcUx7nGW5tB\nu8jiutVum+K6Z21I6a/+no4crFWCocLYSyWcRnatYZNk5fAm22Zd407/J7fl\njgZ5M6rSHFNWXcsP3JxYZS4664nfGciGflFFiWmr5856Z9/5PU1A4DkwVOv4\nrVahifS4XoYwlRuuk+qDicDJyS+2J/qRdtY0C3I49uXuDInq7nS7xrd9R59m\ntCEBMKK8xlq1u9E8ZZOf9/zUNGGzL6QZxkUgmNqJZmKPHZbSDLUZU+BHxB1a\n0KllXCPEdNSWaJqXwVlSg+nugISEf5dV12+M3teY692iE+oubo/08dqathve\n5hFPVW2+93Nois2UkYM9g/N0GnL5gvZeVytS7VqVLaU2Bd1RY8PZ9Vy3vQys\nDsyBLubgP4aaJLp/3jP3sIEpqIOxHGoCxhpuzBbvkUs+CuBGDxP2oARwrGBv\n+1nGWU07BwT58ayJLLO0YbQ3hFPQk23dNkQGvaeIS82Eekzups2xKSJoqb7d\nGpaXHgRlpq+HyDCigFN5C5dF+zLtoasFHmBnXO5710WVNUyPf5hFsZn3YMFj\nvqoB7yZ5loq4w1f3C682nGAx/KkyoCLsqcQ+m4FgJCuUWvqgQlF2SgquwPSg\n1zJxR1s+kUiMgkBPxHvyaos5muUNmBTIjItK6L3d9HmogHGwK91tPGP32x96\nwM0A\r\n=CgYa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e1e69fd8e.0","@material/rtl":"13.0.0-canary.e1e69fd8e.0","@material/base":"13.0.0-canary.e1e69fd8e.0","@material/list":"13.0.0-canary.e1e69fd8e.0","@material/shape":"13.0.0-canary.e1e69fd8e.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/ripple":"13.0.0-canary.e1e69fd8e.0","@material/animation":"13.0.0-canary.e1e69fd8e.0","@material/elevation":"13.0.0-canary.e1e69fd8e.0","@material/typography":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.e1e69fd8e.0_1629488026922_0.615769700690812","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/drawer","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ee5fc5c8b07bc95853a317b917a1a37b7d35098","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.f5afc16df.0.tgz","fileCount":47,"integrity":"sha512-xFatY7gEOI3XEccwrcjAAVbuRua4EK8dD66/wZBr3jqgquwze0cY5FoIgu+QjqJ1BRcqSpwcaRtNXswauLVPrw==","signatures":[{"sig":"MEUCIQCJl1wyIzOJZUrKrpmo4NRAW+HD7o95VM3b+OBf5pibqgIgSEq/gS7sZ2PbtLfPkMMGRhUZAcew/R1Jcvr+Cf1ZKGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBBeCRA9TVsSAnZWagAA3xwP/3nudMwJYZctEnuCK50r\n3JVxHCZfmpzlUKS5Yo2x7kQHs2fCwDjm87VAikQhBgu+CUBwHF2xAorkeM+t\n8Q0B+DUVC3tCCflpk6CSbgFLnCiLA67RJAQ6kJmRzGdt5RBPkm0hq/jjsJvG\nQPJnB0EOeu0tT22IJBi4+i102XvHF090DAERtWELF2xwHfw/iyPb7r7ZVP5k\nHXKTPZO3eju4jTPIBmO83EiCMUXUVwbPd3yDJ8KNGKpn1wXDSwH8NXRWMYkB\nSBzE3oweIoU+GrMEVaYTpR6dHh21JEzAhOg15jj+Q0VPgoJnentkcDHYmcEa\n4riwNTqnINW83qCs6mo7V5dy8f+gqBDRK4c8OxCfeySX976buhJcxnLwa9jI\nlIYaBzaCyHgaR58cIHMfSD6+Uwv/YuP0CL+0o6hnq6WQKRfSO433lb8CQBgs\nQ1EMpBgW7kFvon0nL2bvI0pB0nlG0bMwwo4rWX+cz3KI0+0XA6YZBDOIIP3L\nQ7YSDmCUzVe3ZCytNizP7vNcnqc9RaTKO77ipehit+w3lEIUwHe1hmEUtILu\nLP8wM9heFHJAyc7BI6tUeR4Wt7g3U/jzmXETK2Y2pLQWnPOCTsKhjWmtUOm3\nB3nQnCaPr0hdJj9b9t7IHF1mS7g8aOHz66Occov66r3dqqp9UCXq+a1z4PPx\nn0dT\r\n=E/ID\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f5afc16df.0","@material/rtl":"13.0.0-canary.f5afc16df.0","@material/base":"13.0.0-canary.f5afc16df.0","@material/list":"13.0.0-canary.f5afc16df.0","@material/shape":"13.0.0-canary.f5afc16df.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/ripple":"13.0.0-canary.f5afc16df.0","@material/animation":"13.0.0-canary.f5afc16df.0","@material/elevation":"13.0.0-canary.f5afc16df.0","@material/typography":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.f5afc16df.0_1629491294736_0.5610214594815333","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/drawer","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89f06c31351ae832fedebbd3aee98bc298e038c8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.28d0d75bb.0.tgz","fileCount":47,"integrity":"sha512-WxL1zwRSwtauC3oLA7W8Vv6x3ittwSozHixuJ2CQQ8p++NPSb3Fg8kI6E4b0gB+UPxB11rFdEqWezLsqV4YSuA==","signatures":[{"sig":"MEQCIHzoO50feIah/wF0ByDLz+OPI0Hkvc4eQHb8Bi4vKR1tAiAHmAYHAVpZuGTiAyxzCdCMoOOaHN1cBPBOHr+FQOYFxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICsCCRA9TVsSAnZWagAATxIP+weNIoq1nDWOBroqsxLG\nqdRUJ550nMJ9SrKDc+UlYxx0QbBgJEgRT5IcyKSA4KmQJw0QtvMBwbEAMvir\nGllzA1h3yWghXBYTvteq/fzBZBKLMCd/6C+VppfPdIK6CvQWIqvAh/d++Vum\nerD+kVyN7uJOkuszY5JLPj52J+sTZhUrZMmj8nIDNglOtt/9D+aQ1sYu0zHN\n1tZOHtYgjZsXof7XCbXIMsrs86ThDy1dz4DwczdlfMwMZupbo/3HVWWKrtDE\nGOLznTuOUsfrXJRWTyPn56fGSHdhTmENCDZricgBODWXaMUQZ4JUR5PlUhxq\ny+yXGAZ4jdsz0fETSSxpMawB60wxQRLM6GIXFcKosEzWcL7JeOe89E2+GXuD\n0l4aVa/Fy3Z/JckLYPItkZWI1unqElwOVCEWwZb+QR04nSb1oliVQkRAnWtW\nbg53v1qfV3GbO4WYmlQIh5EFbqFdt92s81vBHkTWCsf8bREUZp1qEtTZirvn\nEq2wMkkEEm72Oi1VLEaii/TbE9EpvvEJXJlFpQEKx3vbD4HGU8ne8NaS7rDN\n8Z5Os3scX16gs/2o9E/0lot81frA71D/gJNPewEzNeoMN/m4O/782s8VydmX\n9UTSbBYZLTeGk+xAQcOw14OSFkHcvyyf/Lo3Jf+Z3TuuW4RhHeUssYR/FS/d\ndT61\r\n=gq6Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28d0d75bb.0","@material/rtl":"13.0.0-canary.28d0d75bb.0","@material/base":"13.0.0-canary.28d0d75bb.0","@material/list":"13.0.0-canary.28d0d75bb.0","@material/shape":"13.0.0-canary.28d0d75bb.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/ripple":"13.0.0-canary.28d0d75bb.0","@material/animation":"13.0.0-canary.28d0d75bb.0","@material/elevation":"13.0.0-canary.28d0d75bb.0","@material/typography":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.28d0d75bb.0_1629498114227_0.3483341606627921","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/drawer","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.21ece5360.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58b4b7d0164d14a110cec1e6b5ee9382875a5798","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.21ece5360.0.tgz","fileCount":47,"integrity":"sha512-JmLOwxfsLc2XsX7MhbzK0NcONEERq6b6HYjOWsEFW2uPGaW3qmu6DoHGy8oTbGsBENKs7dJzRUvR5zYf2IBQig==","signatures":[{"sig":"MEUCIA7O7sPlO+GO9ykpISAh48vyQmh35/r9ZVjfPGVc5vrCAiEAnQGR8xCz7iJlIY7hnOv+owSqPEU/S+DJy+D8oCi5X5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID6uCRA9TVsSAnZWagAAv5UP/28dT+mo/YAB8H2W/TcX\nH0159Km8983d8YngqzxH5PJ81HikYt65yZooMikvdJZpoPjxef2OqhRv0/XA\n9WScgsHkAJY8pfxvP2G4aWkdaBisyurnaftwguFkjrcGve9VIT69KAxbJK4k\njXHKNYyGVkG3OW/U4JaoEGroIJqZ8qLptCKDUPAUu+JUaPLupYUYZiQa5HLw\nGNlJPETsev4Ucu7YG0e7KLt6H2unOUVJmqsYy1ZxB/ngPwSdAAJ+8qSov7Hs\n6I48p4K2SCbsKyj2BAdrBTxAldBODY5mTNL/SvGmmAknILv9F4lKonBiCWub\nN10rtpbjFHiX55mCt72kkkhOSRf++KjgynodbCR77we9RocQgX/yCyydbmfG\nIhwWAIvoRf0S+aLTrM0Hd8TlmO6BHV9TaqzxJrfH3vAipGKo4cEea03KnSld\nwR87bUKRCI0k9Y79GK311IbWdUsxfaGlZI4o8CHiY4dnvXoMNTic6jNeZ+Up\nZhosZIKbhqgu26Vlxit+tk03vcf8M3DUDGUdUVtuBvSEpLQsCwKHCSqElBFq\nDJ0audD1rc2NWZsYmpLTKi9ItGmkbkZnPBncRaeQwW6Smoicu+RZyTrij3Km\nS7jVww1IECzOlWW5d0ZEvPGC4gxYwr2I+aNNcUXCeg+TD7Zk7JZTva/PtJ2z\nnATX\r\n=fEtg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.21ece5360.0","@material/rtl":"13.0.0-canary.21ece5360.0","@material/base":"13.0.0-canary.21ece5360.0","@material/list":"13.0.0-canary.21ece5360.0","@material/shape":"13.0.0-canary.21ece5360.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/ripple":"13.0.0-canary.21ece5360.0","@material/animation":"13.0.0-canary.21ece5360.0","@material/elevation":"13.0.0-canary.21ece5360.0","@material/typography":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.21ece5360.0_1629503149895_0.8842065431975208","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/drawer","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a22161dacaf36326aad3a2ca7f564ba24f394d2d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.8de07c02a.0.tgz","fileCount":47,"integrity":"sha512-zQddvWjuI9D+0w5o3QKDjJGqSKkvpVjjJLGvt/5Q/udj3hsHs/NErYuT3wyzBq1ew3zcu9okAlJgjSS2cgWe3g==","signatures":[{"sig":"MEUCIGUEizwNijXsQHK+M4827W+Ut48V/3DtW42Ofv1rjppSAiEAu2exEmrIC8R6+OgzqyHHNcyv7RP7O3Xa0QElOjhEw6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI76RCRA9TVsSAnZWagAAZJgP/025zyASMtE7xxOWzmWV\nCIi81rhN/u/g6V97QRKHMv6GPyjxttnSKuXgmbeZQPdDgKLD2ywm9Il1dKcz\n5KugHVxxbyGNViTlSzuC7xnoB+TeZm7ITgFVGFSh9Uo1JQ/7Sw11dafgLWT4\ntoR7HH7GpMscJYthSYiIM7MrUJ8FO9nyDrioURDvyugyHYpIvsHihsGRDcO0\nsI3GlVheLegjpjGuKWPgNkI15DGOBMUaf4Uw1/7bWAZpnGxw6daHFVzoLrvL\nEPRHLc4Gdp8PAcx8xdOOGqpm1xZFo81KvxO0CpuVf9d3F52SwPpu+R4l3EKU\nwJwaqCYqM0v7wALMti8Rj+oBKGWbNOuWHm3wSJhYF5tZOkfMjzEl13fkQLrU\nLk5MO3PLz9+tVvAm5lzg2tKTB0ybkpV+Gy04B5ujKCnSsQZIE+prE2Nib+nW\nZNpCvfwVc1jRsQwjbSqhWLIxhqCpmUy6uw2s1e0ZFrMCRWKj1P/+Q9FDfGs6\nDwflYkNWDjfUejpSSa332FKJVd2lUT03fuVfnTfMzUn97qXxRoZXKaLbBb79\n8X3C4N/OPoAE1cJP+ZV5zeiD0UoFI7R5TDsLsoIirstx14Ou5pn9LfrWLHDp\nCTO4QgjDXnghrXxut+pyzoHHBbu69NMfGWiyMjjz81AicoeIT93iDBSIu5zi\ndBqq\r\n=pXQ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8de07c02a.0","@material/rtl":"13.0.0-canary.8de07c02a.0","@material/base":"13.0.0-canary.8de07c02a.0","@material/list":"13.0.0-canary.8de07c02a.0","@material/shape":"13.0.0-canary.8de07c02a.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/ripple":"13.0.0-canary.8de07c02a.0","@material/animation":"13.0.0-canary.8de07c02a.0","@material/elevation":"13.0.0-canary.8de07c02a.0","@material/typography":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.8de07c02a.0_1629732497618_0.7751111731539051","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/drawer","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1684cf8faf58992bb6e03e17877a492661e5fe63","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.65aa63b0c.0.tgz","fileCount":47,"integrity":"sha512-UtDFUOdgDD1V0dQ4lI6PDop1gxPK7Eai4rQ1Fm3balLpA9/ZkjlowAPU2hy3TuIHJHjQuO58i0fdsJeoIYdbLQ==","signatures":[{"sig":"MEYCIQCToYoRpYroFgXUYuPWkgi7p3pd8AHiUy2xHTWzy91zYQIhAJgvVqsCrTrT2Ig3LwEPym2tqKc13lfWdKhs6rynMPUo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRCNCRA9TVsSAnZWagAA9rIP/ie147DYQrni06H78hbh\nOiJoWc4PD7ffmQ3AHmMTChfckDOVWU/+YCf66/FsRbiSs+UO3WQAu3NpAb6t\nScF14XoQQB/ro/KHJZtckroRcWJujBXDiVrJzG8jRrnORqbzlpOvJqLaa//m\neJmROJWQuovTN7SrxqFLtDxkyTt14lhAztAm0V8Gdf+t2L+FTPbkcIvHR3Vm\nC4V9pgvtZIe05Akbfg6poXe1sv6x9W6xL1vdnwiS1CDLHEkO8/BnFN8Sk74v\n58MRVMyyPfX5uFFoBGLAeLqiuIC6xoMCw+e+IY9Befqy8Jtq+uzkDr9nYT8h\njaY9rzoif1eYQtwcqTF7DfK7AKJFS3asoA0PC3+0/ZLYrJUslO/j7WRGW/3e\nxgIa0H3OMCceS7NUVGt7O4UzI6RQu+lLUS1BOBGkLS8u4GHSc25m/4Cu0IJV\nd6uRl5j/8Su/tHOaH9aEwpj8bimi/tDydKqu7trPAYbpVI4Ne7G6LmQfD4cu\n2JlXIgmSgMUk2DPLtGI94nA8lz4c4WhQL/lSe/xhQgAUwTn7QgtYwAJ0gcaN\n+PgUR+o5id+QRIGQZpqk3a0jmQJvqoTRH1l8aYZXcS38kBaIlulrpdCvN/Og\nSDOUvp0uRVwOwOGn2x0xl0ihrQ2a+iccOenCQcLbsRy3RaGKeU8RE/EZXAdn\nagbq\r\n=59/a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65aa63b0c.0","@material/rtl":"13.0.0-canary.65aa63b0c.0","@material/base":"13.0.0-canary.65aa63b0c.0","@material/list":"13.0.0-canary.65aa63b0c.0","@material/shape":"13.0.0-canary.65aa63b0c.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/ripple":"13.0.0-canary.65aa63b0c.0","@material/animation":"13.0.0-canary.65aa63b0c.0","@material/elevation":"13.0.0-canary.65aa63b0c.0","@material/typography":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.65aa63b0c.0_1629819020777_0.6376671687419937","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/drawer","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e97073524f36a65cbd273f810894f8018cd2d08","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.15981e9d9.0.tgz","fileCount":47,"integrity":"sha512-2LGFZVhw1Het3BTtl72qExqpTQgrnlgfsg+I1SXgaHhKPac4dcnDLNpeiMx5EQvr/XKyuK09EfgnTVmsMmcmFQ==","signatures":[{"sig":"MEQCIFhy3y096ZMVEXccObvht23VigWMdwUVp1iYns5aGyxpAiAhlgx10cX6YznBx79PJcerB57SEV0/uvQFUzCLSQIV3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRvlCRA9TVsSAnZWagAAs38P/1AfuSDpQQyAWHLov4Ts\n2X1Z4TEJ3FwRdONqKy+5Ke90wQ23dvdNMivQ1PXr1/bJ3EsRKb/kqdqud5JE\nhEMFkJ25dmuY5pNFqCnD+5owRpFVIm8ZsHbBgeBxWfd5Dzb+I1IJfE4MyC89\nacqYF2RPEYBNlwS+PspMH7Rue/YkXtyUyaR1u4/oojicnFLquzZzoFqAlekL\no09v4XgLtZaZ+GJnBZ4QoNJvaWzWRZV6yCTKD7NIOoCn+zVck6kH6J5k53NV\nvSmVhZc0sPkaSuw1R8GIqItDEzeQt99G1zZUleo974Iz6kSBWXrszH6MaLrv\nU4X3zmKGEgQYcp8bMoRo68iZrALGw3xViBKw3X04Jj0cf5pX/eNsSxXiTqPe\n4JJOtEu6E8GSSWDbFd1sqUAkuNvI2tV22TLBELYdDnG+3UVkKhy4XnTmwfim\n2LVHd/l2iZM0f4vG3ySOYvPOAf5M0eZmTRgW0dgqDcZocpKgYbpsa/1K9wsb\n9JS0rOVOQI/9cQnwxJSKoIr2S6KUr989n+ynDVtX5xre7I1xrbl2AjUyFSU7\nL7SpSVYEk5JQu7AztCKbegr7n2LJCklBVlSkX6YcmJb6Hk8WNMXzEhuxEk8f\niHUhvkcRllrRClwUqmTpyOAlyeagDXu4NoBxhDyKfkjcH5o4QQ7mAJNZIv1d\nEDdt\r\n=j1cV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.15981e9d9.0","@material/rtl":"13.0.0-canary.15981e9d9.0","@material/base":"13.0.0-canary.15981e9d9.0","@material/list":"13.0.0-canary.15981e9d9.0","@material/shape":"13.0.0-canary.15981e9d9.0","@material/theme":"13.0.0-canary.15981e9d9.0","@material/ripple":"13.0.0-canary.15981e9d9.0","@material/animation":"13.0.0-canary.15981e9d9.0","@material/elevation":"13.0.0-canary.15981e9d9.0","@material/typography":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.15981e9d9.0_1629821925472_0.2350930102049611","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/drawer","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21635d937f0b07f048c2d0843135ad75562636c5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.fa7520f62.0.tgz","fileCount":47,"integrity":"sha512-x3QiC9dZd2RDwZhtzdjnqeziHjdacw5/sSA703+Vl3WvTKzeN1pdErA4Err4ZLxTuYQnFzREC4AGC7KGEEyUPA==","signatures":[{"sig":"MEQCIEzNlVl5azg0ZVm0tW93p4sE84dhESWs7NcxqrxLw8ZRAiAeRAZtHFrJtEVMpb2nt6UUjA8iOTxMD2SOq+GNb90NJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXLHCRA9TVsSAnZWagAA9OsQAI/zSLkiUn9mspNA0LaV\n/OgUwh/W0GAHyWQRupdnqtRz4mUg2snpAvC9hyS0x4Faz8fP/dFDQcWab5Lo\nFNqTtWm0pjAK8B1H2dvDM/pHh2cXg7SR4ybZwIF67c9HSpAQbu11DJMicioj\nqb9+LpNU+2vJJgllxYcQNRsg49AX2XcmJY/Pzzw+NDDo5rh9sdnd4RW0fbg8\nPe2UWbYiho2XDVbsa9/7MOqWBsu2S0/wk2sseiDwu+wuMdBwfDInhb4TxU9K\ncztss7pnqNipc3vyabKdL4IdxmWKpU/7OoXwAfaBbWb5i46uJ5VmmBS/5Uwt\nSysOWlUD8SSWZ2Ea53I0kdatvxZvxKkZSIDJYinQ20fF26m0KzOhwqAvvRyM\ndQBxZm9t3pZ8+Aa74NfOCZDow6x4EGnTG4+TPHqdFoYVJ2Fg1WqUs6paqGec\nHi+qaaK2wMa24fYSO+LxI+yVkrywbJo1UOt24e2lTUy1S5IfhyUy4yIAbx1n\n4eSE6c9bWOJU6CqQrG3Y2tfh+S6eWi9HuVq8T5bPvfoU0s3TatFfOqInppYP\nLtxcoTTVMVQtFtzFIAcRNelSfXhteg+Uj57jqktj+bvB841HFAc2uv+/N8zA\nQrugIoMId2Jkq7Jga8Ftxj2idxGQTS1eKpPYYS4448mrE0UzWgjAeYhJjxK5\nxCWR\r\n=9Pno\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fa7520f62.0","@material/rtl":"13.0.0-canary.fa7520f62.0","@material/base":"13.0.0-canary.fa7520f62.0","@material/list":"13.0.0-canary.fa7520f62.0","@material/shape":"13.0.0-canary.fa7520f62.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/ripple":"13.0.0-canary.fa7520f62.0","@material/animation":"13.0.0-canary.fa7520f62.0","@material/elevation":"13.0.0-canary.fa7520f62.0","@material/typography":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.fa7520f62.0_1629844167241_0.013005988239167987","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/drawer","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53d45cc16ccea455074bae5ea9d5a71af87d7eac","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":47,"integrity":"sha512-JwgTwoT5WaBOr4nuO/fKiTeeiLfm/6gq84uhtzYYTgf2X00xmj/zJGDJY0LJrhSgTq5A/ZPyyITRf8tEPRLMWA==","signatures":[{"sig":"MEQCIEzitUItNpHSBeWzpNLIamBt6QniZG6jbhxsGvqdtgSgAiBLESbVKqLeSX/B7eQxeCGQHt0kiF/0I3pC+Md+ohKpWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXeeCRA9TVsSAnZWagAAnusP+QBDtJPhYRmhHbPKt3md\nrB6/w8rsgEgjWGxNREFJPuL7jWe7Kx33g4rIjbxd6kZhRjwumxWGQWh1H13V\nxXRX+26+0W0CKNm0nwlQbS7TFF4wHFUPe1q3ODuxFg2G1SypHf/kXtdP0xZj\nkw1GWzY6zTKUbxYyHQ7qLCAQCXs2RpSrDEdAVG+JEim6VTaQB6N9ROYVrxlU\nOKbrnB0FfBLh4GFBTy5C/65Y1meb/rxpG854mOsWYUOj5xD8WElLVmxW2kLP\nbQ/HFAszBTkeVcF8RDM0gd8UL3I3AVGewY4lqdjcQnQecVYbtxL6prtMPGkG\nv2hh1kY+xoGRenIy4TUd2JEZyJBTih1OHvnUxh2hT9ErUvq2yBMxtJFlx6Eh\nzMyF1Y0NsKqJodVP6DmRno/AQkGNs7cKhvlwI3g5Hx1bARL2ajKNvzPdNTZN\nniB5+NwZQtLvwa58CBwjxa2RQTqruU+EN+ZBs1b43umCLfo7WfE4guKkoAId\nxvdOUNWeRAlq+Cs5h/0BZnUKNm2fv80WdiskyWCA7AK+YPvQPyauU+dmyb4B\nuTyCDafyrTNURLOOfd38UZw8JDafUZzajfQaKER07hYUeUITCfeU723LgZvW\nLWWRtv4LKIv+lXSRen3f1oooCYPFIzlyL+X9aX/pg52NAWMIw1WyZn7nYA6l\nu3l7\r\n=6maL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ce25bc3ec.0","@material/rtl":"13.0.0-canary.ce25bc3ec.0","@material/base":"13.0.0-canary.ce25bc3ec.0","@material/list":"13.0.0-canary.ce25bc3ec.0","@material/shape":"13.0.0-canary.ce25bc3ec.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/ripple":"13.0.0-canary.ce25bc3ec.0","@material/animation":"13.0.0-canary.ce25bc3ec.0","@material/elevation":"13.0.0-canary.ce25bc3ec.0","@material/typography":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.ce25bc3ec.0_1629845405609_0.34599532788389786","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/drawer","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52547b216e2bc651d9f9dbdd9ca730d3e06c216a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.12f5622e1.0.tgz","fileCount":47,"integrity":"sha512-fyQk2WFHv0+ZD6LBCbUZz/05ie2o0bvmQD8YIO5mmmuEVGvC9NrJWdJo6tsEzvYXHfLA+46Zurez71IdQUx6fg==","signatures":[{"sig":"MEQCIHqDLaVTAcqTcGk4t/cRFmtJu0JNkGE56eAww6LIK2OXAiBvnrMUrH3e55U16vmUxDq92vmBbVqhHxwviO719pmYbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX6cCRA9TVsSAnZWagAAKE0P/RzY8n/18yYRDizypYKf\n9VTWRxrHRIiv3DrZkN8cMMcOAgNJB/SLWFwZgBBq1ABoJKVVqMbRJw14PGJB\nJkXy1ASPb1fcmoNi3zKtcVsTrTVvA+PflO+YDycgnB7JppBJDCB0vetXbBua\n3WUKTNKf/2hn7hq6dc7tQMR1MNdCzTTjqBVoLQAHeud4IDbXorJ2vZhGY5lY\npjJprulYcTp7WSXISTE0BkG7dIL4NXVWGiPaT1Kqt8r5Ylr3R/udKADK/gdQ\nunPQzILBImCFwSd0SVoZZPPvYa5aNsOe31hhN/8rivItOTQRzeTelMi8jCWR\nslx4Wry1UXulwQoJ2uCE44Jadf7P3213eA0afRm6jqmGpA4lxIk1TX73pQIK\n8LH2p544kpTNOcxHMzPJYqCn3o8/V0OKeJn70ZYseL+He5uLKEJLSai7kBvI\nwCF/SupNTcNMZb1GWffwiZofoIRPyoFhc1FbwcKProK5ik/tKCTlXZcLLyE1\nkoni69LjPejv+bHHaF41A47vpP++2tNbzr6Tpz9VsgreqxiAmSVSUOchC2Vp\nf5cyEeUyRXPWNrOCTebdag+QNwZT1NdOaZDR3b+1gK2pfv9tLyM4awXzTeAl\nvF8nIM5EBgCamtz3d5tRmIFaLzAP4/bZ+u6fzev16UFiAwFJdFrA3O6Ef03L\n1RXp\r\n=+JBg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.12f5622e1.0","@material/rtl":"13.0.0-canary.12f5622e1.0","@material/base":"13.0.0-canary.12f5622e1.0","@material/list":"13.0.0-canary.12f5622e1.0","@material/shape":"13.0.0-canary.12f5622e1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/ripple":"13.0.0-canary.12f5622e1.0","@material/animation":"13.0.0-canary.12f5622e1.0","@material/elevation":"13.0.0-canary.12f5622e1.0","@material/typography":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.12f5622e1.0_1629847189152_0.021176098544089417","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/drawer","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21e71f003bdecb3e51459970b0b482982378b69f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.d97f8f133.0.tgz","fileCount":47,"integrity":"sha512-Le7fKO1gcadrscjmiDIHH8CJz7pLAeElzxbW4lbVwsiAM8yl+YO9rIRHc3lXgOlE7hxn/cn0V5nyjGwAFNVFEQ==","signatures":[{"sig":"MEUCIFKB4pYbL/FBv1RZIyGlcQDZGkisNWbpL7CYtRl7fRaoAiEA3dfxaPLlDNNEVJJaYHiv+fOWlydI7G45ALgjUvxqgcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJo1JCRA9TVsSAnZWagAAbZMQAJe6pBI7kczhMvTljzos\n9JFoHXZMZMk6UvJxZjC8X/RSLbf8D3w0AUQtZG4fje68W8W2Cp9xU+IovS96\npITVg8o8B87sugBtrCwsvWWOzuhrxqZ/QGpvxY4c8cjkYmmEySc4TXmy+NxD\nHVtAZMx/0sPoS0DoQCKygWza4u5UHN9zU7Dg5HsNOpurfvzeftXdQFM3PW9U\nj8h8iAi0ZViwr6LAf5D2TvSLlrS14tzhwUVROyqf50UFuGOXKu84kEy10pgX\nriO9XpFYBr+u81i86Da/JOMCzrxdMr7oT4YYBsMhU8un1TCems3JTt8cjXAo\nzlZerkG1B+9JyFidwq3+/1h1wxSJUxV5ThUZAllvjlkAhAy22MEaeMcULNrb\nRox+UD6OtT8+ir45VbsbxL9TeF3ZmGrqwNDBIjcz+hj3ZuhKfcGaEzmPMgnz\n0eKY6uf8GPx3vJbeJmuhzWG54AxA9QKaZmyO0KhXHXflGZhX+nnEjSSgJ6La\n+DHrFLen3CVSt09UIk/omHR8UQ9ZlEBnSUzxXqYSppJ7mvLZcmDCBwijuJpX\n9S0MJiH5bAzHrhGb1Qd53s3M0kEqw+bAfPSC0Gf7j/gLDDQqd7NViDMCg/Jb\ns8FLP7nkU3zIjStALvbESbtFmzH4zfSB2XShNR6D3IGuVeNkIwNLw8vVaXlY\na68c\r\n=QB6A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d97f8f133.0","@material/rtl":"13.0.0-canary.d97f8f133.0","@material/base":"13.0.0-canary.d97f8f133.0","@material/list":"13.0.0-canary.d97f8f133.0","@material/shape":"13.0.0-canary.d97f8f133.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/ripple":"13.0.0-canary.d97f8f133.0","@material/animation":"13.0.0-canary.d97f8f133.0","@material/elevation":"13.0.0-canary.d97f8f133.0","@material/typography":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.d97f8f133.0_1629916489501_0.6997206859877192","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/drawer","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b831bdf42d1cadbfc94b71bd04111879494f19f2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.d86fb6fac.0.tgz","fileCount":47,"integrity":"sha512-1VBo2Ml8suZ+uRWgsxjaMCw3FYLbWp7gE75wSBmqLTjepAWmSw+w+HM/r2nZ+XfKLefbHe9+UktHE/WbUrxzbA==","signatures":[{"sig":"MEYCIQDBziGe/cVQz2MQPQRv4bblf74pppv/zRLhkA96Hb3l4QIhAIBxTHjfQ01dMppt+ap4UF6JSBEuXaQzyLvmFQoE1qvQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpIXCRA9TVsSAnZWagAATEIQAJSOiGQYM2NQ2fP1ZBvi\nCRE8S+S8CTxnmtz7fxxvaQ8R/WIcOlibC0lVuLBuFTxV2jNWXMkUldJB0OVA\nTxzykUsEpkqjuMkp9E/vv2G0lNgDEYDzFRiUsRr44naGEWo9ON4AWUhvjwpR\nholzhp2V9yy5yeohj8eK7+Qfv7qUEcXo6z3Fy6tJKVd5iBfrd3fKS3J4oGlM\npUNX4KeWOwvucwN/ew1x9apztnbb9EvmNe6PqipvFYHQHHodph71lqxSBW6X\nw/wLsJl8YTLhleJYvkqKyqvTvIBTcDPcwKrv6Smfsj3Fk6IABgi+k82ECuTx\nAzAspMGftOgipEbpD1h2b4JVvUrp96Q9dNB+n4YK3b65qoxL5afd9OtpOatY\n2bzbxVDOfSJqlaCn/oCQ+wH/kOG1+rA8Uspg9OU+HRE0MNu6i3N7OjSsTSBO\nUj3XdoFzObnolJ0kttvpKfbEj2vhlNIU67HqCAHzVvNAr1asOts7MyLRx24B\nI/Lfo6gKvWJHv5ybh8/7hSVtvOwxQSYNz6WkQ6+SWhAEwdJQz45iV/unvmAp\nVjNsZRYTAQdrAIkAfwqVEX0WDjYfVYzJ1/9gcoL3CzjZIhRC6vLcfmOjaqZA\n6WbusVXTvuJWg/vIXyT93q3UdCkmDEPRjQXZ/S+Ph/VU57tLZphWC0teONfR\nYs9z\r\n=6e+q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d86fb6fac.0","@material/rtl":"13.0.0-canary.d86fb6fac.0","@material/base":"13.0.0-canary.d86fb6fac.0","@material/list":"13.0.0-canary.d86fb6fac.0","@material/shape":"13.0.0-canary.d86fb6fac.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/ripple":"13.0.0-canary.d86fb6fac.0","@material/animation":"13.0.0-canary.d86fb6fac.0","@material/elevation":"13.0.0-canary.d86fb6fac.0","@material/typography":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.d86fb6fac.0_1629917719518_0.2435220404750793","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/drawer","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b1319a3d520ba30d141580d7b99bbf07424f05d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.e8554dbbf.0.tgz","fileCount":47,"integrity":"sha512-pZsWnk68vck11luRSGgy1d1r/2E5vZofTE6d0WjHscOHWhtZwimB3JcejJPpfd6gGn3Vja26wREUl2RBO8AZSw==","signatures":[{"sig":"MEQCIAswEeEPwymbUtuVyL7mYzm7m6yBDkl2accdQeJFlYT2AiAPAt1H2DoIWEYCB64Pv6D3uppybdO9QaagcY9WST2q8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr2hCRA9TVsSAnZWagAAqz0P/3F4Kw+JOdoxMYgeQbme\nH1IGUkVeqz9hbkanywrXyNYUzz4ZFRiOvzscaTx6FFM0JcPi1SHaTa1H649v\ndKygYKynvxEqMsIvomPdDukaB3QoHjD7p8f3EYXNSblPTxdkCxgjKuIfmunA\nId+1m8B9JzhnMbJzBfLmC/G01JT6DwMi5IWaYAv0sWoQtPGk1qGcp82I2PoY\no3CLxBsWJSERVuFDyEkTeQM2dRmzKy3xYdQnzCVoOsUQaz2TwkLOc6CxjxR4\nj2JvIbRPXHc3pWmaeZrwRLNq3a6cHPRJ3hK0aM9mY++IEbX4GC1pWXk/doze\nFSv0F/umbZ4peYR+nuiqnOqd7t6Dl2gixDRr5+Bjw/LEAXuUklqVHENMZ//d\n1CTTZ56OJiS3P/NEW9cU1kTF+fxu2bY33I+Od8MUDCp9xAwors/n5vZYXNVm\n2OphT1BOkzXdW5DryDBObr2xz4fJKK9JWX3pHLYetfZkYuqF9LaESzLvkO7F\nWaHZLbTsiUjjGcvRpbTfJRiCs2KoDgB3wfSAljwLAVvZkl0/pxYTcoO1KSni\nUbmlVmeWlAp8R0lNx6bhNvV6dze1LFW9USkjjrU9DH1yvZTaKw2RibvBOHU9\nMaN3IBycpEY5CIdl4PtEaM9FOdINKyF11QcCIqss0YX7SD2n1gdOXt2Dv9Hf\nCeFc\r\n=UyAA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8554dbbf.0","@material/rtl":"13.0.0-canary.e8554dbbf.0","@material/base":"13.0.0-canary.e8554dbbf.0","@material/list":"13.0.0-canary.e8554dbbf.0","@material/shape":"13.0.0-canary.e8554dbbf.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/ripple":"13.0.0-canary.e8554dbbf.0","@material/animation":"13.0.0-canary.e8554dbbf.0","@material/elevation":"13.0.0-canary.e8554dbbf.0","@material/typography":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.e8554dbbf.0_1629928864680_0.8140624157812588","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/drawer","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bac08917907b0d4e2ef71ec382405c310fadece5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.877e3fb0d.0.tgz","fileCount":47,"integrity":"sha512-DHvLKoHzxX5pPnV3+9+QOe9zV97GaRUKOHX/z+yo7gLOtT6XUJVLXXWZ//3Dys80bFdroi8sthts6dPRXk7xaA==","signatures":[{"sig":"MEQCIDO/yYbsIbiSzx2HbyHkhcLlGLK6+s9/lSxG5tNj/iZgAiBYEYAPm+uwu+csLJbuBzNxUfYPtj/mFhhYTcUkBboJ0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7XHCRA9TVsSAnZWagAAfP8P/1sWYnS8+Xbv5GJo86lz\nktqObEfy/R1PfIsAGN9O7CjoXLF6dFArfzLmT703aPPe/tyT6qagVbNr5OpZ\nwRx15B2uJz9+ImFcczh0voo43lpQ7w9T3ocIJBxBufCw3VxMaZXli1+ecv47\nc+aVkiOfyHfI7hKpJx7m7IFiGFNpnH2SDfBxYoKl/L1BH5mjk9KW3Zai7Luy\nuwM8BMYxwZ9lgYs/5/n//VvOQmI3ak8jFksxZKD9bCDKOF7qA8UDNXhu7GA7\nqJNhi/97yWl9nvguXvi6SUyX49dudq6tlN0nX0+HLjGfFUG5JfADPAr8oiCp\ntIjiOX3ozEvkhKPjgR25shLrKXs7KgxS6avrr68Bd9c6D2vlueVHVY0wLfr8\nSLK6ElHcJVFZz6b/KRzFh8CPNqSjTDWuChID/3yuxeI9Y9EBj47+zrIqRPdr\nbLPn3u5eOR0HYSUcGfZrH/KCQY9344Tw8VuSCqS9Sq4O5AywMKqUCslvTA0o\noE2KKAto1rtiOi6A4dHZ0/bz9nhh7BTBEiO2bX+f4TYBacxyOZ16oR+olQ3T\nyLOFBC9eP2srtK14xPAa0ljrTgGLFQ0zIS21J/z8XU5m4qpVblCbsgCLLcIg\nxGL/ApHKv5Yf7FN1d5fKAUu9aV0jxVXz6OsuUVinXS+raICSUA2m0mDhzuzA\n8aUa\r\n=PvLv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.877e3fb0d.0","@material/rtl":"13.0.0-canary.877e3fb0d.0","@material/base":"13.0.0-canary.877e3fb0d.0","@material/list":"13.0.0-canary.877e3fb0d.0","@material/shape":"13.0.0-canary.877e3fb0d.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/ripple":"13.0.0-canary.877e3fb0d.0","@material/animation":"13.0.0-canary.877e3fb0d.0","@material/elevation":"13.0.0-canary.877e3fb0d.0","@material/typography":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.877e3fb0d.0_1629992391383_0.9575021365387579","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/drawer","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.6236f3576.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b35b321811f1b583083fa7c021865097d47b8632","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.6236f3576.0.tgz","fileCount":47,"integrity":"sha512-rEBycBNDbzamtrR4jbvb/rdUo/fTIRIQrs1tCQUXqHxY2uP7cCIUVp5hRWSkI2Nj5TR78ITepWz8G5TISghx4A==","signatures":[{"sig":"MEUCIQDZenJ/C+QpiKhQu+I48e9HbcedrvvseR+wb4JKcLH4YwIgcXOmeFiGch1yyqU9ZUsm/mIgq9/QJy1xOqElpjpk9Kw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7xKCRA9TVsSAnZWagAABp4P/2WGROXL6U3Oh+NxU3AM\n+FOXtEgndaXsKRODkyyA8z8OH46KezsrzB3ocX6YCllhhmqxLBTKmdWYt2gm\nqzKW+kJO3ZOeVcmWHEkVKFEUvrLKc4HjLqCKxK56+zKSfDVHgoDE1GkOPoOF\nlez0CRsc5mvF+KgraUPSUFdMeIV4gVTtUbIfcd3aKQxITHEV2AYQ5lgD7C76\nTWd9rZSB97KfbrXMwxVtgDCSVUkVeHicgNHyF7IvBIz4DiSPIUinU05CZTvh\nDM8ZOFRkbNdWpDjIsJWQtDMR1z+132W2xAcFyYKowYc9pGIvddHFEI1DR0VX\nWEslajs4s7o5pXLI6rtz3jjLjLAbWs0G+Neue5MUzxC646qpedCLngLgKUFS\nmvbD/mPy0UP5d1SDPLva+ET45DgJDWmFkIzCwWDyrSc4dz7Yjm3NbPKD8EL1\nzNScSpy13TRh3tGlTLe/jaKJVN3a/zwW4inos3qFzfbarMDihKGcXTzAA5NT\ndM4cKbbF9sg2nKqFufbC7Ox76ZGTGt7GmAi5N0zNUhrUnwykd4ZG6Wskt3AL\n0AgS2LvQlqpe+2ndU0DJJ9g8beTkVp0Jg2N3qnGYTr9oiQBfvjZ6bdD1RtPq\nQGWrOaJ4BkeXlBIZWIB87F1DQso3HGi3UQvkz2VHEnjGSHmW21ZxokJ0a6LI\nmzjL\r\n=NCkj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6236f3576.0","@material/rtl":"13.0.0-canary.6236f3576.0","@material/base":"13.0.0-canary.6236f3576.0","@material/list":"13.0.0-canary.6236f3576.0","@material/shape":"13.0.0-canary.6236f3576.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/ripple":"13.0.0-canary.6236f3576.0","@material/animation":"13.0.0-canary.6236f3576.0","@material/elevation":"13.0.0-canary.6236f3576.0","@material/typography":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.6236f3576.0_1629994057860_0.8432115671405236","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/drawer","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49ffdcac94f18b370edcdb05fcff304ae6ae6121","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.1d19158a1.0.tgz","fileCount":47,"integrity":"sha512-yP1S8i/JjPDQhxUZzC2FNG+z9nIWqpiYkb6X8fOomr8Kpr7gbPL/SGdV9lOs29DeQ+a8kX+f1aIwwV/0cy/UAQ==","signatures":[{"sig":"MEYCIQD/y6moM4MgosW8z8ZWLgdxUftwq1l5E4HhBviC7e2aOQIhAPR9b/hLvPWf42cQ1Jgq/9lpTxhR6SHw+9xt+chQGY5g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8saCRA9TVsSAnZWagAAdIgP/0IkctWXfWP1aAkkUVEJ\nNMbv0dtcnPgNKt8FVD7sxJO9VzlErNcITr7LAOc5OEBLtD2Zwzzi4Y/wLT9d\nrqCF/MJahpDWtdynj/RRnLkZlC7hrPZm+WUV8GesO2StPIMVjwvdmH1hqsnJ\nSaoArOWvzvUd4I7I1NCOkVNLNRY16SxGe3FVroJsMpMc04D4Ai6pozP3nScW\n9C2mfto7zYxUrFmPDBN7qoFyybQ9qYypObcUD/cyWc9hIwrvJWK5uyNKcNcA\naJIzHYlecYmpl0eD6dWC9/tf0qhqQX/6UH7SiuAAj7EWZ+sMpHRjr9XLeRAa\nI0WnQIwHuA6ohKbWr507h2PNGEmMBnPPPy41fbeG1k3hPU8zOcb5wSbej5f6\nGwDVANNwy6h/9fbI53AiGyPjR7ngr/fafY9ITEq3r/uFlPznU5+a77/8Dc8i\nzHebfTC7XGIXWHiLysnk27en5MxzpGlnFulrneaBE8OfySHw/46Sy/NmZNWP\nLgylYH1n5D4MqLabEyrnMboAROwHynV6RWH2Ge997R9z7vC52pJhx7KYpQne\nqPcmQOls020IxBDsZdwSWXRMx5aUFWm7mueaO+eWAp7pK6OIMcpkRW2KZ1at\n1ZaYc2bGo8fashuQgmzNlXNthzSmLx7Pqd7ZKrpxCBBCAoPs2/Orq93WOyiD\nzMAY\r\n=uSC6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1d19158a1.0","@material/rtl":"13.0.0-canary.1d19158a1.0","@material/base":"13.0.0-canary.1d19158a1.0","@material/list":"13.0.0-canary.1d19158a1.0","@material/shape":"13.0.0-canary.1d19158a1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/ripple":"13.0.0-canary.1d19158a1.0","@material/animation":"13.0.0-canary.1d19158a1.0","@material/elevation":"13.0.0-canary.1d19158a1.0","@material/typography":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.1d19158a1.0_1629997849936_0.0404254878164787","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/drawer","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6733bcda913b6e03419b1aa1b7403cf8d0ce5b62","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.6adc9e83f.0.tgz","fileCount":47,"integrity":"sha512-XKMOElj6jGdDrLl24z3df3BeWrncwqWPjCfQf8UkHv2KdJSy5mJN+CA4z69CS+S67VCIBtCw25a1eCr9lGdu3Q==","signatures":[{"sig":"MEQCIDZLh6D9oHkaEBmj1E0PYpTPfjD9/apf1rRSHAUb2/3GAiAUPGomdVtOojbSgPa9jIe/MQC163rNlwmGhoAx4UtZyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV+hCRA9TVsSAnZWagAAspkP+wbX2ID61dWczNarae9/\nY08cFkEF8aFCEa1KYkNk69F9wUHWGYwAA2jYJb/dClldHSrZG+SW2XHdohMB\nMh03Hn6gJO3JViTHqBVa2jy9rkIpxRiJFFeK0cTNuGMCdld4Tf2uBy3HoPqs\nv3gf9qGQpMvQ2Sw9CCGGncLD0UBYazn516+RaRmgXEM1azdp2jGndb6utF65\nHgd5ZuZHoyqKSX1t+jgFmFTgYxya6Uqhg8EfEyDWyQOCM4oVfH7N9NTBSoNx\n6m2QK8uKCgsJPMTNubKfD4syWxYvQgsrDHPXqAbDHcvdHIfL4Spnbm6XXZlH\nMixeNiBlvJYgE3ecdN0PaqkJKXZQ0q2HyQkG+0iouj/WcuzYuSGcsbZvMikh\nmrK5gwP8NzR/X93C+E9nAAs/0nDqAF23snn9zaRvYzmvppjTs28pLppd4qCi\nCoiUySXHS0BbAkFCMmgDp2jOqrRa2GiqZQOCNKPL8l2+yUe2IJzw79nSXEiZ\nZWMxpMT5MupVVkzOKNWk9Va3gesUYdbmDdP9I3eaDNTjlmGPM/YqalbV4x+E\ntbaahs5a9Zq0sfiV2e8blkTBZhwyGVJclfiaN+QrKgIywD+Zva0b7X31zBKE\nhRoYq4nSZDXw+bSI2xkvChNy4o3SuTKu2dZsOgiwX5wtGnzO1NP7rGJGIFdF\nXhQs\r\n=dumy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6adc9e83f.0","@material/rtl":"13.0.0-canary.6adc9e83f.0","@material/base":"13.0.0-canary.6adc9e83f.0","@material/list":"13.0.0-canary.6adc9e83f.0","@material/shape":"13.0.0-canary.6adc9e83f.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/ripple":"13.0.0-canary.6adc9e83f.0","@material/animation":"13.0.0-canary.6adc9e83f.0","@material/elevation":"13.0.0-canary.6adc9e83f.0","@material/typography":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.6adc9e83f.0_1630363553031_0.33761543247317416","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/drawer","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.d082790f0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd4e159d985f8b067f79dc18d22c19c4785ee9e3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.d082790f0.0.tgz","fileCount":47,"integrity":"sha512-F8agbJ3esYxvGnwRY8653C7M4Bcdq5WLM2bOGTGtPbAJ7B5AspwHJMKdAEnh2iLEoHBcZ5BDVujoRSFS9Xuhzg==","signatures":[{"sig":"MEUCIQDDXqb2e4QUdnPSj94OcMtl4LErgdzUauB+ozXkk42HKQIgZBMDS7I5BLAmOWLDkUCGOddi/CC+c0XnvH2D3HMinfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/brCRA9TVsSAnZWagAAUqcP/2/mVNi7lP3XBlROmGi0\niePm4tW/SFQ5pRkbKO1/964KKnHD81JVoKMefh9j2KMw91yf5TOnrC/FKZ7p\nYBPa8sd3YRXlu/9XaZtni6Xn2yoFM0m4akiGePJZlKOELmFyyDBgR4hMUTe8\ndGyYYMOuoFYsh9nWKkDzO/tEv1EU7fRtKrF39kpG/Og4XoGUaLhehe99C2ed\nBy8H64sLmoVbAWmZ7XmRQMZZX42Vww9lgg8taYqenjub2WaQ0SmBjcVDkw0p\nTpF0yGIJ0ZyCBxaHN1SkfneVqlzl7cQqO1Byh8/8fqfLG1DkMs4RD6cu9itu\nxqhKvlL0kHOjvDVakpr6WihswLURl6QpsVVwgoVhFF+krcM+AOpiV006lGYD\n0fL9YHGXQKFeI0jusN9VGeUQJk9RrBvoOguls4b51Xcitnlo2FCL5fjgeZFh\nsW4QNLNCghp+7aogoOkNHLcmxssTd0bFBFYK4aXnFNEDfNoS0okj2pG55HIj\n3ZSp3N8BiUjDvSyDMT1TJPX79gXjCW3uBubePPqsXJpmPqxOt2p4FQDEBeeg\nu9gpHwdI0pa2Dtj7AnHwa/wPDQyvSOPU4S4quYlxvvzUhMzfG+uFLo4OT0Fj\nvCjo2agLkWDcNjIlPh00/w//SRtwMgL9H83ZFzmrLVFVSZ0+wJBjeW3MKiY2\nJ5rT\r\n=1H4v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d082790f0.0","@material/rtl":"13.0.0-canary.d082790f0.0","@material/base":"13.0.0-canary.d082790f0.0","@material/list":"13.0.0-canary.d082790f0.0","@material/shape":"13.0.0-canary.d082790f0.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/ripple":"13.0.0-canary.d082790f0.0","@material/animation":"13.0.0-canary.d082790f0.0","@material/elevation":"13.0.0-canary.d082790f0.0","@material/typography":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.d082790f0.0_1630533355572_0.26560670325258995","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/drawer","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfd7e22ce08c8a4a967b5520613dbd28d3296114","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.e2c4f0196.0.tgz","fileCount":47,"integrity":"sha512-yiC2RosjDKBeL3k4qKu7PJ6UEwrAg8W9eGEg3ztTjxk+Bst1nge1LLlwX/Pq/5l8EI+9h3mZf/R/k0QB/Q40qg==","signatures":[{"sig":"MEYCIQCckcZudBEFNQBrIS370eINaC2ddfwUY0v8jTsp4lGTSQIhAL+xVo/vvWjMDMn/ENZ75lVzfCq1IolT3lBaqACtXO31","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDM3CRA9TVsSAnZWagAAt3gQAKQD8b2wmEQS1j/w3JWM\nAaVOYOl8OVqhJgd5oPiKALoL28cxb9aLKho28ysaPHsdBw9GmJhgr5UCTxWa\nSH5oJeplTZygmOG5DKOd2tzG95cGK5k8AbGaqPsYKKb6Nb3kYr9pyqdm6tNS\nvTNtCI9VblLumL/cfMdHRdC4ZLNCF9+TCc2jlez/q2DorCgr/GoKmIzfnzCB\ny6vUnyOoWHyvBmZEZ465mGbaw1cHjuF/4qOfjyqpZWDL+2OzxqbM9/nd5iBG\nUw3THSXKasj8yrqrTF/0uFzydFT9A/xrYNzQ/bMlDIdWYIzAaOV5vmCQpTW3\nMI67D49a6T68CRbz4L7htNbSik5UrYIW6crqUW/sN+uMKxXle+49fvqj35vB\nKjPokNl/CiJtqSVAqW2Qhd7KkYuwjj+2DYGFvKS91rNqoRtJznRGqI7TI2US\nyTJx+6LHgZBkp/DjhHQw3h04PpieXtyjDMK9m0HUxhvO6ZobaD9y7JPuEuFI\n6EipG8BYJOBuDoJmeJYmVjvdT2iWfeuu4tAx2aHdOM67fZ2pmAq/jWd7uJuF\n/bxmZHPxU1juclRy/WsRdwhWt4SIAuXTYzfsxwNEvI7ehVVCl8/x3lgMtNFL\nPWc8pujt3jgy4mgmUTYIPAFHDFQrNffc9GviZuz8iGk/3TIwE5MXNrunlapB\ntPNy\r\n=W6SH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e2c4f0196.0","@material/rtl":"13.0.0-canary.e2c4f0196.0","@material/base":"13.0.0-canary.e2c4f0196.0","@material/list":"13.0.0-canary.e2c4f0196.0","@material/shape":"13.0.0-canary.e2c4f0196.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/ripple":"13.0.0-canary.e2c4f0196.0","@material/animation":"13.0.0-canary.e2c4f0196.0","@material/elevation":"13.0.0-canary.e2c4f0196.0","@material/typography":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.e2c4f0196.0_1630548791256_0.8299739707615379","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/drawer","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.611db508e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae9ead78d7b5c6413197827a12320613b95f6716","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.611db508e.0.tgz","fileCount":47,"integrity":"sha512-WjIEDua40MLpflzb7MwvaYDZ8NAVTkOqLjLC0xwVMhrjA2ngK2xFYzofHApwVawS/KZ+f6Vlw9TtHF95f5wQ7w==","signatures":[{"sig":"MEYCIQCSl8PWtfgobfxFXM/ofsXqtpWh7lvejFZWsQfomFAdPAIhAK9C+Csz6p70jM+ctLPVALl09XQoJk6qsbcShYp37SoO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEImCRA9TVsSAnZWagAAMykQAJU2CcEROvz1h7FbpPKz\nz4O2zLuNWRhyFTXbVDh0Dolj8K2HzZVQlS0j0v0OY7+HzlvKNjtXmTUs6zV8\nkZhpC+C87miY/dHFEWSVcmB1RevBywMdh91FfqsnP5dn3K910hiO2tYBppBx\nREaGBEdthG9pT6VUdIJ9SceOK5PoNzrK4gjYyFV/YVw+xwRvQzHaXdIGK3YU\n+xONYbhtOHiA3Qezkt2+plm0rPKCAbdxcsQ/RofoWvR9G4HMWU4bI7D9mxqM\ndPkeR8BDJmBRMC1MRC52jnfdeurliSFaQVzUs3k/d0LFdo3sNGJcXJZxg6SO\nvhZie9ul9acpah1OF0FPitGSYs9YScbVTqx8slrRSqd5N0mpzEIHgFdXYom0\n/jNCi+6myczCQqSSUuT/l8kqL7r8PJeWFeNjZ1gtQv+ij+OihZ+KktmRu/lq\nH0Cj3Pu9EfDrsfO+rOqT+ax7nsYkICo0TcnbDhE4vgGg81On5sjHPxH+g/2N\nTSydb4tB3QgKc13hlMG16BMAWLLECs76Fy9C3oldOmhzwAYXl5ZaVtlUKWEQ\n+dLbKj2ZsEUjiYnTFCRzUqZ++NTdjKrsOApS2NqS3Slf7nSrIu3zQO0rL83M\n/TS6Gxrfor6qJT+kKpgq7zQVgRd0jSXVXUDZPomM9YlE/2eOS6gS2YIzArIi\nxr9+\r\n=ka+0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.611db508e.0","@material/rtl":"13.0.0-canary.611db508e.0","@material/base":"13.0.0-canary.611db508e.0","@material/list":"13.0.0-canary.611db508e.0","@material/shape":"13.0.0-canary.611db508e.0","@material/theme":"13.0.0-canary.611db508e.0","@material/ripple":"13.0.0-canary.611db508e.0","@material/animation":"13.0.0-canary.611db508e.0","@material/elevation":"13.0.0-canary.611db508e.0","@material/typography":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.611db508e.0_1630552613954_0.46462421923785113","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/drawer","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.d4706933f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a43a110d9afad21979f5c6a3bf3b35497eb7fd1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.d4706933f.0.tgz","fileCount":47,"integrity":"sha512-R1QJWhAKLwTU6FmHDAiQ5hj3Fcb1wFSVuAoHeUE4jPsCfzAzUbeegFjjUEQGShpj4n7nq0HMYJlBC9gdoPKB0w==","signatures":[{"sig":"MEUCIQDAo9cHASUf/ylCVWWOpiqgacv7xxqBC9X+96OTJpQS2AIgJ7Xj11HcSUrhbGICptJcAotGkKWguk/uJ6JW18kAxDU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMPAwCRA9TVsSAnZWagAAfCgP/0Rl0e/T0wUD6Jo/lIeI\nEddtXLATIGyuqKdXKEYFX2j16oOdXduL/6kgu69hm4Hp3ERCRSNFPEQM3g7+\nku0a25oc9MNq21qIvt4sq30lEMLI1UCOTCzlVLj4URNFZ4nOzhGwEW5j0dOr\n6zyXZYPhcxxGUYsNhwvqVe8FFsZoDkNbGX7wVL8VzIo1uvz66COB+PtC8kQ2\nVArpn9d3IEYnsu6OyUtaen5jJ0u6PW1pxnwKcL/gNcgZ2LJrfQ2lo65fc8jD\n3rmAn/0QfnfREv2vHHW3S1+eTa2gkXScw2sv4YNlXHnTZasX4S8qYrp7Mp6P\nki6Dj9X08t7bPH6GrqCLZreYNogv4+WzSk6znktYQvhSV37SiZuoG/95GTog\n0JFsMIwzoynlvtOHpThSd1iXSpMwfRbBZS0/tsDlWISF9JZLft9eBv9CgBSv\nq5K7OssFKYn3bhpq2YXimTRzbeCmg1+FyOGutpqhm/KYymUkKKJQc2C6S6uK\n2I7BPKYocBDHvaRIBJ0yvbQRIybCc8q73JlGE5JKkPKgH7B06xCU+JI0vqT2\nw7SKIO7MoyalWcE5m/dxJzGcyZtp090ANetvo2nyR/9zdQKuVp4euANmIM4p\ncfZxXQS8Y1BsMXWHVaCwseE676KpMMssQG65a2favsnOhNjGUKID+NhUr0XH\no5+d\r\n=MT9U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4706933f.0","@material/rtl":"13.0.0-canary.d4706933f.0","@material/base":"13.0.0-canary.d4706933f.0","@material/list":"13.0.0-canary.d4706933f.0","@material/shape":"13.0.0-canary.d4706933f.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/ripple":"13.0.0-canary.d4706933f.0","@material/animation":"13.0.0-canary.d4706933f.0","@material/elevation":"13.0.0-canary.d4706933f.0","@material/typography":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.d4706933f.0_1630597167965_0.18194442599820992","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/drawer","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad7b2c18943a90b2cdfad2f02fcf6a17aec1879f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.c16fe03ce.0.tgz","fileCount":47,"integrity":"sha512-GYhhpjdVeO3z0kVh8Hw6WXlB3zRe2wOfm4q70gnyWl+pKFNLSPlEeYOQ+SdxDSy1wxDj9Joedt8iASEreVqsBg==","signatures":[{"sig":"MEYCIQC4d7j+Oc9TSJL3ekEV4xrKhhaawRYWZ2vTlwbcE2JBKQIhALuJYuDs/1VNM3LEaQy4GDdrOrsqyfgEddwNqeSa+Qqn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":973470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ31CRA9TVsSAnZWagAAeQgP/2Rc7OZgKXTYdRQm4Wbs\nPAB28Dbgr+H7DHxUzsJFNjpJzE7K2cyPpJ/Q/noSpsJTdAUD2fgDhLMgUERM\nh69LN2/s1q4UCspumsCqtsFW/n2CMnlhHDVUM/m8lPfl15OsYPKk3ixyt+nG\nt/06VqxJCIDKSFQ+70cy4AzAd3q6g55lDFAn4hlSXIUHvYvrIb5Jz8zjzjoT\nvqrUzgKz4OrPAZ9iR0LLcdX0PLchrw4CHzefiQlepXCLzkv/PKKUdqFFMoP4\n5sTGwy2DPnmIfhvWXYfegaGKBpqqqLc/vLTLkQ2n39A0sar0T1ooKiUdiJw8\nbrrHEPI/w/zl6Ua61OWYoi2Ml49w69Px6GjnMQQTZEc0f2rPm8T/MrRtjTYQ\nV06liOPikllMtVJZDrOs+H0HXKN9wwUuMWn6UOZihcuvkgilHFdxrQq73xTM\nBBZWmZfkY77o+W4cpEr6dVRd2ngjCL6C+ZHwekxBh17kvlfYwJw07UjoajUN\nYI5Q4KunC3YnaRyHFNhhQ0OUd4X6XpSQuJ20of7+BJcucrJUWqLBKwxoGZ+a\nEaCFWBNvdNEPyrT30xJwMBTIUfMsG9ct+QGTAMOSaSWrc62lyj3vvk3Gr4Ju\nsBAgp67fV99tyo/TWeyfhS1pcDtKh3BjAf5EOgHzW0p4XuUS4wL6ziOEGFa/\nD3y8\r\n=19NY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c16fe03ce.0","@material/rtl":"13.0.0-canary.c16fe03ce.0","@material/base":"13.0.0-canary.c16fe03ce.0","@material/list":"13.0.0-canary.c16fe03ce.0","@material/shape":"13.0.0-canary.c16fe03ce.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/ripple":"13.0.0-canary.c16fe03ce.0","@material/animation":"13.0.0-canary.c16fe03ce.0","@material/elevation":"13.0.0-canary.c16fe03ce.0","@material/typography":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.c16fe03ce.0_1630604788912_0.5420838175301472","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/drawer","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.9203a958a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39cac41f8f04cc7e3b4cd132e53866508cd7463a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.9203a958a.0.tgz","fileCount":47,"integrity":"sha512-EaLVbALfnf/zwuaaejWVsfjwUtp03Uf33PvN4LG+bnpuVopjkO1px/sjifB1inBx+kxrEtF3BCG2lRIjxOuaBA==","signatures":[{"sig":"MEUCIG+bb98SHxC6kAwjXHNOelEMtJq5etQ84kOJ9pI9hPMbAiEAm9S1Y7iLE+TMhjUCmPtifqak5Y8eBFjUk4Lg8QfpemA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":974215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWKfCRA9TVsSAnZWagAAbV0P/3k7/VGHAeOM/x2RTc4R\nfu/rxH0AlN1zOUdRC7mesA0+DrI6G//Jsm4NCGj6O6DX0Sq49I5VUTN4Scw4\nsCy/FMdMeU0wScgpy6CyYdBTiQP/TsezjREW/LhDUs5HcZJX3+TbEz/lHmFo\nyUpLtP97ubRQphLhzY9YX2iBzp3fjhYLQfOzshbGLG6yamH5d15T0c4phNsG\ns/0+0kdQ6TkOvmBsbp0exN8c51lPFCLG9KAB+SGq3aTncdF7vXdj9GsNiSKW\nmLYRMRTyRE+yX2M7NPrupNvByQrH3UaJPKqrzAC+c07hRSe+hW8xewiQNWdz\n67JRP+6cP/AVBq/29RHmVzi01f6zv6QI8QIPgJ3oTdC4fboUdeQiWLX3Y+ma\nSMiTYHIT8ZKn14/JH1GjgyR1den+54oSwxNHHcrALskb01xx7cg4QEnUmdJS\nav6eU0RscfittCWoo7q+GTx2QI4SQCwOOGmdhpYJwgPawlZ/ijNhFIkBvVkp\nylORmfxyPiAe/O3/YnwmUPmhSvbH47D5bWIRpt8m3A1PS+W5/X0LEUnYzfIe\nWpWu5QSsnSfw3PSxgGGI2wC1sgdD+cDO3F+62rpkIP9pyxqnFxouHgzFCCsP\ncX2OlDaWzCQ6msgQoA0iYtY/wcZYc4ntCSZx0tLofr8QiBjiTzekzQ27Ks0C\nESXs\r\n=pHzH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9203a958a.0","@material/rtl":"13.0.0-canary.9203a958a.0","@material/base":"13.0.0-canary.9203a958a.0","@material/list":"13.0.0-canary.9203a958a.0","@material/shape":"13.0.0-canary.9203a958a.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/ripple":"13.0.0-canary.9203a958a.0","@material/animation":"13.0.0-canary.9203a958a.0","@material/elevation":"13.0.0-canary.9203a958a.0","@material/typography":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.9203a958a.0_1630626463177_0.6074089083644945","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/drawer","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a50b522d0502eec49aa80332a159b689f806357f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.fddd5ae93.0.tgz","fileCount":47,"integrity":"sha512-13xQ0m+K9VBgFSsHm4DJGJIPqztkfDT6DwgdwcrJ4qxFeoXaHHgN9+WB04qv37XAogyjhaA2tzJInugdOPLbew==","signatures":[{"sig":"MEUCIFr8Xnd5w5FYq1nO72ilisonIs33ZRWq0sF8KCDRNf6ZAiEAh1jOLksvzjnvkr+ju14YfxLFcWvgxEWr5bqGZaxVZMg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":974293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9PCRA9TVsSAnZWagAARrIP/338LTUHaCCQmpPn5qGC\nZSM6YSLnohUkpgoFJU0Y5GronblQHnJ0DWnqkLyB0ZRhFg4SQnNVPDo6hCzu\nnM/PHYI5PvKbqodS1mZKv19HP8ZXA+dC9mtHVi2vPRFIvHWzRujrWjeQOEG7\nXP/24UQRAM2/9KFf1GZNrOVXMDg4qKoQcf9eFRebjzFQ9T/w/JnMQhzkrKhH\ngpitTuDzWDUyIjzH6b0d0OwBrAQRO1o79adre0mxGZDsrYvPiKfvfzr7s9Vh\nsNpAnmFdKmQhuQ3/0+Z13t3WfCIZHUJkdxQARc5gqVIaLeP9YzXkzHrpI2Eg\nJh1M+gx7gF6ae+gRSqDBrtmxgKrJbYEycMlY0/+aAKN9CWWlMmA42ihu7NwK\nq0lyNYxHaLUTEqSVqb1Eb+57gTTUwYtPiCNcmoXOUB+4YTwahtmv64z3nZ+o\nLYib6M5q/nI1hw7+E+v1cYTeKdSBDMokGmmZhj11BJvV5bn8RSlMk+nT50pM\nNXXxE4ctRZ2c3+J6bne1BC/kGRRuOAfTmBXHILtTAP6xw2DdNj+c3lPiAMdm\n9ZnZ+SuU0xr7aBT5yyDKSGb5cq2rroZVCEQw1aBLyde2Qytzgo/EHxBHD6w1\ntSpWlnIVcyRHmAv4Gf4TpX+x4LD7owTGa6MB1rhGQPTDiKd/7S+JVu5n299A\nkmrf\r\n=LC17\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fddd5ae93.0","@material/rtl":"13.0.0-canary.fddd5ae93.0","@material/base":"13.0.0-canary.fddd5ae93.0","@material/list":"13.0.0-canary.fddd5ae93.0","@material/shape":"13.0.0-canary.fddd5ae93.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/ripple":"13.0.0-canary.fddd5ae93.0","@material/animation":"13.0.0-canary.fddd5ae93.0","@material/elevation":"13.0.0-canary.fddd5ae93.0","@material/typography":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.fddd5ae93.0_1630654287297_0.4400384611645829","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/drawer","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.117599a8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b14c0142321f72c622b3498812a7643bf69e976","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.117599a8b.0.tgz","fileCount":47,"integrity":"sha512-c+Kik3Q9END2SXcwGZi7S0Oke5fJuFr3YcY7edh5rfoa0pycjTVjbH/SR3Jh/ffryRiZ+AqfNlRECq4plPCGQg==","signatures":[{"sig":"MEUCIFT/ucj/wc2CgZVwHyYE/jbHGK58a6/wbPCtgt6H6f2xAiEA6YPcV8gH6WRWzihKxu2u1eyyBtNOo+rJE/Rn8Bc1BIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":974293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+tCRA9TVsSAnZWagAAzVYQAIeR/F1pS93ycdq0iNfU\nbAej9NwOcLgLro/14Zbs+t/WKEZK6uLASNSn7iRoeAtQaRjHhjOtBGhS5/DW\nzPbxXJEmgyFlYOmOE8j5fTIhlMDRs1rXb42DMj+M2yEyoazn+9X9JkoHoHNW\n9MHPhrrs2iD46IY+vkYtJqv5OmJpmbQg02ZZk9FEdw148Nrd4Z0v/4ryVQ2O\n/euHr423yw7pAjBYHD9Ub4zhO/UNpD+GrqxqqtqybZjnrQbqkeOvaPQv+oK8\nXRP3qXpRce440SC+JZU/FbFgz2UlI+1Spe9wRoj5DeMhdhFpRx0Fmx6W/Wpu\nPmbGjA4KSWdMCgDtuxkIU9eIkBaA70TSY07/otav4bVF/yl1wD9HmwnLbDgw\nDp1jb0IPmfaDQ6wo7UQIJdmOoWH7vKKxpadPzLNeyDepxiv1e7x9xufEYgkm\nJQMg15VDTu6TXYPPjP9Il7U7JLIG9nV/u7uXHTRlWPDXzmcs7zqxgeN0deCA\n5mvAZca6MAlgDYQ9rDHTBZrZOLcmVo8MXVzutigyj91zt5XswgtcDUBihSJp\nqOWb8fA6OBmLjHFQ0t/LJ+9R0rzHUfUl0g7bp0DHJgUtJm+/u6qnlrHOyUFb\nu6SriGb4AI7Zo2ndpyIGsdtfEutNHQxaO0Gzbw+rVEQ368ZHPeXhSzuAAuUi\nM5HV\r\n=qzLm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.117599a8b.0","@material/rtl":"13.0.0-canary.117599a8b.0","@material/base":"13.0.0-canary.117599a8b.0","@material/list":"13.0.0-canary.117599a8b.0","@material/shape":"13.0.0-canary.117599a8b.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/ripple":"13.0.0-canary.117599a8b.0","@material/animation":"13.0.0-canary.117599a8b.0","@material/elevation":"13.0.0-canary.117599a8b.0","@material/typography":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.117599a8b.0_1630654381694_0.1029493694307555","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/drawer","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d327ce15eaf66fc43792fcd1091291266b8ea78","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.e4180d07b.0.tgz","fileCount":47,"integrity":"sha512-XR8Ext/jpup5sajr7Xwuk8orNURuP2ed7qhA5zSHQBjvO9dDfd2wwjQ8c6U00XcaaSQMDPzZpih2QKXH5QwQ+A==","signatures":[{"sig":"MEYCIQDWyv1KrlQY+mL07kyYGbNeZzEAQBx2Gx/a3+aWduR7JwIhAIwbV0Lh851Gywe/3YSjnHe+vKlXDgY0i9IqfK0mK87g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":974293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc/KCRA9TVsSAnZWagAAfrYP+gKW3hdaX1TEz8goH+jq\n7fYW4L91hlGjHH1OeUnwVUPlvUnaXfO3P8pdCCj3+3Pff4/73as5IgJduHlf\nHArvjh8mOBl/Sild1UUX2wZjBJ7lx7fwIjIvr2bOtVjQqAOOd8/9cO7IX2qr\nzTW4jdLDXErDf0nd6hqPP03axFzQvvPUJHwVckTPLfQDVdfcNYOTrw/6tiVF\nmCVI7wNFvjbmZMWO9pfjtSMzC+2338MLBELdl5MckYI5JP1jY3tFUSnnATLL\nWG2aSJMH59oLuwYBNdERav6ehPLTzOfvR3FAYHqj4WXfiymSyEtsH36dENqk\nETj79wW0Bbomv689/H6cqApffVI4C+8+1jMrxDC6503w4XuE96+x/oCoL8ji\nmXcC6edrRnE4fwSIyJl4SioRxe3/4sCjg2sAlULGPmJafRxsSN+Z1crdPFXL\nFY3frOj8IJRwBclOc/T7IjHpKjdWDEO5rAFZgoYTm1kxexqLStEpDCzxHo0w\nRNSpEu3/Zb5lIsELnzspYyKnCPnGtlNuylakMk3bQZPSL2bCEnSVPb8ztAIw\niH6SyNTVf4G5DzAgQyL981Mdb8RA8zf4lD90a5ZKyzy+tkp8GQb2gVLXbf9f\nPbN1U5TZ+Zs1NIHvfOkH33/yjyfuBdqfpEQ51BgobuTrPp8ots0Oia24tWGU\nhuVP\r\n=/e0K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e4180d07b.0","@material/rtl":"13.0.0-canary.e4180d07b.0","@material/base":"13.0.0-canary.e4180d07b.0","@material/list":"13.0.0-canary.e4180d07b.0","@material/shape":"13.0.0-canary.e4180d07b.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/ripple":"13.0.0-canary.e4180d07b.0","@material/animation":"13.0.0-canary.e4180d07b.0","@material/elevation":"13.0.0-canary.e4180d07b.0","@material/typography":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.e4180d07b.0_1630654410399_0.9243537454575579","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/drawer","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.42d175efc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5a2e50f99977dc97629877d47e86f6e819f80f7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.42d175efc.0.tgz","fileCount":47,"integrity":"sha512-JeFBftzKvexn0v3IxGJeJIksrW3/KcRrXdHq/lYcC7/bTG5HZBqyzxrmpXmwC0jV8Xvq21k5otzNzirtXzx1ZA==","signatures":[{"sig":"MEUCIDJ+DkUFbroviOcRAOqV6Ve6YyMjI2cP3SEnFLkTK+DKAiEAjPneAYj/xUPxNOlo3q+Cw6CClobgQM8zP8u5EDvNcsg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":974412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkLQCRA9TVsSAnZWagAArj4P/2yiJuVhHbp0VId1pK8b\nj8iHATKjkVoS59afADEiORHlKOHsZhMRjWqzhYRSJfiMsr93UCH9fCzzseWX\nFd8q05A0SuRvS9JzxkztZFP8BhmALRWP0C0MH59bRS20ubCOQkcWvAASP1o8\nAHJFv7QjPuCiL5hk8ttzPecu6zlhff//FZGPIOpvM9sUGW4LRurfDP6tSJAB\nLs4PscCP6Py9DJDzztrWrgUj0Z3sdSt24zdUDFvdmD2UwIUqeipB4bsFAlWs\nQ6PoV9b7pCaj2G+C7igBjpq6ftQEdhfkRuFE56jySZrqSH3rkgcfGXXIPD12\n4nSYGVavZVA9LT1D8aEmvnRoa7Fx80pexJXT0gegEUAPLb+5eG5hHER4N/ar\nouo6VuQYMbx8t8aUeBIJ5D3Eow52yJp04loxupShlSoyOcPzCRT1aHUQUMoJ\n7WJ3joGPEar1VXsfUvRNpoyhankFOCdjo0SxyLjdxSSM+2g6S3DC2Xb7tDy8\nJ1hTHeMbPd83s17wTvyqF5ypXI9eFr2na02mBq2HN3ydpcTvcCY2+QV4VGCK\n91GkPSjUig9Uc6DLf/46qKZdT2MC/3vlikQY7leqOHcwj2GX80PAnZ1LksGs\nIUH4mSsligz9HbyE4j0l3+j8sioBu1lZ6uoG2VD6dV64dvjuI3Ye2tOJLf6E\nyEFJ\r\n=cVI8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.42d175efc.0","@material/rtl":"13.0.0-canary.42d175efc.0","@material/base":"13.0.0-canary.42d175efc.0","@material/list":"13.0.0-canary.42d175efc.0","@material/shape":"13.0.0-canary.42d175efc.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/ripple":"13.0.0-canary.42d175efc.0","@material/animation":"13.0.0-canary.42d175efc.0","@material/elevation":"13.0.0-canary.42d175efc.0","@material/typography":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.42d175efc.0_1630683856347_0.5176457962714818","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/drawer","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.72464476c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac07b5def9cd7eb3ed7302bba596a3d589f25dde","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.72464476c.0.tgz","fileCount":47,"integrity":"sha512-+xwfcshq7XrWB/4d5axB5erjg95YLVlBAjasYNWkYmnUG2JymCwS2pCP1RJtfLOwXoL4VaAWs3bx0D+6TczsTQ==","signatures":[{"sig":"MEUCIB4VoOd28R1Ky/573zwHfExx1XckjN13r4HHp01G1P67AiEAo0joN/k6+q544BpsMpHJ6ZpZ0T6GUvOiQDjAhPEKgcc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":974412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4bGCRA9TVsSAnZWagAAWbIP+QHx0L4OnS0IBVFEfJDY\n+ajmVApkVBbIck26dVKjEoPa33dPe1vDJR2rZktE7Y7Y33AOuH+D2iHkmyWL\n0taEV3lINTETt8y2IeuWEUYiNPZzn5dyN2ThGnALJpm0jk08zOrvBHf6eIBF\ncrGr7E5CrE7UpfAWv90Vhhst08NCp+yH2vfqsVTN21xTUcCywcui1mThIzyg\nAzATFX9I5c2tvvpYYGkHoFj4b/g2gU/0pb+gpxviDmwkuZYO+oGhj11jGOQl\nQWzJO5P/8TC5OyzocQSoE1wKJyxmgtJsGONNL9D4ovRLxx5gwWOoZA1K3Op+\nPDIQs+Fb4MCvu6KtycOv/OkYIZpt17kiNToCPo3frwy9tjBDYNE/2Grj69LS\nho1k3uKjVZVYQMp53B/iZPHv2Uo60y8Qcq5xp5rZM7CwpnnYUeRffGxIBBCk\nps5Y2CZLBEIB6yytx0Fwlgk2HBEF2QOjCngVOQYX4c8YBCqTMhkC9c2BcXIy\n+psPKnZYPkxDwMuB34v9drgqaPbzjN4gWGLksoGEAaRENYI9ybEResW+HfFr\niTp7n9mGG6IzbkUERCJXGovQF4QRLFnNR0+kdH/R+GsFms4/XS2zRJihH5ZO\nc1pv6txHDoJUrkKKttR+jXuVJwbGUBJxEPBC8ran2JsEiJcHv69EuglWYOhW\n8gFn\r\n=HcaH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.72464476c.0","@material/rtl":"13.0.0-canary.72464476c.0","@material/base":"13.0.0-canary.72464476c.0","@material/list":"13.0.0-canary.72464476c.0","@material/shape":"13.0.0-canary.72464476c.0","@material/theme":"13.0.0-canary.72464476c.0","@material/ripple":"13.0.0-canary.72464476c.0","@material/animation":"13.0.0-canary.72464476c.0","@material/elevation":"13.0.0-canary.72464476c.0","@material/typography":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.72464476c.0_1631028934140_0.7034147615716178","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/drawer","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.37d4db866.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c24b8a57275218398706f4080c63141bfe42992d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.37d4db866.0.tgz","fileCount":47,"integrity":"sha512-5jnNu/2n3x+c5kooXCEYI0eSW5e54a6dWKEL10ggSRHHDL+JD8lHusCxbfOUCgMxbCmLWojrbTEcek67oV17aw==","signatures":[{"sig":"MEUCIFPHug41I8G3KcwRHxAfYHzc9585r+pH0T2o/2g/mDDTAiEAx0gKyPPLIj7Q4MlDDYbHuKxSK+N1Fl9rpFKy59hE2nw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":974412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhuICRA9TVsSAnZWagAA4CoP/0WhqRpbr32qqtl8ljBz\nK1HZ9JXiHXcN3zvbIqqg8xSDR0ppdzVSQwuJJtyQoSvsYvzqxvRnAiEx9U8X\nO6qVcJPiKqqQz+IA7tNEUKuV/GPL08coyWS/425z/UJWAbHyVCDmcHnVRvMf\nfpdLkrYP/D0qryBnxeziDY4Q0EGZa8R6huGgPIYF1oTjRNTEO7VeHbgizjoJ\nJhl/yTBK+NS6MbTq9p97GlViE6s+vmjlfo/roqBPmvH7YAqhf+ihBRsE5mG6\nN8m8mmiAv0clpVe6ttHd2/Do4yEi35Uq/wN246s/LrvSC9ii0pPiH81qgxoM\nksPDSR8oecXXZDrBcaa9unKiDdDqALVtPmJeRsShTpoWzrDI9pfOX4rgYc+U\n/XiSg4jhpGUjAVbeKLpbGilOJZrwzLmQDbWZu53IWRpkpw2dFJNPIAXeISxT\nEScRI6UlnNknaMGviw6yqxd74P9S4qyWv1beZ8RFRYN09FpIDMeZ+quqxciW\nXrC53KyOpu4XBX8mYw4v9jWuRjzhX98KPwUeT5uzGzMYO6E7Ms0C5F6Ymku9\nfnJXNmAnd4p8DTNj/XFUNyCfxET9Yeg+wTT7C4y6FyBiy83ghyV8wcpJsj4r\nytxIXom9ouKt0QDJuq9tO8vVPju23+DZgKU99PiRA3WgIb5xzMsy3Pi297Ke\n/fpH\r\n=6K9Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.37d4db866.0","@material/rtl":"13.0.0-canary.37d4db866.0","@material/base":"13.0.0-canary.37d4db866.0","@material/list":"13.0.0-canary.37d4db866.0","@material/shape":"13.0.0-canary.37d4db866.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/ripple":"13.0.0-canary.37d4db866.0","@material/animation":"13.0.0-canary.37d4db866.0","@material/elevation":"13.0.0-canary.37d4db866.0","@material/typography":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.37d4db866.0_1631198088186_0.679681525659598","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/drawer","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.6df682e74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d70e604d6249a5f9d801e081fd53cbee45fb8225","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.6df682e74.0.tgz","fileCount":47,"integrity":"sha512-Nez5sMBnKGiAtLzeu53zf/e0mXZ5acXBdiC3WpiYTFGA+HeJ9B9X40CC+s8oNbOuTqJZdq/IBxVwy6tMEoI1/w==","signatures":[{"sig":"MEQCICcINUOoqKnEyX+kPpit+Q1QqFdNuH3kIxDB+/C1szuFAiB7EGtKjbbInQ/s/W+9tVXKapeZ2nYq3yw8tz+isZzKZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":974412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOiveCRA9TVsSAnZWagAAt0gP/jXFSNpLM73bdTdJMExx\nkvBG9h4XImpN23fIQywDn9FPAA40YgvQuFuy8N/tJt7GTpT7gSQaCPYsMlHn\nOugqUZJkTkZeb5sXTAF0x76YxC2f/cvB1Xm2rBq3g33ZysSfX+Fj/t47QOCD\n5qaQDOSHsjc4JsNQvSwGARxCDp/4mP6Mtp58Ozss+foMaO9+uvUGpQYT3vX0\nOYjjjmah+vCTrwK9XOfEE14T38bJLwYpz7x/6CKajDmW/u/H53XQ6AadLrKo\nWS/4fov6KiGn1bxbiVlEj0Ks6d5ugP60JnMbmVuxfDuyY3VDm/eRNwpY+Wad\n47G2HUzKbtloXwvhwGsd8oX1iZAxZrZacgsaal/ygl57I5pdTuULwUOozQJX\nYBBV64nVfcba4rvruIUeqyrTfvEDuK5U+ysrvOODFHI2EYoqsWYFscxuM4Pg\nWVIjBdN2yyNVjGxEQvtzZhMJPLDJWoidAwEtoHH+tRSdF7lZibKtFEePN94o\nmAkKYly8htcoxqUX+1rmwncevQoiVD+8KTTONnlktoq8mAST0w29ikutopGe\nIzNFhZSRoWqL5gDCW+vbAwaOhEJ2Opyouwr5UM6tq2+ebrmueH6GmVOV9bBa\nSNG/+sHvvh7cZT8xdp1ACOlBg6DLhEUHn5U3R7d3/gYWgE9RgNNPz/1TXAiZ\njBmk\r\n=Wef3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6df682e74.0","@material/rtl":"13.0.0-canary.6df682e74.0","@material/base":"13.0.0-canary.6df682e74.0","@material/list":"13.0.0-canary.6df682e74.0","@material/shape":"13.0.0-canary.6df682e74.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/ripple":"13.0.0-canary.6df682e74.0","@material/animation":"13.0.0-canary.6df682e74.0","@material/elevation":"13.0.0-canary.6df682e74.0","@material/typography":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.6df682e74.0_1631202270695_0.7737241125756398","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/drawer","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.b49359c35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"580c6cd2b1dedf379d011a350fe5994704d327af","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.b49359c35.0.tgz","fileCount":47,"integrity":"sha512-Ao+v1IJKOylxU21TfiDIWhdEo6+BFaXa9DXQFg25dl7xpGBtEmqD5IGhct8h4d4LmCPeSNXx+BGW2JUXGYGj3A==","signatures":[{"sig":"MEUCIQDUT3WopYIiBsKvDxBlTMeWz3fznCXxeJPnIFQn1f8IAgIgMEcEoSS1jl1juWHoO3a6EnWnbt00NJw0DHxFxqp63Qk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":974412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkY3CRA9TVsSAnZWagAAR2QP/iQW2KwIML6biwhdE4fX\nXGpDTlyDhHL/oSQGBmql7c6tcyWg24/OO4WAzvKhUgtgGx2AJvNWY7IJs5Q5\ntYqWpdqyikt6F5YlYFkseZN2UYf67tXPLNMyHKcndG/Y4+mvwjY9IOYwvRQ/\neZfVUnvm8T2cB5SWovXmFEppiNSFCl0Xwm72w9IymQWbRTvrs6Yhy61qtqjg\nU5FotUN8LH64WoBe5jyySkdBaL5ILakUG6sDqd69e5DDtlz3nIV728h1jYiE\nbR3VqB2DXhweBWkdscvm/e9BwCrxhpa8kaXVp1TecG+ZBZZ+IfgsI0H4SFR7\n2wjCgWVgznLGlHZT0SSnrjKCWo4sy+NvgeILT7W0zNaCH0TLNko6V+vk6uBd\nQsaQ8xuwjY5qxVJGIGBB4FIvFvp+OhbiLR6X4XChE31FO0NA0qG5LLxSBj2G\nXsWwLxA8R0OoGXlU4kkOAnIGUze1Sm99yJif3dD8UZo6Mj9MhQms7vKi+0yl\nmQpH+jkhsq58v0uPCzEZzenqEABi26F9Kc/4vdDvwDM9LbS4ujNNOsj/dXjN\nj+uQuaIiB4rF1QuH/hWFiooAj9vilOCAuK+9fYHbLmktf7wQi9R4rnXeuTAs\nXM+ugOSuGXManhn2Ie73RkdDDGmoe1HIuvoDifg6JClhTy5QiS9WyuTbV1lK\nn51U\r\n=+EEd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b49359c35.0","@material/rtl":"13.0.0-canary.b49359c35.0","@material/base":"13.0.0-canary.b49359c35.0","@material/list":"13.0.0-canary.b49359c35.0","@material/shape":"13.0.0-canary.b49359c35.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/ripple":"13.0.0-canary.b49359c35.0","@material/animation":"13.0.0-canary.b49359c35.0","@material/elevation":"13.0.0-canary.b49359c35.0","@material/typography":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.b49359c35.0_1631209015360_0.3484069326036101","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/drawer","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45adad580df771a4a756bb2d76fe5d32579d1e02","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.470bd34e8.0.tgz","fileCount":47,"integrity":"sha512-wx6g2mO8dQzO1fz9fKSrS7JQ+VG8rhycddQxZuzpc1U1GDbqubXMjAPejG4PrrttS3jIXFMeh8NS19pulqWNwA==","signatures":[{"sig":"MEYCIQCCeVBlerXSyz+W9n5/eTSJYQSQTpuGOg+2XDFZNhQ0WgIhAL9DtU/B1f2HeozNbw8mU+zasAWPprg6xxsDVPvKU2Qt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":974412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkw3CRA9TVsSAnZWagAAU/QP/RhItOzGY69hbVEY9bL0\nCUb/TxdXQ3JUdysuX133UaOoXeek6nrkzqZQnrcvrzT5NqCJ4qYOYLtWr1Tc\na2D3KzSySS1PxVyRv6xDpYrdTevS25glMsAGqeg27cvjB8Gwkjx1oYQT3uGz\n5sa0fPpTFUj3m9XQ07fmjpljG9np0c0eq7i61bc/ViFwLIAD7DlMshAgR/Yd\npCCyZWCUDkrk4EZyFfOyKgaKodOGdy1V1dVFPGZw2po3loEa+T8yCCwxbHJB\nuDNWgBmKU2FrCUIb4EMeNS98MCAsoFW0NndjFVz9GRXgjjUmE+5C00DmOoP/\n3QxClWbrN/49o7yKAi7Od8v5XyyjvzU78W1wrWAeAMoj08exh7SriyJ12g1z\n+Saag+XT0hOY2RE4DqNl4JSILcoprise6PJ1otbqGGeuJXt+9DegEaN65JRV\nEO/Ze2OV7ICVAo0ULL7g1GP4QfnldtRsZVk3ew1v8XA7dEkcwrji4JijljMo\n17s03XGlxNvcKLArsq37aCIjBcFabFYzKfIWJ8DN55j8Cz4dPUInFdnL02SP\nVxqDRa03LwmemQofvBvbDcU+sAynZ7OV10S/AbQD36Xov/2jtkJRoNHwn4OX\nyQ5Db+VSV0UzgILQcfkmB+p9oz8VDsCwrXIFJleJksDMBoTexbUOw2pod4KD\nrDVi\r\n=f9em\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.470bd34e8.0","@material/rtl":"13.0.0-canary.470bd34e8.0","@material/base":"13.0.0-canary.470bd34e8.0","@material/list":"13.0.0-canary.470bd34e8.0","@material/shape":"13.0.0-canary.470bd34e8.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/ripple":"13.0.0-canary.470bd34e8.0","@material/animation":"13.0.0-canary.470bd34e8.0","@material/elevation":"13.0.0-canary.470bd34e8.0","@material/typography":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.470bd34e8.0_1631210551151_0.22016966551423311","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/drawer","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.d48a01771.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9424d6cc4cb269a02dc228338ff31faa98e47e8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.d48a01771.0.tgz","fileCount":47,"integrity":"sha512-7U3npuc0a9tSn8u61Xla5QcyvHPm8GclIDfyZMOXz+fn98sSGoHEmAvGwADZ+pDL4wAKgwN2f/QXzLFN9JPHyw==","signatures":[{"sig":"MEYCIQDVFl61IDIfR0RsVwwyoNLc6d/G5Tub+obHfxRm5fhxHwIhANHn+6GiEWVMX+tvy7j0OdjwWC/ddpLsv822vLdQaSb5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":974412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk5hCRA9TVsSAnZWagAAgG4P/2HtVvlBHvolBCSyMTaI\nlH4z2//SegmbUYSJuPJxZnMEH5DkoisO5LMEg9SoeSAwYFCykVgi2talLYRj\nIYJpl9obGOAk7mtifRQmpdVGeNPm6EbFzb/ntLeTb0ZlrbrUvWo9RPQIecfE\nzqAAbUJb1zbr1P+hAfPCJsnMgK96yhlXIPDIgDMZaaYZmu3fX1Y4sn57tO8q\nyFJE3tg8bRTHdoJSfvyeCRbeX2QvvmwuItAHm4kd8x/was8ejwonhSN6/BoH\nUxxBeIG0r71twbwO5SJm6+BgkjCJHvv/nXMKKftP96eTW2yYjBWkSBRlAOYC\nqesHpWLF1IadyfNCHZvIBfBBxVemFvcZq8P/O/XcGbVf9NE/xkZJTX69DgxF\nl0KqYAQNyJu0gJkuL0JcWGR4YAu/zC54h1qDtTS+akJ3peIDPq+Jn1Uxn0By\nEpFHF63yeKhMr8dEqs3emt51iyEZ6wWTLB+ipu7W5wsxiDvUJhIZwybqgTZY\nbsENe6X2n36sO1uW/X/QsoPh6mnDqFXmUgwSbKsz8UlNe0p6oe6RhNvDoGOT\nJ2fdFur9ZE/rM4WxcLdNhcN3hdxols8i6mcUwHxZR20oqr0hiYnTF8u0eKTT\nhPhD1fA3g7ywjefC3Y9RTPstTX1BQYP0Fnjx7L8J9wCXGE/m7wqSu75oYqGZ\nEYE9\r\n=V/e7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d48a01771.0","@material/rtl":"13.0.0-canary.d48a01771.0","@material/base":"13.0.0-canary.d48a01771.0","@material/list":"13.0.0-canary.d48a01771.0","@material/shape":"13.0.0-canary.d48a01771.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/ripple":"13.0.0-canary.d48a01771.0","@material/animation":"13.0.0-canary.d48a01771.0","@material/elevation":"13.0.0-canary.d48a01771.0","@material/typography":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.d48a01771.0_1631211105597_0.4423099417419676","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/drawer","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.13db34b34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c62e7ae35ff1ead4e717062a5384af0f80246cd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.13db34b34.0.tgz","fileCount":47,"integrity":"sha512-by5A3G4FL1/i3rtx5RykYX/D01wnSc/oaqXfDwJzQI+TQ/dABJWorPhwIh6blPStCGJY///7MPIsTFOEaA8ZIA==","signatures":[{"sig":"MEQCIBWNCOCiM0+1EselHvtTwld7lsvLp6T4FJNoW1v0o314AiBMn9g3WSN6XbrTSi16Lf6Fz4xExFhe0JwDD5l11Sw6WQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":974412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlHkCRA9TVsSAnZWagAAlOIP/3TGKNpYPIEmswf8mOy6\nkcFGW50z+aQ0lUvLZ2p4Xl/9g5uylg6l3ngGKUd2gCu4y4vb9B26C+0wxw3Z\nE98pcUYor2iGRtUbAWMZvLK1G2DXUIUuUh3+DaccGCEmRlL514EAz9D0FROA\n7i1u1iZ9Z+9S6rEmmrYmu1BZ3lPc0jVixX37Y2ZGVbKZjwfZCUl1S1jWYz8N\n4OVDbpwDfdFxTo4SbTWsBJgk9JDhvWrMpS3uCbGzLYCbKcG+gA7fCskrvqgg\n8Hrr+e70EjlPjgsrS8ANvq/cXt5/NnswA4CEKq/ph0VWJIeuhSTDqagsixhy\n2guIoTuQ1bbtpe+kdgkt88BV9O5wsfrgC0+V70/rOIPzpPlCiL7yiUbRITlB\ndigmzfH0nNoUC7GbzNBcsguXbl+5QBY/hxpweKo+2wRal0mGMVWU7hZHfsRc\ngfn32MwnbpOReJBVZhnKIQOQhz+xcAqmANT4i6yTFrPbuQQLeE3rHflkt5wj\nad6xWUVeXsZWZEvnHjCr7LulZA81ZesA3I1llY4wJMI3S8ArVmif3vYf5D5g\nnmDa3OraKiCvDrw5OB2bdCVExLg3cQLFU01oUucwlqVewGgEbJOuUxhMB7Tj\nn7ZwoitsUrkTsNxty3ZU55scT61xbX7N2Gdu1aSFxe8DKR3vPN9YZ61GR/0T\nhHb2\r\n=VGXy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.13db34b34.0","@material/rtl":"13.0.0-canary.13db34b34.0","@material/base":"13.0.0-canary.13db34b34.0","@material/list":"13.0.0-canary.13db34b34.0","@material/shape":"13.0.0-canary.13db34b34.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/ripple":"13.0.0-canary.13db34b34.0","@material/animation":"13.0.0-canary.13db34b34.0","@material/elevation":"13.0.0-canary.13db34b34.0","@material/typography":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.13db34b34.0_1631212004178_0.22005631024540406","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/drawer","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.864798678.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecd90de5a1fa3bf0cdfe9c3fd3aa0bf030924429","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.864798678.0.tgz","fileCount":47,"integrity":"sha512-Tdh6/o7TS4uzV2/MsNNVT1MT8kz4JzaldftC/aw7v40TJmbOhEOAplHzwW+XDttwuezMZXDBj7pmLYfWlmdYrg==","signatures":[{"sig":"MEUCIQDzi4/Gw0KOwMhge/HQz90A+80lDnkhjzYMTSgPlIR/RAIgH9ugpazmBF9CejRVK/Dnirka1X0JaOC+YADNCwE1GFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":974412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlSTCRA9TVsSAnZWagAAoboP/ik6ha5+pJsl4IsP9Ky0\nHoJ+Uv/AtV+BImUDxIikOb9+7IbgS8I6UYEc+RamUn7LeAfb/MJYSuODS3cc\nzITIq+cSRyTbZ/vKoRI8fojy0VqeRGCL6bQA+bTO2mrtJKNzNRah71IyznGT\nMlc9y7bc3NSMjCcpKCpO/bvGjbor22hO6WTdJRhcqnz8EaLcY1jIYN6oFqW0\nPGsA5LI7kSxIvfXxb8yV4RwLzbSys4/gzWgGlv4YPBGjoXoWgE2sIOnhye7C\nD04cy17a9V+5R+KwjfhjOar6Ur/ynK8r4hw6m+S2JYCS87sSdrk5OLZcAhPZ\nY5FL5mjaPr5ija9/DR417fYQX1Zjm7bLrb34e+jIJRM5AYALkdzeExei1TB/\nvuK55FcAu/DRvOPxcxt8e4zsZuRucrNee4YUstoGDXMJ1yXo1alxZVKy222q\nHl+tjNtBGlzQvW20Kp4GhGYNfg8CCw/ShnVYSBZPhuPfFmo9s9kGNhZlVcww\n7npI5MYW1vaPGDQlHofLhGpqrhkUp6tJ/oy0XmF9wbKGYNynvnHUAu/gU/3K\nqSCPn3G14+rfZbKKIeyEYFrRAPsUt5wv+awoHAnEZyeelNnBYDVCs7YD8JIP\n54wEnnDFRboKTOur3C7Sj3BQTrpeKTjISZOb3+5qqXCP1c8G43bQW0cV8eEy\nhNNh\r\n=gv58\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.864798678.0","@material/rtl":"13.0.0-canary.864798678.0","@material/base":"13.0.0-canary.864798678.0","@material/list":"13.0.0-canary.864798678.0","@material/shape":"13.0.0-canary.864798678.0","@material/theme":"13.0.0-canary.864798678.0","@material/ripple":"13.0.0-canary.864798678.0","@material/animation":"13.0.0-canary.864798678.0","@material/elevation":"13.0.0-canary.864798678.0","@material/typography":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.864798678.0_1631212691643_0.11676474541067194","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/drawer","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2010bc8366fdd7112b9a34884d0c4622bab436e4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.d04bda3fb.0.tgz","fileCount":47,"integrity":"sha512-AAQwXZBUE5d1Ei8fSV/SBGtCF1/wF2P3Ge5vP4zcQUAucVRUspngGcFcIvLETfcomqOXRLkDjbnYFalLLSRh0Q==","signatures":[{"sig":"MEQCIDLI7cfaGbfTf7wVBUnlw4xTquPb0oGbwqo6Wk97z7sGAiBoj9PTUaxaMStcwHhuC/T0bqu1W+C0/ueDcNlsPRzzwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":974412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3hdCRA9TVsSAnZWagAA5qAP/RoD1eGny1LmAJfUQu2c\no5EldLv5kST8kuU1ovKUS9wMoFcCw09QtF1PpDu8DIobwMZMQkH+pCvevunN\nJ3b3Uo78JQFlC2mU9STwSd1WeqUoGfBQCX4oHT02ngUGT9ppcV2HF17Kz44Z\nhLr0rZvn/K3PGhtvLJuXh6fJ4zkiWyh1CVRDwbR2CaFyz6a07s+MrdLQraLO\nHNyM6qhtUTELGKxoZWvDNP3YCe3ZrKn/IBj+eX/Xs4+3sWWsOE/Eo2Z9AY79\n82sFKb9nYP1XNQzOU3npiwv5jtSTQCeH8NNdvMXFm1DT3PfgM4WxFgicCS3X\nvJyF5c6WQQBazKJO+LvbxJX6BNMFG3A+2lF1rCfOFLdB6YzU/G8zs3As+/kS\nhAiwu7L6HiAcN5jE2WqhwOUBjJ+DtD0ijB9FRm3PDTjn4IacUmW+m+ulb5Zl\nOJBVg9p200kskpfscGdcF3byXliQZNx6f0mFa5dOfQApAYhjw8R6jypXCb/+\nV0R2NcRYcd4bkbR1Cuil9/03p8m7Ac3fR9BESjKyDPORHyMz3AkMFFWY774K\nkdw3j6f5201J6cP06mdvko1yV6/GE7F6qRPTBjAQB4EcxGerqEyLRaiut0ob\netVI1W+qx0b8ctLswlKtGkLq+DqCn8G9wMwrJ3lP0DDOevuGEHEnvP6F+xSw\nTWsX\r\n=1HRC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d04bda3fb.0","@material/rtl":"13.0.0-canary.d04bda3fb.0","@material/base":"13.0.0-canary.d04bda3fb.0","@material/list":"13.0.0-canary.d04bda3fb.0","@material/shape":"13.0.0-canary.d04bda3fb.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/ripple":"13.0.0-canary.d04bda3fb.0","@material/animation":"13.0.0-canary.d04bda3fb.0","@material/elevation":"13.0.0-canary.d04bda3fb.0","@material/typography":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.d04bda3fb.0_1631287389283_0.640800043645136","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/drawer","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"635b132ab3ce49a9810088186b7d6ed2e5196fc7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.5533f73d3.0.tgz","fileCount":47,"integrity":"sha512-zMTHPLoTalS/UmGix7dVK98E6+QxdgKupWN1CPFbWP9gOCbv9oVCAEM2kSEoeMdxCqbYSUNlqWzs18UiSHGslw==","signatures":[{"sig":"MEYCIQDJX5lzwiTJw0SI4HV/ZKTykTcJbE2eiB/kErG6wq1aEwIhAPjLilQ8UxB103xczsnRmy19nOEGZtxXF3a847mZal7X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9kcCRA9TVsSAnZWagAAkKQP/jj8jpFbZCDFqo8U34+1\n6bl6GpCjrrMwwrpZPXmSZcv/3x9xAcizOaZrQnrdfIh2yfdEsZTOxTpYXT3G\nNNmE2Hh0YgIRCrDCjW0aSetTsY428Gsdx+YzEoY6oMIhdpqESeSBMLCt930d\nsH2LhPMjSOSOYnZV+PeyolGJc+Jm7pZXplkjpPcyPRt3OuSHVqweg+smp61b\nBuUQtm54ZlZq2vbhGv1rcYAErLfSsJswcrBPGvqW/B6Gtx227POWNEy+JPrR\nJ3bQeLpB/BgsBEfvTdGhx5gqp4fCzvIyVNLEzZeIfSGGG3m9hINWG3rTeArs\nz4LnsC8dSDBlokRHFsNXnRsNj2x8+zZ2vYDkDyL0yqyvDTPdnCVqgpH6LP7e\nDZtiwFT7EOEtlnmN0j7XD8YF8Wt+AO9nSznuReZWIxKHhlGIflgGfPTOwr87\nppcSz0M61Yihufva2IT+SlheK8SKpNrARC2j4ZEHrnCtg80NjSOWsqoNC2Pw\n7zBdgogTkzyP62o9cvd2khc50ugHlYloccxSSwOGbKaYIrU9wcLfPFDqREOV\nyIzK76+0Ur+cM9d0ErhicNa1MLp+HPazHLVXTuQ2aAitNSMfF62HTKW1Z135\nplWl6/s9PndTHsY7+pSQ8TuR0mEA+E+i6l7bEvngbtcMRD5ka/7j5p7/T7rQ\nxS0g\r\n=Aehw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5533f73d3.0","@material/rtl":"13.0.0-canary.5533f73d3.0","@material/base":"13.0.0-canary.5533f73d3.0","@material/list":"13.0.0-canary.5533f73d3.0","@material/shape":"13.0.0-canary.5533f73d3.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/ripple":"13.0.0-canary.5533f73d3.0","@material/animation":"13.0.0-canary.5533f73d3.0","@material/elevation":"13.0.0-canary.5533f73d3.0","@material/typography":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.5533f73d3.0_1631574300203_0.8710750536744714","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/drawer","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.08398f880.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fc49eecff49419a2b2829b64d4c3611a5d08b00","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.08398f880.0.tgz","fileCount":47,"integrity":"sha512-9iMuZAvqunlxJ9uB+TSbCbDHutSkkUMICZC8Gw1AhOw58CoJSavz64L4auFhYSz26CvzTfHbc0SLSGOD5+EvQA==","signatures":[{"sig":"MEQCIEtxc1ssU6UVSN7tUzkP6VCuxDopjyWLgcSvl9g1NfNoAiBxb1KPemhxmYwofGtRXpKVhmaToK6gRt2jXE+gkAuGpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+BHCRA9TVsSAnZWagAA03gQAJfH4RQhuKWGKzmSoAb7\nKtjaPKbc3RokHpEYx/nU3YsT1ebe15tIvxzOruWrb3cWPwQnSq2NOCI+Pf2X\noX9TGW9lpn1BrLhF/XIrcIl6+BcpZ/XSlM0RQR5XXpz0G/7V3uz0ruig8efx\nRExf/y3J/19/WdJJ3BpG4yzUSY7OSwKUkzKFox6/LFxk9Zj2FalIY6RhSg/D\nkFWHi14FsXdAmhi5tS6PkIFddQ7DPLdb0IEDIp6Xp5B3eNgZE1eJEjfQAjro\nYCyK/+5SKvHCQkAtQ89TiV23CuJM1wFh/eJpYoD5xQW3JpEe1qBwCiPSwGUZ\njc/YVjFaPLNe7kXrAKm/6aTAidbcyeyYr12n6D6X1n6uEKj286Ufp0Sq/zLu\ndV7jfWM8XUdf3Wn4WwE0pBTrFiLonnwd/H0VvwjBYJx2N7OagtlrpBu6R5/w\nGHoOWe0NjxG0pogGWILJxxLUsDZfGjdo5iYtirVagjTWIMlQ994AO8gEzzGQ\nXN2jBv77BYZMKbnfdxxdEQsKLPWe0dX1wq+Yu5PNN1dj4NtQ10ARkDQdoznr\ndmKYp9F9+jo3RHanoF9HB+GrJBjZjre72uLNVu9Vadhn/rjMUq8VZMMgWVtu\ncuvSPYWQrfbAy9BqCayO2TmG6lxJ53KBvGX8ENCLdUeXfMoApf9Wt6RvNY76\nOutH\r\n=LKoy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.08398f880.0","@material/rtl":"13.0.0-canary.08398f880.0","@material/base":"13.0.0-canary.08398f880.0","@material/list":"13.0.0-canary.08398f880.0","@material/shape":"13.0.0-canary.08398f880.0","@material/theme":"13.0.0-canary.08398f880.0","@material/ripple":"13.0.0-canary.08398f880.0","@material/animation":"13.0.0-canary.08398f880.0","@material/elevation":"13.0.0-canary.08398f880.0","@material/typography":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.08398f880.0_1631576135463_0.4026893014313291","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/drawer","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33d90641b7ae16c6a2c64f7767f2a8ed972f4dcb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.818f4ee93.0.tgz","fileCount":47,"integrity":"sha512-jIH+krYd3+H9gz576C8igdnhzzMfvzUGZ1To67YlqICnZ390um6JJLg48e4FY0jUGBsTcqq31b9EQUTs6qH+uA==","signatures":[{"sig":"MEQCIAa0Mg1PWSTzh1a0pz8Z0wDRG7GurWTFbd9Mb1W+mCtwAiAqhJkW27BK1hrscvKmmSVPfAdOgofW2EXXQggC0aGb3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjKpCRA9TVsSAnZWagAAiUUP/3nzoygXn7EfDFZNujHJ\n/EjLxRQXx1vyPSNGZWEtRVmcmAMvwKOss9a2ntqDT6hJ4Qc0mv0f7xq1CBty\nJGgQYoUdSJLnaLc61iOrsb9xQmYDllL06lEwr/7+h2h2otra6eTvo11bski/\nyR9kC00fTjK/7iK0ulhrGCuIxgGBeyuDBBS1ccjVbBukX2SuAHg5xIW4ORcg\nQGkrmH/xMRXZIf2/Sn129REO4UQhnIbOcKQ9I9VcUMDvF/5aPYOcrSxlvU4Y\nceEKd5FaSREeFb5t3rppa8iqjNr9fT9P/YaUf/niTzkKLBnQdRzTIfxX6Cs8\nTOultSYgo9lwSS/YOze7I5urIkwRRvrdJxib/ppbSdJ6fZi/xj7jZgc23KAQ\nucekKE65/h6YvhGP8VkdF+2vZeysYMJ0WaAYGJv8X4Zwhc6/NxUwQd0ezZYY\nTTNjJa0MYF0GVJbnVu5Y8Hy96/d7dzKySVeaL2LJHykvYhC1Et6cgKh+cbP4\noFBUw1+WZkMG/zvICE3oHf9k3Yzd4vRFunpq+m+jM3CDQoz2wn3ICe5OKoUD\n/0M+c/71Ow79AGO/i5NF9E5S/srfSGWyAo5wuNbUaWLuNGEpbCkt0ovOIPEO\n9vmFIrY5+5PXeGkZIaxIIRcxll45MybFnfwVFo8qATdpJgWVTNoERFaFgDI6\nJ3ej\r\n=tP3O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.818f4ee93.0","@material/rtl":"13.0.0-canary.818f4ee93.0","@material/base":"13.0.0-canary.818f4ee93.0","@material/list":"13.0.0-canary.818f4ee93.0","@material/shape":"13.0.0-canary.818f4ee93.0","@material/theme":"13.0.0-canary.818f4ee93.0","@material/ripple":"13.0.0-canary.818f4ee93.0","@material/animation":"13.0.0-canary.818f4ee93.0","@material/elevation":"13.0.0-canary.818f4ee93.0","@material/typography":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.818f4ee93.0_1631728297509_0.8788197327539575","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/drawer","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7928229066f3a1e2257b9c050ee5f442bb303c0c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.8355e14dc.0.tgz","fileCount":47,"integrity":"sha512-KPO3jirN1gwVK5UlkTIhm+mnbEyEzseX+hdxo4xdkxuJdNiCRs3fL17dYHJJNdUeSiEK9ZSmedEUxXbEnPVJIg==","signatures":[{"sig":"MEUCIHauazf5HnpF2UoJLHe7oRwND7nEdj37sMyZDFTiXnS/AiEA9iiyLqIPL2BtP0yeDMQSSnaJss0y+zPrIr8p25a9KCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkXiCRA9TVsSAnZWagAAL78P/2hNaLNzUzDJAgpg1dig\n3nzByt1Lbkepn6krJDBEsKpwhLWJJXGDc6umE80K+yGBiKIWMLUYwHySHp+6\nzyqTNzRr9MKnkuCCvqqjl1pRUUWjegNyFQK5i2Zkc0gWYyaxVZOdhXKOnng4\nKeJZp9AuEth0LNw4miRMJpgtvfggiAhFN7x/vV4bzhgrNg3QBzSviZhxTOas\nN7ThvQzfm4ahEtRTQujNZJSrTc8uwlMWQq0ql3IOMkx8mQ0gMk0YMb9EIjkn\nuVF7YJiM48QzInzHPy5/F+Gl8eKF+3UXCq0odu/JZslRbPrwjptfBaxBnsyZ\naGaaw756z+P1Z2YKX9FPKJvBKL+JfpQ3z+blSma05TLClscJapWGxyPpiU5S\n/f98+lGw5wspmf1vVDLB58o+qUKcieBVf5YNb6bBZ3PxoIEM7HekCmbAokFy\nDljU/WKCPHAlprHc4cdT9RnhpdssfFnrsN3SPvfsFJvRWhPAdNzn5y6zAdLW\nJoLlyElLBJGyq2ncwtRNQxBXSgeRPoQbanVENd+mY1bWaQg/xwRIr2OG5qdQ\n5kTAukPpn2UXM+bUsKq3tE6rc3S86biUGry9twMzBfOHAWNodBYp8IWKdumY\ncYdSgBddIOeSrV6bvKGXuLQYM2LSP6GpZmUMBbf8AXPGZoSoa6vIMnh2nQls\nUDKC\r\n=Ha1I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8355e14dc.0","@material/rtl":"13.0.0-canary.8355e14dc.0","@material/base":"13.0.0-canary.8355e14dc.0","@material/list":"13.0.0-canary.8355e14dc.0","@material/shape":"13.0.0-canary.8355e14dc.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/ripple":"13.0.0-canary.8355e14dc.0","@material/animation":"13.0.0-canary.8355e14dc.0","@material/elevation":"13.0.0-canary.8355e14dc.0","@material/typography":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.8355e14dc.0_1631733218594_0.33176604509784524","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/drawer","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bec98d05c30e4a658cbe55c33fcf8ed06e4b0cda","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":47,"integrity":"sha512-m8I7eOlTh43+JITBUdJazx13ECjuTVdOWl7a7shE99EaKHIxm4dglZ8SkUOZVFgFGGaDz0ppYUYTazwyUjcGcQ==","signatures":[{"sig":"MEUCIAXn5TJ1yvajVXMUyXl3vTIsB9skhZMhV4JUbMmGsMTSAiEAxc9UVUpYZJjiHCVsKm6xUPoqbkEZl0xet+riMeZ9YeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmz2CRA9TVsSAnZWagAAgJIP/0gJJwYrcZcjKZW8bqxK\nxI/X124MQ5M7JoVHtxl4EUmlWfSQDP0AdXXnoTEH1zxHduFLndM+NBS497Qy\nyy+VML8ZLl9dme+CwLGr9jV/OgeZqt/qrq1s5TKlPj8bkjreDMc4KtvSdnFt\nDoRZoVqcKwc4/Uey3T9LZT1rvfhvc+Lujit61Sst82G1jWuOb2bf+noE22sZ\nmpoqD5AqI4H/vF6XdAKRsIDLIfkg6J+in+vKP+8qF+LmB1P0Rtyn8Ad1BphU\nRCqE3mtEF/3V+5Ly1W+PeJHwzsJ4f2KHG9Ns/bjbeee4ptgc48/7u5dNRAZu\nXW/KkIh0TcpaQdDdHuFMwazLwHLfWAzEAzgwG3AsKW3H58h8YJ077pV6yM3z\na1AXZ2rCVFDt/AGnr2Vh6pxo44hxVuDy23WpnuwNPtcYhb3oZOXrHhqvymIK\nXXvhH5Feguuf4hltCmQRH/X7Il8KDIRgGMOf5TzE6eevrSSWQusKWNScGaoP\nq2Rq+7qzhMQ1KbK1QlzGLe6Wg538d2i8W9OH9336uXLGqSm8XE2ev88SMBPb\n3JIOHbhCfk8bNP6stfB/XSsKcbGJYAPPdD8xDbMHmwnPs2GKuo01Z5qvdo4g\nKGgIXdW3ETn9iH2bOJSsmqjtE2ZwIclP+HoQgVVNn7cUpnJKFDcZX7pyS4pN\niGFt\r\n=bYsW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4e16a6c4.0","@material/rtl":"13.0.0-canary.d4e16a6c4.0","@material/base":"13.0.0-canary.d4e16a6c4.0","@material/list":"13.0.0-canary.d4e16a6c4.0","@material/shape":"13.0.0-canary.d4e16a6c4.0","@material/theme":"13.0.0-canary.d4e16a6c4.0","@material/ripple":"13.0.0-canary.d4e16a6c4.0","@material/animation":"13.0.0-canary.d4e16a6c4.0","@material/elevation":"13.0.0-canary.d4e16a6c4.0","@material/typography":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.d4e16a6c4.0_1631743222570_0.8926828152645738","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/drawer","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d63e2e18ac1944328293d348d6bb2d22c82df3c7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.65125b3a6.0.tgz","fileCount":47,"integrity":"sha512-5YRbdpdnM6hrZteLwZuUsQKTm4VXlbqavWSEQGWtOAeJBSg1OSnmL+9Lw8MBeyPvOkaspaRbTrn8ag2JdpQrHw==","signatures":[{"sig":"MEYCIQCg8IwqdxQb2LB6QBlFwDfd0IPR9a7NB6f585ymkRQW9QIhAJNwfDeZ3WtJeX9iZxxllHUh57SLzVHjv+du6D0uLi1z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7SxCRA9TVsSAnZWagAAoQgP/jcMdfY0ndqIwJP3Rxne\nQHT26Am1Rok//cUNpeC9gdCXuuX1UWHg1ty2GLk93SLrw89iwQNOijE/oJj6\nTe8MxTFXDV5X8kbTTyKlzCL3PKupaAMSxml/Du1lZofkSOc5twW1Gnnss36w\nBulHmJ475nFx5b190cIGMU0E1hpHg2I7D+6XDTgFqFORi1t7MfwctCbDE7Mm\n8e1ZiFX+S1+0usRsKbI7TC0kY2HDHe86rTLc8UFTJKMEaoCVbDrMIMP7pvvi\n+/9ByLaA8LPzcfdCs+2wVLySdICnQw6tRktnC0+GMzMTIw9dQQBEOhm2DudA\n+12LyMbdCB82ssooZhrhphs7G3FxETKkMD26g4Kyurij+FgMO4d1KBq0fIBI\nnKQwRC6EO1E8iracGBBBGUCLlYL4kLm/cGfMPq3GeCLXGr0YDjjg0tor/LU6\nVDH5jyqkZGQ3uD4e7v5hNYyNX/w3cFzSoqpzp9AqSOH7yir7XJaBEURpkR6S\nt9f4QuLdEN3T5jpF4Yx10TfqT8/wCA9H2dsE07f1a2z8xuk7hRaEx/3Ea2S7\nOMbPaz4Nn+B9XDSyNEnR3gk9xHIbOneGEXzb+DiojiIm2+O1wEu4/+97H4TD\na8cTjx1SnR1zaBDKd7PKhkxd/BZy/CsH+AKenN6BL8VhGRdDxyUh5q93zq3g\nL35Y\r\n=PvFS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65125b3a6.0","@material/rtl":"13.0.0-canary.65125b3a6.0","@material/base":"13.0.0-canary.65125b3a6.0","@material/list":"13.0.0-canary.65125b3a6.0","@material/shape":"13.0.0-canary.65125b3a6.0","@material/theme":"13.0.0-canary.65125b3a6.0","@material/ripple":"13.0.0-canary.65125b3a6.0","@material/animation":"13.0.0-canary.65125b3a6.0","@material/elevation":"13.0.0-canary.65125b3a6.0","@material/typography":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.65125b3a6.0_1631827121309_0.38887733807028657","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/drawer","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.80a583365.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39be135f8eb88caa259c83ab8c49f3d1055a3cd7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.80a583365.0.tgz","fileCount":47,"integrity":"sha512-yc2BL63dP4TPDzuLQNb7fmJ/+TU75S4oqfsB67kJZFikYypC83kjcGFNbwwDu7L+9qi/n404mwNq3cnZL3jtYw==","signatures":[{"sig":"MEUCIQC/TDB1/3ZikXLaSq0ASAeJ7GRXjG3uZPEomwDP8jEx1wIgTdVMAX2tsfI/hc8KcgSmB3sSOI4Pjp53nbvrGIUVCj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977940},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.80a583365.0","@material/rtl":"13.0.0-canary.80a583365.0","@material/base":"13.0.0-canary.80a583365.0","@material/list":"13.0.0-canary.80a583365.0","@material/shape":"13.0.0-canary.80a583365.0","@material/theme":"13.0.0-canary.80a583365.0","@material/ripple":"13.0.0-canary.80a583365.0","@material/animation":"13.0.0-canary.80a583365.0","@material/elevation":"13.0.0-canary.80a583365.0","@material/typography":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.80a583365.0_1631911001629_0.31347121214146667","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/drawer","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.83900936a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79fc90e0f6f9474bb2531736f1b6cd28ac2549e9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.83900936a.0.tgz","fileCount":47,"integrity":"sha512-+ffj75nZiSAfRs8gCXWveDnEQ/O3MXEUCYYxvvdbEiDht7uAnl5IMYXwbAXR3uRqbvh9JAoBWhMzRddmT1ysPg==","signatures":[{"sig":"MEQCIBgEQRB/JZNiqgkgn9d9ZonHY1txOr6sNweg/NiVfEz5AiA0xb+JpxgTTN8ZYeFhKrWsBE/Zrkq1tJ1wrlYbblgwdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977940},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83900936a.0","@material/rtl":"13.0.0-canary.83900936a.0","@material/base":"13.0.0-canary.83900936a.0","@material/list":"13.0.0-canary.83900936a.0","@material/shape":"13.0.0-canary.83900936a.0","@material/theme":"13.0.0-canary.83900936a.0","@material/ripple":"13.0.0-canary.83900936a.0","@material/animation":"13.0.0-canary.83900936a.0","@material/elevation":"13.0.0-canary.83900936a.0","@material/typography":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.83900936a.0_1631921110051_0.5780989838982398","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/drawer","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdf6dc4ee2df7baa5ea181534644f28585479b51","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.860ad06a1.0.tgz","fileCount":47,"integrity":"sha512-CSwe4/lVkfKVK3Gc1hGr5n95QWVSdyyignits8p8wmMVJfPwolkEe7IHiVv4hHG55aNdkyVGNJi6F+YsDEFgQw==","signatures":[{"sig":"MEUCIQCT9GgZaaMNHKx1FLIgPIt1zB8W5ONCSbpkvcEDUMLbnAIgPs523Kpu9h7ijdtburPL46rwmKBoFRubL9hRRN5k0V4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977940},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.860ad06a1.0","@material/rtl":"13.0.0-canary.860ad06a1.0","@material/base":"13.0.0-canary.860ad06a1.0","@material/list":"13.0.0-canary.860ad06a1.0","@material/shape":"13.0.0-canary.860ad06a1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/ripple":"13.0.0-canary.860ad06a1.0","@material/animation":"13.0.0-canary.860ad06a1.0","@material/elevation":"13.0.0-canary.860ad06a1.0","@material/typography":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.860ad06a1.0_1631921807670_0.7172335322925965","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/drawer","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dd06a7fee9893bd6030614007f2dd59f0864e00","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.3b8d4429e.0.tgz","fileCount":47,"integrity":"sha512-OYWUi/pTyCtiTjbQEXQkEC7cNFLkOZsyJrxmvKgxIvTocgPAqvEFuVKWTpDWQcmt8wpzt7Pnu8R9iOQ5OWJ/xQ==","signatures":[{"sig":"MEQCIDDQBCQhizude0VqZ19xbkX9XPOMhswyG3IybYGGbtnHAiBQUXPsWTBUkHn4mkt4hMAx03Kd/CxevQLS6764CWljSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977940},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b8d4429e.0","@material/rtl":"13.0.0-canary.3b8d4429e.0","@material/base":"13.0.0-canary.3b8d4429e.0","@material/list":"13.0.0-canary.3b8d4429e.0","@material/shape":"13.0.0-canary.3b8d4429e.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/ripple":"13.0.0-canary.3b8d4429e.0","@material/animation":"13.0.0-canary.3b8d4429e.0","@material/elevation":"13.0.0-canary.3b8d4429e.0","@material/typography":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.3b8d4429e.0_1632160103887_0.23163106967718394","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/drawer","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"335f00938ec31c70e561eeaadc7d8b517cefb2da","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.2da3606b9.0.tgz","fileCount":47,"integrity":"sha512-j59KIS3XWmv4pv32OlBBz4JNdKsQbzDBGB8bB7AbnUzxcyKe85zu8I7shsugrb0gJ5Rk76YgcpQBd9wzsUHkgA==","signatures":[{"sig":"MEUCICG3BzSPnnHtrPUOD2G8DFWKSdHtnjRXFnto7IXen5DfAiEAqZUigqIHpMMYmwwgNL5AnbSyErj7Y5kq0V5G/juca1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978030},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2da3606b9.0","@material/rtl":"13.0.0-canary.2da3606b9.0","@material/base":"13.0.0-canary.2da3606b9.0","@material/list":"13.0.0-canary.2da3606b9.0","@material/shape":"13.0.0-canary.2da3606b9.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/ripple":"13.0.0-canary.2da3606b9.0","@material/animation":"13.0.0-canary.2da3606b9.0","@material/elevation":"13.0.0-canary.2da3606b9.0","@material/typography":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.2da3606b9.0_1632166711506_0.28277010524865687","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/drawer","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"856c9137be5d56daa30fdc1edcc2fe79f7fe8604","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.e8c598d1e.0.tgz","fileCount":47,"integrity":"sha512-MYaTDRhn10z0UxF2KCaIleywG4CYIZcpeyuX+ANAppBsD/sVgZP0mPQHWipM7BUJQ1/A+2jldOCSq6oTy7YDBQ==","signatures":[{"sig":"MEUCIHLMOtAf8oEWmH2R/Gngv1S7McgNUK4tV+CW6aKu3T4xAiEA9ufNjLtk7hWrLhZ8jGxWatRfO2cegU7g9NAXfco9YaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978030},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8c598d1e.0","@material/rtl":"13.0.0-canary.e8c598d1e.0","@material/base":"13.0.0-canary.e8c598d1e.0","@material/list":"13.0.0-canary.e8c598d1e.0","@material/shape":"13.0.0-canary.e8c598d1e.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/ripple":"13.0.0-canary.e8c598d1e.0","@material/animation":"13.0.0-canary.e8c598d1e.0","@material/elevation":"13.0.0-canary.e8c598d1e.0","@material/typography":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.e8c598d1e.0_1632172371418_0.6664476553583374","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/drawer","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18b5ea4c666fe22fa3d807f0a30d202706f39f12","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.1340ee9f7.0.tgz","fileCount":47,"integrity":"sha512-o+nlo3wwbj83rP4A7gdVA1zuhrK+THpWLAvXSApbUnFp9FTml9jhXi9lFNcPZuj1uOaFQ//9MfqL3hGrRvR6eg==","signatures":[{"sig":"MEUCIBNgaUINqajg8ZwC0fYfipBOmevfx1f2JN7YgV70FSsjAiEA9J8gD6nAdi/Wc7KWmmPnxa0AjU6VwCPyMOTsbHIgjpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978030},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1340ee9f7.0","@material/rtl":"13.0.0-canary.1340ee9f7.0","@material/base":"13.0.0-canary.1340ee9f7.0","@material/list":"13.0.0-canary.1340ee9f7.0","@material/shape":"13.0.0-canary.1340ee9f7.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/ripple":"13.0.0-canary.1340ee9f7.0","@material/animation":"13.0.0-canary.1340ee9f7.0","@material/elevation":"13.0.0-canary.1340ee9f7.0","@material/typography":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.1340ee9f7.0_1632333521547_0.6054925304402634","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/drawer","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.65084baff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b98649d7e5c60be759f57acb72a726aee5208916","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.65084baff.0.tgz","fileCount":47,"integrity":"sha512-FOnrbbfvJVriHBA2KY2JW6UEBQ5TewxWLDfmnBdh7TYycaBiq2TFosS5FLX6Y5fF5Wmr2NkgzTMKNEwIQzeyLA==","signatures":[{"sig":"MEYCIQDgjI9qaiCFXahQa9+AW2ytmS8rbeZPwAjM/S+p8Ip0vAIhAIBJ/x7zCOk/Dy2uCTrT12Z0FO2/kn05FkkyIzwodeYZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978030},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65084baff.0","@material/rtl":"13.0.0-canary.65084baff.0","@material/base":"13.0.0-canary.65084baff.0","@material/list":"13.0.0-canary.65084baff.0","@material/shape":"13.0.0-canary.65084baff.0","@material/theme":"13.0.0-canary.65084baff.0","@material/ripple":"13.0.0-canary.65084baff.0","@material/animation":"13.0.0-canary.65084baff.0","@material/elevation":"13.0.0-canary.65084baff.0","@material/typography":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.65084baff.0_1632432378164_0.539139699988431","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/drawer","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fff32a7694c1d21cdf0892c943064773696382cc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":47,"integrity":"sha512-+le7Y74A8uDMB0VhQul1FoehtNadGYlWleC1WZODVWwh+gW5KDLlKv6WdomzXQI5t/aeL2iAbuwe+FyAJqKe3g==","signatures":[{"sig":"MEYCIQDNnXRazCn6R/uzgI4h2wFm0Y3HBFjLrbfhGNAhbb1PmgIhAI4S4tUpShviwep0oAzSF86ao9kPw0XYaSLy81Mj43Y9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978030},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c79aa0cdd.0","@material/rtl":"13.0.0-canary.c79aa0cdd.0","@material/base":"13.0.0-canary.c79aa0cdd.0","@material/list":"13.0.0-canary.c79aa0cdd.0","@material/shape":"13.0.0-canary.c79aa0cdd.0","@material/theme":"13.0.0-canary.c79aa0cdd.0","@material/ripple":"13.0.0-canary.c79aa0cdd.0","@material/animation":"13.0.0-canary.c79aa0cdd.0","@material/elevation":"13.0.0-canary.c79aa0cdd.0","@material/typography":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0-canary.c79aa0cdd.0_1632490964377_0.890186925679906","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/drawer","version":"13.0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@13.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35bb370f44ac860ca38ce722144869edc86da9f9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-13.0.0.tgz","fileCount":46,"integrity":"sha512-TIV/K9MED3ymngmKrdLwOMhUF44BzoR6HuTVsZAM4bgy0sfSv+jzgaGUqJsvjEhTXk+Q9OTEge+TsU/ETzQCbg==","signatures":[{"sig":"MEUCIBvy57NWX9L7JSjukuwijZD348cFHwhJ5GBi5iZJ09pQAiEA2v4r5fb3u0dMjSHLO1dmMalLknEMQTQyO7ygnNhHwSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977436},"main":"dist/mdc.drawer.js","module":"index.js","gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"^13.0.0","@material/rtl":"^13.0.0","@material/base":"^13.0.0","@material/list":"^13.0.0","@material/shape":"^13.0.0","@material/theme":"^13.0.0","@material/ripple":"^13.0.0","@material/animation":"^13.0.0","@material/elevation":"^13.0.0","@material/typography":"^13.0.0","@material/feature-targeting":"^13.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_13.0.0_1632512803099_0.8175440054501206","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/drawer","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.198431fcd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c10df4781aa327c5e180acf046c6ec6d52d533bd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.198431fcd.0.tgz","fileCount":47,"integrity":"sha512-mv05NqPNwn9mHRj+7sj8+BUT+jUuTAugKmDyMBa8SDM4F9OCt02Os6GGhr7xnL8JDaDsA+BApKrCtbDjx+1gLw==","signatures":[{"sig":"MEYCIQDwHEo6JYfszPFBk4SPr8X3YJebisnXnyajy26w1UJPFwIhAMA8EgjBt2xoG5SB3hpOwATivpSy01wmh/P4MDY4U0b+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978030},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.198431fcd.0","@material/rtl":"14.0.0-canary.198431fcd.0","@material/base":"14.0.0-canary.198431fcd.0","@material/list":"14.0.0-canary.198431fcd.0","@material/shape":"14.0.0-canary.198431fcd.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/ripple":"14.0.0-canary.198431fcd.0","@material/animation":"14.0.0-canary.198431fcd.0","@material/elevation":"14.0.0-canary.198431fcd.0","@material/typography":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.198431fcd.0_1632512846218_0.4915414076120692","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/drawer","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0eadbbdc122bd7ca4fb555983791f129da6fc311","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":47,"integrity":"sha512-E/wvj5g9D8OT4WuUc6ouEDJPF6bvswn18M8aMlAjX+sP2nPdQXstCCB0i3dKaWGcMQq9+AMkXyyb154sQ5AKMg==","signatures":[{"sig":"MEYCIQCKVijbDk72ssxEZl22j3mfEPRh+QLm/4x7y3/uTW6E6wIhAPpJpkkE4DgiEG2GltieaMecZxfSilAwBxNF0mRciWmX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978030},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9a02b6ef8.0","@material/rtl":"14.0.0-canary.9a02b6ef8.0","@material/base":"14.0.0-canary.9a02b6ef8.0","@material/list":"14.0.0-canary.9a02b6ef8.0","@material/shape":"14.0.0-canary.9a02b6ef8.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/ripple":"14.0.0-canary.9a02b6ef8.0","@material/animation":"14.0.0-canary.9a02b6ef8.0","@material/elevation":"14.0.0-canary.9a02b6ef8.0","@material/typography":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.9a02b6ef8.0_1632575510914_0.7907281240628821","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/drawer","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"603322203d40cd6c61f03c66e7f4fda4ad4205a8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.758ce31d9.0.tgz","fileCount":47,"integrity":"sha512-MyWuXd3Qw8Sz6aNcEac3aFpIthLXxP5NzlUeX/RGmnukbKwvvPYon0Z+FMqSeuxB0EzOTSBoMrAC7Ylqk+mV1w==","signatures":[{"sig":"MEUCICL5Vz/eG2QSEJ9Y6wJ62dV5tXistHWxqhaAd5NPVrthAiEAiO4ReCGqk3FA8PN0VGCc+spWGkFKjqpmgx/UvaD1qCc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978302},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.758ce31d9.0","@material/rtl":"14.0.0-canary.758ce31d9.0","@material/base":"14.0.0-canary.758ce31d9.0","@material/list":"14.0.0-canary.758ce31d9.0","@material/shape":"14.0.0-canary.758ce31d9.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/ripple":"14.0.0-canary.758ce31d9.0","@material/animation":"14.0.0-canary.758ce31d9.0","@material/elevation":"14.0.0-canary.758ce31d9.0","@material/typography":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.758ce31d9.0_1632763807800_0.5101509047905832","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/drawer","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9040441a54412334ac05ac8458e35e5eb9179aa","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.86b50ef74.0.tgz","fileCount":47,"integrity":"sha512-H6Yo8gntWa6H4qJuxLUYyTl42zioTM6VH5dTrvMLR0HC3pXtd9yLjO+qjJ8pTc0GD6e3+Aj8yEVDb8Sm1wWztA==","signatures":[{"sig":"MEUCIQDjbvpx+VmRkSXPlBXes5w6pInhKWHzhhTuIIE99rHApgIgAygO28Z6lLc/tAe0xdV7hX1nhk2M+tYAt0rAfYN3T8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978302},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.86b50ef74.0","@material/rtl":"14.0.0-canary.86b50ef74.0","@material/base":"14.0.0-canary.86b50ef74.0","@material/list":"14.0.0-canary.86b50ef74.0","@material/shape":"14.0.0-canary.86b50ef74.0","@material/theme":"14.0.0-canary.86b50ef74.0","@material/ripple":"14.0.0-canary.86b50ef74.0","@material/animation":"14.0.0-canary.86b50ef74.0","@material/elevation":"14.0.0-canary.86b50ef74.0","@material/typography":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.86b50ef74.0_1632851030630_0.8761231240996841","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/drawer","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63232c054dbeb596341a357a4b1413095f95c29e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.b2fe3528b.0.tgz","fileCount":47,"integrity":"sha512-FbeVYj96uQ3mBm5/UspmplivhwG7Q2wyf+UiCrxzh/vt7GFbSCmuTl4szgtLHbna9OgQ9p3gN49HBCXUC7MECw==","signatures":[{"sig":"MEYCIQDD3vgmQiyk94Xr3ya6RToTWmf6nfby1X0y4w6SFgejMQIhAIRV3yxwk2hnrB1nhfPDV3nuHSUbin0gk8GRLwQQefgm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978302},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2fe3528b.0","@material/rtl":"14.0.0-canary.b2fe3528b.0","@material/base":"14.0.0-canary.b2fe3528b.0","@material/list":"14.0.0-canary.b2fe3528b.0","@material/shape":"14.0.0-canary.b2fe3528b.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/ripple":"14.0.0-canary.b2fe3528b.0","@material/animation":"14.0.0-canary.b2fe3528b.0","@material/elevation":"14.0.0-canary.b2fe3528b.0","@material/typography":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.b2fe3528b.0_1632956264570_0.3374583842200247","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/drawer","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.586e740dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b14ef8d9ef72670b05f8a99202e2def87a0c3336","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.586e740dd.0.tgz","fileCount":47,"integrity":"sha512-e1P7GUPJEPqj5LgICyn6Gkxna3WaDqDE+CrB8KczaLDYN/FcJ/VMzq6KgEpFvt+yn836IHRTb/8G2ACMWbKtPA==","signatures":[{"sig":"MEQCIFd5Tg7RJQIyR4ryEJGbT327strYTS/3uZpbFMWKzq7sAiBqzPIqrx9zMEOfwDwJks5BeAKaASSvkbUs+XAZfu1xvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978302},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.586e740dd.0","@material/rtl":"14.0.0-canary.586e740dd.0","@material/base":"14.0.0-canary.586e740dd.0","@material/list":"14.0.0-canary.586e740dd.0","@material/shape":"14.0.0-canary.586e740dd.0","@material/theme":"14.0.0-canary.586e740dd.0","@material/ripple":"14.0.0-canary.586e740dd.0","@material/animation":"14.0.0-canary.586e740dd.0","@material/elevation":"14.0.0-canary.586e740dd.0","@material/typography":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.586e740dd.0_1633019528990_0.4535259409208272","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/drawer","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"722f748d7d517711f4b49926a7c7cb0a997b57fa","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.2ac92d766.0.tgz","fileCount":47,"integrity":"sha512-BJEiP6s3A/DxWOzwKtuPRtgwgC9xxooVyT1JgmRuQOaHsrKDy+7KVA/gN7vfQHgF2EFRQ0oaFofHJp+is30tEQ==","signatures":[{"sig":"MEUCIGvj7zqwMgc9MGOGsMnVqYDSU5DWCoI9Gf3NUlFJxadjAiEA7yws6n6qmH14Om2XkBSCvcRojzkqLnDEJ6pVt6hvmp4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978302},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.2ac92d766.0","@material/rtl":"14.0.0-canary.2ac92d766.0","@material/base":"14.0.0-canary.2ac92d766.0","@material/list":"14.0.0-canary.2ac92d766.0","@material/shape":"14.0.0-canary.2ac92d766.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/ripple":"14.0.0-canary.2ac92d766.0","@material/animation":"14.0.0-canary.2ac92d766.0","@material/elevation":"14.0.0-canary.2ac92d766.0","@material/typography":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.2ac92d766.0_1633462162142_0.7186969151972955","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/drawer","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63a643cee384fd04bcdc582730f6550a3e5ecbfd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.353ca7e9f.0.tgz","fileCount":47,"integrity":"sha512-Botkc4HKt8OxWHj22sOxHPUTqKq2fOCn9cO32TE+C32QY8FtB8SO4NpmF0YhGOV7VoGy5WFhcmEuRJk4F0fTWA==","signatures":[{"sig":"MEQCIARCA37aY5g5J1xFmsJQl7VtTnIfQ++7DOqU15KiShMcAiBRoecIvT90CsFIcJsNVYfQ4HsPktXsdTwIwp4kT0XLnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978613},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.353ca7e9f.0","@material/rtl":"14.0.0-canary.353ca7e9f.0","@material/base":"14.0.0-canary.353ca7e9f.0","@material/list":"14.0.0-canary.353ca7e9f.0","@material/shape":"14.0.0-canary.353ca7e9f.0","@material/theme":"14.0.0-canary.353ca7e9f.0","@material/ripple":"14.0.0-canary.353ca7e9f.0","@material/animation":"14.0.0-canary.353ca7e9f.0","@material/elevation":"14.0.0-canary.353ca7e9f.0","@material/typography":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.353ca7e9f.0_1633718866965_0.9256654820587924","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/drawer","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"319785611541eefe058eef8c25e618082c7296c2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.c78ff0429.0.tgz","fileCount":47,"integrity":"sha512-a8RSZYRl1do22PBk4G0S6n567bx+yTwDA5rWM9h8FCiKzg3+SW0cZJZVNVntn1+gpoGc3dj46IEUB6bVek4Eiw==","signatures":[{"sig":"MEUCIEwQD04ezYdeYsgd61p+AqOqXLt7gk5Io+4daCbnyBOiAiEAsCQwBNjd+n6s3PhnSicKSbrkNCY466tnL2g0zbLL1lI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c78ff0429.0","@material/rtl":"14.0.0-canary.c78ff0429.0","@material/base":"14.0.0-canary.c78ff0429.0","@material/list":"14.0.0-canary.c78ff0429.0","@material/shape":"14.0.0-canary.c78ff0429.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/ripple":"14.0.0-canary.c78ff0429.0","@material/animation":"14.0.0-canary.c78ff0429.0","@material/elevation":"14.0.0-canary.c78ff0429.0","@material/typography":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.c78ff0429.0_1633972978589_0.28442154735753444","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/drawer","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.261f2db59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc55cc1e24f16da4f16b5e95667e17bae2033814","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.261f2db59.0.tgz","fileCount":47,"integrity":"sha512-L4K8IXN5LMvaqVpOueopaMQPQbAWrRQ21iJi7Yv4BL15xWs5GbNohQJAclx4R6lHpEhnhYHlQ2dsIhe01IRrDw==","signatures":[{"sig":"MEYCIQCQ8E16xc1zZG53BFoyc52VPQnV8RMPB2kjyaUHQjxfRQIhANX331FlUk0DyE2eU7Ywl1cyq44Io83pWgU4BE78CvCt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.261f2db59.0","@material/rtl":"14.0.0-canary.261f2db59.0","@material/base":"14.0.0-canary.261f2db59.0","@material/list":"14.0.0-canary.261f2db59.0","@material/shape":"14.0.0-canary.261f2db59.0","@material/theme":"14.0.0-canary.261f2db59.0","@material/ripple":"14.0.0-canary.261f2db59.0","@material/animation":"14.0.0-canary.261f2db59.0","@material/elevation":"14.0.0-canary.261f2db59.0","@material/typography":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.261f2db59.0_1634749229762_0.011152301374116824","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/drawer","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"739294a94a5bc34a3f7b81a1c177cba09fb5c984","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.9803d2dc1.0.tgz","fileCount":47,"integrity":"sha512-LjLRre50RKAHNqudQ6nyWBaxA3D2ywUTljRSxqi1SY5K5JCaBUPiMhBJU2j9p5ITXK7QWKR1pXsWcJCtkiRirQ==","signatures":[{"sig":"MEQCIExS5+b1OWe1yIeCx4iCKRvGn3Bpq4CnPA3WwWAvQUgeAiBUV97Kf0Lna/mGL2H03YTAgb5++kw3w37B4B/hP7jCEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9803d2dc1.0","@material/rtl":"14.0.0-canary.9803d2dc1.0","@material/base":"14.0.0-canary.9803d2dc1.0","@material/list":"14.0.0-canary.9803d2dc1.0","@material/shape":"14.0.0-canary.9803d2dc1.0","@material/theme":"14.0.0-canary.9803d2dc1.0","@material/ripple":"14.0.0-canary.9803d2dc1.0","@material/animation":"14.0.0-canary.9803d2dc1.0","@material/elevation":"14.0.0-canary.9803d2dc1.0","@material/typography":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.9803d2dc1.0_1634757762595_0.8122265802828699","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/drawer","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.348665978.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15ad6e9a0211e01c8f7dd5e1fadbe30e8d7f6503","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.348665978.0.tgz","fileCount":47,"integrity":"sha512-6f0BmerEMFLjcyZZxkvfQ7t9/qWbE6jKnzm3AV6x75/2OCmHHlwWrDRCmFHJMJy3Io861Pr6oaohTclylUbazA==","signatures":[{"sig":"MEYCIQCb1Yjhz20e3MS9COCqXD1KHjqcDHq+k9EFrB7lsd8v8wIhAIVkYcXl4mcZK5/5Z329FTn4jiq9X4R5lil/y+fxI2Pf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.348665978.0","@material/rtl":"14.0.0-canary.348665978.0","@material/base":"14.0.0-canary.348665978.0","@material/list":"14.0.0-canary.348665978.0","@material/shape":"14.0.0-canary.348665978.0","@material/theme":"14.0.0-canary.348665978.0","@material/ripple":"14.0.0-canary.348665978.0","@material/animation":"14.0.0-canary.348665978.0","@material/elevation":"14.0.0-canary.348665978.0","@material/typography":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.348665978.0_1634827898035_0.06506844363200792","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/drawer","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec92e422da32667a28641d2499eb328d7cbb21cf","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.b2b979a8a.0.tgz","fileCount":47,"integrity":"sha512-z3mkX7SS9YGb7Av+pZ95LVO2CFN6GhsJMG9roM8vkGkctVYM7QYpl3FNvfqpRxl+l2GJPSfFKuo9/Bi5ljo5Ug==","signatures":[{"sig":"MEUCICyxCAOkvC1uGdK8oGtl4NoKo40bF7FiqyffR5Gx+S/eAiEAuLppKEoEZDOkD1QnBpE+apOAws1DZ2z85mUf0UTCFxA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2b979a8a.0","@material/rtl":"14.0.0-canary.b2b979a8a.0","@material/base":"14.0.0-canary.b2b979a8a.0","@material/list":"14.0.0-canary.b2b979a8a.0","@material/shape":"14.0.0-canary.b2b979a8a.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/ripple":"14.0.0-canary.b2b979a8a.0","@material/animation":"14.0.0-canary.b2b979a8a.0","@material/elevation":"14.0.0-canary.b2b979a8a.0","@material/typography":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.b2b979a8a.0_1635433993623_0.0886554830383326","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/drawer","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"170f71abf60a604e5b16757198e175d0effc7767","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":47,"integrity":"sha512-HcaG3WjzA+yQN4lb9jW9ErY52Pc0HtquRJWGfOE2t3JorpPQH0myxMsOnd4QjMBKPAwUW+5ZcU278fkFEOf2pA==","signatures":[{"sig":"MEUCIQCP0SytG+9C6mjTQvyAZa8N0FuD9WfjTQgqw83lu/5/PgIgGYFeLQLFbZgaGO3UUYO/N49A25bE0bwcb9En4wcjDag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1af7c1c4a.0","@material/rtl":"14.0.0-canary.1af7c1c4a.0","@material/base":"14.0.0-canary.1af7c1c4a.0","@material/list":"14.0.0-canary.1af7c1c4a.0","@material/shape":"14.0.0-canary.1af7c1c4a.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/ripple":"14.0.0-canary.1af7c1c4a.0","@material/animation":"14.0.0-canary.1af7c1c4a.0","@material/elevation":"14.0.0-canary.1af7c1c4a.0","@material/typography":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.1af7c1c4a.0_1635443621391_0.9907293081301547","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/drawer","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff94ad880764f83e85d27ca42df4b349ce961104","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.4afd353cd.0.tgz","fileCount":47,"integrity":"sha512-shivyaFOx/KzSKjohKV3u/80Kd+DwR+sQUFeAjC+h+Wq5mVfcBoH11V5vRcNN9RmZYOBwkxf9ZhknEB/5OPO/Q==","signatures":[{"sig":"MEUCIDGbOnStwzktkfBdDzbtyzwWM0JuaN2Wn4BdymUVMZjEAiEAvvlqtVZ6qwFg92s62+/3ztjtSq95O307AnenvB5NKpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4afd353cd.0","@material/rtl":"14.0.0-canary.4afd353cd.0","@material/base":"14.0.0-canary.4afd353cd.0","@material/list":"14.0.0-canary.4afd353cd.0","@material/shape":"14.0.0-canary.4afd353cd.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/ripple":"14.0.0-canary.4afd353cd.0","@material/animation":"14.0.0-canary.4afd353cd.0","@material/elevation":"14.0.0-canary.4afd353cd.0","@material/typography":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.4afd353cd.0_1635519740770_0.9766105827796727","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/drawer","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.a986df922.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b50074086ead5d31f8a188de738a08b6f5634fde","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.a986df922.0.tgz","fileCount":47,"integrity":"sha512-ibqZAP/NGE8GBL2eDW4OGAiwLOf/Fr3m2n6kg1EFa+XkJeK4vlqEeBkKCVYqyxucEmz1xxyVnSfCjPdjLZZ2Eg==","signatures":[{"sig":"MEYCIQCcyW44MEcHR9KvdbyekM6sGBFMd0LRg/QQfJ+hWCvZWAIhANpwe2kkQkEH8RA5zzXB6Lg3HHuS2IFJyqCAfsJsN2yT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a986df922.0","@material/rtl":"14.0.0-canary.a986df922.0","@material/base":"14.0.0-canary.a986df922.0","@material/list":"14.0.0-canary.a986df922.0","@material/shape":"14.0.0-canary.a986df922.0","@material/theme":"14.0.0-canary.a986df922.0","@material/ripple":"14.0.0-canary.a986df922.0","@material/animation":"14.0.0-canary.a986df922.0","@material/elevation":"14.0.0-canary.a986df922.0","@material/typography":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.a986df922.0_1635543351206_0.9078085406806307","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/drawer","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af91033f0e730aa9f75e875a2c4cd432428efaa5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.c3cdff07b.0.tgz","fileCount":47,"integrity":"sha512-+Eu5bz2pKaoaYhT5G1EE/L9vTIfvMTeqdoUAhnsjWlGLqr0wCE+uLLzUVHB04fDHe7Aj05CSu6de2qxBYuVoKQ==","signatures":[{"sig":"MEYCIQD6G/8RcbRpjoeX54suZD3nGtMiuBbMHAQBSyzxrwQrmgIhAOHcku8APWQsNfpmLey9vywV3oRHHaN7Vi8EiF+aCw/u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c3cdff07b.0","@material/rtl":"14.0.0-canary.c3cdff07b.0","@material/base":"14.0.0-canary.c3cdff07b.0","@material/list":"14.0.0-canary.c3cdff07b.0","@material/shape":"14.0.0-canary.c3cdff07b.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/ripple":"14.0.0-canary.c3cdff07b.0","@material/animation":"14.0.0-canary.c3cdff07b.0","@material/elevation":"14.0.0-canary.c3cdff07b.0","@material/typography":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.c3cdff07b.0_1636484802280_0.7203788671557338","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/drawer","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.468392606.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94f2a685068e509eabf955a0e38f456bb288114c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.468392606.0.tgz","fileCount":47,"integrity":"sha512-hLjG4EwHDhc0DH5oEf6HQERLUIZ2VEkZ7YvZiKCFl7/mhCrEwjPnAZvJ/6TDSlazjTP1GsmsNJDLvuxPb5gYow==","signatures":[{"sig":"MEUCIQCXMUQRImF9nroUg/Eg/cWZn4PKtP3ulHuMIkVVlYE9jwIgXOnd7KXyPA06ncTxCPwtg2mjj2bC+PyoWP/oa74fGFk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.468392606.0","@material/rtl":"14.0.0-canary.468392606.0","@material/base":"14.0.0-canary.468392606.0","@material/list":"14.0.0-canary.468392606.0","@material/shape":"14.0.0-canary.468392606.0","@material/theme":"14.0.0-canary.468392606.0","@material/ripple":"14.0.0-canary.468392606.0","@material/animation":"14.0.0-canary.468392606.0","@material/elevation":"14.0.0-canary.468392606.0","@material/typography":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.468392606.0_1636659661112_0.5961303645572738","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/drawer","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.828f9803b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6127d31fd5608da21d4a892d84d047cac33ab1d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.828f9803b.0.tgz","fileCount":47,"integrity":"sha512-Nvy6SztzXr8Q2DB1J6/2koaIdqyQQ7cbrmZOKkziH1oVU+5xPcgh5fmCbGDsO1rFBV+qKLcVuDgx3w0K9Tf/Ug==","signatures":[{"sig":"MEYCIQDpeLYqQTBTCVzdMkRWatuLAartdR3Lktj9UeVI7pAlogIhAMs/AT0hfDTLQQE6RkJDiLVsmifg9ybJd2WobxkDlJ6k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.828f9803b.0","@material/rtl":"14.0.0-canary.828f9803b.0","@material/base":"14.0.0-canary.828f9803b.0","@material/list":"14.0.0-canary.828f9803b.0","@material/shape":"14.0.0-canary.828f9803b.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/ripple":"14.0.0-canary.828f9803b.0","@material/animation":"14.0.0-canary.828f9803b.0","@material/elevation":"14.0.0-canary.828f9803b.0","@material/typography":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.828f9803b.0_1636660298556_0.39704990383517114","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/drawer","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.8795cba87.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4bb0f32f754ab53bd61e4eedcd0b762f49cfb1b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.8795cba87.0.tgz","fileCount":47,"integrity":"sha512-24K99dZmZO+Hn80K/jC4TlOy/IhyuTXo//5t9vAs3zpK1gxziwxdv5th8cJN/zCSHpUEm02jBrZ2GhmLpfw7fw==","signatures":[{"sig":"MEUCIBWK5objVZdI1GmmOjD/cfg+mBziY9oJ3USwUeVFZriJAiEAleqpjSO5702qRJdL4bVtUmfN9ZYaALgRq/l3xsnIDCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8795cba87.0","@material/rtl":"14.0.0-canary.8795cba87.0","@material/base":"14.0.0-canary.8795cba87.0","@material/list":"14.0.0-canary.8795cba87.0","@material/shape":"14.0.0-canary.8795cba87.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/ripple":"14.0.0-canary.8795cba87.0","@material/animation":"14.0.0-canary.8795cba87.0","@material/elevation":"14.0.0-canary.8795cba87.0","@material/typography":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.8795cba87.0_1636660656943_0.9707735511023117","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/drawer","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e059b3daa9b35fcfe24f2702bb99d98fa9e3ebc5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.cd7f8cace.0.tgz","fileCount":47,"integrity":"sha512-ZP/M49cwvfjA+Pcsa/0SLNxwezcvQiXtAIpnv4qAzHJNzyUUefYmq6B4nw4fewjkxXzyS7dFwdrBhpWZQPftTQ==","signatures":[{"sig":"MEUCIGFrzRq8BtpSrsw14zsorZJpz0m36IYxezjcRGXxiHrRAiEAvqbrAPB88VQU0omANwd/7zaGFefVQU8EiVsafzzodpk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cd7f8cace.0","@material/rtl":"14.0.0-canary.cd7f8cace.0","@material/base":"14.0.0-canary.cd7f8cace.0","@material/list":"14.0.0-canary.cd7f8cace.0","@material/shape":"14.0.0-canary.cd7f8cace.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/ripple":"14.0.0-canary.cd7f8cace.0","@material/animation":"14.0.0-canary.cd7f8cace.0","@material/elevation":"14.0.0-canary.cd7f8cace.0","@material/typography":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.cd7f8cace.0_1636660761969_0.5704778910614257","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/drawer","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.207230eb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce2719d86bbb670b002b095aed389d782a2e12f1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.207230eb8.0.tgz","fileCount":47,"integrity":"sha512-dQ0KEWLPMNresEufiJ8eoVOhs+12Hf/rpDYhaJ9kZKpnGVaG3GLYoO9Mae1rRntoZE6YXCJJsjbT21w80t7b6w==","signatures":[{"sig":"MEUCIB1Aba1Oi6e0OXESC8qKCaXv7h1QOBrSY+95tO84V+TjAiEAnB27gtqSbLdKacQjpljl96f75sYENK3QWWrhd/FQKs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.207230eb8.0","@material/rtl":"14.0.0-canary.207230eb8.0","@material/base":"14.0.0-canary.207230eb8.0","@material/list":"14.0.0-canary.207230eb8.0","@material/shape":"14.0.0-canary.207230eb8.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/ripple":"14.0.0-canary.207230eb8.0","@material/animation":"14.0.0-canary.207230eb8.0","@material/elevation":"14.0.0-canary.207230eb8.0","@material/typography":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.207230eb8.0_1636669523784_0.835407698552961","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/drawer","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f97f3711cd60d6daa4b2d61cde6eb00e4cfc2511","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.991fb99f7.0.tgz","fileCount":47,"integrity":"sha512-I3DBqvYvAe8V0yYI5VIceLm1AzGW1UtwWkZKDyTvvqFRXThnQjgh0nMVrH8dYNJqw3rRfO9I+8Y8RWNfJB7dzw==","signatures":[{"sig":"MEYCIQD/EjAVIWL7wkCp1R4MW7wKRQOz34S1LHNQnRcPSMcDaAIhALscWC2QFaSHuealuWbU4d1DMBnX2W1R22Vt+N6uOjVj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.991fb99f7.0","@material/rtl":"14.0.0-canary.991fb99f7.0","@material/base":"14.0.0-canary.991fb99f7.0","@material/list":"14.0.0-canary.991fb99f7.0","@material/shape":"14.0.0-canary.991fb99f7.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/ripple":"14.0.0-canary.991fb99f7.0","@material/animation":"14.0.0-canary.991fb99f7.0","@material/elevation":"14.0.0-canary.991fb99f7.0","@material/typography":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.991fb99f7.0_1636670237791_0.12037258864778266","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/drawer","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.15db4f164.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"002ea62231b0b5218ecff8b1200fd278a07d93fe","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.15db4f164.0.tgz","fileCount":47,"integrity":"sha512-X2E+boN8MBzzcFi+mV0diYZSs/YAfnF6ZHpRBg8T5A9nJLjejJARFph0BdMmv7huJ+j7wxwMyfXoBjDErt0zTw==","signatures":[{"sig":"MEUCIQClmV+aVSO5iEbKDFJFOncnDtTIN18/Y2JbFTu6UUcpUQIgCydaG8Wxywn7CJpALIHecciI08GDsnjkaFH907TwVzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.15db4f164.0","@material/rtl":"14.0.0-canary.15db4f164.0","@material/base":"14.0.0-canary.15db4f164.0","@material/list":"14.0.0-canary.15db4f164.0","@material/shape":"14.0.0-canary.15db4f164.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/ripple":"14.0.0-canary.15db4f164.0","@material/animation":"14.0.0-canary.15db4f164.0","@material/elevation":"14.0.0-canary.15db4f164.0","@material/typography":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.15db4f164.0_1636738239467_0.604800158652411","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/drawer","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56ef61b1c8a5f03eebe0682f211ee1c98d4bc035","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":47,"integrity":"sha512-cnVDmAEOQ6qvdS+IHd0O6ed8H9H9EsH5Bq9fZRSXxrrYokOmVWonZ+Zn1kbznFK4qLfomJe7tFC+b4k0H91ktA==","signatures":[{"sig":"MEQCIAO9xck03t9jjhQ21ojyu5plnNo2GXb5FFHfqkEF5806AiBST6VR6+sACthEAPELQQ1dm7ROorAHNMPouvYqAPdoRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fcad5a3c.0","@material/rtl":"14.0.0-canary.8fcad5a3c.0","@material/base":"14.0.0-canary.8fcad5a3c.0","@material/list":"14.0.0-canary.8fcad5a3c.0","@material/shape":"14.0.0-canary.8fcad5a3c.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/ripple":"14.0.0-canary.8fcad5a3c.0","@material/animation":"14.0.0-canary.8fcad5a3c.0","@material/elevation":"14.0.0-canary.8fcad5a3c.0","@material/typography":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.8fcad5a3c.0_1636744480135_0.955659735726027","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/drawer","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8e4a0aec97f04c3d26a5d0c5895c7faece9fb6f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.f81fb1d23.0.tgz","fileCount":47,"integrity":"sha512-j5IUitebUDL+0vwKuasKg9Y6SIVUfSUESFjfltJUOztgt3xXok8gl+hUNEbwSsz89jJDlrwQNuABNlCs4aoZsA==","signatures":[{"sig":"MEYCIQCQmAXNcKcwbce0r8HBvMvUbb/xYUyUTXWgduJxK2px3wIhAKRdNaHJ267JQrotwTTNlVMzns/0cyIMwTEhIR7qAyPi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f81fb1d23.0","@material/rtl":"14.0.0-canary.f81fb1d23.0","@material/base":"14.0.0-canary.f81fb1d23.0","@material/list":"14.0.0-canary.f81fb1d23.0","@material/shape":"14.0.0-canary.f81fb1d23.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/ripple":"14.0.0-canary.f81fb1d23.0","@material/animation":"14.0.0-canary.f81fb1d23.0","@material/elevation":"14.0.0-canary.f81fb1d23.0","@material/typography":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.f81fb1d23.0_1636756870174_0.26629643366915823","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/drawer","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"035ef06401dbcaa6f66502c8aca5a2d5f107c575","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.783f6fd5a.0.tgz","fileCount":47,"integrity":"sha512-4Y6JUqXtfB0VEmOfDtj8k0FiMETQzw+gzF2xjAeM5vGcHHcUUeQLq+NtrUF8xs3hzUv+8+GcZ7SCNKJbXMbXDg==","signatures":[{"sig":"MEUCIHNGmP9Noxm25mvHU6ZtCB/3iQp3QO5RyCBnVE1w6buoAiEAia0jYbci+HNuz2kjJ0pw6lkoTHVCjsu/FRN7RgTn4uc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0bOCRA9TVsSAnZWagAAQKkQAJnUeST5cQLqqNLKwPbC\n8ovKhJTnzjFgz8lOeLNyzf0M9O3+my2u9Kn2G2p0xfhVFfm3w+jOzdmPhr5e\n/hUfsdeUYHVBqdShu/HRfnHAxhi/aKQuTJ4yc/PNKANVY/M2zz+bWGU5hbWl\n01Rfg+iWu3LmGEDy1+DOtz7SQbmSIkix+xUZoKuhixhEMTegAzAVvbxBfttj\nKHbM4FmlqARKNP8ItH7kfblvPFWkngRG/HfYmBtRXamf9COuiTT/uAii68LM\ngHjzpL45xKPhch0ig5Jp9R9pBnovtdCYwj3sm3ogFMg5hF5b7zbL2r9i+MbI\n0brT3ocGm0fZ0PIQYZH+axeapjhHmaKwudAAs5lRKJmN1qIHLXEg788vt0nS\np/svXf/ebxQ38W2EDE25rj7CS1SU2kWDMXv6akwyBctErZlTBsS75xi8aNgW\nQEaSDyXZJcoN+iEbwhRihcOmPSO3yCXZLUHAcyH3eAbzecQlrSOTjesDonvb\naevkT3Yz3hfgcy3ezxPAtatzVCPPrvNbmpFYQuI5ql/yJszAidd26VUzF6Yd\nCbib4K4XYuxSzGhwo4jizW0V3u986MUnTknpZOBiVtJPYYrL6QGD7IWGT03n\nFLNM0yUnh2ly/Agny8vWaHEwKJiqHSQ95GT5xkhj8ynAnPu998cmLeQHZLy5\nrS5+\r\n=zRYQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.783f6fd5a.0","@material/rtl":"14.0.0-canary.783f6fd5a.0","@material/base":"14.0.0-canary.783f6fd5a.0","@material/list":"14.0.0-canary.783f6fd5a.0","@material/shape":"14.0.0-canary.783f6fd5a.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/ripple":"14.0.0-canary.783f6fd5a.0","@material/animation":"14.0.0-canary.783f6fd5a.0","@material/elevation":"14.0.0-canary.783f6fd5a.0","@material/typography":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.783f6fd5a.0_1637041870141_0.1864487765373708","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/drawer","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"336e988e057cfa21a70808c53b84c9144635b25d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.d57ec74c7.0.tgz","fileCount":47,"integrity":"sha512-DLegfSlrkDzLCs7KV6TT1TXZOMkZku8+IW4b+Ozwo+nLUnZyM7N+IFX0afxtw6xTSYTNg6w17NU9vtEzqvthtw==","signatures":[{"sig":"MEUCIEH8GtABAzDvzEkpkGSaI7Ii28By2mSf771vfLzoB4HpAiEA7dOML5EJZFvWLpiDXxsnZn0GD8To4ZqYLgYoN0Hs2D4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9m/CRA9TVsSAnZWagAA1L4QAIkKIR2ucfdyFKQIWM9w\n7F2G7xGPyG5zweGlbdM+jMtJNx7xu35sFr641uE5/xqLVypTXOjusKtNYJ0C\nwkjgA+cK7VK/dFa1m76JsUdJVStWxTOwGbXnzV5bpXZBotai9ACn0QfUZlPB\npPDiqbrNsS64g7Q8XaxztNspzyT0zjTMr3BH00X7WpA79fbOA0Ibqwreb5Xq\nrRMBHm4BaEPfzrgG0VjFN7/nYu/iGJVaqGPCITkpC6VWLhxdLfiInrwyV5Su\nGNYdK5V4pqeEMS6jaZVvBg9WsQpoPRr2cqiPnCwdMVfcEIySxZWnoSt9AaoG\ncrqfjGQR+MZY3pT/Csc4EiOhtgUJ97kxRI0fxhycNJJQyXKXq6AFqxXXWPBp\nmQchThXpW9R40i2ko6YSmMJxub0iVrdBj03S7ugDjNhEedo3lRDfRRn6PR2M\nUsMqsi5I1Uk3a2KkV6eR4cn1k3w1v/BddNp/WTU4KlEZZs00swvDD+45nczf\nuQ3cQgcoW4C6hbmhiQAcbQD6DDJ8H4q5b17/Ly3XI7AEt6e7OgfJRSTDe7uX\nwiUL1zH47y6YAzdSf3BAbtJo4fpv38nCzy/MDZEs+O6Hkn7Bt3ju/HOSJYWg\nGLJ+UtVtzUqh5aKMWWUKigILfZb+HZ7mIEC1GxTvng+ZrHGt9qt5ts117OJm\nZ7bp\r\n=fY33\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.d57ec74c7.0","@material/rtl":"14.0.0-canary.d57ec74c7.0","@material/base":"14.0.0-canary.d57ec74c7.0","@material/list":"14.0.0-canary.d57ec74c7.0","@material/shape":"14.0.0-canary.d57ec74c7.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/ripple":"14.0.0-canary.d57ec74c7.0","@material/animation":"14.0.0-canary.d57ec74c7.0","@material/elevation":"14.0.0-canary.d57ec74c7.0","@material/typography":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.d57ec74c7.0_1637079487063_0.22122434201564278","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/drawer","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.554c71829.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edca61ff19334f3a71e2544bef484cf70c0ef79e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.554c71829.0.tgz","fileCount":47,"integrity":"sha512-gFL4xlbZHzTDkq0MT6clINJAvgivzE/9B9VfaCyb9fyZvuKV+jBddUyuoFRQLrSBhKu+i2PnG5KDwFJAfPenbg==","signatures":[{"sig":"MEQCIF5uu6X/+p3StKLHeCc2jj0Q3zLBZmRnMWNlkk/5L23eAiAKP1lrjh0070fLAkuIZpP3yzhAio/7PyaAZNKNMlLmHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9pXCRA9TVsSAnZWagAAPREP/2DxehPEBFqFBVJjT8pJ\nl/uqpFuRvuiHXRbGZ41fyJE29AnMEwKrq2XciUpJfJNlp6+Y9Pvve4tiIQsr\nkqkVdiLzOczQuh3XEx7jpFJ3y7nU+6wWjOlPgQQEFCmUymEbjnFSh0QmCrDr\nNWbDF/9ibGrWB3KbHz7bj7gmUzci5xL/6B5/69R8zj4vbW4x47iLVAslkxg9\niwaoeZEMPmmuQVd4YnIRcDNIyRBOmireS98rkl8aSHZvDDMcjyiuo7odtaF5\nRzCZfTu3ttWtZko3FBHpFxTZUJt5CvgnB1VHPWIvsdp6M/2tFFK+4iFYGmDx\nmAJEJqGVr5HdW66miDr80tcLfXO5BH6ajGVoGaxV/WwiM9cAvhfboVdJ7N8K\nXUpAZd4FrpC/1L1TnBUc43ZOnce2qXxT1q4CI9LAetGYDkjJzaKF8O+fkTeY\nBaFCSceRrl2fXKNW6S7ggRDgr0SVHFL/CmKU2YqLATfNe0lBF6qTMnsruS0f\n2qg6NFG8+GP+n7Dvvpd+pBMaeeBgthsVmi/4s8lLzDKeKHe7Lk/d+oXeEK0q\nkS1ODWFeauauPhZek9mcaXZghtT53lXa4xX1PYfJVsIA3IueMIuBwel2sE0g\n4eOwLZav40DE+de7deyz1XJ5XGjeIDDPOOwk31Nd4BvhPbqHrYSV0jqvhzya\nybKT\r\n=na8V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.554c71829.0","@material/rtl":"14.0.0-canary.554c71829.0","@material/base":"14.0.0-canary.554c71829.0","@material/list":"14.0.0-canary.554c71829.0","@material/shape":"14.0.0-canary.554c71829.0","@material/theme":"14.0.0-canary.554c71829.0","@material/ripple":"14.0.0-canary.554c71829.0","@material/animation":"14.0.0-canary.554c71829.0","@material/elevation":"14.0.0-canary.554c71829.0","@material/typography":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.554c71829.0_1637079639105_0.592181398173929","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/drawer","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bc2f2ddd3d0303a623cd5ae8e2e6314ff635d1d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.3ef470efe.0.tgz","fileCount":47,"integrity":"sha512-BuDkZG4xc/JGxSMszDpTqLjIUv6b4fELfWdy3mJcMRjV39HHLVQxNrFtJQkGVdKIV1ckpQjTgBH+W33BkyZ8jg==","signatures":[{"sig":"MEUCIQDnCizeoNGOobyaat/pnl7uIldHiws6EcGWkIGDNKfCzwIgXKxFrZ+ID5TVPqmYG5s6Pv8nQ19xVW+WD7NBPX/Ez1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9t4CRA9TVsSAnZWagAABOQP/iehH+M13IRdESCsOQNf\nhPBQitG2bnA2Qy+ZDXswhpGxuZB+Ozlsnc/TL8N0L7jGUFtqCY+sBc+xp81H\nE54InqCXs/OXt3a4ZzBjvddYtaLYxvVn2Fc1wpPo/Ra1JPcwIyU538Oa3GdK\nKfBiU7JPaDXcoQjaFLdoHtB9ebawAePI2/ovI/op2s/TDWz6n+qO2qf9Nsjf\n/kvwXSRlZep8RqsN/2x2cYj+bgeYdquzR/1givh69VsV3i8E84Cgfni+SdbX\n3Gan40oTbQhbY6A3nlC879ScD46biMqKFn9rdMqF5i65HwAXLML09KGJYcdv\n3iimdEsDmVXviT4XQzjNLSKIGkr7XG+gLzD1n+MTL8PPuoO03Sx131/LiaZR\nj584BHV+ps9yDQVNagiVI8/V5wsd7MLwCujr0cdJXuhXmwfL+0Q0tE3JBxC7\nh10pa4cGUVrAcTs58L+tkd0rSOjq0xGuNl4Gh97zZLPdRm6Mi4hbbx/EkpR1\nmfNrJHTM091yOKgb03N41YA/vfg3mAxlCAKaAnUHQA4OAuXfvJYsq07H+mYs\ng47Bn/+z2Q3TsjuXnFMmnQPrX/o+9XNYc0mkCa38WtwPpX3yG9PPWI6iJRBT\nZeicmwed58NgAi/d2ipBaHFw/zU7rcurTxas7LK4erRz06q6g0kfPJ4ETZVq\nKAtf\r\n=vuI6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ef470efe.0","@material/rtl":"14.0.0-canary.3ef470efe.0","@material/base":"14.0.0-canary.3ef470efe.0","@material/list":"14.0.0-canary.3ef470efe.0","@material/shape":"14.0.0-canary.3ef470efe.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/ripple":"14.0.0-canary.3ef470efe.0","@material/animation":"14.0.0-canary.3ef470efe.0","@material/elevation":"14.0.0-canary.3ef470efe.0","@material/typography":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.3ef470efe.0_1637079928167_0.8948075714798214","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/drawer","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6785794b3544c2652595477e5f3038defb75f06","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.61a28b2b5.0.tgz","fileCount":47,"integrity":"sha512-D4k2b4Kii0W5iOnCR2QDzZ/Sfnc/Z3HMV08MfV6VvjIaqh8ExrqVDAcA8J74jkqtdYSgkC504IBwNjXlgGIRfA==","signatures":[{"sig":"MEUCIQD5sHfR3uevtm4cJ7p2i6gpnvc8OlbsgOnuGGNF84vytQIgDCxie5xuXRCI6vZQEewzqNf23wcvnmHuIbhsDyyzulU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVFWCRA9TVsSAnZWagAA9y0P/iBTUwuHhJrew4HE58tY\nxd+ALRdba+E4Z0UEsCF+C2Bb4zMdLOGTcyfYQyepriKCy9ShewvAlsNScW9g\nCnJz/U6ma+dJDVe2evPLS0WKJGXicrw2gEs8IQwV5lDwCs4RoewomeFL5boS\ncXI5AM/VIYLUlwUG366Vv8/UeMrmAT+dVGLBU8FwHUwSjD2odkzdP3O+NbnS\neEQf26MfFH53bWmi+TBfKYx7QS6KhFe5MUQ9C+xYPPQKDZKgxCLh+Pelz/xU\nnX3/FQ6Pw9dtScwY5fdPoTaMvOX0ft1Rjkq5TEUa+57X8zwA2nO8G1/1SHEE\n5Thhcg6Urgafg+vtKQYBBju/s4P1N+s1bEa1LzgpDGBOhwqkhZgnZrrWloQi\nATpCAUEPdPFQyhQJa+wobtDF2aMCh2ZmB7FbgyYwPNJ5StCm2RGuS1/dzYYy\nHzqzFFy+jAZQ+CdIbq9g6LEkYbFB9lINymqYgD+s2RPeWFjA6HxCNjOL58RX\nb376yKFGDjTmMZ9nAW+34SGKhuFJLoYPbH/AEgEmkmXMIBuMhGsLHbV2LKbL\nGjVw7PLE00vtDk7ABIDHdkf/sAdajUpRXmjT8+55eq16NR90SeGvJjPy0vF3\nojLBBLdY9ugAYvpO//a59ml6d8G+1TBQbGqSCJs8OyZoZ22DrW8G3Ztz1WRH\nzV7Y\r\n=t6oh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.61a28b2b5.0","@material/rtl":"14.0.0-canary.61a28b2b5.0","@material/base":"14.0.0-canary.61a28b2b5.0","@material/list":"14.0.0-canary.61a28b2b5.0","@material/shape":"14.0.0-canary.61a28b2b5.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/ripple":"14.0.0-canary.61a28b2b5.0","@material/animation":"14.0.0-canary.61a28b2b5.0","@material/elevation":"14.0.0-canary.61a28b2b5.0","@material/typography":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.61a28b2b5.0_1637175638474_0.911233946748055","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/drawer","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.fae6c652d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43d0c3ffc0591439707152f0ad2a77dfe513a01a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.fae6c652d.0.tgz","fileCount":47,"integrity":"sha512-xnURKpxuZbz1Kp5w8CJVrPdn2mzrI5Yr7PiMMTHNs0qOx3S/8ZYZB+6f0HFAYFhKMzTNupbzajqjI2Cd7w8OFA==","signatures":[{"sig":"MEUCIQDPXEBDH/PTFduYvxBGWWFmGZkX2xnjVG9ofPuzDyhkQwIgJ7TxniCVzMODOBmnS45JR9620wgBZaEjCTNNShoXHCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln6iCRA9TVsSAnZWagAAiI4QAKEw/pOrWolE0vGoSm+m\n5TYPtHBzAoEx34ASLzf2sHR7X0cWpkHBovhCgmAr5vlTWl0Ny1deXcLfYYv6\nIAS+yermRyGOilkKiyom1a5KkN8/l2Sl0OivPixoEeQw7MEmp1KVIyyj53Vy\npNC9ya7R+gzaCV7RpgVo8+LkclCAFoOdK3fajytybC/WkXgTO2wt74Bw5w3J\nBQGCMJic1gpIIcVLEE5y2pluRqGz5dEQxdzHxiRGSFw6sEnoLEnFvRTbl62t\n3wUbTy/uiYG+dnzdPt+ZmovtafGmZ+GlqsJZjQ6KwUwZnOlS3kF/vwe6Kota\nUHTMvrVtdL/DboIM1vXeqhPYRfLneAyihlBwmjXN1SAf12Jtxh1Rj4eh2K4d\niovBPfmAYoq3JnZsL2+CvjgtpyDkGhmVjdYVrAavGjuipD3FkD2+bD9JOivL\n5LOcqFNZvRlQZeQi0YmAsCo0ZibWSNn0PGQv/KAw5Gb+lNskEV19t2tFDA0i\ndehg6yQep8vYN0GcSW6y1Wt6MXiwS+eBoie4xxQiLOzWHYev+nfGutsHOS3U\n2c3o5yjj8htm1D9u6kZAv4q65b6R4xwv/Vh4FqvK1JO7XGBuiOpOjbIiXO78\nKOjEUtUegez2GBe/hAe5Tc5+Fcf4YVbwOfnBfVLH2EQi3EhWhqlcG6Fi1EXS\nf3vt\r\n=Zer1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fae6c652d.0","@material/rtl":"14.0.0-canary.fae6c652d.0","@material/base":"14.0.0-canary.fae6c652d.0","@material/list":"14.0.0-canary.fae6c652d.0","@material/shape":"14.0.0-canary.fae6c652d.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/ripple":"14.0.0-canary.fae6c652d.0","@material/animation":"14.0.0-canary.fae6c652d.0","@material/elevation":"14.0.0-canary.fae6c652d.0","@material/typography":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.fae6c652d.0_1637252770546_0.41512293294191704","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/drawer","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.978a3b5bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c6cc889e673108fbb293b279d8e24aa20eaed44","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.978a3b5bb.0.tgz","fileCount":47,"integrity":"sha512-g1BNqRGk8hs8zVI4PFYJFZIaVA4sjZdh5VfNJqAcVF85P7sJ7wdwG3XjnkdWQ4IqZ+ty8K68H/+4N4p6xBjN8g==","signatures":[{"sig":"MEYCIQCJ1zXDZ+n8gf9+P1vn6AUZNNXepia5t5/oa4BjhTP4VgIhAL1DfCueEyILq3jBXjOK3zqOHR8IIJMY4KaH06LLo2E3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/21CRA9TVsSAnZWagAArScQAIS7JSNlOwLi8BvGVDSi\nC5G9X8PQ7mrE5Uf3SHKc7MoWtPXHuJ18NcgZgmB9IWbdXq/EuPhuoXYqMkYY\nBEZorHupgcsYJQ7YfmCydQumenGUJ7TyXzX7pfbQaGBi+ai4BvB4QdDr+Gbu\n5gEw+ABFqLSmK23DXpSj275E4jTS7ZwvV0M6qFyHwedNn2utLYjtWALp1Ry0\nE8bVtsdHRGMqAY8Pr9BH0APaNdwPBOU9/3D607fMxmCYPcn8JzMXZTGqU7vn\n9/7S18hnxABWf7gZj7vA8l/Mr2LGr4WzHiedR6S/zidgom2s5frp87QoMBwf\n4c0sWYJ5Ryln4Cbz+mpUG1uLVKhkSjBvNdLOXgAQBLTnDhXIJb6M2VHl2eKR\nXHn2SX5eKXRE5drQOntnDBjfBSlzpnvr9pdlrHn/9soSa2OMLfpQvLzQP4tx\ncikmwLx9Nj2yaTe1ee+qHIDq29cI73OprmVNguvDK7vJmnd2XBwkA/3V3WcW\nogsKg9+/r4CTvjZrkAWkQHXKayAyTw/7yb8ibUrpkYg7w6z32U+KYQ0rJb1P\nuM2uj/0Gmi+aHBTH+nahii0YlQ/q0s6sL5UH9QKZ5FjvS4VQGqvVFuNQaDPR\nzWDRWnRnNGijlrxopqcdrH483e52v4RgEr10+7br1UZ+easrUKdiVD3qlazs\n/2kU\r\n=KrNT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.978a3b5bb.0","@material/rtl":"14.0.0-canary.978a3b5bb.0","@material/base":"14.0.0-canary.978a3b5bb.0","@material/list":"14.0.0-canary.978a3b5bb.0","@material/shape":"14.0.0-canary.978a3b5bb.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/ripple":"14.0.0-canary.978a3b5bb.0","@material/animation":"14.0.0-canary.978a3b5bb.0","@material/elevation":"14.0.0-canary.978a3b5bb.0","@material/typography":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.978a3b5bb.0_1637350836931_0.02718361080350351","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/drawer","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.e6f43cf44.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbf0f5f113d7f9c594a5636d14c9907baac5f014","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.e6f43cf44.0.tgz","fileCount":47,"integrity":"sha512-jRXdxHHhsrkChUKTHZNXqk5z1XFNS97Vk09uex3DACCRUAGFqRB+ru21tYC/s4xIGN9ByjpqzJMh8xJvaC3WMg==","signatures":[{"sig":"MEQCIAHN3fN7sh4lF6C6ls3YOxhgJZ9KwwkatByBDITqlJ5AAiByHfRWJIHsly76GHSGQr/L/TAuFlIlt9ytZIpxyXKk8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9UWCRA9TVsSAnZWagAAa8MQAI7fNtoAs+BYErGqbAt4\ncrMgkTkirvXjbbXDb7cyz6f0J4O6X14/QeV6/PNLu105c5EV9PaKLMot8B3G\nlI5jsmjvB4vPJ0qVvnzFngYSQAaBJlNO5q57/A12ov6FeIh9Duh9cq+ZIhO0\nMLbwYvy+rr7IGIWsUQ6h+tUd1cA/ShuZFd+O+Qh5vHJEVUpfALBTZ9TFAlEf\nOsoFyRRh1ysYkSQifiTL8nHyL0x70ZyrJeeh3j3vk9bk0+4F/sZIMPJlEvH7\nnmggLDhn5sdXlmqM2Onbl/J0118EH4EfVfyhXPnRdi8DvElpGdqYMWe+Bosk\n3OQPoAZ24JFxMxHNE3utfT5uZK+YB8AYQ9s6HX86o1sTVhOEq/w8g2Ew2uGz\n1pcBvXB+vUcVh5xnRzh5DEwIV0uuHrAXG7OopMvZYiM26pLNNv7OeKdtw16H\n4SYYWw4oHNEgS8BIJ+fKxfc7ZRdnkAvZB97SiAl6H6K9/Eb5UXB0UpvipU4C\nRhH+u4vKLAeeCF3wZsn1rp9i6CmVsr7UQOyEBMTN5FPFCC55papviMbbngkP\nzn//bhZYRfpk0064iiTlOsJyJVDc6srbL83zKRhJhqyIE+PwmpCeU6upqhy4\nlIuWS57QJfAlCsq5GJll3qvBUHl6p0vx+uF0Cad2dTaXXChBl4RsdLBFxVTc\n7MKp\r\n=FR8k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e6f43cf44.0","@material/rtl":"14.0.0-canary.e6f43cf44.0","@material/base":"14.0.0-canary.e6f43cf44.0","@material/list":"14.0.0-canary.e6f43cf44.0","@material/shape":"14.0.0-canary.e6f43cf44.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/ripple":"14.0.0-canary.e6f43cf44.0","@material/animation":"14.0.0-canary.e6f43cf44.0","@material/elevation":"14.0.0-canary.e6f43cf44.0","@material/typography":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.e6f43cf44.0_1637602582482_0.9836018067200205","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/drawer","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.39cf14bc3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25ec3dde2ad5e682b79924956f46787061d7f7c6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.39cf14bc3.0.tgz","fileCount":47,"integrity":"sha512-Ae97dgqQERUBo9MZn1XI9XKV6aAJ66cTtxuYNshRpivZAez6iA6HgVocFmuSjNmdBEror5O5MP/DLnIDO9P3mQ==","signatures":[{"sig":"MEUCIBUe0/d2zSZkfaULlyM2U789EgkwN7jPHp1nrb01uB2XAiEAmsEyvAuhXVRJLeOrHr580HVtlJWSBf+q9LNMk4Ecpzs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCJOCRA9TVsSAnZWagAAFTAQAIV/hqBzxAgtH6UjQ/ae\n9LHGBl/8umuoXYEcLmaakSX1Pq3+v2n4yvRVr/xiUJ9KQYsvEqCT/FQb2TCo\n+GWLu+HyaP3fR+U1/V3h7v44xw0CxaqyO8AuzPj1BuAux9kB8Z8SFGsRG5AR\n0ygvpVI2e0cyZjq3tGvOniaRtqCcH3ZnUGgEs/mhuERNJoOEAX7YBafIYctv\nHVceccGjroRhZh32pknVFgw7ji2J96Dq4JZ00NqUPa6Lg3IWAaRZgszWZ1Ar\nhN4rk0hoeBErnRvk00L2iQwXYAfHSrulfQT5aMxNAvvXQy7ptfSfplxkmdie\n1Ql2C5ZkjwLd7P9fVSXuhG/TdaexsFxKt1Fbq7l/92PCsAXXuRmOvo9K7N60\n0WEZnme/fYdjeBNivFYenuAERDn5CYxgR1RQimx7pYzUZiGY+qSPnM9OPDxQ\nj1pkS2fBUAPorDkLErtSf1PqmKOS6jYRYFy/aw55wCe8X73BaF5Fj/DrPxcQ\nz5vtfugKuEBuRJGfBLCPWmbkPYzU8g4qjcZ/Y3Wg7qnFOkbzr/a3qWXUhAOu\ngx1zWB/djRqOs4Tv5+ippg4WVWFpOTsMxayhmdhc3aMFecOavKoIB7uli/Mb\n3rk7Mf740SiYWlmRnlHBwtEOKN3LsrxQ3IDTKhrLpwhZ8y535hy2OnW17C8j\n0ZHy\r\n=uaNT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.39cf14bc3.0","@material/rtl":"14.0.0-canary.39cf14bc3.0","@material/base":"14.0.0-canary.39cf14bc3.0","@material/list":"14.0.0-canary.39cf14bc3.0","@material/shape":"14.0.0-canary.39cf14bc3.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/ripple":"14.0.0-canary.39cf14bc3.0","@material/animation":"14.0.0-canary.39cf14bc3.0","@material/elevation":"14.0.0-canary.39cf14bc3.0","@material/typography":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.39cf14bc3.0_1637622349760_0.6929537120402254","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/drawer","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.93134d453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e02a10a6d27be7681c6d966f213d2d18c3603d8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.93134d453.0.tgz","fileCount":47,"integrity":"sha512-ZL8jpBd9NIYVp1AnrUmFquJ5akHEWisjBs6rwSaM9Qe+YNP09/dbliuaZ9/YA4RnhoNn9kdGrTUTqNkjgZRrSw==","signatures":[{"sig":"MEUCIQCdxHbU3gLpboIhXp6TrCNfx9NRdOKz5DthFAFGks8kBQIgTTkEan5vV1vzDKE7sJSoDgQB9iRLdXgYOKjqRk4F75g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQtzCRA9TVsSAnZWagAAkQ0P/1Veu6iTpzCI2QfvJMdJ\nprQVDDWAiqv2BVlBPdUrryfBRrRL4zoL+Syo56SYscNqn5oLziNzaH8Dc+pF\nL3LFuUxQC5hetUL5M6t/rdwGqgrLoUsrdPsQ1qBWSjsbaqtpYwjhkfz6cm5K\n0vOwJiQklLtmwWcViwUJNW0b1kFo9rMYG3K1sfbwfwM96NvJA0qopQYE/Fk+\nsl6hzumiIsQaUliGDGdXSm75THqdk/apmX6oQpkzaVnaz4ChS0UWWckkAjJi\nwG2GWo+IzAjE7TBd8iPLG5f618+q5089g1MrHlwS3qCTx/Du8rc4WLv0j6xI\nhkAs0IKFnfbLb+YWS2H6QANYoS+EB+Fe6i8JH1ZBmQVV9kgJzNkXeT/Pn5GZ\nI8wyeEsNpM98q4pTPtWt4meK6lBoSVBS8A7+xPE/YDxb7aQAdJ1FS0wN4fhP\nSrrGj3iMfvS//6Tf2blmEm6zwNhdZP92AUnLl9iSaQ/3nz6pdoqkTLcgQvXA\nXqDW6Ndq5mUTRAnSWV8yybsvR00Jk7cwxQcYo5Z22Lq1tvSez6zPvbMxRC2P\nlST/tOiU4mATHU+Q08AfgUglycHop9/EbsyhPrAyu9pd50rda3D6aC89gCyA\nOrj9jDlwfE63DPSs60TKPyiW58fqowQUjNTD9ARwMb6l7w+acalCnbfdtKU0\nwgUh\r\n=8mGn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.93134d453.0","@material/rtl":"14.0.0-canary.93134d453.0","@material/base":"14.0.0-canary.93134d453.0","@material/list":"14.0.0-canary.93134d453.0","@material/shape":"14.0.0-canary.93134d453.0","@material/theme":"14.0.0-canary.93134d453.0","@material/ripple":"14.0.0-canary.93134d453.0","@material/animation":"14.0.0-canary.93134d453.0","@material/elevation":"14.0.0-canary.93134d453.0","@material/typography":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.93134d453.0_1637682034956_0.6324583428957915","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/drawer","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.bbd11268f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c624d137bba0e9aaabf1f6c84d44b87d4c8c88d7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.bbd11268f.0.tgz","fileCount":47,"integrity":"sha512-W4jgsjONhpaHB/XL+oHc84lqEfcIa6UTZzN8So9BO0Eg3YgTdMChVfScuRERYLIrnMiuCgIFDQazZFeiLM58Dg==","signatures":[{"sig":"MEYCIQC+YNaQuSSP69vgs2o3/gMZh7myJO1WxgV7QYlpOx2MrQIhAN/cpXtV+HXMOzqqp4flGE22UC/KPmiiCk9/6miPhiOu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWw8CRA9TVsSAnZWagAACn0P/1UxsPuMRskfOzT8lffg\nj/gDzGk04x+3hTOJtjFM62eQAGEJyiVmIBbz0zJU04qAid09l1hPezgDPrm2\nJuwei80T1wAZtbsIe3xdFKfI+hb/Fs5D+szJmiUQdHMP0L1ZfTNN+W4F3wW5\nofv24rTL3Nt1LKr6r9jWnaihxkqoaOI1YnQF3gWldq6kpxsUjmA4KaikX00I\na0U1QQRPr6saHco2PHhqaCA8f05umkI0P16bwmMiEfony5rCuBxWG3ZGrA27\n/4jmfKa4aJ0D17sC4Ty0SONaNx4RSMbnSesSEJkmJTBxSCoIBUerF/CNpQpj\nDRqF1m4OZpFYRYEGm07xuJDO0PXwhSk7R3XjaRXrkxWvUIulaBrzZVJ1M8x4\nXfup6k4usmDfTw33eYv493EfeNRUK/4VYK8bqTyFX5BoNTp3GkiuXyqu8/eE\nThvfg+FiNUPlVZHQ5ViPWxigayU2KDLlbGA8vrdJRIEpo9IWmDILffp7j707\nM/rAaa+1G41kGAmVCQ5oEPt4+98XUBOczQy+twzU6R9JmjIefn302p+YzALk\naRLu39OnJZkCLYwONJysCRXgjbJMr4EOj6xFv9tnxFD95jOIub7CHSUk/+3Y\nHvL7YgVa0YbAFzCZ0yy7lprNDhMANboWRl5id1NFudWn7197m/t65/mhkUDP\ndd51\r\n=bHRk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd11268f.0","@material/rtl":"14.0.0-canary.bbd11268f.0","@material/base":"14.0.0-canary.bbd11268f.0","@material/list":"14.0.0-canary.bbd11268f.0","@material/shape":"14.0.0-canary.bbd11268f.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/ripple":"14.0.0-canary.bbd11268f.0","@material/animation":"14.0.0-canary.bbd11268f.0","@material/elevation":"14.0.0-canary.bbd11268f.0","@material/typography":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.bbd11268f.0_1637706811936_0.04016449092597907","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/drawer","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.3db9c4d3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69d8d0bb5bcc4dd2d91e2d0c65d665402b9379c3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":47,"integrity":"sha512-PohmHlolOjFAE/xlOX9xQLpcG1CqaZdTwolu331ebMnfeY/fBPBXvbfW8nSYyTEFSjWVe5pc5l1YZogjnLg0jg==","signatures":[{"sig":"MEQCIEyzTOrygcF+tuxZbU2yma7KF+js5IwWS5QOudVtM2wpAiA9eTL6Q6O5NbOxBwg1CwIwvM0Vu6o2/syhyfGTNSL4hA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlx+CRA9TVsSAnZWagAATwsP/AubMt7dvpQVSla2UW+P\nPQ3heigU7EQ2Z5/fU/xJ2KHA7+dybM+ywj9V5EpgDckpXV4f1zddYLbVk3ls\nK5M2LiVvcIHXzvpNGZ0+9UHaX2W1e3mn5gdbGy8L6b2nP1YrfTyvcGIsWmGg\nigpKcVI1jUWfY1y3ivAcqvmnRY7ikXaoEa6G6Q2iHBFc9/SkAOmUI+fhYakF\nVysqSbfLF+ElkvRSGKdfbn1JUIg6V7dfzMj93NXOXdVSnMVuTKnF9xjxR4uQ\n+AoXftfZlQHPr/CGRyz4vb97Vh8f7iE+G5ho4/IeJ96U0TzlTalaqpL5+ihC\nKZzM7b/lW+q2rQLc8C5RxvKjSj6ef5VBzS3hYb5JySPK2KBLm8E4xg3X4nlZ\nAaio+SaKORNH3Fln1gj+WzsiEHuXgNbJ96xdXePrC4ufZPqHWITnRltDvKpC\nr9t53hUDt6lnoDsEMOCZR7brnc6AofYCYF5DFGb3/aYYQ4D7ulB5VHPKHzmk\ngsvdX+BOwbZYuVEzDw9grR42Y4D81HpNxygAi9/cr2S0aMvXqMg+y5JPejTL\nWds3NnVqVJvWZtFr3GdEGnpJ2hSABNIeyuzJgoKXr4wAV71zycVkFGpk40By\nQhgfHEIqpXm7rrNvvQiDugTR4qiMvcYSpF4yr4cbTpiXH9LtUoVMIbsocQHN\nh0vM\r\n=j7df\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3db9c4d3d.0","@material/rtl":"14.0.0-canary.3db9c4d3d.0","@material/base":"14.0.0-canary.3db9c4d3d.0","@material/list":"14.0.0-canary.3db9c4d3d.0","@material/shape":"14.0.0-canary.3db9c4d3d.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/ripple":"14.0.0-canary.3db9c4d3d.0","@material/animation":"14.0.0-canary.3db9c4d3d.0","@material/elevation":"14.0.0-canary.3db9c4d3d.0","@material/typography":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.3db9c4d3d.0_1637768318683_0.7650620921110594","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/drawer","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.78305b6d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d442b754e0a02891e1f7347cdcdfa2e0b4fcf62c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.78305b6d5.0.tgz","fileCount":47,"integrity":"sha512-jJR/w/3MTGaKKqaZyVZLtZmlYp0yZw3m1VGLoUKmE27fIXcLhV5GYeeNbcQzTVPxP41bY42pJcgJH65ZZ4+K3Q==","signatures":[{"sig":"MEUCIQDyysoLg3IMvcRv0ernZSgqYIkQuzgM2jz0t+ydtY9vxgIgRlXfNclzOu4fIH6iIoFj8D+Z8Sp+HcBD7kTyYjKzlG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpfbCRA9TVsSAnZWagAAfoQP/3WdovS9bezbahd7FJha\n8UhmxKqSFq5w2XcCeoOSkQ6XINd+a/cNJXS75zh3I78bcNTSvapvaZA3C4A9\nT5zNowNDytGdICg5s+wK205afo+TlLJGu96bUysOGOS4gFpoBJ61MTBwuuME\nPI5jupUtC9lknczXZst9uOxxMitaEWGc8tDkXLESEHOZ+Pdobzl0me62CZtq\na5fckq22zITvoJpKQnyKZEAOeNXEjScnhUkGy45BKjHY2P7jRRPJB1wxxkse\nihd+fMcAyCxAsOie+bNJHUFShOcbgq9bzXcaborYgcjIOD6mNLoQRBOftrh5\ntU6yleX5jvqgdAXg1bK3aEJz4F8zG9yoLOaaOOnJmSXngtGGphdP+asakHk0\nwfRcRshhvLEoGPYsL7+grhOZI3UWw2e9ZshWmA5Q+wMrYmY55yInhPERyz8Z\numFb06lTizx2AZTf/mLmJIGnm2p8xKxFifKt64FjTuUWFTuCPBIiZ+yZz8s7\nOpCDOCu1zk0bAfp5gij88weZ5ELZFYzQjmjLJzYAkdDZpj2a71CHyPyeNcJL\ntnwiXvLRoDaWagDuZhMAmqM/iSXYmOhD2oxrWM1i7KK0lyBhs3Wnz64XDdqk\nIU4uvg/jfinxlK0Jx/fzKnWkb7FvW0AKgsMlaw/GJbWAhLyV25DnMfoqFr8D\nukzY\r\n=m5nv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.78305b6d5.0","@material/rtl":"14.0.0-canary.78305b6d5.0","@material/base":"14.0.0-canary.78305b6d5.0","@material/list":"14.0.0-canary.78305b6d5.0","@material/shape":"14.0.0-canary.78305b6d5.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/ripple":"14.0.0-canary.78305b6d5.0","@material/animation":"14.0.0-canary.78305b6d5.0","@material/elevation":"14.0.0-canary.78305b6d5.0","@material/typography":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.78305b6d5.0_1637783515317_0.3015870796455402","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/drawer","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.43d08ba77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ef08cab02af86fe3d0cf970b0a7e66ed30f1857","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.43d08ba77.0.tgz","fileCount":47,"integrity":"sha512-zYjFtJDlMJ2zqMAtrZrQGVjShpqtAhza7r10TCEZjFFjTRnwQO0PKBd8lC4ODUSVK4XOLvhoAm21UzIWnLvZCQ==","signatures":[{"sig":"MEUCIQC3q4jxt83Ck0vQ7cePEAg+Dk7030UGHL/ZL+JVf/fJugIgL6FEcyXUO156AuUD5mdVTTv+As1UuTPclaVkED/Cwxs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqxPCRA9TVsSAnZWagAAYPUP/3GdkJFG8u7jL9pXEhlx\nGnYSMgkVS+3GGqj0IUEJNSR8AUInFONJhH7vWcmcKuSpPyXTqV2MZAFyU5OF\nT5ZYU8WXdmRyb3abMmF0BPhariEThky93TRifR35KnMy0tCEi7Hjfekz2a+8\nkDkq9pSFJx8WTLWg6dvaG/GZtql3VDbuQLdDMABLRCWThQX6G9X7bohZ7xxq\nIm0C+OrczbWzq0w8j6Jf0IWc1aL2HyO/7cGCf04R9auADLsS/g5t/iCUNlJM\njZcrOCIKESqJHPQ2RzDVrIzb0kYtF8RT7JQgobYSca8I7BKHgdKrgRm/UYF8\nm/HkU0oLDy7nB7nOgV8Hc2bxcqfsAxXh4n3QFDX9aEOKANT2b5xPVvi6/4zg\nT+R9oyhWFYaoDV7fV7+R4GRuiXy1JFsrNA4CbC/Or7hYz1ytA/6Z5wslGQ80\ndsVMqQqgpX6+Rle1rJa3AeL557liKVWaPQWMzYGe41qD34X9WHDbtVQYX4mw\nyKno2E5iNfifQ7zZ3NiLcz/RXWHVUQpldowWoQaVhlzdYwQ4GwmovxzGg/ht\nsJ+q2ezDaUQK+A5RgXmF1G1TAW7kJDiFLyDmYohjt4mJuttHqyPc08fL92eF\ng1YfsNKX6IHXZtKLJ5NfCRKO8aU1F+kRt74CoAOig7l2009t34/nTsN+YdET\nA2ji\r\n=nAjj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43d08ba77.0","@material/rtl":"14.0.0-canary.43d08ba77.0","@material/base":"14.0.0-canary.43d08ba77.0","@material/list":"14.0.0-canary.43d08ba77.0","@material/shape":"14.0.0-canary.43d08ba77.0","@material/theme":"14.0.0-canary.43d08ba77.0","@material/ripple":"14.0.0-canary.43d08ba77.0","@material/animation":"14.0.0-canary.43d08ba77.0","@material/elevation":"14.0.0-canary.43d08ba77.0","@material/typography":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.43d08ba77.0_1638313039067_0.3440553068326635","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/drawer","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.17a072535.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1210d52c4c32b3c296e593db4a340f788eaf7eb8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.17a072535.0.tgz","fileCount":47,"integrity":"sha512-/CNc0M6W0cQwPgba+yejcYCBDwQMQTDJcgoAKwyfTkpmZmwTPclUnmyzSDu71IL8gtaktAX+g9ef4ddg/s7Nbg==","signatures":[{"sig":"MEQCIGrp903Qgg92BaPCjDj6TdJdtO5rRx6omeGKD/EHA18PAiAqjEg2NPZnlSIjfSkcrFAp8uR0AOtDk++I0NZSwToHEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQsqCRA9TVsSAnZWagAA7kkP/Anm8FKGluDPApWBfU4n\nLv7dWns58RoaBkbboMAKElCqsCevi3Ofd/YOjPuernxxxgn/n4+AKQbJ/wEZ\nvVQJWpNt6g7omE/lt2w1H+C7uYTOHwMeQwqL/FImb5OrSseGa2N/zhRTgDqt\n0FYqUKULjHmJEiN/MqW/hI0tXFUg/Q8v3+Bk+4zibi/O3TzUidIjcs63bLpS\nJZe32P7dZ4PWEAwdbpK2RzkD8YF5R2Gak2X0PW+NbWk5D8+z9HUfKnXHVR4q\nEFVqOOKOdbCVoQNnEicckj/qfWJTJmnN12E4X98ADD5T6pLkt8p3YJNHe2u3\n9nk7gpVmw6IsjH1i4fBwlXRpVRd5RG6//AQwmcL+4u5hkWB1nTZ1rbfBkUNu\n6ugnAT5oTgNrHVug1NmONw4jL089DPQDChnIQJ5korGp1JD6oYyiJiSCdG1U\nTPcfAn8bSnXuNnjHoQq6hqANemgTNQp0hOCXY+PmX6z1aU72bn8dafE0NCij\n5IgtbRwtQLcnsGIe0ZyZL50jv4NGr1hRppMLgNyW03TbWn0u6ihLKGBEE8Jp\nVSZF8pb5OYG54OAguIi+t0B8GsFJNyEFyTeEt3IdRLdx17taxe1ypxOAmY7G\n9M5P5qR/1lr6UnL7Y1amZTC8nU+BXzpKDADe8nGATd03Wl9nEJwDFS+Pv9iJ\nH+iZ\r\n=ctpC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.17a072535.0","@material/rtl":"14.0.0-canary.17a072535.0","@material/base":"14.0.0-canary.17a072535.0","@material/list":"14.0.0-canary.17a072535.0","@material/shape":"14.0.0-canary.17a072535.0","@material/theme":"14.0.0-canary.17a072535.0","@material/ripple":"14.0.0-canary.17a072535.0","@material/animation":"14.0.0-canary.17a072535.0","@material/elevation":"14.0.0-canary.17a072535.0","@material/typography":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.17a072535.0_1638468394615_0.826585004642957","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/drawer","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.5d809696c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8616623fab82d9223b0669522b0d9e2e3c14543e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.5d809696c.0.tgz","fileCount":47,"integrity":"sha512-IVdbHys76F5MQ0APKRZe2G0INx7VN2JAw0+5t8zYVQPLoVntsGLDJSgO4yG/5dPppTQXZh8YMmXBHRZHZXv8Jg==","signatures":[{"sig":"MEYCIQDA+pBVJs/89rrpYhHw7wkIKzIPoR3Z9HBgdxt2m5e9xQIhAJkcyv4+EVLHhzPje9bM9WaYRL2pgv9++APICRL66ArR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO9ICRA9TVsSAnZWagAATaIP/As4zQm12DQQoNaWuXWu\nk0mQPyRcoPrHJzziSEtAa5IARNDw9ykpgsNEBE6jqBfjLHawYbiK9QEqHQDn\najtL8SRl8h9+cPC2x/K+4Yj1V6bKgMSTRqomjgCNQ7u0tfODXKFd4TOYaiiM\nUPNwve46FP6UEKUhMXOLlupbWPPxxGxB9UsWILtthfzPasX5OTUbDvj4/euW\ny+nAM2C7Hq9RfGUK5jwnSgFQEjYAAfgrHJY0yE7qYND0jlmNgyP5kBoXf7Jh\nGbwYoCCHE+M0h9vjtpZ260kYDdPz8lk77P56CVkmONMxXo1g2QtsIf1ysFto\nKb10Mym0QcGdPthr9dLWYvr57P08qdUhln+5RK9ez2MW/bOUe+eUWdW18X0m\nWJMmD134PypYH7cQEHbL9wWVOANm8ItIhXzAgIRQk3lsKchIzD0mxasZjAz4\n7iFIcn2iBZ842ukXLW1Ob+36JFJYBL1gnRrakpeHPngjg9kXJAMQgOM5mHwN\neM5adS7oARWDioFBdV5SrBpLn5SI8kxoQfZ1ZZM3izbkwfyyBdm1WlKLKdhm\nn8f3HxleY6q7SE+RCoVgAlFObqL9RTz8eCZepguz0c6SEHqPQpjwQCzYwkaj\nSyrwp9pP3l//mS0DJ7eAQJxccWrXKuOPh4+EUBXgcsjsPBnpVfNwFkA4kiK+\nXM2b\r\n=xWLm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.5d809696c.0","@material/rtl":"14.0.0-canary.5d809696c.0","@material/base":"14.0.0-canary.5d809696c.0","@material/list":"14.0.0-canary.5d809696c.0","@material/shape":"14.0.0-canary.5d809696c.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/ripple":"14.0.0-canary.5d809696c.0","@material/animation":"14.0.0-canary.5d809696c.0","@material/elevation":"14.0.0-canary.5d809696c.0","@material/typography":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.5d809696c.0_1638985544051_0.2852543238416301","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/drawer","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.b6510c8c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6801fb2eb203885d8952f492044c87ec2e110b2a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.b6510c8c1.0.tgz","fileCount":47,"integrity":"sha512-MusjT6TQo4pfG+DyyRHRUBz6HNhXW3AedCOBAGKBcNkeYw/A05T6ozZl3mCCMpsP8XAGDMN9eJpT98fSq1Lb3w==","signatures":[{"sig":"MEUCIQDfXEnp7ujS3TXEeL1Nu52ELYYFmYdyEmw/Ynk/PAZE4QIgDMwaIMM7C0p/GClnb9guvKUjFVraqePYDPB0+h6gkRc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPR5CRA9TVsSAnZWagAAE0YP/0UVqSzonklP2FTUxws3\niPHeq0jMYRJH3h7QxggwtKGXzBqg1ttgHqdfz0hGMpN8OYnUC8YQh8EeTkRy\na1hjFu7pMbtsQQFpevv6RF3ZLvIcQFEsLiZrCBnTrr+K2fsiK7iKZiKL0EQS\nxJ8zuxHv6CrHsPLvdCggZEVJlJO7wKTRCWkm6AeF1mdFxwqSUDL05N7l+ZCI\n0QCxgTIHi9bERZfXg1Xrr1a+FlWOV1BYBz/hK9+RvjsejBkRBt/hTXZpOgQD\nv1v1py0ic48NdRrWcrkF6PmfTH2//MidcaGEtYBD4QcJwOtnjWzBW7uAHvDq\nK1L1itCiLyQzmPoAkjAUhILQLGBv3nFGLs16ZR6C1/Cw+sjkSy2kJ19NtAPM\nhGxMkOK9LRWV6NPDA0pwt0EQ/J/KQQViXWiARCkNyPN4EcndMO/aUqS11SPv\ndHn50j2A8lF47jiLrBDqxejeCCOEmeA7bTfhbN4z5Iepp8GDDR02W5ubTZu1\njEeYT5CgdJq9j0je/T+dMOcB2xr/BlH7P2yKrkvf0ymfIukGIie1NGfh/sNN\nWhfJT0p2uDv8MsdBofxoz3LMh8Y8yKT1+PGqLmMsb6NqUiP0lq5jRaYvXlj2\nOmkh/0yAXqxVXSQJ9LkCl0cvKl19JXmLm8hqPgno4S/aGreYoAgjYkLNAMcd\nWTKp\r\n=wjxS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b6510c8c1.0","@material/rtl":"14.0.0-canary.b6510c8c1.0","@material/base":"14.0.0-canary.b6510c8c1.0","@material/list":"14.0.0-canary.b6510c8c1.0","@material/shape":"14.0.0-canary.b6510c8c1.0","@material/theme":"14.0.0-canary.b6510c8c1.0","@material/ripple":"14.0.0-canary.b6510c8c1.0","@material/animation":"14.0.0-canary.b6510c8c1.0","@material/elevation":"14.0.0-canary.b6510c8c1.0","@material/typography":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.b6510c8c1.0_1638986873050_0.5627635902258552","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/drawer","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.f460e23da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c653c2c42f0bed9f8c42905bda53addd9cef1d49","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.f460e23da.0.tgz","fileCount":47,"integrity":"sha512-1uxfDHk3UnUVkIvtVIuGSX4qMww3WvRn5VnPsVaa3YkrNb+Wa2CaYOLHGFPhIAqPDtacKr+PE3k0eMn6Cz5mng==","signatures":[{"sig":"MEUCIQCcl01+TqOQYEBQjLSV0+wsRlfYpAjhsWWkNfY82Db0PQIgeFErYclSW7+H8/WgSyFaYt24Ov5g6kAXWNJgNIA7x7s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":978619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3G0CRA9TVsSAnZWagAAHzcP/iiGGHCMJGAYG4rThuRR\nA0+mzf8JVJsfDRcgB3mCNXG4+Qqm6D+NDJHNSe5Vtr/rvX5lHbwD+kocGZFv\n8oSvhtSWI+INoZOgl04T+Wa11oTRBwDZy22e1U0wCwdXyZDaIc9ASYADhtsa\naAVNuVJ6I13d3YR8pHrZjiHeANN/dtN7lhodKKhTGAF1kgZO7AavvddLuBfd\nF/DOJHJ90lngbXZNq4NytIfKcUCi+z6AKsAfmu8DWVgkTKrotx+SjY3LTZ9d\nq4OFx33z1L1Ebje4TQw1mVhOwXKuYSFuchXeKABJTnLlqPEO6fy18rfHlQpT\nLYXjHy4nuqaC5dZs2tO3Y0C+cM/hhqsLybJNEKH5csAsVVdc+tTZkasYghU0\nlCylfJ4RO/QsYGDRmpcG+TBBcAeczySGagmyCJ1isqviNBoRWt90Kp00vqDj\nNNvycQPuAfOYccf6EP9JzxGdMnzIsG31dVOOki0wCYYrIql1Tei8n2U6syvl\nWXJEn5u+SRTVVA1lcIetRU2FFXgUqXrLMBSYk4CcgJ3clhBr3yq+0tMFowXR\n30qUQzbLx0Z24Co8Z1IFfSAFgXf4bxSNXKMIRAMb9NsNjP/RNYuhNVUu4MqB\nw2IUcIBBFGaeEDQuEAbGBNLdBO5tZAAzrpUyFZDMks55wNPUopUrgRYH4Fsm\nnxzN\r\n=SUCb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f460e23da.0","@material/rtl":"14.0.0-canary.f460e23da.0","@material/base":"14.0.0-canary.f460e23da.0","@material/list":"14.0.0-canary.f460e23da.0","@material/shape":"14.0.0-canary.f460e23da.0","@material/theme":"14.0.0-canary.f460e23da.0","@material/ripple":"14.0.0-canary.f460e23da.0","@material/animation":"14.0.0-canary.f460e23da.0","@material/elevation":"14.0.0-canary.f460e23da.0","@material/typography":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.f460e23da.0_1639150004082_0.06598815784517487","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/drawer","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.7d8ea4624.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34959c99239be6a1dc5a1cc096808ca44c8041d4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.7d8ea4624.0.tgz","fileCount":47,"integrity":"sha512-9OdubaAh6cWTDxRh5MQC++97VRhrScxIF364j0zzKMc4A1iIMc12WnevbR83khuDD6/7hgdDoGOfMn3xUPMdVA==","signatures":[{"sig":"MEQCIHobGUgMWo5c4oNCC509GZari4z2gUos3kbdS3hq2PFNAiALtn0tKPL9/wPUNLrswpGnTcCDiM0h9ueo6nDUNVNApg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6rPCRA9TVsSAnZWagAAdmkP/1mCi8RYoPXCoEcJjjmE\nfkbdH/zdh7XcbM030gxi5TL9W7fU9GuvjzSDAyWqH9GFjwFgwRNutjd1TouF\n+nmuUA39em1fM1jlxWszQuOO9xpD4deJEuE62IHBis0vEmrcvi2wc1tCJggm\n3rStToC2k1Olpkdq8cRKMEh0lxAAR2YXc/xuKPnC96/WixnqkFxqoKi3M+4Y\ngEuonnPGYVnoy8uJJAhSFuBi3E/qJZl/UYN3qWWPLtS3swUeH/mOWaAWlklt\nmMsK7d9bTaRXHgTJCRh57UUrIeegA2++KfNVCPRpVD/s8gPZuY989anaYS0Y\nFfVlrWfIdWXekB1Ad6HY/0OFyN/V3qMrsKzWb8AlnCL4d81nrfLDxeB0vvve\nTdkIvSB+f0jWhE3t/+q5ThWDlhBxOcriaoXsXBllBO/Qu2X9BX39S2j5NxRq\n8TKqCSj9iN89lDoaW4bTQEPAR0/MXW4draN6ga1gBwOk6/CALx8yhHvn8Lw9\nPiJuvkeV/H/qP4IDIvfgA2Lw+tGU4pB4ZveNQf0L620n71lsIejBT2F2nWuf\nCCVRTGb9NUjv7EYmlA5gdpurg3kbpPklZTwgV5y8H+5AQrc7VU/vqakW+aDm\n3IJF5yDBrKTqUy+sdR56Bw9JPR6FBCiFZx7IdFGJ704GFnhOaUNTg1nEa6jC\nkvPB\r\n=tIjI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7d8ea4624.0","@material/rtl":"14.0.0-canary.7d8ea4624.0","@material/base":"14.0.0-canary.7d8ea4624.0","@material/list":"14.0.0-canary.7d8ea4624.0","@material/shape":"14.0.0-canary.7d8ea4624.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/ripple":"14.0.0-canary.7d8ea4624.0","@material/animation":"14.0.0-canary.7d8ea4624.0","@material/elevation":"14.0.0-canary.7d8ea4624.0","@material/typography":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.7d8ea4624.0_1639164623680_0.5458193812261596","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/drawer","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.8fffcb5dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89981de25503d5319dceeb15d512f1328a98c0eb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":47,"integrity":"sha512-8rjJkD2V/mb5CaWwQZI949ndz6jf6s8U6+wWWBRi7THoa//IV8FMZSmmpcs7679xqPzNOESWzJ1H+EAsfk29YA==","signatures":[{"sig":"MEUCIQD6S7ZsVZOCrFSkUopHHHtdMr3go5bRJOWmbSf9ylvOywIgbYv/ScX+Rt2UdE+ukP/qKM5ouImfk2cRXdWIkRVPxrs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFw/CRA9TVsSAnZWagAA+r8P/iPEiPX5LW9CGR7Vsq0G\n60Kk0a1XBETIOFj1Kf5EisWd4TMgcDeRMRMwTkZg38Yn+m7eqre2IbHQYFZ6\nIM1F+kBrPGWxhE09fPpY02js8anOq0JAKuHHauTs1Se91M5dcjIeio/Mr8XR\nHTTGxfUqCvE1c6p9nLuJpkDmjzmH62pKDn7PjnXi7kRSXxFKGBqOiFe7h+cf\nWV3d0fTD12YYI/BWcva5IAsPIVhHXfN2agaW+bOzSjuLF4I827zJMnQYHWRd\nxHQ3mhJKLSzNzineFGGUqEDaoCRdZ9eKFM3eU9UrrYhBrcofKbuZEGAqb657\ni8o3TrtvtbJYuT9Cau/2eAOL7jdv7oi/BtCEjEpW9K6+JtYVKdI+OedvAW/x\nu76y4FQtyBKAQ1kG+BZvQnjydnBQTGXSxfKNM6ZJKrMOUqAU1e2Tw1ArynAL\nv3xyrgTfa91MYL2LjEtgBFhJgxz8guD2wqW9dHPI7QjOOtezJIsdkMhynYhR\n3bJPBQlTsIb6xHMLAWOfeWCXaiH7VpaIzRekkhkPsmLPr1Xq6BlEGrzZyDKY\nKKwTCsjs3iFJ1Ojd1nozwbgzQvz8JB9WEygHPxROZrAqSU262xkVAsJ4FJy6\nJu7KxPkhVxyV8Hy22sHujPr5GHpWmNw63zaD5babYmKbiC1+ZZ0NYsvQYauj\n1K94\r\n=NbGc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fffcb5dd.0","@material/rtl":"14.0.0-canary.8fffcb5dd.0","@material/base":"14.0.0-canary.8fffcb5dd.0","@material/list":"14.0.0-canary.8fffcb5dd.0","@material/shape":"14.0.0-canary.8fffcb5dd.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/ripple":"14.0.0-canary.8fffcb5dd.0","@material/animation":"14.0.0-canary.8fffcb5dd.0","@material/elevation":"14.0.0-canary.8fffcb5dd.0","@material/typography":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.8fffcb5dd.0_1639472191492_0.0155248671297743","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/drawer","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.21e1cb9be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad07c106f832fe49517585cf566c709d978ef0fc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.21e1cb9be.0.tgz","fileCount":47,"integrity":"sha512-ryKBgIck575i3CSNJW+ydHDjVcjN7Dj8ARXw9Wb+S3aHgIcje2bZd/ktIfZ4ol5tvwIIZSeX0RPpTfzdgComew==","signatures":[{"sig":"MEUCIAwkJx1sIfbhOezWZuH0jWm0voib+NG73apXgCVwavRcAiEAywKTyO18p4gn6xMWeszwO3saD2AcuIehRa1UkyqjzQI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPNYCRA9TVsSAnZWagAAt5cP+wdPJdEInlu7v5YSSu9a\nBn9HuYhfiCDmvdAeH7w08sc86butiq/gR5D7wNmlLZh+dxQMZcQjNxCLB24t\nMhso5UxnD/n4ZhV6Bl6BuPUJXw7hwKsZFWVenviciuzYitZu2+udPaN1/SzP\n9AcWlTrzcqpYrFrdP/0irfnYBIjcFPDmoEOohlDmTn/opDp0OU/PPvag96M7\nq9q07Vjx3yoaZfs1FiVpqUiVvn1oODDdDui0hfY3VlyNdxThjTkewXZwR9sm\ntYtqQ4NkiSZVYyV6kSD8qdOMejhznHGWW9CaoYAl+dSHMMhiJiGXxKI4+BdJ\n+tCT0OCxENGptm4qQ8NIZ0K9v7j1hxpDr3rObTBhBO5BeKJl6Sf3t699rBPl\nHKFwdXCISlfN6pr82A/aL42kbWW36lyllqBJ8CVc9X0+IxzG5h1ac937dEAY\njISKIVRloDjRiQ0mON5jEpr3TBrBusw5F3uX3zn9wdZi54pGFrtbUqPQ3zCq\n7SuJCbU7UpscyJG3iIgaBhbddXeRyqbD5+Nc0af+Rv4j4rwYxDeGSyqXfdMM\nm/0Fm7Q2/mSuz5+qbbK9PAv5LGzj1brA21VxMiDWTypu13ebSLzOo13m0KNv\nfKSjGphMCG8ZtQbBlFkMcAJ2IavNQUtvM/xDcQQJTr75qaE84quarfdAteAY\n99v4\r\n=VNOA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.21e1cb9be.0","@material/rtl":"14.0.0-canary.21e1cb9be.0","@material/base":"14.0.0-canary.21e1cb9be.0","@material/list":"14.0.0-canary.21e1cb9be.0","@material/shape":"14.0.0-canary.21e1cb9be.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/ripple":"14.0.0-canary.21e1cb9be.0","@material/animation":"14.0.0-canary.21e1cb9be.0","@material/elevation":"14.0.0-canary.21e1cb9be.0","@material/typography":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.21e1cb9be.0_1639510872581_0.002193532723360647","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/drawer","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.ba78e8724.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c251c000e7af7965ee0c97d3edeb3de410fc282b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.ba78e8724.0.tgz","fileCount":47,"integrity":"sha512-6jfBW5r5RmXuIxEim2MlvaIcOTITQiGDXntdW3VNwlX2J6P2AFf+UNeJHLzLdLvdHCEJwcJVNdRmJ+JgjwVOKQ==","signatures":[{"sig":"MEQCIHpoOznKK4DXo65je3vFtaDw+tmqyhUIyaK4wPbaghR4AiAXf5wHZf7ssZ0kvZXud4zL6AEUFUbBqFBkViemmZHNHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumi3CRA9TVsSAnZWagAAjMEP/A5qXVRHnnpCJvjI7VCO\nOU2AvoK7rG79ppFNzQJqyYwW1ca2bg3773T9GihMAkP+bXdLL0KWTBBku0SD\nrzfqy9sXRnpoVHTHbj3PCSry3+T5+xcKEAzNsTiGjQhA1wPmx4gGU6UD0wOv\nVCrWK4APjv4hOR5KSy+SdJaio/Wr0MAWE/7MrvmQIGDZl3mfaNtBUuazKA0H\nr2Wzy7lATnUMyVyZ+DEygcl3n7nge5o1IHwQ6aPEybQt5FaStO9i9/wv+5dZ\nHKsH97xjlNANpeQ7MQTe+ZRvXZaf56QlFFf5i1SzfTz858tB2I5cRsRsO2Ec\nRwF9y6gH9X8mDZie+4iqVoGk+CtxZro47WHelo2DeCRnuT00cl+8Ql81OioL\ncqthpDeQfBQqzu4qgjLTQ5O5/RXV6Z0u31n4tcb+3YSdGp54LF+OHP+7v6cF\nufCk7UAqaml6Ch5mTMUWnpzjKnMouZ0HPEI63xPZdW3eP1FmbjBA98Ku7XlN\n/WhtjS3glvMZXwAH/sRBpGHmwuLXcrR0AQVaAMaVDUvuW3Vu7XYYBq5kdeN0\nXagm9Pt43Wgh0yvgy/O+ZrR72TVZHwE0DYj4rhwR7ozeImfssMIk6HRyzDsk\nCfO9rrmW0qTHwCakgZsyEkuASvUlat4ztMrOx1xRQtF2fWUCUxKNsmiiiDIU\nOvYA\r\n=bgxx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ba78e8724.0","@material/rtl":"14.0.0-canary.ba78e8724.0","@material/base":"14.0.0-canary.ba78e8724.0","@material/list":"14.0.0-canary.ba78e8724.0","@material/shape":"14.0.0-canary.ba78e8724.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/ripple":"14.0.0-canary.ba78e8724.0","@material/animation":"14.0.0-canary.ba78e8724.0","@material/elevation":"14.0.0-canary.ba78e8724.0","@material/typography":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.ba78e8724.0_1639606455469_0.18933066475570803","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/drawer","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.e3e073c00.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1191a75bd89f5e410fd2a1e5e97a671e516cd946","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.e3e073c00.0.tgz","fileCount":47,"integrity":"sha512-GikTgZqPCLDCWDdDEjhAEpcxvWecPye83CAg8iXnOILOMFKbt2pH1vGw/+vNYhVruzoOjMiLbjfZoJdsZ9HhRg==","signatures":[{"sig":"MEQCIGNCXZU0Rvq9dcOaIANxxUCwMNhLXiOeqQO0k2jL6D+WAiAoXFAFPOvIRF/wvgA6kXKRaCFaTcIlDRltYPyGyksDyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPFlCRA9TVsSAnZWagAAZucP/RWZR8B9B+fWxxZVpiHg\n86c3BdTwplCqgxNFBNERpu9Uokra9WrRlcXLR4vpl+CHDLfBcZtPakUqzPFP\n+hJECVCGC2n6VJfzQ9IkBi/3hGY4vPLZQm0TER9mwKgm8HNYYSdApoxI+O96\nMEI1Tsv8CbIXzw8URS57q8/83G/zBQaAjeAEfPTOjoK1nKLpqeIMq3xh157c\nD3HaDvehCN6kdAcc6r2OyZYolWBjn5aj+3VCNFTXSpHF3ecRs/V44uUuZHAW\nH1iTn3+Om8JSu3pWH1DIsZfzSBGjJjUBBAqpoeVUknFvQPRkkI6hz3V5zrTU\nANc+MLIxLn5rpz7qC498A5Pq7hCRGFwxQT9CfDS/VgyEAWLdrUVGRu7EFbM7\nO7tFYusCOb1GFwSaxFRNJ7LXiSMDPXcvcT1Ym/XJ2tPPJS65kvxH93xCMK8r\nMVfcnolA+eyfl5rv+ggKsOROIUrik92t9BV509yJSdS3UAWZ1dY+dmnkWVW1\nuRxy1vTiqvF7S3HdG3vislWdMrOVGgLxA35Bgqpo4WjZlkak+obgWyi3SLMt\nnlhpOoVOgntxxRMb9/tMa3u3CNA9QJp539ng5cUmpNbaCBFLjvYsm1sFIrqS\nxWlJ91g9Pss0dbPOZRZTsiMrxPvw724JSecMuex9CrPI19ahRT15zv8N6y5v\nDaO+\r\n=870H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e3e073c00.0","@material/rtl":"14.0.0-canary.e3e073c00.0","@material/base":"14.0.0-canary.e3e073c00.0","@material/list":"14.0.0-canary.e3e073c00.0","@material/shape":"14.0.0-canary.e3e073c00.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/ripple":"14.0.0-canary.e3e073c00.0","@material/animation":"14.0.0-canary.e3e073c00.0","@material/elevation":"14.0.0-canary.e3e073c00.0","@material/typography":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.e3e073c00.0_1640034661082_0.10029975153120474","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/drawer","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.3366a71d7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0539ad47f3f5dcdd7931fd50141e9de12f264a0d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.3366a71d7.0.tgz","fileCount":47,"integrity":"sha512-gHhSs7mYDeBM78A1QWS8d6C/9y9JaVjuLPDANLFEMpUI6PTwyjb5lfZIzJID6q3DzUIFB2fJ5V7JrsmKAnVbdg==","signatures":[{"sig":"MEUCIFWiFCNf+MXhOWG9rOdeMKxTEsdwBqIev2NEFpK6j9crAiEAsc7N1J/9I/07r/iiToR//etj3o1O7PDQUCAulntG5Ss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxsfCRA9TVsSAnZWagAA5UkP+wZ/Na584/w+JXp/lPDH\n2OOQ1BiIeeXWmU6RUKhGC7rj3FCnwCK7WWNTK7GQwcYlUMm0dkCycg43+y5+\n5ihd/Ay7BKxS1sK1Y4Fs8/QESGzDeoNLYZxMRCvSt4b7K+tPVZijRsOXuRzF\nYzSGXsoo7eiuowoXgCOHbRHDdo1lKznY3Ji3jCam3iEkyi27tJqY7iXseZ2L\nJsRvERr/SgPcc1T1bdRCxzBcfKgzh3gGDYvQ6dG2OW5DYEElQYEr8x9u96Gx\ngzMXenrZDsbIcnDNRgumuJJmtRDmAAMeXmyuR17XO9029gPH056G2+WOz+sG\n14aHiOvbzrsJd7TtgS8qNFyhhtc66u1FPVHTd9J1/ZGvUlrl7Muqzmf6Bnk+\n0C/KKnp9b3j6AxXQNVNGEv8jpHbPZo8mK1+cANyFQ276h+wV1vwrYEnA8+Cc\n8vQNgelZr7H6M24bmlynj0fRh86AcrwzG9xfzVZhhMITfphC9NzTtRHoxGLw\nPJe7NmMplZNSTOEwUE+U+2a+d8Kl9I90wv69T4kfzHIJUAbjJ82NfWIeDqbx\nS7ogoDdN1O7htaEvSvGukM/4lHGmmF0PBWqDYFM9bKQBFqW/O76FJbYihyMr\nkPEbAhe46/T1LddxOyleEosCnmxdqMOktNnlOds5HNso+kdVvV2mjIkIfpJJ\nswju\r\n=4hxK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3366a71d7.0","@material/rtl":"14.0.0-canary.3366a71d7.0","@material/base":"14.0.0-canary.3366a71d7.0","@material/list":"14.0.0-canary.3366a71d7.0","@material/shape":"14.0.0-canary.3366a71d7.0","@material/theme":"14.0.0-canary.3366a71d7.0","@material/ripple":"14.0.0-canary.3366a71d7.0","@material/animation":"14.0.0-canary.3366a71d7.0","@material/elevation":"14.0.0-canary.3366a71d7.0","@material/typography":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.3366a71d7.0_1640176415142_0.46475438176830997","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/drawer","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.c047f7c19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7767a58ec5117dde0b0a95fb7855fea61ba2ba10","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.c047f7c19.0.tgz","fileCount":47,"integrity":"sha512-3WQyhqQt+LHZJDzWLfSqGze15Y3LiS5U4Fm9Ouarj5UUwVBXxaCrBI6ArrV/tTWh2MXTEMlDr4b/84eqI0imNw==","signatures":[{"sig":"MEQCIBEueX34JLQnMDedJNR7KSwZ14zYxM0DowZYs/PsKLUqAiBiuTnBXlqVCJ3Wf8wXl9d7BJohx+yL8E5wdGo8phaexw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1cuRCRA9TVsSAnZWagAA4nUP/0msv9iS6OsaaTlZXeI8\nRao1WeOi01Pn13BrQr8tAM+chfodNlnarp1FzCboPqb6G4Cu8yn/zCE3W+X3\nRp4MoMajXaXoj6XNugs4JZuN8XvF3FR/UQyGrVjEZb6GzhqweW2hoUc354eA\nhh+AEL1btmk5MIrENaKa1AMbg7h0zBHGO2sTRwuE84u0p3XMGP14luYI9Pu+\nncQsT1nqKh/ffBqgRUHHcZLfG8/iekTsIsclAQnBn1EqgyUOuiPmfRNbEBwb\n4vU2dDK1/DZhhJIt8zu7sDZkpHJk03PI/fwEB/Ci2s36hJcbpGC/16owRDKu\nvEkuYTGuuXjQ/i9bS4/Fum24pFqrrvOM7wDoxjizUJj2YY7B6/8lengSiMPt\nnICICTaI9I79QcUHPQlC10dmsgkaGRwBv+efpx9q5rX2MEdrtLz6gg1wWDdj\nnXxz1bL8jvvQXceP6qJD53FV/102xjlfzuihI+3PyHXSY31S56Nk2DYKNw39\nbWddMb4RGZjWW96zV6bU9gL7XRKINtnsxPd5r1yIJir6yEHwRwEW6sg4hyCj\nrUT6fNQE5dUFOgbqSsH6GS10ZripaXa9gc3KpLv2sOOPwSFRRvG0e18gtkO9\nib7AWLd3TkyOhBTDuQ1ThzvwPltUDUZQ7FwZ+IqiRtvZknZe6n3S6Wjs7Son\naCxc\r\n=/I4b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c047f7c19.0","@material/rtl":"14.0.0-canary.c047f7c19.0","@material/base":"14.0.0-canary.c047f7c19.0","@material/list":"14.0.0-canary.c047f7c19.0","@material/shape":"14.0.0-canary.c047f7c19.0","@material/theme":"14.0.0-canary.c047f7c19.0","@material/ripple":"14.0.0-canary.c047f7c19.0","@material/animation":"14.0.0-canary.c047f7c19.0","@material/elevation":"14.0.0-canary.c047f7c19.0","@material/typography":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.c047f7c19.0_1641401232965_0.3790526025389733","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/drawer","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.05db65ec0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3e67f93985c00af3c293a4862082350f0d6bfcd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.05db65ec0.0.tgz","fileCount":47,"integrity":"sha512-HFAxZFGIMtcdCokHfIBG38e+x3L38b71XV/ViU/Ex8kflglo3Y7GXEFEpkett0Z81/jFK0FP8NcuJtNgNOhRYg==","signatures":[{"sig":"MEQCIAxNbUrZSCP7lAAD7cgyyUZu8MBmP84ljmRF86V1wEK5AiArpS5NGCm+pX7zhltpEyji1c1jGhEeJJ9E+s2YJbasRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yOyCRA9TVsSAnZWagAAQ+AP+QGbbS3Yby8crMZB4rQH\nrryMBIShZMhKJ7F4Xf9Q2RzhaJlzePclo6GwOFLNWjmMD34E92CaDQGNEp8v\n2Ga5msZGKSBxwXnd1GJvYQaQO5WHLNNieNwf7LWo9tx93MPixGKUi3vY3bj3\nCL1SzEUYVClmFTGTKG3UF+41heHNZmiKb+kQZYO3QzScgGfLJdkfp38bbJTt\nyeL5gTYzZfbUGqLrOxCbB42VWoDPOOErE9vqThojnMX+mshajvzGXis/aDE4\nLNLjlYx35hCIShiIYNuz2/F5DOOXG5qlG4Ul1aLJachXYkHKSJMUknaVEwVy\n7XaTAOO26ocaCcIykUaH05QMVxSdGIjX/tHCIRI77grY8dGx1uY8szrjPPis\nvCL+aN9hIeY+DNBRvOLChG5FUos1EwnkERkme21sSfJ4n6FTCgTTUnSSeJ/c\nRgHJ4yn+/kBHBBy0cEjzwuStic+rMswMEWXZoD44qjJkoQWZ7LMdtHE8Oldq\ndokVqvUuqUi1EEPVvSW3t0jgR+JBzWykveSPCrlR6Mj1ZKcq0FgNj2iCHnWV\nOQOxXZNJyYcFiUg74lFqJKZPEuz52H8TadYUZL3oVaRZRljCeKTvYkWrqADU\n1uV23/yKOwZi8jt06k9X3OHI1xj7M+zd2A5muiu6weVoZsCC9XBXLiMBvOB7\n1dAQ\r\n=k02b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.05db65ec0.0","@material/rtl":"14.0.0-canary.05db65ec0.0","@material/base":"14.0.0-canary.05db65ec0.0","@material/list":"14.0.0-canary.05db65ec0.0","@material/shape":"14.0.0-canary.05db65ec0.0","@material/theme":"14.0.0-canary.05db65ec0.0","@material/ripple":"14.0.0-canary.05db65ec0.0","@material/animation":"14.0.0-canary.05db65ec0.0","@material/elevation":"14.0.0-canary.05db65ec0.0","@material/typography":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.05db65ec0.0_1641489330366_0.831534407692305","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/drawer","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.6ca8b8f85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55c54a0cc62f8a4c9b3666a04801d4f3106b2648","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":47,"integrity":"sha512-6I3pyELxFzXOHwYbzavJPJMtWD2fe3Nrs/4T81Zd1fBDpoSY/S5k9ObBzfkpR48yyO5zlQMuc3JHodra1FiHbw==","signatures":[{"sig":"MEUCIQDNQchpFAj++pOhVliSDgG1Lt3Jl+6khA/L48jreKI+LAIgJ41cOOdV/Hgz4wOi+sTuOXZZWHXpCSCY/OLdQKAzFKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GQcCRA9TVsSAnZWagAAcTIP/3FlKQ/UGI0pcqJ8LvAv\ng8MVco20v+EXtMwDdMWFsckbHWEP3B2si50MzRIdc5J34JQNv9pGzVCJEgW/\nKSggYgIX9i73SXtLMQkgZCHLknX4uy1ulHNde37c4Cfs2WppMPdV44sD70KP\nMK2MuiXjhESwhb+ZUqqMZMpDqRXFcJab66X4/9NLvOQnFVTCGKYEWWZJC884\nHfpX9R/8aVv+3URUJKpN8FdcG1EeLytpFeryr2YyhtlVoefWwHpBRTNXd0pa\nmMLU3LW/TwcuCjuIXa1NiPQrIDLSXyAknFW8h39cNLbXSc4Aj+RKN84G8bFr\nepaDkPp4ajur9X6oJi17LdfwYaVP2oJyKt9ixyRNldFKecTs8AJGsDJXl5JN\nlbvp+p9tTX45CcSjdd9yi6Dtwnit7Vx0wiotgFMXAxktJTY90szeFCjHsw4V\n+PK6htnF59Ntg5Jvw63hUSwMIMt2fNYOEN8cIH0HtyykAJWhWqBrrhr3frZv\nd9jgCGjGjkkRQc5pA9CCXLPRFOnmfBQyAT9C4VwHl5sd1ceya//V5Vxl6rUn\nCkcQFoGN9TvNZNzraXWZWrI0vL920FLcUPQHXUaIohsX4YcYhWTg0DF4FSDB\nYvM3lwEHZ82pJSe8yjErEGAtiCMhqnanInbOu/MZBBXf3kWEM+mYXvp2pnYU\nGj2M\r\n=fGIN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6ca8b8f85.0","@material/rtl":"14.0.0-canary.6ca8b8f85.0","@material/base":"14.0.0-canary.6ca8b8f85.0","@material/list":"14.0.0-canary.6ca8b8f85.0","@material/shape":"14.0.0-canary.6ca8b8f85.0","@material/theme":"14.0.0-canary.6ca8b8f85.0","@material/ripple":"14.0.0-canary.6ca8b8f85.0","@material/animation":"14.0.0-canary.6ca8b8f85.0","@material/elevation":"14.0.0-canary.6ca8b8f85.0","@material/typography":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.6ca8b8f85.0_1641571356272_0.4012927225282421","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/drawer","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.173ee7a7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfd50d83a8a4d176d27a713f2a7997c355aa331c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.173ee7a7a.0.tgz","fileCount":47,"integrity":"sha512-w6SHK8rw+fVa11WCHIPlBeTFhoZ96oHWVh1Sx7SRiDOWaRfmzByRzCsLOY4iguHplSr6PS8RNNhS5aR4ywjJVQ==","signatures":[{"sig":"MEUCIQCuk09phIkIrtKDN7lQucEe2PeYGz1n1hCMYMBy+aucUQIgWQUIRxXj3+Y6ELvnSKtV6vmUXJYtCgtVOSGBABKkDKU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GUKCRA9TVsSAnZWagAAXwYP+wZVsY56bnNLLUCF8E/4\nP3mvYQWWBHAcvsal1SE2WQXP8QlJjjVk+lVm8wqZd/2N0r5kpk8uYw8AaSxC\nH3K1A0l2l84rNWHHMitx/8mJBnVsQAcKIj+9TkQENBOcLNwkFbir5YOTamV5\nXRVlN2KANIF0Gf1LrKy0DKb5764ftPKBR2jl8vNmsgrhL8oiyHKmDjUuG4Gx\nPTp0k2OZL+CWQ7j2sFZBqnbmK3g1nrpjW48elUiIqf11FCXCbSd/cyOjLkvW\n3YsQuN1F79ktWVE6XqnqDxvY4XgBR4rfd8VscsqAn9t34GUYqqBx+hRRM69t\n34vkTfv3NNh7IWFRymxvqSUpNPwvSbFJOnONDlmxhNruPZcgYoR8gmh5OMT9\nC0dmIESjSLVhgYp3je8FdWvDXjqkU7wnN2Zv2bkHHh1KYvlt497/vzvZcHIk\nGpORWpoh3qUTXUn+pMBqR6pm0Hj8fRsIa2h/sJb8fwtpf3TqfxsTuFxgaSLx\nimyJABGqfYETFfzEXLEZCtO7FGNB96PcxdZJEzQVlAEhUKYUIZKAmpM8E4o0\nxFDhIcl921K16E9CGG4EofJwGB1ciPzorNKSDm9v/mMzx78yBJg7wAHp5FDZ\np+rFraz4dCOYvIlux2eqo7JO7GRML27RRt85DWkmRBjkODKs9mq6xdZqftWP\nDSvq\r\n=avz9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.173ee7a7a.0","@material/rtl":"14.0.0-canary.173ee7a7a.0","@material/base":"14.0.0-canary.173ee7a7a.0","@material/list":"14.0.0-canary.173ee7a7a.0","@material/shape":"14.0.0-canary.173ee7a7a.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/ripple":"14.0.0-canary.173ee7a7a.0","@material/animation":"14.0.0-canary.173ee7a7a.0","@material/elevation":"14.0.0-canary.173ee7a7a.0","@material/typography":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.173ee7a7a.0_1641833738354_0.998947982172002","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/drawer","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.b704e4dfc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b706e0192e81f0bb77d1eb70d2de9ca191030c0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.b704e4dfc.0.tgz","fileCount":47,"integrity":"sha512-5oWfywRb1u2v96b9X15q55W2YOsWTjwur26bkAbck2gFjfpnMQ/Ek8xomMCz0krfV7eRnXmJePYW/UsgE4Rbzw==","signatures":[{"sig":"MEYCIQCX8c5oMxpykrDl95kJph/Vmg+NAPjl6/MtiKQdsmnSnwIhANbZ9K6ZwyPwaLPPls661GjmcbJE+P/Edl2AULQ2OD1s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HwrCRA9TVsSAnZWagAAxwQP/3AULj9Ib8P//PWjNsyh\nEDAD7Bau0x6T7duHPEZLBouz0J1skeVbq6BLu+nyDL1nKAFjfT2nQMKroYZo\nFJjA3Avb2Wa351WCinluRX1AgaHXkVny52yVgHbjW5Ezz6y9X6qJBcPKMdeH\nrAvbSb/RvW9lE9E6E3rViOzR6l36OfEq8G6NOuT2FssfIge1FSVvOzlFwHVv\nAar2Ss9lkBTe0Np5opNVNcjUVcDiUxQd4twmJygw7H0v/8iROx733w8SLjqc\nC5BQmguaK8jDHT8sEZI6TJw/G3zTnvQxnNp0uNZHSrtM3KSf7PdxFc2ceKID\nTLAaZbHVoglQqWe5Il8i4WZyWBJx2Iz+f7h7rmVs6KkUSM+nLgUtnK68Au4E\nsq5IGOMrr7M9n8w1i/6VGbl3GJHA8w/dluRIIOXzuDirmCamd1o4rgSugWO9\nVTL7tCR8fYWiLjvOqO0AiGlzH++9ktCVmMxBHnz0Hgb0F+v6K+qclW2I7+x+\noje2WkAj1f6FtrPZGLIAZ9ZgTxHV+vx6/ouHJZc12UBClvldYbHTv5rYrq4T\nEs25VkoBMd1J+Vv3/7zisVGRF8lpa8Q5OsetSWLhYctbTqxm+NQQnBeAQM09\nf+BROJaDYQFETDoQeovMM4fUnMQzfy8KZ4Oza6GBEozQYoF72yEz/yMy134t\ngvCi\r\n=dKgi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b704e4dfc.0","@material/rtl":"14.0.0-canary.b704e4dfc.0","@material/base":"14.0.0-canary.b704e4dfc.0","@material/list":"14.0.0-canary.b704e4dfc.0","@material/shape":"14.0.0-canary.b704e4dfc.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/ripple":"14.0.0-canary.b704e4dfc.0","@material/animation":"14.0.0-canary.b704e4dfc.0","@material/elevation":"14.0.0-canary.b704e4dfc.0","@material/typography":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.b704e4dfc.0_1641839659188_0.2475425468807424","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/drawer","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.c14e977ee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8a19f86d077417b3e16312b97b98ff3ef308058","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.c14e977ee.0.tgz","fileCount":47,"integrity":"sha512-aCfUTBt9LYwR7y6hkkeq1GlZw6sVCnqRxBpmFfo3mX3y1hY05o1LQHrJt93H4Fnab7LkTZYy5I+lYOgfU+vA2A==","signatures":[{"sig":"MEQCIAckSvfu3Mvqc5vxMvm8rpG03kEofUca4di9jAF6hYPsAiAQnrgiD7JRBRqTfPhPTWWUMJrY3TMbOGKWpUDqM4Mhng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3adiCRA9TVsSAnZWagAACmoP/RIUuVuhQVltdRTkLz6J\nr0gZ/+wscIfo+o5SRIUM81hlnAy4uDUiiI+H7g2/gm9gnvhIWR4F4SnL2wb2\nz9Rz8Qpi+MmEq5JnZf9OML7KCVuAfA/nCnpdH3qxTcIzkyNnOPmSrRpa1d/F\n4UIeLfvYdK7oh8Fkg3MQJVCyv3N/zBAQsIPLVOEJhcRJH9fcsLi3Ls6SbJRe\nkuLKD3Xzl8CFmW/SB4fgjB5p5f9yTNIMI/qOqYSEKoalLh1pYUML9YXQG+iY\nUqv/P8KIhrpl0xVRld8GWeJrkP1iB3LaiQbvBdYxhDbi90iAZ3mPBsmtICNL\nJQIz/CA+jEqDlKa29mr8OTO99YursO8ex7/9XKOivMfMvblM+KW/GbP46pT7\n6uEQ1DVoxuIVYpB4KJSqWboUAISiFaeJEl9npDMl6AsgM/xtP+CMcBINBX9S\nTsl+Fd2gdGpAx96hahnb3xy8UDiTKylDs5MucZhkJLDEpb9xSvCM95vW/gTi\nyfohX9W1kZibHm+lkeHbvAw/FIRnZ1qSh5cYhe8pvoRk51zny/az98f1TvAJ\nvfKncxS5EcElcCYHEutnVjFGpsyrN3mT3gj4HZw2IlczG8z2XF704RYwEYNM\nRyL0362zJFur28XRXdsfEzIvUwcYm28+RnyPAvxQayQHFVsoIRr0fXRLMHJ1\nX7bD\r\n=qpbz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c14e977ee.0","@material/rtl":"14.0.0-canary.c14e977ee.0","@material/base":"14.0.0-canary.c14e977ee.0","@material/list":"14.0.0-canary.c14e977ee.0","@material/shape":"14.0.0-canary.c14e977ee.0","@material/theme":"14.0.0-canary.c14e977ee.0","@material/ripple":"14.0.0-canary.c14e977ee.0","@material/animation":"14.0.0-canary.c14e977ee.0","@material/elevation":"14.0.0-canary.c14e977ee.0","@material/typography":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.c14e977ee.0_1641916258045_0.4196427737441213","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/drawer","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.b094eaa4e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7df4d1ce48c82ebcdeee124ff49c06e017873577","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.b094eaa4e.0.tgz","fileCount":47,"integrity":"sha512-ANzURYFT0b56X93UjCU5N2bCHs7cC7H3qZBtdSRVPsqXmR10BoBKMnht010F3xGGKe15MwwmaBETNnA4k/xNWw==","signatures":[{"sig":"MEYCIQCCrhtoRKzddFhjnEOwJznjY1s7Xc7CIifEaRl9EclLJwIhALWtVhkePlKm7duoElH8kFndsWp2Vs0qxUuuVEbgOUWp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cRgCRA9TVsSAnZWagAAYNAP/iM2kT4Muq6nmWC9+GEF\n55/VjQSQLhTltbP9694sXJexT8TJKKGawC+JhbLMHieHAWtCKWH8oa1PqTSR\nJ3DOShE4FxFAx883bhepjtBjrNuZl41VrUZWfoeGcNz0MZrA3Oga0knXopHe\nz1LnkDuBkUeuNJRr/92OuCiOU5hJaqYyRE9Aenc9wryhydPHopB5v51Ahy4g\nlY/c1nmNn5+7itlWL8O0YHRexssiqvH6brcgL+M0M8wAL8o9uqpkmjaUB+An\nOoeVJqBO0V5WLfmsUU1IdmFvu6E8R9yRseAnneVOlCBfpnHCqpL+4/h7E+SJ\njtfkKjHrg6pTyHYX0+IggOHZts8aKjc16QyXMvqbann0Hung5h/+GVg9YUYQ\ncyejXgdwns5sZqNllp20CZdVw+jAvtDKVwV0+DkHKkDm37ZtKCBNxZTWZxDv\n+1J85vSIKCkTBczyY3Oyfnpz7ZQ0Pr2STHtOdpJCJwH1DKNz/hRSpEw/M6ON\nVpzB4ks3IJZHJPmZnzPhqt0s/8bE5OWPn1CtLnyy55P6jJ4xtY5OGdHN4/vh\nyWsoZciFOApGe+Obnfmsz9CuLt9pbB8RI9P7AhWLeTDZYILaV3XTN7yHbjy/\n0ri8Xzeh6znI4Ljx1YiS+HZ7RTN+dMMqhvnSPAmyhxN9jiaN9NZK7EIu8AmD\n5oCq\r\n=S6W8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b094eaa4e.0","@material/rtl":"14.0.0-canary.b094eaa4e.0","@material/base":"14.0.0-canary.b094eaa4e.0","@material/list":"14.0.0-canary.b094eaa4e.0","@material/shape":"14.0.0-canary.b094eaa4e.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/ripple":"14.0.0-canary.b094eaa4e.0","@material/animation":"14.0.0-canary.b094eaa4e.0","@material/elevation":"14.0.0-canary.b094eaa4e.0","@material/typography":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.b094eaa4e.0_1642185823799_0.28996363740678555","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/drawer","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.390220e42.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3468c79beaaf3c46a87afa075c933f24b57587c9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.390220e42.0.tgz","fileCount":47,"integrity":"sha512-KE3Gim1EXfbzrGJkAmNd5Mtp5NYgudVk9VHuGXp9f9O0SbXo+hfGNvGAQn7vWaZq5f2Gv0m386EIGNgCdktbMQ==","signatures":[{"sig":"MEUCIDHMbuef9Q72p9Jlvfd/wAH1MgbRR5MNPqd+Dg5yGTxuAiEA77Y8M2573wszVjjgyGVA2J4l+zFbWxprApxt7AJFE9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z2hCRA9TVsSAnZWagAAst8QAICLsIcmr9v+YatpW/mn\nujOLalCOEUDM1Tgwp0lrPiSnG6chZsdnLX8e+Fg3tT8AmaGRuiqERlcICkE2\nGV7CL/t+JHjmBgmStrNb6UK/J//aw0jZLf9tE6vn89uaC888SDu+DEzbwPut\nSJ8rfet+Epjo9sGpaomBCJv9pOIO7uhPkoXKTmGeBft7+aEjfhb+NCeiAUAQ\nciZ0+1zhiEFymusaGWahMUL0LLo/0HSaXXzaXOCGZ4tY8RtpTfnL4yuj4OBq\nwoJQzJOXCs1PMQHTfWSspzvCx320iYcokOxUD9YAkQCi3mzB0HMD3WCHo7+I\nwZ93fhe6cfo4sj7SpFSmlpYUzHpENZYu9wkXD5H2NVYe1BAZSmDtInxfagOz\nfH/pkir8wjYDvivbI+91Pk0YDourZvmgOvwiPfOItkDbLU7Sejm6cxJAD/vH\nIgHOBetQ5dN/3hvO3zmN+RKqZ//RVr4G97huaguJHM93FrjVEPae79T2qHP7\njM0wIzDpx5Tmg8YycDsMhdhd3XZpbVF8/ITX+aDoSu3rMZDT9QoS7USAmnq0\nbhw6Tza4iFhW3Fh75L4Im/QP/zxnr+1qBwN3bo4JYZsuNVKEDyTXmMXKIymf\n02yaT2ZCN4k4pDVHIHoSRWkCc9Wl8OeRVvVoF/I0IRZnoo34eizMyUCE8mYM\n2a7v\r\n=v8GS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.390220e42.0","@material/rtl":"14.0.0-canary.390220e42.0","@material/base":"14.0.0-canary.390220e42.0","@material/list":"14.0.0-canary.390220e42.0","@material/shape":"14.0.0-canary.390220e42.0","@material/theme":"14.0.0-canary.390220e42.0","@material/ripple":"14.0.0-canary.390220e42.0","@material/animation":"14.0.0-canary.390220e42.0","@material/elevation":"14.0.0-canary.390220e42.0","@material/typography":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.390220e42.0_1642438049776_0.38808036591769146","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/drawer","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.4b5391f8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81296d7fe6510036945107e76a539e79d7ae82f8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.4b5391f8b.0.tgz","fileCount":47,"integrity":"sha512-SJBAHlSLtrrBpiVA0qcTV4eHYk61vRJRVaJNIG3TRNUv0Lx9GS61JnEDNe8TvhB7wa4toec4dbgAu+vbtGbgCg==","signatures":[{"sig":"MEUCIQDlHDR0JrB4j93jWPBfuUo9XZ0ZfW4BdJhJY66Tb9yBXgIgLAKpV5TgryVVK2Ezh3gbsEBMvJwu3G3EwHTzZpJttLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KScCRA9TVsSAnZWagAAIuMP/iHNo++RLKYxs1qMCAM3\nU7RwkhDQFLK3EiML+t80Fbp34EPWojWttIsE2LkQq8/PPXhDAusvDwF+RhN/\nqBK2GiTr2lxQt3jVPq313IRQh89GlUILEVMSrt7dCwZYZJI5dDUt20o5nm9I\n4LzwvbShQn5A0W2lAYsFnipNPa39isQHhS5LW/IfxDH9Hjxj63rvQidXaVyA\n73pKUIh/xvmFjci86IU3QcT4vXMB/jmWWCkVZVUt0rxh28PlISN1uD7knW93\nc7hj37FvsXONJxyNbo+RYRF/TruSKvvGcVLxa0iGw8Q+5eYe3OZPN7I5AtE0\n/2x0rzZoLWn5A5snrO3UvCHFgV4i6IDa5kO8t0F/IFXn4bhz8S0jb+z3pa+a\nkZzsDSIM2a8T+pzfM4pf2iLI2tmdVb4/KkFlwe/w2Voe7eAv1+cQmEROhMjj\n36mrbXdHKncEvorRPq7/3TwiE2RMaIs8Tu5aOu6CilzxLL7Gp0/2cjhv8LDF\nYnD/yq+ooYFoL1rNWlEFIYz75VtTinaZ5hqiRHA2rcP4QtbMta46sT7JnvwY\n7YploxUyGePEHm9X/R/KkEcMzwWQrOHJOgfQpkxxMluQLy19PIOstWdzQKW/\naNZ9GFPzn2qVgYv4MxtgoUFUPIj8Isomgaa2xKZllyMVCn+r6tTP7Moeh/DX\nayho\r\n=yJAK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b5391f8b.0","@material/rtl":"14.0.0-canary.4b5391f8b.0","@material/base":"14.0.0-canary.4b5391f8b.0","@material/list":"14.0.0-canary.4b5391f8b.0","@material/shape":"14.0.0-canary.4b5391f8b.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/ripple":"14.0.0-canary.4b5391f8b.0","@material/animation":"14.0.0-canary.4b5391f8b.0","@material/elevation":"14.0.0-canary.4b5391f8b.0","@material/typography":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.4b5391f8b.0_1642636443785_0.2796465920076687","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/drawer","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.cef6bc623.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60cf90086cdb913762f34b08815fd01eb732669c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.cef6bc623.0.tgz","fileCount":47,"integrity":"sha512-1vsMFzn/vHGKPmn3F4bvNi5ZyUqIQ8Mp0eFpqA9IJrW563OQ43oNPskBJLihGnmcaIIPHq516hV3vk7vF/wlEw==","signatures":[{"sig":"MEQCIEPbUdZ9P15I5dDkqJbzRVwbdRR3gABBBoy3dEFHZkYdAiA63xvjFw2vkbkqtoNslb+Ltas/4RGMP43vbuuAwKUs7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KppCRA9TVsSAnZWagAAB8EP/3p2QvE5FH5Pyi+bIVnL\nwjXZAxreMUjOUSwPkJY+TmGqKDiH0C1MHf19j+Wk/PWAtQEa+rZxnQ33yarG\numzoaotpSEs8fXNXVmlV1VIF6UC4bXuTPuxPA19OfQpI8jgSubWqvkud8HZ+\nWQFghjd3OJAeQlChJpqXEdMpkZrNFAkQTYyUNoE5hlqtWp78qvNdThb7SaDs\nGMNja6YTC9SpsxylCmRUslZbu6ipNYrMQNWIVUu1hm+EF6wvc/vTJ+XlySBw\n6HXF1sI+a8bl5f8xBoebi0LmpCd+dlBf5pmYfWSZRT/V2TkXx6D9nw6pTDAv\nsoNTnDoL0H72HWKo6vRD2N1GR1pErX7oKUqA+veoOUYyUW3RlYvOPo93wqMk\nG5ezpTEG/jn8WnBbTzA8EBdVswdkS2TLCMP6cy63nYSInfIc6N6r5IIONn7v\nDXiqDejARM6zG+KSVRJddsa2k/B/SQb0KSwvX6o24+HeLiQbL+e3o37rqx3I\nw+Y/jFNjAEsryYkRCD8WGLeCX7Kpj0hamK76GZowGKQOVOVTYPqnqx7Oolej\nJz5sL1cqKVMcoAoOnGUq23yc/XjZi6fp/nFyIJ0fY2iteSJG0G1Gz63hwcbV\nTLHRL225ayk0imnSmu5O0e6xfNhBeq8Pyt/O+psm9ZYD1WpeDGRQoVZ0odpo\nPTFq\r\n=CUpJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cef6bc623.0","@material/rtl":"14.0.0-canary.cef6bc623.0","@material/base":"14.0.0-canary.cef6bc623.0","@material/list":"14.0.0-canary.cef6bc623.0","@material/shape":"14.0.0-canary.cef6bc623.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/ripple":"14.0.0-canary.cef6bc623.0","@material/animation":"14.0.0-canary.cef6bc623.0","@material/elevation":"14.0.0-canary.cef6bc623.0","@material/typography":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.cef6bc623.0_1642637929288_0.31564744356781227","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/drawer","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.0379179c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04bf124bf0c46f8da76d11d04d3bcea08db8edd9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.0379179c4.0.tgz","fileCount":47,"integrity":"sha512-hCbU9hMUiYRaKL2Kq1iKXs3VsRhQzJWW0kPtKood9zIOMbqjNe2RYjTdCmqgXwjvDFr6zUC1s7bIGroCn1IR3g==","signatures":[{"sig":"MEYCIQCk3cvAgicUJQNCN/ZBOZXJnF5okJuT58B5ohusH8xoigIhAIH8O0vvEtsLo5cP9sz+xJ6z4T7DhBdSzAiYDjOdxn1i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6bAuCRA9TVsSAnZWagAAotUP/01LuidvRbZHnQLlrO/S\nwmimg7XgWkVgJhwZ3h4FuMbaTtXCpiZWvXCax1dKuyGvFgVOQ8Ds8H/p3JqW\n+VFaqcS8FCAXuXxZblh+3L8qeZaOMKMnx0Vrj7fxG7iwrt1z03JkAXZ7fiUU\n9BdHW9eJoNtxHyUf1mdq7//S4crZe5PX4grs5oM+Xawz1z67A01kI0VTXzMc\nrEu9QgtXpkKSpEJMWXNLCBuQ1ig0+2zvMy7wqfQ1ObUT7xKP5j1RO4YtWXUS\nrUmQiTbrUVdR08+/d5f1gFcHznk2H58s9IKwUrVWruFPL5Xk4nLpYfBqrZ0O\nON0H9tD1qvYm2iFCTU4zZGrdUOLBhToSY1qsvb6kYxLF6bkZe9akRLppF8sm\n2gzEIIpIH6atXh+dGfMQ92ZFPfoVgl2NipMGZ+LCI1gEpjSAKk4ez01xtuJb\n5FdDkzTA7nEJE0tC9IU6E2sNn9k6YIK0NfA/WJ4X/CjkO/ww9vUwGjn6wPET\ne785oLDlbond2bGC6WA515kQk3L9rbOY+W7tCdmeOVU7xNuPIimZs6WDSkv1\ni4Nx9mWhRurxWW1NQVCW0VbfaVt/W5waIuqRQJixynxepbdFvpxGHqak2myC\nsapjmcSF9FE+LTf1G3VLG0H8LcBPTnUcOrtrA7REhI0qOPUCqraOuEnsAc8o\nxMtv\r\n=EOZg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.0379179c4.0","@material/rtl":"14.0.0-canary.0379179c4.0","@material/base":"14.0.0-canary.0379179c4.0","@material/list":"14.0.0-canary.0379179c4.0","@material/shape":"14.0.0-canary.0379179c4.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/ripple":"14.0.0-canary.0379179c4.0","@material/animation":"14.0.0-canary.0379179c4.0","@material/elevation":"14.0.0-canary.0379179c4.0","@material/typography":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.0379179c4.0_1642704942058_0.9800036993789834","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/drawer","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.e62f3dabf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0315289e85bc445632d1266ea3d671f52e91145e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.e62f3dabf.0.tgz","fileCount":47,"integrity":"sha512-qkH+ti8EtQHWvDI7cW9pN32yRLhlXs7/GZIYh0mpUw5yj3xB4XZyFBqNDIgxsXJmm7sk6QPcjKLABxI5nAAiMg==","signatures":[{"sig":"MEUCIQD35Bzg0JHurp6b13l1VM02fZ3TXoXBVdnzGqzTjgzYsgIgEwmSn1CDfVCcc8RYWApNcBTyPvAwna1RIDWYTQIM9b4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zwJCRA9TVsSAnZWagAA5DUP/2mSYvtRQ8vfsfGyGquv\ny9MxdfNKWfPUVotMC+2HuT0qL0chmsoC6SJiy4aFXD+bF2S88ckLJ3qtOgAS\noAReMdWg2S6d0Hjn/9hpxcmSLB8oRXpkXkA3eAbPV6ILWgFcsXUDnuk94u75\nL7foyDzdh2N2tC6cs9hwPxfcBbuGpYOCjkkXfvcgoMg7P6oK53JyQ8ld3VvI\nr2YjOrMVU8Om6ESWaP9gmmPyfJfIp0CODAFRsPRQu9FdDmZqmwsCzFm7PJ16\n0e1+cli1ZiZlUk1UXTzW1YQf/jyEp3NJAGYjBl+1j7xsIIMZV7ukZS9xkLJI\nkaKHvTJQ74CVPFltJTGNjXIyFepGVgfZmGBwf2LZxH3cxB7CgiwKXKpYAvS+\n+g+PMq5Pt/5ffg/a+0CgEMQmGP+83UMnKj2xAWk2rSqnA9w8Ho1oqnP5Ubcx\nWy8QSt1pLvJZTUZewjBt4zaeAzhgo99o3r4KqfyciR9JBAHLYct5ZrlWwUO+\njIS2ovyMG8lt3VFRHfG6TD2aF2PlTWYFT6fK3WIK5lLJef+sVzpvc7JCd+Vu\n3RKYcUx++cQ83vzntKYg2Q0uds1fAzYJaXDIfYdU+kGHmLM8OJ3+cEqotVE3\nj2pdyZHmJtgQbqygbGbS9KyeQnyjDe+BZcuBNcrhErVu8NQ+zkTRU377hrGh\n7VRv\r\n=S/Iz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e62f3dabf.0","@material/rtl":"14.0.0-canary.e62f3dabf.0","@material/base":"14.0.0-canary.e62f3dabf.0","@material/list":"14.0.0-canary.e62f3dabf.0","@material/shape":"14.0.0-canary.e62f3dabf.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/ripple":"14.0.0-canary.e62f3dabf.0","@material/animation":"14.0.0-canary.e62f3dabf.0","@material/elevation":"14.0.0-canary.e62f3dabf.0","@material/typography":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.e62f3dabf.0_1642806280690_0.2526171662416832","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/drawer","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.3e20c1de8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17b4608d12e84b9fb4ce6b8b361be44018b80fe9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.3e20c1de8.0.tgz","fileCount":47,"integrity":"sha512-qPhsCqgu41Bw1wehvnQqXp+3xEHrCFGHI9twJsfriSpHRUKMfwkuBoXRuyRRYKCcvpE46sus/3iR1oEBJIgR4w==","signatures":[{"sig":"MEYCIQCPG3bPKjaEp4dEsveWdAYpkvQWaanBPdBLuRhY+SzutwIhAM6gZQtr8Jq4UbOago9qdx9pniGK+LeZ7AcpXGksMRSI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8Bg+CRA9TVsSAnZWagAAVRwQAIOs1IMbZXpeveL+gmW4\n+mXeiZNkOWziJN+vzhitwXFtKJkbNSgyUDkA0NZetG6t53/TRGKwwtSbcjad\ngjRXfDBZBtg35uN1P+VO3K1/tDiuB06ijLfb51r0OjXRO9+9HGGrt3jR5Wfn\nn2rwkx5sfZJmdlyKHrllmsEbaF4uD5YmSszdXd5aFgQS8n4vE+izg2dFgaip\n6jWApYNObL+7v/KN/2aqJ9Spl4/hN28WDFmxz1gwadqcDWw9vQVCUOwJnTCA\nmXZIHjbNHCDuGAvJI6EqPt2IHn2+qw+d97Wv0BkNjYJ8Cio4LujWn+41BdN+\ntclFGeLrq/2xTWMH99JlaiDLbLpIZarekDH35B6ntLCnHnJPJHxPwTEqyvvF\nvM6wqPC0DLztY7nH2OH4axzmggA/Y2T5u3y2DTWyBXkK37Dy5+SlWh4c0LrO\nk/e7nlKQp6Dvdce7Cz1dIwa0vbu2C+T8J9DBXCJTZJP0bMZsFj9Jq8S+Yc4b\naJohBSYGH7Wgeqw3OZGr2F3qXVq0J686t7ljPrgUw3t5/wIFVbQdSaLoKkHi\n7cZfeM4Y2tFJLSVTJ2tRbi6/SzZugHPa/A8cQK63MHIsbUpE1ts4U+wWQzk6\nQBJyBgkWOlyRrAKsstBFj3yAlh7yx4dGSqQ9TArjTW02BaALvPr+N6y6ina4\nuAvq\r\n=oM0Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e20c1de8.0","@material/rtl":"14.0.0-canary.3e20c1de8.0","@material/base":"14.0.0-canary.3e20c1de8.0","@material/list":"14.0.0-canary.3e20c1de8.0","@material/shape":"14.0.0-canary.3e20c1de8.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/ripple":"14.0.0-canary.3e20c1de8.0","@material/animation":"14.0.0-canary.3e20c1de8.0","@material/elevation":"14.0.0-canary.3e20c1de8.0","@material/typography":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.3e20c1de8.0_1643124798008_0.9258941627854387","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/drawer","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.9f9d928b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a24defd5cc9ab24abfed5f605e7fe0a4ae6be616","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.9f9d928b2.0.tgz","fileCount":47,"integrity":"sha512-AX/ads9x+lcJJLf3H5GE894TG4K1e9pn6kDXsAJECokceL8e4BKw4OsnbcYvfGrOY/J79ylxQL/Tki0+5b3dFw==","signatures":[{"sig":"MEUCIDezCacgwsv/I/kmwrCEmvHAZXsJjIJso4HU0xCK1JxuAiEA7Zio3MykpkcExDvfSoTlviw7bOTedWGOaUaOpjp8f34=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uEECRA9TVsSAnZWagAAqfMP/jgOMjIl/5AzjAZkbpVa\ncnErXSuQMCr8KblVOWDhE7TdiW8Swcu025VcC/5gTIoNmGHTvaMfcgRXt9nA\nwNEXN4Z4u3GCJFwotvRvlk867mDYvbOAvATZ6mZYDAriXf2+x4xBisG/mqQw\nloIBIrl1vJTkTFpDHWvrLK0TUTE2Epplqa/Hs11yvuy82vVSnmnST2iMUAnp\n6uoUoUNRccN8DxKz6Vm9s4dRr8S2hVlQCNWu8UZtmlfgH89BpPWy7bwswAZO\n0q8m3Vvh/gUvrjcvv5TtDy1lPwJJjkKtBl8ll06OtXIs2PpOEtk+ml/1cYMO\nT3VySPL2OZ7BWD7lMPn/iveCFj6R8Eu+LgbEqaFY43NRU10dPTJFJD8lcmdy\n9kmMFE0QVa+UbGuQkJHtbUWxxyZFkPS9GViuj2Aaxuk+bVRiJQbWAz5XIcRL\n4/brZF+8/ATyftYks6GEGSQc3+8Xos9JMmuMNJIUBMkqsvxDy3L/h43pdPZd\nU8OuCm70T4NVsHOcQdOzA3gr5lnQvt5Om4ENYWCrgPfhw00dT6NmOYo7BTpb\nsTYwkbEGvoulho2brlzNwlBl/3L6E5sVlx0FgBzyuqYDnKKi8Wr+piyx16OO\n6bzTbbUN16dH3hm13Uh5kXSbseaKsltUsQcoTbCo82FGGuZfG0oLqkcgbzDa\n8o4l\r\n=3v9h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9f9d928b2.0","@material/rtl":"14.0.0-canary.9f9d928b2.0","@material/base":"14.0.0-canary.9f9d928b2.0","@material/list":"14.0.0-canary.9f9d928b2.0","@material/shape":"14.0.0-canary.9f9d928b2.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/ripple":"14.0.0-canary.9f9d928b2.0","@material/animation":"14.0.0-canary.9f9d928b2.0","@material/elevation":"14.0.0-canary.9f9d928b2.0","@material/typography":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.9f9d928b2.0_1643307268341_0.22877115902462752","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/drawer","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.a2bcb065c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85e6ef43e213690b587bcdaecc4568872442447e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.a2bcb065c.0.tgz","fileCount":47,"integrity":"sha512-mi5P3JOYvHNLTUGfu2xdUj/wc/3Pr2I9Np4gIcmLzZMasTSBvYNMaqacdHagn8wlyo7sQ7yD3/+yR0WNjccEew==","signatures":[{"sig":"MEUCIQCn7XwPuciH8LN7BgCVE5RDupMWuOw2GE4Wkde5gvibEgIgGNgDZe2OfKmUq7yJgzSqEyHXuInPk0hbmMs44o87NIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EY0CRA9TVsSAnZWagAAnF0P/A51uT58gcbZA0iwTqCl\nZvBOQp4sLTqUCFZsUmVUN0AwTrgmT4JEl8WePPmQcDm65aqwgArqn7fflx+c\nTBSf/I1HG8ufQ0oTrbktL1deYRrXFfT+sWNmSGAUI79lVxKlNxLctTa8ogqb\nKbDhLjB7/z8x7Jt2hGY0X7PsQK19yrNAIGlk029/NnjvvWdEguOyPhofXLgC\nSrvtRpxmm391tqHsWpAUejfooK0x/9O8hiipvfpJc9lTdFdD5O/IXuibn0b0\nMf18g5sXTWnKjkVbHjSuLH5g+u7dTXCpzdyS0axcZVW6UtiZy5Zrqh/n62LM\nNJbk5Y2raSgLWue0FGE+ZzWpdQTdCkK3syjKSi0U8bvtw3Vk09J3BSOpSg13\nHczLF8T62IQbV3Nd1Gpnz0q9/499xRb0+19d/GHLk2gEU+QaxD2DqKVKWThh\njPqklSRaA2l5NbVx+KFXbi4wQOHpvjLhmVDdVFFeSmhc8mc9vieqI6tEbDnf\nooFPWQ1LGKoH/Twmsf+jgWd1QZpfIlCuBl8aRFd1VhtSSqgP+/bZWTtvhHep\nliwIT8IfROpf38m4wrpmqs/tx56fP7/Gu+IBLZsMjMI90I4n77HBCcQy/bhK\nCG7NPIdeh+N2I2qiVGb3da8I9wS3dDZSqzyqIZKHbs7eHxuFihDxi7+m4zgA\nZxzy\r\n=tiLf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a2bcb065c.0","@material/rtl":"14.0.0-canary.a2bcb065c.0","@material/base":"14.0.0-canary.a2bcb065c.0","@material/list":"14.0.0-canary.a2bcb065c.0","@material/shape":"14.0.0-canary.a2bcb065c.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/ripple":"14.0.0-canary.a2bcb065c.0","@material/animation":"14.0.0-canary.a2bcb065c.0","@material/elevation":"14.0.0-canary.a2bcb065c.0","@material/typography":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.a2bcb065c.0_1643398708401_0.8303900713265817","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/drawer","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.4e66fb2e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ee5c26f1995e892a170810e5292fb37beb3a36d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":47,"integrity":"sha512-Ft3Wv7gv1PEW4JP2JhZtvF6bNpW/6vWJegZWx9EtkoK6l/ZtobH6yv5YXGJ7nji6hKfrLDQrjRsbMhP96zosUA==","signatures":[{"sig":"MEYCIQD1FfdxTjCkWGv2IuQowPLFY0JNW9AdEAEhEdjKk+FjOgIhAOvhQZvwJKC7/s53wP9hhJiehd7o5vIRnhMimT6cvZdg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EcxCRA9TVsSAnZWagAAkBYP/2R/mXHZAK0csWkHtLW2\n3cGv42SS9wHj+boOzkhS3hTWv2Q+2pVV8bOabBn72i6KpiwtN9+IZhM0dm6U\ncCGHF1RXBLoUwjf76ZwapLskq6baDXOzuavMGBliiZmh2BGfcrwVOans7j79\nyTaW3mQYBTRT3dgPpkStn7Ptutmzl1Z9Eh5UcXuV+LkskyiPNQbrw5z1s2Zr\n03790oeRw1QH4Rh01GPcnSGVNenCr2XnomK200YiXUFcSZ2yztb7GirmXBYp\n/+n98ugRbnTirT9qNunBbFWJczrxFlgGjZUfqubWJCPYqtamjPiydpjeRW/t\nsKe+OvcbF5iOytEdyPdB6mdxugdRpO72Cls4DuF1tnobf2B0NGyBJ33Ieq0Y\nvo8c+8wfPhqr7MfM07yrdwfaOSO2bmGWUTPcceNyusZAP73V3tv+Zs0rvT24\nxTM7DhdPQVg4450F+f/uuyiOUcBZh+1blWhGGJ4L9P9NNus55meEGMLpbdeK\n3cKGFILgfztBd/mvrF9oqNiGJyBeR3IDlSNeoo0XgbnMANsLDcRtBOSV7F6i\nEzP1qbzdwB4T8UqxmVjkufNAuslnXwTDFCsmvz2Jn2nOV+9cs9LsiJt6PDOE\nHj4DC20S6dqBENqcRFAVWZy9RvPg3RrHljIF279F80DC6MUdblQwC1BoiuFv\n2inZ\r\n=cWau\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e66fb2e1.0","@material/rtl":"14.0.0-canary.4e66fb2e1.0","@material/base":"14.0.0-canary.4e66fb2e1.0","@material/list":"14.0.0-canary.4e66fb2e1.0","@material/shape":"14.0.0-canary.4e66fb2e1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/ripple":"14.0.0-canary.4e66fb2e1.0","@material/animation":"14.0.0-canary.4e66fb2e1.0","@material/elevation":"14.0.0-canary.4e66fb2e1.0","@material/typography":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.4e66fb2e1.0_1643398961397_0.36824227918456565","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/drawer","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.9736ddce9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de49e263b1a07ee9bdfca4a6fd9708e4689c8476","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.9736ddce9.0.tgz","fileCount":47,"integrity":"sha512-1WmtUq90LGo3f3t5/ehlnUGNDD5NGR9Yk0hVNdaUwIvtX7mWklLPPoQ2faJbHmeh7Eh1IW6dyQNO9syOnqg9hQ==","signatures":[{"sig":"MEUCIFrxCQ8SYokyJwAHJ/yUcpeslm9GFxaFpReI2XF7x9l6AiEA9SsGvcviD9vrEETaMUogXFmnAPiFgS3zU8waoX8z4fk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q4MCRA9TVsSAnZWagAALqIP/jw+wCPaDTJ0ho1IJYnx\n2XINn+IAE7UEBiYROFe39bRMCMNF7X/AIIpble2IR78hEzUVgi3e7xU1J6N0\nhi+IJAwUqMBoNngmBc/uLsOx8HJQaFLKqobCpZJXZmLcJaC6ViK3GKzlEZXw\nRxvFdjNoZWYwrw1YFtB3sm6YqAFpGmxBuDKr7D7gUbNjwocVBWc+S40HPk0H\ntjQRmuxDcD23T5E3LOI/CzPnWFD9NlgNkDbfa0VPquqlzIFeYebX15mgpU9u\nzvKQlOQFAyuJxcL8JmRNKQiwth4Ps2cmdosGqLuDM4SASMjJiuHjNYDPIuhI\nhEuiFdOCRk/5E9PrFaZTm5fogb24YYkxsqb7VAIe79VcBVsUkwtTXrp7Ncsb\nH1PnyAk2Ex6BzHIeLASO+vEdGnc1UOHxDikgquRv3swqIHF5a0LfCVpvelDG\nuHC8b07+r3YJ76tK4MJnxLfKBqhmxjn9MubQ7Ubz7dIhaoslSCgOcUUzle3E\nBtH9kkYYQiu+ndTpMSYaijZXVFhlHULMHhLj3ZkXUO0mRfkk3qEduDsyTrqo\nQBiAY+wvON1hM8Lr+Mgx/OsVsCdGu95/PjCvLvbzwff9q8p8CdHG3kpWuxQT\nWzarb5/Ga43sZKPphyUua63AVvHZqwnMR0fWS1W9upwKntByEGEO2ji/R11y\ncfCA\r\n=xasn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9736ddce9.0","@material/rtl":"14.0.0-canary.9736ddce9.0","@material/base":"14.0.0-canary.9736ddce9.0","@material/list":"14.0.0-canary.9736ddce9.0","@material/shape":"14.0.0-canary.9736ddce9.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/ripple":"14.0.0-canary.9736ddce9.0","@material/animation":"14.0.0-canary.9736ddce9.0","@material/elevation":"14.0.0-canary.9736ddce9.0","@material/typography":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.9736ddce9.0_1643449867830_0.06318778892438126","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/drawer","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.cc4ed13cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d07d58acdefdbe30ad94c8a98be8abfbd449df17","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":47,"integrity":"sha512-5qfjxDrq/I64BD4M+5J4VmfAq6hhYdqoZfynYyGhqVUACJ2uf4nZ+uuPPhxvAHXsF7lVz+2SuowV4isXNAMaQQ==","signatures":[{"sig":"MEQCID0+V+LPMKYOqgJhknJD8IJPwzAnSY1G+da7nbAUlW2aAiBnWe7mzP2QQ+Rv0rEl+t2pxyaEtI0tBUPOhrkguiXBWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W9HCRA9TVsSAnZWagAAwEwP+wZhAnXFPGQa4GZRCcgv\naaVV+w5G6URk3JPmv7bxomPmPwrGqzJxnnBVVeDEol5Hpxm8ymwx6rMKtkjk\nxNePHOHFvHsmHTFdRtUuBKp5fpP8ap0ad50uzE4comU0M+ZwFIOF6hQVySuh\n6lo8tTg+1fYGxzLAcGz1LLRiaoTiAMTltu4ObovGZD4PuJ19smRKpsGKZLJh\nmXC83Wkn5z0iIGY2N844yUBNuu4GalRTxE9KbVCWgC03P1BLLUcKnOd5PbT5\n264R8cGL4D8tZvIwyOApZuNAF04yTOvXzJBshzEo0Ks910HzSKvKLlqkz8z+\nVAfagWoEVm9qlj8daIG+WNuLm99xpHIt+WqgQyOpJ7JdE8jCRWgqxp2tcEsf\nnb8DRDN6b4FIvN4u2rAib5qf5QqMswURQJUlwGmtkIKIjHgcmiai4ZAl7209\nf4Wb4Hyc7RFKX4HM+xmNRbUk8Ik6tXTx5kf5Nc5w2eLJcYIJFRUllFR9zhiS\niUsGsfGXZlXs05td/peG3+VRJ9k4yAd7sfxO/2f59h9RBSn11w+L9wNrTj/j\nRBfnH+DNCuo+Ht81MGudoqiZDeVEkPFB7x7+wrGm1WiDLiIIdpgidV5WgEJn\nMBT0/DLe3E1UowwsB/wltz9GiFseWHerJit/Oc55NIYn68ntY5BRFtg/5Hvy\nW0QJ\r\n=znsK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cc4ed13cc.0","@material/rtl":"14.0.0-canary.cc4ed13cc.0","@material/base":"14.0.0-canary.cc4ed13cc.0","@material/list":"14.0.0-canary.cc4ed13cc.0","@material/shape":"14.0.0-canary.cc4ed13cc.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/ripple":"14.0.0-canary.cc4ed13cc.0","@material/animation":"14.0.0-canary.cc4ed13cc.0","@material/elevation":"14.0.0-canary.cc4ed13cc.0","@material/typography":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.cc4ed13cc.0_1643999047160_0.8913393506059764","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/drawer","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.dcba26fe1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"242fd8f3340dabef03fb1c512181f23c476ccb64","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.dcba26fe1.0.tgz","fileCount":47,"integrity":"sha512-PJjG2FTLxaWRAxGEfH66yE8fdPTADBqnMFR04VI33Vo5RsiW+7wL6Gl14NuG22I0H8mj0cgyEE1thMtpU1Ji3w==","signatures":[{"sig":"MEUCIQCfY7+Y9uChFxy72hffCPZMlkxPQKtc+nJg4WyS5wREkwIgeMu+TqI9ti/9u2zZ9oSQzdY9jMNfQCB47CXt3TUjV9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aGECRA9TVsSAnZWagAA1NUP/RuOhMB4oDWgh8caLn5N\njm8yE+U4bRy5JFEI5MIXp8ypVfsUZfxInEdQM+9Qu1s4KZhfMFsp5HUY6G06\nTqeAr4sPxaJetV9LtbNPOgAF2RrNoYSWXAbtVvJ0mkbbONgYp/WXhnKLqWNh\n/szbpAaXxLbOB+bCQGXGdumEbcnEZa3493EvXGXtjkqPbGy2HJG2q7E35Gb5\nw9FVuS1SYhkWIeMN6154JzQ+DVETO73O0sNs7B7fTXeUcrkWP7g3FdPxwwVJ\nQmU7bcgOfAdQU5pLUI1MooUtEuXIhigctklmtGkIGKo23kaoEwrzePwFDD6N\n1Sf/nCken6CR3bw3nLXzbAumMHo0vjM39sy6L5HPoy9Emn7JEJzr5D7Or9Sq\nevOD7TUxgm3Pdi2+Zlhl722cchH/ocbH1YrN3C0lJkWFKfggOs8B2vRcNrIH\nUHb0ZhA+FpF1/9KEjNnLDRZEF5LqruUTQIvSFpYWb4vLWJWX0t5podfnfmIV\ng/tAj8c+6mv6QAB37r+nz6FIwuSMvUFolmmSuzeKEw3CFdT/COUaXUAVv4H5\nwVrHZ/d5gJNrGUMVIUgGWY2HWbyQEjzmrMv4WQt/tWLGL0whflrhsZwf6Ft9\nfC2SycR4Vg43Yk/CVJaUcvdbM5x7H04WEOiYhUfq9BnUVoUJFxHmYc9fcS0Q\ntLDp\r\n=/Rz6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcba26fe1.0","@material/rtl":"14.0.0-canary.dcba26fe1.0","@material/base":"14.0.0-canary.dcba26fe1.0","@material/list":"14.0.0-canary.dcba26fe1.0","@material/shape":"14.0.0-canary.dcba26fe1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/ripple":"14.0.0-canary.dcba26fe1.0","@material/animation":"14.0.0-canary.dcba26fe1.0","@material/elevation":"14.0.0-canary.dcba26fe1.0","@material/typography":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.dcba26fe1.0_1644011908090_0.3864539930824873","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/drawer","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.ec54d9046.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c02b28bfba17b30573b1570dd849275497d3231e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.ec54d9046.0.tgz","fileCount":47,"integrity":"sha512-Cvb5WKbSCh7qpE2UgfbZJo+dP4vzBLZjObJlwVDUIvDTo5kiRvDxZqgOueEk9a3TlmZv4wdRkO+JSctD4urzhw==","signatures":[{"sig":"MEYCIQDc/L/wsz4W1NJ/hoEngh8BbZj/HMgCjoTWJUfZHld7CwIhAKBJIvC6h8r4JMEIUWBM7kXmm3uKNJje15cCMcHtNwEN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT80CRA9TVsSAnZWagAA9lIP/RPc/JC9FuWe0QotKQC4\n+rP9y8+KKZK9iziM7T+fMHXJvGlr30Ex2kmjhTBIVmgvKIz1LaqWv2RyvrH6\nkgAezKOC/AD1FIjWUtLCcll04AbTSaSZsYoaOuOjk8sQwFuPUgYLXAbPqAE5\niCZA2nTApXRKW56yIkfwiI2y1SSV0w9NYiBXVgIZ0sL+BORLXHF31jMNYfoK\ni6/uLaJGgaFLvQv1Z3F7sB5XS0wSLtecrUNqjohbtmBduXPyFPpZ0g7InXmp\nS+ORSEtHwkMpgXw00baPdB7cPl8LNqoasl+dCqTCGO5kbUPTziPKKN7EXej+\nFwTlnm/QN3cSCjxK71idfK1vEFEiwrlqg+xOqRZfURgTxA93TOjdz2+B3FnY\n1htd2fE5Jt1lRkNMTB/wKXnQEBCKxCpA4WyUAvjnppkr2NZ4pkO8rPm/Fg2k\npBCxF5va2aQUvSZORI15y1sKfCkkHxoNDQzrHt6BEd3942HvUIp0vkLUIGio\nlmWGxfyv6WmbW5R7P9qvhLrfWV/oxHYqNPk7CcHeeIC8whXhFICR37OpWXER\npetJfptnmeWMogGy4Frg6ZooELkcFVh6VjLnsJ8Bouy2zvBj8lMo0wdcFm9u\n2Z1jU2BBrRx3pXTJvCOn31gq61KWNhChliobf3WjsGccEb8bEEC+CaheFcX/\nf/+F\r\n=DwHw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ec54d9046.0","@material/rtl":"14.0.0-canary.ec54d9046.0","@material/base":"14.0.0-canary.ec54d9046.0","@material/list":"14.0.0-canary.ec54d9046.0","@material/shape":"14.0.0-canary.ec54d9046.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/ripple":"14.0.0-canary.ec54d9046.0","@material/animation":"14.0.0-canary.ec54d9046.0","@material/elevation":"14.0.0-canary.ec54d9046.0","@material/typography":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.ec54d9046.0_1644248884031_0.8657130214919806","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/drawer","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.ea9b5b463.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53855ab4998daeb69b170e149b6d0a6f073371dc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.ea9b5b463.0.tgz","fileCount":47,"integrity":"sha512-Ohfuzl7w7wldvfdQcsE84UBShPrghmte4FpxeJ7Fe6vrodNAy9WG2i760S54uox/ddsmnq4hucCIOrxmiDa8nw==","signatures":[{"sig":"MEUCIQDw/gPp1MIUertLUrL5lBMVyej7CW2i0C5FwsyGsz7J3QIgSxh6Kssyw107may6nM90CyqFN7PYyzhb1DdmJaEeKBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA//1CRA9TVsSAnZWagAAZhIP/0O8oWMFGGq9RGxGcZgk\nM2TUwPKDGvZFvi0QfQ7SRp7dYFOz1+S2x0FMqn0cPceYszlGVoenRM95klfn\nsYfBS77JuXdw2PkvhN7bBAwWeJS0Dff2uh7KBEO1mxF8hZ+JaT373WWzTQhf\n0BlsPcUkqWRwHnvb+xuAzmWwl8BOey4bPZmP6gsQtOzIgm8MqxCpglm8UhaL\n8PREp2Fjxr3PqPziLq0QU+VEwmQq1I7vCPtDH1b6BXj6XJsiuHnueFV+JLlp\nJjxOySkqVQynYIBibe34GdqfN/cs617oRDw9Nn2CCfJvfGca8Tb3zus01USn\nYNHJsp3FViQEnPhszZzULxi+KGQqpo+jKwGoeWWgsGmrelFviD2dHA99G9uO\ngapRKanYEtM1PvqghgZRl1o3dJGY0mhL9kyQTt3QrDJWiELZyW6VhCAMNOgU\nHNfDM/dMb+9VGUfHAHU8zOFhalLi3NoEWNhrhvzXhW9ejCA0xLt0XiSOTQe1\nuxgn3YXEJjyboj3XYhuheweRZcQMMLj5iHsECBRTG0NhLtg6+1gsyFh6m6zf\nzse2yTYgtWODsAJom0ze39CoqrjuD9gihxoIoe7l3QpDrOVHHn4T94hUTgwl\nTadXP1RyEN4TRzZCg/GSnc1uF1GXP+R3TjC2QM8ytoZP19t2M6CFlrywWzfz\nHvRk\r\n=Rs53\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ea9b5b463.0","@material/rtl":"14.0.0-canary.ea9b5b463.0","@material/base":"14.0.0-canary.ea9b5b463.0","@material/list":"14.0.0-canary.ea9b5b463.0","@material/shape":"14.0.0-canary.ea9b5b463.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/ripple":"14.0.0-canary.ea9b5b463.0","@material/animation":"14.0.0-canary.ea9b5b463.0","@material/elevation":"14.0.0-canary.ea9b5b463.0","@material/typography":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.ea9b5b463.0_1644429301388_0.22000075894000504","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/drawer","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.96ea061c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd704ecb4b0e8bfb48df2f3c770c2d26b0ee41e2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.96ea061c1.0.tgz","fileCount":47,"integrity":"sha512-dQjTetuyMjnH11NsJBe1lRCYdrsDlvWVdqTUQjK+rpdw74Jtk2koAEKsheDK/mHhGRnNE1JVr1faGS+3XK1SOA==","signatures":[{"sig":"MEUCICuocsx7mfGmfdf64VGFMSnoER+F7fuQw1oL2mqmFjPiAiEA2P9kWJi/3BuXdae9UKA+v4Ekv1U4QKRsWvRnJtsD8P0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA9QCRA9TVsSAnZWagAAAhQP/0p0S1waB4pLwv08S3TP\n8FdSgwrFCum0CmKmPTltmycYau0Jbytzca/dOhzD0HeJ2dK4D+vR1FsDaRv1\n1awHmsoffdkWsYi8MUyOjcitT/r8ipHZyLASTfVPxoD83SsygMWRSKCGG/CI\n9ctTCYSQrAtrzgjbM9t0fcu7UVkAsN9ywgBalKG8g57YzVZF8Ju9ip1XXxlw\nEa7DiRVlFCiTyLnV+0RCAQLz4yFJwTh3AJFx8LbDU62zV43+50j/a+CKEt0s\nAjnkN5GFm5lYW1ne7t/fZtno90llxJFGWTODM1aLQ4yfUctbkpZaHbEHJEvv\n2NkahLs1vEFzVzM4yBxqJoP4KYqYMaMF1q8q7D4RaDELtt3tkIbBp3/J4zbh\nfK6zA+dzbaBbwHIWIQwemIFEIob0mT8jOkQlX6U82w5g5P8u9OWPBSv3xWvc\nU1k26kAc2aj853XJp7bgiVjj7gV0r8VmOY/zwVyeUJTEVMObS8jzaz9Uo12a\nLOPP3kg7Otzw9KiZqA+8dKTicqgcNdVJAZAexBahkrc6lckxQFZwcTUKKPnO\no12w3AQpZjZxodRUrMO8K62PYXXcMEiyIh5tiguOFKddv1EEzpvKKaQXkr++\nNKyVgXqOuIYoG/ub9IiUR6AZ8vO/nay8bn53UqjzjWXsDqzyuEVpo0ChnELG\n3i/p\r\n=0d9t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.96ea061c1.0","@material/rtl":"14.0.0-canary.96ea061c1.0","@material/base":"14.0.0-canary.96ea061c1.0","@material/list":"14.0.0-canary.96ea061c1.0","@material/shape":"14.0.0-canary.96ea061c1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/ripple":"14.0.0-canary.96ea061c1.0","@material/animation":"14.0.0-canary.96ea061c1.0","@material/elevation":"14.0.0-canary.96ea061c1.0","@material/typography":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.96ea061c1.0_1644433231853_0.0771291637487217","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/drawer","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.e00181e59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"159a7a074c6e3922e4f59db2d6264b9001c3b8a5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.e00181e59.0.tgz","fileCount":47,"integrity":"sha512-5YmpuGDURiODc6PN7QMInUGnI5bMDB9xgcdyy47hYi2MYXu/FMHEyevb9RGQXiq51ZjYjci0TGk+b6LZaGXHpQ==","signatures":[{"sig":"MEUCIAGff/u5xgq3upyBpmbLAhunaeTlX0Q9eAsqRc6A+KD2AiEAtCUpzheCwSs6Nj4n4r1k2CWgMn3ySfBKTIK7Y6vorV4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXCbCRA9TVsSAnZWagAAx94P/35+YgEWcwsqYbYf3OoO\nwVQ+EKo+hjmAeQguNdRM/CFdKYA4B4wvIV9P1gpKr16fuX/w8Nqtbj5jI7bl\nQFW0njTxO9xAExeX7C3+oinp4wcCSElAaXsIrr/d2MqaLVcQodlhngVnnsVC\nQB3dGYzr5lt9cg1WMD/8XbhScm2rarW5+R4XtJuGK9EH65KtXg/LnWyq0nPb\nVEPnc+nTlewlLT1PzUsfkrW55Z1V1YfvOp1jjyEj5JdLCaA0RqzPvqG9Ey6y\nBT1PUkNAF+o2EQZl5t/kAqp2yy4tO79N9cxck8djrmiQPsymFugm8OpFvnr3\n345Z6oBB1yLNwsizC0sfOWrtzwb2pat8kiRM17DP/uiiH6OzvBhW1DBWFAL7\n22LbAU31nCndKusVpPa43S0DW65O93wt+nynYzL7OSzdqBsrKh9aTacT8Pc3\n0pItCZqMkuf+DNfOZ+Iw6IBeeTO7bBUQ+wA/YidaL1jEw47h8laSzmudpROk\nUiZAjogFUqP3yICyB4YgWtiP3i6w8GHzvLEXqhgctI4fKLvTwjrkI9oFuB3d\np3pbdkCDsMT+N5KKCcDy20WMLTIEj99CgPaEi4k9fst/Hu4UWmNd0Y64TzVE\nMfcb4D1Ud6uSyCs3B9YHmV0X/PiGX9VeQjUyyyrCCUuaLcKLRlQtu47VOEyZ\nNrvm\r\n=PpvN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e00181e59.0","@material/rtl":"14.0.0-canary.e00181e59.0","@material/base":"14.0.0-canary.e00181e59.0","@material/list":"14.0.0-canary.e00181e59.0","@material/shape":"14.0.0-canary.e00181e59.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/ripple":"14.0.0-canary.e00181e59.0","@material/animation":"14.0.0-canary.e00181e59.0","@material/elevation":"14.0.0-canary.e00181e59.0","@material/typography":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.e00181e59.0_1644523675513_0.09574733054774942","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/drawer","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.037285f9b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc9a2b2b85ea6323fe85798ac4d21b62ce98aa6c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.037285f9b.0.tgz","fileCount":47,"integrity":"sha512-r5JkWYgieseo01g0KWUOZ9GHio7uBe9DUNCnu8VCsZl03Pyg9KRJ4b5XlxD6r/GvLEoU0WJu7Y+ct8cibZUN/g==","signatures":[{"sig":"MEUCIQDR9G9kijDcJtUQstqCAJPYM+JDLjsCMFaVTCEucBS3mwIgbRDv19GjEM01tXQWZzNRXXctyW/K358umzCh2GWm+UA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqtWCRA9TVsSAnZWagAANeYQAJYAKCG4GSEaqPQtr3te\ntcFxHu9c/VX+qSLCCOIDJu1/zocWo9I1NtbuQKO4lWU652S4xMDID7WsCC74\ned4OiyDFW0OhA/YZ3JAqunyBRbleO5IyTY87g1ux3rSeica7vEizfFIhD61y\ntO0neyIsXPLL252ze1mCfTK/W1WT8yvjXKWTOE7HhCty6ypXwqQFnVHiYvTH\nwSqSG2wCyY4p0wFcvFgGVOvwhYfXkcS0pUIg+00H8GpT/1M2xk+5vwm8ZVJt\nQ8DUm7bm+d3ckjZMOl7pt2XHCJUJJJM0aLn3BLVy/+P4oHk05C8iTWL5f24n\nmBTd7vb4DeSU6SQe7Vw1ji+MAxs1jwR255zWGGm9udd4HE7lI13B/rVCMmXz\ngSjC4SiPoUflbIFuiC4URWSIgJSzhjWEf5oyLXiyQ6oPS8GcsKWSMHloh6/n\n1Ubo7XdsWkGOzZYEI91AqfCT0QjJH92ygLNDVZuQWPT9AF7nwxeHG2KnYSp/\nh90rR1vsS6kcr9i/WuQ2qHEB/SL7wnhL4ThfSsfi/do+Qj9QjICIE0mlouUF\ndDx69Iv+q6J0MLFSfcYdK2bRHcNAJvw/F5BVJzlBFf+KiqeaNcNce38/vOUK\nU0TWEoOWvHEVgCYqhIExehbuWUlqaz/tiyGKLzpaoV5NXjNskEGFtWGB6Epi\njyC/\r\n=MReT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.037285f9b.0","@material/rtl":"14.0.0-canary.037285f9b.0","@material/base":"14.0.0-canary.037285f9b.0","@material/list":"14.0.0-canary.037285f9b.0","@material/shape":"14.0.0-canary.037285f9b.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/ripple":"14.0.0-canary.037285f9b.0","@material/animation":"14.0.0-canary.037285f9b.0","@material/elevation":"14.0.0-canary.037285f9b.0","@material/typography":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.037285f9b.0_1644604246316_0.3005856245138463","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/drawer","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.1aaa68dda.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13956e82c91fe8d59ede736611362063c138b1eb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.1aaa68dda.0.tgz","fileCount":47,"integrity":"sha512-nsN6eHCY3j7Ww6+T+o3oa7pDdSe/vqHpyT+v+uswejwjyiLGUHPARha1+vL42oa6spF4ZKi1j+gNRI1cF5uSOw==","signatures":[{"sig":"MEUCIQDjVn89Bv/G6D/WhS2LtyoxOerQYHLFYr32L5NzyRqkrgIgBjEeLwHN3RqHc3K3NxA67XY6ACSHjUASz0RYRT+A/AU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVV5CRA9TVsSAnZWagAAIAMQAJWloQ0l65HMiVVdvaue\nfVLnEb0mXdWmnFkSW79nrV/nHYFlgwwGKmScZEqU4Qw5XFWA4R266XNDm/pr\nL2XeVhXKYetdb8ZM8Foa2e1CVmQ5h1tPykqaFS7ekkkFmjsYvE6dfxQKUEG6\n4ji9F1X1SCJetKyaTIPDW/N09DUWjQ1dtzwB+JlpxiH3qTfhA/17WjlvDteZ\nelh5YZhh2BCVrtaUZZKAAAtGgitqcukba5hH9Sh6vFIpcGmdBAQW6oc3n+Hm\nF2vFW1vq+cmhoK9dOxEh/psO/g6q0Yrr3gCRfTxZiRKEll6CKNOnrm7I/OTI\nfG6iZzGj8CPM6Osb56MyHZha/huCp9Tdxb60TSj1ArEtfk1xwL+mpDqN7mr7\nnSQ2wzyhjBfl0sIdc0lhjFYSFM5QYR4DSePGBs/0xCetk7atbNLkFYNw4oi/\nhE0qm7K3Y2JG5NoVKbFLBN4RfXnBztkh55Oajuxzo5PuScY8+FEnqzszZIDc\nQPeAKkLvpc11xHg+V4OobHPKbVVW4DRNtK8tZCP4k53wummAO5yzvrHd3lgA\ny5Yw+uaHgaewTfvBzNC2A/bNgkeS3fpVbRxCQ9lT/ap7yIflaKoJHOnFl9nS\n1i/FyZDlIrHH7Zj/z0VfiiQmM6fDCR5G1OkBmxfDRde/kzwPKp7/AJo1dDiz\nBHQv\r\n=tcJg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1aaa68dda.0","@material/rtl":"14.0.0-canary.1aaa68dda.0","@material/base":"14.0.0-canary.1aaa68dda.0","@material/list":"14.0.0-canary.1aaa68dda.0","@material/shape":"14.0.0-canary.1aaa68dda.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/ripple":"14.0.0-canary.1aaa68dda.0","@material/animation":"14.0.0-canary.1aaa68dda.0","@material/elevation":"14.0.0-canary.1aaa68dda.0","@material/typography":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.1aaa68dda.0_1645041017190_0.7780929363184264","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/drawer","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.ab4aba1af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4951a63320e1786a2812445c1583e0c4f0ba706","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.ab4aba1af.0.tgz","fileCount":47,"integrity":"sha512-8OicHG7uLgZagc8FGmtfy0K9+9DelT2SNK9c4UPZvITHB/4hEuWHbhr/e0/xOJLmoOuK4HBtWuhwmUx4RsbzGQ==","signatures":[{"sig":"MEUCIQDyREX2BT0Y3uO7uxf9bTobjqtKxgW6n22hFo4BryUSowIgGcHGhIlO1E39tQIIYkrYB8AbfjiSdFuVSJZKJDlRJRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpEzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq33w/+LDeO6D/mKmVcDtl+v1hU+6JvAceqmXIqLosJOXAXusa1lpVM\r\nGOSkcuIJbNF+ewIHVObJq2egTNedXM9Gmfb7mrJwCiMStC0VVHnTxEw79xpW\r\nONHI7LTs0Bm3CgEEWAqFto+p/SftU0gRB/o9pD2CmPxxHCiJTbt+hMoeUR25\r\nlOEFm+IeQeL3vmstSt9Qqpytvy8CETQv+Cb/k0RcuZ90APg5QhN7YJBATPTG\r\np26G2g1UoMDD9Sc9f0nhUrz1o6JhSp2/HdEjsdeXyQvDzrXpiTRovdbl35/N\r\nhyjX/l3JsYvunNd4XDAVZGLkQWolHs7LGiaX5bWGXP6F/yEplVG3AARKXMzl\r\nj4mMJkCB6eDWNlzQGNcpGBkrI3P8H8gkOHhQ2CLU+YT7Frvo6I533cpWRgaU\r\nsntE2+OX7hReF6yO9JVfpQy3uKAsUmq1KR99UA6F4Jj03pMSmjAmQeaZzmfP\r\nPMR6WGBKCTVw+PnA0m8h/VySYAU7cB1OF/HBc6S0h7dbFOgPU4UipndXRTNq\r\nQmDPMitg0c5IhIM5aTVwgKFCaZYDM0An3ZwFo5O/umO8oVzevrd1qRwxz5GW\r\na3fM/v/c7OKWtaNOFqUOt3HIa5rUWnbQm+giIuzulbYpbPwabclyfOVaU6IG\r\nZyDW7jrPU/ZXXG5Uhw2K7Rz6FpFmqQF+wIA=\r\n=Lhyr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ab4aba1af.0","@material/rtl":"14.0.0-canary.ab4aba1af.0","@material/base":"14.0.0-canary.ab4aba1af.0","@material/list":"14.0.0-canary.ab4aba1af.0","@material/shape":"14.0.0-canary.ab4aba1af.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/ripple":"14.0.0-canary.ab4aba1af.0","@material/animation":"14.0.0-canary.ab4aba1af.0","@material/elevation":"14.0.0-canary.ab4aba1af.0","@material/typography":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.ab4aba1af.0_1645121843268_0.3867725418464538","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/drawer","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.e58552c6e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f8242440dfc74675e3b10661c75fa83b0e387d9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.e58552c6e.0.tgz","fileCount":47,"integrity":"sha512-7OujtuhZt26S6Z6JiogW1DKpJLhBGjtuix9YSSx85MYUTFkQpcRCqhkJOBSsZGmMxZBdIGB0p8E+mxHShsRJrQ==","signatures":[{"sig":"MEUCIAuPPpd8zwx+kxlCRM9a9zkv+xw1DVkPW222JeZVUEPBAiEA/ibJ90EP/L07dIz4VOr6Jjb4bqTiMX0lI9P/LZMAF/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9/WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriMw//SD0yvVkGB+l1BgUBxXnuK5DNbZhpc+CB3JV6N9qFANc0mozA\r\nPLQd8VK4XZqyciV31HwsmamShTdDoBbWAzSW2dwby2rYWWzigcWoJkFFXQ3y\r\nHtijpDCNr+x1+XzmO0qu3ZnRRs/snAp18ZbaYiGoq0EtwhpKtpa/hF2d93dK\r\ntOV+mZ67NCg5KxcizrmW/04uyCoicEybW4tTcO7QnCyGWD4TGvpt0rOVmA3r\r\ngs3DIPxsegzYdILIhbPG3KlBlgqIA63xnBScPSUcWYbmNZfv6n5G+9NdP28y\r\nxWjIXmi5CTDv5TfHIa+2fHHHtuSlSzVYMeD5pYupO3ZA35wNe7k4xA4WOIoB\r\nYGxeVa1n0XRvAZsAKUsre0U6BtdESxAxgmIhEcZ+bgOgTAX/RsRdm3//kBrw\r\n0cCfAAn8xjasF92mmdQJUftqHSfj3i8E+Mf8uMZN/OZkXdeRVxE1BI8iqOTd\r\nB41oDj7I6dvHUwBHZCpBJE1PaQ7Uyqzr72CRT9m22gmFqi3yLoCiBgjLlAHS\r\nPnz1FCInz8Ygmi+ek8REcVyEBDLcBw2yFKXikzqzpOlQb2E1kXidg60IHZPj\r\nnpZLKhdnHO27G2PEI/JzaY+ISeR0ent4grGpDBU0rvhOZISOTLn9ySCEjDNy\r\nI3d1+QSkh6rBs3kzJd7uxm5TuLdfzoP98sc=\r\n=Aal6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e58552c6e.0","@material/rtl":"14.0.0-canary.e58552c6e.0","@material/base":"14.0.0-canary.e58552c6e.0","@material/list":"14.0.0-canary.e58552c6e.0","@material/shape":"14.0.0-canary.e58552c6e.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/ripple":"14.0.0-canary.e58552c6e.0","@material/animation":"14.0.0-canary.e58552c6e.0","@material/elevation":"14.0.0-canary.e58552c6e.0","@material/typography":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.e58552c6e.0_1645207509755_0.46953199357513253","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/drawer","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.868793776.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6078b5e20f27e0a6be07d8ad0efcfa8fce949e28","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.868793776.0.tgz","fileCount":47,"integrity":"sha512-xLyURulszqMLIJOsWZG+BZYAxrwOCAq8Nkxwkjsd2aOOWEB4oHajsivpzquROKqptqvDyXyVeNFC0kb7XRZDzw==","signatures":[{"sig":"MEYCIQCKuSiD4U6SyouSBzAlKlg1xtY46eTfdmNLzAyxuoalvgIhAPh/jhVw+Srqtdfum8NaPZymr8v0VaVuIUQz53n3LFZg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTt1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVGxAAnyI3FUlPPNPpnMm97Xq6HfiPg7S0HaU1fn/bk7p0BpaIpsNs\r\nAB0PVrmddsALNoGPVOFm5XIGn1isB2hr0T4/JMKjZZghhwu5SX3vlJqrfe7I\r\nUNn+FToZSwUtdGfRi8Ev1O7SfLeRVEVeOsmn1K7W1FqjKFfqqkL7PufR69jF\r\n2PPNVprZ2W4eKdI+2Yh98+NeCAIm7R/dm5AEHsmTh9egYhOFsd0bRi/Brug+\r\n8rAinPNjhyeJ+36mLAEdlgK6iZOPDKc/51NYCyKU+83kHqu9npFJWfl/BJKs\r\nPRdbMYKRKP7fA7Lq3ufCMMAQaAnLYGdK7JdWGzV2Qz2XFqepVHmeBTwOaX0O\r\nb/i16jBpdsoGXUwo9nUFQiSaXoYVxxZxLS+6/VTu32l7K1AbiIF9o5zvBNKp\r\nNaU97ZC1tjKAPreb9MiTXccvedKSHJlUpWfDr/q9AVZq0pDYF0MqhvVNbKn4\r\neME5tcdnkA2h+aVWWJtxyidJdcvFljXvGhSzIVErBjT3IQpRp6Qfv9eI3Yxq\r\nscNk204xwprS8FiWrCVAYpHhJruFcOyMqf4CIA0dMq4uB8ZxY1t8UseATy+i\r\nZLxankZdyXUGL/whQU5y891pYCnYlqDsqWx0IpC5oknpIYk2E0RcWYiYkYfn\r\nQ/UNm34E/gZSFkSWIHqYgP/n7WOsc1ibn70=\r\n=4KRf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.868793776.0","@material/rtl":"14.0.0-canary.868793776.0","@material/base":"14.0.0-canary.868793776.0","@material/list":"14.0.0-canary.868793776.0","@material/shape":"14.0.0-canary.868793776.0","@material/theme":"14.0.0-canary.868793776.0","@material/ripple":"14.0.0-canary.868793776.0","@material/animation":"14.0.0-canary.868793776.0","@material/elevation":"14.0.0-canary.868793776.0","@material/typography":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.868793776.0_1645558644769_0.0991263419969981","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/drawer","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.fdc37a445.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65e556172c7577a2272d2e448d67f981e3a9cb88","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.fdc37a445.0.tgz","fileCount":47,"integrity":"sha512-DkUMPiho9C55amiJr2wgJ2eBsEgFIdZIywXLniOwt5TTt4fEl2TB1D9EAVCZwM6ixyx0eIbp2ddxfbt0uUViRA==","signatures":[{"sig":"MEUCIG3A+FPiUqVquOMgenPqelNxK4sMDfGeGsqY4R6Ug9qsAiEA1/WpeehDtZ49QPYz0dURGSjoGsRYKQ3LDLUv5P+NrVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRirACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMsRAAobEp/Zkx+yVqoOJLz09v96xztPU7goETmSouTqydLh2KGx/I\r\n/AN/dowRaFFZoovB/796bDmd+0aKdrTrltro9+CN/gsZH32HBQXUsONOV7hK\r\nAOFFRVR5/xbQVZEPgB7tA7MGnUtsSs2m6liXEFWtKoXXldRQltui4tQCSA3p\r\neAsG32JsXnfcV5lffv9IjpPo+5bbAlUBgKVvHmnhAV4sIGYHwOSWsZNiozpV\r\nav7R3JvV2vWeN5kWM9cxsgejg4uQi3A7NXM9TmlYIcmwkFZzZaakInNRMwEd\r\nKN7yXht7Rfhy0sF9571VZBAHd/BmmFwp4QqRBB9h6u1frnjZ0kN86G1lzJen\r\no6gYkO+CcTfHMuJWvuI8gtfsaYehT6Gxc40KnYniJa/sKx0/QocmIJKFVGjX\r\n/bHm1P5XiYdCxjbeqC4vniEPZrtiVpcT8WHHkMRs/luIFS7cdikx0W1a/rTc\r\nU/udxWcm2IpUvlyICCgF7/LQgFrWgVrtyk8RmX09G8nn0xRPP0CBFZ19xAzq\r\n8fNQeOWhYl0oLTfH9XWfwmcn9XLHFkQz3Vl1SKJFnk88YamPF5N7TcGu4JHS\r\nPMxjslTRmuFVXWUf6fPWZslYC5x85MaROXLgrsU68YAD2+8d2ZfFPL0MxW7m\r\nJcw9vjLJdfb4hKBmETZXoS7cVpYszw6ktHc=\r\n=a78N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fdc37a445.0","@material/rtl":"14.0.0-canary.fdc37a445.0","@material/base":"14.0.0-canary.fdc37a445.0","@material/list":"14.0.0-canary.fdc37a445.0","@material/shape":"14.0.0-canary.fdc37a445.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/ripple":"14.0.0-canary.fdc37a445.0","@material/animation":"14.0.0-canary.fdc37a445.0","@material/elevation":"14.0.0-canary.fdc37a445.0","@material/typography":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.fdc37a445.0_1646074026836_0.8276037779639862","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/drawer","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.43c7d87dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5499c187af36e7a1cd087ae111524c0a87e1529","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.43c7d87dc.0.tgz","fileCount":47,"integrity":"sha512-qQp2VJOFqQHUP1zhtLT72pv+8VQUmSe//j8BmnPPy80j6e1fn2Q6jYtiBo/S2ywYmKLdW66WUGI0PIldporXqg==","signatures":[{"sig":"MEQCIC/ULKYMgb17I6eQd+wG5Tn+QCS3G3uf8IDh1zLdP9jeAiB59pxfYQSw3Ex/EaCPSwMYhHEc/fT7ALqBk/ipQcWBfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjzyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrqlg/9Ek5oUg6PhCEfwzq/7LLjLfe4xkW+AIUCDFobVBqXzCNtId+y\r\n/842bgt7KGpC1WUsSwa8DyTvNTl77mbXKTqzp3rrqRfWdh7VQrLVDMeBazR3\r\n5OXVxLBpHhGJQ8dhhnRJz2TL4qM22Vsx+JWzNE3RtozwZp0QuACyw/n39iM1\r\nlDhyQzK768NRW79oTYCnZcN1eyvryZeXTAFmplvQbTkCmXUOJ9CmldJHHpCt\r\n0yXeBO6r7LPoqjHgVDlQpq87f9440cXzGqrwgw/uJ92pTurHrpVHkw5btd6Y\r\nO/TNKib0Hr404FYCHvrzzGDX7/sbg2BdATf5R+mLL8KzsXni5unni+xVbE6e\r\nIv96hI/WzxynQbYtLGB7ZzFzOqUydKyytX49sENY1O3jgHFOrZ+yMd3i/9bF\r\nYaA+DgX9OJxAoOleegJ0uBnLFcp17la2D742gleVmzqOHjjuN9YlB2GDkjpb\r\nFQu6csd7ubxHhvJAMvxyRSjMfOdQvBfqx3dcji4IWgRyxgG06UIPvDE3uQfd\r\nZs3w4g2HP34ua1GYvsg+ess2RgF5S3GFpRRljDycY+Ic3yJBPhhG0hAE1NM1\r\nFA0WLUlf0CdJh3FuMuqyTaAiCoFJc/r67jaNQ8YGuod5M30wEQjJ1uqI+xbx\r\npYWtRBhn1xvFwGKdWYX/4vNA7Mk3WX/xmv8=\r\n=ynF1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43c7d87dc.0","@material/rtl":"14.0.0-canary.43c7d87dc.0","@material/base":"14.0.0-canary.43c7d87dc.0","@material/list":"14.0.0-canary.43c7d87dc.0","@material/shape":"14.0.0-canary.43c7d87dc.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/ripple":"14.0.0-canary.43c7d87dc.0","@material/animation":"14.0.0-canary.43c7d87dc.0","@material/elevation":"14.0.0-canary.43c7d87dc.0","@material/typography":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.43c7d87dc.0_1646148850333_0.019407806360412616","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/drawer","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.23043acd0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"329672b1c75237c7ba6eccd886c457e1ea79992a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.23043acd0.0.tgz","fileCount":47,"integrity":"sha512-4Ir4h07+NtjDttMPFiY2qdO4YTOTNMgiaSzjdsKtrYh+Vw8igwoJ4g0MVrnZOuz5zbOAyOL28qHPYOzdU5tGSg==","signatures":[{"sig":"MEUCIQDBW0zEkk2XEm3qvBOBN5MxTLXOg337FZo1dy//wW22SwIgEyydQpCYZpFZsTnXGVpczOyqhbcTtxoTJb7OxD7opKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9NlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3pg/9GRBF0pr+4jwExbW7bgL7LcdPqg/FTPOLG8MTxiHEdfQ25Q8D\r\nDXBqaWQzzg1xCgg+WNlcDJAsqfJ7fKyNP+y+K+MFylFD9F/AB4Wypyp0Y4qt\r\nMA+j8SxTYPsWpF7KORoeonIW9maCvIsRz2UkFMXkdRFsxy5MuJ3P23FDjZQk\r\nRI55MsUIm9w6s5vfV/INyjD54Sn6MR1SYZX2z+rMrmsMKtI8C6EQjffcYH8B\r\n8YpSQ9fdrUs4IxFnKbRwckMbMSRPx1XAM96+nqTFvZtvKvzKxyhZAqpp6g2R\r\nrpT435XU9k0ANdkw0BpIJGYxm2YpMO7wX5bx8DzDhmISl857JV/Xhk3zy0eZ\r\nzZ3Boycf+fXIHe/vG9clgExDtIbQShnzXtzLR+tHCbE2rST5YsYFUnkia6op\r\nkX75t3GDYPeYRYjnh7PDR1ZuCZaiRhyPvaaI4JsXwZVA/98h2NIof2kPVHba\r\nS5GiGvPWSzYTaaDv/LTICThm1jE9DF4ZO0jKSGjUkarCdt+aBfMT+NuPDgVQ\r\n5ox8ZvHLb2K8t4eDao6QPX5L3tmsgjxI8hbqBBihW3SS5OUj10rAaf2zrobO\r\nNKUUqQ0chIkA55ZUzZCk7MJi5JnRf5Yt4MLcMXV2wNNMzL5dmxGNRdCDCRd6\r\nTNOOXO4J9LPGaZ9Gf842cYmchfJPEpUUtSY=\r\n=NG3Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.23043acd0.0","@material/rtl":"14.0.0-canary.23043acd0.0","@material/base":"14.0.0-canary.23043acd0.0","@material/list":"14.0.0-canary.23043acd0.0","@material/shape":"14.0.0-canary.23043acd0.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/ripple":"14.0.0-canary.23043acd0.0","@material/animation":"14.0.0-canary.23043acd0.0","@material/elevation":"14.0.0-canary.23043acd0.0","@material/typography":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.23043acd0.0_1646252901599_0.3494363253183068","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/drawer","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.6505e61c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3c4827e22d40e5ac371d87420502cd9194f96a0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.6505e61c5.0.tgz","fileCount":47,"integrity":"sha512-Et22UPP3RBSbMc+v6/yNH+r40lXYLkKS2L0/KJOA+wyvN+qPshabM/C+W/Jh4Cuhq0J8nv2faom4O6rOAEWBEQ==","signatures":[{"sig":"MEUCICgZrTF+74GGp8vlfldtKB26EA645iBlCy5jHq9pvrWAAiEAtg8ofxjnKHsH2RnsKVO/qyAsrICbErRaeeDF51s43dk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR6tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFxg//VGIwdWSKCyLEhpH7LxNaNfbRqQuTsHS8ZbCNlWIIZvQXJkf5\r\nP9iFeLn9G8K3VeRkOn/B1SFSjHESVzQtNbBe2a7nB9N9qI7eHhQwNybXChGi\r\nxrVSAEke+67DX50mx3s+HbPpnDeUG3FpqdUmSgESfBjhDpgWqal/DV7cHvFO\r\nYUt3W6OF/5o+ZFvyjbab+P2zQaq1xfpQqt5wmvx8NcIXZGkik0A60qqREu/1\r\ngI259PPX/P9iA1I08dAW25mAqnRNkxG0iToo7InOSfkADIhQMkbhOPx+b8Bt\r\nidI0vZ+ppIkCrhZzgk/uw6Zgd/GHalbrZIV2LZgVAQf73KhtblIateRIik+M\r\n8BZNIVanV+uH12GZQP8h7yqYamf6P1eORqNi3AhCe4SG8cz2T6vSY1jgKtrB\r\npTh5DwX3bHN/tQq7KWSGRMRXgpYWp69YA0WoDjOYlsSvmol3QCKlwu52imJj\r\nsQAFc8+2xPkMuoZpx51R5Uk2mKXCmbmEr8dFDmMnlQ5y4lF3i8y/WsgytAjp\r\nNpe/4U5p3YQ4TAvQ51XKWCrDNXkgpvd7XmIFON+/5bgsDWwZAlmjFyCssjF7\r\ni8v1FY62jaYyW/c3d3x7cRoQ43Soo4rYNaryXTCj1qjkJeZwyiAgihsLjPMO\r\nfbFDI7w9yk5Gri+5vYbqRIL0Loz91LJuR7o=\r\n=LLDv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6505e61c5.0","@material/rtl":"14.0.0-canary.6505e61c5.0","@material/base":"14.0.0-canary.6505e61c5.0","@material/list":"14.0.0-canary.6505e61c5.0","@material/shape":"14.0.0-canary.6505e61c5.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/ripple":"14.0.0-canary.6505e61c5.0","@material/animation":"14.0.0-canary.6505e61c5.0","@material/elevation":"14.0.0-canary.6505e61c5.0","@material/typography":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.6505e61c5.0_1646337708963_0.61993959137786","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/drawer","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.16c166154.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eec8662b338860a43ee4f5c61b56891eb9b0fcb7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.16c166154.0.tgz","fileCount":47,"integrity":"sha512-glUZ4rK4iYFMu2FitEl0egOH//HtK7PuPJ/FSKFnyr9jG+fxST6ZVnFpvGOlJQRNOQ173RUwj00NYTafK7CHkw==","signatures":[{"sig":"MEUCIEusEy3AY5WCUvCwG9H0rWgsjJahCKNT6QEKjHCHYQDuAiEAlkIcnGTGlpw8M8GkK7kG5ilC+nDAIlXlGVAj9xb/IR4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+VnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqSw//bvTP7KzbxxFJ3F9JYoJ0qcB8Rv9wR2IjIs9pVyNXadIvxfDZ\r\n23BUjG/R9tV263gV6MeYdP5JVbHvPzdyq8nlrCRRzGIIKgqYCKk7dZUUoyuA\r\n5aaidP5ggTrDp+MPYM9aP4V+poDoFI1hBVSsIRJt5PP7EhzXe9oeaUW6TRrF\r\n8Vs2kz8C11ARHdMAnNbjQniVx6uux4q1z0OBI2Vdbtq/tWS9E2YptD9Hgfyv\r\n3PMLk0pQv+pyZzcY5xAjRtAUtCEyMRP8Kb/+A9AVQ5gAvOtzZtJVI4urpE9i\r\nSwtk1beTY6jf3ZvlRikfEZ1s+3Iccfnpv7smlusHdMn0/DWTxKctObnF5RDI\r\nbzleLZ1WgVYYNzMgPagZXz7b0oWyI5l49FGGyqBcfejdTXeVo1HIioutz3d8\r\niJDm+QQ4muik+0ty5X/GAV5BMxkxoZ/q0QdEXtDl3DP/zZKgQHLhso6dc2+e\r\nNqFGiKzjLVuXIC2FnSsYzLefAbHiuCe+J6k3ChQMI1ZNqMGDgEWCSTFPNxpZ\r\nt9Tf6myPxcukYJUw3NpgH5ZVKJ9HE/8rKNZX8w3UNSrk/DzH56ioATOnK+gQ\r\nvck9GVqhoggB7BEJUdPbbw69qDmSyXuTqK8VktJW5j0DcDzGxYgKfjTtfeHv\r\nXvc9tp/P1Nfso2i2vlUJwnOFLK1gsINoN9c=\r\n=EN15\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.16c166154.0","@material/rtl":"14.0.0-canary.16c166154.0","@material/base":"14.0.0-canary.16c166154.0","@material/list":"14.0.0-canary.16c166154.0","@material/shape":"14.0.0-canary.16c166154.0","@material/theme":"14.0.0-canary.16c166154.0","@material/ripple":"14.0.0-canary.16c166154.0","@material/animation":"14.0.0-canary.16c166154.0","@material/elevation":"14.0.0-canary.16c166154.0","@material/typography":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.16c166154.0_1646781798937_0.7591576698015341","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/drawer","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.bdf1d3771.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da83404254e343257dbea63e2b0354cb6259f8bc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.bdf1d3771.0.tgz","fileCount":47,"integrity":"sha512-M0MOK4IdCr9wrauf4pIxnARLTIRdDdtu0xDYtxCBKKNCs8TB4APct1Q80tmXDAOu7PEHH0MPyMkHXea9W4vmAg==","signatures":[{"sig":"MEQCIFNDQnzNMBX7Jy+t8rM9C0N2EW/vt7iNU3+wqaCzvuK0AiBEMFJyQ9BPoi26SIsUH8lumOCM+MHj4B0sg8EGV3amHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1FQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaRw/5AT2Vr0zTsbpJLDabZKGGrYn+cPsU7EWMfNlRHfkj9ymBc8NC\r\nT1+D4N+rCZ2ZUCOqIyzRd7bCtKy5JeBFt1L6PFtDq3qkzvI0y5hLV+HHEn7H\r\nVvxt3LX3Ct1Df6IqevBAUIGF7uHJD7775q/GN0B8GVtVJhVMhKCYUvrEmifc\r\nrOPMuSCBMZ5wB5Vzfnlk2Ibf7nyYWUlVXHf16VtU84AkQ5nj2U3AWuYSiQvg\r\nLbKGEUVWloWHFbqU8SaO5Y+D0CIbxhVT9rAvV8f5hVpOKUX0TiAUNIu30ohN\r\nqVdxk7fCrX+aDo/TtzQo1cGOnBC4dpsytc2Znh06laH7P3aW7dXxdXIgp4CW\r\nDlwmbUmyU9YmALbH1Q5zkn4gvQG7IpdKXi286Du12zXUr/I0UGw484pm/kxa\r\nqm3Rs+2F2tM0DwnZtA3F/K6PuvKCW/4YZ2xn8No6N3+zqwqxfyUKtqDLqpGr\r\nsq+8hyNbnZt7JM8MG3MtR2Rl/ugdj/izsV5FFeDw28qkAmjquFAzkPDlmI4P\r\n8zxsWnzksM059TgrQLGaJtWY47lamug7ynMAoIx2hhyll6n3NmFGMVYoKK1I\r\nfxtz2TK/YZQoypJbrXQye0JdX2bWc8eJ8DDJYzXuxPA9ruC+Nl4RaOW1J6oT\r\nfeEGX21cI5Paj5pqbZGmYl8UbcQICuvuHFI=\r\n=BifX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf1d3771.0","@material/rtl":"14.0.0-canary.bdf1d3771.0","@material/base":"14.0.0-canary.bdf1d3771.0","@material/list":"14.0.0-canary.bdf1d3771.0","@material/shape":"14.0.0-canary.bdf1d3771.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/ripple":"14.0.0-canary.bdf1d3771.0","@material/animation":"14.0.0-canary.bdf1d3771.0","@material/elevation":"14.0.0-canary.bdf1d3771.0","@material/typography":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.bdf1d3771.0_1647268176141_0.15575624113188713","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/drawer","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.cf4292778.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d43829ad4ad5feeb9ab54d023248fee33794c666","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.cf4292778.0.tgz","fileCount":47,"integrity":"sha512-7vzbEiMkSZjYwNhss4VRiet7EJmUs4qxQ6ZWlgfi+F6bvxdxyM78l04R836wqdtx8nAoS4LR1FRPS452UIUXXQ==","signatures":[{"sig":"MEYCIQDwJVJsiT0+PQCioXb9EmJCB8cV2Azn+8vv4vb/QG9eZAIhANp8wMRKeOX10KkvZ7f+JTeY5TknN6Q4BUgHVzfGdtRb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL94tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtLg//Xp3hv/ZTSDIx0KC55dm1fDMc4u0JJh3erSRpHYB4U022gAmh\r\n12uxvv/YaFK5UUztvzh14POmpU2aJ8nZvyCQx/C4j3e6r1cZmcHd25JfZu2W\r\nFTYyBAQcv3dx91TuTdBK6jacD/qLYIlKtvrNqwTTxUTuSfzs+5v1PddVBSZ2\r\n+Fx1dh2oWIZdYFN9F5s/HNwIoJ6x9pO8tXyIWsfwfV1ssIfLNht251Rwb6xs\r\nSkCxH4jrYPpzAcHmm8lR7/AXjHHRydSysO3sBjAxHdSPLX2zuvf07CzVhV6e\r\nnfJfvF0BBbkInY1NZfo0K7PQS3xSIiQPAx+/HI2qZchYy42pNg8WR7XcXtRu\r\nVN85IJRPAI8SwUkXlir6EOOEaNLQZN4Osaz50azAto4icj52rdlo6EgfMwb6\r\nKOmPmtdMXEnaDjfUFvHl5b1bXZrIP+8q2nLHlsj89iUniCRWBBuO2KxuF+JC\r\nhiH35Jitb9SshOXF9VJd1rt2ozjNgSUXhjMCd+s7dE36DYHD7mmOni5JPO5Y\r\n2sQxmTnnlv84IBwQsJvaoyQQ/WAY4C3eWS0g69zfT69li8s+QWaexEcBun9M\r\nLCxpm1BaELPr/LLCrUWMqr9pp2NKe5VVTipHEk5mMTcokwupz9nKBBc5IKsP\r\nEcavuIiSkTcB88oiewUfibEKsMcCsMAuHrI=\r\n=eS2b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cf4292778.0","@material/rtl":"14.0.0-canary.cf4292778.0","@material/base":"14.0.0-canary.cf4292778.0","@material/list":"14.0.0-canary.cf4292778.0","@material/shape":"14.0.0-canary.cf4292778.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/ripple":"14.0.0-canary.cf4292778.0","@material/animation":"14.0.0-canary.cf4292778.0","@material/elevation":"14.0.0-canary.cf4292778.0","@material/typography":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.cf4292778.0_1647304236819_0.950527030064261","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/drawer","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.bbd43e0e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b5029ea261871a24c1cdbd68b15e8db8fabf465","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":47,"integrity":"sha512-6EGggHE6Yzi70j2Eb3QmR+Tb3pYNZAV/4AwNhnxHqjafbLY2+tv8vFqJCGF2TFkb9KbK2agerqzpiZ+bDzGu0w==","signatures":[{"sig":"MEQCIBDMoTgI1iOoCKM1kIzGn7qlnOuG7GjlJagqxCXJwpyMAiBx+zPZZkVF+P/jucVt9eKJdNGhPGd3bDPIexKWwgVFiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk20ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMzxAApE1/Uv/Q708TEuoaYd+XktbwBfDe/EkXe71qjPNlbm1VpIZ+\r\n0kbAcLYLF1U3kWaJu+dVPUG8QgrEN+ZraPJOXcP4SoT8VmzXOMDmmgrbAUjx\r\n1NO0mg2XZiXS03zWpMjo3ZxE95kh5oPUCWPlGC0ZHFdTkPtZbZMaLCPPyO0k\r\ndPphJY+GFat8a5aQLAeaxvsngeeg6GOqI6a085W1rXyymQq3E+8wsb1bJTO3\r\nXAIFua4NP+6F730fTluQBP19HuAbgaT5x+n889zNiZYcDavjgOVMxvDGQP/v\r\ntvgZ00MO+K1BEZXLu4cnycKHCe59YHrrXPUjNIqYE6c9e72AHAuvSK6IsY4/\r\nzk+i65svBgWDwPtbKMg+j3B3dIGxjSwOCv5n4rOTfWkAV9vLCkQLuqB8VUpV\r\nUHXF7V3DfSRi754brH8TSqMoZgq547htkerRBWRK64vF1xLoE6cWaBhMnLN6\r\n/m3ct4tU/B3rFkxmN2/EmSe9ymESSSVuJBybn88L7ZZMX0say75XysC0hqzN\r\nk7T7h0liIbfIEN9RQbuI5/bQJGgHrGa5zfeRJoWPSXyfneNSoxgNl0a7/HZh\r\nhVavRv5IBQXcF7wsmCCqOe3/s/d0DKWSxsmrjbsVHc6TWCurOBXTwEhzYgso\r\nZ2wQiRcD13K6NhDaEEN6NBhvRZmbGXj1HYA=\r\n=JC6d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd43e0e0.0","@material/rtl":"14.0.0-canary.bbd43e0e0.0","@material/base":"14.0.0-canary.bbd43e0e0.0","@material/list":"14.0.0-canary.bbd43e0e0.0","@material/shape":"14.0.0-canary.bbd43e0e0.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/ripple":"14.0.0-canary.bbd43e0e0.0","@material/animation":"14.0.0-canary.bbd43e0e0.0","@material/elevation":"14.0.0-canary.bbd43e0e0.0","@material/typography":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.bbd43e0e0.0_1647463860198_0.9324937905515889","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/drawer","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.1b6afad86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02a4d801fb4622f5b8e2197664b75125b919a40e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.1b6afad86.0.tgz","fileCount":47,"integrity":"sha512-TmK2D4lBbTtf45glpIzi4PP6T983NyWTeKm3i6rvEO2MpNMSwI4/XYk89fq3+uqgCXXm3TrtdXHJ2P4SJ8vegw==","signatures":[{"sig":"MEUCIQC3+8/8ldtKsPNVAQzS/cUjA+QnJKpWXIdpFWq5mxqHfQIgabqlZGr7q6eKXDQzgAv42L+99uFmrEGIttNIVWB0FAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlDgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLvg/9FOR+PtqGD4m3SADGClhAhoikLqzj+oPxshzbp3bZbUCknqme\r\nxwhAWA9uStrkhHkWb/CDsrCK2VBUd8kQe6fxEgwvhnXmTRsvYjBCNep05yn+\r\nJI3S7RoFHcXOASS3p5IT4PJRBYGfjbB2VtDZA/n59a6QnAM0oGHS3wm5tlty\r\nb6W1lJb5oLXoSBUzSsL9+KUyVXNc/QkuwacNX4Mq3m0Bbe/14iTwUwg1tWsr\r\nA3D/r1GfCtkykQO1j17PgJMgkESPa2aUBa26wVvdCm046nHnbgAYvfpbrpp9\r\n9QuCUOxeXZPKtYaygle9eX0NSGJxXAyVj6WNGwkR0EnuLSla7ab4Aw7lS9Xa\r\n2TI+6f8vpGXEkxv3rzi6wbYfobqRVlDeoFE+zikSZ2wFVmtHQa6XVx4+mjq5\r\nEVxxKUtdagH8pTGKiJGh02xs12dlD6J6oZpPqgGAmvGp0aJPN1ZAlgkr6RTJ\r\ndmre/auN05IhjcqyEZnMqClGmWAn+EPxE7Rk8lTSnCueLwiOMIfP+SeF0DJo\r\nKTHuBKSTD8onNuk4KxCJ4t6f+1U2fr/3FfCxea9q4iQYjonHIw21CIJAOZw2\r\nDkHfr7WCNI0xw0BjeAkiA9x9c+r8jgW5+9Hk7T2KttObxAu2yY4ngHrixq+C\r\nTp6aQ2wDLJ3i4ZFpfO446V7R/4aUbfF+yPw=\r\n=OGit\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1b6afad86.0","@material/rtl":"14.0.0-canary.1b6afad86.0","@material/base":"14.0.0-canary.1b6afad86.0","@material/list":"14.0.0-canary.1b6afad86.0","@material/shape":"14.0.0-canary.1b6afad86.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/ripple":"14.0.0-canary.1b6afad86.0","@material/animation":"14.0.0-canary.1b6afad86.0","@material/elevation":"14.0.0-canary.1b6afad86.0","@material/typography":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.1b6afad86.0_1647464672681_0.8103688794951163","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/drawer","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.bdf9d4af9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07a33c5402e8b835dd8f2a68a1ff4e8d5bfdc511","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":47,"integrity":"sha512-1N95kD0hqSHkS3eKM9h3/+SScrmP4GtW667Ar9UAetvUWcCy20P0nAE/hElmbTXrIiogoEMkdrlLSJga791k6Q==","signatures":[{"sig":"MEQCICKCe9Rl2Syr/NQXKpD/gzyd0waCHD9Uv3jipbq/9idZAiBIdutdX2k6LvRVG6oBTDtstZWc9w+B+b3sajc3DIJedQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlQ4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrG/w//eNsU2W7on1IAp4KEuEP1tiZIEP/QqVFWkdiHS6AUsOXfTMz4\r\nC2R0CvKuAJnTb+pXMNSoHushpOHgbT+hP3LAdJ0Job9/9d32VNE9CSEsekQp\r\n3CKhqYmlS9stnRO/upZM5ptXL8hHV0U0ZTaumVk0KvFJQOg3DTUddEJrp1wq\r\nJfwHkyPjd1Fk3mbVv2Pn4i9ooDZlkyq2rRpWiaGLsQS729URMZdPIvtxZ1gy\r\nhXWa8srcGKOmZf1qmi82ufKGH4QUCkznCCAvxErJfPMYOHEpBWBgA5fwROpP\r\n9T6PArzo/gUCQjrhEYiAZ5/tLZ6agh6Dvvg757al12ZGoZTM1Pj9iS6JFDSI\r\nD5+VLfk9Jz3IorlgYFo9ru46MZPPQTLisJGLELD0gXgCi3MGUBAAuaDSr/rA\r\nl55ij4E2JX88jhTrJgng1OM/2p2oy4j6sA1g3IPMDtKLQzOs8rTQeFaKiIFP\r\nYaYW1RDlOmxN0aexgBCzUhQGSOCJpHyjVtualKXIggsbzutPkdjboSE54tT9\r\n95Xf70Fpf8CYFPSFppybLhqdGh/d7RggBKR3EvxI4dhz3GXSOlenfoGnBi/A\r\nKtbbvklpLWnzKinvixPIkECsbfEPiCdJGG348KGEoh8DdCBAGSwQ2iSEK51d\r\nUIne1BCJHuEBYsMGvmj7qnl7HkVevVP8LXY=\r\n=oBxZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf9d4af9.0","@material/rtl":"14.0.0-canary.bdf9d4af9.0","@material/base":"14.0.0-canary.bdf9d4af9.0","@material/list":"14.0.0-canary.bdf9d4af9.0","@material/shape":"14.0.0-canary.bdf9d4af9.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/ripple":"14.0.0-canary.bdf9d4af9.0","@material/animation":"14.0.0-canary.bdf9d4af9.0","@material/elevation":"14.0.0-canary.bdf9d4af9.0","@material/typography":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.bdf9d4af9.0_1647465528490_0.8003549718789031","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/drawer","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.32b391398.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8b1e3ce2edc69ad1de4d6d1d18e127188fdb3ab","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.32b391398.0.tgz","fileCount":47,"integrity":"sha512-1T3dQB+jwsAdmePhbCWjy/Djkt1m/PY7icgPqlMm1mb+XxQVgxsKMRoTSjv7yM8rgfA5eJrWCBB5CdTFThoKdQ==","signatures":[{"sig":"MEUCIQC5nG3t9rWG/gd0rlpM6Bu8fFsogE2WVr7kMufzIz3FUAIgPb4n9deU54lc48V4L8ca7t2oF8h4xOmi4jBQjbFv0hI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3cyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKzhAAnhYQdXeRPNdWILPjkHbiXGQ5DWt9n5R8PuH+omJPxrE3Sizx\r\nKnKC5Av/lZTT1DC38OYVFvjVA1mvXSiHBfkyPVUemasIIGwkLd/WcYuJqRZm\r\nW5ZTOgbRMk3Emdxu2+Vd83/RnHGXwmC/ns20X10j36N0Sn5axEi4tJOaNZ1B\r\njYQacNMKjdIJXsjqWRM/hJo87Pb9JkA7fqjoPr+iwS5HF78Laz/GZnEXY6PN\r\nvNDbSvfnZVrZqosh75e1wAsBGklAUkkXK4spsg3v+0c38FL/UZz5pcyTbUlb\r\nCx5x6BD4t0p2lDc0MhCrgtrGkQNfew81szG6Kf6Zcs5SWRTfz5Hf4z5rMRxg\r\nrDwSvgY8DdGPMNgh6jvunwn3iyznVJ9MXuZ37UgOdi80DqI8dR7kUtNvZUof\r\naTMEjoNlDiNdKQPe5bN0otck2HwNnoMgIaWld5X4l5JVK5j96tQZr1acPPiL\r\n7+1bXbFppqvbx1S9xj2Obj7/nCTD+Bi0RNdfpEY9kYpD3MiMMTPS+2K2JExK\r\n/5gOQT6EJowd9xT18WUKUl+5AFUvXbA4FnvhIbkK9VP5Tc4rdeFu7sYpaNy5\r\nM/lS9THTC97ukBMEBfcCAEC7pZ+LbMfBSJP52BrR3gyaO3zGpZQ7m3JKBm8y\r\nzDUeuld3i0mMgUZq41wRxFsZ5RBZkxlEW0E=\r\n=x+yP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.32b391398.0","@material/rtl":"14.0.0-canary.32b391398.0","@material/base":"14.0.0-canary.32b391398.0","@material/list":"14.0.0-canary.32b391398.0","@material/shape":"14.0.0-canary.32b391398.0","@material/theme":"14.0.0-canary.32b391398.0","@material/ripple":"14.0.0-canary.32b391398.0","@material/animation":"14.0.0-canary.32b391398.0","@material/elevation":"14.0.0-canary.32b391398.0","@material/typography":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.32b391398.0_1647540018794_0.35102119982686375","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/drawer","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.ae8a6a3a3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d9fde7d00d9866bc271c62686ed479bd70a85a0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":47,"integrity":"sha512-gEatybBSVNgHRm718cCYWk7SsetNMTB7BmWAIMIyWcbakJhe6ik/j4VVW3G7lB1xBer0RzUJfODN68fRktNAjQ==","signatures":[{"sig":"MEUCIQDp+XC477FIFHllfNZFCyiikKJJvTLDqEhKVoEhLuC6BwIgXh9OJuhsAF3An+tyf0/nv5MLie4hcSYf67DM/+2RuIY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLXsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmosow/8CiHvJzgQ8gAJgifR33cSJ+damyDM4UhByiMocGANYh/O3U7w\r\nn8HtylVgPlRDHzltnB5uuCz2ZrDP/54kCWGezXzDKEnXPi0ItXKZ+/PeXa7l\r\nJyUGLRdEoLfudNzIAP+CCBNivSaOC8YJZJwEsXWsFa2pWsymiOz9HOsp1sXu\r\nnb/6GHUHpjnuQvOB5awItaIXdKg1saSLqCj2NB2L1evcIAeDZVnCr4JBf3ln\r\nSCpB6unW0fGVMh6F7d4CzmhvM++y3hfmfijSIoMC/IeeChQgGglSttksdxJi\r\nYtsX01xc/k5u7w31xSb+e3vAbjBP9lsRZ2OkOF9kVo5bZp49bEx/PAK6oJ7H\r\niAir3Va7mrVrfpG6CPAtE0nmRiKQiVSuvP1v4R6yFmayyUzzpCE/URS93i4F\r\nS0aQohFCaQoXd1XDaH6WvMIvDHnlZ2FbWkfmwmBbk/tf/DP0QVL/4NvaXQI9\r\nvyVT/EJHKhm1zxOXcWZYrj+a+QCS1DDQme7/DHKBcp2m4wbvD2f5LdddHk03\r\ndQET9HZ9xitTfttA/xST7YJ9JYVFtb/GyUkpUrGkM68x+XAO40J5z+WfltRx\r\n7Y1uwzNxDjr7nen8yaioK1H4i9WZ61rWxQVoDuwCkQ2CoxNjdQh1KwoCWpyD\r\n8HCNOAOXGxvaVaNKtQhqzVutkqpLW8D9B2k=\r\n=RN1R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ae8a6a3a3.0","@material/rtl":"14.0.0-canary.ae8a6a3a3.0","@material/base":"14.0.0-canary.ae8a6a3a3.0","@material/list":"14.0.0-canary.ae8a6a3a3.0","@material/shape":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/ripple":"14.0.0-canary.ae8a6a3a3.0","@material/animation":"14.0.0-canary.ae8a6a3a3.0","@material/elevation":"14.0.0-canary.ae8a6a3a3.0","@material/typography":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.ae8a6a3a3.0_1647621612427_0.05638468018088205","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/drawer","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.cbd9358a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3458478641cfbde969632ec50f262f71be6b74d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.cbd9358a6.0.tgz","fileCount":47,"integrity":"sha512-bajy02Xw4rNk5yapJ4qQR5P+S7dqVqTJ7NtU+u6ixvkxXsBDbSl7eJtoz8AsCib/jXJXen2fTGahd+pSg+0OBw==","signatures":[{"sig":"MEUCIQD9meiXgAH8OOZrLcznXxgntMTyA+8+1bPvb8OQXo+AAQIgaC+CQtvrncYsjH9IG0X1Xq6ntIQNYZIKQ76MnRGXxU8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ1SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFWQ/6AvsoGDZrto31dAjdWe7gnxZweSxJrX6g6di6HEseUAbKrPkg\r\ni1WqAx0SgGSQz/gd1l5Zf7J687fP+zEmFMZUhMMcpVJ5Xz/b/1ofzYkEkXKp\r\nuhEnXuqeUxsWYIqzmeF4e5ZCzDoB8mEHQWjlcXAfAPZ//PiB0fYWTAd7oTlt\r\nW+8Ygof1A5n/TYMGxogD7iImpbi+uZWFFika34uQuGX6NUe4vucPv7IIc/0I\r\nLJ0hphiVKiR8Jr5nhsWMwqxsS4rWkrh6hiSd1kyqMRl6jAvwCZBY3Mu6qAhA\r\nQyHKIKrrhSaWtf1b3IDy84iw4nU3/DpMLHSRplnSzcgst0BzyUZPPzLzdf5D\r\nlQyie2H/m2w7c01ebNzJIBlHhwCGVK6/t4e8GsymLo3WosEPJgGYcGyC9EMz\r\n0qJGRRLbH/+cp29bT8VQmvPfT8yJtNoqwtSVoKUdOLSMZE6UZt2ROkxX0XHu\r\nD8biYD64Rzrmdn0M2GlGluLwk3YEcd48wGUCxZDscx36fBAaQYyP5sah4ZYO\r\nrVX0ryDVHemgo1+dp08u2Mc7tTe+1o7GD2kABB59lAXmgeULDYKs6zpQaDsO\r\nz2EIF0DP/xKjkcntCYxZg0Iv4Hs/oSR35bZspkNaFCe+wrgIEuW7Wv3dO3IR\r\nxlfnYQiGbxMpTblgEKyAhRoYm2ZlNqB5AFE=\r\n=KtoV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cbd9358a6.0","@material/rtl":"14.0.0-canary.cbd9358a6.0","@material/base":"14.0.0-canary.cbd9358a6.0","@material/list":"14.0.0-canary.cbd9358a6.0","@material/shape":"14.0.0-canary.cbd9358a6.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/ripple":"14.0.0-canary.cbd9358a6.0","@material/animation":"14.0.0-canary.cbd9358a6.0","@material/elevation":"14.0.0-canary.cbd9358a6.0","@material/typography":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.cbd9358a6.0_1647643985934_0.8627726549703798","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/drawer","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.dcfe49c98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fddded43ce897d9a9c8343b3053ad6af338cf57","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.dcfe49c98.0.tgz","fileCount":47,"integrity":"sha512-8zzQXE1HE2pAB/oPmGUSS4rf9B1uzvSvg8ArAheSYTRl0CYREgL11QfxcC4Jw7AR3fYRkBCr1a/k/pUVdbi+Rg==","signatures":[{"sig":"MEYCIQCm09euDo4oM0OYy9XfAEahopPHgOQF1SrEsH9dDSnLWQIhAIG1ZlnxKBmI/qOhQ800w5Tg997/lfNRckT4+nqt16ZR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMewACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPKg/+K7jmED/TI3TY4vXyd6zYUyXwMNK9t6fREWFgZEpvKIPpcVeR\r\ngg258Kb8nfrBJ3dugtuC11hrNEuwX2kR4bNHe3IB/bkm2pOjGeWIbC0Jcx0z\r\n9JSMOeV2i+e3vsLA04yCzGEe5eU6BwDKv0fLNuskSSygIh40eLgmJF0i9FPu\r\n38oRQr3dJudtijriNNElC4Wc1olbBMyfK7Orn6VuQu5sIIsAnmNO7iaKg+L+\r\nbHGjPGWkudK2tQl7iBnCiiZdmqqnYOI/gpntV4dEQQC+feNtbYsy1aklFJ/D\r\n04iZHyQtGkIHEgDHPISQhLjICyVkovb1IeeUzrunnCdJOHq7XSbiZogoMyfh\r\nQKwiTruyK+1MBU5ixV0yb1Hht5sBHt5ldj5xzsmg3tqlM1XX6BlvyjqPrvKJ\r\n1nxthe4Hpu61S4UrT+gJdxmZopxN4etosibl+lY7hM5rgva/tqlQp0YZgfNq\r\n8nfXwt7M3RrzDP6t3wGelLlfZHdWUvHQxG3llNy4KWJd0d3xlJqyv/QQiauS\r\n1UmrI6zzxaA4M/ohPo8vU1qpmHUdToBcSTUZaygmiuUQ/pS277v2fiT/GGJy\r\npu7DeJWtk31zCWD0dlT44B21SgNIsVMm18mGTjPleJf9oGZHZxUI2SN22itg\r\nWL6kbFAKZTzccaMtir3wcZ5ZlXhFko1I9Jw=\r\n=mIKw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcfe49c98.0","@material/rtl":"14.0.0-canary.dcfe49c98.0","@material/base":"14.0.0-canary.dcfe49c98.0","@material/list":"14.0.0-canary.dcfe49c98.0","@material/shape":"14.0.0-canary.dcfe49c98.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/ripple":"14.0.0-canary.dcfe49c98.0","@material/animation":"14.0.0-canary.dcfe49c98.0","@material/elevation":"14.0.0-canary.dcfe49c98.0","@material/typography":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.dcfe49c98.0_1647888303596_0.765458541065686","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/drawer","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.f31a833fa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e625e9dceba116366ec05916d2a4f195101dbe3c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.f31a833fa.0.tgz","fileCount":47,"integrity":"sha512-3ev5LkzSys8Y9Idp0d6QhOvJz7OJ5pMhg2L7c++pFkiL05wyrByJyRMKsMy9Bceeg6GiZOdc13+kCKXuZa9iyg==","signatures":[{"sig":"MEUCIHo77wgHtr1hRnsc5sSna+24CClJyZouPDqRwfSS0ZfwAiEA+gXGJhJW3tJNi35SU6KDzg6LeMjXNOkU2GmaKOFz+qo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm8gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqmpg/6AyxCLBAK2E8j16gE6JlOcOL2ZKtxecD+ekZit7N9ItnbhXhs\r\njxXk9lwqo+wQbHJ2m4KZ185kubTgeNUzHX9j3X52N24t6P64XozU6mmUjctt\r\njdvgcQb+X8sqSAI239kTlj4FyQmCND48vIKSoF8ah+4m50OY/i/SmsQxmPDQ\r\n7enSTv8I9Qo4g9eDNSNuyigjOp+HhzIy99eEPcoD23NprdTtc01TrNho+Tjx\r\ndJuQVgBLYGaWz9IdALfuR03UWAISVQA2yaJ7gAWCBPng+Jjvvcz07vhA7MZb\r\n199V7705SUZyKkqs0f2HVM0woLO66UVUgzoPuaYmgfJt6kxT4/FW2p7Tg5lI\r\nfEoeB7wwGOzcj0yaAuynfVU0J20uFLteCCif9s11Nzf1Kmim+tGlvr03sNZH\r\nQmTFr5GPDAqURON4oOjUzyKas+j9+WNpTsWQ/OtwVV6aiov4W8wCkiR3y0eo\r\nt2/za5wtwF/0TN4RszGS2GpUljejc3JbmJHbBXbpuX3EYKyPFD6X3BznEUVT\r\nfyd4PphRphXlmN0PxjM7JFb2d+0HiH32NxpLgckA2aF3u+gJSH9vifEOSPk6\r\nnFxuS2g/HoTcDjmJq/1t09SIvuGV0jA4YbsvX6kM0JO2PFIwpuWknAhwPhlJ\r\nSfGAMWYBRa7h7MTqxvxP4yOXwCnw23K2fHg=\r\n=55HM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f31a833fa.0","@material/rtl":"14.0.0-canary.f31a833fa.0","@material/base":"14.0.0-canary.f31a833fa.0","@material/list":"14.0.0-canary.f31a833fa.0","@material/shape":"14.0.0-canary.f31a833fa.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/ripple":"14.0.0-canary.f31a833fa.0","@material/animation":"14.0.0-canary.f31a833fa.0","@material/elevation":"14.0.0-canary.f31a833fa.0","@material/typography":"14.0.0-canary.f31a833fa.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.f31a833fa.0_1647996703999_0.33709345904052057","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/drawer","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.4b92e210a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b26617944959817d51643b8e828573f35d972b5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.4b92e210a.0.tgz","fileCount":47,"integrity":"sha512-Phmqs9dj557HJ45x1MEuHFzwtR/HxbLTmEkh3JlXfx0KvuflMGmoIDH6RkZkul+dm87rvLoXu06+AtNuFSN31w==","signatures":[{"sig":"MEUCIQDEQjTvu8UPAOMkg0inpxL72ARE8TBoKVzOEADbHikddgIgZsgdyVKkgGDlxwZ2EhxAUjuay6ZkW0wLbSfpDNTYdQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNJSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtMRAAlNFkgAaRKnmkQ/NNwYZhp7DyfHEMIokJyofUf+Zvz3ul9StX\r\n+jP85f6wiLhf+ih6QeQ2txBztBaInSDIPwY2IW4kPNFD1UEimWFrlFEHSGrg\r\nmO0gGv5WqiDlG22aPiy+EeCa8OSTuLFNMxl8RK0OG+tlt7eOBcUyl2w9YZLb\r\nlbChTL0xZ7a4qZ3V9wY9Mh0BkvzkJ86nfpkC7LK/f5bNiqrufMS1LDMyqNNT\r\nTCYR2H1TvH4IcSG7YTejw4QbWCljTdnf9v93GODCSy8pc7viDmEiFEYQZi4r\r\nNpPOWzkGfX0Qz4pLKKmoZXLaffJx9VkIGq3dOQ1ZUtWw60ty3DXtAVM5Hn29\r\nk70rDCRRKdO24rFV0+58+vJawv4AQe3UXOzTSKYAr6eWVkH8EaJXPm62cA+Q\r\n4VMhhO6Iq+7ADFoaIgCUI0/o1PNRqde4NM8rMXh/3bfvh4I52LyKf6EMiR8u\r\n5uM5G8EQhZLKfhCVkaD8vYciJ2upGJHAbaHCiDOG4rD97Ky/BfLIxOsLMSgy\r\nJHDorS42mLIrZIAyzGwQzsAXiDA+SSUxDh/Ypcd3YGiG+jabun5Cs8MUQaZF\r\nSr8AQYrUnilA48yAo2bC+04gj68qbpNSNZVWTkCO3/+xzJ3xdw8usb7rYjPp\r\nwRSFWOt6zgTeFksz8szg0Gb8SIx3YiTo+lM=\r\n=oZfc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b92e210a.0","@material/rtl":"14.0.0-canary.4b92e210a.0","@material/base":"14.0.0-canary.4b92e210a.0","@material/list":"14.0.0-canary.4b92e210a.0","@material/shape":"14.0.0-canary.4b92e210a.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/ripple":"14.0.0-canary.4b92e210a.0","@material/animation":"14.0.0-canary.4b92e210a.0","@material/elevation":"14.0.0-canary.4b92e210a.0","@material/typography":"14.0.0-canary.4b92e210a.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.4b92e210a.0_1648153170715_0.9656041902821415","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/drawer","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.a657abb61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b18858190256991864d1b02dc6712d440d525be8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.a657abb61.0.tgz","fileCount":47,"integrity":"sha512-WQHHGuko26Se+gqTobeV6/XLn01J5tA2T+ou/Ohs02r6j1eST8RY3Fc6+XfhXvwQvp1xX41EyG0ldyNTKzHQeQ==","signatures":[{"sig":"MEYCIQDC0dDYF2I8S0xQSYCHZVy3tjZWT0+FEE/31kefc8l6nAIhAPzP63RtqVVhvIcpH4NXi0sBCBJ9RgmsQaVxPoPL7z1F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNdXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLEA/+OfgDinmf8kSrwqkooGZ1Gj1LwpVa2wbyJax84qimYpEkRMYI\r\nQuZ1jDr1HKK4VmoVLVXdOS3XWngZ4NZHyF49jWyz8tmkqqTvTuVsp/atPLHw\r\nKMH2et5oPtN8bAtkblv10vc08yrVhM3LZlzoHf3XIxxd+OTLK+5beYUdZ4Ow\r\nugF8xAAZ9EnCXsgHS6a74Rsr98Ci+uB8DKJ9kceWzY7Tp7uY4Yb3rkhG69yM\r\ncmsoLeVkz2AQVtTl6OYt5QtlCj7fAAtZ17OGbRct3HRgAqYIoS57yoZK0DT5\r\n5OLCYGFjo4by7uxWIi6AMF/qjj7NCHypHAL/ofjNomHbHJaKihzdSc58mstO\r\nV0zYsiTAJsb9ZMlwY433ZY/tH9NAEil/8Mu5OgN6Yelf8ZbsbhB0yzM9+mrg\r\nUNEoDwF8eYtym4Hc2qw+i9EIqRUjFaPSnb688OHuxkhXll0KZAxBQ+O438a1\r\ndyN32YmsnZTAxzL5UsYYiItaEzL4LF/Y4btsqEZaPOFQkY6+IOisT/NvNVjV\r\nioPWMReOuvbSn/WgC297btnHWG/KWRrQSraBvFKkDESfdQvbHV8WwbULdauV\r\nkRFBaF5auPSmuQ1j26Zdo8Pq9+7kqypEdZSyFYMN87NbWRoP/7osgX5v6x3D\r\nB+UxxVRf9kezPzLR1AgIptKtQUCmIPCcaIw=\r\n=clQA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a657abb61.0","@material/rtl":"14.0.0-canary.a657abb61.0","@material/base":"14.0.0-canary.a657abb61.0","@material/list":"14.0.0-canary.a657abb61.0","@material/shape":"14.0.0-canary.a657abb61.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/ripple":"14.0.0-canary.a657abb61.0","@material/animation":"14.0.0-canary.a657abb61.0","@material/elevation":"14.0.0-canary.a657abb61.0","@material/typography":"14.0.0-canary.a657abb61.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.a657abb61.0_1648154455002_0.08357128405694025","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/drawer","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.443f63f50.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d86b5ef2f444bb0a1e4972a92c1b1ddfac60ba46","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.443f63f50.0.tgz","fileCount":47,"integrity":"sha512-nWqwcmx40LdOX7KUDjQmQCQMVXE4PN9Vyf9MAyyZUh35tGQWUjFjHATuLyedn6j9fMdPYB4GkTo6XKI0WmId4Q==","signatures":[{"sig":"MEUCID48IiVH+EebkFPvILyxLP1T9zQyM4OQKOMYpHjMtw4NAiEAkvkoKwP4AsUkhPCoDXhLe5FoF8s4JeIm39NFTq1Qu8g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkq8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhKA//UEoRK2x9/nK26Gv5rDn2EfY3sO+aOD+zYNqkCPWyekXHDEKV\r\n3qGeiSTQvNA6zjwb+2dXJYltAuy4o4/0j5cPO2FEaCKJOp9c49HQ7xECvk72\r\nXozwxzxTKkdd7+nUb7N7Jp+6Cc2dr6l9Mv/93nMI2ybZjDFbFiwtvYHhxw6/\r\npqdddXpqRwUlTFrp+3OR4l3vlfJMP3cuoW36LQnuC7ZpjBdgU6SiWVQmTyRy\r\ntjJsyTSWupeWsUOct/s4uWdz/Y3Z6dnr0PhmaoBVPsj/HNkv6ireiTZdJx3G\r\nZM5qbsvBBvajfFdl1jAUrwnYtGp+U1gnZpNT9mt5uyNYBW8DBzZct7pcWmu/\r\naOu91SjFjQilSrjqzapQzX9hDYVL4IPrEa+JEzMhAV6Dqw55TO1joOV8YkCS\r\n+GzwafRYRZLoYCTYSdBiczVzb+en1PKYofX4ez5iv5odFlo65+BGLSS6sQD3\r\n25WTX2ZSr2w3VD04FXQi6hMGropFS+7gW3G5+u+7ETkcNg6pwubUrinyy8dX\r\n2zFgBuRmOKcblVWhM02oeP9MfghjRh8+DIE2YFA2MISLFBhVKwdnw1B0KSMw\r\nRGPizY268iiJVuLQGnnwr+e2WfdJRCdi/TN2YlAGS+SFe33Zsb9DNC8ORQxu\r\n141nBvgQJYXEIb+333dcjPLOfXFchVnfU2g=\r\n=1y9j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.443f63f50.0","@material/rtl":"14.0.0-canary.443f63f50.0","@material/base":"14.0.0-canary.443f63f50.0","@material/list":"14.0.0-canary.443f63f50.0","@material/shape":"14.0.0-canary.443f63f50.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/ripple":"14.0.0-canary.443f63f50.0","@material/animation":"14.0.0-canary.443f63f50.0","@material/elevation":"14.0.0-canary.443f63f50.0","@material/typography":"14.0.0-canary.443f63f50.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.443f63f50.0_1648249532013_0.36373418451334616","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/drawer","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.eb382f318.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"495efdee7e57081d27c674a961a7071ca4cf2f63","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.eb382f318.0.tgz","fileCount":47,"integrity":"sha512-gz0ljwNX7We0kDn5fj34JBCdVqqYFhKTdnwII00BxubZDcz3KYVTmFt9XQYT2BXfltLH6s0LzqXFfe5LFAWmgQ==","signatures":[{"sig":"MEQCIEjl0oCbqCg1qthZ3gEB1EFOf1nwhg6S5rXISfm0fJoBAiA+ZyDPW45kG8LjHUgpPJ1CBDsNpEYy6ctd7SqBIGAvJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0N8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrm0Q//S6BSMSWtIqbKORLI0XBlK8fnsJZ1vopGIksKkgz+6mHEzcZg\r\n+rlzmPtX4nPksq4VqalRc1owQSJasUEQYeXf8/ERmOoqnGGEmY8o11/N27f6\r\ne5q74l2yA3AXrBR+h+WVzANlll34PF0YBXxAIJVilyjTnDM6QMJ519TMJL3u\r\nmopL/uKKtxPj7RjYO69x+UtMFbxKIu8s/eHprvila76DG8f3y0r94cQpYtLE\r\nAvJg+ZT+AOdux2nie6Ojtul9mKiXGT0/twrofvsVmCAfX85mw/qtQSiWDaX1\r\nkcuw9g+TQc6PspCedZ4Mf97M+26xYHjiCL1iYJ9JnrNVeugM1tPu/J9aQRc4\r\nUMBvfkPb8Fm4T9e1snPDvVfednuCiLbcNMSbAn3NF0zGtZObkBaZ9otYt1DD\r\nmZOF8rFGtCNxRVLvP5wX3iqRl/1o3S0sK9EulvKMUHuTOnhFD+KjIqy6J9gz\r\nSpexihEKkx3sNW5qeGb7ydC/lL1lHc9RxRSjEgS1nCb3ILrJeLB7b9o9X5gs\r\nNMEFFL3SrKTpBE1dp7YCY6LHzSrciZrWlFUQQfmnYe8Jzou0PF5YdS1Q1c5d\r\nByIBGM5ATe/1jJOMIjVjMQej5lMJklD6Cm13p6ZcU3z6uCNVO7tWG7TgnsTp\r\ngiudIf5RvHHk4l36MtUtarAj0m082W+A0eQ=\r\n=AU/y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.eb382f318.0","@material/rtl":"14.0.0-canary.eb382f318.0","@material/base":"14.0.0-canary.eb382f318.0","@material/list":"14.0.0-canary.eb382f318.0","@material/shape":"14.0.0-canary.eb382f318.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/ripple":"14.0.0-canary.eb382f318.0","@material/animation":"14.0.0-canary.eb382f318.0","@material/elevation":"14.0.0-canary.eb382f318.0","@material/typography":"14.0.0-canary.eb382f318.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.eb382f318.0_1648575356005_0.9158069512160645","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/drawer","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.344d52823.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfd1563b42a90cee1a62a03b4150e20912928cff","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.344d52823.0.tgz","fileCount":47,"integrity":"sha512-5sBjIKyvIDhZqTK894QJeQx+ock0E7jkx3RRRIn9NNPTvvFcCl839d8TfE3LkxC0i4wMs0B357SzAdlbZW9YYQ==","signatures":[{"sig":"MEYCIQCGyo4683V4ySQppctVhHhPXPZ1SzsWWr7CgIi/PDKASQIhAMKUbnhsL/tkuFY48iEGJlumxwE75/LQ6j+onVpL2aLe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1N/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBxRAAmQOkhEv/y7rKcKL6xmXMfOqSnURNLnGeMMCpfy+Ic6QXzGdZ\r\nlU1Hd9VRLv57YI4UIfhu1GAPEVfv97bfZ4TRPiMxSZ0YqNDyhww8IVM/KOsG\r\nniCR2Q0LcQTy5t1yOP9aNwZW8j8wkZ8g6ehjzxCPnrBydfHnXoW8Ah0bEzeK\r\nHf8Gks6A/e225SewvuSmod2NO22IdPHtKBd8r8PuiqClHBzQxPJpi0keVKw9\r\nJoLJWeNLDTqV32SozzlTZJvoyKmN6XRpo5uwAlHqqerkPuMJkGVATQpQqroO\r\nmmNxGEAYOlJF+zgghS3TNEeow7hyLvgNCxVAsEZNSBDtkBC8g5edHTlzZuVz\r\n/JzJWcMOzFKk53VLwdMAFO2N7j2k2PCxKGi1OtLhwZUPu/YjTKkzgRQB+GDA\r\nA2uVGAJd7dtbWsIE0HuUQGbZq1NuDZ5xF7eS8JDu9qhAoQrRokpu7Ikh6kRE\r\nw0+Ir+TnG9rdjLVcLCjuYnrOt/TQ9yfSP8MEChF5KfGyhP89vwUvqqbP16Su\r\nN9Q/KxRHfUfjB/GNX9BRxMAelx/cutRxFvT03AyZW5IqWxvhPtqE9ZCxnbDK\r\nsHNu8EX9k3cHpaonIiif+BMWFB6mte60/jF3kSr7dC6Zzf2SbBNQ4BUYNSf6\r\nkmiZaQ1G+l4xeX9QGh/KhX/lSN/tqX1lgpY=\r\n=5kfk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.344d52823.0","@material/rtl":"14.0.0-canary.344d52823.0","@material/base":"14.0.0-canary.344d52823.0","@material/list":"14.0.0-canary.344d52823.0","@material/shape":"14.0.0-canary.344d52823.0","@material/theme":"14.0.0-canary.344d52823.0","@material/ripple":"14.0.0-canary.344d52823.0","@material/animation":"14.0.0-canary.344d52823.0","@material/elevation":"14.0.0-canary.344d52823.0","@material/typography":"14.0.0-canary.344d52823.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.344d52823.0_1648579455206_0.790326152699967","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/drawer","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.4e372fb49.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e442067fcf8fff2dd075efad04385d2cb26a30f4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.4e372fb49.0.tgz","fileCount":47,"integrity":"sha512-M+J6+PBRPHH/dECBt+Z7ZzqD4Uu1rNM23Gv7v5WHBw+C2bF/ckwgIbAhe1zzRmr2CN3xTNgSfAkU4oJdo/eJ+w==","signatures":[{"sig":"MEQCIA6uM2oTHKf80Nt9FGZXwDSuDAO4dbMR/xYrcGFW3Be4AiBo9sT5WLryWnoifJYMLlo4G4/8dMVATXHugsgefIDU1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0qzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmrQ/8CVy2jjT+4zWkS/rgGNTYZKx2vfF2q2pzwn6SUv3kdWtjdBAR\r\nWnnpnogkXuhsMvbsIgRqDvBBRFC/XesxsmeFqG3W2T+G04SHSbdfy463wQzE\r\npq6DLljqPJgliaBBRlBrcH6mpHzcrJHiO6epOK1N6MSnoVmrUGQ8eTN8unYz\r\ngG/ye19EUNQNtuv3820/WY8Rl8Q55mtGNYPrdAbtUMtSUvtHwd++0WuhP3u6\r\nfDZF0sq+qVQN6eN9SOL1EOW2ArkaMKwi7zsKTNAJ6oP76gj6NQWj1swNrbhJ\r\nMZ8RhkG/b3tJKA7ZFrhWCCYGlIWreHsc758fxWUySEOILzOHTPtg9G5JeFVR\r\nxr+yhhlGq+ALMJOmMH5nEsujapIHY9MyrfihXv2CsQshgxHH9Kfzt1/1NsiD\r\nRl6s2V7cN8pqJzheNMScoenkrfFdZC+WbwaWY1q+2crtecI3sDcEAa9ZWRrv\r\npLKME3Vr9QJq2GJPmBgenS2Fhgi4cF7nuW9flogkiI3dVzCoxzIK2g+S2AQr\r\nCrx2Lw6vjVxk4VIPrrDAH5okpPI6Mydjiy7KzVhRDqIJ9OEHAPW4b2FF71Zk\r\nBUyxvrHaX3V7fokhDyi6ZsJUYt0+jBbQ4nXt1uODztwQbaRHXejUxmfS21H+\r\nsyeqScx8XQWReu9b55SOVAnVJI/W0/Q0eDI=\r\n=GBcU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e372fb49.0","@material/rtl":"14.0.0-canary.4e372fb49.0","@material/base":"14.0.0-canary.4e372fb49.0","@material/list":"14.0.0-canary.4e372fb49.0","@material/shape":"14.0.0-canary.4e372fb49.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/ripple":"14.0.0-canary.4e372fb49.0","@material/animation":"14.0.0-canary.4e372fb49.0","@material/elevation":"14.0.0-canary.4e372fb49.0","@material/typography":"14.0.0-canary.4e372fb49.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.4e372fb49.0_1649363634996_0.4328155684921744","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/drawer","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.3e30054fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c41cf41fa3b9357ac3a2a19162f342037eee8471","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.3e30054fb.0.tgz","fileCount":47,"integrity":"sha512-e8HR/RAI5bnjPEVkkwMH/JFwqrJWV1aMravsDEyhj19GXgoc1IIeldua6uU4iFRdnWJRfkYiOogO8p2K5TlMGg==","signatures":[{"sig":"MEUCIDijYuvXO8Ey3xxiY/JdoyZKNZraxjV7oJvCwalog+wuAiEA0xK5Fe+V148vUsZOAjIaLRtTcWYISyVAMfalT2VrL9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0tzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrmug/+Lxy/7xktpbO7fQHArB0T82xU4Pz6qo8Cu6zakMa5F1BwXByA\r\nvemdCDkoUngY5b1WZYPuV6dXAfAmbJRjbfrSEUXxhnEPP6u6DQFGLLmi01G2\r\nckFDuAZ4v2qhrmTxBvpMwxa8G2OymbADYqEK6xdhf/aVHBcLUdrK+ZWVQj8l\r\nsaoaCPaWbMQ8i6s4gvVuSr4qBwz+tUG8eAOhsurSIHONldgvj8KaO7S4K0zy\r\nGupNg1I4snQQBu08y7Td+48Nt/JDztziIV3zye+7ZKdutoXpltogIil9ww37\r\nvQqN+IuZH6tKZ+WmZ7UKlJJgXXiypk49YuWPKSxj5Dzzc2usukI7UTGSQ2TS\r\ns3dnumFEQZAPwIcN4ptESJdZhhYyfDr9BhYfrehOFu4++XUYRLWvlb4XmeNp\r\n3rzCyqJ+LlSNIj0TJrFMRPkIAa/QlkMjbbqSDf+W8bOOOfx7eia3rj5AcbGp\r\nSWn3r9qnf9zB6yO2uQv0UzPNzGXTdVQBEFAIgfuHOEXzS6IyUmMZLV1qEYPn\r\nix/vqNeUDymJGMyHlw2FU/Z1AcZKEbiUzi/Pscpj1zwg7dmGfG4BV28IBtpz\r\nHpI4Yz0E+ozVbmlqbZom7VGKm8K+cbjQYrw0B8SPUzBCVvrK7I2o/UKfM7/T\r\nHaaVIxpJdYGw8JeSKLn25wW/WA4z+GIcesc=\r\n=HvVP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e30054fb.0","@material/rtl":"14.0.0-canary.3e30054fb.0","@material/base":"14.0.0-canary.3e30054fb.0","@material/list":"14.0.0-canary.3e30054fb.0","@material/shape":"14.0.0-canary.3e30054fb.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/ripple":"14.0.0-canary.3e30054fb.0","@material/animation":"14.0.0-canary.3e30054fb.0","@material/elevation":"14.0.0-canary.3e30054fb.0","@material/typography":"14.0.0-canary.3e30054fb.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.3e30054fb.0_1649888114714_0.9495536517858507","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/drawer","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.8c4da223a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09c840fc9b3b240fa31bd4f0ef876e7b0b9839f0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.8c4da223a.0.tgz","fileCount":47,"integrity":"sha512-Gk1I26k7s4lnjGOBRfcNzkAB+lLNxApnvJZDnKca6ayP2A7iYlZ3PLoemRPj0FjCZ8kNislNdqBJXlImJ1Rp4g==","signatures":[{"sig":"MEUCIH96O4du7cqxzvbRIlwdVx4vX7vK6vXJsQrpskN9KtWAAiEAp3acUEtsUKAAyAvvPcGIlgTbX9OvCD1jzUp551Luvxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtRXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLjQ/+M7tggJbBnOIl69+vreP2qhkAfyiLeXhopgvsOgZBkTWwuQCJ\r\nfJCB207tuu9eg66yrNBG2xpu6mXFe3TB4+NP9XTRCDnXw6lcfKN/Wvn3VgAy\r\n7FQA4O62EF9yz9hhuir6o8oefmvQZDhoZe5LzaDCL/kGAywk/P3h0EbFnHb0\r\nGEMqjmuFFs8O8DAfLv2Er7pxVgeH4fnG/Sjm3MKdutG1AFMj9D6PGNOOU4+J\r\n209HzVl5oyHOalYToGcuy3Y8EpgCkbljNUCTX/u3ehQWskJHx7H4tcYZBKmF\r\nlheAfDqSKLK8YBbMvRAK0qHbtnrDMi8WpqmpLEAO8MGaSWzdHypbPDU66EB2\r\nfE4Ut/8PYN/hmxhhhWv7kWfVCd40kbVcEpJwphcFAQ4A//4v1fOfAlBmO6oP\r\nsAAi+Pq0MEfCL3G4AlOMsWOCDGh0p5H+8q/AB5MCmhfa8+uLF0ARma/YVXIX\r\nkRDLzDNX3aWBUojdb0U6abE3TND/c42V3vt0z9g5k3F0AAGoJXlLs1wO0gYU\r\nNaE0sCbPZL/20YlStxwVT2C7TmiiO+wV8/GAzNDTBSCK5AsgJ/uu9t0cShTR\r\nAaGkPmV+uilL/ZrPsj9Q8Ut+uctowQRQGpR84dWFV4zjaZ7qMRGATrdpkTl3\r\nCp4AqkRNA/YpZa94AbWXbeXSmmavn+RaIL0=\r\n=nvn3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8c4da223a.0","@material/rtl":"14.0.0-canary.8c4da223a.0","@material/base":"14.0.0-canary.8c4da223a.0","@material/list":"14.0.0-canary.8c4da223a.0","@material/shape":"14.0.0-canary.8c4da223a.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/ripple":"14.0.0-canary.8c4da223a.0","@material/animation":"14.0.0-canary.8c4da223a.0","@material/elevation":"14.0.0-canary.8c4da223a.0","@material/typography":"14.0.0-canary.8c4da223a.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.8c4da223a.0_1650381910835_0.36202101888995064","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/drawer","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.7de8965cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f46c167ed393608cb6d4b49e157d769813717842","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.7de8965cc.0.tgz","fileCount":47,"integrity":"sha512-XBUdY3bGvRTywf1jhW7w5idXRIJsXz1HgfdhH2gfXIPVsqEX3R6KbWLBAhBLAQsm9yeuEEFnJTCKgsG2yA5nLg==","signatures":[{"sig":"MEUCIHn/d9TNT9hMQO970mfupKYpEpbKRkZCMDVeRddhvnXIAiEAgWrPrWsQbuFkWDIeRGmVKq4RLiAr7512OamEobhQumM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxp4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolCA//eQouuILXJ5l/vCfYZo3o74F4YFARC/lAzzkisWOSqC7kLIHG\r\nuaipmBoKCo0LCj3tzD/j79/qc27jNsgGdNWPIYFd4YdAjW8hZ48HyMJisaUu\r\n9fichbbgqGGv8dQnr8WN/OPCK4EW715n6U2lOlbfBmArz6wRHbJ2BCDnUsi4\r\n2OzywKJX/5qW1kHLewDWo+JZSe3Sc72f3xoudlN6bSr6qjGaU1Amu1RhMErq\r\nkW4Pk4kTR0C6baOczQt6MgW3HmBIW68b4+I6DDM0aW5cfRZfUFf6hhr0BW6T\r\n8N/qLmCSH6q1LC+l5i+wTINJcVMa4RCFSu/W42KJPbsOZMMdfCVwDbUuNkWP\r\nPnfkxJYrUGg+K0I3XnnJ9kvPRmKtP8eXtzVvNUsSL3tngXelEeWOXolUPK5z\r\nSU6TZmYTjWsV196g2/+qD6j2hirBzlnooDuo3MsN2IvvqKOgVe+9QUvHKlVU\r\nOYvR+zDmLJY7ivrqUtOljo/kotwP8ubF0uBTsWwAumkRR1jSPf2HBRlescKj\r\nd6FmwPKwpqpn8o94drRJcc+4lgypsgfN2L6pct83ETkxo5/aV+YeySsoOxOa\r\nwoLmdD+n1zt9OaujKsdY+Jt+RX0IUk8IKVVn6bdPCNx5EFZduWDrx2WPqUAX\r\nctjiDM/txo1KKiTEZxpnwrin7ex/leSF+ww=\r\n=jgJI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7de8965cc.0","@material/rtl":"14.0.0-canary.7de8965cc.0","@material/base":"14.0.0-canary.7de8965cc.0","@material/list":"14.0.0-canary.7de8965cc.0","@material/shape":"14.0.0-canary.7de8965cc.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/ripple":"14.0.0-canary.7de8965cc.0","@material/animation":"14.0.0-canary.7de8965cc.0","@material/elevation":"14.0.0-canary.7de8965cc.0","@material/typography":"14.0.0-canary.7de8965cc.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.7de8965cc.0_1650399864193_0.6308287659095078","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/drawer","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.641ed0851.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f7af8f640a523ff8b26b1bc4b93a93077289b4d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.641ed0851.0.tgz","fileCount":47,"integrity":"sha512-kobOtPc5SYiEp1clhe0HOgskXBVb25royMdhLttVzd2ZD43bRUcNLaXtNMG54gfdc9vX03KU8K+Tg9JmV4eCYw==","signatures":[{"sig":"MEQCIGFrreOaP2RBU9ppZ1N/T+/RguKdbOpeN7vHn1E5mgRJAiA16kFW+941CSFLY+lBQu7FtPYmIJO8P5EQfbxvhcg0uA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC+TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1vQ/9FJbGqNWx6xlpQwwLhQIOqPClF16D/8Ve6OP0EVLzvAQXyPXc\r\nvAaFh04DLyIpeS4j9uohl14QH4xfg7HgugIDLUjhZVZVan1rfxokE3UpbJcJ\r\nUgd+5PRZ3K9gqi5RO/eht8FTlPhxYSg2bjXCt65nGCuVxAesYNmzGToRgC6g\r\nJc/41bf3I9yYE+kSGr/+sLh03FOgM9LNGXEmCcz6sJy0cDgZ75RdfT9sYv98\r\nogVErFAjxSXzzrNmWd5xHvXlR5yix08mdvXU1GbKGbodu74JlPWMil2mm4+X\r\nl81g0MIabu5AfkkcujFt+YI8EbsNNOoYxiVz4ukNSrP+mrmH0qoXBJICZg+m\r\nnNLQBFnXLo3KVeSWxW41C+ZLmC+LexLfDRcnwdF68xBvnhWXcPdw+TXU3tMk\r\nhd6BOcjUgxA6UjoNGwOhwHbZLASN2gDtnCnzALUj5Qy1HJCdS1QBEGa04ACu\r\n0J8wtzBx9j9UZCnnE3AybLdrVeI/XEhzhRIZXLrWNClTpjn0+4k9s0bMVbY/\r\nOOJYX5jlfC3uc15jWjAPWBAgGNarletmY3flzoRMdhYPF6c+dyTlp0CjQRle\r\nM9RwUZ7hTpLX0Vv3tEbgOeyfZXSFeE7qKHDnUXKkwLtvUBvOQEyuC53p5d5f\r\nJvIGzJH1R+mXydRDpD9vioN/i5iK7uGmxls=\r\n=aunY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.641ed0851.0","@material/rtl":"14.0.0-canary.641ed0851.0","@material/base":"14.0.0-canary.641ed0851.0","@material/list":"14.0.0-canary.641ed0851.0","@material/shape":"14.0.0-canary.641ed0851.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/ripple":"14.0.0-canary.641ed0851.0","@material/animation":"14.0.0-canary.641ed0851.0","@material/elevation":"14.0.0-canary.641ed0851.0","@material/typography":"14.0.0-canary.641ed0851.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.641ed0851.0_1650470803259_0.8546714782488694","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/drawer","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.e88f83024.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"449d801057cd99353ab5b18911b6a62905a8f39b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.e88f83024.0.tgz","fileCount":47,"integrity":"sha512-irk/pkaJoUSZshngJec+BVk3lJD9Drst4n+bEv/RPK2JhliGZHA1reEbieGuwvAVcNT+1PLi/Qa2nPBTY6UQfg==","signatures":[{"sig":"MEUCIQCkzWyAPV+RDc6/2J1DlzahKZrsMF/mr73yjwqDBiNUYAIgJ5XaAgJr42rbwzYKS2TsNqi9fm6F1f2oK7wXp3OSgxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEd8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeEA//e1XK8NUFNTNrTnpqj/BQNAmyKi56NGE9em/g5GY+U1HMZy/Z\r\nmxWVR9qEW70i9/lpr/syhrXsifm7oPKZH/+PxhW2LmfV0EE4/zzNKtJ9+I5E\r\ny94Ysn9aRVgrYnjLr/NGicWb+pOv825o/LxJXEHa7gufGGf048v19dP9z4J8\r\nJ646eTTjHu21gNO3prewg6O3W9f/Rr4hfUSAuOiOwoZeNh1D1KAvEXWryS0t\r\nOv0YTVWU296/ZlsXjz+VIEzA+h/1O8FBI6yNGeSSKFBj7jQ2GxtS+jTi1jJB\r\nuftWHhvoFJa/P15cKOokzbgKx4vvSS4C35kcwglbrqygIZxzJLTEszFsMkAU\r\n/PBmboLK72dNz2ZEqABKinGgSuehNEBDXHqH3/GvmiX3qpmrHFUyrZ9PfKxP\r\nJwtML/LKY02XCrmx+cL2Q0JH0FXio78WiKsPZPxakCshREZc62fIMJRoolyq\r\nT2k2S8j5cWlJENrTRu9lZScyjF07AqqIWTtq1DIC9rEmlyWzbb0JmmRPSYrE\r\nfRKBqV4GRI8+QbbJP4Fjge7c9ba97KLyGdKG3gYQnpehrRIBcwsCZbP3OOcr\r\nV9zyaFkqFdxPDyHD3w5zPzhvo7Gmnbf99cTEFzeJfuPMxKvbNBFnpW+Cq9lJ\r\nrxQZZdg4rkn4xjWuHJWxlNocmW5tDMAxDYY=\r\n=x39m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e88f83024.0","@material/rtl":"14.0.0-canary.e88f83024.0","@material/base":"14.0.0-canary.e88f83024.0","@material/list":"14.0.0-canary.e88f83024.0","@material/shape":"14.0.0-canary.e88f83024.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/ripple":"14.0.0-canary.e88f83024.0","@material/animation":"14.0.0-canary.e88f83024.0","@material/elevation":"14.0.0-canary.e88f83024.0","@material/typography":"14.0.0-canary.e88f83024.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.e88f83024.0_1650476924088_0.4911348990107016","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/drawer","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.7321d6254.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db2b4f9e9305d323352a1cfd5fea4c69d092d1e9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.7321d6254.0.tgz","fileCount":47,"integrity":"sha512-soWAM9zBriuXpPgKb+wLznOGVjqgnkRJ8RrVGtW2qUR9KEgbHjge/dbzbcDjU2eXp8N9lqUOX2+8kRKAOBFyog==","signatures":[{"sig":"MEUCIQCZiXzqBhKbaSu71f2yuNS9/RxzJOuNj6KF2djex8hOyAIgeGGb0K2T1IdDAAA6HpwVoAsbqDrDJLg90b8I4IbOjs8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGkiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8zw/7Bpl292oEVJ29ut7rAGqskqJhw9XwfxUbPgihx+R95onWlpGs\r\nqH6dylTnYtsheFMeCbo2ZzMdWJ/Z2FQQjw2ZJG5NsuClj+63g3YQ20G+9CSr\r\no89CJZ37dwpu906RsPfnrEWSwERyDOaKQXks3/iydpPVSUth9ey51kSO9tmP\r\nfrI5z67DrZBA5euQBMuzjycBL7GhV7TqrcN3kF0cZOZtdaoohW0AUVvt43To\r\nhjqwB1jA2RZAuIoLxPtnaqV86UgoV1itHNblg45653jlwFDEjc9ymWd++KHv\r\nnar+PT0v+WiySl1XFqPabbDx/F8DwL87TDtR9rZ3kYnoDjByQoKfhXtqvKAZ\r\nQbcZ542GRgvQa4HJV4mSYPFzZ5GpVkZyBXNA3auyzCN8nYWsSTN0AKc9TTaM\r\nJlLPzCLGgjpHQTMB3DMHogvXB4CoJqVdiphYejnS9n8Oij+v931t93pRi4Ry\r\nCBGZId2a89MMUwEQdEwnsnJOu5MYONXkWQT8ejH0BVu45nWEUA5R+jDlsrlr\r\nY2fd7HJ+Kv7CgdeAldi/NguWsYigNdL+aD60iOmk4qV5m0LG2jFVSz9MFNuB\r\nSf5jDXkvirPux1tgwwwvPslm0XwKdzigo0gK+fWS3QfE7iSMp+395NQcKj2R\r\nom0gaPMzWV88+TQwNSH7CixAHyoXwEDJiWU=\r\n=Si7V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7321d6254.0","@material/rtl":"14.0.0-canary.7321d6254.0","@material/base":"14.0.0-canary.7321d6254.0","@material/list":"14.0.0-canary.7321d6254.0","@material/shape":"14.0.0-canary.7321d6254.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/ripple":"14.0.0-canary.7321d6254.0","@material/animation":"14.0.0-canary.7321d6254.0","@material/elevation":"14.0.0-canary.7321d6254.0","@material/typography":"14.0.0-canary.7321d6254.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.7321d6254.0_1650485538248_0.10691547856612837","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/drawer","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.3ab956515.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"374e367f3c560cc1eebc5cd47847ad8b3a136f2f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.3ab956515.0.tgz","fileCount":47,"integrity":"sha512-1B6CF5PX/QsU0P4rGDKEI1dFOer2PcvCKBRVJxkGl/PbI6r7cwfx1x39EVWhQww/Yfeha0NsjkUSfYCnc8IoTw==","signatures":[{"sig":"MEYCIQCc5yrIBxXpihPLsUp8pohsN+kWwRNixzKrYFOJb+sMGgIhAPQYDCQh76dqqEkVh0TShY67j0hf4YIOnQV4TbkIu8pz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrgeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKqA//bVUugvkkrOEzDnyIizTO7m9+KUvoYTFqgiMVXjberu0Vyz5E\r\nQrNyq9lPATsOWTzp33MGfXfPZ/xbOeAkky3C7tKRrLXsmDnuTrssdTmFBDdX\r\nOuJKNbUMyOwedT42aRZLbRikWRiZzS5EtRkRch/W4DFg3Pk5lO0E//gVyOQr\r\nbO8aNXLHPfBjVp2k/JzdeTmKf+0e1GvNDA9q5yZXUl5fIDZH5zJPaTXzZJ5W\r\nCGOb840GjrSn6NnIFhc4ZdpjtILsFdZXGjVpeqGDSKC9n2abfd3CXobic0ll\r\n4EbWtxqTL/UBpkI15xvec8eYp0UU7tK3qjjV2E2Q4hshpmbeKDm9r/NHy8Pb\r\ndCsJdxWvrE4V56FVihVlMyC2sBDT6iAlc1T04F2YDyHT+NlTn7Tfv9olvqdw\r\nhH8JMgfTVboPISXdXQaH6QmjnGdwMS0bvSJswnZK6Xubtf1BrJ+ZMmYDUEa5\r\n5qyR2COY8Wurx3UG+LUvpZehNpibITDvqLXeLp7MOkMpDK3AUAmaEMy6gTpo\r\npodR1sFKccp6aPIQk47666zG4q5BD9XDLEK5BilzjfS7yDaiEWHaSGfBGpg0\r\nrn5uB18Onn4i+YBMkDsB3+gRUPcFxwOh1ZBn1xeh9dz+JoNPZnQcuOytPAVD\r\nV4lmalcomEZUYILkSuuaCr2pXhZIRk46DiU=\r\n=CtE8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ab956515.0","@material/rtl":"14.0.0-canary.3ab956515.0","@material/base":"14.0.0-canary.3ab956515.0","@material/list":"14.0.0-canary.3ab956515.0","@material/shape":"14.0.0-canary.3ab956515.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/ripple":"14.0.0-canary.3ab956515.0","@material/animation":"14.0.0-canary.3ab956515.0","@material/elevation":"14.0.0-canary.3ab956515.0","@material/typography":"14.0.0-canary.3ab956515.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.3ab956515.0_1650898973818_0.8073828362179278","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/drawer","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0-canary.53b3cad2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"355dc804690dc515fb414c5c86fc716f2409cd04","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0-canary.53b3cad2f.0.tgz","fileCount":47,"integrity":"sha512-MXzRGq7NoONgbHa+AhAu4HvOUA9V37nSsY4g4Alita08UqRAvvFFr4K1CF9GI2K9pLCpyQv1UbN0Lw5b78HrVQ==","signatures":[{"sig":"MEQCIFOnVupGbPN7i4SHe5uYsGtbRHCqQ2o+sBMC6MtGZmzaAiBmKQHE561Es+YyFR0s5j/Q6EYW/wLfnMomdAl58GRqvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTshACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8vA/+NxU3NkYZph+vE4w+hrZc/0xUoblK+HBUt4rDmBlFDADES9LP\r\nVBTgVJzmlRPtV6eYRF31QV4wL0VkrL4LBz++Gvuv/+hN4hBQ69fRDzMENMXk\r\noYyPQMICQGjnELhI+IoMSsgl+01uCsau7LH5u0y8BXPa7oSc//2T/rz33PmZ\r\nV4kJaKyS7ga8E6c/lstfS6DOMuV2R97QSMr8EbwgBNWpHwyKEpJ9Ca8sFVc6\r\nP12a3ow77KwRTYSKjqaSmEbWaZ0IH8LUc+MhVLxMGGozyW68/90GHWj5xDXT\r\nTr7SAYwvljIUxVDLEqxKaRYuiAZA55UhOOFWuzXlLT6ie+0A6oq4bxOQ7Dl6\r\nRlQUxNfRodwKLLGgw8CM4rmqqwZbX3d7zIqGOrJySeb1QaZC26o3ruxxJsr4\r\nj0DznZKA5QKaOXwr1WAIIqqFgn7+QSHILYwDVgxGzt4+IWLAeDfYOs4EaFJq\r\n3L1A+OAq5kUsqboLMqY9wWjelD9wEnn6SuIWJX7vzAaVdP5yUnBru9nyP/wM\r\nOAVFl0fDQvS4W0B7gJQMiArZWBc6NaVP5xxzlG764/vDF/u2rTmJqwWmlAd7\r\nxM8NqTzzu78SMThInEsdAN7kQkbrjy6bdzXh6PV0fQqlbBPyULXnw76iZlhR\r\n5Q9CRgVdBVwF8FGM4EEXxDCA+cfmuUl+8mA=\r\n=6MFx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.53b3cad2f.0","@material/rtl":"14.0.0-canary.53b3cad2f.0","@material/base":"14.0.0-canary.53b3cad2f.0","@material/list":"14.0.0-canary.53b3cad2f.0","@material/shape":"14.0.0-canary.53b3cad2f.0","@material/theme":"14.0.0-canary.53b3cad2f.0","@material/ripple":"14.0.0-canary.53b3cad2f.0","@material/animation":"14.0.0-canary.53b3cad2f.0","@material/elevation":"14.0.0-canary.53b3cad2f.0","@material/typography":"14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0-canary.53b3cad2f.0_1651063584796_0.642318085142932","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/drawer","version":"14.0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@14.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd1421bc45a1d8824f8fab7f23893997d01580ef","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-14.0.0.tgz","fileCount":46,"integrity":"sha512-VPrxMIhbkXVbfH7aMFV+Um0tjOVrU/Y65X2hWsVdmjASadE8C5UYjIE3vjL1DM1M+zIa3qZZRUWqz0j1zqbr3w==","signatures":[{"sig":"MEYCIQDVIVYFPyoGrcAYpQ6bTeEoUxemQd4zxyq3uKbBlpbOSgIhAJIhVKgp/jGrdAMSyfo4dKeyxRPFhtq1F/Nn2bRQ0Wk8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasddACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcJRAAn4UzlJe52MgTQKaLdbj05HdQecY7HobGI9UHdHPGSPsen+Dq\r\nccNldXC4JqODTgIJlCGkJPLAeavjagEG7fZUHDDANnrXPQPeSfwM7s2Cc+5w\r\nQc5MixSv/guaJhIlIbU0Sl1fvAz+sM50jo9Fv5ZqQcOT/hXHpyoYMn4UO6Qe\r\nCp9smriuirvBEwnUFJdnLrxRtDMk1bUG28LbxQm+5+goLVU0hdbg4/Di8RCe\r\npN2rZbW601CFjywZDpUIvjr6T8KBMEyeDZZhhP+AECQmz9ZXo8MO/WIlOMYy\r\nSifXg5PRs0NdpkQcQtbUWCyQWLcDiMFLOWgLXPxTqsn5szCm4VF8ugJ4Gvpb\r\ntRpZM/nTDa0n4sHMr0BBgOXOc/MLkM2pF/ZwzXpEL+eQjJR2UXuBSqxO5nsD\r\nry42+VymSXVTM8FWLiQaf4nyb/GK9yYuMCL7uPBjqyRrZAxLT9jxHI1AkPe6\r\noIcmhwrqc1efPzVUbZWytuMx7koiXJORvhESZVzWLIAF4tKpPsx0glA0pFyL\r\nUaHw/qrxZNitYzQ92ctb1YENvcue2SRP403nTW4itEBsfM+5SGhv9dB5C4+U\r\nwSh8bYF30MhhBOQ0w9yR1mW6cXlBT9X//DFHq3a4TWsmh+mtDofB6wq+Sygx\r\n6pHQyQBALAUZgnQFm802067qFm4DwQzoN1Q=\r\n=gA3V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^14.0.0","@material/rtl":"^14.0.0","@material/base":"^14.0.0","@material/list":"^14.0.0","@material/shape":"^14.0.0","@material/theme":"^14.0.0","@material/ripple":"^14.0.0","@material/animation":"^14.0.0","@material/elevation":"^14.0.0","@material/typography":"^14.0.0","@material/feature-targeting":"^14.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/drawer_14.0.0_1651165021553_0.17046810758005337","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/drawer","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.432c815e5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5850d5febbc171fbfa2c3cbeb1d7582bc63da12","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.432c815e5.0.tgz","fileCount":47,"integrity":"sha512-6+Mrs6RD/B4WkHFckcbHrvsLnqmoly19uQPU6WIv3ORrmuRVRnvMcWwihq5x2I+kCYnIhNWhbivBc8EMsImsQQ==","signatures":[{"sig":"MEYCIQD4YxKo0fu6Swm4hEVggKnS0ZRorfgYuTvVaqfsGdo4VgIhAMmyM+r3lisAWp649EyXPdYzpKOUro5Lou0tmdYqONzx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaseaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqV9A//YUhqHTKH4fBzP4/yEW4sRbNRgHMGs9tbZDPh5vOjETXimY6o\r\nFjY12UiiL57PDEEQxFAcY4D584bpVxT+qAfBQQv/QBGQO2GSlCLYi4sfJzYU\r\nEbxbGQufxr2v101BKVznKBB+yEmZqtwuaN5OsZZE/0Mj5dsCvJkxHJ3b2GyX\r\nPSm5D9Iw+XFRhq8EAuwEMESz0Wb8hPEJ1fq03KrylCJJOKsAgtC3lJpGiLMQ\r\ngHaqspr6P3sj8K38ZBJpRw500WobrQBoHgevuukSkq78fWUMd0GMZ/r+HiyM\r\nbiJyl2/yIwUk233RPF5AEpfFL4NQQ9lTxybWIpZobQKd2tsng7he8jL4whxS\r\n3z71WJL9ajtTjQQSlKUGKgiYtJDvsffTGKxQtc6FFjkIYWHAyAKmVcxoxJZl\r\nfEKViYexr5DZodY2A/oaO/7TCPKq4ln+puAQNbxpShGu593uQQJvfzaqpmrM\r\nJNlSD2eosKWUu0s4t2qYnAwc2AZHhp0tGVU33MjoLFp7GOnX5Ciw6Xyrybop\r\nxgWD8IP7Jk1lZYTStdMlAE25ILcy8F4jGQmqfxt7N1EzvrVumRzaTmNUJvXS\r\nz9juhW0nA4hbBWmIlqKKNWc94L0mLVk0aV2K3OBRfOYXgvMe5z4k66Q3DOkJ\r\nwgSj1rRkGZ+E27T/Zw1svsEco26hrTaWcZs=\r\n=p5IS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.432c815e5.0","@material/rtl":"15.0.0-canary.432c815e5.0","@material/base":"15.0.0-canary.432c815e5.0","@material/list":"15.0.0-canary.432c815e5.0","@material/shape":"15.0.0-canary.432c815e5.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/ripple":"15.0.0-canary.432c815e5.0","@material/animation":"15.0.0-canary.432c815e5.0","@material/elevation":"15.0.0-canary.432c815e5.0","@material/typography":"15.0.0-canary.432c815e5.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.432c815e5.0_1651165081775_0.8854270555859436","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/drawer","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a0f01f669.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8129be60eade5f526b7705a32660ddc0443c753","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a0f01f669.0.tgz","fileCount":47,"integrity":"sha512-DsY8EJP28nZor3fRq2LJd0Ak7XQ2GdYVpV203sjal3XHYJewuU2whTJ2uIyD/8uujCBDE5qoJSnHNVomsbc96g==","signatures":[{"sig":"MEQCIEzlU2YHD7pMLNy72N6j3mGcNXHpgT0Nz7VYhy8qPjdoAiAva4/UKn/OKFiU4ZpMKsE7Iy0ELj5YSHQYwMdLIxTnqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYHuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6rQ/+Jd5FtgZjhXE0tahr8f9wHeXUygybHKb0ANVuOC/9l8nkAoNa\r\n0w0iPQOWNmbzlc4TyyNUVXOLwdIj//PlohwI3cmbU3vnPbNFP6ZHzhxL5Bqr\r\nLiWqjLuppxBA8u1kwZq+3cc6CzPo2v6IWJBaduA3oZ+WoZFHGMAJPVmtFL6S\r\nBrHSo6BY6uxqe9hOAn+Mba4cQcLE+HIPftWzgTDm/qC0h5b8vBZ3Ku64i0nc\r\n8HhfGEbcbDdm0qlnwSqR2p14PI15M2H0weqCsgv/2OSHKJhertaZl0OXPuOF\r\n5WQsNMwNYdlirp/5+6LZSouNdZFhzzeXLvNDm9ZOkK255mUmVysGjIzxJaFD\r\nd8hCfwhAvBLtYr5Lq045m1cJQLGT2W+AYtseG1RRMqFyr37pB+LwdPQVEFpo\r\n35R4BuNRvorHkE1KL1NQxj8RBRfmJTNur4brJAoBYmS2GjRCh7w9EDtdH7O5\r\nbiL9pa8Uwy5GVr6woLtGiyduUPDIv2/FfGakfE4K34d18EodHQ9zijieOE1K\r\nHBwzHFEU92RDXfSVCNulsO9lzcQkmNww5gSG0TI3boY1Bj6qKdQVD9kKfTba\r\nHUk94oevTNnfVZ+cMUTOYjps9ZwRRB8R2HkQXvzmD7vXuF4o4iquAqn3LREP\r\niAKt3dZiitRednnwrVCGooSPbhM+guFe8w4=\r\n=9rYg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0f01f669.0","@material/rtl":"15.0.0-canary.a0f01f669.0","@material/base":"15.0.0-canary.a0f01f669.0","@material/list":"15.0.0-canary.a0f01f669.0","@material/shape":"15.0.0-canary.a0f01f669.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/ripple":"15.0.0-canary.a0f01f669.0","@material/animation":"15.0.0-canary.a0f01f669.0","@material/elevation":"15.0.0-canary.a0f01f669.0","@material/typography":"15.0.0-canary.a0f01f669.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a0f01f669.0_1651868142667_0.9487218319609256","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/drawer","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.276cb39a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a97b949a205a2d599cf2bb6426a0842ab72178ef","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.276cb39a4.0.tgz","fileCount":47,"integrity":"sha512-eBxK29kXfTsWpYTvSWdX1tgObJhtKu5cJgWdftQTAZyIVAUeLfeFmB1O1jCad0/bvur6E6VJpCA8EgjOLhdaNw==","signatures":[{"sig":"MEYCIQCgttinhTTgA7V4zTMIIaNIR3vuCfhzYSk6K7daPTFrawIhAJEJF1P3NnJBt5DXMyZcj+PoRMaa4cusP38izDIXSaGS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZPwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoktBAAgJ9nf62RKoCL8CUAVfUQ9PAJAT4WCnHx14vFaHyytcpjbKRs\r\ny4zyhljsAXRVSh4L9XiSLkHZVJ0KvX90xUIHXUc9BHCV8gW1ZHiV/1hHFh4v\r\ndCAc/CdwxbN1HaEUxtcZs+v+WMOISDs7LIxdhWT0y6Ah22cogPsQ1hk0tV4u\r\nD6wjUJYF0LJc3dS+h6xgC6dXRQFm5C/Qsd4CT7AYnEoesFzGIOY++LnIyEjg\r\nTMYFa3UwktKGVNLNokMZGfRQNNs8yumEQ/gXC8qeqY57nt0/fLfsHNcepOzo\r\nG31tYYXQ5cv8GuIDaIsVyh0vHi53wdHtebrvT34I4LKmbLNOAC0/nyOLeziZ\r\nIZJQXF5OhNVchzoWIgr2eNQev5l2HQI8DbRBvKkEPXyvV7U8wXYPPl3Vsv2f\r\nlwR6OO22nJQLzsy3FSVQbhunJuE5/lInpvcQnMwU0rkebMJ6DJs6CL893gkJ\r\nNQY1vzTKqC0uVDIsmsg0357l5pi1hLTS1Vemtai3A75b4d63UpdTLunYDUbN\r\neXwLccqp63hzWIjX/X31HJpgSQH589RS9QUPPxRyXod48PJLfT4E/xkmhPBQ\r\ny+Pa286/cBzb1Q995UD9uzy7oZ3ppi7tHZpn+yh5fhp+1a4CxvsKCEiITJJS\r\n2zURfGu4tDetWuSdlsUzfKK+yCcRwpc19Qs=\r\n=OEI1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.276cb39a4.0","@material/rtl":"15.0.0-canary.276cb39a4.0","@material/base":"15.0.0-canary.276cb39a4.0","@material/list":"15.0.0-canary.276cb39a4.0","@material/shape":"15.0.0-canary.276cb39a4.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/ripple":"15.0.0-canary.276cb39a4.0","@material/animation":"15.0.0-canary.276cb39a4.0","@material/elevation":"15.0.0-canary.276cb39a4.0","@material/typography":"15.0.0-canary.276cb39a4.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.276cb39a4.0_1651872752343_0.7263276787665207","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/drawer","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.4fe98ed70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ce743ceb6a01099024583d5f2c0da7fc4aea45c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.4fe98ed70.0.tgz","fileCount":47,"integrity":"sha512-zCjhm0COY3oV//UFxfPXTgqsK9mdoO/vHVAddCgpMiwz9tSUI7/4toXby8JUDJv4hEsGD6QkiNcqW/nu+6PxEw==","signatures":[{"sig":"MEUCIQDIwl02S+nYEFS+cE2QaJc7Di7X5ROjNdDw10ZuVjEB1gIgEu2L2Hq5/6/bLTpb1sgf0CwJ7lnjf5vcsVr+G7ZfomQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZmuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDug//Q99tCR0UraOzyoqmWW62uasDl/H549oQz/jICv1qUc2nToY5\r\ny1w6fe03/+332GIWClIHzyIUnm+6mioBny23CKAJwxzpwKiLIlyOriRflJJG\r\ns+KvzPvfi+IM0yAOBenmceoib+mpLy8luTaoJ38GceZbK3B7uw/ybAZTPLkq\r\nPBHPTt2y3g65QfeCRWytnfeLBmtu9Pe+sbVXFALrrpo835jsVdWvxFfxk2Cq\r\nq2KidpMdUKypdWI5Wu3z8N+A/foGD26u0rlm8TcikTumxOXyPSSyBTdDLLVS\r\nAGbEiTnm2J8NbuK6K1FRXzpq8qxMDlPIsbLcewRIL0z8FmgCLt5fROXMkCmV\r\nEi8LA8ZP0CpSYf5Lniay7oLCe20M9txbMpMAgy2XpBfc618BcRTtWYFkvQTt\r\niljIihW1o7ENygee1rhKNpRSrSvrsx+9BsY77IPsC0uAIQ1U6G9dz64OPcLF\r\nP8ZR+zSOII4ryp/+MbwgwG/mQ1M6cbJqZX06Bzynush4BYWw2SWSoUbFYIfZ\r\n+DiQdIooQnVd6aj5wtFVP+X+ztt4iPr7JI8r3HDHvy78eC1tgT6Qlw4zQi+c\r\nT9pZfJI6IkCcmLBCWEOFsm5FDgNdzGGs9QAYuothAE4V/FBIhbR7bzHD1652\r\nVrHLL4GV3UDfqsTDNPoP+VlvRGnTwwaDK6E=\r\n=tk0P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe98ed70.0","@material/rtl":"15.0.0-canary.4fe98ed70.0","@material/base":"15.0.0-canary.4fe98ed70.0","@material/list":"15.0.0-canary.4fe98ed70.0","@material/shape":"15.0.0-canary.4fe98ed70.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/ripple":"15.0.0-canary.4fe98ed70.0","@material/animation":"15.0.0-canary.4fe98ed70.0","@material/elevation":"15.0.0-canary.4fe98ed70.0","@material/typography":"15.0.0-canary.4fe98ed70.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.4fe98ed70.0_1651874222166_0.16159711290547052","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/drawer","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.58b130a3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a2eade16578094847494d3a7534165306c6b3cc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.58b130a3d.0.tgz","fileCount":47,"integrity":"sha512-qI9Z7du+tjd1yLMeBrh1xC64DBwLCQn2RCdlZ5JccGuJQSrqhkvJjtdoLlFFhcJ1jgN+cI0Q+DAXXBcz3X9BCQ==","signatures":[{"sig":"MEQCIFdM4VBbvZkvGdZb7VwvGobY22vmchoz8VUQk4YfvsvWAiBlR15RssojmW1kGPsQJcFDaAhc+27R4Twf3v/nmwlVJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZo3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJtxAAn9SJs2VPPTFHogvLgiFgmrAJK3F7XUAhUoix43pBxx5QKxht\r\nPzSuXtvJTJiwCB9+PId7qZrl8BKDY9FKJX4jhYOAM8+REbmVvO8FQsNfmEa2\r\ntToNiJrmYQVBbB5h1USLJUh7H2HhX6Q7U0ahqGqHZMTqLNPpikuJGWgDCF6A\r\nw0isMmkcanvTF7b33fXOIV1rEVCtVrc94SPyY4TW7gpL6OlevlvGtoPFOPtk\r\n1GwYj9hKU9u5aAnZGN3lSQmiyeVzA699tLWufx8ggc1X+ezfpIEP+VDgLydp\r\nUGYC6HDd2HislcbNlDZlROQK1pAK4vyb/aIuW81SQtplTMo2P1lVlMu5BIHp\r\nkXifdN5CYBDvII5RKKwFSokj3bIhUpfzlo8lgct8tyDVGMfMHk6jEyKIqAJx\r\nryFV+t5IXhrgZv1sn8c8nfZv1oCX3+296FT4fk0aLI7e1Wu8Nghx20TjtCu1\r\nLz1PMptnm/+PV6ef3Zk5IoAyYD52AemJFlWKyBzTuUiP1BdgBELh8gFqvVaC\r\n5kX8DsmdAkexGabq//YqysNfZS1kX88AB3KHNtwSyUxjgmrdUCateD+816+A\r\nKETgw8AMpdOyjHMeCecI2OPht8IGFDhzE2QO+ttAnx4dS8UGlNTtjaSF13wW\r\nS7VzwgvedYUeBxVJvNCQrvuSOZ3XUNWKyR4=\r\n=uobf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58b130a3d.0","@material/rtl":"15.0.0-canary.58b130a3d.0","@material/base":"15.0.0-canary.58b130a3d.0","@material/list":"15.0.0-canary.58b130a3d.0","@material/shape":"15.0.0-canary.58b130a3d.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/ripple":"15.0.0-canary.58b130a3d.0","@material/animation":"15.0.0-canary.58b130a3d.0","@material/elevation":"15.0.0-canary.58b130a3d.0","@material/typography":"15.0.0-canary.58b130a3d.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.58b130a3d.0_1651874359682_0.9100006981623923","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/drawer","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ae278a2fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d5b4bfacfc77fc5bd43223b01ab32c30c734d96","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ae278a2fe.0.tgz","fileCount":47,"integrity":"sha512-iBgpb/kPmETEMZKsPi8iG8GuZawDhqvl731kDpFRl1Xr9JA/IzR1jsdIchMg0MVmle4DLICqAnGuq0X73qsTqA==","signatures":[{"sig":"MEUCIA2C56VuhIVd9TXOeF9Qx2avuwekFlQiKRSGoTTIhzwFAiEA6sfoUXO+F8A/GxJlAlzgm98kNa3va0PbFXbkxQNxupU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTKEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquFg//feWiFTmVEh0nNx9butlqKThCSAdcPhPYpKPvC/6UaQGHYlco\r\nJVZuZxJwQG0pUuXYhqvd3IfDIUium+YuvTaFvdC0f3+0LdmKEv4TefzWVCby\r\nE+TuJcMd3J3XTD/9jrDum6ga+e5wgXAgGg6G3dT0Zc0UCJwEROoQ7pZyRxBv\r\nY5sEH+uPlJ+eDOsILNKm9mJ5s+zwPquoOJRda7NWNfqgCxttrBJayotIvxP2\r\nDK3bi0UpcSQCcTYhVmkWEZcS7rhhsn/GEZcrKVw7OOKDQRVWxOEp+6bj8KRB\r\n/+pxJJE2GbLipluJUEj6sEvpXUBIHNwbGRXbI8ZRLvSr2HiwbxQPWMCdtSjl\r\nO07Dyw2hnE/JL09exc/D1yE4WdRc3TjkVUi6NUKix4S+eU1FViU+wbQatwTx\r\n0kmeivsUFbuT7LDOkjlHB4uCelStcSiSZA/lKdviZj4vmxjKxol3Mg26sH48\r\nD+jgs92p3H6Bpih2mR0pbJZCr8F+w652nh9AIr+C1LRYeeIDPwmtS6kjI9zy\r\nTCAg/fGDr1IIXtD+8w+3NwjsEc0EpEm9vrZMo0aYHRiBtYe0+vIgU18ZgSn7\r\niAin1M5TRXuwrbM704ws4SfeLvUWiv8+nKb0FXE0cbon7DfwJBoI7XfnEVDe\r\njAxSl9FTIW3PblNlil+hLDLrg0vMjkVbpyA=\r\n=d/tM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae278a2fe.0","@material/rtl":"15.0.0-canary.ae278a2fe.0","@material/base":"15.0.0-canary.ae278a2fe.0","@material/list":"15.0.0-canary.ae278a2fe.0","@material/shape":"15.0.0-canary.ae278a2fe.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/ripple":"15.0.0-canary.ae278a2fe.0","@material/animation":"15.0.0-canary.ae278a2fe.0","@material/elevation":"15.0.0-canary.ae278a2fe.0","@material/typography":"15.0.0-canary.ae278a2fe.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ae278a2fe.0_1652109956106_0.4190672046677051","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/drawer","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.bebf5bfdf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ccf4091b20bcd07072308b1ae08780391e9bdfb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":47,"integrity":"sha512-oREfxZNNaF9vwceSJzevHIEpkNnP3qzICZs5jQ9i2ycsPsHdfusjCYQLgzNjdJJu3IntBVH5yW51zwqBsMWqKg==","signatures":[{"sig":"MEUCIQDey84tki4/jrPKnRRpfmiZkF1SxlR2NsgFalpfujJnBgIgR2QcTLsg5zYvr1nXN1wy4ipCvKvJEsAcr57OqqmCjcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyJRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjFg//RhUN/o/NcUAvYS+2JDLUtESm5qITyNYLoJqxt4oCpPLg0bUF\r\nVMDnJo48FkT03Yu5WTeyVdU+A/qJJTEHFryX8Ddkv57eVgZgF1EE8pSSxZRD\r\npRxxLXOetjnf/0rpno/77DYtURBfPTRZXxUJabSsjkFasWE4OWWucdX5LPxt\r\nA+B02DWLSMgetm1JGHAJeqLRsq3fMt6bjHI9F5COaFBHM0TrnSs0JfZ/HqYA\r\nMrauqelV5DQiFlMyU6hw40WuFwqlagNWYsOQqINRQCrzfMpxue2OfBUa+XWq\r\nR7WB1BPdNsq13qps80jKJpQ8OeeolbypE2vxrMZB+oUs2Dn2VH3oW2XtENw9\r\nEAB0SOsRM+0ObUbwb7uErfnLweyaKRZ7gdiH0FJXR61Tf0naqXqXfKVyu9lq\r\nfRm2J1FDGnvaKO1CxVRotrR/XPXCC0Xm+if+noc0p7KARhVKadclrA2WkeTD\r\nAOGGWxfPsKndROmZ0fNAEK3cxwTP7zRqhUCSFJ+tMyMoh4s0FV1dMWBDeEkR\r\nHxb76vj4ecJyD0xByIz3N1f5cp3vQjRXAc28dDXKbXfZZajK9meqBnYGu0Jv\r\n+4JqFDXp9vwHdXOQR7SMH4YzJPRDQObUxdrTaNUHOBzvKTafscntu9rI3wKn\r\noZ/Rq4T9Ov8sgt0q/kMKXFioL863KKKFuEg=\r\n=Z2nu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bebf5bfdf.0","@material/rtl":"15.0.0-canary.bebf5bfdf.0","@material/base":"15.0.0-canary.bebf5bfdf.0","@material/list":"15.0.0-canary.bebf5bfdf.0","@material/shape":"15.0.0-canary.bebf5bfdf.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/ripple":"15.0.0-canary.bebf5bfdf.0","@material/animation":"15.0.0-canary.bebf5bfdf.0","@material/elevation":"15.0.0-canary.bebf5bfdf.0","@material/typography":"15.0.0-canary.bebf5bfdf.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.bebf5bfdf.0_1652236881610_0.11411525733407668","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/drawer","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.e6072cd6a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abc962303d56dad4b9f1beab8aa1f8185ce9bec1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.e6072cd6a.0.tgz","fileCount":47,"integrity":"sha512-oX0wYYhMiluRMxbzSDezmcoDX3tfsRTOTPj4Cv/fhX+XUXllX0MK28x+q+mhe8GSoejTfYW0k9El1tSmAsMlcA==","signatures":[{"sig":"MEUCIQDSSvtAjhiIqVTM3/OCprV+NBr4R8AzJ7AVjyTIGZzjswIgf8/7KqRax2vTWkZD2N8VwPQRtNf17ICugrzy6yWXLuo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBpUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopzA/+IyjkCXZ1eMAvEwARRzvXlor1bH71Vn+HVaOzLiFrXOY9cpab\r\nW7lqhMm7X7uONKm6MN1KCW+aMomh/khHb5gK1myBHxHLDEQ1auPU/yxJs4wI\r\ncmgYhlS9JCpvKttP2vkr4uoIm4aBQo0o+sgLATmsb7fOfp7FL9ve1zjcegXD\r\n5m0EA+ogVQvfOM+snKOwbTFbWGrt3el8ATLWfe3dongUlpa4Bve6iXJUq/Aw\r\nbu1MM8ggQbdEIBLx7gEMGpBcFrxIox2mWlTv/iugm1M47WNvzR3e9kx77/cQ\r\nth7YBQAyyAXFKMk3wjsYqpJuucvY6T9v5kaQxezs0lFhpdzJWVoUwXeaqIvA\r\nxY2YuLK7ScCffJGu5uBL+qfGKaShtQ26IJUoTaguP0iCoOGw2v+F8Gv+rRLs\r\n0+5dIpu+25uymDY/bkYEYW1C+1keeja3+QMBc4kQGw+fIWLCaMh4b+y9Bl8y\r\n2CHf7a0Ol3ZnurHgYNWtK6bueLXvUJIC4AwkZPeCw1ne0sucH+N3Vwk8pyma\r\ndbs7yuJx9Ff2dY3d0xwBBchNnKzR/zw11OJeOMtMpdHFgd2BT5H2iBNbAOCI\r\nwSjNaRXdLcxUSYeCz7kDfvWXzxsdXuqe5HVNeD91ATXPkfM14Uuuv5luocsD\r\nsiFvMtiJqCG0uQ3iVY9+53eULOu9/W/SDnw=\r\n=9AEE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e6072cd6a.0","@material/rtl":"15.0.0-canary.e6072cd6a.0","@material/base":"15.0.0-canary.e6072cd6a.0","@material/list":"15.0.0-canary.e6072cd6a.0","@material/shape":"15.0.0-canary.e6072cd6a.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/ripple":"15.0.0-canary.e6072cd6a.0","@material/animation":"15.0.0-canary.e6072cd6a.0","@material/elevation":"15.0.0-canary.e6072cd6a.0","@material/typography":"15.0.0-canary.e6072cd6a.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.e6072cd6a.0_1652300372304_0.23609635273799","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/drawer","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.5b40eb988.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e877f88467c099f35d582fc4bd35ed3b20ff23a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.5b40eb988.0.tgz","fileCount":47,"integrity":"sha512-tHTxUj3i8Srp+UikxfmtioqKMIowrplYOmC2jAuj26y6NN9DX0iWW/Q3IMxlBYlgjqrQQ2+Kpd8GvvCDS/e5kg==","signatures":[{"sig":"MEUCIFOSrymIahPhix69q4lNXc9+SgWhhhaULikGLkV7El/lAiEA3HUdO07gYK7dOaR5N1ijrSnCD2Byyjpa9u4d9a3awDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHS9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8Qg/+IVhmRkLrFjKr6AsptqsbxKiWA+W4fejfCZ11UH1FwLAn1Jw+\r\n3/9yEn7odahP92GItVDV3ys//6qhV3A6E0GPaZn67AokJzhO6oc7401cmxMe\r\nBYeO9qXSmz05/2vLNnWrOwZp8Xle8xV9gWSnndx65Xf1mZ30ZCuQW0gVrZ7Y\r\nKswJ/7pTtQXR9GBBy79WH6N6dORH7B9KcoBslYeXEP/DORokOLANA5WcAOYE\r\nu3L7ZKzO34oDSeR4NbXcFSx1w/dyQM6+omaN+bDG09kveoRGGvYCkisOzd6m\r\nXpJkY8Kvy+FfiQH1Bks1x4dsAGC0CHZj0dHHumJQRTQaH4UjKmxk8A2I6CvC\r\nUoAibyVllDl1Dk5ChmH2Lpq5Op1GeePrvfHJZ+sDcigt4UYPIeKcX/n+2Oqx\r\nFfMgqEmIgRCoCmPl3lTYWJx77GujUitYCnQ/oyb+pI+4kOOMZVEht6YrBd+B\r\nRh6rW5c7rDItceincpMQY1Ww+aQy/3Wy46moeOEHRvoOoRp6B/91qRmyqnF6\r\nJwnAcUHbDY7hyxlkmB/g7DFe0iNgyC/jKQvJsfE0f6uGS8S+QOHgaYR6sboD\r\n8sdZLSZ/8M9qk7NHIhlNOkaruQ9TgGIJg0pYovyDYcXBPklxA2F2B65tU9HL\r\nmFCWcxXCg3i6oME596TdF1D9dJ9SOYBS+MM=\r\n=1ELE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5b40eb988.0","@material/rtl":"15.0.0-canary.5b40eb988.0","@material/base":"15.0.0-canary.5b40eb988.0","@material/list":"15.0.0-canary.5b40eb988.0","@material/shape":"15.0.0-canary.5b40eb988.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/ripple":"15.0.0-canary.5b40eb988.0","@material/animation":"15.0.0-canary.5b40eb988.0","@material/elevation":"15.0.0-canary.5b40eb988.0","@material/typography":"15.0.0-canary.5b40eb988.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.5b40eb988.0_1652323516937_0.886346402562578","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/drawer","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.6a61d62f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"997adbd47c82b1f19fab7ed6486ca16514c38411","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.6a61d62f6.0.tgz","fileCount":47,"integrity":"sha512-KLZyR13A5pMBNXmN8AfN3hBzgiAfVrJCMcgcf/j/AVeaIyxStMwEPYChnKZVyoZcRypfgjTiScbydflOcWjubw==","signatures":[{"sig":"MEUCIE0Vc9cyeS/NCC6dy3h6l6ihzQ/OeVt+mVudtzBupKH+AiEArpeJV6D/PRcg0NwVFWZR4Pua0QC+KsgS6Z07x+wriiQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW3OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiKg//YWgEFh239VqcrnXEqqtuYPDCLWceDnIs/wIZi78M3dLq9hFF\r\nOdKIIOM8B2OKcyOZZfH3YjYCVfEfqyrExiRCV9yBk6QpJksQ8vW4M8qzpcQ3\r\n5LRP0Z+vnQ61Ss3k3MxPgV0E3+tk/Ksij1T9phmE5Kacrz909xAVSKoXmCna\r\n8kYvZz/Ja3ELVjhmGaAVgvhS5w73OSuovAwJO9LS1BwfocvnB5vjX2NGk+nA\r\nKmbjOHxyjQvAhop/ixY9PXcvH5TT0a60cfTtoTXSlKtuXlFWNCJrkV9UtVqW\r\nBiXQMHZ2r9eyEtAz31VqLpmLZ1nrXbdGzr7vGUdlQ257JOaiBymmC3bkRm3k\r\n5JRq2odSW2nauefbjfmhiclxOGnjk5dm74a5POqILHJiU+OQSjEeIfxZjhPF\r\nz64HP3KVTqbudIvSt05dtzEza08DmQ3zXPG/WSzUw5HBgcnxB+DR5eLSMUYa\r\nvD4YV6QQM+kAsxPCTgcBb7pT6Oc8HqTspHMNM7u+KOw90UMaDllBdfVHWDp1\r\nhAPX8VNejNlNbQX4jw9MuX8MYF0GQgzcfwp11uMi81JGlfMuOot+bLodtcMQ\r\nljp4VO+oxYsW0t66pVTnm1Av7Uk4/bilUWDu2JoQBcTnSZuNxNbcM+mKULTq\r\nku+Zbug+AVdVI8awbUZN5Tx2grHxOCpE/f8=\r\n=LD5n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a61d62f6.0","@material/rtl":"15.0.0-canary.6a61d62f6.0","@material/base":"15.0.0-canary.6a61d62f6.0","@material/list":"15.0.0-canary.6a61d62f6.0","@material/shape":"15.0.0-canary.6a61d62f6.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/ripple":"15.0.0-canary.6a61d62f6.0","@material/animation":"15.0.0-canary.6a61d62f6.0","@material/elevation":"15.0.0-canary.6a61d62f6.0","@material/typography":"15.0.0-canary.6a61d62f6.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.6a61d62f6.0_1652387278407_0.7035443124761869","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/drawer","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.05930a453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45c35fedc841f8fbde659f5fc28f737f6e095839","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.05930a453.0.tgz","fileCount":47,"integrity":"sha512-Jw9NeK7lx7/a5dTwaMUCzmTslzOqKaoZObKVDLMDpkPnJw2ikYeyx8N17A1xbMSbeLmiAwrHYP/wkcMpUXtybg==","signatures":[{"sig":"MEUCIQCPHnAZgWKTkImVGMoNaMaOsUqGp32fWSoYN1ExT/PbrgIgYqQGCDnbDmrj9YkVxNrENCXfoR1Nd572hIeaY3Bfxbo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqf+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxVw//aei4lae8SRD3E2+ZUmnGmdAy6IEukSTia68elDCt1gxkwnSP\r\n+xJHkbS2Ad8kkTzyD1TEqS8oHb6x+XMEzAId7t1/oBHpij1wh6pjHtiWTkls\r\nQ0PKtR2qar6g6OVfy9zEEDtJ5iaGHZ7pIkFt1U6u9855r4Rd7x9sWxq4x+Tc\r\n6RevrbWVwIB9o6nA4pUvx/TGktZ7M6tVZ4Wg9xWWMXuhMQNmPM7sK6DNByD1\r\n83MHw3ZvcQ21PkeDfHdmNHFkP6K0yY+cHg+sEvF3y3bX0RITRcJLR0osr40Y\r\n5vecqUqhWLhaCiwdyGkqVD/UBo2Uf8yBWx/z1dcNWYP10ZsmCebEdpUIus+s\r\nyJm5rQzUw49Yt12VaqLqhr6XkrJfDJUVLsVMxqDnBjf5ZsbTclLvbdHTeWAW\r\nwFrudxwP0FrNHxDZcJ9O+SGg2q6Uu3ZG9n4wCRMdPd8c1DJcnfKfRG9PdhT2\r\nfWq4AKYGHZjkzgQURc/BeHBtcz/dTPLk89GBBd9ylbb3T2JbUeJkHc16i8/Q\r\nJVdgd6/6B+I9azMWzwSVv1yS9JhxWNvgKdV/PwFcMV4KanafwNxs7/gu38ZZ\r\nO3t2Debcxzq7G6eFy0qA13FL9Ifo20y3LEALRThkBA5eDKGbk7ZnWqYKVyuJ\r\nbjF+0b3q4MIfqukaa+CO6DRU3eul1t+w9XU=\r\n=kWe4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05930a453.0","@material/rtl":"15.0.0-canary.05930a453.0","@material/base":"15.0.0-canary.05930a453.0","@material/list":"15.0.0-canary.05930a453.0","@material/shape":"15.0.0-canary.05930a453.0","@material/theme":"15.0.0-canary.05930a453.0","@material/ripple":"15.0.0-canary.05930a453.0","@material/animation":"15.0.0-canary.05930a453.0","@material/elevation":"15.0.0-canary.05930a453.0","@material/typography":"15.0.0-canary.05930a453.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.05930a453.0_1652467710383_0.7485236749304731","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/drawer","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.c0a11ef0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"428ab5862e5c1f5ee94d3295240075d259d5e165","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":47,"integrity":"sha512-rjCfNdzKpX4dCD6tox58GpBwRv5VMFwcmhGbeq963Yd0hGHn2pf6Q8YKnoE+gRe7v4EJ4iMg2TZ/Q0uDNXSbUg==","signatures":[{"sig":"MEUCIDGSQ1YeCbU4Z09YLVD0tUG4Ck2bFy56IEEzyzMz/2/wAiEA52eqqj6Vz3UyaaDM+fyXxkDgjbR9M7/sYFks/n1PABk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWzZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMAA//TQ+YLHT8v3elJk5ss6f5LGJW1FuNMZIPb6jzKF0yOE42RiI1\r\nyARNhTz0UAxWdONwPhB4PxPyoLeM7vLLrzu78wfzv7Wa4v2cX9RPjsEAnrM4\r\nIh7Fb2gBRGCz1tpE9tLeh7URcnwKAn0w1i4cQpWtxXEMofSKShfjvUlGDLoF\r\nzWf4FDgn5FA+/UJLn7mTC/oU8FMfBTYMOZID6HNFR15mOTfPaMgZf9xEjKPE\r\nzKl12oURnwgPcOZHGyiAhkLlXH+JLF7UQN7vSZvSMg1QW5CAS+BBZApnU9X5\r\ncKgQWypCDqbDEUNnjODuPLMqL666A2UZV7QPnSigoqMH/HtFWSt/u6jlmmxf\r\nBJIw3GkEx54WVtiURPFRRPFGV5fzJ1AAbahvP7qXW4m4XwUqv9vpmlfbO3co\r\nGgUMemuklmW8SoltOCBzpGcxCjB0/8N92Xpr2AMIoXQXnFnfAmYsFHiATNgA\r\nIg57Z+58rG7kqYH3Oz7blbo7oTRQ9AOI+oGUCUktvApporrFzncOUntGZwuM\r\nF+QVXWh3949tojWItT62EweqoYHbBpahHwvZpysGWxKEe1HojbAnNgevX1uw\r\nrvNWT4KgWwPuE3XRaoT8c5MzUK3itUXLdhRRkGu7GcVXgrpIULsqk03G/Aog\r\nge8V1yEIC7f2D7pvzk2h6b1AAMb3YuFn7OU=\r\n=wB4r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0a11ef0d.0","@material/rtl":"15.0.0-canary.c0a11ef0d.0","@material/base":"15.0.0-canary.c0a11ef0d.0","@material/list":"15.0.0-canary.c0a11ef0d.0","@material/shape":"15.0.0-canary.c0a11ef0d.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/ripple":"15.0.0-canary.c0a11ef0d.0","@material/animation":"15.0.0-canary.c0a11ef0d.0","@material/elevation":"15.0.0-canary.c0a11ef0d.0","@material/typography":"15.0.0-canary.c0a11ef0d.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.c0a11ef0d.0_1652911321697_0.19033102722080364","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/drawer","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.2f9b268c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"274a0a2c52b67494ccd37e1cad3f50320887cdad","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.2f9b268c0.0.tgz","fileCount":47,"integrity":"sha512-pu9AgDkQpr/Rg72yFIFX3U8mzoES+eOxBdHKJaa3zp4aWboocjMMLBDNYkL00Rnl/5OdesqhJjdi/nMyPxx2cg==","signatures":[{"sig":"MEQCIDK2ZG7PgAvasY5kMIiK7KblZBAYXP++sMjTnVhr3tSPAiADTsCHCw24UBC0q7RLxTBC2yysAsPz4POLNige7jXOCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+0VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtEw/+PzxjKcGpBbXB819keKfNGqmt7BiLitg5YBroQsLfnyjWNxP9\r\nQbQ5bi/Z/QzivxlXo04cHvpJ4F80TMvp4WaIZxYe2yoptyEFhDyVQcvtSiew\r\nRYwhy3rdTJCevfEPu/gg2RzcrLO+/c/jD/IxPn83nhqp9hHD9mx3i1+nXcQS\r\nG/D+h//ZBLlIVH9ATkDJQs5F76QZknlHF2G9yhnb7zPEwaR6wbk8uebTO+cG\r\nFjHyK31ULf7ZxnBxl2byvLQggXfEHFen/cJL1Lkv5KV8nwiGLCESjeI8LUKm\r\ncorete/5nNKstXV3D2AOcNaD3AsAz+m1gep27ookxD8Rsz6mkh5Q737Ow/ma\r\ntpR61ud6uikXo+tD8kPV6fMEnq0oM7rUvSX7sba7B8uF+QP19LMSTeVjSDyQ\r\nalsMwgivjzy1NKjCrkSdZJQeO9JtWgfqGeSvy8IdpHizHKVi/aunXRVdHwL1\r\nsdCOXR7Gfzs8LVKcCAI/v3as7ret/1qq6IPYzYy8p1O+7YxeJYcwJdj9Ina+\r\nutHVBAKbjOio8n1bBkkRhSiKaPpf5lYr84qlSSgKL/6TKtI0O8KZpOvGOMsM\r\nwnl7z567Zs2ba0ylKYpU68XuVuPbysh+2r0RUDA3lCBIYRvFhp0VAyqBoKA+\r\neSALR2Gv+s4Q/O2clLYjI41zALqlUghREFA=\r\n=lrr+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f9b268c0.0","@material/rtl":"15.0.0-canary.2f9b268c0.0","@material/base":"15.0.0-canary.2f9b268c0.0","@material/list":"15.0.0-canary.2f9b268c0.0","@material/shape":"15.0.0-canary.2f9b268c0.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/ripple":"15.0.0-canary.2f9b268c0.0","@material/animation":"15.0.0-canary.2f9b268c0.0","@material/elevation":"15.0.0-canary.2f9b268c0.0","@material/typography":"15.0.0-canary.2f9b268c0.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.2f9b268c0.0_1653075221682_0.9049278527246003","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/drawer","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.7741345b8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f117add6eba040740c743bd0e04b950e77e388f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.7741345b8.0.tgz","fileCount":47,"integrity":"sha512-G4WXneDnFobY0XBh88NKJXY81A2gTShlbFMoeRNLCctvckRGwYyMB3qEQfZdxJVFn2cZwEr4UZSTJqet9KBg9Q==","signatures":[{"sig":"MEQCIDjP4UOTfLbPcbriEY8BDKlwipSrsNA6Y4Sg3skw7HAPAiAM267IkmbAmBgTJZyXPz2qKh2mrR4T5KmuBHc9Ghdh8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/QiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoIw/+NjK5jzPdnPK38G30TyjT4g94SLRsx14QZ0hb+YD0vXrgFOO/\r\n4NJSOkRg8UL3b31pNsAq1YtTUNDLwmHxI591BcvN/UQZeGGN8h1+yaNwaStb\r\nZMrodz6562Tp65HAyEQ5PSK/HmjFltLEQjTamVmGy9J0t4WXyPE7CS5XOupZ\r\nbXtkrnLMtb8jLRrgpij4o9JFPPC9vdjsBNruCiH3GS7SJcB2V5jE8ERKGwTC\r\nBJvjHUv2s2F6/Z0WWiC5PdqWvAfB4jyNq3EqqfeqOGnCgvJlWdT5Tjxr1SaR\r\neki88K1bno/fZ1tNb4Dcb27J5gUchM9eC3kv6qYbENW/wreB75JcNFZKLKdN\r\n3CziGrJ8siUaW8dnKLJ/+9Juatta/86oAQA09uQx8AR+d6j+ZozGirTofjve\r\nc7UnnOP8eYlsSNkdxOGSJ3yC74SoTjTBMqS+eDKTsDDZxx1V0sCQ6sFaUfhC\r\n0A+/JI09HzBnrHHg6Vm4sTYkVsxP1vVWXBxEHU42tP4jCQi+cY+1dfOcqJ0Y\r\n2zOmkGADdBrpOgtgTExrjGep1eZsoHUenVn12TcfcmjnDcxY8XSJFv3QWIBC\r\nOLwyIVCR6Qf8wuFTe7kU1XdcgpKekyAKmGBjg2Rs9MjEYPuHbUElrB9GrTlk\r\nL2ANpb+T352L/vF3DGOXoLHEhS0cbdeo2hI=\r\n=6Cm1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7741345b8.0","@material/rtl":"15.0.0-canary.7741345b8.0","@material/base":"15.0.0-canary.7741345b8.0","@material/list":"15.0.0-canary.7741345b8.0","@material/shape":"15.0.0-canary.7741345b8.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/ripple":"15.0.0-canary.7741345b8.0","@material/animation":"15.0.0-canary.7741345b8.0","@material/elevation":"15.0.0-canary.7741345b8.0","@material/typography":"15.0.0-canary.7741345b8.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.7741345b8.0_1653077026688_0.2734898877280374","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/drawer","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.f807e793f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db0609e422871d641a68bc8b4f1cf9eff4d84f38","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.f807e793f.0.tgz","fileCount":47,"integrity":"sha512-X63dX39akYz6PG6h/hIIPeMKiN7sbOW/HV8+lDh/bcLtU0UNBUg97lh/cVjccc3Nhrr5aE0L1Fj5gqEiE/NaFA==","signatures":[{"sig":"MEYCIQC7Hlep8ZCIafxeyuq5/e38B1tdMYq4Fycit88I21vnWQIhAOIhYh2h/EI3MXssTruFP1a2JWMSP0jdFOz5E2/Mb5e9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBS5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeDBAAh4TPh2PZiE8MTGsYht06Xd81bWVZIrpRoFWOOW/eBXuF4Z/W\r\n2pyZ7URjxDevUWdC9PwpoY/hFzdCq8cCQT43olvzb0q4+QSpIsEupMGtVjQH\r\nxxLLV1/zYWOPkpHHPvpxa/25h+6Z7bLr9eVpLqFsSyWWt1/GI522/qMd9sFh\r\n1sKDgZFnO4VWLBmhkg1zPl04D2Ao7g3KVqmHqZ2jy9gBJ5jG5gzNmxyQVWgJ\r\nshS7TkPqVw7RLbk4Zfum22nU1MC8bGA2oO8P7uXhW1TZkv/JylP53vFjEbVC\r\n5e5rHxFuSOyUkzQBlSkLl5vfAbmyMmDpzpMXtRVDPT+LWSfuPKZ8sGShEn0W\r\nBo7PWH3UvW2djAla5SXIRdy0h+U32VJ4+02Gru7S7WSpE4e2I5oiUSFY3V9q\r\nIpozPW746lrJMCq17ieM1y9Rh5puIJdU7jH40IHAIpEEPdYdenoboFuYC2mv\r\nbUZ7HxiMAcN7xkqY5FhCUKmXOdnejFqDxWtk3nt5+sKJjVFDPAaBd1c0GKZL\r\nlzI2aaiK8hBwMoDhvCwygSO1KRZjEu+qYHbS6DvJFBQj5U+dUHAvycGAdzrA\r\ns2WDwwN2otRw4hxQSxJH2ujk+vOToyZS3nQiXG2Wova1UxbCgNtK7v8U+x89\r\nJcxe/PJMKiGofS6R+fUlfOXAx3VxH7d7pz8=\r\n=R4eS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f807e793f.0","@material/rtl":"15.0.0-canary.f807e793f.0","@material/base":"15.0.0-canary.f807e793f.0","@material/list":"15.0.0-canary.f807e793f.0","@material/shape":"15.0.0-canary.f807e793f.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/ripple":"15.0.0-canary.f807e793f.0","@material/animation":"15.0.0-canary.f807e793f.0","@material/elevation":"15.0.0-canary.f807e793f.0","@material/typography":"15.0.0-canary.f807e793f.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.f807e793f.0_1653085369001_0.316503332406707","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/drawer","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.9f53d4a8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42e48f4f5315c7b8bd753e9272aefb6c081e9927","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":47,"integrity":"sha512-//lAMLdNCSwCb+3BrKpR9hRtcNgnA3oW4ijdR2JTg87WMUNbAxGea6zfgQrIZQe72YX51P4zXIPMavxWQ5aGqA==","signatures":[{"sig":"MEYCIQCtc52vS+YH/shD0XA0OFwCn0NlBFR9uUx91Xli2fhHrgIhALSjut45UcbjGSECNEj6n1iwJ2NE8iXacR7R4q5S8RiD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6ErACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgaQ//RDHOTNa7neJYaq0SiQbfgWq+vIMfe69+VNOIOTaRSIfLswGv\r\np5UA9zloiB+NaNOUb036VxczrLUCGdIMuv+5uHbAWUet4/LeYQDZT4Qv5EZe\r\ni2Qkb3Yx4b1haQsyASRvZ22Tdsc0DKy89b7KlnvlWQ80qht60ChtOp78LldM\r\n2kvCv5VWf4HfKEYPDgWJZ4tT3fIzszIj7/VbZC0YXrHDOYAdcO3jibW1cjP8\r\nkGlLzcomKc/9C+nnuWMtEARPrjvDKkJNQFk8T3wVw5UbDT/BXIWpwkfweT/F\r\nl6YZSuUqeNwgkLjMplGxv1xklJimyzjIDhiPUbAVMEP7+fhRouFkpRo/Es0o\r\nMD8BMiO4VziDxJGi+EL4tO+vwOUOMB5FFnUzQAhFpLE5SQ11v9j6uyaJCfHO\r\nVKZCabARsLVS07VRHzNo1LGGFOA3gRd15nTz6xrzHLBRgbt+C+fEdL8xcjuz\r\nvmS7LO3klAbdmgkZnPpSPsj1tENlD+/3H1YN6twly3AnIr9QUE04uFbPsll+\r\nl2Cqd1OSByZF4hWdHIfIwds7pygPqf4iXKvvadl0W+NrEV50PZUaP1VIyk04\r\nIiDoRo2wDA7NIREfgUi5yZ4U9fS8VcwbfQpFksl3P0BxjY+icq5YBUQbqDFx\r\nrC32fyoa5wC9ldFEk65WB6ahoS9OzKxAlLY=\r\n=q0Km\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9f53d4a8a.0","@material/rtl":"15.0.0-canary.9f53d4a8a.0","@material/base":"15.0.0-canary.9f53d4a8a.0","@material/list":"15.0.0-canary.9f53d4a8a.0","@material/shape":"15.0.0-canary.9f53d4a8a.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/ripple":"15.0.0-canary.9f53d4a8a.0","@material/animation":"15.0.0-canary.9f53d4a8a.0","@material/elevation":"15.0.0-canary.9f53d4a8a.0","@material/typography":"15.0.0-canary.9f53d4a8a.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.9f53d4a8a.0_1653317930830_0.9467250313021736","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/drawer","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.77cf00e37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d772348426b9ed0e2a22b24d6008efa001d20006","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.77cf00e37.0.tgz","fileCount":47,"integrity":"sha512-vhyQorJw8IIjyLc8ZTtlLVrRG/mwg/6llajng898k3v+2nskpLpx8VI2uoSogvEFsUolSLbj2VKmoChq3AyqOw==","signatures":[{"sig":"MEQCICy93MDjXbEH8+W45Wtkmfjjysfx7L72KTk2enIayhFvAiB0us7Hjd1Z2+sJjUu8vebfITTMnyL2yehLEuwI2gfHCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillM4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfDg//csUfHJNX2KY2qCsOyGPKlgmxyPgJvWDodvKQ3zt+vF3yYFMM\r\nmQMi+mShPQ8a5TbWVWjCjLU08JIk+HZ8aOyQoi1QODeZvfnholNlB0Cc9gdF\r\nhowN1ebgcSI9TdfxlXiMLCBgbPY4pfc2M/4D/YwonMWsnOGuxrSAXDB+gu8y\r\nEwfUvDIkGORhADoXShCyMujpuIDRC2MVhUfR2jJaHN7cJE6tU7ekaZWOxyHD\r\nNim2Y1ckX4v5n2sQim3nPCrG3mhug8FtHgzyh4QDHon4VroYSsMsT9qx7A1o\r\nwoJdq/36YVSCPxAfZKatdvasAcTTXu8mtx6GMjpRozBPwjX9m1uPNoMjFkYV\r\nIHmkrBZI+cqJao3UC2PCSJFIU17Sy47zxNWdlPY7TnCRFY5cOtBpfrJWG9bc\r\nl1KAzV/+nGI0czvmeuSougzhmOkIqZRq5U7z4XH3CXLSoojDPWezZhDZg2Qm\r\naksETdwKxP8IL7vFEpHRSFlRfYdElxvmmb3CTIMGJRGEXf3hq8bUqCIVD17l\r\nJtX/rc61BtYJjxlQl0MhuFwmcUpq3jB18f3fULPmCs5zIfVrmijBICyuwat8\r\ngGADYgaVuG5ssMobnj4fzJElW/deg9vh6IE2qouh9kEoUTGIxNyhQJaJSwOw\r\nz52PCQr2i9MMY07iKYlSyKn+rWch5exxaME=\r\n=RpS0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.77cf00e37.0","@material/rtl":"15.0.0-canary.77cf00e37.0","@material/base":"15.0.0-canary.77cf00e37.0","@material/list":"15.0.0-canary.77cf00e37.0","@material/shape":"15.0.0-canary.77cf00e37.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/ripple":"15.0.0-canary.77cf00e37.0","@material/animation":"15.0.0-canary.77cf00e37.0","@material/elevation":"15.0.0-canary.77cf00e37.0","@material/typography":"15.0.0-canary.77cf00e37.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.77cf00e37.0_1654018872342_0.01720932555513066","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/drawer","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.3c7b844c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d213fb772170915b70bb563490d4df5f54d10f23","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.3c7b844c2.0.tgz","fileCount":47,"integrity":"sha512-njLRlqhV1Fkrt1LP+U7HvLG61mN2FtpjukDu0aFT1MJezzfUELOZzxzSuJZMf3y7+VhE/EDVBQhbZI+RrUMM8A==","signatures":[{"sig":"MEYCIQCOOLWNr/qADccXPTK8S1l1pDv6WcKA3fEPot5iu+VVPAIhAJGOU3y+dVbPjL+2JP3x6lcAUGFQwMnShTkMAiYOd2oH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin8+cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQjQ//aavIJaxm6+0BELaPH5KTuJBJRWqwwhlg2GmvV4RVR94Wq9br\r\ncpEVB6hffafcy4LcdPlFB5MlQ8W0TUk5OllN0NH8q2XVPDQMHQcQNB09R3AX\r\nV8UkAzSdb6kurlWn58KwBy/NFxDmZZSdCGNBJeBKr75L3MvIaj0EhA742IqA\r\nkJjr4PdtUbR/lrC8Tf9DEfX8vIBflmC3wumSrLCulcNa0/8U+Md9bp+Bn8SA\r\n8/foh2XZG9MdKREpReeZLUt31BN9EV+2TbYX+oDxlCblhq0ZOOeAZot1ovHy\r\nqOMvwS4FW+h+9gadhXM8pr7V7mJKm3O+BYmtxZDKNax4KgYZqb9kXc3vEPE3\r\netxpcZ6UJSQyl9cgi5uHQRCUgx065oqglXdfjrwdUGXx952X96OLOgOlxO6c\r\nswQKShTOo39Z80ySY8/MhSOSu4zYwgXxbYYini+6WzY/qmVnhgcbQlPJxoch\r\nwAfdSNbDIQMegCbGKYWsLbZ3X09oI7YtegTHXcIC2Mu+kVf0us7/9bVO82JQ\r\nUuPgFDhkWfrRL1FZcREAyzA38FsTUv3atm2kvJMGP203fjgSqSjHHnorWp3b\r\nTFm+dw3t1hryDoeE9nE4W6H7dqVulmN7l84JL0+ujlUddLPq1kpkZku75Q36\r\nkKTFJ2NE0y55TvgpAP46HeyCkg/6ZwJKnss=\r\n=e3ES\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c7b844c2.0","@material/rtl":"15.0.0-canary.3c7b844c2.0","@material/base":"15.0.0-canary.3c7b844c2.0","@material/list":"15.0.0-canary.3c7b844c2.0","@material/shape":"15.0.0-canary.3c7b844c2.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/ripple":"15.0.0-canary.3c7b844c2.0","@material/animation":"15.0.0-canary.3c7b844c2.0","@material/elevation":"15.0.0-canary.3c7b844c2.0","@material/typography":"15.0.0-canary.3c7b844c2.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.3c7b844c2.0_1654640540008_0.7131788200700422","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/drawer","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.df47894db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92600058eda479a7e882f6388a3fa3977e58aca2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.df47894db.0.tgz","fileCount":47,"integrity":"sha512-ph6dUlYxLP2o+IkCR6anvAZyA1tWdMk1XanN+eEgD4JU2BAGcTMlsiPM63o+nrJ52X7FN+wTIWzomRxSAn0wnQ==","signatures":[{"sig":"MEYCIQDS/aCTFhFAy1G6BWiE7exeVphuP0P2QAVh58s2l99owwIhAPGm+a9V0f8QPUwGO0q6fkaJnC4sJIpeXiv++34K/W8Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip293ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryCg/8COcjCGEgFH7mfBFoXCf/SbeROpeqLgobwnD6PMnBcg8tPzC2\r\nhk1PtyhjQGk8ySb+0PSRDPUYOEkQjYjqF3Sqw27+rfGWQKiyABTVeAlLit7+\r\nuaYXdnqZzqf7nMf68M7ZYWkInbVBnVLUqEn2k/5PaOhdh2BroZpWzRpShduC\r\nbuiay3+0X/hVlo7fEAQ84j9TIava2YTGDnxIIuDcZnGy0kSc4iKisnrcOlmF\r\nrtD9YnLGn0GQZiFLHXDgSzbveP0E4sT5qvxkSm+jEOy98bzoVh43zL+/alwG\r\na+qcvKA+viprym55vmajHjZBZAeoXOoNYLMWyBjukKt1INVtQLlaoo5V3HOo\r\nSFNJ+2HexJd03VWiOquWprNZW+UVl4Zf1l9z31OZv1rI7LUF6Yy8Z03+XRdR\r\nedCZ0esg+g7pd5bUOErTthXQusRrVKSotumGEroHYAspQldY84DopPC7z2vl\r\ntdD97/JypJj9otYA4Mu2S+/EWdRQqKXUzo09xFaGlieUhPw3FDrS/znyvOFD\r\nXr3KTuSqnxJV/oOdjzh516Dkkq9Xml9n0TIyhIfr6v9XjuiUz4kXD+vowJ4B\r\nUSWW6ATLMJlFByeMxpfftq7O46b7mU3U77EAtxIJT6N44Rwre+mCOmC/4SQC\r\nV0XDyoaggfvMLDFNQlPIWFgSjHMHwW/TEWo=\r\n=qTND\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.df47894db.0","@material/rtl":"15.0.0-canary.df47894db.0","@material/base":"15.0.0-canary.df47894db.0","@material/list":"15.0.0-canary.df47894db.0","@material/shape":"15.0.0-canary.df47894db.0","@material/theme":"15.0.0-canary.df47894db.0","@material/ripple":"15.0.0-canary.df47894db.0","@material/animation":"15.0.0-canary.df47894db.0","@material/elevation":"15.0.0-canary.df47894db.0","@material/typography":"15.0.0-canary.df47894db.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.df47894db.0_1655140215432_0.5768985062877752","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/drawer","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b18a873dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f70d932330bac01fd10a4b83d5cf4128b5891e98","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b18a873dc.0.tgz","fileCount":47,"integrity":"sha512-2gcx+sU8HJDwCArjcR6mmkkzDNHaBZgOOupl8u7SlkXwOH+3CF7akYWNMQHT/1D5cko9P3xuIEs4j46wQRFYgw==","signatures":[{"sig":"MEUCIFfzOTPqJcUE0vjNBAbOdgdG9UsyZhleJepAlAkMePnuAiEAzkta1o60WwLL6wVjpZgUHSQD96UVCenobx2GffETp0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCs5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpP4hAAlLUE0reqUQQUeYnLSEiBe7F0EXGQsufzHzWY+Un2jjiMS62T\r\ndgsWZPdWNYfj/8ww8M0T7q2KCfDnPTNt0idGYwLE0OV+ZrHB8IRYQHKXUDYe\r\nJZIPGbCsn+Q8ZzF+Y7zLzURq1e3a2H7rPC152P6z3YIladYYOsLAChnhNN4N\r\nT83ODsx2BJFr3Yp0f78Od+45v9eFxTKYCrB5LFO1jVKJc/wyfmTZyPDsKOcX\r\n1rro+GTakChEbmyCKi6jGEiVKj+ctq0FVlXGnQ/vHQmbZ7Mpc1eZPFfUlmtG\r\ndnL31tRRBJU1kDwUDUXaNkuHwA5JHnclsIhgnkU67r7D1PWQBzq/9i6MXIJW\r\n4etgiL4HQHNig1+z7BKjARD3iLJZqbctlKSmQD18UpHRTgHJGywPbQ8FH6TO\r\n2gXjiTuHGsgoc4fYSsGro1wtMT8QFExrbvuf6/E9BZ0dL5ojSrE0FIomlDQE\r\nhNCjnaUNkOIXPqsFDwMtbjEPImcN07zIZ4I5MIRnycWCIbNRJNLmjhFEfc5/\r\nIbF3yokueXBcfw+GLldzDJfOHAzmPZwFeXWf3yu3nkz1AEU3jVgXt0/oLrxe\r\n33dZGP+3WCVVIkVLTE0h9vDvQn3vovaMcefn0ubKsJ7+vfbovZf/7DLL5BjC\r\nRnc+S3gR+Q2X25h4NW4HlN8jmU7k17fYL6I=\r\n=MGVu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b18a873dc.0","@material/rtl":"15.0.0-canary.b18a873dc.0","@material/base":"15.0.0-canary.b18a873dc.0","@material/list":"15.0.0-canary.b18a873dc.0","@material/shape":"15.0.0-canary.b18a873dc.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/ripple":"15.0.0-canary.b18a873dc.0","@material/animation":"15.0.0-canary.b18a873dc.0","@material/elevation":"15.0.0-canary.b18a873dc.0","@material/typography":"15.0.0-canary.b18a873dc.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b18a873dc.0_1655188281464_0.6574538381126527","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/drawer","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ba9c29637.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88d3c4dc0eb2e4c0f5b4b6d6ee2bca4f055e4eeb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ba9c29637.0.tgz","fileCount":47,"integrity":"sha512-by9pLEIuNHWFwznJKl8oBXenQZIFqoSlyJb6Mdhgp17CxJl7ckCdTcbl1GOy6Bdy/O5mg8oG+DltnSPjnrF8Gg==","signatures":[{"sig":"MEUCIByvFHqRMul3Zb53WooUh0TOue4cQZx4QSVOCq1rRnIiAiEA52JTPavFWyIf5eVsJhcKVgjcfuqo5fkK+IAFX7HRDXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNptACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp36RAAhBH9VySgTgW8tD3G4WKmdpyaZk9p3Z7jx/Vm4iQ3j8Y+qhUD\r\nMBttvsMJ3XRns4y9aFMWoQBdjBUD1bvlrIRShO9jheGQHFzps68FQfsFE7yV\r\nFJwd2V1uyqUBIgM+nM8MMz6sRXypxc6UGT6HJPf8oqCoCCvvicA83OlBle8w\r\nR3HrintI9Hk8yD4hk3S2pO2Gfhesocx84JYEda5MXwseelKeaMqwNHojaM+4\r\n1KxGIWEzBVny9b9dK8SHEAEO1WHgADd/V24u1g1fqCQvVYICIGU6dwmIMjsL\r\nDRm8k2NK6yg5nqggTunAz0XbCwVfmOZFRKG/EnENzfbbS791vybaRQVAcpmN\r\nlCiNzJqRQKMms0kTEPOFBkCV3n2EpzshUkAvFp3lNNmpiTg9byQcxleM32w8\r\ndSvnvIxfFhdFDyuHszQzzQQEMAZPuucoZOmWDjiW746JFQUgoUG4bnBsqTo5\r\nzq6fT3bYQyiNfJ2vXeCIyH09dgHhUVhKai17RbTJA/PQZhgD42XBTE0b1ji/\r\ncxU37nSKZa8/uiCYZHFs6A3Dxt22BZZ/t3zN71hoxnJ2Kz4Cl+b8MncoeDpF\r\nk2uo6Vh4RA721DbIn2xwcxJcZP6y1aYWAmSPSpsSXjuYPjVKPYp3fbPQ6W1F\r\nfPdWpQNf3iHW9nzeT840k4VG6615dl/9U4w=\r\n=N2fC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ba9c29637.0","@material/rtl":"15.0.0-canary.ba9c29637.0","@material/base":"15.0.0-canary.ba9c29637.0","@material/list":"15.0.0-canary.ba9c29637.0","@material/shape":"15.0.0-canary.ba9c29637.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/ripple":"15.0.0-canary.ba9c29637.0","@material/animation":"15.0.0-canary.ba9c29637.0","@material/elevation":"15.0.0-canary.ba9c29637.0","@material/typography":"15.0.0-canary.ba9c29637.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ba9c29637.0_1655233133595_0.7411687734516363","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/drawer","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.9bfd12f01.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22b486a6e5633baffec1fdf390c6886707b09507","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.9bfd12f01.0.tgz","fileCount":47,"integrity":"sha512-QYqf3emSQvvCSakzXmaz+63QoxOssYtcTthvdM5OBPu9KUE35gcraw+Sn+4NIHeKpE1FsWHb9Y/JXvZpHow/6Q==","signatures":[{"sig":"MEUCIQDgSvVUBsu6qP7opkzcA4V4jPVKNeCG+YkPEmyba+pzMAIgJhGa6kqzh39mKUz1Agn6+tAccTzaoPtHlhtVdaGT84E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2xVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrqfw/+JPdtt3FRCubI+ZoLzFh4qYDm/wA4d7sF030qag+kEWYtNMvi\r\nBdcRmSrPC13YHtfmSoTO3ww2GAdg+5Mufrxi+6flxfeAahoC178MtXMxq7Z5\r\nsi6ukY4XdxjT+pDH2VTHDDTJB6Lnge6zdf3RY1vUrVx/iX7kCR8D8hUC3Tpt\r\n2g4RAMujWbdf4GIqA4NUNZkuN8uMIAI1yiYj9sqIDdVB50IyRRZff4jbp6fd\r\nRYYjCLbu4np4pMueDIzv4UiU07nnWOiT4fmxZCirZ8J0Xy6xBrPIVkXm6zlH\r\nhzHXIIPpsFX8WpW9y5S+rXehPdRvo0smBwGIsbD0xUsHP4sp60NUKOJFPz7N\r\nsHx/F/0UIHAxlAfWeTu2t1ER42Cn/BtyEPLFRpT5NW27AOF3rDwI3e05rutK\r\nncMx4zlpajK3aV0ayHNIAeyaBciW7P5zDORAw5gBllJKW5O9d6s0g6j5gvOz\r\nDjnogWgk3uPS8WNCl/peOyegXEZ4BKINOQEmtvXMTse+3eTCbzXPAlTGbNhP\r\nVofMUv6d0cKXMsCnGVo3wM1uel0axHTBgiv+f5nkkm5uyHLzZhBL4AMZUrxw\r\nePPy6dthahTxZgFqp0m1kdyfTL3crOml4VgnY5eiPpLmcYebixTE3kF+DkUI\r\nz+IgTlwysfPZQHkS8GSUnlTP8LTu6t4hbYQ=\r\n=z81j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9bfd12f01.0","@material/rtl":"15.0.0-canary.9bfd12f01.0","@material/base":"15.0.0-canary.9bfd12f01.0","@material/list":"15.0.0-canary.9bfd12f01.0","@material/shape":"15.0.0-canary.9bfd12f01.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/ripple":"15.0.0-canary.9bfd12f01.0","@material/animation":"15.0.0-canary.9bfd12f01.0","@material/elevation":"15.0.0-canary.9bfd12f01.0","@material/typography":"15.0.0-canary.9bfd12f01.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.9bfd12f01.0_1655925845051_0.28267126871163106","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/drawer","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.764de225d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f0d598e59fb6c25654e4bce680b763d176c1a43","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.764de225d.0.tgz","fileCount":47,"integrity":"sha512-r09+oxarH33tb8Mo/vBeFPxGO24rJ+5GdrDfiHQ5j3tPJDNW1BTgxcjbQM6DQif4XmjE1HNXMWDsH1m2Ei14sg==","signatures":[{"sig":"MEUCIQDsyvpq409IEB7EzzY4/uVIdvXP1Ou3ua9NbBKy/aJ96AIgfCRqHcRuV94ZJY+Xg+yhmnGbBgu99/9dd1XzrsyvTGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH2xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSzQ/9FQdJlh7pjXMkSas9nDH6Jr6wT7Pwe4pllcaO+PAAtU910pt+\r\nvhWIzVZNBp6YSaVF4q6VJNAQSo/bYBVpOP4VlR03DnCsvz/hmJ2x8thUVEjA\r\nAmsLMzlOVQgxGoQUcZQkHjkuiGicXkRxL+jVUuw0YRAdHO8Udlwsi4yrZ03s\r\n5aa8XhGiDcXgVawLaVXPx2j3Z8Qijg/ey+puPUANRe1LMmFvcTzdNZQ57nQm\r\nTanYsgMxZLT9MIudqZIJezBT5xW9NsMAvKq3SwdlRW6rtR+lWC+I+a6FqG2w\r\ndrTayQY1Y/gQnQIaflPR9rLHwoLHIgvgc9wrzovSmOAzgZ0TwrxELTZUhU7r\r\nF/Cz3ngozZwh2XLyM/bTQfP8R4O+ncJ7jZ8Fxs/F88sE5F2LVGp+ZAkZdK7K\r\nskXn8bSgHRxQTDYYQDFJL6a7CG2lYvupsRPoNKmZQgWPrsthx0hcyip/TTCp\r\n+UPwvXBQgx4HJvkvDNT4OF7MoAzJdRd7KzOm22iS5oh8zYAnENXDoGiAVP89\r\nFSWQQgGBRaOmEBujgo1W4ch4iLR5XjIC9TVoXCFFB6yzpqXXWvgnU/Vjz6Mn\r\nbzxLZXIlztnbV5tjA/uf0wdbsY5JVbszWCJFLtPx4HilK5ZEUPioXjBwPTH9\r\nQMl+32jJsrvt3sr3P9xUutn1T/mSqNS3Am0=\r\n=Qmq6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.764de225d.0","@material/rtl":"15.0.0-canary.764de225d.0","@material/base":"15.0.0-canary.764de225d.0","@material/list":"15.0.0-canary.764de225d.0","@material/shape":"15.0.0-canary.764de225d.0","@material/theme":"15.0.0-canary.764de225d.0","@material/ripple":"15.0.0-canary.764de225d.0","@material/animation":"15.0.0-canary.764de225d.0","@material/elevation":"15.0.0-canary.764de225d.0","@material/typography":"15.0.0-canary.764de225d.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.764de225d.0_1656520113600_0.11150010567108315","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/drawer","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.31e517cea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a3871b0d0032b30b5c2b8b766bae5480ee8bb3f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.31e517cea.0.tgz","fileCount":47,"integrity":"sha512-C0cy4ndBQ90o6mvL3sbbh27YRZRpW5ILO0YiwJr7yv4UWxCb6Pq8S1MLlxpxivx492eebaYW8TO0MwBkS3zgzQ==","signatures":[{"sig":"MEUCIDXFZD0Qo9/UMiAJB6T2R7ifmKjszeIx+v19B599r8d/AiEAq/wV7MdTC0s/PvTCsYpKsWsp258y/iEtNouWwc1QTQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivz0hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVhQ/+NybGbpck2Hoq1480zDv0JY7HpTkA11tWQc98+cBB7vo1byVj\r\nL9uT1aQ5CYrCos7X8xgTsM3SHfm8hJ97jY6b5ToH7hd8Ed7+5/odlxYQChG+\r\nYUnbKDjqs706xjdDYW3SGV/oObwkKcG87NdNlOb5jH6zvq/2szoH5h/7B321\r\nD2797PCbR8rTVBD8jq+h37Xww5VUdHJrhB0f5T0xc/mssJLsfJ8gqqd/2fA3\r\nYcC8Z/D8v8/BMfOYhKjxubNeRBtf4bxCcbg0IwGGwCi913feXfM01NxjKEay\r\nEu4FRNcakbRKBtE5NyqBwAJi3BvJOKRAW7c7kexepX0+JR5666E9uO47jVDm\r\ntbhvD/6HbHRMWVTTRIdVccdWhXpEAez1ibtQlHwu0vdPkpWDGf0EZFZ/RreQ\r\nH3R4CJ2F1A4hGpMaYd45N1wqhaQ5o6n6Ldc2Nl1V4kG4ixh1ejPMdV6pCasA\r\nama5tZTmneI2GlrpkrykoO4BVUfFk35FJWB2UKyEFL3esDWxpUKqu/AvmB0p\r\n5MwOHUCo99QyDgi7ls+Fp+Y7StCuzJi6kL2ROpM95jBjxJcDU5Jr9fyh20Mu\r\n9aHZ4PDDUHA4PKzsBLmaT8IsPsZL/3fGfKRQGoUJuGtz8PMmC8HvYwnt5K8+\r\n2ELISU9T4tANP3R3Fce0WFg7ogIF6VQAwII=\r\n=TR3L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.31e517cea.0","@material/rtl":"15.0.0-canary.31e517cea.0","@material/base":"15.0.0-canary.31e517cea.0","@material/list":"15.0.0-canary.31e517cea.0","@material/shape":"15.0.0-canary.31e517cea.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/ripple":"15.0.0-canary.31e517cea.0","@material/animation":"15.0.0-canary.31e517cea.0","@material/elevation":"15.0.0-canary.31e517cea.0","@material/typography":"15.0.0-canary.31e517cea.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.31e517cea.0_1656700193272_0.7005443846873454","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/drawer","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.9ea4e8e9c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f901d510b2e6d099a253b4a2e11e63696e28f6b0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":47,"integrity":"sha512-rSDwY83D0HvAZu8pChZxPnyFaayME/krCMZ8LFJmJkMp5BPBeIHc33kXVUtuim6RXn+SimscfgyOlmKJ442vLg==","signatures":[{"sig":"MEQCICogdD1hBacAzVqYUII1ifLZ3Usn1SxIFllWECtNOQpuAiB2eIb4Zv9XzW60i1OILnutQRi8Yzmjo0JQUuO0ox6L7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3uhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpk5w//U1qbKJlUAgBDe3FlBTieke9rbNyQWDs2+Lcsl6/eEz0Q9E8Z\r\ndz3llKnaFqJ8aSMoBLBEK4a2Nzw4NH2I7MkTiugv9KjbCATRnajqHvQbwXbd\r\n/XtsHOIXgOmdkTRohAKV37lGWCh1j7Bnv2kpke3aObbE2a4+UJ4JrQnB60nf\r\nAZiDFP9o6Fa4O58bmkBPIbvkFoiAh0DfYAWcxWECGVOZca3yrDoaonCVrziA\r\npiWlPw3FASDfQ2L4buterakFXeSyaqyb8tk5egffLuDjdeFIdwudU2hZLR4d\r\nH1TScAyOxyxpCcYpVcR+GZKpCQ0POR6dXyWD7srPpOtymgccOsGP6sod+Luw\r\n/wlgH5G3Ox5fSG1Dun2OCMhqH9XQQtsI2VXSqgKc3MvIT2o+XRWMGr+D+EpO\r\nzLAB6pKGtxyH9ZHyczMz9bAsuXDV4MIt3HbVjUo+jJNfZYOD9dh/wt3NNT3M\r\nB/yFLiAreJyOEcoqJs/vN7cTVwq/KeakI6ESjD7WjNfnOUJ/okpnFs6PvZlk\r\nebT/mbke+bxRFcUnJZ2AJYR4MHuPS8tU9h5VVsbLOBUBcjdLvwO4RUvXYK/2\r\nz3u8PJSniUnY0JDUNtggFNAU+PHOUTjrU/GAJA29TTaqP5nbf9wrCP6sIcM1\r\n1MeufFwKfrJn5LmZZVZDhDX84qkfmhRdXpE=\r\n=t5TM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9ea4e8e9c.0","@material/rtl":"15.0.0-canary.9ea4e8e9c.0","@material/base":"15.0.0-canary.9ea4e8e9c.0","@material/list":"15.0.0-canary.9ea4e8e9c.0","@material/shape":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/ripple":"15.0.0-canary.9ea4e8e9c.0","@material/animation":"15.0.0-canary.9ea4e8e9c.0","@material/elevation":"15.0.0-canary.9ea4e8e9c.0","@material/typography":"15.0.0-canary.9ea4e8e9c.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.9ea4e8e9c.0_1656716193299_0.9656914759085438","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/drawer","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.cd5bafabb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc60204cf690c6949d44cc18d76196cf9186e2d7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.cd5bafabb.0.tgz","fileCount":47,"integrity":"sha512-/0GfJ+7xNJackHdTXxgFw2rK+LGOi17JnaQSoypzi4sQA1ook9IVImvWFJp9vfwNnVEpcHtoMZoz+/TJiJ/y6Q==","signatures":[{"sig":"MEUCIQDLSTwwMaq8KNDFtlReUV4WD6bqwiKmCQHVwzZF3U8fbAIgeXIOOQ9ZwhTM0bCcORFD8Z+n0WT7fYc225CgV39fha8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcy5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkiQ/+Ip1U+RnE3nOf37RV1EIlo6TEami16v9BCNselohaoWWvu8Qj\r\ngJbE3cdJNsRD0vnkqi1oqoVKvEjV7j/vjFbJU0hKjixaBTxHH17KOfs8dJJy\r\nbUnJ5rkvwSrkpLGtpTwxuBHalsG6FAIbCD2O3N0QAPr+3KGG4bnhmU6KU62D\r\nrYve1x9nLpZuIui/IGX6MbRtnBqKBf39GT0Ikl/oAu7et1f/728LT4ZuJxRg\r\nr21xePWbMPjBP9fxK7wTxmbBRFgDxRtWlWNqzMmj4U8NxlIjtlBZUgveo1dL\r\n7njlwuDGatIj8UCAgJo5pvKzVNDJSShe5jLqLXiaidzI63zoGAsiBBOGj2k6\r\nt0Ze5mW4foiNvp3gxPprMG+X9LJuuXtjLiVoVHT/RoPfMPeJqZy5lJIdz7Wy\r\nM6ekV5KmtX2PCCQuoLz5CsswgDIwO8IkJp2cXJzWlKsE7mbhhDRyYxmvXDr+\r\nq7TwZd3rqin6fJtQOd7HUD0wMB78sRGaSCNyf+7Lcy+bL6y7eB4T6+acf0u3\r\nKsHOrVjuS6M3YHZvmIWKayUjEpVkVaoPIwaApZutOzDzexT4+wNTWvQgnA4d\r\nOmOjIalGK54gOu+Xqo3r8MVKs8asXxmvH5+JfjU4WZEZrCNl8tGUtHQSkjcc\r\nkmuXG90uSv/c3Ssh7MWJxI9RIGz2eapP0Ds=\r\n=ltbQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cd5bafabb.0","@material/rtl":"15.0.0-canary.cd5bafabb.0","@material/base":"15.0.0-canary.cd5bafabb.0","@material/list":"15.0.0-canary.cd5bafabb.0","@material/shape":"15.0.0-canary.cd5bafabb.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/ripple":"15.0.0-canary.cd5bafabb.0","@material/animation":"15.0.0-canary.cd5bafabb.0","@material/elevation":"15.0.0-canary.cd5bafabb.0","@material/typography":"15.0.0-canary.cd5bafabb.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.cd5bafabb.0_1657130169351_0.9389775097826158","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/drawer","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a02fe49d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dc1f05b09557d4aff990d1f5f1c6db6401e3c34","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a02fe49d3.0.tgz","fileCount":47,"integrity":"sha512-P/i4+B06ZZgo20+pOkC5yfgSZvhZCkEKP2I5cV0iWu5sl6Y8hzdP72IV6AQf+LwZCJO5gm0BDBebEX/rrgTsAA==","signatures":[{"sig":"MEYCIQDW8qu4LfA56lIQIXU6C0nLHB7gXvFYsAP8FGQgLJ/MNwIhAKt5Txb4DGWP1sF83Eq2hpU8YdR2gBFlgcHu6micy1xW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdnzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqW+g//XrmtvJF2CsYbEua11QaK5NFaeTMcI09+EC8iEsFj/XbOje2b\r\nTLDApZkj8aoUIqY2bFrIf2BAUna46X4Cozf+ctjNzfJeRtNMVTa6nhW8gLtF\r\nwJ8ZxQTEG4KkgrD8Ocg5F7bjwXMktIdWP++7dr1xOTXpmPz86VhVObFVTAAJ\r\np3rvecrO93luFX6D54rGxHE6uWGLYynnCaep/WRvpuhxFTP4rithXKYO/GZg\r\nGOC6WSEiXtGlGUGSibFWLhrDhDrmd/a0djpDegvhIKytM30aHDX5O33yVLPl\r\n6AaeBP4B6tTrK8mREwNgeyH/LqsVRt98j4X7OqzVQg/ptKWnhTfFuiRyo+3b\r\n2N4TjzX8UWPOU/MnbIRzu6sGmN726+AWNziN6FeoQA/UQntHcWuP3w/SF4ew\r\n4VnQCglaJGhZ8piii/X90b5hcG2wnxdoOYM/FMYjNK9fhjQUOvm7mB9Eo9FZ\r\nLkuYumJXvQWV0i0rPuLlbuwKewxrXTTVRubst8jd1FzjMQqg/E5qt75CoUjo\r\n3IqF/UqB/X/1l3KxP9xo3PYOmtB3s0d8AQ3+fUkwLxtNcTDmispNDlrTjCA4\r\nvrVBA9+ibawRF65DfKMYf/vuwecmgvPvjABug1ywvAOohmCSzl2WF76p1HfY\r\nfOgOrlvtqntoEFKAXswwIp78XMXSmo96Fw8=\r\n=0nWr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a02fe49d3.0","@material/rtl":"15.0.0-canary.a02fe49d3.0","@material/base":"15.0.0-canary.a02fe49d3.0","@material/list":"15.0.0-canary.a02fe49d3.0","@material/shape":"15.0.0-canary.a02fe49d3.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/ripple":"15.0.0-canary.a02fe49d3.0","@material/animation":"15.0.0-canary.a02fe49d3.0","@material/elevation":"15.0.0-canary.a02fe49d3.0","@material/typography":"15.0.0-canary.a02fe49d3.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a02fe49d3.0_1657133555562_0.7268912807865286","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/drawer","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.826a3d8be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b784957d88604c1672420c0032e33d32f73d6354","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.826a3d8be.0.tgz","fileCount":47,"integrity":"sha512-Qc8T9ZiVqpru7gjqqBLeROYHJanMwcspqxwikeKIyUwwvB6jiWUbNRhsxe7eiw4ks16lv536O110lH9dZNypPg==","signatures":[{"sig":"MEYCIQDzkzpn3RRQDzUZzy68k/F2NmFNphGbq/RFNcwjG4lCdwIhAMMKMk+aWa2+h5xxuRrg9wUD6nI04errdD2NPxpWvEui","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeNQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFQQ/8C73basf5ru0oshuP+VvYOZyHYvF67HjFAQ4D5mY/VHzxFvyF\r\nmADiQA5uW9ufBDq0StLLn8Puba4jYGHZCdS7uck6cyMT0LdWnPz7Jw2beXvu\r\nvATxFkdW58Gkv4xr3OrJQrEkTBtlkJptHxSkF9dCrkYAUpXkeNpCieeTrG8Q\r\nSEqxta4U7C8LMMn0N0mke5kL/3ljgq1UdOw5YEov4H2VoEYWppfB76UdjDXg\r\nIayilTYKL7x91DkxEuSwl3AJ30J0scduTiRXkOMVrzmwd0txD9Gxk4FHE5p+\r\nA38QL1K50Sya1CLaIKxoyy1HxvvFNMpiqiAgSWHtz2HPcDlGf2xFdrh55Geu\r\n1FqrNPhJA6PLK2AJqbs+mSzyB4mCYuddtqvlbJuhgtLC0NgY+CZtu8C/i07v\r\nliRozuGAubycbRkc8OCzaXGtCpMKq1GlLzVB7WVn1u1Uydv/yNZqgDtNnyd7\r\ni3LrtYyul1SVnnIWukvtL/Jwv8OynCEdHLbTLmZ+6t8psosXYhYIIhPdQ809\r\nFxdpKKsP+If3o0kKXTFlbN0iLtNF6UeIk8vLllp3cVM6ptFO2XNWOKuk/vzd\r\nDCwPCkgPZyqh1si6hpry/zTzielw64DZ/CBQOYVQYXqhrn9YwceY+Cm6dkod\r\nM2tqasKuXxg2hbzOzKiyDHbjXYZl0LvTZM8=\r\n=NpCW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.826a3d8be.0","@material/rtl":"15.0.0-canary.826a3d8be.0","@material/base":"15.0.0-canary.826a3d8be.0","@material/list":"15.0.0-canary.826a3d8be.0","@material/shape":"15.0.0-canary.826a3d8be.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/ripple":"15.0.0-canary.826a3d8be.0","@material/animation":"15.0.0-canary.826a3d8be.0","@material/elevation":"15.0.0-canary.826a3d8be.0","@material/typography":"15.0.0-canary.826a3d8be.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.826a3d8be.0_1657135951850_0.07638591271165973","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/drawer","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ef276aa93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53b194e12672b80d95e92001a4524d111ba01652","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ef276aa93.0.tgz","fileCount":47,"integrity":"sha512-Ten/RDjR+aYaOplsYOoXM9v8/AeHy3tx/3eiWizvdD33Dx+4OeT7dQ2Uap6zbP74veCzGmxayQhuObzB7Knf0g==","signatures":[{"sig":"MEQCIAcsMjvQOR6Zoy9Rqvx1Da8E6NT+FEtZ9QrjgUSmkIAgAiBIGLBj54ltVYVydHlw07VL4/Mm0tVCu5OAmAhjWECSYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxITACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDtA//ZdloQ5cQJbDZstQ7SzCZOKNBm9DXLxe+Aru45kjeqbMXnvha\r\nsf7V+5bTPzEOEZwXhHkMlXXOhG5oHcwodyaPq6q6y5330SHpiybGtXf/I/8u\r\nkwB1V1d03wTb5JQKGYefGzijUJwLPACrKz/LDlWAmDlT9lYO8F8XqdFJ78x5\r\nnlnZEtEoLkuIIeNgEvjlkWRwjCq/ofCpv5Jd98/agtFkQLhX0tG7tqFjSFLM\r\nFEgZ00iaTtdkXtHuh3Yl6TQueUcB8oIrtEDsN/tEAyCdpupt76nxjcwkk5G8\r\nzn1QIBP6ANeXXozL/D+BxrMl3m20OHYmoAIMYVI+JxwlQH+GubnFoITybabo\r\nKOZwP5qB6U+5ilvISf6yh8iCxMXgnphSV1XKz1LT9g8GkRO+itysRKQOW+rE\r\nR0gTCK8mYECiBrqyHAb4+HdTut/qtABBJrFKwYmUZiCtXuQrTk7g+PVE+2Zf\r\nXfxgUG75PNdHxFXnrNcj4gFMIP4pSZ4CCNOpp8ZH2LDkcE8mB3VE5QiBjlZY\r\nm1wO8NrOO1qHPWpVMfIggoGhZ/qDEQbXSTi/7WphfzqPS/beRb4bOI9CP4P1\r\nlmG50qmnpXC6yH1DAIflsB+OWqfzBr261KlgT+8JBQ/Nq6E+HyxdRFg2xLt4\r\n1XNa8gM79wcyBVmLOOXui9ucd9MdRWkFGDM=\r\n=0BPj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef276aa93.0","@material/rtl":"15.0.0-canary.ef276aa93.0","@material/base":"15.0.0-canary.ef276aa93.0","@material/list":"15.0.0-canary.ef276aa93.0","@material/shape":"15.0.0-canary.ef276aa93.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/ripple":"15.0.0-canary.ef276aa93.0","@material/animation":"15.0.0-canary.ef276aa93.0","@material/elevation":"15.0.0-canary.ef276aa93.0","@material/typography":"15.0.0-canary.ef276aa93.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ef276aa93.0_1657213459509_0.7578629087806965","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/drawer","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.59cf61d6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5601f705a40ec7b1d4277e445c8bea77f52718ba","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.59cf61d6b.0.tgz","fileCount":47,"integrity":"sha512-iTT9eo+5e0ojyely2FRLe7sMf9ET77RnWsridLWckupxOBYiA1hp4Si2WyF2+zL3cSMoYyGdOlw4l1+mi6VgQw==","signatures":[{"sig":"MEUCIQDhNiJexIsDM3lGeVZ/1PsMgG/jRkRSu6sj+owkRownlgIgcO7yNEugriIMnYaWqyxfUSPaD4BO1oyxYnYsr1z6LK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxjKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4rA//YZpCBcVERwsEiYgH8Kt8UQDatV5qPHzLVoFrc4BtjndJwyqE\r\nw6ngVtsm9sGGCtnNyyLGyVnZ4opgK/Jei4W15cB/CFlEcv1uGzMPOcU37zE2\r\nYKzJyrv+JjkkR8VPf/jSFIkPHb54GGCTSbN5F6FJ93D8GqKwNU87R/d7Jy+q\r\nEeTrXsPvWjlA/CJtBcZA7RuXtlkEyiubCJtkdDy91sBTaPDxW6ChZeImaGwb\r\n4ueTc+87xMEetnIkO5g6pKZ+nTIRvoIIN+WkXEXpwZrsY8vSmfqp0sChK8sw\r\n6PtCqoRlqcVSRGZYXRyS//ubCFJ77QUIeZS6JUO1Ka1YBMTSW4T7kNWuS51Y\r\ne0P+WpMaEFOcw6BPSGiwK4WVT/VoNS4M7gvzyuqcEcVS0QV1GSyqo7lpAntD\r\n1Jfjf+xv5dqo3ESfiHTOHBlLtJ4KRQZdkd57BrhNTfJekkeax0EMaabs9JJm\r\n/qtrYUl1d+VIeJ2HOid0ugV9K+SdcleKsbTH83GA7mF3SPYCToYZS+pp/f5S\r\n5IHp/GhbeYAh+7lueeiSVf193rMYoS/uacisVGGW7fCad5ycCnlFoiVYY2BX\r\na/K9xFSH10EcA7SEWXKwwQXmYTTCS5LiKkgjA4QAjY/kLqQSFcwRs4+PKFfL\r\nYnnfqUZ3FYYI3lV47StV2OPxkO3/tMUEVjk=\r\n=Ijhx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.59cf61d6b.0","@material/rtl":"15.0.0-canary.59cf61d6b.0","@material/base":"15.0.0-canary.59cf61d6b.0","@material/list":"15.0.0-canary.59cf61d6b.0","@material/shape":"15.0.0-canary.59cf61d6b.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/ripple":"15.0.0-canary.59cf61d6b.0","@material/animation":"15.0.0-canary.59cf61d6b.0","@material/elevation":"15.0.0-canary.59cf61d6b.0","@material/typography":"15.0.0-canary.59cf61d6b.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.59cf61d6b.0_1657215178440_0.5041705482198611","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/drawer","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.8647092f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2eb5e496fbfe30e62bd06ec425db74a87eb45194","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.8647092f7.0.tgz","fileCount":47,"integrity":"sha512-CckFI+/XOPrCVkGVsKHKaQ6hX2+rta/Y1pmFqVHoE66glyrRRYOWHnwSlQODQ7Bt6LgDpa2nNpZEv/iDMesSxA==","signatures":[{"sig":"MEYCIQDY8KacibVnmJSWmy6m+GWYiOkqW0ksBBCFOYpQ/tf2SgIhAI0W7vFyBmzs9YhUSLr18kmp96zRE4WO0xiGs5I1fxyR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0SpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgmQ//UxWBAWYetvruLfUQ0NsbEWXybH1qgb7N9jMdTkQKRL4AWZYk\r\nb6PdiBhj6eUq+/B2/tpNkHdWdCffK5hR99cSAD4+X5DXp+NqnVLe2EXvy3Rc\r\nrfQCbtlzkP0a9601+5o7AX47Bz2ayVDr7gxpC+Yg4JVeVQS/y0K62cP2C+sK\r\neaGUvJZrs71/EFPVEHRXQwIbQPbGRJs6lYn66fCMZEqrLcLtFEPq6OOY73Vc\r\n4rC8KCPSBE9i7nx/4Ct97vNzG/zJXkAyCbwVPvjkS7dtNHJpB8NCwrgaY7hZ\r\nXtoMCvTn7fG9IuB3GoW4JtG9PQWsYe1SQusZCW4czKkUdoGxzehwGBYMfAjD\r\nFLoAphxBQTZwpZMpcR7MkwIk4wPhJ8adgli2bZRQFMKWbbAm7ZDOzDKVII+8\r\nPJiEsSNc8p3kuD8s7+mpX+oXjUjhZJt2hoqfN6VEfdtmkOZqqq5YRm4JfdM4\r\nsq4t00Ec5O6CnhBZxZxmRlLoaPOoxAfTYAdyKHPellbP2mnskQ3N7ke4A2sg\r\nz03Pch4N7ofmFnqBveNfixAXfBKNqSvKefs8o5gthbJYB3sk0G5Z81wnTxA+\r\ntXaiaK9kYHh91SUkh+vQmQ/Ny9QnexKXDKXA/oN3FelFBTRtrmrjH2biW1OG\r\nOKxDrbx0PXQ0PozawRA+8r4atEtXAFW7w10=\r\n=ciDH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8647092f7.0","@material/rtl":"15.0.0-canary.8647092f7.0","@material/base":"15.0.0-canary.8647092f7.0","@material/list":"15.0.0-canary.8647092f7.0","@material/shape":"15.0.0-canary.8647092f7.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/ripple":"15.0.0-canary.8647092f7.0","@material/animation":"15.0.0-canary.8647092f7.0","@material/elevation":"15.0.0-canary.8647092f7.0","@material/typography":"15.0.0-canary.8647092f7.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.8647092f7.0_1657226409308_0.44161833465044653","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/drawer","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.02ecd4d85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce07acc4a86ccba1cb8f92326cd2f4e38257d235","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.02ecd4d85.0.tgz","fileCount":47,"integrity":"sha512-mbBQGsESkW9LD4yh6lViEsG6L5sWQegvuzVSxDPgO/EQD8W0eO5VRYevDjp7U0h/CBXvpECYOPzMi+R0PQ8jJQ==","signatures":[{"sig":"MEUCIC0tCVxv9cmrFHMlGp20oh4lAlyf4haj7TntYuDndZcBAiEAgZyHAr0jwTqMAMZSaQJ163AppJzkQZ9gMAlZsVKapho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFKSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorIhAAhDX9zK7P+YhPxnoHUo512Ie1uFzPJniqAnL+tirB9V70MNDe\r\nt1EgTtvZh/qX8wiQuo5BIKwL1nxU1SXzxVCfX+marb/TkvKTrUMWIDB2JL+j\r\ngNq6rAbpBZMMQJZQ3RZixOjXZYyw2ciNjgW0zNzGs2YcizGu+EAr/DxMsygZ\r\nOCu5yAEl0P66NyFJD0Hw1EPgZybCQfMeAFFtroZHCcRDCLeO1hg1F0m6w/2N\r\nFnVNiqeSi5L6+8VRHJX4U6O8Ji5Rbs2zThUgUIUcDmEzuXP+ICpceEBd2kIv\r\nKR70RyU4CgwYkgmVYVu4da06MD50UFWaWGHBUfB/reGkTL4gLHykOQDrUxRN\r\nlGYZDUjEjhpj1CTTWWPaSci89fvPCGg1hhlElIijyvNbWT3HNzhAsJQysIjJ\r\nDtEeZQeH3Ao6RSCOWmLjoxwtAbdAtFpnfq1ZcCZS22dF84JYr8/MzeaUDKtN\r\nAfDclh4MGufHqSnics1HrDXK5ubOigYmj2Hl8HcBXzIm8iSS4+FD0nhkS/Av\r\nsBk6S20avNVn+yxnSivEGnf2bheMfjV7a7bmJDxkhDNqOn1Od4SJRwRs8qNw\r\nLjkhzUaNHBp0Zpqmh+CSfKdyyeK1GTYY2fPvySV9CVSS50BhO0T16YQGfPqA\r\nqpLmpIoNkhtNGnDsoXibdv/PwSyibUltGnI=\r\n=iGmN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02ecd4d85.0","@material/rtl":"15.0.0-canary.02ecd4d85.0","@material/base":"15.0.0-canary.02ecd4d85.0","@material/list":"15.0.0-canary.02ecd4d85.0","@material/shape":"15.0.0-canary.02ecd4d85.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/ripple":"15.0.0-canary.02ecd4d85.0","@material/animation":"15.0.0-canary.02ecd4d85.0","@material/elevation":"15.0.0-canary.02ecd4d85.0","@material/typography":"15.0.0-canary.02ecd4d85.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.02ecd4d85.0_1657557650647_0.21500335911519275","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/drawer","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.63d3a146e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a8d6cdb0cfee2783cef73fa7de5747ef9f89236","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.63d3a146e.0.tgz","fileCount":47,"integrity":"sha512-QtSsucBlitm3XfgAjggCfrU6V9w7i9LcW2vcnQAUJeQAl2dGzb1nGECCbWVhrgxG7SNJ0sarH+O9kE36i7YlYA==","signatures":[{"sig":"MEUCIQCBINMLGmkAkHMJoMOMCsGL9BlYMWm7CB3txMvDsyOpVwIgYfqN12moE7oeEFw/mnN9Xhyns7oLj1+PTDg/S+DLih4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV1DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwWg//fdlzvZGxfq6s5qUmmBv3JjlNmJIW6HPOj9A5FBrKQRhEydU2\r\nQUoxc64CFDImOts/E1eFSoXSV4gTytFW2Uqlska95RYD6ZNW74DCwJIg5WVc\r\nAJeEErqTQ9cLjw/NvWj8QLkjzx8OD38HUPm6xepRnwCdY9nq87emjVYpfMPm\r\nGLWKu07NkJSXUM7uaSU8RFJ++9uwbJKgER58VP67ZGWc4dvZjYP8Bb7+Iver\r\nlHvvJJuVP+LSzqQ8JduMi5QpoNpLl6mTL5JxgiQzpVfVh/slfg5xNzHDLN5r\r\nXDQ/AEzg/x6VwM4ruRpZk4MCrmvVpJCLFVME0waUJ7PM96hsOC7rWgIxELTs\r\nAPHvTJAyn1vVRIb8u6lz96tYKoMK1NxcUegFelnS0rkMlp3SO6mT1WKIi2Fu\r\nkeC3OYJTICoOfYLaBM4ELB5nRZT6N+kQEIPhm2ngDuLT/Tb7R8E5wAMtnEZz\r\nahRFv/jrDKqVMRQ2nWJqVraaQkZM6BoWTrxpsJ14hk6R8UfeYC6os03WWhrn\r\nLux8XaTntaqrvVo8vODTsnZAdlRCtvXIJqWJeR2JL4Y7BeB+WU53WckeyvdU\r\noQ8AC+c9q8QPKclAVok5eJ2x8LAwgvEzX9v2wr0C9t4CMBe2dHkdzTBuhrvh\r\nlU2RqOIowtzzycFteWzgCiMMXUZ0cp5xoak=\r\n=/mxn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63d3a146e.0","@material/rtl":"15.0.0-canary.63d3a146e.0","@material/base":"15.0.0-canary.63d3a146e.0","@material/list":"15.0.0-canary.63d3a146e.0","@material/shape":"15.0.0-canary.63d3a146e.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/ripple":"15.0.0-canary.63d3a146e.0","@material/animation":"15.0.0-canary.63d3a146e.0","@material/elevation":"15.0.0-canary.63d3a146e.0","@material/typography":"15.0.0-canary.63d3a146e.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.63d3a146e.0_1657625923221_0.8627080072424846","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/drawer","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.88db01990.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7037fb0d0916aefe114a4b85142d89e7194bdc6b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.88db01990.0.tgz","fileCount":47,"integrity":"sha512-OedeB1STHg/SHVY0LMzWPT/gJ1FBaQg+B1C4pktA4kaimZpSD9HewUvrkwhUVtanlIrh/cYJ9xDsRwRQVLXLBA==","signatures":[{"sig":"MEUCIQCxO+T9emG4WfezsHamJm+RQS4ERzzcUjB5T1vnAINzWQIgZgEAEXbQuEknAWqmYj/Gkq7F0oso7ytR12exlV+X8eY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV34ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoP0Q/6Anc3Po6j1vWHq48L9qRXMYyERsrE92wgdFLcb8igwX1bYiOH\r\n/EsnqRkohGboEHh0ff36Bjeciv6IwGSNRxBVKRU77dmVo5NYtwCw0YeoF2r/\r\ncrUfXjMuPnrqtujzmsX9JQF8Jg7+PWDFHt0SvamGcV09qh2vYvfpU2hrZ19j\r\nJyU58Xy+uj121WK7eWHhDMnzOKQ+EvDvSHKNuWZoIUmqOsErjX5y5kR8knQl\r\nLHbiuuoFNO2/4eev+6fcO19svNRydnC+IabI7hxiNXcID3NxyFYzoFgyKT8t\r\nYmc8V78FrruejPLokOXV51KTNMy5q2C2+J4pMPrzR9bD2ksKLXzOEjZb78rj\r\n+HTy43mymhh8qmvEc97n6GlPgFgmeHv2UCCt9AvrGNXO1PldiW8/N+v7Irnu\r\nTkXflLvVoIv4Ktt3DLCaEpWixo+THxkdMG/B/9IEP2NFwWOk9MQTxeguV9gH\r\nn8IZSYAB8r2Bd0CdObmZlRay5X2hurphUHb5wTeZiN1mbVD8JtS0vc3zOqcI\r\nfIaGoyANzBZqGbBiaKDvfjmOFe9yc0ZGifr/UtxJdfEIexls+sxwbWlxZLXz\r\nxGY5LJPBsqffzPAKlJ2+2Mvwv4O1ITmQ5FF8BjVW1aWPqmc7N2lobRx46mXD\r\nIQ8fvJ3BXWB1qbmnxyH35x43K1SJxEACzHo=\r\n=1IAG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.88db01990.0","@material/rtl":"15.0.0-canary.88db01990.0","@material/base":"15.0.0-canary.88db01990.0","@material/list":"15.0.0-canary.88db01990.0","@material/shape":"15.0.0-canary.88db01990.0","@material/theme":"15.0.0-canary.88db01990.0","@material/ripple":"15.0.0-canary.88db01990.0","@material/animation":"15.0.0-canary.88db01990.0","@material/elevation":"15.0.0-canary.88db01990.0","@material/typography":"15.0.0-canary.88db01990.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.88db01990.0_1657626104488_0.4283516172701616","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/drawer","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.6432d8fd7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccdae15d9f104a692c054a802f227254a4d54e03","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.6432d8fd7.0.tgz","fileCount":47,"integrity":"sha512-QA/hnz6FnFvOLlDgEfyC0STr1zcq6oikcg+Z/v0Ra4inuHIG3keoBscFN37VSaNA+tkgl8O6SeDebCEgjQdhyw==","signatures":[{"sig":"MEQCICNzRTHC/IsvJV3xoKgkm4WOAZOXXGqzdTqYpaiFWuNlAiAQ28urJ3WEP6krQRYqqvaunXReNl62QGO94J+H4Xg9nQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8YUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrESg//WHyfc4BEc5yiErWa1Ze+Lg0omWxumH5s++F7QhyUemBID1ZB\r\nYmt5Nk8Vj/6ObhAju5Ak9EcvBdsHCe+JEpYM58Tq4/MXpl1J7GPwTEP2U45t\r\nvtBc2p9JM5zUhHDf1mf9J4QuZlHgVw0EZ9gXKB+O9Y16Qj1kal8+31YfaEVy\r\nI78s57TYsuVACkWVFvdJE+N3dTzn0UYclYA/sIgo6y43fcwHYLCLOjJH6IrE\r\nInQORWHkn7lVQobk7ctqGGru7jmGQdegORuoRvK+qDGbLJeJPPqzBYKUDNRr\r\nPG0vpsS7SsGwcABwzxkgVp3ufN9/w56i41qv12vXrdCrXV5aLA5y9rwMi3sW\r\nlS6njHONMjhzPXooHckEDuwlsIABISyXaU68Cbq+PCi7cDk26h1leP1urCvq\r\nHsQV/YFC4w8geandcR6A8eBI4b72HOi1nPAwV3CD8bU8vtV7JsCHTnx9Q1Jq\r\ntgz4bSIlCAi9YNPXTjHQQ1wMpECvS6f2/vv6lnjbA78JMG29FVogVWkjrO0s\r\nbdPivhiHHnA4OTvCHhPv1RKgv8nVoAsPzcMwPczA8Xrc4D9jYiIRjXtNytIw\r\nj3tCB5Or+Bn+wQAFo80sF5866Gvl7uVw/NioFSFTLOYLqx8Jwx5MjBIVqX5D\r\nonE5aZBPttmdJpESvxjgRvvPMXbUI0X8Joc=\r\n=LPUl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6432d8fd7.0","@material/rtl":"15.0.0-canary.6432d8fd7.0","@material/base":"15.0.0-canary.6432d8fd7.0","@material/list":"15.0.0-canary.6432d8fd7.0","@material/shape":"15.0.0-canary.6432d8fd7.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/ripple":"15.0.0-canary.6432d8fd7.0","@material/animation":"15.0.0-canary.6432d8fd7.0","@material/elevation":"15.0.0-canary.6432d8fd7.0","@material/typography":"15.0.0-canary.6432d8fd7.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.6432d8fd7.0_1657783828101_0.8415982426979356","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/drawer","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.085f9b25c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73402ab78d4213359869250b54ceaf5e85fb1017","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.085f9b25c.0.tgz","fileCount":47,"integrity":"sha512-fv8W6Fillfi9s6YPwPVI5XpClj+DYy4S/aFSJB5dqKy3HrW2Gk4ZRcqM9UjOR2WMi2JwSlC3CkSzFC5bggC84g==","signatures":[{"sig":"MEQCIHF6jbe38zFfR3zWHX1DVT2QJS7hkG0/dMPuhLat40hVAiB0wSRpTGH1YY+PO53NBoIaEmVcluCAEIDSGCzrL+NfBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EYNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquXw/+NriAlTepljcrFXgSBINw5qmagoZfdnCvJBCSJUHCOPq9CXi3\r\nSSI7eIhBcMlxlHbspjnSLMhnBHlzYxaMKUJnRvncru7lNSw2FeahdO58LYf3\r\npyMDgaR0Z/iamg9DfVcmx9lNg7rzY8RwGBeaTWcjjWlkZQISS74whdyRRLju\r\noU1h8ewPN+MxUMcHYsQC7fnQHdnRiiuhaPkCiaIOtUWkSJksukjzZWZ0EX77\r\n9UJluPBXuBORda8GQs4u5XW7OFy+Y6K4aaZdiSIaBCBbmRmV1B2xZS8L6+DC\r\nqGGT3dlv8idSnNFfatsJrxtRsfxNQFHOB72T99Jl0T9woHtO/HL7QCKqxbK3\r\nNHPvtX4oLzhoSKljMrddfegVqasP4sMQJvKMajjYWxvOK5CFSNfapSsDlk/c\r\nUCK7NOd6ozkQoH2jWUi67VPhJUyyr9CFA4rhhh6B86mpx+6f2kDBuFyjkG4U\r\nCLqp9blvOUuxM2UCj++3+4vy5V4Gi66JR6XGyL6FqKrd16yqa/AXVZdij5kw\r\nk0Ku0kC+9+7RtcmHQnvZv9gHXQwZQWH3iHMAcaFrE+fHJwesYVKP+zqHtu5i\r\niF5LZ+ueWO1FcgpCxYQsneReYrAWOWzB4IedNaHmqJUgW0UuidtpnfERJREK\r\nxkp4YZA+PnGJqUggwd1HLHws20CXkngcKAI=\r\n=HHxn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.085f9b25c.0","@material/rtl":"15.0.0-canary.085f9b25c.0","@material/base":"15.0.0-canary.085f9b25c.0","@material/list":"15.0.0-canary.085f9b25c.0","@material/shape":"15.0.0-canary.085f9b25c.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/ripple":"15.0.0-canary.085f9b25c.0","@material/animation":"15.0.0-canary.085f9b25c.0","@material/elevation":"15.0.0-canary.085f9b25c.0","@material/typography":"15.0.0-canary.085f9b25c.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.085f9b25c.0_1657816589510_0.36596706223166486","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/drawer","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.39f9424b3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fa03dfa3a2f169178ca261847d63f04bc224baa","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.39f9424b3.0.tgz","fileCount":47,"integrity":"sha512-8cQfLFCD3JMtu1544mrvVEgKCO9Sr7r8JMnecy9b+Z0jEFULC6xAanNo9iaVhuiT8wP1uZlJ0iEU+aWJ7dIBig==","signatures":[{"sig":"MEUCIB2AhNAVsmemXlCS3IspzW9l3cVrP3t72/gwl7ZWCxlWAiEAnaA6qCNEwSYFlpntO5WTKAH9bj/UpLvQXhnoCfHUfLA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0E0tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXow/8C5Ds7mFowGLSOSeKBLJ7AGE5LTGZMx8p3v0JQjGV8HIZUKSu\r\nTvyQ8pdtlZeJm0K4qZE1+GcLp3pFocu924J+RVCIFt3u4h8wqnyfVcNSzmbB\r\naoMF1gDZyq2Rxytr748rdlaLv76LNl5Kfamwz/aVAQyEkC2lB8sPYznKG42v\r\nhUu7RLt3ABazhOwu54KSslqvhkfkJu4H7TJTew7NR0nguI433yifZyrBcIPm\r\nQtsroqnwMGTBVvDiKLwK81+P4QYMqvfFaSlnhAy0I24RoFn7uOUYECEz8RWz\r\nnNkOUCpqbwDlMCcrEMtIRYXayZfwmWCniX69R3azKFQP0RyllVz2SlnsGgoE\r\n6pl4ECJ1Y+kQj506PYl3T1+zjisQ4mes/zIVPBWnPHXP4BvinE5/ls3hkvoQ\r\nRUlhdxodxcOtENJ7LTGXEuGxS4SBFQSR2rqokzZBjpyvBU23KiBr+z/dN1ae\r\n45w71GaBdpli4MQJfhgbXjMsSscHw0lZiv24fUgnpV8XhTeb5ufH181964zh\r\nfh+QyBx9ajLd7BRIL/KH2doJNmHwpeQ4s/hMMKYsG/9So4Bc9IF2VzuSZZCr\r\niqSR1gJygX5ZkROzXD+CCdhSa/ueiJs7EMAcOhL40T3Ac2rPt50EcSE0/wUD\r\nrjcP2qYt2ahLRjahiR2JPbrg7gQnHfYqzlY=\r\n=At4I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39f9424b3.0","@material/rtl":"15.0.0-canary.39f9424b3.0","@material/base":"15.0.0-canary.39f9424b3.0","@material/list":"15.0.0-canary.39f9424b3.0","@material/shape":"15.0.0-canary.39f9424b3.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/ripple":"15.0.0-canary.39f9424b3.0","@material/animation":"15.0.0-canary.39f9424b3.0","@material/elevation":"15.0.0-canary.39f9424b3.0","@material/typography":"15.0.0-canary.39f9424b3.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.39f9424b3.0_1657818413187_0.06828905945463704","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/drawer","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ae9fce587.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea793dd5fe026af634a09e15de404ac85d45acae","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ae9fce587.0.tgz","fileCount":47,"integrity":"sha512-Q66jHUBDsFWsuVS+DjYOMj3WTblEodz9VQJ3TimLh3MJMZdIJhXnWMJuO7Mku9kcJ52Q6hdHoX2Vy/CAXqtEfQ==","signatures":[{"sig":"MEUCIQC5iogS7hl/CNNP3IwSIqCjhcnd5k6WdjCmq/vYTsZjGQIgB3clRInpSZk7UjhqU86Ycs0EwZMMI2WLXrCFYFxsNkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FvnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKpw//cil1ux7VkzrSxEzh299DfE3Z2t5pAOBcj9soNB86jMMwgZaD\r\nUwPNG0MtgMPQAFfjWxr0/0bibOOCa0tK0E+JPpPxapg0TIg9C5MXOZPPTvQF\r\nDKf6a90BPqrGSLO0ZLdjkTiOjMx4uQtp7F1cY/j9V9qKL4aeuyC0zpkCDVj3\r\nHHlUaR9z5xpob+Nqq+jvp6YKU/HNny/9hbLefuGX5hiDFBU2NIPJ34UD6AI4\r\nwTIieX24O71qtHRDrxyqOMmgefkbFQMOAjy/xpl8OoTBolNdiSDff2iUhW3K\r\nkIwMH7w3k4uzNOhx6xbdDhOzv9BGoOMirHaCgdFTsecxWLUI3FSw4eTJcaNT\r\nDb31I2zZQkbBz72MmcX1hb8tMApEbec5ISZCs386pkoUL3om8ljZD8Q7GxH4\r\neBOTpdbIJudhfhPgIWJEkUUJ+yy78XeSF+sc0WbRYh2YyogsOOuGmJezNPrJ\r\n3hhIsY9V0LwBhA37q+AKup2ekTa+of99LdAYFJ/LonOYp7gpHWFkGf2JKpXe\r\nxwy8EfdyUTSvaAA+In4OGQpH36h5TCV9ZGPT91vzEHvQ7mNnC6Fq1zjPwWfB\r\nZXKXRD3YhIg+3fzau+kQT3z7tTxv55N+wOlauetQGaUGSF1YFfvW/64cLRmu\r\nMDZwq0Vw4rhLzEQrYB6530RFFbfSqxtt+7s=\r\n=COsE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae9fce587.0","@material/rtl":"15.0.0-canary.ae9fce587.0","@material/base":"15.0.0-canary.ae9fce587.0","@material/list":"15.0.0-canary.ae9fce587.0","@material/shape":"15.0.0-canary.ae9fce587.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/ripple":"15.0.0-canary.ae9fce587.0","@material/animation":"15.0.0-canary.ae9fce587.0","@material/elevation":"15.0.0-canary.ae9fce587.0","@material/typography":"15.0.0-canary.ae9fce587.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ae9fce587.0_1657822182707_0.03831550433797548","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/drawer","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.1ebddc343.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cf32016cb2eb41edf4bb217a6d4a53a32e98bdf","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.1ebddc343.0.tgz","fileCount":47,"integrity":"sha512-2IExC4UmaF9+lO6O0RBs5vKh+XYlu2RmEBenp3MVk7MEffFOit9+QgrAk43evIt11uzqwu4ESVAkZ+P1S6OsPw==","signatures":[{"sig":"MEQCIF5KtqJ/B4ltnbOAa6AATBtFm1bGdvwBCgFvmyOLCr5TAiAEXyhJKslMqI5WpQzH2Oem+AIORIM8dJQ513FyZOpXfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0SpxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmon1A/9F/iuTtt6wf1SNkFL0AkAsRMfmS7NAFmpsu+qPA4qPWn7B1rV\r\n5kLDyIFgPVMt5+7qfvGOkjkmAVNkCOwK1pqoTmrVpbx9T153+MJj9vvcyTxA\r\nToMlXyJOK3RODQmx+Q9iyfw4ly5fzc6HE28QL7b5pHyntiVTIKRquvGhYzxv\r\nn9oWFbkIltHuY0eSbK4/UWlw5NiDEClhtx9/TXs64Zf9qnajUms2NFyMHH/q\r\nFOwoB2SERhkQSbv0BH3oDTzUhRPXqfe7PYP8lLWvOkC7hY5g/Z9AIqZKyxtA\r\nyQ0O0/O0eGMk8J1V4DrRp1i2hV1dE547V1G9p8RqQQlxSHUsvvH+/9dikWxX\r\n6wQuDJtR27jvBPDrIfBbCkzx7nwOujzzmd7wxDB+oOXITDOhhZOuUkO4b4yQ\r\ngbbRnbAAe4Xqr9GEUyW1sVM2kX2jYyHR1yQixXeJ2Fl+HMILV/2XQO4eDH64\r\nNauAzh9qT7MoEh04eGWzJP7Z1z6tuoJjHnVARNv8DvYpFkFcos6E/CYqBW8N\r\nCJm2O68oBwOydcQGpw/JSBkcJJJDIBasTPZPhz5+EbJl4effkXj/L10ZOM3g\r\nKijVzA0FpffqSX1ztMV7DRyu1piz5/SSlw89fzFDeF5G6cP5y0242K1L+/Fw\r\nHgxlXT7CC/Lz9EFsF3zoC2WQmkI680RWR4Q=\r\n=b9HW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1ebddc343.0","@material/rtl":"15.0.0-canary.1ebddc343.0","@material/base":"15.0.0-canary.1ebddc343.0","@material/list":"15.0.0-canary.1ebddc343.0","@material/shape":"15.0.0-canary.1ebddc343.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/ripple":"15.0.0-canary.1ebddc343.0","@material/animation":"15.0.0-canary.1ebddc343.0","@material/elevation":"15.0.0-canary.1ebddc343.0","@material/typography":"15.0.0-canary.1ebddc343.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.1ebddc343.0_1657875057064_0.16295798190862687","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/drawer","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.c5018840c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f74dd2356ac222d9d57b1e9ea34f7f3c2b338da","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.c5018840c.0.tgz","fileCount":47,"integrity":"sha512-nCGd5e5rS/huHsxRQ7RMcdUY3Mv3uXjCBpYHQw2hwNMZRUNYPApf6D0NA72js6+Idj1NzwnezyUk+u+17RX8fA==","signatures":[{"sig":"MEQCIHt8iBnsR/JAoEcZY9tb7pPHN656rJivexBxB7IEft9HAiBHeOOokNPRYfIexBunb3jOHxDG3Lr4b6bayxBQkCM7Hw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1SuPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+eg//Z0L/0xGUTQf5NmosIT7a75NhfQmlyPEIaFFjLLpmeqjsGYZE\r\nPGXo+7xP50Lo7TZ1UfEG9Qha29mu/oaKv/p3G0JurZm4nUN9BhmjqTIYnDQQ\r\n4AjnvY4XVVAVYVy2b0ArLGTFtSBLY5HSITGzldv3a7+ZN4tJsWolgdfPMk/E\r\nWKxXY5J9vJCsbtwhO15aRjzFZYq9gBpzJvg9OCrnfQdLVg/nbJ8Qq8ZRzp4j\r\n+l0vlvTXsLhgAo+oWp1jZeB+z33XGmEdw/Glv1rA7Ba0OzunYxPveVEfkpRB\r\nSpwbzv4fZ3vkArkTuEC1mZkEfKGYSDtJ8OccbuR+rkhamBe9x8Txgt5Pv1kJ\r\nkwLLnhxe1eo1nuD2pM8kA3GgVU6ShDOuLU/fdrUEpCqtBXh1cPkjq32oIWmv\r\nc0N4H5aq1jHhT95Gus4WFKaJ6CHvUF5rybf6h9oHg+M72UPgmLIAIu238bC7\r\nDUOazaLlz7MLqYEkXaPdbI/DH/b9PyRYc1QVLyR7pjTWKmD/RMwCQ1n9FbXY\r\nWMToZgl11RwLg2cXKh10C+1CQDLKJGfRgQOoMgXzyZOed4INrcreAypBf46d\r\n1qa8MkhQtD7fRHEpazjvi3brz9BD+5SsmNFLieUNxmBFLnQN0tuhNT/0IahX\r\nTW3RMWO0Saj0x4P/K4wXBKJ4oeCCARag3+A=\r\n=gZw0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c5018840c.0","@material/rtl":"15.0.0-canary.c5018840c.0","@material/base":"15.0.0-canary.c5018840c.0","@material/list":"15.0.0-canary.c5018840c.0","@material/shape":"15.0.0-canary.c5018840c.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/ripple":"15.0.0-canary.c5018840c.0","@material/animation":"15.0.0-canary.c5018840c.0","@material/elevation":"15.0.0-canary.c5018840c.0","@material/typography":"15.0.0-canary.c5018840c.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.c5018840c.0_1658137486620_0.41529326383997245","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/drawer","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.551b40d18.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb2fcce29c4822fdb9d2113489a9d4a65224a2ff","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.551b40d18.0.tgz","fileCount":47,"integrity":"sha512-tT1eM1gogYtxJxOusn5kmnnD50iyKsWikMLHaRNKyhfmnyKOY+MZtW5wRkwHB7yBAZiGU4d+BN1BymI7155NeQ==","signatures":[{"sig":"MEUCIQC2px3p3Ed5uh1ETOyrUz7IXyunTRJZI4vJIO2iaPXy7QIgOTWgjW9Xpsq4LxyT18wdNbUUOUSa2yXjrMcVDo0xsNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S/DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpf/RAAg2PidCrD/LwlRabi9PUxiVgVaZEJdYinsk/LWaulre9mqINt\r\nVExKH8NISFzy23Lra69BiMuE85pKajIehDCumi9C16OvgZUFgM7gd7KhRiGE\r\nfwDFFfWZEEuQ5UdfP9K0ssnGdQ5mhMmLW8P3V+4BkKp8qAO3EX9ni6Vo2zJd\r\nqkfyOdNGl1//nuDr0chkFYDlLlBM21n7iCLORNYnbIgujpdHRXOIP5W35EVa\r\n96vmmNCyTUBkLTlPtREbyV7nQ5oFIOIBP5K9KvaRJpktT+2RqKVEsIuJDKV9\r\nP0MPXjmPXp1kOAIieIxhCrGc7T3PdqFgi7o3U1WtW2Hb6bTkP8ZNHbMtWKsW\r\naynxEZbpIOo/TCy4uKBnIvA9fmMcJduosALmfmNW1eh0htdIvIs4s2YLGk/J\r\nqzB4PnhDSNZdhU3Z+vBKe4wKL2bIFoXWpY/pTV0pvZsaHlWqV5ID581uNcFn\r\nCk15MkKJMBoly02KRKQ1amAfsZaapm8uaCfQFsmQ2/+g114HDDBBIijEZ9FG\r\nEuXfGIyVxu8B1EIblv8yKu1qdiVGDBI6LmEHByZTccOeYAIuuHzmg5Y23A/9\r\nB3YkguVwYDxksSECQvI9+xRaG8Z+QtX2A/Tj0N/uGkRTcLDMdeLc5WozHmda\r\nncH8STTke/0rbOdKX+qwyaXcpTn9oUBL2HM=\r\n=HUng\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.551b40d18.0","@material/rtl":"15.0.0-canary.551b40d18.0","@material/base":"15.0.0-canary.551b40d18.0","@material/list":"15.0.0-canary.551b40d18.0","@material/shape":"15.0.0-canary.551b40d18.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/ripple":"15.0.0-canary.551b40d18.0","@material/animation":"15.0.0-canary.551b40d18.0","@material/elevation":"15.0.0-canary.551b40d18.0","@material/typography":"15.0.0-canary.551b40d18.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.551b40d18.0_1658138563570_0.507216669768582","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/drawer","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.cf9f12371.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"371702252ea3b816b26a9cde2b6611d700ecab6b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.cf9f12371.0.tgz","fileCount":47,"integrity":"sha512-TiKOU23LXWylAOkfrb84Poyhq1yuAqfb8e0K7/X5LBNxIHwIog3LmsACzHPc9GIiDbaYwYMIMymKoD76eAIn6w==","signatures":[{"sig":"MEQCIHXZh6jXQbGCs5pJ4LITWrIZfAHCosPTeDgTYpTg1ZTMAiB7OtO+ta39o8N2YUC3TMjKtZo0dTL5RpSjBV/+wxPV4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TC3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokkQ/+NssEIeMaO9dDhk+9pXcXpquB+kltsdO0r5x+Cmhkt9EcKGmQ\r\n1kQFqDVOdDoIABv0hhaAID90uq+Rki+l8RcJwKdUHtLPQiM0wnxCBTHBKySz\r\nEuvG7IAjIyjaZ2v3Re5M8qP8CYE/uUzysogmk6+odqlH8S+ebZyiPrbIPFd0\r\naxilAP26qRJ9VIfl34NAqq7c3MrYkXC1aNgWgZrlmJtq7RAGKuBZ+bnHKQIO\r\n70JI80znFvQTvd/B4qzBoq4UXjXyu6+9GN89sR6VaDDKyoZrD9wtlnXa6kva\r\nxn/yImxgJ+eiC82JwFbTcKntZeKxTbynoQ+KDbV9vlaACRwqtCyI1I9ELutS\r\nRSJ2SuHbiaWd9kun/f47oEqpqPLNnb1T1mZyWeo/QYtyqcqw0clxagDujSy0\r\nlDK8KuWp71JGGxyiL9bS2AKqtRHH0y8td3dCJN83V9k0HzPwOYQe6K7x+B7g\r\nyrgBJitlPrL3xtJI05tfTKqDAImSw30gYvE+Csq0ZwKR9tMQ8EiqzLCATQqH\r\n2CYa/Cppu7eUzs7CceTVuLD+nrYk725eTr1WoSdxPqPiohIxlruqzuNNwnOD\r\nfChX/YwJ+MW8GB8X2cYkQalksLE7oMrSxSsogaG8/nYtqAvBxOdze3u0bvrs\r\nMTL9eEXJZLwHn35DHqVWXL394LmdH8CNS78=\r\n=idPW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf9f12371.0","@material/rtl":"15.0.0-canary.cf9f12371.0","@material/base":"15.0.0-canary.cf9f12371.0","@material/list":"15.0.0-canary.cf9f12371.0","@material/shape":"15.0.0-canary.cf9f12371.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/ripple":"15.0.0-canary.cf9f12371.0","@material/animation":"15.0.0-canary.cf9f12371.0","@material/elevation":"15.0.0-canary.cf9f12371.0","@material/typography":"15.0.0-canary.cf9f12371.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.cf9f12371.0_1658138807661_0.373912133764265","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/drawer","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.2797ff8b6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"443455838125d3e7c478ada686284baa819391ba","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.2797ff8b6.0.tgz","fileCount":47,"integrity":"sha512-RPDDNCnKunGNls3vp7NuZ2NNcJoMZPSRfL0m04NmWigbrbeMApsyqRgdGZnzs/5G3YSRz+y7+RZMIOJm3ilh/Q==","signatures":[{"sig":"MEUCIGz76fpHC2Oy0Y++2d2C9BxT2q/MpUEKtbRw/j22FIbzAiEA3FlxImgupWkbC2Y5lFjzxiZuWhvrBD1WWDRToqEMCRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1foOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgnRAAoq3cvXQ1MCEpJqtpLkeaW/ySg9aoOwsHTlXvbtepn3ulDckg\r\nEgUljFkUV2d8WXs4pI7xtYlJYZndwqpWq/k3cYkCj4S/gAT9etGjNvB9nKIA\r\nHyxrjkiHaaoBk/3z+EMD08aGRgdhKPRQrKldMGk7n3gvZjxZ1yiGLDPsRHVt\r\n0vj36TcVUidYak9PfphNx9Lc4+NAzYiPTzLx7F1mk5wyz0l+iHxI+UfayT9n\r\ntapv3gmhVteKm29KZASXGkQGnOLefWJ5xyD84plyJqqGClGukN/rfYrzRug/\r\n7bMzaCJ8qHsyJDLW1o/RnYGVqDAqCOPO6UfYTlIAp2fM+XGFzL+EQOCh3pK0\r\n4f8NKs8ErOTQ4TUpNW0jfWaSkgRqQ1Ifb7uaOZl2FdJzKaHJct77qnOTCbJ/\r\n56dSOJITrMrAw1K2gLGzZ1BARKxgYw8VrPcyUouyT9PKESJ/jxfeIGtjQVsI\r\nkPeRI+kK56+bWp9F9wDNjkKVbbuvDGjjlDBMw5+1tAhmshjNx/LhjY77F6RK\r\nuzx1BLRohSTTQ8EtmG+ahNeb9zGiAUq5Zyq8uaqB26mmmkzmA8YoRnQCYxxF\r\nFKXqpldCjPiyuik8CooxBiJb1DLDTPGuy7rqrYhAQ1btGXsaF4Epw3qssZ2o\r\nfhZw8g4HIPzkutH6vMsua+r/XwSDIuj1geM=\r\n=/ECv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2797ff8b6.0","@material/rtl":"15.0.0-canary.2797ff8b6.0","@material/base":"15.0.0-canary.2797ff8b6.0","@material/list":"15.0.0-canary.2797ff8b6.0","@material/shape":"15.0.0-canary.2797ff8b6.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/ripple":"15.0.0-canary.2797ff8b6.0","@material/animation":"15.0.0-canary.2797ff8b6.0","@material/elevation":"15.0.0-canary.2797ff8b6.0","@material/typography":"15.0.0-canary.2797ff8b6.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.2797ff8b6.0_1658190350511_0.16262289333371704","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/drawer","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.110fafa17.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"866ed6fd3e4c326f388b016a1b6841376fc6fee4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.110fafa17.0.tgz","fileCount":47,"integrity":"sha512-+C+AiVTeHeabxhqbULP6NwoueznSutYPEwnxj/Zosl0/SOLo6avW5kUR8zrospfxMQ0RVYgCSgDz6LFXnnnmXA==","signatures":[{"sig":"MEUCIQCqD7p5AxwZfTylcausPPMRSgim0fEz6ev9ljG2NuvGaAIgOVhTseQLRtKrTC4ua/ZAYAiIwG4ZmjC/Kx4n9foyX3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17NGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3Dg//Y7FpqfAzQ5X7t94tbv/iS1s8tuJkzCYjSQStVZCr6AzlcVgp\r\nrzYTPdCanO5FmqmXKCk9Su913QGIAq2YSXBHFRjxOHOSpE0XcZb+dl6riMLa\r\nxj9dS9HwkTMfiz0J2yciAM71/fepA/l1pSR2ivNzbvEGzE3wQLdkE5K+Na3l\r\nt2npRVFl6ASKrJnxF/hHOuFdrsU/u6TWiZpxcArn7VR9Uxj2Ablq/Mv5C+Wg\r\nydy0R+EIeVeTc9DzdaxIN3UNh6IxRWAZ2/q9sp4fvW7vMgDw1UTqiNuT4vCA\r\nBPDvlVDAKiA/gt9b55WGRp2B5A7kqmFRIQ0dgpXD6CqP77sooPOAm60EtyQ3\r\nVMmBTXiT5x+Q5w9hWJN6aNAFrCp4kK/AAGK0L4cvaZU2PEaXVwmlInk0ynv7\r\ndW9GkGPOxzpeNlf7eXPZGQFrjYhzGJ2pKSqBjjOwU5ME0SC1aPoh+O1L/Z6Q\r\nU8vqUHfrRfwEVuxyoiEKZpkVLoXT03fJSyMoQNgA6rhH0GwymunGMHYgJSp9\r\n/1evSRLW5n+TXiyCBt+xLhg978KoAxqVZs7EfctAwbUfQrFkHSyhT6RxsxhJ\r\ncM4X6iFqLh/aLzCfE0fqVVSNSHjcBqpRntBKo2F2zyJCpM3znvsv5XIvlN0L\r\nGz8/VB3qVsr7zmJ5Ahu5JV0LVZWWVbsePNM=\r\n=yIGg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.110fafa17.0","@material/rtl":"15.0.0-canary.110fafa17.0","@material/base":"15.0.0-canary.110fafa17.0","@material/list":"15.0.0-canary.110fafa17.0","@material/shape":"15.0.0-canary.110fafa17.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/ripple":"15.0.0-canary.110fafa17.0","@material/animation":"15.0.0-canary.110fafa17.0","@material/elevation":"15.0.0-canary.110fafa17.0","@material/typography":"15.0.0-canary.110fafa17.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.110fafa17.0_1658303301630_0.8662514362076212","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/drawer","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.386ef1d2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57b09726ba810e9352f19f0e97b38eed28a28de2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.386ef1d2f.0.tgz","fileCount":47,"integrity":"sha512-VLYGUZ0zw9cTrKwkzijtTNHgdjaO9Zp73btgHNYgI5/W8GaizbxxqZlC2ToNTDN1wY4VXK8eYXs7ayhhs2pPuA==","signatures":[{"sig":"MEYCIQD0IA59HBRYAwuoppG2TnntECM+WYEi2f4prCERStZo/gIhAKHZTIuDUtnl1Ro9cHRruszVpAN7BaIOAuqCLFTbl6sp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EevACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLsw/6AgCAaPj/Imy2VQ6LNJDneOToPU77Fm7DvuDp+Bxze7dcdQnX\r\ncishw1n1bt0OZVq2P3mz72EHS+fdLsCG/zBQHYBZqGrvkLh4CaUr3JdiZ0gQ\r\nTSh0knlNFmNZ3v92NXBDtdL/quxK+6hTR5mE1d7CU553yAGRfKAE21LRHTTS\r\ndnNETjsEERHTgn7fNjjZcOC0qhXGk3rxLVt9UqExl1sDDjmjhG7wpzWMpWRn\r\nnQHY1DSb2SVnhD0n0Vg6rfP2XiH6GYxpQmfLeyPSJOB7+E7mcyVnjJAlpqwG\r\nGguHzR8MRZ/jamUJOOfNRm8/fE7QUs4LQ2pxY6H+Cg8/+vNtT4FzBTluVZ9x\r\nkp7JkqYoZ8bhHp+bEzfnjEGBR19RvsjtO6A3qdpetW235gDzqN530uFdE0lG\r\nhGQ0uFtrWFWTa70Zb0oAtYBEAl6xFVkxrLfJ+nthVsf6F1ooyzbQy/gecn04\r\nhzSH+O+Yd4akmv7TRrrn42eR1YQAHTBeWraWOrLGG5IQXBUS3GfetJPvMAZl\r\nDwPCLVdm2qTdKXSi4XJ+e9OyjuTQm2hzNAflrb92Agi6i2DXnLOYfCGs/5yu\r\nyguOFYxAUZ7+nmlWMtgaD1wT2yhLxEc22N2sP9KIV8MG27EC2qxGSxedzm/g\r\nmAjglNhN/IkuCB/8/jqF/isRouSF6VpC0Zo=\r\n=wbtY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.386ef1d2f.0","@material/rtl":"15.0.0-canary.386ef1d2f.0","@material/base":"15.0.0-canary.386ef1d2f.0","@material/list":"15.0.0-canary.386ef1d2f.0","@material/shape":"15.0.0-canary.386ef1d2f.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/ripple":"15.0.0-canary.386ef1d2f.0","@material/animation":"15.0.0-canary.386ef1d2f.0","@material/elevation":"15.0.0-canary.386ef1d2f.0","@material/typography":"15.0.0-canary.386ef1d2f.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.386ef1d2f.0_1658341295408_0.10843845133666741","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/drawer","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.c3924efef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b767c397807d17fda7854b9e8b3488b6bd26351b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.c3924efef.0.tgz","fileCount":47,"integrity":"sha512-OOs4w+7b6acZiHRKMA1y7DqZC3l1FZ1aYAfM9Q5YqeUidgV2y8aAFrfYspaSpyx1CO/6uXxv+eBuP5w91T2h0g==","signatures":[{"sig":"MEQCIE0Irccbd340bLB7JVrX3JJPnJbesFa8wD3oM346K61zAiAJqVZx7/lHP0UGkH8fqnf8lNJngm52lTb2PLPL8MyApg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2En3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoubQ/+ORIgAwfAE4ydaHF4xxbRWGF4F10gxnyTmR3zjkIH9mbchx2k\r\nzPUAigH7OmPTcZJqBzkX7ymcHdnPQeS04Quskwq5rvMQxHJCpJCtKqGSFNgY\r\nV5kQlPH9dKjg3RgbYYMTeMmtbSaVvUPjNpuVFChq5d5S3MZAPM7Yk0eJvOLN\r\n0bPc3E0FV+m3r3a4P0Mup1TzvkIpL355eLVciRK0AXd6c4thj/tVBLVkXS4g\r\nZA+Rz8Z7WCEG9KYROvk3nyaDpEw2sdtFYPeaTaUYJUaJ+fxTJwWkVPj8Y17P\r\nLRqOWxjjjG13HGNKt4sXp7vA4mg5E6crAtuC4ikQWr+HT0iqdKkNZk9I7MvK\r\nof6fGfnTVE5C/cyUNvDLNhFTzkyu0Hc8Rf/fZeyv6LmiizQbGSVZkr92vFpT\r\ntPZgTSwIk2nfxDGkhfmNyQtQZKyxIouPr59Ff1d3+rHZFnFkcjaxGTTIVZX7\r\nGY6cK6+vXSFfxL3iSPk1vQlWXSuVIcNeITdReNV/eMLwPqgxQ9vbI2J30tgy\r\nCXr2pvLe69gv3hVWDXQKGizV2+RAJseDTZxk3bLXBiyUwB8MJZkbPeE+5jSc\r\nUDmsDey4CFH/mtFI5Hqymg9VHvXNFzKuI7vX1V75ig4cCZ7ua5gCNOV2wqsN\r\noh0eZZ8r6l7zxZozR0ZMF0pGfQxnQS36Kzo=\r\n=GxnH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c3924efef.0","@material/rtl":"15.0.0-canary.c3924efef.0","@material/base":"15.0.0-canary.c3924efef.0","@material/list":"15.0.0-canary.c3924efef.0","@material/shape":"15.0.0-canary.c3924efef.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/ripple":"15.0.0-canary.c3924efef.0","@material/animation":"15.0.0-canary.c3924efef.0","@material/elevation":"15.0.0-canary.c3924efef.0","@material/typography":"15.0.0-canary.c3924efef.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.c3924efef.0_1658341879645_0.25766939162812497","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/drawer","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.cf5c5907c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfc135c2615e683a0594d5a5aa4134696ea82667","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.cf5c5907c.0.tgz","fileCount":47,"integrity":"sha512-5n8dKn1BmXOV0a+0za73tkrZAiJvuNSqBO4gmPHZCUdCn5R4PuD2RiXo549LtnIuMtzAgjAN1zeGwEB6w1nUmg==","signatures":[{"sig":"MEYCIQD8Mfz///jkzwMepyq3FkdiUmXuYTXW2BIdYJ/OluwfVwIhAL9TzTydQUPLeBOXDKQGnaLSNleGWXveYBKraNPIMR+4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HJOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZxxAAlF4zQeHzh51HDqYHiRVxazkmbgcwJ/hdRjj2Z6qt9PDaBZsW\r\n+epRJmN41ccAN/ymzfvB9wZrFz3jd+ODFBbSaxHmRIQPzyR6XEIqBB3/bobp\r\nWhGJYt3Zhj7gdx/W6OndQ1CSl+i5ic30bsEPwzJIcwhVShFZGHNBq/m5ERzG\r\ni3juxJdyiqLQ9/iObH202raYfsTDYqN/CTvZoLJ77/w1JrDQKvMFS4039KGv\r\nOMZ5W0mW+LRJIBcHecL74o38WPh/xorN8CfOgcE8g5sF/dmgNt2UYV/S+wDj\r\n9I79vbzyE+vk6TgJ7z/BIxmodAvwMx90DnekXoiM7+vRDaCPCjjrh4fcFUBF\r\n3x+BLTjqlRC2a1JtPbY5BlriJDVm7Fwk/+nH+8tVpnEq+xirg4+dAsVdNpmM\r\nfV8JRSlNNlTlGuxisr/9g4zPMamtJaTdImsMmeA/sbUn+OBYRdvyowYHtabl\r\nYfhZk2uovAsL8I2niXEaRF8FQG2Sl4r9lxnu3CTuzRuwlhMljCQiI6XHx7e4\r\nWr7+LuROvqRW7nXK1duG9jlGif8eE0Adfgjel8JdhySqsgL8TDxqgV5bk6ov\r\nlMSZFm5T3sIumJa1mnwm8KZMa4dGRNauP3zPyt6VoGPADSrvdIocg5OlrTef\r\nvBVwz8HbJkNcdEHMQiYBIhiovNWYL+Cicj4=\r\n=7LMP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf5c5907c.0","@material/rtl":"15.0.0-canary.cf5c5907c.0","@material/base":"15.0.0-canary.cf5c5907c.0","@material/list":"15.0.0-canary.cf5c5907c.0","@material/shape":"15.0.0-canary.cf5c5907c.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/ripple":"15.0.0-canary.cf5c5907c.0","@material/animation":"15.0.0-canary.cf5c5907c.0","@material/elevation":"15.0.0-canary.cf5c5907c.0","@material/typography":"15.0.0-canary.cf5c5907c.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.cf5c5907c.0_1658352205767_0.26740223997262613","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/drawer","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.0617e2319.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21516e40ff4f9dca4a9469d9a1d9573fc4bdd87e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.0617e2319.0.tgz","fileCount":47,"integrity":"sha512-1Cb73QNFxfNxi1/11ZR5Q5nFSi3ixraV1WWNZ4eJnoradz4opTNX2Cg2NuTb/tF5brhW8LR3sPeVldanOsuSOw==","signatures":[{"sig":"MEUCIHp9XfkfsVi0SPGq6Lfsx+ZvvoPBslf+3lcC0B9Ifz6zAiEA4OL9hD886YttNlvSgc4HFlcfdqcS94bNDpaIJH3eYss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HaaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdCw/+M1nYE2cylL35uHPwOd5lXPURTCyvARcpE0Sutc1jc20vtJdS\r\nOegXe7CxYi7yybJDnG8oSe0JpdY7T1cexnBxoh/30gYHU5ygcawHxXyFJA6p\r\nh7c0Q0bXAsSU+DvrL0W7yHjtZ9kV8lrKpcCVdB+oNyIIAVqGpwv53HvLQ4l1\r\ncRf/AjyVI3F79sG953ykQbVYknBw9+ATJ8DqoI6yuy6+BTgZ6S1VK+B7Y3XL\r\n9NUSB3SAqGTMqo2BCzNNheg1YplHYMRrZ5YqXM7dexpBpaN/tl8f8QqmLZ7F\r\nZoSAKtjcwVmpScQsoGeuvRpcSr99JbSbwv21sk6V6Tj68Lhf2ZWH2VCVABSh\r\n2K5clyU+7w0+59zOxb/MYTOI53z+q4w86DlqGRjzNT+YQOihal9w+we3yZcv\r\ny3eoKvKGQ33JQz2bY2pAXZUVppwbn5EM2YecFQPwoJFuJs39ASTRg6sfiPH9\r\nw9aeE+u8cXzBFkJEuFPmXzTWOeWxCrbh37M86fMtbnOQZOND9WyiUvlPTiVJ\r\nui1zhM6skxVfUiSfo6IH9wqHdQImG61mtoel6QIvzL1pSnHLXCJnHbZqnZ2f\r\nhegBqQjuDlhoGMmZIr0+28ktakR2LCQJTRx43we7qUAKE9jp2f8GQDqW52Qe\r\n7lJEA6Td8O2XqmOLVlTM5iFcZ+p08HIOzfE=\r\n=MLbg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0617e2319.0","@material/rtl":"15.0.0-canary.0617e2319.0","@material/base":"15.0.0-canary.0617e2319.0","@material/list":"15.0.0-canary.0617e2319.0","@material/shape":"15.0.0-canary.0617e2319.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/ripple":"15.0.0-canary.0617e2319.0","@material/animation":"15.0.0-canary.0617e2319.0","@material/elevation":"15.0.0-canary.0617e2319.0","@material/typography":"15.0.0-canary.0617e2319.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.0617e2319.0_1658353305764_0.8346995463471856","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/drawer","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a743b7967.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3625771c7e725d1750f2c12c0dc0f29729f973b5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a743b7967.0.tgz","fileCount":47,"integrity":"sha512-Fp8eO2fpWY0bQDCY1oDECmoICAqH4BoKJlGJR1A1biRTWdqBluGAKypYZeobPFZw7yBoY1+azLhYrCoJkqUhHg==","signatures":[{"sig":"MEYCIQDF6M5Btz/JzEmrj7upj8lVumxyMhKUeBHFTWOsyRmvmAIhAMh+O28pzK+w5HW4/RdgxaaH9txbInKdbJpGJblXqIXu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HqQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQYQ//TPpQfYjqgrqlg/T50hK7dfoX8j2A7vfbohCMX/J7dZ6J5O+Z\r\npx/i4NdSJKZc9TgLjUIlFhehHXT/6DZRpEEUhmD3K31CR7tKtqkDCJrVmvVC\r\nDJtE/v7CeWIXTJJ5FmAMnW/WkVHBkj3kinSIatO6qqwTwi4p5MUjr3VoeQ5q\r\no3y2l/+lM6c/ymNr7uROKVJXzPr08UJp28Ifr2sLiHKGRcdIVGCUC481hyXx\r\n0Xy1zTRcOrO+hqBn9P5aPhnmYUaj7n9YPo1Xd4dMwNmxJSl/+LB8JzYHSFSo\r\nmk4jaKaFHVM81IgMgtBfMqfiMGmdEobOzwdkQ4fBvQP7BXTE+JKXVO41VzdC\r\nn1krvo9Wfep2OkFDoR6PHtT1+m66vgTIOrN+bhpR4LKZhspbwHPIs2LxtYcL\r\ndDHag0kxobrdojeUDWws/u+PlWR0sFM8LVNyd4WM95HkRMbSpVVrtEpR4ODO\r\nZP6c7zcFUqYQ8sT4CL7V+lgCocNGODbB8ojvJi9ajnm03SPUayNAIJWCn9J1\r\nE0r53LWjvx1gRNKA26L0MI6XT/y0xQqyHzdH5vscMHbqwNiV3YEj2FZCqLq3\r\nsT9KOJlbXIPbwDwE+WDBTr1ApZ5Cq643f1b/h6heD3osZQrmobdmFdov/s8i\r\ngsvdI6oh6mmhG/LC3Q9jnRAFNCiBbHWlqc4=\r\n=5/vX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a743b7967.0","@material/rtl":"15.0.0-canary.a743b7967.0","@material/base":"15.0.0-canary.a743b7967.0","@material/list":"15.0.0-canary.a743b7967.0","@material/shape":"15.0.0-canary.a743b7967.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/ripple":"15.0.0-canary.a743b7967.0","@material/animation":"15.0.0-canary.a743b7967.0","@material/elevation":"15.0.0-canary.a743b7967.0","@material/typography":"15.0.0-canary.a743b7967.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a743b7967.0_1658354320129_0.30281054310564826","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/drawer","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.69fd619d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"351c59185a91cbb3e8cd8890bd944c2e012b7232","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.69fd619d0.0.tgz","fileCount":47,"integrity":"sha512-+mfHkZmLxktDQbPpLxURi1eIT76PfpkTOGQ5W7lIWTSCgS+qwq7boxM8WMsM3zW+Xy1lvILyjh4DFpi7vT3l7g==","signatures":[{"sig":"MEYCIQCBVw+m1lc36f0zr0wtQ18Rl1TF+rc2p60XXx0ErwoANwIhAPmOdbQgICNnUqfjGdaDJWTBothdMbLYV6/7QgTWmAyN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H1rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrggQ//WZNAZMNvOpwLgUofb+jQ2ru79Pg45WEXxGIkLvIy1w2qqQwN\r\nakJu+IzfiQ71ghk7Sr0dd841CWN4eETcvbZGPgnTHspl/LGAUxV3sGIdhbMR\r\nYuLpyi2B/RffCzUjYuDDenp40ZZG+UyLQMPxchZ5mGRmReNxuqqovlcbAR31\r\nrnrxvIb7M6wYr3tWNPwv4dQ3XwXQXk+ogLzeXGc+pwme5cBHj7Amy64sY5kE\r\nwnzONVMclCut0jYqNOcBd+NJpK1bJPMhkCQ3ZBWsogsOUlgmzlEzlbzLxaFm\r\nqaKKu2J2n4EyNF1kOvaq9lnw85unUYY6xkEQMzUTub8Gzq7TjiJZsI9OYYXe\r\n321TiPzxUQiFZkQArNana7+ni7623rtbh6ayjJm3Uy0sbJ0jXzS1qENL0nUX\r\n5hWGpQX8LNh9GOgpKr9y0Q6Aogr749rKoXLhoWyADXeXAiwqhTvjrmhCax7X\r\nr1JhskGpJzUKJcfJ2JYjEv4c+2QAgjha+wNtnoxnfpnasKCv/68TQLMjZpts\r\nFOX2WWHTdB/AB7E+A6Gt83Iq+/FRvookNHK+agov+YwRVpdVz41nJ7TDuvqw\r\nQMFomg5p15tPA3SEfHcFbM/FCkzijwa0zvwZu0ff5oYncPJny5iVsfAEZnO2\r\n7mU3h52Ru/SNHbsPlQ2DZgfJEXDIobTQHys=\r\n=4/AL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69fd619d0.0","@material/rtl":"15.0.0-canary.69fd619d0.0","@material/base":"15.0.0-canary.69fd619d0.0","@material/list":"15.0.0-canary.69fd619d0.0","@material/shape":"15.0.0-canary.69fd619d0.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/ripple":"15.0.0-canary.69fd619d0.0","@material/animation":"15.0.0-canary.69fd619d0.0","@material/elevation":"15.0.0-canary.69fd619d0.0","@material/typography":"15.0.0-canary.69fd619d0.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.69fd619d0.0_1658355051420_0.1977116805487633","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/drawer","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.2a6ddc1cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e415f1abfc7ecee94125ac74762ff8619442b7b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":47,"integrity":"sha512-euQdte7X70rZlVq8mZ6ZEVIdSe15kvg4h8crrCepMq0vgzo/MwX9HYaG371v5qeSUT9tmDuVqCBdenJV9O0W6w==","signatures":[{"sig":"MEUCIHSE1xi1UVOBmcwvRRAUmLGwZqelGAYkDM3htarasypsAiEAlVOhoOYckeswRFB7OpfxuLNUQZLokHETGDm1nZ59n5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AV7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqhfw//aaaVmYuA5VZCKEchjncdauFsQjvyF+IjgjfxrI0GNjcS/YB8\r\nT/ryp1K1eKMMr0uYSMmuwKCH2Bik4Vol9ASLq/mjFVUcqUd0ITVtW2XKrTyn\r\n7XaV3uC/orxbqRkXC66hOaqgOj0o5yqKeX7rjoZ5pgN1vfw6WpreZ3cDXFBj\r\nQNXRSLNrjytLAIf1PtU/1xVRwdtY/tQQcOd1t+oJYFAr+86eHh/1PWtIyAVg\r\nDx6RBMC/mYEMq0V+3PakL0gkcUpYcabE/lHjm1IXv95ckcyHQwz6G8zS+T1W\r\nbmSo8ap7LlygHsIpJoJBg3jSSycAd/claDs+gsVYAxjFuHigeDYZWlrJDGqt\r\nCELKpb+/3VhL3mTkI2qs7uHvyDUhIogcX3iim/t+qlR6tP/qmakUyhFzhTR5\r\nyMkBoaxgn7kZVBhy9+t7aY9IWnvvSFnemwvS/mfSSkKQo8+C/ilz8JFYLNIf\r\ni9dClHgayPz1T8yGc3KIhuXswVO5fQslkyc3x56aJXbjqQCPgYDepMe0gmPF\r\n4bF3CvnfmXVv6nU25dxhLVrEcMHMg62KGuD1cPT/azMPDoB6aX0dSozCnX3B\r\nwuQ/b6gcVkNXLc0Z0kekQP1pK2aO+Wy9e6JrO0/Q21urAhGQvyRh/sYi9CFO\r\nFfp0Ibpscu6HxGhMD01tMykxAZFkZ2nTwMk=\r\n=RcvY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a6ddc1cf.0","@material/rtl":"15.0.0-canary.2a6ddc1cf.0","@material/base":"15.0.0-canary.2a6ddc1cf.0","@material/list":"15.0.0-canary.2a6ddc1cf.0","@material/shape":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/ripple":"15.0.0-canary.2a6ddc1cf.0","@material/animation":"15.0.0-canary.2a6ddc1cf.0","@material/elevation":"15.0.0-canary.2a6ddc1cf.0","@material/typography":"15.0.0-canary.2a6ddc1cf.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.2a6ddc1cf.0_1659110779169_0.7494663095032714","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/drawer","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.86efd56f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6acf55afdd69175b76e9320e7f9ea311d74ae083","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.86efd56f6.0.tgz","fileCount":47,"integrity":"sha512-5vXXszYBxdAt080fJ8dpN60u6mus6ZJWzH4Pib/ZpEkSMqut/4XoBqhhbhA/2foP9tqEKy2xsEobz5diOBWZVA==","signatures":[{"sig":"MEUCIQC5PmnOnHR7t4dSZu7fEdC46feAfkmiLuiUZztAtI1T/wIgFuk8q2QH4Kk7NvuGX0o5dct1JrlnTvq/hvALy1ROmss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6Tj9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqORg/7BulCkU4Kx3HS5VKpuwu1FVl1oCf2q5nPa3dlPhJCUnQFk3L6\r\nj0mvndwgDlyiphE3YEA8lka38EJ0MN5aaEXfVZZ3mjYV0rePWeYPE0qgWgu7\r\nt7wVlV7EOhC0nnSHFn3A2NmzbbJfPTSZMxgfLkkc+t7fRLNrEO+w4A7e2gwl\r\nYuAT0JMq+q5qlzOOeGvSHM+jhWkztejnSmzZYbEUv9tE/V7LP5fzPiP3qn9G\r\n8UoHJmSFGudvqr5SpIVOKCnIrvY1HQf0iuDA2cYfVprFzLCv0twED0FHQKwD\r\nbpN5deTpgd0vzeD14SvVNBUX7boXA65DCGKesRAAgV/oMI3QHqj/nJ2R/T+5\r\nINPKodim9JyksDN+49jfMGsHukQvUgPYOV0r0IU9UtgbHVyiSqe6jhAeFYLI\r\n51X5td3SCmCV0q6QLqA7fxfNYTNmGlJYHbFxf1uAwP3Bw2map7uhUVmax9mi\r\nUjoAu0YfM8GKVsSGpX5kYnh6igB7BkQcpGpwavJoL78VLzfSDu35roDQq3LV\r\n6/ZDoV+UEFEcA1qqB00xOvQs9uQ80UjrohVLHK2ZYaLbcFoWdNQJZZ7hhPyc\r\nxz0lKpTME8SAVni8WqdP7NIpve+ZHS1+MmGHaOeSYh4yE1M32bGEscDy67ti\r\nGbtMNMQnsFr/2ei+qtf9j4WmK/YZOL4lBew=\r\n=RHv9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86efd56f6.0","@material/rtl":"15.0.0-canary.86efd56f6.0","@material/base":"15.0.0-canary.86efd56f6.0","@material/list":"15.0.0-canary.86efd56f6.0","@material/shape":"15.0.0-canary.86efd56f6.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/ripple":"15.0.0-canary.86efd56f6.0","@material/animation":"15.0.0-canary.86efd56f6.0","@material/elevation":"15.0.0-canary.86efd56f6.0","@material/typography":"15.0.0-canary.86efd56f6.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.86efd56f6.0_1659451644837_0.7770673479644392","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/drawer","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ccfc24d19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7ce731ffb88615db3c2c04a6ad010d2a2f59a6e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ccfc24d19.0.tgz","fileCount":47,"integrity":"sha512-67yHomYrfzITr32rotSThUzH2mw3dVDwoBQlTHNueonCSvCSFO8E1FkUURltiwQb1dq5QUte6R5G+cEIv+fi4w==","signatures":[{"sig":"MEUCIQDrcc1Iq6YFL+6L2ZxyfB/gJ3n2fEZxCAmGgMTipgXxeQIgFZk8upGdRvroUVrRY6S0Mdxay9lrBx9XgqVyUNRGWqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rsvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6ug/+O2wrtLPwnKYI2FhWOsYCl3Gi+eVnOuxdoCwjjRwui+v4l+jX\r\n3SwPnlzOj/4XkrLZDa9NmBsTFFfTBIhuniEBQY3vt19Ut/pReFLoduNDZ0Bl\r\n7AO6spWjvwi2MWem+6FSucfd7RX2rhplZwDM6xkxM0LUja8WC6GFmo82ImXE\r\nmnt5rPzRWA0Nho7SlxG8cdUQ8kkX5z/8KFAAd+w6CLGkRXNZ5rFrUmIXgLfx\r\nbpbJj/uR1TEPKaA+sudTCoi3v2Pvvl05gr528N5r7D6u4lBY8kgigiLSjCP6\r\nUHrV4tt7CESVQdRLovNYDEqJ/FrHDzbPHSPKtobkiUTNPh13jck3yUbM+8xd\r\nNiVVtuVJ0p14jwg5I6u8VIFKFcdwybNZi93JSIT4VF8B6U1yf1r6YB2EjKCF\r\nv6my2L8x6fbBAhQEHSTMxJj9Qpv0+2FFI29ZjIyZnUIjUqCz+0GOF0NNWTLA\r\nFcwGqeI+FO07PnPEJB42QS89EHR4oOYTM0+tps02r9D+yxCOx5UskDenSZ41\r\n1s/BtfR6mGLb4mii/Gi/kZLwZBEPbPFrCLW0PRpqkaygzm0Ax49+d/TjsMZc\r\nfPKiRDnTpXQjPxeHbdvZ0CZmQOlIc/I1FLlFOLCRtYCByinU+z7MGVQ77m0H\r\nmJMULCcy0nR1W20Vp1eb3gc/8rHEUkiXW3s=\r\n=9wiz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ccfc24d19.0","@material/rtl":"15.0.0-canary.ccfc24d19.0","@material/base":"15.0.0-canary.ccfc24d19.0","@material/list":"15.0.0-canary.ccfc24d19.0","@material/shape":"15.0.0-canary.ccfc24d19.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/ripple":"15.0.0-canary.ccfc24d19.0","@material/animation":"15.0.0-canary.ccfc24d19.0","@material/elevation":"15.0.0-canary.ccfc24d19.0","@material/typography":"15.0.0-canary.ccfc24d19.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ccfc24d19.0_1659550511630_0.34044492677707283","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/drawer","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.e4570146f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c7f5fd76f1f2ae981598f62cf24c66683bd2e83","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.e4570146f.0.tgz","fileCount":47,"integrity":"sha512-jdXK54H9jiMVH7bFtQ3mqW8NDv1uQIQn5Rcgq6sV+Skt1GeGt8IyI+GSZ+oplZYExQrng8ZDcJ4AXEi/b4a5zg==","signatures":[{"sig":"MEQCIAXk5j5pc2sDvJDIZfPwL6vOiT8GnYxYuoIZeU42Ba1eAiAKWh7f0QB2HM0s8Zv8jpf2Wivdw/zuEwNCXhF0wncmEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sGWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmZQ//SApBUHVqlOWAM8cNsSENVMSgv6oqw6nGpQxd2t/nqUGI6l0P\r\npStlc2oE9H5RyB6Oi4b1ougCv5Or/smy0MOQadb6+Vg3CiScFoLuyACOkZSd\r\nXNQMXomCWnU5sp4YX3nbf2OtryBNLObn5YVoWZoaiv+ZpmDvhIMhhNiyauHO\r\n25jTqfnOTSFBsJP3HQ1zqQbct7Phh3ZhHwPx6s3IjUeIGIbh6e5HDErkRfIt\r\n3jGqDsZHJzNFf+rrueEWXGdUlVmOuZACSbru6z09ftaevi1fex+iSPsf6ohG\r\nD29KtC7YizpBNYQ44Q5JQR1QAijeVDKv9zsWhsYIaWhz02TGHTmk8TPjWPSI\r\npvFwCGtnyWMUUynvFl/A/p2uKN+PGFM9EO8WJLItOQ3mIYSoOeHX4Hi77cBG\r\nJir8ZuJ1ua/oL7igl12wUviLqxWPi49KYCp6mH9XfTexCwvyvQ+9kO/rZTTu\r\nutPoATRP7Gg1re3Ao/C85CuTE/udMK59k62+IZo3OFCbJqx8GEtxqIdSATCm\r\nH8OY8shVxQNCVlrD3u63bE85Te48BiSaRIQjBCid2XJuzC4idDWzskTZou0i\r\nFyI/CY3aGFRJjpkVaY91iyZPUq7/SCo9W+h06v2aGODYC2jzcrCR2KPndbKp\r\nX5ddoZ8rgrfLK9JCsdkeiY20SCnjRtjysBs=\r\n=hu2g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4570146f.0","@material/rtl":"15.0.0-canary.e4570146f.0","@material/base":"15.0.0-canary.e4570146f.0","@material/list":"15.0.0-canary.e4570146f.0","@material/shape":"15.0.0-canary.e4570146f.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/ripple":"15.0.0-canary.e4570146f.0","@material/animation":"15.0.0-canary.e4570146f.0","@material/elevation":"15.0.0-canary.e4570146f.0","@material/typography":"15.0.0-canary.e4570146f.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.e4570146f.0_1659552149673_0.9950847297962475","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/drawer","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.6683a36cb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d55bc836ad09427ffda23df5d1423720d2bd9f9b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.6683a36cb.0.tgz","fileCount":47,"integrity":"sha512-+UqV2VKTE59XbpIsNGSCa310h/JZsrjiPL0SZ9bd0wQIjyjqxduOJb+cHBIlDMAW6NfYFK3nEjGcLYvIEqrf+w==","signatures":[{"sig":"MEQCIDwjOPLEaSu6/l6Ak/ZCmyUYoIKyYXv4dIF5YSMYCFoKAiAikcUHCBr3fN9BR5Z/jTkChGPBzmPNLBjZ2Mt18C6SNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sr1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1JA/+LgYZU4Mzfu9ZRTy1RATyrXbOwpk7oY74I+OghwvB/pQ1pMWf\r\n0rJlGTdOfIrwXaI/IRaquGWbyYluVYIlqhftHZ/nlkyn4Ju1Nbi4ex0h9cmH\r\ntaiOVt1dUaefESVx0GapBjU2ZNcGUStTlfC98Klv5ETCrNQrI/K6cAaqPqV0\r\nk6/tYqI2WNI9+c4C3frke0UuYwUgGKmPNnyT95VlK+dnXRckxprPko4+pKds\r\nYjxPIF14xmLDk6UgXNHqMT/1hZrHwD1exbEpyKUV/Y+o9RxEL9jCzmz4IN5w\r\n3ThOPzEICGeFTMmpK9YQiQSWY4Cx0ycf6DlcOv1RbbGPgwDEN1hwhk59OaTK\r\ndnRKN71FRzmLMjX3H4Ix2nFDsdhE2PeH6DQKlVhrmVZOUgKEemttHbsnfUCp\r\nWDUQgDYv81bZrPNiHy1i+aPMezA9cKf9oHPo71Xg87H0MtKlyC6RQlNsFfu9\r\nT0EC3c2XBE8/CMRj02GNx9rI9U0qBN9qYDBbr21dGfP4HNzK97UbFQ3DWF3f\r\n3Za5cD3fJtuzl4ZtAWJzhOI0VQfOgmPXiFZHwzgSIA8+koNnM2mnyqTrF4vw\r\nHV1Wn81HRfJpHc/2sl1B4EBhEbY7r7WKb2OeYLYDn5mzjiFgWWao3l64huuR\r\nSbFidyfNJvOg03A+T4FXANX/hX2uBUvvIpE=\r\n=T1vc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6683a36cb.0","@material/rtl":"15.0.0-canary.6683a36cb.0","@material/base":"15.0.0-canary.6683a36cb.0","@material/list":"15.0.0-canary.6683a36cb.0","@material/shape":"15.0.0-canary.6683a36cb.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/ripple":"15.0.0-canary.6683a36cb.0","@material/animation":"15.0.0-canary.6683a36cb.0","@material/elevation":"15.0.0-canary.6683a36cb.0","@material/typography":"15.0.0-canary.6683a36cb.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.6683a36cb.0_1659554548773_0.42096463325692524","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/drawer","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.10196647d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f73729ab3dd1cb5e5db52453cfdfb2ce723faceb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.10196647d.0.tgz","fileCount":47,"integrity":"sha512-MxEHSWg0ayAHKH+s05GFZJtdsIKB1RWOxzYDyQa9CIBT3NW6rBxVh5QhB6TtwjEwnyzTTYI8OYtRy/tC2kZEkA==","signatures":[{"sig":"MEQCIAaUNO5QuMfcebU02LsXCKePbCSNJFR9ucTE9o5RFxLTAiBZAGgnR4OsjFWxI6aHCNgGM6J7GPA/cFtfjK1TfHubhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u7LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8uw//Tf7Aj9PPVLJYWX/v5Sjeo6SKZcybZK6uPuK77Mdk09lkbvS5\r\n63yFKVp5CdnPBNEBvjRSTfl+/258B1tPUik/v50noP45nIVobrLzUjs53gEy\r\n2K043kj6ti0MXpCY+TBc8ExyMOwJsAd4JsLTZmcTU7tYYYotgNc0whEZzFAq\r\nFbilu8BQKYfUi8aBKos2v1d+6r4WNMvfjNfFIFELvW0LtbBLhlNFNvHKdZ2k\r\ngTOj13EnfUBbVe3Zbh0QZBZLkm9AOd7gjmmUtWBRU90a8c+IcjDixP/x3uJh\r\n0+FUQvCdbs38b3OCkiz3oKLaXd8RnPHDyQKKyTI6jpILa+rXTHBbM/kl8NY+\r\ny3hDKlN2u28licyGv+ssLWL7z+5A3Z6Gh1EOlXEe6CM5rU1MBWUhLXa1LOJI\r\nQByzCaKRVTbP8Hs7iiFKx8T6VXgAbyIya6qQdyA1wbDhYVCBCPjPBXQxGyyi\r\nKosZ3yWOX4FP9BQdOqSyOIlHl3IPacRbAIORpG4ojc9A8/VXeajK9YeCKq8j\r\nNMwGeqAO0b5x0NkV/oFAksZ9YE181bPPew2g/kLxyxk+sDF9ZVW3U0o77U6m\r\nVtsn0h0rUGNdQCxB39wC0lLQPXFfA1d82VhSYVjFAOARzv3X5917gTv9/SXY\r\n52v7eQqxcsshOpaApNB5PxjSDN6C3RMzzoE=\r\n=cLhp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10196647d.0","@material/rtl":"15.0.0-canary.10196647d.0","@material/base":"15.0.0-canary.10196647d.0","@material/list":"15.0.0-canary.10196647d.0","@material/shape":"15.0.0-canary.10196647d.0","@material/theme":"15.0.0-canary.10196647d.0","@material/ripple":"15.0.0-canary.10196647d.0","@material/animation":"15.0.0-canary.10196647d.0","@material/elevation":"15.0.0-canary.10196647d.0","@material/typography":"15.0.0-canary.10196647d.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.10196647d.0_1659563723097_0.48419333144494336","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/drawer","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b20d3d73c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6db077656eebeb4845051aac4a6954aa3482f881","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b20d3d73c.0.tgz","fileCount":47,"integrity":"sha512-8MJC7ZCxXiXjv3Ej893uBC60j2eDEr3NXX0XqRQQi4BpBO8jgszFnLBJuV8D8jxyyws5UP8AVlM9pTy/z8pl+w==","signatures":[{"sig":"MEUCIBmcbOyaF8HqcAy0DvO1t/5b9y0LK7O2cDVE8cR+Uf5qAiEAsZ4p+K9Arnl/9aTSJFaEoCFx3nYzRmLqGKQqzjzk/xc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EvOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxQA//YgNnG49nWW3iVV++Kf1dQbdI48OGaldCtR3ZH0W3TNxcfi4+\r\nxLB9w0RrT0DCaxZh2ZGjxvtLF8GBWFEZumHpETFvFezIjDFoYAR+3O5CKzfr\r\nBqArWHKK6GA7a7Hp4vx4r/oXSQhoGf3PDCJ/V0hv3IgbO7rKeG5ptA0jYoKB\r\nfYfh9F2czFygd+V1YlbExWug/SljWRuqIzPo3rMPSwoTjqqnH2lDtXpeA9w2\r\nvGepNmPIWTJ1cp8JHVp41eVhToWubbQM9ArDaOt4/sZ+B79W9soTFHTN0PAQ\r\nCCCl/ioiOGDqpi4KMso8+ZePEa6svPCiurM3KGZCmaIP35u1bJEbTKqynzsU\r\n+NlmuwzzQKoyXQK6YOwC7DC52tWagm70+Ykh/BZB2YNpx2Bf8stvsIaXiVk6\r\nUhks2HeuzDa18TZWPJBg7YkK2gmow8aJGrUUl3lV0VDCNOhRkO49KyD1su7x\r\nM8m8Hehxxb6Y0MUnmhRvMNA6IQ9lnLlq0NrKT3ghcf6G4FVlF+QM6DFEIDq2\r\nyAeCj4A1SBKPrWk3IJgLh/bkPIzZ8vXOMIwWFjwF8DFqC3o6MSyz3AE0Sv2+\r\n8nwinMCH8MuqZsf+NsZRsD475kTimpO1MrAbDc3PrSe7pJfv7FscaNVMnt1g\r\nrghRVPchxRXNzsIK8WuxbvVBSjNkkZ3xlAw=\r\n=Z2Il\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b20d3d73c.0","@material/rtl":"15.0.0-canary.b20d3d73c.0","@material/base":"15.0.0-canary.b20d3d73c.0","@material/list":"15.0.0-canary.b20d3d73c.0","@material/shape":"15.0.0-canary.b20d3d73c.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/ripple":"15.0.0-canary.b20d3d73c.0","@material/animation":"15.0.0-canary.b20d3d73c.0","@material/elevation":"15.0.0-canary.b20d3d73c.0","@material/typography":"15.0.0-canary.b20d3d73c.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b20d3d73c.0_1659653069792_0.5239585145012822","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/drawer","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.47c0c6b1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23de547862345260094e00157d3186e64af125b5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":47,"integrity":"sha512-G/ukrV13zTUmN8xmGCqp17lD2k2MoMYZGD/hYOV44wfnTFHOQRZAsU/lZIQJVpqzbfuTBAwl7ebQy5bFiIlcRQ==","signatures":[{"sig":"MEUCIQCLWP1wukGNQNfUWNnrvznnvNAPPCLJnRLxsY6aZ/Zy5gIgRzQgXfdgEGAiAJDUL9lDnvKNyRKCczR5tMBn5f43QYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8nu4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1sxAAmddnsk8mOU90100jNAAapWP7B/pCFyRbL++hG3Kosk0ExK59\r\ndQKVg5sciRLfiTbqGN8U5WsH+a++Q3Up7cP5gUEYMQysHGTUWZkGBPIPH+Ke\r\nuTSTtZfm1Te4wD3Yp5YwxddzsFdj73P6QZmsc+ooKAHYCOUE981S8i5JlarT\r\nZl94LKLZqlZe8MNi8tS8qeLJcHAb5X1WWmdbouQWgEjP7G4AxeTC9tVKXpr0\r\nmTKCUeu+IhfC7EvInX/7XD/dO4RLbxE69LqeBgg0rjO+UzTOxULbGAphGxHD\r\n7pkfykPV0Qe2lhZO/c2j2+FAXoZ6AXNEYK77X/xb8D6GH9qMaAjfv4eGdpqn\r\nxXyGjCuksWQN2vVmgsgDsJjfT7NbNZC4JPWJS9r9cMsJdMXn4HkAXhhTHj+q\r\nM3j4qER/pJJOxF1nFArUqa4zLrvGJ4PAYws52co1GA8jZasHC5vKPhcv6jvZ\r\naLu6xSGWZXOSyYgrQK3dhtL7Os17GIEWChNOhAHgikvZFFaMttaCV5Cw4Li/\r\nH1nZnnLM2weH3M3599lQyHnG8jQldpQFEpZuFKhaZlG1Raq/nchK2Kpxjq6B\r\nbC1cjVJWNHshMpKFmKciXSBvswriACb8VkvFMSQSDfl56NZLAQd3YvNbqghO\r\n70qgOwAQjXNYXp2SWxQMzxlcnQe4PXoDm8A=\r\n=potZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c0c6b1e.0","@material/rtl":"15.0.0-canary.47c0c6b1e.0","@material/base":"15.0.0-canary.47c0c6b1e.0","@material/list":"15.0.0-canary.47c0c6b1e.0","@material/shape":"15.0.0-canary.47c0c6b1e.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/ripple":"15.0.0-canary.47c0c6b1e.0","@material/animation":"15.0.0-canary.47c0c6b1e.0","@material/elevation":"15.0.0-canary.47c0c6b1e.0","@material/typography":"15.0.0-canary.47c0c6b1e.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.47c0c6b1e.0_1660058552437_0.010514806310745861","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/drawer","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.0e3dc8e38.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd55df5cd15b21e90b016d104910418ea0185ae8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":47,"integrity":"sha512-NDnWGUjHY4T38qHekoK+PDCoxtvVHyS2MQ0IZrjFBLrmefYOKe482VuTcdI6yQaNsK1HQ6bjbneYbMRpwRTZWg==","signatures":[{"sig":"MEUCIEHALeh41JeNyIUCbqApS4VqVLojqG724hCpNAqcFpTcAiEAyMuE0iNnATuwhvWBkkChQC2wHvvA4VU9+jRnAWCBtRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U7DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0Dw/5AcBFYwuJGhpfBJKzCVH8+cyb1jamidc7yy1do5444ft7I942\r\ncoNM/yg/fbX16ZqY2XGZeSk5DrnnUGvtrTobEIF2xDNzTeM2t9l5MYihDJR6\r\nS/rvIw0EOZ5cVgpPMewS8IRzosPPKTb7RGKFj4UUw9qdqoCBXMcOoScMPiL+\r\nhzDincBbb+vPHOuh8heEIqBPLr20ewIpRXTnjDDWOApJmBP/H8roJnqo4j3r\r\nnkAWvKTB6A43Z7IIMp8pOJtJWhqZMhX5ncN5hfbfHWMpiK5HnMTvYlw62kSf\r\nzRrQzhtz9wl/2jghZV0wDbFEOAjMHqDR6iWsltRd5SnGHXz9zE5pIK+JE5jN\r\n6qKycFv91oWoxbBMGdxktOurNhBnopTX1tRTQfZYLTVo3zzQvMXCyxZxDP32\r\nbrMm0HkJP5PqOsj+jWzu0KPyQdna0O6nvvDwTJXQhcSvJZWbpicmx8SyulL5\r\nNumvuZ+iC+Ub51nb32g6pI/XeXP6bPs1uwpEbevN0SDwN3x+g8EHBvBQO8nE\r\nUfPkPEI8v8GWgN8gXGAwfUDKVkSj0RxEGM/f9LrMLn0LAyTSPSfYP9kZaLaV\r\nCZey82RYW6XUH0QAZfa23CjzS74w2X5+4SWvtE5Ehl8fP0+CusxVcQkVREyP\r\nFVTjqrlFwNFdBzPjrPCLVFcR0cgAZt8ZSmE=\r\n=MKZx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e3dc8e38.0","@material/rtl":"15.0.0-canary.0e3dc8e38.0","@material/base":"15.0.0-canary.0e3dc8e38.0","@material/list":"15.0.0-canary.0e3dc8e38.0","@material/shape":"15.0.0-canary.0e3dc8e38.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/ripple":"15.0.0-canary.0e3dc8e38.0","@material/animation":"15.0.0-canary.0e3dc8e38.0","@material/elevation":"15.0.0-canary.0e3dc8e38.0","@material/typography":"15.0.0-canary.0e3dc8e38.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.0e3dc8e38.0_1660243650697_0.6837258968874593","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/drawer","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.d5a11f1c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06d401ff843c3ee14a932af76711c8f280df45b5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":47,"integrity":"sha512-XybXTfR5R5ekmj/2pHw0O+0kys8n5BBpetdfbPkg5C6NoIwCyThO0iio9kFzmt/orlUMCxx32TCR0ZMbUHcJpQ==","signatures":[{"sig":"MEYCIQDIzqiSc+q59VTyEq61Rdx6ZQGsffVlzR7ssuAEcTkJGAIhAMkRhHKp6U6HuJj/gUWKjgL8SvcQF6UJ0nQIRgHQLgS4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpcdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmru9A/+NNyFq6OBe3urgeIFy5IrwWtNJ6COAxFR5kxdqKsjwk01ne6n\r\nPZqPB+fbnfdZsdfmHRfaHHhkawWX8342/dQtP1YlniSMxUnaADehDOMp7afT\r\nMxtCsnSeWBb0A6K044HDpKDeNLY76298D+9x+jgRv55quRHwP+jzwsuJFpOO\r\nCa0Vs8H2utqR6FCGiE4hbXQEZsQOGH42HawLprXXNTQ1/HthomLreVXD/8g+\r\nyHRbsMUh5lEiPwLHNxwdkmZm1Uu1HmO/43jzjjV1kyr1G5ESSCVbs8/jHxo3\r\nUaI4rwE4sDOQ5dqHQoRb60NcdWmhPcTFNES9JMUdsO3I3eUkwgJwfajfSiRS\r\n2SEIs6WkVAmV6xRaqObzlXILED2DOjjXCQDnnmx85kFAFrOjBjS1yHdgLt97\r\nBe6aQKTXMajOGMj8JvoB/sg7XHf+VmfK3vC42PdCrjq82d6dIjww2rai2/5E\r\nQ1wsKzqSSwzJlDOlirXwHoxTGNpQTT+eLB2pNxW7XjbjtPUQuAUj5g/+hwAq\r\niAgaAJpSg+UGKYTqzJcnG62o65BoGKvgUZNxtFxQ1rQP+Lkzfc4JgZm1uxq+\r\nHximgSqbeRp/hQhQH0WKHuSP/Ri9j8I8y0rx0jRz8yNVnoK9ncfDoTxLwJfD\r\n1dflr/1704rEtFlxINeOjYgSBZkOla451jE=\r\n=wxXr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d5a11f1c8.0","@material/rtl":"15.0.0-canary.d5a11f1c8.0","@material/base":"15.0.0-canary.d5a11f1c8.0","@material/list":"15.0.0-canary.d5a11f1c8.0","@material/shape":"15.0.0-canary.d5a11f1c8.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/ripple":"15.0.0-canary.d5a11f1c8.0","@material/animation":"15.0.0-canary.d5a11f1c8.0","@material/elevation":"15.0.0-canary.d5a11f1c8.0","@material/typography":"15.0.0-canary.d5a11f1c8.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.d5a11f1c8.0_1661900573292_0.5798201680405797","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/drawer","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.bac992a95.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19d065e66cf888e5c2bfa6389f685bcafd4df7dd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.bac992a95.0.tgz","fileCount":47,"integrity":"sha512-KhxGBjbiuzXlD65nIdyMO+VeG3PXntfbBxhXb10fTV3xbMOc8HCn9SSobR6BpKbciT2lVdDE05P4POHSCh1qPA==","signatures":[{"sig":"MEYCIQCMtHhOkR4Qj4OUGBWL/0KzxcvySwuzy8nhs2TmkAiU6QIhAIGlCXwi3TLZMXpgeitCdnmG+RTmH5hpIY2YazPA2VCx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFouACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhtQ//YqJ5dLO1O884xK73kcyXj7PfTqiJMW7oSVnuIWpq4te/xUpc\r\nd4MckK7pQD45cGkMXhIW6l5J9EcKhL+y0D50RwBgx2mrjk1dCzDOacyMBRyW\r\nGeGgQAy7wp2sQqwdOKU3z+JM+pGzVqvMBX9cMwXsNJduPAtp3CeIoxfEpXWb\r\ndWQoORxfEW1pVmPmAHvXLvG1FQq6JFbo0gWRUvA3TvpiDBXsjVuv19lhKO6w\r\n8YYMQHwBgiYgIIfV1aLM4E/l+hZcyBUrdV+1HNTQgf2jzGZXRiKwdNVRjnqr\r\nLqVeHH86x9K7XCWAFW1WXP8T9To3hICTiEgziMLn5xTXYeel1l7mwdHCkLLx\r\nTQZd6jOZBTMImOSE+DBLZRi61IObLgp9oDSV6F67s933wU4OZWoo/+x90x8L\r\ntTzTFQvLjLcXOE6+phQBJXkGqTzWj3IB5Sg9XBGcg6x4LcfrTFm/r5zwVPfr\r\nFAKl1D/6TD7B7T7YzUVTvGIe/+Rh3DX7Y4NXFS2mvhXoeL6K3qBsW/sYW5OV\r\nlB0ansHFbpEfKdjEbw58bnsJRgPuHK02qYhtIodcRrTsfLBSosEQF3687S0A\r\nouo4aM2NKoiOER0tXIjwGSfAGTRfZncTfNRx9+ooTUkfCGU0/45b/XS7+Dzb\r\np3GKjtFnXLerS8N0zmKzT9aSeHruMr8ut9o=\r\n=pil7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bac992a95.0","@material/rtl":"15.0.0-canary.bac992a95.0","@material/base":"15.0.0-canary.bac992a95.0","@material/list":"15.0.0-canary.bac992a95.0","@material/shape":"15.0.0-canary.bac992a95.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/ripple":"15.0.0-canary.bac992a95.0","@material/animation":"15.0.0-canary.bac992a95.0","@material/elevation":"15.0.0-canary.bac992a95.0","@material/typography":"15.0.0-canary.bac992a95.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.bac992a95.0_1662016046457_0.09179538908765905","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/drawer","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.920d8a79e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9538100b59cdd8c05df5df158944fcb4d0fbc424","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.920d8a79e.0.tgz","fileCount":47,"integrity":"sha512-muzlp32Amf1PPfFwcgxv0T+IpYPP19zdHNR7aNyE0iv2TIXj8VMo1nIZrkfJhfjovGrOuhXVLsSFnCrM04Quvw==","signatures":[{"sig":"MEYCIQDOuRBXGdRMAYGigCkw34GikLtu8DyEUH2Qr2q2Aw2BHQIhAL2riFhMIELRc0ugyRNTx1SvcDwZF/8whG35CWU+h+2S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERSLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7sw/+LCbA4ptoCyKhNWFMDDfSWapFBeEj/K40NxoUna+CKtzFh87l\r\nUJOoyK6e4MP4TxcSUsK3OTEDSTzDsxwrNx1mfuwgxEJ4Y5nwpyZoX4UffqTF\r\nr4PsqmZDZkhCaS6zhWshHptQqkp36JSdKRpNgG8l/Edg1GV6Dlj6K/iuSaNr\r\nqFMY+KQmtZAC3wv346YUq/j8kSXtduPY21gfln9CjipPwYz8maR7O5l+f+TP\r\nWo58M2sfPJtU7OlkdZDwsBmnHDfcsmKOSfv96Rfj9zMchkYJLWD5CyKcpD/s\r\n4A9QkLnly3DLN05MyPc/PeEBz1GodFB6w4LuASLNL7gTYLrGedKFrKnu7f5D\r\n/wKW77mStopS0ui8D9fIJj2gNSGEwkFlaFW7ypwuknJ+4NtZpgpx3pzid5te\r\nYB0NC2jycmga99b9tuOs9SlRj1W2mZBVfg3ARhD/ztZpZJxABdZR3OqAqEYJ\r\nkr51/hlNVBCfPrNV6pVotDnzMf74xSC9zjU4ylu2mlUYcfXa0TWtvgsliRvZ\r\nJGtv5lzmlC0zT0/VE8XnFc3M0OzBq2iYOoJcjziZyEp2kOsZXiFphI4UbEy2\r\n5TnYpk32Uoqbawx/VhI3c6dKAO5u0wMVWRMcPI136n0XPHpkSJqdSJJea0Uv\r\nzrGwFebutBadpO3D46ng5GzSp4w728pE0do=\r\n=15D+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.920d8a79e.0","@material/rtl":"15.0.0-canary.920d8a79e.0","@material/base":"15.0.0-canary.920d8a79e.0","@material/list":"15.0.0-canary.920d8a79e.0","@material/shape":"15.0.0-canary.920d8a79e.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/ripple":"15.0.0-canary.920d8a79e.0","@material/animation":"15.0.0-canary.920d8a79e.0","@material/elevation":"15.0.0-canary.920d8a79e.0","@material/typography":"15.0.0-canary.920d8a79e.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.920d8a79e.0_1662063755389_0.12532423552335126","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/drawer","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.c363f267b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab0b6e071a84145eb302a2d1196707f9cd73e1e0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.c363f267b.0.tgz","fileCount":47,"integrity":"sha512-PFH0S7LQMiojW1sdzObKA1rzlePmrsk9mSBYOTJTE2MB+082bjo/wdsmvYqwXXbgacWxnpw/nx4cF8o1qxAhhg==","signatures":[{"sig":"MEYCIQDpMDu7XCefqXbVifXq3aaotNkG14MWWsqb3aNr9Ip5/gIhAIugQoAZLKx5U6MhHHcUGckAM1C6PT4qtKYvZrt8Dmw7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESH6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSrg/+LopJghaWnz3ZU2W5VT8PMW8QGLk09mbhnikwH7nU0Gq8tzEs\r\nSxYTxGj5YRTEYD63JuS3GhxvvG1g6ukHT8tQQONBor8Ys6rMC5125cCsVDnj\r\nFVPWo85NKad6p1BMRMcpyGLagW/hYHwBhTk1zHmDIe4cHlTryJSirteXc3mJ\r\n43X+1xeDSQmTugIQUy96X9anBfscVkjIwDRy0IO15cUFEDS8g4Dw+Z62PKFp\r\n3TjkrTgqEA5589wvuxlnCFABWbWKM/ptTcH+wyZauWGjPKI30x10Fl0h+h2O\r\nFeKDTZ7P4drR7J+6s/zrASAqs+0OMJSUfX3HABpM8PV1ADuaeBbvXkz36zr/\r\nohEpdcVHJ5M8u+HCfer/lQ5CYWFzGjXPbGIp/21kRLqE8GQ2Qzp9gLdxxx0U\r\nMuiUVq3KKFCiEcSWIwNKL23TzsopnEhIEyA1Wkp/fxgCqta1BoIuRhjgo4UX\r\nDVSseG3sJ7SpCoL2XXatlYN0oJoSHh1MGs4j7kX9ZYHU4p6Oao47CyMerfox\r\nJUp73defpOAFEb3oaxCApai9JDaHh/JhVnmoFtdWKEjmZu6N1N5KW8rJSpqA\r\nk8zSeASMs7ruiTSngN34wACwhbWlQd6W8E0wI03P+MJXtn1ZZtVIx63Z1Emk\r\nZjkE/KjQt81WXnTA3RsGUT4NI806k0piBRk=\r\n=MM2p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c363f267b.0","@material/rtl":"15.0.0-canary.c363f267b.0","@material/base":"15.0.0-canary.c363f267b.0","@material/list":"15.0.0-canary.c363f267b.0","@material/shape":"15.0.0-canary.c363f267b.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/ripple":"15.0.0-canary.c363f267b.0","@material/animation":"15.0.0-canary.c363f267b.0","@material/elevation":"15.0.0-canary.c363f267b.0","@material/typography":"15.0.0-canary.c363f267b.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.c363f267b.0_1662067194418_0.5546017344916634","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/drawer","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a4eb4937a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"603ceebb193c65ef94f6ce9b896b0eb84ab1dd01","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a4eb4937a.0.tgz","fileCount":47,"integrity":"sha512-ZrJoJ8IHzA7Q0xJ0x60pl/no0K/MeF9Z1wBhVNRJqR9SDW57MJO807AkjLoo6dAA4RveEQYWAQ8MGyS08WEAig==","signatures":[{"sig":"MEYCIQCXEp+TClWOSvlZpjC4tgzMHd/JSFyZDLdWMugb9VfSoAIhAJ4DYBHQJdPE2cL2aWnp6USN0Q68t6kIFh2Dno25iLhD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF4+oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWUQ//fyz15DGhgyFsiA6ycoFaPg5Bvo3FY+J5XETsOfT20/XJf9N+\r\nvbbvfq8fCc6YvIBqXTlaf6UFFrgxACJFoJ3J1r7nOU9A6qjd+9DOKhzvZzfh\r\nPjUR6TvFGgkTwJcRKS2IsiwCdYefe+cT/RIY2+1HuC4tXpBLo4WrLviYAUbw\r\nZRaMVkUun9asAf+5QgK7b8Fmm9oOLWlAgQOsTt4ThufbAwlFmeEx4erjaWj5\r\nt+THRSWlJ7T6aMNCcy4ZYus5vFgGp3NtU9FClQ/xxWmyh5lsgIKClKEJx4Xa\r\nJg/YHmty4OO/79f8IPlCVI+B0YnbQxGgsv5kj/95FiB8OniljUcBkkGV6A2q\r\nGvNER/LVPWnrMgHO2YbM+q7u6/DxilalXcA6AdP7s2W2yWW8XjyyW7jhCdaq\r\n3xF5+u+yvFmW9JrkdiOKOeEgMQMo0P4pUSgHGM945qUNSxz9lvYVJuutlBJ8\r\nngyzw/ZQtbRzzM8y3Rcmar8Xc7ctC6b/TWhW9v5cs5GLp1zFxrQnshBOImmJ\r\n5CAIk9mzVLIqpSd9lna+o0Ps4PIXTFzIxBOD+IJs5TKl/NFTY026nyfK5Qi3\r\njdKUKO7/1S1tPM/I+Fxw9ULai01V0dosPIjJO5iGeOQEAqKylOv2f153Zbqj\r\nEWzl980ZyELXlNoCqwU9+9nDu8hLweARneI=\r\n=cdkY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a4eb4937a.0","@material/rtl":"15.0.0-canary.a4eb4937a.0","@material/base":"15.0.0-canary.a4eb4937a.0","@material/list":"15.0.0-canary.a4eb4937a.0","@material/shape":"15.0.0-canary.a4eb4937a.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/ripple":"15.0.0-canary.a4eb4937a.0","@material/animation":"15.0.0-canary.a4eb4937a.0","@material/elevation":"15.0.0-canary.a4eb4937a.0","@material/typography":"15.0.0-canary.a4eb4937a.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a4eb4937a.0_1662488487936_0.023130703644755002","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/drawer","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.4299717da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70253590cc742aacf5f2d8db7d97d5e29c73c3fe","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.4299717da.0.tgz","fileCount":47,"integrity":"sha512-FBBWp4+eEUqhaWObqLXkFZDO3PLB4SgS3borfj3Caet3fbpdYkJGjMMsW7ud+O5t0EpOlzApUNDX8SAtpZMZ5A==","signatures":[{"sig":"MEUCID7RycLscAV1WvHdfUJc/Pg6l31AkXn0C0jzCsREsuaPAiEAlvFPTdJB2dGQI1nb55DSERvjSAMb0u14k6RghOBwvRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMQSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGvRAAngQEALGeDvJD6kdMA4Jx9nQfN6tx58Sxm2/TSf6Pmodk9sUp\r\nMWg3EcG5URsfTZz14Q0aDBwP69AmDFKI8ht9nthSFPl6rmO4v1lDAHcE3bq4\r\nlx0u46ME2ZsDSZFleFVEtEKlbrqpH/jhCLa+UmwtEISGHDFA0KodihVqkT26\r\n5lfjMIMD1F5xoAompJr9cJm95CChUrd9vnqkqO+l4y+bijHEC78TihW+7bCX\r\nu05H0IPChbwEWBC/a8rAsg7HnC+8n51CiiWVJ3PtzOaPC4lAOonluJ7nNVwZ\r\nvtCcFa9zMz5FSyuO/Ol0qz5qik3aLjGGX7lUoriZbr0vZJm7QM/oIzGltTrM\r\nMYTFvE5DH56C85RWzlYsrW2MfGRzV34q8jkJ2ZcrGXn2R6DaYl7RGMQF2kem\r\nucZVGJNq7EMzFhEEch6d29QCBMgOrZ5FFWkmudODTrsvOAVF3ktNDhzwoYqe\r\nrMV82ZgLUe+BSIkleBruzyVgTv1PFCx6i1sPVN2ub7TmKcPPTSZm+Q0mlNgX\r\n62Rwjtjz62TrXCYmOQACjymbKj/AgcJE/jx8sXF06R2JTlGGpyuRx/1HsGg6\r\nxTMy/gDloEjeUBDD7AkLo1kc5q2DPNEWqMpRfWISSzOiRVysKo8M4M03dMhQ\r\nQ5cvNZmgKGazkYDqQygzjTOTiiB8O4nQViI=\r\n=9EXj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4299717da.0","@material/rtl":"15.0.0-canary.4299717da.0","@material/base":"15.0.0-canary.4299717da.0","@material/list":"15.0.0-canary.4299717da.0","@material/shape":"15.0.0-canary.4299717da.0","@material/theme":"15.0.0-canary.4299717da.0","@material/ripple":"15.0.0-canary.4299717da.0","@material/animation":"15.0.0-canary.4299717da.0","@material/elevation":"15.0.0-canary.4299717da.0","@material/typography":"15.0.0-canary.4299717da.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.4299717da.0_1662567442376_0.05814641603967319","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/drawer","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.fa7d8d44b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b62fea77d685003487d000da2d8f161f1b5ab9c3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":47,"integrity":"sha512-KYZbxWkCE61QPxCirN8vY8DFmpQsjcgn0U/zzk09FMJj1vxe4TZF2AG7azWL/JsvTXNcmW1WaM3EGAdJ5B+Zgw==","signatures":[{"sig":"MEYCIQDggbW1ui6v5BC7Ua9LKsQvcCFE07uf6tMiaHKWX5ggDAIhAJkQ7JvbKI4Rwa/b8w2bVfl/YGm2i9si71fDAVpHZ5+4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO8JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBtQ/8CKNSiCLbwL9X2LaNLTPUuYEGzTbOeecnHvBM1ayLmogGTUAF\r\nNRhsRRQuN5lEwDHT3T7s6YI9xmVlZSjLO7UVzz8cGTg5nLpPCsHrPMExamVS\r\n5aaXUlQY4uZbOmNTZbtRsl9s5io/0bzfuhObbZXtkPjDCX19xwQmlSOqwdDe\r\nS5fnzWqrOdIXmWWhhV8Ctt4pa41pXL6Ywg/KTH1vrQFH4lU9Pah2KNPQK6pV\r\n826t1tuvomOD2y3Dew3QBvJ7pNd6DPOOg1Ew+M3sxS68bVAnjEb0FMsXytvp\r\n35t58e/EunFxGSnjUlqeYNaSDNfE7f8khg7+TvktNPIrWzwpWw/g1nKXCtj1\r\naALB3EhUBHkuHsOG28lndjD0kRNnAE44/a/X6A7Osx0Xix69ChJ9E0Jqof6j\r\nYTCQiMRVXZtBqGzN+TmZ6/kkgy4T63tsKsYUIndTd9zJShy58iFAuAyr6ujR\r\n9dxhO60/uSVxHNWaqN1RnyBE2bF5n7BV9f1oWT3m69OgwG9RzO1z4LjAQU7Q\r\ny3fkSqcMASK60oB96EMV9uBWssXriSJqsbAUXv3zn67/Izjs34IURAREdPMN\r\nLRCeXz6HRxQdC6nk7AJCc4Sgf09LRZITwb78EDqNsskMPq4ruME9jdmAOm6l\r\ndkpH98JjgQCiQtJvHrpz0q7R2UuIcE2ybSw=\r\n=f/DC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa7d8d44b.0","@material/rtl":"15.0.0-canary.fa7d8d44b.0","@material/base":"15.0.0-canary.fa7d8d44b.0","@material/list":"15.0.0-canary.fa7d8d44b.0","@material/shape":"15.0.0-canary.fa7d8d44b.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/ripple":"15.0.0-canary.fa7d8d44b.0","@material/animation":"15.0.0-canary.fa7d8d44b.0","@material/elevation":"15.0.0-canary.fa7d8d44b.0","@material/typography":"15.0.0-canary.fa7d8d44b.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.fa7d8d44b.0_1662578441570_0.6190965869725604","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/drawer","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a40e3c768.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39b934ef7c2708aaba26213506b1ccd2a58a9b35","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a40e3c768.0.tgz","fileCount":47,"integrity":"sha512-OYRw+mxJ/UoCY++OBKYlRqLKyhib2TGOtwyU5EUZcc4E1SX2wTL1qeZGuMy0c90QRcQ4DApS2oW0bhZUnMpkYw==","signatures":[{"sig":"MEUCIQCc0f5lq+U9OviY5QJWJmEmBi9Zn0Pp3rKq5+xIZ0hw7wIgcadfurrp0ci78+BEkkwuhfoWyhX8klRTJQTmJZG7FjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5yKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7+A//WI8q5ui1qCS9p1wbX7wgbatgkxHpTSYaP80HhXRgtaylWgaC\r\ng0d8hmZU3UVkL+sKgAyFpYFK+Z8AsNaTUGBg2yQgDZqPDhmN28wNlTWdAJFa\r\nk3Sh0NkKxynSRHBINZAoHILyIGoiMCrL0U677e0hsqqI3n0jOoka/y9A3bkm\r\njIQnhteUtD6FdzCLdPmkV60TrjOIV2u4cR57Zftv38C+GLokaUE/FBil2kt0\r\n2pJaFGYhUyKUUE3VWiI3SvYEOeBDjePv9bZ+l9cOsT4ar9MSu1+EpW40+70p\r\na2/ip5k9rK9LFP/i3P5NuyKO2ToNvNHVPrdGgXo5Guvf8kV6b0MhW1xoyDfZ\r\nETfppCILuun5h4VUup3H7hQ3npTlmHgcK7Xy7OtwoqiVIOf5gH2A4bBuj+lw\r\nl9c1muA8I5clH8dyXJQ2SdilZ90ROgifJYgTMnQZEDyhFdtHjmUYkQVgz6P8\r\njZBKM2cd1DLhj5id16Glm6R2C77jvFLqONnnooMqoPl4w+pRxB8S/VPQR7ws\r\nFuZuktqzw4nxwuA5+BXRPP78eNuicsV1X30kv0GfKoQM99UMgDbRXL10gXFi\r\ntWe4Rd/rs1uYv00mCjrmKBx7+VU0g8dTtbsP9/P31W95ikM2/6fftbObFnFp\r\nLdJF+vTpVqjTXGpHgVuvJHFlINsHtcXWtoY=\r\n=saA6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a40e3c768.0","@material/rtl":"15.0.0-canary.a40e3c768.0","@material/base":"15.0.0-canary.a40e3c768.0","@material/list":"15.0.0-canary.a40e3c768.0","@material/shape":"15.0.0-canary.a40e3c768.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/ripple":"15.0.0-canary.a40e3c768.0","@material/animation":"15.0.0-canary.a40e3c768.0","@material/elevation":"15.0.0-canary.a40e3c768.0","@material/typography":"15.0.0-canary.a40e3c768.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a40e3c768.0_1662753930168_0.622394384966106","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/drawer","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.7ab3cd3c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3ab74c2038b95db026ca89d994bee2105a0c3a1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":47,"integrity":"sha512-KCjLywRTmb7NqL0JBvZgJjlDTgIVFdQoONqSpq/jbvedmzROMcG3YOPq4bYe+tsJgNfxZ7gBiAEwXZwi97ie9g==","signatures":[{"sig":"MEUCIF82f/7JfJCF37cpEswDOeanQJETEYz3LUB1U3b0wYA1AiEAyPU78K6ODXV45k3AKVIbIyS/9Xyqj5fpREPFTERUFvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQbvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZsQ//THBda9W7DwdeVYl+uSxtpPRUKK/SDzlhjdjL1gFPaBkxs8un\r\nkd7gDqur4mIGKOwJlSje4D1ppOG7Ebudsc1vOB8gw2eWBMkhsldo/aowLcT5\r\niBt30t9KlXbvOaEK0rWDqJcaAyAxthbLjLNdlMGpbEo6gT9Xn4kyBwNqWCT7\r\nXmx+HIeDSze/ItOzYcjdy9Y0qpKF5e1MFWNNpihcmeKKzIkSeWuVWDsxsJwG\r\n54J+RAXyOap/0mzFK+NHmhlKrjYdufw3n+oddTrf+7Y9JrUt5GmnCDzJHA2d\r\nT7BK1GiuLFnu/NI+95i+uwTwDt8ktpd6RgurT8eshbBtvEa4eMU+BnsYjwel\r\nXi03QrpQNYRRzE40OfgLTg39AQefLx8LbIO9AkMhDENnZNNsY8viraGUyJlB\r\nfA95Lo9z/MI/fgw3tNjdTa8K7uTE43Y3Hl1CIcFz9kJLPiEHOsHqX7WuHLIW\r\naNcn5lgeHvHetkgC49cZjs8aCSbtqZvXjcAzXcCUNC3P/Bzszexayv6AvlsS\r\nobpm2iZ3Xhgqpdj5cgifXPCOJH6woBj3kBjIJB9O2xghGP29egvnTzcOG4wI\r\neMSfAVwm2pbcmVRfe6GxiOyU+DcSZcX96styDAbpyROTC1maid5ic5HVLCbn\r\nYvmNfEwW1CCXGP5K6wtOlGNKdB4V5K3igA8=\r\n=iuCj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab3cd3c8.0","@material/rtl":"15.0.0-canary.7ab3cd3c8.0","@material/base":"15.0.0-canary.7ab3cd3c8.0","@material/list":"15.0.0-canary.7ab3cd3c8.0","@material/shape":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/ripple":"15.0.0-canary.7ab3cd3c8.0","@material/animation":"15.0.0-canary.7ab3cd3c8.0","@material/elevation":"15.0.0-canary.7ab3cd3c8.0","@material/typography":"15.0.0-canary.7ab3cd3c8.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.7ab3cd3c8.0_1663108846446_0.8090993922856111","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/drawer","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.2860d244d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da635a6bca512971e02bc7d9ea668cb7d574fd35","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.2860d244d.0.tgz","fileCount":47,"integrity":"sha512-/86aOhcBiu1Vhwt60qQhYo3unjgQ7vJ2mI9bSYT2hLn0hcD/eUtTD7EviKCDYEEs0V+gsGbxWweOmrV9L8f0UQ==","signatures":[{"sig":"MEQCIHxoHD7HWY4RXi3XJ0i02GWsuC5ZAnZRy3xDPTMuEIOOAiA/iPVuC+aKmS74snDGQ5z3W1ru/1TsKBA1A06TRm9cWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP8aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwMg//UNyjBxkYRj/LFFCI0kayav75DLekGomDWKY1ZdliR/9Tgg+a\r\nN/WWSM/EwpIkS7QBvkeTm0a92e4ij8hp6gkeYxw9El2fpYeR9byy3hpfL10z\r\nfeKsIz8P8xHX2tkn/mlYsWCG9O6QXBi05VayTXGi3EW1WpQO4nb+5wQIJI06\r\nQ66sFa2LFi2Uu2uo/wCR/KfMb424UBbNxK1/g4dhTyZaWx64UsSfCMx0kAMq\r\nx3CgmKtMgDXRRV8DJDi+cQn8N3Zf0jdq5yIy4ZlmPexaJKXiqTOKN5noUVj2\r\nFIlInOKupoa4sQ9069T6sdOgNLz18hEM5E8gCWZ8Man74Hr3QlFsdnEN5WvF\r\n8RfYlWZx2gHQT5q9OO25wL07/1zkTgUqHTZVHpohuTkDhdoTDgCnS42nbGrJ\r\n7tk8N2xGNi+IHBElcDJFKL3MQB0KJcE6ohe4JnLp63tBKsR9WJtfNvddbwIK\r\ncAMf1re64P51DOaStaHPxqnvLd6HdRGvf1UyiR38rs+UR0z6I9RyEPZxyIHl\r\n/HdDRbj7pSmVzklU3rqSgHfpxD2wHzm49ikfT+J6VWqAeOK9ZPFnP9OVTQld\r\nETM4Edqj5DplbStjaMFHHUfKsno36BQs3Qdq7bCwwx0jXQ+Id2VUlv6bsZ+e\r\nCPIbVf98h4Fy1EdTc01opbY4eJh9bZlk800=\r\n=pTJk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2860d244d.0","@material/rtl":"15.0.0-canary.2860d244d.0","@material/base":"15.0.0-canary.2860d244d.0","@material/list":"15.0.0-canary.2860d244d.0","@material/shape":"15.0.0-canary.2860d244d.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/ripple":"15.0.0-canary.2860d244d.0","@material/animation":"15.0.0-canary.2860d244d.0","@material/elevation":"15.0.0-canary.2860d244d.0","@material/typography":"15.0.0-canary.2860d244d.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.2860d244d.0_1663368985717_0.9102336768751578","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/drawer","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.e8726533c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c448ec65c5fa15c4ae67c9c919a35e21f1e1aef5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.e8726533c.0.tgz","fileCount":47,"integrity":"sha512-UvH1dp3GJRznPEXHdBWUN9ALetXGyl8LclcF34g1eL5KTevcDXCKmpCE/KV9N1SAV7Rg9SUfCPX9Tx5luDpCgQ==","signatures":[{"sig":"MEUCIBOxS1VAnf6Ds1Y4711y+IgkTDDqimXJCUCsns+nJ1rDAiEApSm+ExsM8idvetqDNEVcYYfrc9nlPINKc9/oYaWVazg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKiBDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEvA//b0IJc18e97fkSUQ99CJR5iGq7niH1fwAV2o7onjlRalHU1bj\r\nwRBSnZOrOsKWuzNDHgxJn6enD2M6MJvnTVGedMYumEQuwwRAWYL9TiIRpvcA\r\nPiLpPgdL4PjLiglYzzZnnfdi840gkK8shaM6AU0JZ9ij0DcLd1C9jnveJJEO\r\n91ET/j9AHl1yGMC/rguuLeeXKB0Mbwq2UcCLPsgwOko0Cu7EDILKM+Vvdvp4\r\npyAOdT4k5oiM+S/XDxJ1zNZB6tiGvLIRMyF/4w2pcasRDq8MyMyo2YbFRUMb\r\nuAvKhH/kuaA7M4qRCwV/GtWuOH7Z3zF2upgv33WEvbOJyBCpx94KMw8tngga\r\n31WSMPVf9WGRRXlKQTmmtbH8b1AjBtly6LZ3WWmLVaw+j5sN6wEgo+6uU3gh\r\nGHW0041xHrZYku1ZiDBg8KV+xZ4vC5Kmat9kZIJ0ji7beZz0Ennk+A6bOLiz\r\n9hF8GYOV8aTOrEdyaElTzDkjQ+e+3dL/9imP/VeijmdqyciE65p9bLo4vfML\r\nMXozfJjYzm3gFQ5sefo/DMqdTKMDgybGgxfuA0reDXU72JW/AHApNbypjy6I\r\nb0j+a60Th6AkuGhhTMhI1ekZPdJLST8jxatv4TOpSXXLJkufSTws2j1WVXDB\r\nhODj63HWJe5cSB/Fkc2X5L/QrdxWPdM+XDg=\r\n=BWhe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8726533c.0","@material/rtl":"15.0.0-canary.e8726533c.0","@material/base":"15.0.0-canary.e8726533c.0","@material/list":"15.0.0-canary.e8726533c.0","@material/shape":"15.0.0-canary.e8726533c.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/ripple":"15.0.0-canary.e8726533c.0","@material/animation":"15.0.0-canary.e8726533c.0","@material/elevation":"15.0.0-canary.e8726533c.0","@material/typography":"15.0.0-canary.e8726533c.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.e8726533c.0_1663705154770_0.47034610402286336","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/drawer","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.00d8de0aa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a8b4698e466133be4aab0bd96760e2452108a5f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.00d8de0aa.0.tgz","fileCount":47,"integrity":"sha512-N8auS4y8H+WdU8mwfF0JMn+JdwhD6OacXdm51/BzNml9e7LA/b9jAVKjKiS02iQb9DmTIOAZ6LqhAAILeBFBNA==","signatures":[{"sig":"MEUCIQCiaO18AraGteOLSnAUtHTcoINu5GE4d23Sa01tTb8EuwIgN/EE8T2xDJSWutg1j1OeGo6Gxxy8wg/kBNfKbq2xWt0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKywcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooFg/+NvsGRj/xpR5kKr+YSMipMQQj+2tdvch5tU3W+AJZQXB6PsZ/\r\n0s0AfzsJaEakdAtq4z+0MmqJmXLfRT6oeLJJMGVq+W+0L94yeIY7H73KlRKh\r\nNafaXQTyf2VZ5JBWZ8/bazJ9KBGyZTB3G03fBI0alwh092lKP+gLGNHt5k+L\r\nIr/axJ73ROJuNqP1sWwTPLiJdSa2MgqyrlkWXz54sexAISgdKvOEKcGsReVa\r\n5gQXjZLFtk+GhNdfmlAQmSFR4xpdc95d/Qy8+7R0ZS9obrm8pSqkYtbpGh4N\r\nZGy7Qe/+eocLHhtnUa1IPHb3s2WcnBvZNRgc2p36wkXhiR+FV9ZSkAiYWdCD\r\n+x8q+8Py5RsmMZ25y7ZSQBnRCNKQ3InX0m1fXvsarHP8ofyG5BUMpZefcf/7\r\nPnKL+83LjheIwqnGAthnVBvwDenqshC6gsq4H2Gg5KGe4oSV62nd30MSWs6C\r\npW9dP74i53b4Mo4zinHKe5Y0P6Xtu5w36iUI5c0QHM9fIzhjIfmUGgX7pzCn\r\n2mE5GdxvYutJNrNH9kBK+DoWALW/tvuY7ZvnQtwQGr+xEI1AX+jgH5FgWxER\r\nTJKgsdCEh5hho5bs5LcKi6X3yCvOyuySGwl000c2pnme8/AzaEvs0w643tPr\r\nGxgp9xWUeW/8r0xBG7+fL/wCzY1/S/9d96Q=\r\n=FZGG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.00d8de0aa.0","@material/rtl":"15.0.0-canary.00d8de0aa.0","@material/base":"15.0.0-canary.00d8de0aa.0","@material/list":"15.0.0-canary.00d8de0aa.0","@material/shape":"15.0.0-canary.00d8de0aa.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/ripple":"15.0.0-canary.00d8de0aa.0","@material/animation":"15.0.0-canary.00d8de0aa.0","@material/elevation":"15.0.0-canary.00d8de0aa.0","@material/typography":"15.0.0-canary.00d8de0aa.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.00d8de0aa.0_1663773724113_0.544666738359882","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/drawer","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.271aedc30.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09f9c8d40ef09dc31478776445e6c12806a9283f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.271aedc30.0.tgz","fileCount":47,"integrity":"sha512-Oum0bIlIYcrMFY+QasIKk33NMke6tS1JY1pmIyuApZLEjkuLMNweSTS663Hag9JZQg2+j16dOGU3oQTCM3dFFQ==","signatures":[{"sig":"MEUCIQC0ZE2t3fydK3sK3MIwcw+yi2K4BVGkpNhXGss/sDCnegIgHfC+vFPWc0pCm7kO+8OrtGedrzvlDuHwz7p3D30G6H0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy/PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrS0RAAj0I0/H+TZR2LefNL7k1IOAb0C7Ibdjgtl0FmL4h2jjm7fr5s\r\n1yAUSteSrmDD6jW9o0fBfVHt9oSl++SgwyILjO/2pmn1PwI3n6Zel/6DjSPM\r\nSZCj1ufsUdUgOmifo9Gy8WB/vZkPz8K1YpATBz5y8R4emGPheNjvEH+Eu4DP\r\nAp+ejZcEv5t74LEHISCPDAhj/k5NSuSk35N5IasZfLUzLpZRFYV0MKgE1IhQ\r\nHcGnZBLYuZfTHGDO2mPp5jV5EzjwMNNmuNg3Cc8yGKVVdm8cGLoj1OVy2P8y\r\nUHGIMAGGBb5cfbub1YAmtNeqfVB+Q3qbkyyZPCu6J1QMldXjJbIAR0x8qBUW\r\n5h0UPtb79F0H/lqfI1XONfkZjYxaa7/6+AbZpTWvW5V7UFqzhmSza19FvTKc\r\n68QbhRn3k2a1TlaxFDH1i0KdEdW4AvV0UNwc8YlBaxEJJ3CN7wOPx8HCSi/N\r\nD+wdEZvJk6sde62RGuHm1fMadIA6wxxtiyI5xvnRtkiz82at0aGO3scbffmB\r\nSSFzxLpivaUB5xDMvQdWF4GvYEnlkZ70hA4E41JM8p1phqsTce1HG/4L8eO1\r\nB3E8zCyg0Gn29KQm/L4KarobHAXkenX/m+unNiRsLY/D0rnI79r9GIksg1MX\r\nSJRxaFwBjhaGsVgUljlFUrToaUNV3UzyYOk=\r\n=dVgT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.271aedc30.0","@material/rtl":"15.0.0-canary.271aedc30.0","@material/base":"15.0.0-canary.271aedc30.0","@material/list":"15.0.0-canary.271aedc30.0","@material/shape":"15.0.0-canary.271aedc30.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/ripple":"15.0.0-canary.271aedc30.0","@material/animation":"15.0.0-canary.271aedc30.0","@material/elevation":"15.0.0-canary.271aedc30.0","@material/typography":"15.0.0-canary.271aedc30.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.271aedc30.0_1663774671242_0.6520811500311128","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/drawer","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.d3344c16f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84a0f26f0ee652513b48d0034a095717b6a2aa43","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.d3344c16f.0.tgz","fileCount":47,"integrity":"sha512-H5/r+bAqYSo2/vQHew0ouQCPkd1Rkz8926+28sLcKQzGgeFFGwrMqBepwIy0IzmsVgJrdMDJI22iOjvSlSfA5Q==","signatures":[{"sig":"MEYCIQDx4kyzzEn4kkUgWL321uNtPkkz0vaWdTwNPngv2XwNawIhAIPrICJpoVcHSOxsXWsPrhEw95kP6KGt7FxypVwZ2ufC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCo1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYpg/6A1QIdhEtVHYSTnegU+VX9tPB3fRI2l+ZS1ispqJMaJZWwt7t\r\nihgVk/F5YldLIhfdPHYOX3byJyOIM/15e+J1whBVNJf1oSEXTPFF9+fa1fyj\r\nVW1fTzxA4yiv4PB3bnMWJ5RaKpwPdc56gJ0eu+iS2+F4hBJB7npZuBtCh4t4\r\nxSjipgVpEz8lm/YzvvoTyA8yfVJsU3FOSVDFNGW+yzEZlEHbAm4IJDaamgsv\r\nO15SMsNcckspTTdgrCkpoBoFxtSj109mVbkE5fyLATKES43dT/yDgSFONCJT\r\n+yT/TH0SzjsF9pMRnZWn+k1803TWRIC6c/GNoeOtrZCYoEF6zZuGD2ajl6Dn\r\niV+AB6dyNjJZ5dOpdm+veysessNri2FSPAHasBOJK6A+p1UVjjUEpQFUYCZL\r\nR+X0DfVPO8EcQIEF4byM7siUfK/71w3RuM9cGUwDwnYsmBhAe+MRXQBr13TI\r\nokiAO6N1T5/gA+VE/loRamQ5nvGq11i4F5o2x62T9r8lJppTEty2jIJMzgS7\r\n35Y4Z0YhH1snCXzPhcaQOPnq2m8cx0rVUKpV3ZJUlfl72bYITx/4KxapGPdq\r\nNy6fbKEODYKuBDs+bVSwH1iTc8eZQWem5Yzb5oxuDEjdceS8SH00U/X909xo\r\n7zLua+VSoKqGS6Ngg1Ay/YbToCfH6aQubcE=\r\n=d1y4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d3344c16f.0","@material/rtl":"15.0.0-canary.d3344c16f.0","@material/base":"15.0.0-canary.d3344c16f.0","@material/list":"15.0.0-canary.d3344c16f.0","@material/shape":"15.0.0-canary.d3344c16f.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/ripple":"15.0.0-canary.d3344c16f.0","@material/animation":"15.0.0-canary.d3344c16f.0","@material/elevation":"15.0.0-canary.d3344c16f.0","@material/typography":"15.0.0-canary.d3344c16f.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.d3344c16f.0_1663838773084_0.1959571637545352","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/drawer","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.94f20ccb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cc6456bbfb7a7752cccab7f892aa2beaace3524","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.94f20ccb8.0.tgz","fileCount":47,"integrity":"sha512-qAlEZZLFUvcg24R5m2Z5BhCWorC8y0rd0Tq4rZ4svXWCBmUiw5GnTkEfSpmsIVk+GcMvsoXo3knz99nYDdc84g==","signatures":[{"sig":"MEYCIQDypkMIWIPSn3Sgd3w2UFlvkYAjGfbnbGFLPYegAQaQTAIhAPbXZTNCXeOO/LwKnHus/1YlJryTZOnVuYaFMt4NPMjM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMpiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKHw/+Nsw3BEPuBgOUpllnl5Nh0zMiQKJBZq9/g7RWM/UHejcMG/hM\r\n02y+MbIK/X39qqVqlHd77gX4Dbgcrlx6Fi/XmYZfuHzNryoDKnhk+EInsYKd\r\ni9YmAd/2ay+QEukoBCJTd7zC0DyMtx1byZPL+6klv4Ss1b3waSBWi3G+UyvK\r\nDS5uOJAffmbrCWF2wNl41E7CuQVUwHiMv5jCMGJgnWbY8sNtqFCad9ISa1x8\r\nVL4y3tNgFsu6LK44e2tb+SQFBYMezKBBdEJgZX3QEA8idCkoXUHNwwl8UT7c\r\nSXG6zpbQ/6SHS8CCz2IXnwemOmmzjXvfdtRxpcUg1kudqdEopAB7ov2x1Enx\r\nL8kwFoOoPlJIdh2PaKp6Dft0V0kRo+whea+DGZUIuRHiqhR5/0PWlVZGzx+K\r\nZknTPnOft2SuvBif4Qq57yxFfKDQjIvZpCzpwntBulOz/E+1LnKwitC6MOAc\r\nQQjowQkJYjH6ZpZ4swV8vHULTOAMHnrwOmJXtDbQPS11Eugta4mFGAYwDQdJ\r\ncsFGlX1QteSttOdGpjVz/sjaDHAfCSl8E7lgSoGeRrIhavuIhEvC+Jqdxek8\r\nj83BlyQnpdXd0WbEC9lvuBRIlUmQR4mTdDN1naHXxzAdvLKmsg1g+x+BvuPI\r\neERspnAwuED3AorpQ1038P0NlfVGmkBx700=\r\n=cSNH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94f20ccb8.0","@material/rtl":"15.0.0-canary.94f20ccb8.0","@material/base":"15.0.0-canary.94f20ccb8.0","@material/list":"15.0.0-canary.94f20ccb8.0","@material/shape":"15.0.0-canary.94f20ccb8.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/ripple":"15.0.0-canary.94f20ccb8.0","@material/animation":"15.0.0-canary.94f20ccb8.0","@material/elevation":"15.0.0-canary.94f20ccb8.0","@material/typography":"15.0.0-canary.94f20ccb8.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.94f20ccb8.0_1663879778111_0.9504529145804548","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/drawer","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.81e4cb7b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af57ef201e78fdfb489d3af60b400d2b456f417c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":47,"integrity":"sha512-jDHYPSlj+UKpf6o4kHbLBrr2Lh02Y1128jiaAH7iEGxdU2zuQ82m6tVAW2v/5n65aFpCesqPdjkW6ZC36v8bAg==","signatures":[{"sig":"MEUCIQCTV39vdnXhAMQKKe8cJJkBqI2BqCvku9H9zxdlwomNTQIgfdHKdbkOoqP9UcG2ZVYiF4kwHcVegM2DK5OsDUy+zfk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcxGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2OA/7BQsimuGSEArZXdF51Q7i4OhU7jbKZgIa3qisSR92WnQtujYX\r\nGbLWYARFQijGUGYWJDa4+VdE3zKBE55u8vTx3pVIlIXh6iXJX1h+dbGpQaO9\r\n7UI7gPd8InG2EBnLUj06DecJWpfr7AKreT4U3oQ2WatEj/IV22nliNgAKCrI\r\nemxsbjWSbxFcaLp29Z9an3CDLhrlRdnw+mqW0AfVkqmvgsghUD2w2OfcGeVz\r\nZNk6K9379Xt3PUs3XDs6VDBK91jp2vb4KoT4NMvixPKJlrL4hxjsNnxFjxwg\r\nHXJh9JIs/OZM23HE5T1u93vqpKFgL0L0jBr/BCzmBsqrlcVetR9+d/CGEWNp\r\nw95DE/i45QitPgxWib2Z4h4nsNs9yPCzQErPN/Jm3NmlqSCZEBlm9wyWWYzv\r\nmel+JvcLQnIjwZhGRTYnzuac12k9q4oq4jXQ5bTqVonaeHebVicB57vFBlKX\r\nePxPHLIl8d74U3AClfIVpo8yKgsR+/O1KdXOpb8JQqz8QuMBjiXXv8OPqjRV\r\nGxZRpx9dS4liXMW3LFmhE3kdSeGSu73skYKGIzMELXMH+yMYrO8O6Q//tTSR\r\n+CuLgsd05G5WTqMccqHqWtmvG/Tnz4z/ExA2DrSx/MqRV5/99lGZhBiJagTU\r\n6NYtr3WBbT4AyrQiSj1GaOhK0YDO80XxGE8=\r\n=TS8/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.81e4cb7b2.0","@material/rtl":"15.0.0-canary.81e4cb7b2.0","@material/base":"15.0.0-canary.81e4cb7b2.0","@material/list":"15.0.0-canary.81e4cb7b2.0","@material/shape":"15.0.0-canary.81e4cb7b2.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/ripple":"15.0.0-canary.81e4cb7b2.0","@material/animation":"15.0.0-canary.81e4cb7b2.0","@material/elevation":"15.0.0-canary.81e4cb7b2.0","@material/typography":"15.0.0-canary.81e4cb7b2.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.81e4cb7b2.0_1663945798295_0.0030150810816109708","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/drawer","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.aa85f9413.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74b547ca91733cf22f3454d61bbdb6513e082913","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.aa85f9413.0.tgz","fileCount":47,"integrity":"sha512-A/IEcTvZNkc0ZSk5ljGNkR2mEfkhEtKeuh6LXz9WdrrYuHbNMbGOguqa7LnNZX4oud3AaDwR/xrev2z93GdaQg==","signatures":[{"sig":"MEYCIQCdHA06Ux6AacWXhDBQqlsqR++OZYkE/PX4oBWHuYqbpgIhAMIO+bitGNvbtwRsq9j7+ITbEBzAjP2UDbtq7yoYlPdd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMegtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpr9Q/8CioOKk/i6HLKDsmuklMVQDdDmmBZ8ionwOh8gQheeOm5d7IV\r\nNTYDjdla6hogmv2dY15Q+3VjcwWRh2Bg7o3cbooe00aoCXsSEmPlpa6AYEKb\r\n2xlrmR21TcAt6QgnXi/kBpYmN+GQUExm/rOtV1sC22eBXLVq6jmPGondylxh\r\nLmpsxYOM/Pb+HoOIF09iyKxogcDP6GVMcegf2BYdVgQOM7R9vEZ4mB0Trx7d\r\nUeHAyNjCtcfCN2LXRQMJO2Socr6xP79Mm/c8ro2hmPje/allA/oSD7nQ9jIw\r\nIbUYPdc7vltMX+xSnBeHAlB/kB5UxebA878Vt9Ni4WYTS1e7vx4NzwtK33SE\r\nRUwYyikwVC641I6vAGrlHCxhmr4EqaMjKiktGwAWd76b9rvM12JVNQL8468A\r\n7F7ePB2qUQN4ckzIgdqcB4hzjVLbyWmMoDMsjpItCljmfnZuJqZl7cbOe9Ez\r\nsW5pbamPreY2NG9ps9DD2ivVaqt/hEUB1Sbl2JzjVYUBTsSq2kQdKTCQ7/4S\r\nJPkfUpNUJZHyNax+AmFjnJ8mC8ECXd2s8a8sWRJ2qjUBqbZpKstIfjXcyXbQ\r\nuPF6+NQmfjmwQS/ViXRP3bCUz+Yag3KO6X2nANCRe3U9/lIYKMJKWl775xDO\r\n1FQ/j/qMA36c+LLTSFoFxG+opLjJgjmVw3U=\r\n=RXOk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa85f9413.0","@material/rtl":"15.0.0-canary.aa85f9413.0","@material/base":"15.0.0-canary.aa85f9413.0","@material/list":"15.0.0-canary.aa85f9413.0","@material/shape":"15.0.0-canary.aa85f9413.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/ripple":"15.0.0-canary.aa85f9413.0","@material/animation":"15.0.0-canary.aa85f9413.0","@material/elevation":"15.0.0-canary.aa85f9413.0","@material/typography":"15.0.0-canary.aa85f9413.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.aa85f9413.0_1664215085421_0.24370950029536798","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/drawer","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.7134a7752.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce7667b30eafbae4d6be214b68a5fe9021fc2aa4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.7134a7752.0.tgz","fileCount":47,"integrity":"sha512-vu+VzOW0nVP9B1c1jlvbvow03wqoMRulLjTCBRCVYYb4DIqON+6f/8wk2T4iaYy4QAYQ3ogW/TCGp2CMhavfLg==","signatures":[{"sig":"MEYCIQDgIr3POrgDFlnMSIv9+r1FnUU9hWA50kQdpBpXuEexqQIhAOTgPiEBnJC2qRd4KHu7gryO62xuhxnjCDEXBToc1/BI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiCvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDRhAAnuAc6221m9pYLq6wkTQPujL7Po/Y8uFyYKMV4oGmnhgYj1cp\r\nv43mfbxKI5ql1oZ+WYivHL68J7xS3U8jlk4xMQN8f0fbBv+wtcyKjZ3j7BYD\r\nF+pZX9d1LUaicGyCx/jsz7CRCxDEMy8LyA/kbViBSETfgXTMxHipnuOyywxo\r\nBSDOVKGdIooBD58FgSLuDiDAgNCYu/Tb1LY5b3makPdZl2yof/8yLZS+Jg1Y\r\n+ygiz/3+pMb0oVdakkocZZ0fknrpWOJJCzyvOyp0xxCfjXwKD6JNrVlx5V8i\r\nIZ2YEya7lmD5mquTiq1qPuPITJJR9nwyKmi5C1/Wpn0h9ivPTYROm+1Bi+sM\r\nwGfuVPAUlR87R7mU1Ceshob7nixil1UCYQmc2OkFXomQaiI1w25v3BFNg06P\r\nKLJ/hFNJMVkL6p9qJw8lKgPNWmvRkg/t4442ytJfYUMk0mHdDbfxE874k/tJ\r\nZTRAi3yCzU5lWkzgFmDmXn34BmOfe4uPCujF/2o1NaDlxnoot51mM9mrU0WZ\r\nFdnZh3jPJl3d5KCB6vOPPaiyDQJF5fiYMrf7sfeJoF5OhScFcVaKrpBWDvKG\r\nLJdSXqHR2ANBPm5e9Xv/8fAGHpt8GZHY1KdntZWHuNYOSOlFBphH3f7t1Fag\r\nODtpu8vXTkeRi/QJBRoJyQLH35jo7KT7GQs=\r\n=q7wT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7134a7752.0","@material/rtl":"15.0.0-canary.7134a7752.0","@material/base":"15.0.0-canary.7134a7752.0","@material/list":"15.0.0-canary.7134a7752.0","@material/shape":"15.0.0-canary.7134a7752.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/ripple":"15.0.0-canary.7134a7752.0","@material/animation":"15.0.0-canary.7134a7752.0","@material/elevation":"15.0.0-canary.7134a7752.0","@material/typography":"15.0.0-canary.7134a7752.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.7134a7752.0_1664229550986_0.9187305276833131","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/drawer","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.70b8ac16e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"472ff9d8c68bbd5d1651c3430093c984ce5f2f7f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.70b8ac16e.0.tgz","fileCount":47,"integrity":"sha512-mvh0A7UtaVNrrvNLq4G7LrWz0wcp3d0uLgFmC3awSsSoQP+YELyoS3CUebFiv0LqdqD+v3FTeh1Mje+86B9P1w==","signatures":[{"sig":"MEUCIEWvCH41iwYVnp1pssmSM7e0WXhUVeygQFlrCxtr3FzhAiEAiEk8XqWdXorYyVv7uYOlSqffuhmMRSuWHS4n+bsbAMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM31AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4nw/9HGKRl+4TyXUD1bEG/IeImzdNVy32M5kiIS03AtidlQ61erN8\r\nqgiwOljXe9kNP/nT6cR1rWz3J+70o6BH002au9YDGwjUg3TECFWBxQn3Y3bq\r\n7UT/l0MPaB9Z3EcPVcKbewaq/xbwwUvKcQEhjlOxkWaqPvCGS9CpkwjbEfBD\r\n5tGjsw+V6c7TCE/wqN/EerSrRmuuimYYtMgKzt5bbql952PIh4dupGws2sc8\r\n1t/3hGYaeDyIZNvBRBAm1ahmrpvyi7kEnJbv/YKnLoykSp2+hdwtHmnvsUhs\r\nNpuAorBs7zlK9Cs66DJ837Ols8lKTwd1GPFGFkM7bNmDnhB4bCqndirrByRM\r\nL5EQkdo8vb1zzxKhkX3QMUytWIDX8Xq737NCdDaliXEm339LjXAIum+31Ud/\r\nSOK56k3zz/5nJssgIwHNbXukodawA07JrsfaOuGGyzrcIjqDke4Rf7xSyh9q\r\nE+loyf0GeVBug/WMgQhseowygLa+2tvXL1MR0YAxuM27WJEDiTETm9gI2VsJ\r\ndRlXw4mmSLgCzXNrAbomJzlKm01ocLfVOUNsKuaRGc9rJ1RRKpvp+I2H4jbX\r\nXQAFg9pQpadpc6XeVEgSDwMw7+87bLg9oD+BM9gXmiSeuSQO4fwE2ev1dwU3\r\n13XayD2zi7RBuhYoJ5VKGORgJJ+eXAqYHnU=\r\n=VMDn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.70b8ac16e.0","@material/rtl":"15.0.0-canary.70b8ac16e.0","@material/base":"15.0.0-canary.70b8ac16e.0","@material/list":"15.0.0-canary.70b8ac16e.0","@material/shape":"15.0.0-canary.70b8ac16e.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/ripple":"15.0.0-canary.70b8ac16e.0","@material/animation":"15.0.0-canary.70b8ac16e.0","@material/elevation":"15.0.0-canary.70b8ac16e.0","@material/typography":"15.0.0-canary.70b8ac16e.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.70b8ac16e.0_1664318784059_0.3305287240325414","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/drawer","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.c20d74405.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1475dccba6050ab12a974402df0d64e8c9dcd28f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.c20d74405.0.tgz","fileCount":47,"integrity":"sha512-KVRD6zk41tySjF8mxPwEIDLYKcOoUj48jv2kdkj8NyK87BVQlMhhpFxXHITrpSXUCc96qDOezEGGReBKahWlyA==","signatures":[{"sig":"MEQCID9eBOJhXbnnzUhPamUjngrzCoJUfF3LVAG8qG5n6rI6AiBWsIQ80hF/XpO6ZeAq+AwobFB77a9cY4jq0oVrpOqVVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4geACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0hRAAml6j3ClWW2t9Lfv/LDhjeoZaE7xcMlnZw0J0WdQsFu7ljseT\r\nHva7yDYRU0RCeDBQGgit9k7Jq+9+KDAaWTIjgLiviI56fNysyQFCsdziN8O0\r\nyyjqrXEzu+1X0XYNzElqwWffjbjxiUBGuU+uskfRKy4L0+8nKBSepNR3dC7J\r\nniHu4znGFxspALugT3/zHIH0nWjQFyMrrP4Y4s0YORw4WCdUJcq1t4HSoldv\r\n9Cp9tRRSfK/KyQXkEpbQzLip9LlsKgIhdpwZ4b/ItezDfFSqXLfDmxHQlITz\r\nI9OSaf/gCS7qG6F6fEhSi4JvzvlZhNTs7vPHDRObbEjETy82ACXi2OWsMOyw\r\n8a21GZbTVx0QaCN1ofey3ufJ1sG34eV1VhArkHQfFKbYpj7UotmrXav1qnLg\r\n8PaY9uhhVMzHopr0cxobjQJom2TQ1wcltb+dk//7ExRbqV0oj1ygjuSR+FH6\r\nDjbWDo6MZ4WGvm7CRhcsnnCIk9JJQl2g6Lv34+i/qP/iXebqugFOurk7D2CN\r\nuupu041A9M9Hmzh0tMvjh4tbGsVLmKsIZUimwV7SlT/fIZAjB/tGM+RweXTf\r\nODEFZWeKnGKG3szfduD0sZeZLpb58nfvghxiiMtH1IQsKxuvzoFhl3HmhF3q\r\nIhFMHjljcd7xEw6cIJfZdrLYzCr2Gi9mKWk=\r\n=BQDJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c20d74405.0","@material/rtl":"15.0.0-canary.c20d74405.0","@material/base":"15.0.0-canary.c20d74405.0","@material/list":"15.0.0-canary.c20d74405.0","@material/shape":"15.0.0-canary.c20d74405.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/ripple":"15.0.0-canary.c20d74405.0","@material/animation":"15.0.0-canary.c20d74405.0","@material/elevation":"15.0.0-canary.c20d74405.0","@material/typography":"15.0.0-canary.c20d74405.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.c20d74405.0_1664321566233_0.40958493304345844","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/drawer","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.f033fc8d1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"441db06770baaf622107fc3aa258e54e5463ec24","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.f033fc8d1.0.tgz","fileCount":47,"integrity":"sha512-ffFeI9xnLaLtQ4aBuvU9CZyp/axyR3q8aWDBVtPi8uHUcdu6Vt+dL9+HXnl4NNhe6IV2AoGvfoLzxixlgVDmeg==","signatures":[{"sig":"MEUCIDoakorqMws+pvyS1iLC4mCrTteY+EHh1VSHmEpb6rmeAiEAhxvpKka30ICfuvKrx+2hY3kxKjr83Qp4kVj3/+MqvxA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM45GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5Pg/+PGJUDpuOTei45IV2n1eZagRy/nc5k/u3Mpoc+IsOnI115qeL\r\neR2oazFVukiOW24r3KYiB5vvs8Hcp5QH/ZGkvvGMS9WzewV9rHGyzhVu9IxC\r\n5mJqQPyTXne9lTrbgvSsyJFwfFbZ18M0yKErzIw+GUbAgcsvkMnULL7K8wRm\r\nBHj/rDAXbbV5RWZrMKqchJ1WfOAGRp2ypUvE11H8T2hkBCuPTBS+E4bIKZu9\r\n/ziUlmbPYBMJJplx6/jiQLvuuQzGP45G50f68+RRwrcCy82hI9S1ioG4nn04\r\ngFYzM4Rytn4hkXLbrfH6G8e+ZCjvaCrqollZZP/qPxRKOZKQoXmWq8yhbbdN\r\nPTSezgplHysegi3UtKXJYr08ZEuIfKHLR8IPsjGmqrJi/zNkG3K/YIs5syIb\r\n2lo0ioBsPzg08X8wVjeRWlfv0xhFLW/BRbqNzsu2mzE00T06nLUqF6gGxFzK\r\nvzvdJU3nIsJ5O1KCBpn4cKeWguJRF+13i57/uHfP1TGOfXCF0VMcgoHPkhbI\r\nRMO9OGnMfD/sS27dtcJbfMFFQvbKxqBKdTxNgsAvM68y7R5S3kYyZ3XSRD2u\r\nOBhYA/s8pzGusbnoRbhEy2hvm5bG/A+SC9LSUhHRUlzg92Tby4jtU9Mvv18d\r\n0oMqFWvM7TV0LHhXEDIKcxnKt0uf7HdmJfk=\r\n=VrLV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f033fc8d1.0","@material/rtl":"15.0.0-canary.f033fc8d1.0","@material/base":"15.0.0-canary.f033fc8d1.0","@material/list":"15.0.0-canary.f033fc8d1.0","@material/shape":"15.0.0-canary.f033fc8d1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/ripple":"15.0.0-canary.f033fc8d1.0","@material/animation":"15.0.0-canary.f033fc8d1.0","@material/elevation":"15.0.0-canary.f033fc8d1.0","@material/typography":"15.0.0-canary.f033fc8d1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.f033fc8d1.0_1664323142148_0.28071551233656256","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/drawer","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.8d7ae912a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c87106d9ecb68186bdbfe6eaf63279216b393db","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.8d7ae912a.0.tgz","fileCount":47,"integrity":"sha512-1xFAeQx9rQxiud/Bj39jX81uK3Z+BChV4ckPegZn7ctI9WCUYiYQ9XA4gOivLCWfiTz8k8osSlXtKPkq0Eh3mA==","signatures":[{"sig":"MEQCIGYtOeye/MpGa4f4tiu6nZ2xrksyh6u9PRdilx8gHDU+AiAcmfK8Bvf6yz/uuRfKusDiubChnw2kBCpgHrDtz3lRvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/5xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqeng//XjL9ch8YlmuAU94YFlG0xuhPxS2n7gKYUMT3uMmyoVjHSObx\r\naXTfqUuG5IFn0nqQxBDye/Oq3G2ps9Ci1Z+CPdRei+sklE4C2DqQM/GFJ6ss\r\njupAxT0xQo2H4MQJQp+5uxwblAixVkWsKwfO57XF2FQZssNtOts51X7bWJ+u\r\nMNcKnkmKkosTdSPsNoffkk9jInCHhD45EoTo5l0G3tcDwgcBsbnX7x30XhJj\r\nlBw6PqzZuaYfufk2hv6O43BwHEsVXQJU4lg7eUAK6ric2+IFHzPqtuwwzCfF\r\n1Qs/L+pDS1LQzWo9eHt1qGkAMjQyg6qd9FJBJcxp5HcI2QoLaZAFR9GYctxf\r\ny/wEc3mFdBV6RRRN6YfD15SpceqQ7iPjwVEq459zG5lgSsPJaR73R6bMrms5\r\nQ1YHyQqLgc6zo0P+ImtkUy+P5cBg4mi7kmqoV/4nKvV/g0B+vsbBJmNjejRS\r\nNzk7nowLdKT7nF2jHgV27j3tSeHkgSgRPqBqcOyeWakBVlnOuEzladJ64xIG\r\nad1BNoyEUI4iGPAJR68fdvaDG5/htBJ9Ex0YIZSfS/GPmndaMrr3NiPZBC35\r\nlczm8WdJvbE0UbIIXIvfgmX0ousiSveweBIFmdEo5xBmLcs0G/Hzh0i7ChV9\r\nl4kPP0X3Ti6QW0AL1lWorm2cCgCDGwM14W4=\r\n=oIn2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d7ae912a.0","@material/rtl":"15.0.0-canary.8d7ae912a.0","@material/base":"15.0.0-canary.8d7ae912a.0","@material/list":"15.0.0-canary.8d7ae912a.0","@material/shape":"15.0.0-canary.8d7ae912a.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/ripple":"15.0.0-canary.8d7ae912a.0","@material/animation":"15.0.0-canary.8d7ae912a.0","@material/elevation":"15.0.0-canary.8d7ae912a.0","@material/typography":"15.0.0-canary.8d7ae912a.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.8d7ae912a.0_1664351857758_0.7238901081985134","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/drawer","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.db414b864.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08ba8cdddb1dd5db558db954d23e8a11cb058c3f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.db414b864.0.tgz","fileCount":47,"integrity":"sha512-yWYayEC7//ZsFaADMQYCXM6HputmCErv/rLroz0tgP3afB69aemNGCDQEukaF9NvQrMPciUCoNrL7O52ImgKYw==","signatures":[{"sig":"MEUCIQCqoeGQYX7R79P2ho4g/XR5sHavo3FEx1TwK0RQGCGpIQIgcN8pLJ+jelkAxKQPhYnXvc6uBRKmSCm4uvIxzsTBSVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1009936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNGAaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDTw//fFX0jPZAr9lICLugwkwHQlfA7gzatNtWrWqU27ZA/XcvGKcr\r\nPF3jv0B2VEmdMyPycGxIvPXX+ye+hlCsJPu/Of6KlNFwwybUr6uXv0nk6Cxo\r\npeSUg/mO4jlp3Bc5JIPRPoyQLYncagFs5osK4N829q3xroPwKQnLl7ncLwYS\r\nyk+jWAsIDCIb5P0It2nFHwUKjA+J/jhdvk2two28KOZePsKvsdqE7bvAKSeO\r\nhYQRdcYdtjTZQ22V+LF/ffOJpRr9vkHl5o8rQApgK1zFtupo7V2rsHVtT2KT\r\n+4BGyl/LAMl+kTvLRQiHqcHW/YrYYIcGqy85USGE6MjrR4lvWnsopvNw8VZV\r\nV9uAk9ItOzkE0/lt3/HzsVXPIVI9pVTF2IDrY+KXNQXs1sgw6QCJOjzjMgmD\r\nueLY2i7ZhA/UWabdxNRNwiN7q/M5Jufhsy7j/buejhBuAZlg7eQr+1GdBdvK\r\ntLpLjPVMGr+yIQAFdbFia/2/16DBEvkC8HCP0bWoB8Dvtu+HYrGuTeJAkBQf\r\nJ09MUVi/ARweLAv+q6BLTKlHDwMMzP2q1Lma1XEc9lcwHjuFJkIyUpioO2nj\r\nasEWv32jj3dM3pre9tPecm+GrbyakNzITkCCq4lwmCk+GR+wTF3rooc5Ey4f\r\n5X8NOBkS1jYFrwrC6a7tq3aqBypsZ+QtaLU=\r\n=XDGZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.db414b864.0","@material/rtl":"15.0.0-canary.db414b864.0","@material/base":"15.0.0-canary.db414b864.0","@material/list":"15.0.0-canary.db414b864.0","@material/shape":"15.0.0-canary.db414b864.0","@material/theme":"15.0.0-canary.db414b864.0","@material/ripple":"15.0.0-canary.db414b864.0","@material/animation":"15.0.0-canary.db414b864.0","@material/elevation":"15.0.0-canary.db414b864.0","@material/typography":"15.0.0-canary.db414b864.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.db414b864.0_1664376858045_0.05497595225232277","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/drawer","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.28cc6791f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e46476af1ab291ef396526d508df89731e809be","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.28cc6791f.0.tgz","fileCount":47,"integrity":"sha512-aT+bM0pnT/EFw+HWbCZmGZ1q+cgLnQ73Z1E/FMzYwNTL7XJ5evcibMIqKZomoUCwqyhSuR6C8z69zVHFoapS1w==","signatures":[{"sig":"MEUCIQC9ugU3b1Egjn1jUly5tt+Cre0giH6NDxdIfowOilrPwgIgdArvSm8SsLGXtveRAIGB+DkquWv8RkOOjJTZXribk8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI2vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQahAAmNMSe+iH6UcLlECsVKNZa2txoelMEJ3nh0Lt8GqbXHHb4ogw\r\nsN7klLsm7KoXx0yhTJBMIligXRQtwCVoVPCSZ/6TogyRkO5gtWaJJXFNi8tb\r\nZ+0gevXGUakEOcpXQwLwxQL3iR4ypFxcBsvIyqzxVhdwx9MoyZsRKgR1tdgZ\r\nSwHyb7qGheedJNDfVN7acq82aOBb8NbpEK15qhv8dvD6f0eynGiHqQ7RC1IP\r\nOLmcRrqzx0ZkgN6ON7E9kruG02toAsDK3Wt9klJ1mJtMXvolZ48cBfkoKwxr\r\nSJvX9yWzYU7lPLSV0rRQSE/FzE78G99bii6YEjBHC7ER8IUn7xkMMZuvZ/mH\r\n+3HDQhoe7qbzpPI1NhzBMp/Qoby3pbzxc2hoP5BY190xcX9I92R8AqX0i8um\r\nFQVdefBAfuMYS3EbtbRyusX9bAAuZg0GJs4lh4AgppVRrjtsbSNk8GydRZ3g\r\nrrKOqAOJxuIcvmd9LVkutPZNRCH7uzfgsM3ZMzd+3WS04DofHY502gkuiZ0x\r\nFVBVgAj4hlVRxgIRNzsTAY4gVN+MrEXj/QgYyoQrUZRyXkTPlb990YQsjvJ0\r\ndFCD7V5CkfB4SQiMwA7EEg5iZftBjJ4FH5bqtEGpsWsvq2e9Bf+I49iSnBLq\r\nz5udzSYxYZX6V5djRLhnOE/cib/skOHfuWw=\r\n=tkBe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.28cc6791f.0","@material/rtl":"15.0.0-canary.28cc6791f.0","@material/base":"15.0.0-canary.28cc6791f.0","@material/list":"15.0.0-canary.28cc6791f.0","@material/shape":"15.0.0-canary.28cc6791f.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/ripple":"15.0.0-canary.28cc6791f.0","@material/animation":"15.0.0-canary.28cc6791f.0","@material/elevation":"15.0.0-canary.28cc6791f.0","@material/typography":"15.0.0-canary.28cc6791f.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.28cc6791f.0_1664388527489_0.04249545476171468","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/drawer","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a515a2d18.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a835f56cd3d2accc5b80662e145f1fd16f86c710","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a515a2d18.0.tgz","fileCount":47,"integrity":"sha512-5j4X0mCvwiXbHNSVQBTK4YvN98li8ircO+HbvB1uByb00r/FX8sxn6UAFd65qoqwlfiowDaNma2fFogfa3EXCw==","signatures":[{"sig":"MEYCIQD85gTSwq/Lfka0pLXzdEGZNbCDxfPHHQpA8y/GSK+I8AIhANSFx0pxdtmSn372F98jQpUsGKpP+o4n/au04dwMtm/i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJkSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9JA//XTGFRsKWf5ExrlHL9BQXjtdr+z9btPIpsd/WP/GUcSLpWdPx\r\n9iWH8+UtN1VUHo93x6zkW50iP6qf3Ip/7sMASi8BlQlOP4j+lZgUkoBGcRfb\r\n3cKGOAJkv4TZCO0UnCl19Xm0QdSxwqgBLzmWJYmfCRgdt6J9C9wlMpcBofCL\r\n+XAD+ZDlGXRn2JojObmsEX3NnY7jzzVJQ5iqi0KSBMEPyPYL+IjzouoHCL/i\r\nhaodpVLFKTst2a2oP3ykV2R+VNqE9PaLlEB63oofPvQ0EzNEQ354g6g9GfWg\r\ncZQZn0SeoEkBUn5BVSgceVGgJLRnRoZEAeJlOEIYv7erQ5iOVWmPF+HERuf7\r\nJAToaIXLrZNyS01TUxz8FOROsK7PAMWVBGeYSX8BUAS9xWiSxY/TuMs38U3H\r\nVOap93z9dyDatvCMGJw9C/FFu7PGTa+FgiSVUwqB97l2D+mex7dIKCnyyjDw\r\nKKshc9WRUOqo4DxOKUqKfQEFQktBpJE3gkE/b+k0DefluOZ6+v8cosiB/dZf\r\n5uJ4AQ2GUKMNGSlhfyHswxc58zi7YrFMbX/MlxfwebmAKbacfYToHaXjMrug\r\nutNLyGIHy/co6N0kjWOQTQ1YKRUUADraZPF3rPVsB7D1qhPvX0WkPlPEiePm\r\n+xfmtS+G/o9n+DAI9G2YrUqet/vxZdJxYzY=\r\n=HU7c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a515a2d18.0","@material/rtl":"15.0.0-canary.a515a2d18.0","@material/base":"15.0.0-canary.a515a2d18.0","@material/list":"15.0.0-canary.a515a2d18.0","@material/shape":"15.0.0-canary.a515a2d18.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/ripple":"15.0.0-canary.a515a2d18.0","@material/animation":"15.0.0-canary.a515a2d18.0","@material/elevation":"15.0.0-canary.a515a2d18.0","@material/typography":"15.0.0-canary.a515a2d18.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a515a2d18.0_1664391441979_0.12071353534085949","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/drawer","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ce9523167.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb0658c24cf9fd72be49ef469bb8de90c75bd811","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ce9523167.0.tgz","fileCount":47,"integrity":"sha512-a7N2wLcAEjxn6s0tdFsZPqqfe04BaxVo1+AgNKGRFcFcl/88UUEWSGTGP1O+CgMs86M+7bvazdlPHs421TvFtA==","signatures":[{"sig":"MEUCIEsAgz8o1egqEWCsJDqa2AFkF7va5SLOfqSTjmt9BJ9fAiEAsKEQT7Yi9re2muFR/5eYTOtt72ZYTHpNirrRf0Ov6L0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgDyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmra9g//TCjQEwpudo+tKV+Hz/LWTXP8lmC4bW37Q8KBzxYydl1S2cJD\r\n8yPKb8EpYmXdaImNs1kZ+qQetP6QuoQBnzDBgNeExt18KwhXf4/y5AuVyZzD\r\nD0/VKsXgEelKBofcsEby9ct/SIvLyNgJcDzIhSgBSP94q5PsqYx5R6kl2VtG\r\nnJUoutFQ+no84F79oYXLw5Hq7P5rdI8N/MTo71XEVY8D+hXV8Z8jcx1KtO2u\r\ntkVl7xdpWqQAPRilWNvmCAKTTdNZ8bq8pNU5KISi9x4L5ScfY9P+PC8iWR47\r\neKk6b7tOadot5bf7VS7/RYALRjy1GVwpL3fELuJsf5wbNdmYrA1GKgKu8KyL\r\nXPrNPUAKzbu1GtfwI96R3vygfy2JixwoEj01m5Ki6ss5HrDcY001kn52xD8Q\r\n5HvYGBhzrmTfAU9Z8DNxxPfHVGOx7dFybEHyrEAPHyyLG4KkD4jjGO5e7qSH\r\noMtOueqzXIHPQ8EbKPrVuEE4Tuv8D7SeTS6Gx+xZSuvwWxwB9Q1gvESr7qWn\r\nSlmoSeyJnBXQplL2sjvW5L5xZiZ5TPoRT7kINHZOAD6OWtn4cuq1Qj+Js+zv\r\nvTPTsOR1IHSTmRVzKDeHaxCAQK5WayzPjz+5orchACM+19tTFWDEMnZE7Jyk\r\nZrnY14WYUvaF865GpY/ViirPqyvZJe9C7Dc=\r\n=1Ku2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce9523167.0","@material/rtl":"15.0.0-canary.ce9523167.0","@material/base":"15.0.0-canary.ce9523167.0","@material/list":"15.0.0-canary.ce9523167.0","@material/shape":"15.0.0-canary.ce9523167.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/ripple":"15.0.0-canary.ce9523167.0","@material/animation":"15.0.0-canary.ce9523167.0","@material/elevation":"15.0.0-canary.ce9523167.0","@material/typography":"15.0.0-canary.ce9523167.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ce9523167.0_1664483570594_0.9800048714749388","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/drawer","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b2310f7dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c2ab4310e2adbb688aacb1046354aa8653bf016","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b2310f7dc.0.tgz","fileCount":47,"integrity":"sha512-b+twiCge4/FhPWQnyWrdTPCyDnW0fGPY/Ztsq2ao9oUDte6+3HVRll1hfsOnd87mc4Nb8o7W0TalueqQUnf3ow==","signatures":[{"sig":"MEUCIQC+vdJ5mAG8MjUI9dNRE8tgWTYik05AyoORvp7MQ6XnigIgNT4ThaG8DCU1jrgOuSrfXqNrurrSgLwgCEjFeZcLG5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjUXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmos2g//RM0xoJn2+omsfxjLjRB/0qv/Web5P+XCBq7wyHk8xLjNXgBX\r\np+0el+e/1LgqjHGj0IHfUVbH1sdJZMs45vN2LYyTdm46RTFWp9fkeGIQnUCJ\r\nHsy9DBDS3AX52GKgd6+6oJrwdbv05FdJXb1f4Yf2ZH+jUx5T6NJY+UgUXmgX\r\nEFJvp7qyMEQ9yupuK20YFcYlVLKMUMAssKutojORnT31OPEXXkl43iNEzr4q\r\nYDPG4DgF7EqVwOY9ZxRr23IwEaikQaKwQOfRPGIIzN2XIRvXVXHEPigX24TG\r\nZ6+QfrKwaXUvGrUdI6EBnKLfT3FivInt1B6bQTllx3KfizddE0nFnSjIKaMH\r\ns3gUKERosJo8KTUbyry+Ul+ZN1Egjz7Vt35z2EwqCWpGJHFLBdc83WnG+1iG\r\nBgb3mYtVVSJA4JIVtzUfiSI9LnzQz1+sIwuc+XF1iU99Xsr4uvnpVXVWN0gW\r\niNCQxC9Bs9C4hmdvlMSC5iyS3JZenW+2B5wlqXqQyK+sRFBQI4XqXCcCoYJL\r\nuZld0wkc2d/loGdDLIdlIptnzjSJH8IcpR5B+UtvAK/TeRpgbvlp49+UjXq4\r\nn0VwHOdSq12sJGY1OI/nLPFcregd61uA0/tVjIKiYIxm7WITLvBPLBjhJmyN\r\np7t8yEhT99X1OmkxVw4mR4w0/p5sHfw3jMw=\r\n=JdT5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2310f7dc.0","@material/rtl":"15.0.0-canary.b2310f7dc.0","@material/base":"15.0.0-canary.b2310f7dc.0","@material/list":"15.0.0-canary.b2310f7dc.0","@material/shape":"15.0.0-canary.b2310f7dc.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/ripple":"15.0.0-canary.b2310f7dc.0","@material/animation":"15.0.0-canary.b2310f7dc.0","@material/elevation":"15.0.0-canary.b2310f7dc.0","@material/typography":"15.0.0-canary.b2310f7dc.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b2310f7dc.0_1664496918825_0.12395710539498261","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/drawer","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a44241e54.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32ce41ebf4f8f4e638dc872e8a980c8d50fb1a27","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a44241e54.0.tgz","fileCount":47,"integrity":"sha512-bC3hp5EokwAYaOU5xpE9AB+Ja8/g7CQLXEb/oXlpAkBoLK+cdXm5lnX42+y3C1HZ9FVOc2kvdVGYXIN2PN32rw==","signatures":[{"sig":"MEUCIQC0s6OQcvkumSkhTOSgre7vtUFBVthcHBGhWhqfGbsmZQIgcc/RkfuJpuyzE9Rm4zgtNN7WuYH++tBp8UnsBA8nD00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqdNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8HA/+Kd0GTFt5wYrTpUf2IwkQtatrarn9ie8FqFETgOt1QRRIwXMq\r\nWE8BNilz/oGipcG/sQYzrc8GK6HMUp6RsQWqepeMUwtQD9aZLSLn5hxNXbM3\r\n7uKTUftaWWUW4l4/jC2IQX/HmPD8mB3Jl6RT+Dzn8Uoy6cADHZm8WlruqSun\r\nvH37pfqkeML5iLd++7xTJHpTLBpqX9u3p5EuVmZCWQYiZoj0C0dDEf4NRFVH\r\nYr4150EDoNAO/aT8RUkrRcWJ92K6By2pRA2hDzskzFU2ZFvT7s0L/9yCOJ1l\r\n+weUTQjXalmttyXEpOc8VlONS7XutJ0CEea8PrlQ5Wq4xiRYe8dxCB1erOZ5\r\nYVedqx8IHi6jWhs9RPhOGnyr42vgI3r6bJjkVU7Jqq8gNWGbhj4ElHWwLTq8\r\n/Ml9+KMfUhrQfCVHMScXn929FrdjnxyluYxxmbcMVc0U22yDpKQGuzW1Pl5q\r\nBto0XIB07RrlAmqdtP3t9uIQddhdu95Zxn0LsPf+ymEGGEMKqIVdqG+xJEHa\r\n8dHeF5QulujVzMjrB/me1+9K9/XOGzikaFVwQVr/AtIaZNVzPFDR6G1OYQVm\r\nIKPpgmdFzef2tmA5oN1qnVMFaZIjLgI2nOtye+WnrPwr5OjEwlHzIJoFkI3a\r\niHqkH/bpbLJdbKnBB6gVwOTzrMz1/En9WIk=\r\n=HBDh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a44241e54.0","@material/rtl":"15.0.0-canary.a44241e54.0","@material/base":"15.0.0-canary.a44241e54.0","@material/list":"15.0.0-canary.a44241e54.0","@material/shape":"15.0.0-canary.a44241e54.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/ripple":"15.0.0-canary.a44241e54.0","@material/animation":"15.0.0-canary.a44241e54.0","@material/elevation":"15.0.0-canary.a44241e54.0","@material/typography":"15.0.0-canary.a44241e54.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a44241e54.0_1664526156794_0.6613768619845981","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/drawer","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.0ce81e115.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a68d09f1e5e03e03d912d316551b8e6f8d95219","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.0ce81e115.0.tgz","fileCount":47,"integrity":"sha512-acYsBbmo0vQ3+5xoQMZQt9Hj++JvNQ04dPKgHT2F4CbYykS2PIZQYcL1GSfdU3TpLGxcjmOfAtt0hOLIiSRpDQ==","signatures":[{"sig":"MEQCIALPgGacU9v2YiuFIDV3+lowgryNxZHtnua2/cvUpvFrAiBpf8Op8IVD7EPIDTgaUkxa9vLoIzGKau0j2+NFoqpsDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzNIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr23w/+NPdit33Z+BcRD7OCX9zKlOXEZvZMqCFLtnlfpfeYY7C2xN2H\r\nku9bCViazfKm8b7l0wcVZPhchMh97tZlZSIeR4d5Y5cSiH/6HGJGwa7m2Yq7\r\nPgp3GPPmK92rsKOfv6JFUpoVY6geGWrjm56GBUqkdz7VFBaPYi2ov4zJjBut\r\nSDQ/J9Aso7xZ566QHierDAwySKczKmbpby5vpbbQw5vllFHQCaTlZ/075xL4\r\nWOSntxckku2FvNj9/108H83boN/t/ljyjOAarWu+HR1NBV5biWYnofagegYO\r\nKhnjMtsyhQT6yhCzFKMX1Wm0aBoYOXUs2Q8RZiNUDYSpSsEq/ZXv1tCQpm3G\r\np+54w8OQXGcdeGs0CteJZsX7+4ym8u8WFA7V8Qs5PvSpJiaPDFQSjcnsg5GR\r\nhjhHvB2ESbZJd+gtuV5YtZXDLEc8iXfTmYbq2xmqzcaLd63LerEmzv0CL8ch\r\ncMQmhUJW2GBGzuYd/uzWRizxcF925ynsq3n9SyCm8KGy06d8e3Nngfihhd/M\r\nBuwZMAg4P5PxB54YgR+bLj5Wlrf49ojNSD0kLNSN0JU524fQDtIKUP5NBPgV\r\nZxnNrwLkFfpqFmNRLFTj2UZyIYfBQXqK0aHUcuDvLS+P1EniRq3rwJTw5EUi\r\n4u3b+8anP1IoCXTocg8tM1Zxp613bIj3Crk=\r\n=oAkd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ce81e115.0","@material/rtl":"15.0.0-canary.0ce81e115.0","@material/base":"15.0.0-canary.0ce81e115.0","@material/list":"15.0.0-canary.0ce81e115.0","@material/shape":"15.0.0-canary.0ce81e115.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/ripple":"15.0.0-canary.0ce81e115.0","@material/animation":"15.0.0-canary.0ce81e115.0","@material/elevation":"15.0.0-canary.0ce81e115.0","@material/typography":"15.0.0-canary.0ce81e115.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.0ce81e115.0_1664561992250_0.3436462561630942","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/drawer","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.3cc30f6ad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21965a3fbef9ef379096f411b2a38c44627f3e22","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":47,"integrity":"sha512-XoOA6FQwe6a0jWbQX4d6mBGZlt67AGf99MncF+z1K/gbL820kO+hzcXWblO5Q3na6zBkAJ5RnLM/tmoQlCWkpQ==","signatures":[{"sig":"MEUCIQCQ4+Tenp0oeCmE6ih2ORpgE5TMOeOh4LkNgzC4yoTp5wIgLNrq3BEJtIkGrpr0HfqSRJAeOfqdpFTvpDV2On29p9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGuFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSZA//WD+r27OAm9gqcTEIunSLDR+5lQ4JTBiEJTiRf37SE/0ZHOjJ\r\nfC0cT3t8Z9sMQh/yo55ksWRP5WdX/1eP8eVc11wes1q+FSyNu+yn75vWICAR\r\n+Dg+NzKnD3xRJYN9NiUTCeNTwPjUluTVl+AyQAH6wqF83zE6tnuu5XArs/Zb\r\nKEDKZISNnQg5bJyI0fz+kIrdVBUsXDv8+Tcn6AA8vD3Fd8ojWDV4Af1AYnME\r\nvXfEY+juD9OBscT2Cc+g9EPhegxFlfhQUWchx7ABxucqG3Bve7i78DQBFRDj\r\nDAvc1GAelNjsZ9vwpJ0Tg+N2ZELLzzKeJRvE4BxRIQa35f5vneac/8RXUCvz\r\nylajRU5mZ8ZwHjSTtmZ5F5MfM8dmJD8K7ONqidaHa0mHwW7lICHt7J4EC/C1\r\nGo2KpwyC2maZ0plltoYIQy/2rr92VoG0R17PmSToP2Ckkx7lW0Yx+Hr5UZSM\r\npdFZSjIK1qn1JSvVGmIP9EajualyEDCg6E8zpCSZmHMePVJnDijrQbAbc1NZ\r\nGNWazT9pZHHKMGgnQ5o45XxFS3q0vUOwmQybYv0FRIgaArRGnik4Ev3TzeZ2\r\noUKYycslb2RRi1eLvpWxNbj7q80GYpUVCkebfpO1qM8Onf45sEr+8NsINOSe\r\nVw9OWUBZ1nhRDWnmeW3AIfGzTeylYUKyoVs=\r\n=xyux\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3cc30f6ad.0","@material/rtl":"15.0.0-canary.3cc30f6ad.0","@material/base":"15.0.0-canary.3cc30f6ad.0","@material/list":"15.0.0-canary.3cc30f6ad.0","@material/shape":"15.0.0-canary.3cc30f6ad.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/ripple":"15.0.0-canary.3cc30f6ad.0","@material/animation":"15.0.0-canary.3cc30f6ad.0","@material/elevation":"15.0.0-canary.3cc30f6ad.0","@material/typography":"15.0.0-canary.3cc30f6ad.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.3cc30f6ad.0_1664904069180_0.9314912103487043","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/drawer","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.d9cf98e60.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4c4eeefe6aa249e112f25d9d2b247457ee12156","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.d9cf98e60.0.tgz","fileCount":47,"integrity":"sha512-kX8/UBNHyjIvXbw84eoSGz0vKV0BNmwaNhlI1zAPh4DI7+GdISZEMitHN8CATzu2Km6DA3h1qoMXCO7FDG4bTg==","signatures":[{"sig":"MEYCIQCOvchlAfJPDvRFl3O01uSV0VdKQAD7EnzlFyQlIpboGAIhAOsmMpxeIeeVz8dY2B2Uy9gaBTAZgdOsK+zOqjH0Ejp9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIPuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6kA//ZPfSp+/K3radesjTgxr0UEyqvJ+M/6F360LFnMGIsJjCrWFJ\r\nmqLZOTrVre5m1RfEBd6t7G+XhgXzTsbjaLmO7Sok1qLcKIIOqoqXpY1kUD4s\r\nBMOVbIa8erGoqVe5xZ5e5B4x1qhCgfR0k/AGF9UZ+FSmw8WEX3XHnoCYDOXx\r\nQtec4FX/jVh0X4R9w7xG57rRhykgsxqUmufRMAl0xMcLJC4Bnk1eyhqCDbjJ\r\nzU+hgMEmowOfjgliCyTktALCVMUyCaQ0VCNOGzSYHBf2Wt+shQDDLdlVjGtS\r\nGEN3pnlSM6RFyJ6H9UKC8a/UkzsZEhGg+ei+92c99Ec3283Y4Zl6gQR6GtUk\r\nmlQcWHe+uBVz51pX0WC+CoiZ2Sk7IrRxYgzEzJ7Y+GSRz809twSI/ztjzQCl\r\nRnzeMTw6PvCQETavTlC8BQ9i3RqKLw1z95IvueendEBXuqtzB1LF0s9sOsWF\r\nT/UxijDTU+Q06HfVn/wbMUDbRvTK6ZKDcRO1jMDbaiSMzVUgPSjxlJXUcSxj\r\nMypysX9GAON4CavVCMEO+IqgUOaeaMExjI/O70Fluhlk3Wcj/dQ44yCzYeG+\r\n8vtiLT8juWZ4VLTxKvwIHROOdFbjGaR4tvqECb9BBKSt8MDbqA9l9CAsp5PU\r\nQXJCFWyuxDNcJEPu1bwFKQvED7ZVGKyUGEo=\r\n=TmMv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9cf98e60.0","@material/rtl":"15.0.0-canary.d9cf98e60.0","@material/base":"15.0.0-canary.d9cf98e60.0","@material/list":"15.0.0-canary.d9cf98e60.0","@material/shape":"15.0.0-canary.d9cf98e60.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/ripple":"15.0.0-canary.d9cf98e60.0","@material/animation":"15.0.0-canary.d9cf98e60.0","@material/elevation":"15.0.0-canary.d9cf98e60.0","@material/typography":"15.0.0-canary.d9cf98e60.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.d9cf98e60.0_1664910318195_0.803010452289997","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/drawer","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.d71935c8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10adff40b0b57d6a58ab21149340479dbaa90ab0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.d71935c8b.0.tgz","fileCount":47,"integrity":"sha512-WhgOKJkXfOBdc/mCetB7Al8MB/ixHB3s5QdSe7xkgBeYYKcXkz315oHJEUyq0GR3hZVA+bM4WsR2qU/T7Rtgqw==","signatures":[{"sig":"MEUCIQDABYYkRN2iTz345X5a/ajRbjeKOIKn+XiiPq3du9aN0gIgOGar3iKKqvxIWGaxqkIvmUKOlEXPJrtaw49SAkV6tLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1008976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo7ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOnw/+IGCOo6j2gY6y9pToHzNq6m+yoh41qxPIdniHlkuibpmWsfuL\r\n28wyTW9EuZ4l/1sHIWALAu3t/XbeR9oMAc3cTWJAoUjWK0TyTANUZA7C6phG\r\nAN5vbqgXMa1+WbXkZo3DWaLzWXE8sQBp5qwZURlcU1mKlYkNp7WMCd8r224L\r\ne8c0r1acWBPezM/9RDex1/1wf7b4kNw06Fe6+XWk1EdDFpfvwtQ/QwbUVqrw\r\n9kfcXDRxH/9nKUSGKeM79Mrq3KFxQtVBjCIS63H6lAkXxiKadaIFYNKnxuCS\r\nFTiapeb9oQaQrrQpsKyBHfXaxdtfIRhVNhBAOVLU3b/8ncLNYtY4K/TC15io\r\n96OM/YoYMyhOrggWM/sJE8cwPXFFdv935N6l7VZtfl3GB6v3R9IxOhkC2f1/\r\n3b/Soj+x9lYom0FuNPctp75sJJHKADISWJMu9C3TNate/WUv8Vj5+duzdL7U\r\nmGIxbxcMStsg5sSEwCETCUcqInE+d80jWuiirp92vZgXPQyV2FbH3XmHoQbb\r\nzzIidCFPtjCjZRcDBMMsfz3iFRnIm3uk0RaJA9UB31zqWQbFT/GP49YjwClv\r\nWPpSu7+znuAXDL7nKGahofDMkwXM2GQ8qm+NMP8T9L8Bh8PqTCeAZNm+vW1I\r\nb2PVYA0EnHv4W5wziZ9iI8Tsrl7G50xSQ3Y=\r\n=Wj/V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d71935c8b.0","@material/rtl":"15.0.0-canary.d71935c8b.0","@material/base":"15.0.0-canary.d71935c8b.0","@material/list":"15.0.0-canary.d71935c8b.0","@material/shape":"15.0.0-canary.d71935c8b.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/ripple":"15.0.0-canary.d71935c8b.0","@material/animation":"15.0.0-canary.d71935c8b.0","@material/elevation":"15.0.0-canary.d71935c8b.0","@material/typography":"15.0.0-canary.d71935c8b.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.d71935c8b.0_1665044185181_0.03427564742045819","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/drawer","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.49c56a25d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15f2fd1b0e9875b21839bba51a09179c5bf4a759","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.49c56a25d.0.tgz","fileCount":47,"integrity":"sha512-GNupaByti+OQojx9tYLdkMsVI7+q1nb06lw0Tk3odQx0NR+zGawty9JrRj1jwkB+t/NBFoeLVC6RRPS9gIG0kA==","signatures":[{"sig":"MEUCIHV0+ZYROJxxqxjjVvv45H4hmicechEw66iFVi2vUguqAiEAgJ8lFfW1liDSA0dmkmUl0AL0My4kT+rKC/m3QtqHbHw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyPqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrThw//VRp7dkmApsteP1my8/8l5hCns3UkPIau+E7wKc0mZhO4WCmI\r\nLqqgWzV+PQ/k49Gitsf94jX/+4GlgLxfHElvHdbI9Ni6tQ3+RmAq0WJM5MT0\r\nGuxWxVjNkJrfEIJcBjOkShU+3H5yYzPO5/cinCvywdAyRZE4lH72n1502daC\r\n7DDYE/tiJksDqXRItS6oXeLJbo+d0zv8NJ0j6YyFWjcgux2lMYOOitJdG6de\r\n/qIN4TuBR8RsWxVZBt8/ESFmSoQ42qxtaPPtY80JdVezswwQObPg8xXLTvXq\r\nnXAghud4dPHossi2zYgY1oni/b29uMJX/OixyknEyk7Di3brSXHWVaEQ8pRy\r\nAKOTEiGBjHg+Q0ITm+36be5D0EfLJyGeBwh6EPky33RyKB5QxI1Hil6L6sr+\r\nJTgRxRcb0f4huEY20ipaaBmuk1WMEKEF3L2Y3CEh6vDfIbib2ZerXbLLazF3\r\nS3yBgsk/HkH9/nuHw1UAJ3bkZXiSYVJ0CrXqMY01u8bUV8TNqqWjr3uoAo0R\r\nU+f7O59iaAHyTcpJevngqoNGffd7dMsJQH1678D7ySDBM89CYWouYpx8+Gpi\r\nVEIgTsL25yLLHal2lQGDEJ5olkErHy+0PTxL+vq9b48hlYwAreIneK6ITXw5\r\nkWlUrzY4WyVORaJ3nGZ2ghkc8+ue0TWPHpM=\r\n=/vq+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49c56a25d.0","@material/rtl":"15.0.0-canary.49c56a25d.0","@material/base":"15.0.0-canary.49c56a25d.0","@material/list":"15.0.0-canary.49c56a25d.0","@material/shape":"15.0.0-canary.49c56a25d.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/ripple":"15.0.0-canary.49c56a25d.0","@material/animation":"15.0.0-canary.49c56a25d.0","@material/elevation":"15.0.0-canary.49c56a25d.0","@material/typography":"15.0.0-canary.49c56a25d.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.49c56a25d.0_1665082346054_0.04580810368523913","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/drawer","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.07acddef3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"132162d5f51c019210e23c56aa60e7136c954e75","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.07acddef3.0.tgz","fileCount":47,"integrity":"sha512-GWWjnJqkzftRB93PheD+UtDOWqV0LbfgC4LvVoK/0y5uwxBzhwGPWAfMyHGcu98f9pEgU+/7ySgSkoagzBAV+Q==","signatures":[{"sig":"MEQCIDXL2tzeu4Pg38OKX1J9MBmBBSsLNYFoCPCrUTRdE3brAiB7lVbF8aFlKR6mg0MbRjaGQdvD2xyj04hRD4B5WXfjjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJyAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSphAAjgEOaQ7Wk/o4iSq0R/REPwsCwUucYzEk+CLPtNDjGo6gj/J7\r\ndeXvTtLRU6yaq2kfJgIqYJ9HdiZIKwZ+ji2m2PL6FBEAEFxMSnNObmETINtF\r\nE0d6jd/YdX+S+PSNYqHHI1R88P5upnzUyn7kpVbkPZQmlfE8x/jRPfx2Nnus\r\n0bguZ1STy2yZfM6oeMqDluZXbjgeX1gbKHKVmGUn9e1G5X0xuzxwVdboX3fZ\r\nAWRQ/h+70OaDwQ+GHfV04DNCEbP8UbgpsX7ByBvfauquW2YhBT+aW/4TyawX\r\n5kz8D+uAJ9xcN3lOpQhKm2zFq8hGPsfp4gvsZU2umxeMprfUMEQZfMy/KkAE\r\n5KVbAvNqoPJMDQsPxlRJe4FTnmusbJjXCb1g+TF6yHc8qzi1w3w5NSzYH/iT\r\nzawVpbBmfslQ66/9I4cHMrk/gYoXXFnNgRh9PlOPZ1qYa5cMUYFGEGwiu9YF\r\n9CqWCEphhhXmSomoaFOJNhS0Vl4h0uh7/iJ8HgYz39zpi1008lafSiTmSuxF\r\n/i3CBo7HFe/PiPpULiGe2YlXkTWyMFWx5R9+qwLguEmuAeogOtQAw/KfYZdd\r\nmbrwiyR7ldkpV3oKoA6Fu5EUoJl9MH8iR0kxuDXEsjwc5kOoZ/wMJvM/W070\r\nDa5ivh7SmSL6FYFWydVYXyypQsIbiEJrDy8=\r\n=R2M5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.07acddef3.0","@material/rtl":"15.0.0-canary.07acddef3.0","@material/base":"15.0.0-canary.07acddef3.0","@material/list":"15.0.0-canary.07acddef3.0","@material/shape":"15.0.0-canary.07acddef3.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/ripple":"15.0.0-canary.07acddef3.0","@material/animation":"15.0.0-canary.07acddef3.0","@material/elevation":"15.0.0-canary.07acddef3.0","@material/typography":"15.0.0-canary.07acddef3.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.07acddef3.0_1665178751470_0.03377153035109037","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/drawer","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.1c74eb2c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcba9afd8e6510b4afc7567ae08af6a8dc9a53b1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":47,"integrity":"sha512-BjjS8aW95YO2QSnI7Ti36Q0sBt3914as46T6nrcvt5GomhaYjREWrX9q4NH27NlE3WrzGxjHacg9ZDgcge9+xQ==","signatures":[{"sig":"MEUCIQCagQNm+7xTWorDPkx3Jle5U2LY7DD23l/tXZPf7cEd/wIgSPy4B82aSzNSQuiZ+llWlAyc9Fuc/nPro/e7FL6bkUo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKCyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrj2BAAonvqdSFyOfw350CsAqrjkKKWj9eiwrKWuRSD3iwsVtO2A8Yp\r\nEUKsfiTJ8jtjlHSu9Uz9rsnVvlwnh05sCVwWAUrbbMf5UKZlmEah5NFwWOeI\r\n/XHgKLykpG7KfbufTWXN69eQmVBEhfzGNZDKPWHI+sRLpblwCNti7cxGgE8o\r\n9G1ZNrokaAygFT7r4uDNeji5DM6mgiRH+MDb3voa878lxxbHQnYAIubMIPPh\r\nsR6CdrbsxUJaqkyg2w9VZMqlwgFjXb3Ll4t36W/Q/cHRIba6nAyq49RhluAC\r\nvcx9quBLMmN4iHFv7tiAHOJ8BL6lZ8DeFG94e9bn60H0r78Xf1FPDvgea/T9\r\njK6dd45Y5fBnAWKKXUvxJHcPqE8sOfEnITdJNRV/UwAvy7Q9UY0KBU8QJi7L\r\nPS3r9M7hLdWIFT9RkRpjPnKysny1NbYA/lKbHDK2HqAVooz+5FpWvSuoLOo/\r\nIADCa0JiDGbmtiRyr5ypQasMwtRbq8zUyR+N9tAeWPSjAxzpTtPsRGxwtuec\r\n5IZImlDKhAWtBZ2pW7UOtXC34a+hh+ueOpdYaqpkwX6csHz9RsvgViusFbOx\r\nSAcwiVehIiGfG7DYK5y5x62NQUSRCrv9MJk0z/z1Qag/18nBjvSvL8Mb8ccm\r\n3Ao74pTDqc051XGCnhYQkvsmcmDbZMJvX9k=\r\n=hXzt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c74eb2c0.0","@material/rtl":"15.0.0-canary.1c74eb2c0.0","@material/base":"15.0.0-canary.1c74eb2c0.0","@material/list":"15.0.0-canary.1c74eb2c0.0","@material/shape":"15.0.0-canary.1c74eb2c0.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/ripple":"15.0.0-canary.1c74eb2c0.0","@material/animation":"15.0.0-canary.1c74eb2c0.0","@material/elevation":"15.0.0-canary.1c74eb2c0.0","@material/typography":"15.0.0-canary.1c74eb2c0.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.1c74eb2c0.0_1665179825903_0.23131414931474636","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/drawer","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.dadfb713e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0527346905de58c1af43fe5b20296f6ab86faa8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.dadfb713e.0.tgz","fileCount":47,"integrity":"sha512-TCIMKp+Wxh12r1gLlM8s83TyTfnIlaD4dbE7oaJyYiwZv8ziB2eFFiqaLUwVgMkjBBx+g7XgfhcR4S+TXtZY1Q==","signatures":[{"sig":"MEYCIQC7P4L0yN8jVzoLtLHliAGACATs36zS8BB0lZpCFuKksgIhAN15T7xCo+PITeoxsZHV0Re9cSTlZ1eZKNUhpg2Nz7GO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQWMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdDA//T4+bOvPte7l/+ySdM7LUO6k3w3qVV7ATn2o7iSO/XlH6/Yo/\r\n2Lg4MpBVw+9bZiEEGgR1N4MNIuC7B7Lk60I6nnrkWL9NMmeqHsLUR3LFNBCp\r\nhI/xo43To82bbh2n7TfqT0aFMDcSP/cUqiBuS5kirmCEb7wt2QkA3qmoa14F\r\naSYl5Qs6EGL8ET9EnZ5MeEvnoidmoSYUTkkPM/eMPN7+WSS4DW8Mc5Qukogh\r\n/RG/h8f+pV3olhoyI7JKziy/3Rm3nbIdMw/wWq3gzmYGqLC15ZyA7b50aEeu\r\n5kh+TVg7aQaEfTpScYGemkjzD/7lNVkA4o6M8SHo+qRIEu0M0Sp16MsUViuo\r\nXFQIi0laUdongECe8ntqLaRpQwsit4Ncey2sLQeS6S2xIUfBxJUpH61pfQND\r\nYJQjtGPi87SlgW8D6zBJLmtSyMtPSwwBOFjxAd6wAp/vrDDMq2Nzc67mhiL1\r\nhO+h2Q8Rwr/GQNQa1p8j8lNULfFcjak40aR8yWnZAlV8BFdBAZbNpCQgQ19d\r\nrM2f3NDhL6hFyY4FHlQTfUFn+9O/ogueudSLU4p6kmDiv2xRlIdOQ5syebd8\r\n6NXkAzRGASMX9cD9rzf/GExIBt9NkAOSVtRrV/eZblGtK7bvsbubm06L+vaj\r\nMYAUuNjdkyl4OrNKX5oSxeBTZlz55Z22lfM=\r\n=fknL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dadfb713e.0","@material/rtl":"15.0.0-canary.dadfb713e.0","@material/base":"15.0.0-canary.dadfb713e.0","@material/list":"15.0.0-canary.dadfb713e.0","@material/shape":"15.0.0-canary.dadfb713e.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/ripple":"15.0.0-canary.dadfb713e.0","@material/animation":"15.0.0-canary.dadfb713e.0","@material/elevation":"15.0.0-canary.dadfb713e.0","@material/typography":"15.0.0-canary.dadfb713e.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.dadfb713e.0_1665205643788_0.5499177349571833","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/drawer","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.395f1ce61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd1301cd6813f956edcc5c9d763dcaaa0b2c172c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.395f1ce61.0.tgz","fileCount":47,"integrity":"sha512-FzaecAFm1VnIhhkMAs1AOzfFjaEeqZTUGczki11iSGeMeUEdfTjiwni1IkC34i/wUwSRrtTnRsL/Ohb4ho4dZw==","signatures":[{"sig":"MEQCIDldNIkL+r8KEDg8DEChw2yyVQBu4RPdT80SbaDDjtlXAiBTK62KL/6tWdxgiZIDEU4euhPTN5Muw0WrkzmlhvmnoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQYBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpv+Q//VAd9FVfJacmSvCtgdNqzci6C5jZMrkT6BsZ0KC840ql5iBMO\r\nV5qYhlAmgjderp/Z75mUJ/AoyQZ/LNlu7curr2y4xJgD8O6I9Ml0+pxv4Ub6\r\nhGqX5B4GHvA4vEz7ZZVA+mNlTQ9PYMzVhmDCgI5xPz2x0nc2VO6rgvaodQ6H\r\nnhB615rcT0mRjwptXezC60TPR/TodJDlFti0aC8aYaqYfsbd8eLhPH/2wTw4\r\nckPrWIx6VRm1Ry4RrIGhvu+W8ovYTPZgb74OE34MMwOh1FR/Z37G9QKBCXUd\r\nauhJhIk3tNbGsNt7BKovJJlxIRojOkX1qr4Ed+lEVw1wmJ+Si9lbk5gTmxs9\r\nvSMtglP5ZzzxnqhmK/dY7plWLsbJs46DoIo3Wz9zrVC0FzcGscSyGSIIdR6g\r\nPptEybDsDz0z0ApTDAl9icI3VCEllWUmF4KfNhwAg0kKiDK+EjO34RqAQFJL\r\nYFtKa9MTtk1ViC+aJB0sBc9T13p/rhgGWKSi/a3aZMLdVhSKPXCalfiKcHTn\r\njjflh13O8Oa7eZ0QWEV0INnvUgnWQ2D9MImStRAvG1MFB8KOq+TT3VlDH2ps\r\nwfTKj/nAYlEJTG9YtFg71w1BHKl8AIg9NRHEJrO6rjC2g/JdbRfqpN1wEWMp\r\nhyB7BCOwgtFh+UEnw8MiZdDY7NmrLLBAn+I=\r\n=a5P/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.395f1ce61.0","@material/rtl":"15.0.0-canary.395f1ce61.0","@material/base":"15.0.0-canary.395f1ce61.0","@material/list":"15.0.0-canary.395f1ce61.0","@material/shape":"15.0.0-canary.395f1ce61.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/ripple":"15.0.0-canary.395f1ce61.0","@material/animation":"15.0.0-canary.395f1ce61.0","@material/elevation":"15.0.0-canary.395f1ce61.0","@material/typography":"15.0.0-canary.395f1ce61.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.395f1ce61.0_1665205761360_0.29353593864376526","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/drawer","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.e741b5c82.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01f6e0d5c7ee0aeb712a40cdbf5866ef90729839","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.e741b5c82.0.tgz","fileCount":47,"integrity":"sha512-M5aopxNQR3S86AGdFoi0OGi24IV4xWE151JttGb6Sxybzif4gWkPIq5lX/UJ3LnJ7diL69jmMjlcUwygQ7MIQA==","signatures":[{"sig":"MEUCIGhjqVm6iN1duiVvhVmAqMXmJqWGrgG1QRAjHEBEhwb7AiEA2Yj06SC4YrgprneefOnWr2qHeyBJpOwbDh2Jyqv9fZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFjrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfhA/+NBxmJFapwjvyHmbGJ+1SpESwjIcUMxcXI378AfXQbdhxk8DQ\r\njOQOhfRA/Q8VoFF2CHTLHPCX2X2U9xtt9hCqkusMFGnftfoimpGWkCjJyA4e\r\nn4bhFtvMz6BZEplGsMYChUoNF013zriL3SuFmaCpG+XwH8N43PpiHSgRPPOH\r\nPB6gLd3W8t0ITcHmY80vNjh7/2yyAxQaO5NdwdfPSqid5k9/n6zkR0cNLLWE\r\nX1tTBKYmVVSOlsb2EYNWH5QUSN5E50Dz1ynylX5F95XY0XoU9kjqm5R7Zlj0\r\nPKk1qLdTRp7kTqdBtQhgeN9m9sxk8d5hDNG72QRY+65Jyd1MceqI8Mht0Kqt\r\nyvlBed/qZn61hnFI691JATC8huk4INtjqGqWluXpxrxBt+NQveOoCSXpPjRV\r\nxrN5LHoPVD8E3U4/sknm4XERZ/sGqOQ76oqUMC77d3IO1Yt4s1DsBQ9dm7CY\r\n1ZDhp16pJghOIDxd7hf9MWZCsVx4ypQZuRZZ/bxeyxLGJxkZ0/myBxFYrLBF\r\nsd3wrVMO659kupJZYJBPrPTABHcDHssMV/I3CdmvOVEU7k23FYpRCuI6r/Yw\r\n0fWZ34Yy3COZBYF02XD5UlsHOSfTwO6JbRUxFyF13qGNG1clPSI/PoinGwE1\r\nPy2QAs7B8eBxCkMo/0YBzG4QSyqEkZaJTMw=\r\n=66E8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e741b5c82.0","@material/rtl":"15.0.0-canary.e741b5c82.0","@material/base":"15.0.0-canary.e741b5c82.0","@material/list":"15.0.0-canary.e741b5c82.0","@material/shape":"15.0.0-canary.e741b5c82.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/ripple":"15.0.0-canary.e741b5c82.0","@material/animation":"15.0.0-canary.e741b5c82.0","@material/elevation":"15.0.0-canary.e741b5c82.0","@material/typography":"15.0.0-canary.e741b5c82.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.e741b5c82.0_1665423595296_0.7142595465976838","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/drawer","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.582f3cc1c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10e4ef906ce865f2196bca80caad0d5ba4c66960","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.582f3cc1c.0.tgz","fileCount":47,"integrity":"sha512-jIEBWXu0R6a6AiMMT78welJ2mgFq+75okK6CgVOrFzS4diI8KrLSvsI5yp0+ztWyERoJ9DSUbpgzJ+Qe/Z5UNg==","signatures":[{"sig":"MEUCIH4xYMWSZgQLN8CzdY9Qu9BjlocPCaFGtFW+p55lLZL6AiEAxWTQ5p8mKVHlGdb2hJDRVh9QzL4YzzCviUk19JK8YaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPYjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpfkw//Yg4CmZseWHlSsvQp2vay1EFG1x1jcYvv4rMehDFxjeDXpANj\r\nPpR0ZqYS5DNw0i+HEpCr/PKGUF1LmHdsIWEdb04H8eWeISSR56ZyFh997q3O\r\nE9M7hVAViz0GDtn5Qw3WTwbU6bM9qPmjDGGLHZ6toSXMb7++xfQnG1nL1+zc\r\nR9/PF8xONvGXhRer6229iZUT5n8Miar+RCCBO0l02wx6GpsPJeUA3u0KEKrX\r\nRUly/F9IbemKOEODUDOBL7MEZzn47UHa+kory7stWP34C/nBd9LHy99JW9ND\r\nKJVcUoENuw7aQSETgioZ9HkN8IUpICi8fTYbc6m6xhd7lKmUjFsVxS7kz7kT\r\nxvoSF9ZeC1R6kPZCf79NxcgMl0fHqqEeOorPf7eI3HHMJD78rxDAYa9nZaZg\r\n70qhCDrZAMyyvHe3roLJzEa49Hu4h9eS7AR9Ek0rBaNfoIAoGuHaQpDWlEvC\r\ncr8Jhj8fR1rqO/9sYgL/aQ/YNowjKTaVKzTpD0AWbctTHcjCT6rSnchfutrB\r\ncSzVvAz2AnamL08hR0LVx7bHmWp4/TmQS/AealPjV+7r0iSncHpnLZJZCAPN\r\n0M1ntw/lPFiJrTjFsJ2yGqOWXbq4hUBvvYZ6JqFsMPoMyqVVzO8xcZpuAZJx\r\nrravpyzsgFdx0a11/zkVp1RgpNItnkF0/Vw=\r\n=4uht\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.582f3cc1c.0","@material/rtl":"15.0.0-canary.582f3cc1c.0","@material/base":"15.0.0-canary.582f3cc1c.0","@material/list":"15.0.0-canary.582f3cc1c.0","@material/shape":"15.0.0-canary.582f3cc1c.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/ripple":"15.0.0-canary.582f3cc1c.0","@material/animation":"15.0.0-canary.582f3cc1c.0","@material/elevation":"15.0.0-canary.582f3cc1c.0","@material/typography":"15.0.0-canary.582f3cc1c.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.582f3cc1c.0_1665463842919_0.5658653444636577","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/drawer","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b1a6e3e88.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0753a72f297bcb04aa160fb277b079c6e68afcaa","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":47,"integrity":"sha512-hg7zQC8/C+G2Vf36MVPtaAUGLBH0MtuBB4sqYmLZHrOmZHJMvDdAayLf0dZHinycrYKp+BopYWuCqfGQuR303Q==","signatures":[{"sig":"MEQCIFLuLNkIY43blXM2MpoWe4XMMYvJVnU/PLELj2uv0CnSAiAi4Uqgh2PWthMBe107I/M/FMK0NQX9ifhbUV8++0EIcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRq0tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOHhAAn8cq9K7Yp9iJPVrS/CqLWQLZNVtFXF0oaeSgJV7k/0fbh473\r\nj9Op/QW8v4zXH1RplB8ZPL9atPCIw5/oOY7VB+kq+lPe9RLbtgsEMW7WqVpp\r\n9oS/VbvtE07mKUrEkXzqALCx9zIaMH1ss1/stUnVzCBoB3J3BktXAV7tC6gj\r\nPnW9DBCpTLWnNdl4krrEegh4AcQ95pYlQRc66qzDEhdH3jEIhNhY+Hgf1kZx\r\nRFzHbdPBOLdsQpnMDjdmn1z1lTqwGeVccaaz+1ZYl31qjhEbr0hAJ9h/e1PU\r\nOm7I74o336t91HU31Dnh58JRIVkpMEfN7V1Vkgv3RibE1GG4YWHI/dFBAxG4\r\n7tFuGhy8wUj+5JNnU29ACi5dTarKi02yZtFe43ARbiGo5JprYH2mEgfGK5rk\r\nkMBU582miat4NuUhsoRskljRUKefjEjrRsWvcJXNf3xfNbTrgIef2kN1nBte\r\nbvScFcU5VnZo8ycTDsSA1hSPa8rdsE9P0BHfrgIBL03zUYk6RHozbXp99trd\r\nYyB+AkPnkG5CG8PEuum2twKnm5BlAlKhCbQ3C2FodznZ4v8F9dag+FC4wRDH\r\nT+tOL7ppt+GoMKO+sDZEJHIV2wd38kDo61Ozdm3pZgX1suLJ91SaKNvLu9oO\r\nwgWb7v+EIbR9DsP3yjrcRJInYgDfvN+VJrI=\r\n=vHbE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b1a6e3e88.0","@material/rtl":"15.0.0-canary.b1a6e3e88.0","@material/base":"15.0.0-canary.b1a6e3e88.0","@material/list":"15.0.0-canary.b1a6e3e88.0","@material/shape":"15.0.0-canary.b1a6e3e88.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/ripple":"15.0.0-canary.b1a6e3e88.0","@material/animation":"15.0.0-canary.b1a6e3e88.0","@material/elevation":"15.0.0-canary.b1a6e3e88.0","@material/typography":"15.0.0-canary.b1a6e3e88.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b1a6e3e88.0_1665576236819_0.45969304519356746","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/drawer","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.c9b1a31e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d468930ffb2a3d54f826a283a6a0e5709b205265","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":47,"integrity":"sha512-GbyRUnO8dBmaEozs6tlp+s5/p2nXbcUuXVafwDEycp3Y80oZ+/rxwIdpcL3vcuwyi5VQyrYBMVkP1VKSWXukgg==","signatures":[{"sig":"MEUCIQDfiOT2smkKuistzup+qoQrpLlwVE0ivqgOFupK7GHp2AIgJp2coduoCDAL5S/w/SlvgPykYLB93sNhQRDE+o0n4AY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvKYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogRA//Yspc+HDmbKP2pZHMoi+5cEhCXSFZv0YiBX16yyrdCcYmmDXv\r\n8rP8TXkGI27M67QdAPwU16VDkOS1aRefVhRfdkAqfy+FscsbpaZtz/eXK971\r\nWMIwVf1tRLj+WXdcwqQSd97vsyGDgk7vJR3efDS9QXw+2+4iKgWA439UsmOP\r\nD4MP93upt+rtBIzjcLyXFS8rcPG06D/Bk6idJka/RO6BfobHf94Fxl9im4mt\r\nVL39+XZVCIjiF+OjqcASuDlTyOAHFxixsPNAlfqWqSrDMGWWPKna6OGvtF47\r\n+r0e48wd0boC5VxKuoqcKLdKGadJ5yjEyNP19/Ats/3+ZjjEOFtQuEgOOwIT\r\nWivSR8yiEbmN420CyyMoGKdUnmHIBF9CnI2PkxRBhZUK0/ap2RycxovJ+E6L\r\ne7FGkvI2Ui8YHeRxrOqqKtj8uUPDzQTAufOLlktBm0N0z3jGlXSCWbteZqHw\r\nh27+10Yw3KjdtZa2BqHfdf0ljOcQJd99X2aMai5moSqybHS8U0UDKQ/eQfjK\r\njoe3GgsQXPi0rk7S8x3TomJUMpPBiOiFeINsHw6vW0OlgVEoV4ebW82YezGe\r\nzdJzEe3hqDDolUdR3U5H21Y+uhNi5skRFjdygKmDw0+jVGcFKePUkq5wmHGY\r\n3u6v185gETmZuuF0s//bk1s/UUZsGKZB8Lo=\r\n=4mD0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c9b1a31e4.0","@material/rtl":"15.0.0-canary.c9b1a31e4.0","@material/base":"15.0.0-canary.c9b1a31e4.0","@material/list":"15.0.0-canary.c9b1a31e4.0","@material/shape":"15.0.0-canary.c9b1a31e4.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/ripple":"15.0.0-canary.c9b1a31e4.0","@material/animation":"15.0.0-canary.c9b1a31e4.0","@material/elevation":"15.0.0-canary.c9b1a31e4.0","@material/typography":"15.0.0-canary.c9b1a31e4.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.c9b1a31e4.0_1665594008210_0.5482122861218885","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/drawer","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.13e9b0d1f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc0ba435427a5379684f6a83b16fd17bef54664f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":47,"integrity":"sha512-b4T4wFY76SqzSpopDMvwzHS6VDKGIeegwgR3hdDa1MEXZG7yABJpdSxJOIZKAcCmY7jexs8KEDawdCiV87VFWg==","signatures":[{"sig":"MEQCIDa+ASt5IXclMBprZRtVL0AQ32NgijMKEh525iN2tjqeAiAGalnCUdjtJ6GuFu5gTBeF9DYAYnK5ZAq00jstq21MEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxQKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpC9xAAgei6dvQGS276czPmIY1jCnL9dgoyIdST8j/2H2HB/oDROSDK\r\na65/EPrbJPG2XL/jRsEZQkIGt/tr7M34IFDTACHY4n/ehu20wJXNuTe7STHu\r\nrrrzsx9s07GRZXJj/hrjh9KXe2B7KMda5aRiBOwb8mKU5PRHdGpwSyMVospa\r\nMuFUYNM6xWeQQYM/OgPoaqXUY5ZqJoIH5nHmUcBHDmy1eYdm72jFqKGHJ1Yk\r\nvzK25MpRIiR8B9HAnJIRkkU+Q4sm2yqoBWqPhONSlhkAe5zwzopuwdumxchB\r\ncQZN0SKigSJc79IEiIneCo/LMBmi+xsgQKwUPo1beEFsFudRPR/eb7h6b/LY\r\neoPJJWQaqhQrlBhley3gQQEgxtIfYfGdu78p3nfVgE3M7sFyMF0qdmbk9iKa\r\nxN69Q/YyOeo6sFW5f8zqLH1vG/qepnlh/4m9129DucCCpHnXBhGbpJG/hgZn\r\nAsrG47MQFNNqGBj8O8dBeMm7IfkHzxrNYjdnf+MW5+g00B6B0Ep8M1FV0fsk\r\n/uqJeP01LPSCHvDep8MCqkwyAwHB6jxRMgigSly6dzc5Q6rvl2wCTZ12jqxA\r\n30es9g0lNhC8J7TuyVu8+fBeWl/YkzeUj+MEdkHw6IcXQnrJNrkggyQgh6Xy\r\nkjGTIOpkGnexaWYDrXBv3lwtmCHYuksJ5ag=\r\n=M8gm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13e9b0d1f.0","@material/rtl":"15.0.0-canary.13e9b0d1f.0","@material/base":"15.0.0-canary.13e9b0d1f.0","@material/list":"15.0.0-canary.13e9b0d1f.0","@material/shape":"15.0.0-canary.13e9b0d1f.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/ripple":"15.0.0-canary.13e9b0d1f.0","@material/animation":"15.0.0-canary.13e9b0d1f.0","@material/elevation":"15.0.0-canary.13e9b0d1f.0","@material/typography":"15.0.0-canary.13e9b0d1f.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.13e9b0d1f.0_1665602570493_0.2953168450575374","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/drawer","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.1dc797e7f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cf4eee81b9d34b49eed5de5fa650c74d3eea770","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.1dc797e7f.0.tgz","fileCount":47,"integrity":"sha512-EXcNXIR9yuRjTQbF8iL3vaVdH84TV3mvh4mgm765dI9RnJHsxDZ3RXtMtX9YUBMCKrrnLCoXtgYqLYmeIV9xWw==","signatures":[{"sig":"MEYCIQDpXGOrzv3+z8R+jDHhS3BJSh1hf1AUTWeMIsEBUqGq6AIhANwWj7g4CYIpyuZZxKXeNYtZTqM2pihr3clqboDzmujw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS87ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpwig//bu8ja4IKGsyB/aYLE8hzVcPBn+DSGf13hlO38JrmSpgEoUle\r\n0eebYtftzU3fN7lWAHeej1TcZKGxsN+VHVOwV0iC4z/WnNA/i9QWKlVUoAEI\r\ngb5rVONdDUHZBsb7udpBVpfpmHcRsqTilxKuBk6QMHJB5hKzOLqSY6RRYUWS\r\nzUnJrjgBvnnq/e5uiYz7H15BldoXy3Noz/mGXI0iy6zUekIk/53avbcWnvWw\r\ntuiOqzP+u04+tl5ro1O785bZ8jleNdGO9XLrgGjch7QkPx1U6XJu+bluw+Af\r\naq7W+g5VlPBIE9tyv6Iz3zXWHsVNj2IHKT/ieJ+3o0zjTEOCK8Ddr9soJq84\r\nEfJS7n8D3TkUJqhiIC9MfCXSSv+BqbBGoZtcHtqqdOVeuL+W+LsMzR+6zPKn\r\nO74CzMINWvTmP1x6jOtrU6iBd4rfMcqxTsDVnoVGT/XMstPhSVlbZOuNg1lb\r\nvbBZlCxHbcypwTHlpcKJLPUqZttlO5ZSn+PuE73crLitE1hzozbRGwPffkBW\r\nA9S/yfKNvTRyYjhQvH8PjeqNXJiAhClNpYTH4Pyc5DtvVU+LuIxM8OtKmE70\r\nZWXqWDPyqW1Hg4lXpUZwkobA1Rfsu5oiDFGPyH/F9NSPWT0R+YH+IMvnQvdl\r\nyHT1LltMQyE5XYf05IoYKBQtsXwqEO3NG9s=\r\n=vhK6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1dc797e7f.0","@material/rtl":"15.0.0-canary.1dc797e7f.0","@material/base":"15.0.0-canary.1dc797e7f.0","@material/list":"15.0.0-canary.1dc797e7f.0","@material/shape":"15.0.0-canary.1dc797e7f.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/ripple":"15.0.0-canary.1dc797e7f.0","@material/animation":"15.0.0-canary.1dc797e7f.0","@material/elevation":"15.0.0-canary.1dc797e7f.0","@material/typography":"15.0.0-canary.1dc797e7f.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.1dc797e7f.0_1665740603376_0.6184703976357158","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/drawer","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ed4009397.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be214786760fc234f128327d2d30d4400d5e06af","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ed4009397.0.tgz","fileCount":47,"integrity":"sha512-lQpJzsBCSfMWJYJLXm7VLEBCYQN266c+/EQTCVyBFgr5mhGiP2CseyU9ctRhQqr1eqqXB5nIO+G6RnCkr9Dg/g==","signatures":[{"sig":"MEUCICSHjMZqPxTfaYkMFCIQlKXe+Urb8vNCHuHlmSUEGi8eAiEAsZ6ZqNb7c2Vs9xSXW7cShIQV31T3soqBOgrI9K1C/tM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZPeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocuRAAkS8LGJvbHI7BYQdbf/pZKJE2jiD85Hwx4XAKJkLTEAHniFDZ\r\nVGXhAhz4d+CfaWwAgKIYs5NGYj+aeNE9+caXCOTsGbCNH9dvk0yMeU4s2Yq/\r\n20GevdQgP8PDO2hT1lB9TshTvanFSOZhuOOGY/wZTm61Vx9RZzgp78fYRvCK\r\ndyuDTGbAi4Y5uNzm1/Whl7q+UUYRtoyvYNz9XVtQZYTpToheDxALabvsUadj\r\nc4ppurpfuADqGNzxLv9a70wMNyOiFE6FBlCr8AqquSev75e6JcUhrpsECuFH\r\nXMzYIGQm2AGq6g+xIS+LQKy3ahthZVQ1lrzqm/+Vc7Be1WtltFQG9qX92w0Q\r\nhEU0zgH10wCSMsqsP1eqgYD4jECdENUd4LRkRzVFrV9QHLy8TwIUHB1JsmMI\r\nwfrRrXjT5BJgR3QmNKQJv9HkFymJaxClo9bQwgAUPpakHJZBv/cxQSfRwJBb\r\nHZvoAarZsWtNkkHvR37u9Fv1LezsB74c7Va0DKXwVkCg6SSDRRnVvV5X2B/E\r\nhihOXR3xHViXKdQFq/mj3usIOUCO17B6dzhBKpJagy/1tPIrp7LtCfMcYS9Z\r\nSMDHBzyDBlfUwaB4CgfNal4Qu+FqBZ+WleTNRNPh7Hj0YDOaRNMHJ2JWqDEf\r\nSmHdN+8IY1diZFfC+iszyIXAjbfR29cpAb4=\r\n=JccM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed4009397.0","@material/rtl":"15.0.0-canary.ed4009397.0","@material/base":"15.0.0-canary.ed4009397.0","@material/list":"15.0.0-canary.ed4009397.0","@material/shape":"15.0.0-canary.ed4009397.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/ripple":"15.0.0-canary.ed4009397.0","@material/animation":"15.0.0-canary.ed4009397.0","@material/elevation":"15.0.0-canary.ed4009397.0","@material/typography":"15.0.0-canary.ed4009397.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ed4009397.0_1665766366587_0.1722293788185918","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/drawer","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.95ef196bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b13cccbd7d3861c197cde6fb0d249905c45a645","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.95ef196bc.0.tgz","fileCount":47,"integrity":"sha512-9fTfJAxUUa7LzNVCDSIYS4Zlek6pVOn9YonNWTpoQ0n8RBcK+6U5hjk7KXA/4LOdNSW/iqvL6pK9KsqXyRenjA==","signatures":[{"sig":"MEUCIFFFADOKfSMZ+VgUNVas0GbNAfHgop+1yjLeURAZCUz4AiEAuCdzqPCbyBYeIgXNESj9VYWOZdHVYwFIGf9w+DmIJD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe2SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpT/w/+OQR4DB/ai4Uz4zscLKd01MZKoB76kK9r78FlqKSRO+n76gGi\r\nUznSxYe+BrfnJ2WBdkqFmy9/RK68P5gER5SaC4zF/ouL1/XQqk6U93r+PsDy\r\nxvzaN6I75SYF7gHGkEzrVQh5I7AaRMVBKHhcyYQEqcbsO3A3UgK8n/THk/5N\r\nCNW2r5cFEl0K/tg4Vfp7I39wabrtS8koIgQG2oxmRLH7IFdQ+hjXqhhjinzZ\r\np2lyBmBmVKcdGT6BpipCvUYM6xf89Gyo1rp4t9SuIubk3IQhb5la6sK8J4x5\r\nq+hsNPaCOs1Wr5WjOEbfcRgq1hkB/wf7JavCjbWMgBtv3hBOAB/xcDCKdXHz\r\naT0K98IVyLWgWelhLRIfyMdOiJAVBNheiF1lVysZWMQSprUDnFxiCkfn9jFj\r\nW81hKyIiS/O4cBgYQHlvphs2U5ZtLgOTMeqlIWlt0RIKBPdi4SHXuZsj+Vb6\r\nSASooJ9el+LiKRLLe7mz42Ewj4ZeNQoop9t5JuOgtsXyZ+XGzu1q8Ky7vV3m\r\nGJDj4gcLYjlmSmFBiGM8i8JOTlURiBd9CbFi/ym7cDDB/agQg9RGCs0b0v7K\r\n7eFG2UErQauUZafoRLxXgAlHaiILDFRily5qoml7qGA6AEfdisU7OMU07/+T\r\nDktS4irAYVrPmBc1n8wGAcqWySjgdDVF+S8=\r\n=mKIS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.95ef196bc.0","@material/rtl":"15.0.0-canary.95ef196bc.0","@material/base":"15.0.0-canary.95ef196bc.0","@material/list":"15.0.0-canary.95ef196bc.0","@material/shape":"15.0.0-canary.95ef196bc.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/ripple":"15.0.0-canary.95ef196bc.0","@material/animation":"15.0.0-canary.95ef196bc.0","@material/elevation":"15.0.0-canary.95ef196bc.0","@material/typography":"15.0.0-canary.95ef196bc.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.95ef196bc.0_1665789330134_0.24210962732200247","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/drawer","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.13eea1b2d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6e7fc8f96f67dd865970ae1bb573840d265d40f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.13eea1b2d.0.tgz","fileCount":47,"integrity":"sha512-avProO1KJd2cx8PzZ4l+UOiGmW2+fHLbc/oUzLq3RK5yIdSrmRaxk8O/KtQrtnmbKIeOXSU6+8MCiF8zlAWSrg==","signatures":[{"sig":"MEYCIQDALLzS/57jZ+fm7VaTjhfz/u5O3FlZ1U4xqLJ6WMEMlgIhAINA07X0BclItta5w0R/otcsDUFjr5pCW713ORjHljxi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNGmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq53A/+Omq3lEnQ4AMdYWUpY1sHnSzcZHzMQwueZVyT2Xu8oqP1UMM+\r\nvdaFlgdienUG2mFCkxDc11jBQ6zoKzR7lgTictpoUDRUDE3bUfAl4ARDRSae\r\nElt7clnO5S5JTA2Yz9Ita4KdhyKSbS+1zl+KEDOSKgtXnVF+A+nRqIS7rZ3o\r\n+HohCX4rrSYI28OFjuSmMbg3VNSxRvTaRn2ADTpmUKaew8cl9hQDosfWaeV0\r\nuwE9oYeSBZrxGAQDbQ/2vBPM6IcTw4PJRVbzZgiiVWjtXNOm/EOZgvxRSBrT\r\nl9J70QtC2fAR/QxQXheqV2x/yj0geGy9P9hlaCD+PAh3Ki6A+uZsa/ckM95Q\r\nTJEj/EU2dZ7cRsu0Zi9/OHakxn6du7EJJr84YZiR6MNaUYJADo4Dei/Lqcvz\r\nPzOjuDUUfVhHdvKWxSkDHgYmq1hRnemDZv2zv0qM6w1QFgeUc1GLCFSn1jWY\r\naKtGxZ7OKpmbapV+2Se5+4vPtF7Q/9U5lXiXCaT3EkKXhLNZwMo3MYauQvtA\r\nuzBTv3gcoAAvXFknt7WjmECLIMm43lL4KP5DhMBonANkDoecDhGzGDt9ftel\r\nOf4jDUDF+sFs8VwQbUn3xk7teYQI8j9VSskAgQXaUk/mN7dHvYsvLAKtHQA8\r\nEJI/m3ka34GffxtjKHKzWvCTfVUaOVbDjhc=\r\n=Z+70\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13eea1b2d.0","@material/rtl":"15.0.0-canary.13eea1b2d.0","@material/base":"15.0.0-canary.13eea1b2d.0","@material/list":"15.0.0-canary.13eea1b2d.0","@material/shape":"15.0.0-canary.13eea1b2d.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/ripple":"15.0.0-canary.13eea1b2d.0","@material/animation":"15.0.0-canary.13eea1b2d.0","@material/elevation":"15.0.0-canary.13eea1b2d.0","@material/typography":"15.0.0-canary.13eea1b2d.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.13eea1b2d.0_1665978790499_0.12790168522806367","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/drawer","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ef9b2babb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba18ef6de58e6c6b79450202de8f4ee5e64a6c17","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ef9b2babb.0.tgz","fileCount":47,"integrity":"sha512-hw7VL4BMlF1NeiO6t3Yo3FVnE2lm8S2N4zwPOPCI/Uonbq072jNwFs5gd4wVjVdbSvhpeM96vzHnvLQMP34MLw==","signatures":[{"sig":"MEUCIQCkDQGqyMgCiiKsUDkAd0UxQDUH2Amle63UNzvDZG1gOAIgMmREPL6/w90suTXrAVtfxDrEcM0Xtlf3HFViYwiKmYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR4uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohuQ/+MtoI/qXEjoThhVkFPsf5uNUQoYQjic7nhkwZl+GNkn5ppIIF\r\nVDwMyz3dXjMo7jJq4l2Zo7qt4t13ymRyDkFnnrre6p9WytkWtkQALeysz7hG\r\n6PU9eikmFPAxT7SWzzLI+Jkc7j54GxCr5Zl4O7coKVZgVbxEO87KxtNSnoPE\r\nDdISghlnjqI14SguFuS/i631+dS1Z3Y6mjc/SId1729D2L6aOzupPcldDXnu\r\nZeeh0BNKWXxNYSjD/NFbAH6CsW5kmWdGwRLCRsZDi+WAZudIOqtdoHkrsYAY\r\nlT3wWVV2c6rYm5OGoQUf+zzqJtAxO55H9ldY7xOOk4/r4OZDymKlMQ/VE9Z8\r\nl6Spq651OxMjtds6mBsRxFnrZ4Xk2EEH6VGVXf54mGWnARBTrnTi3ydn7AfV\r\nRyG/0XUsZdk/gse6daSQHTBACFguiAPQbFO7afQbZnpg8bEK+05x53mNJvn4\r\nG7+CtYen70DGBNB7CNzC1rVWnUorlFGrE4OTk241qy36uStPQQ44+qeT5vju\r\nj8/8vkUBXrKISF033mzYSA2F+3A/DtI5Z5tqeuDS2kvBWQlO1kw49c06ZQ+g\r\nkzhIZB4gQZBYGaCJqO7As2TspW69UPQ5u3rwK4s4DTQaQt3l5xiA/7u1lqum\r\nhxM9Zj2bnazXEuNwJSjpUQfcjQopEV3RhCw=\r\n=35H3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef9b2babb.0","@material/rtl":"15.0.0-canary.ef9b2babb.0","@material/base":"15.0.0-canary.ef9b2babb.0","@material/list":"15.0.0-canary.ef9b2babb.0","@material/shape":"15.0.0-canary.ef9b2babb.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/ripple":"15.0.0-canary.ef9b2babb.0","@material/animation":"15.0.0-canary.ef9b2babb.0","@material/elevation":"15.0.0-canary.ef9b2babb.0","@material/typography":"15.0.0-canary.ef9b2babb.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ef9b2babb.0_1665998382305_0.675509626269784","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/drawer","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.cec7fb987.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fc21ff4fb33826ddf550e254222640bec941ef6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.cec7fb987.0.tgz","fileCount":47,"integrity":"sha512-KGq3j5HF9xegv4d8yUW224fP9htN460tssZvuHUWVCJRPRRqVBs+UZX+WOMXtoUE8wlMyTJPUd3pMwTFj3Bi6g==","signatures":[{"sig":"MEUCIFG3o28XkIWOjJo/zfQG45kgP8M3xZOMMI8+1wNXPzq0AiEA6Qczz5R9aFsW77sBrrQ/7NcvorpzgTDM3qz7W0XnVpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTUwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsohAAlFNa4yCI4aOmXixU+mEkn8TlnZ6W6QZb0J++zex1OUYQDwx2\r\nT3jUMgieSLDsvesxjnXnuP7/7ydgxfRsJCXUcSI0dYuoQHNqj+3ef6WCD2xr\r\nIAhTCtvuTaflu9pdLnHR/j8ZMqflP1ICjI9SK/gWuO+uveUST+w1p3egd2Gc\r\nMwZtXKF9jE8zZ36O6151ISyxMDsPXQZB9RRiWfsnjL/7qZBhjpU+BXJfs7d/\r\ndcfnvYEeBVHfu+PG4qU27s+t9EZ1VagsZHiOoUZn1iwf3XaqaSq/K2pvuNDP\r\nB0QExuYXVaImSZL14GeCGFNTs/cYWIDvTKMnEAQbBL6VpePfG9ohIH6rxD0K\r\nulU4G+yMUNVfl1V1OkkYN8k/8nskc8RwZvUwdpcDF2CHEzeeLTQCpamz/CU+\r\nFjueladUJn9ciQbNElfVOTh/D1pIqSUIEcLVS8fCnDdhQreqDBx6i7PhBgs6\r\ns61cjHj5vL/sW0prEcbWtS7YzUiQZH4A1zRbpRAR353h0d1TiMp8D40iIeoP\r\nVlt0fQzRlO36z8fu41R0rBN0PbFL28aRRhK7B3J3Cuq36ZczheSI85HO2DLB\r\nsbLwZbNQkfMkaS63epn5dFNZTXSsQDKNFz6+NM1XQi/FzHKE5npCV873A6K5\r\nSU34AZ0phg88fvqfTQ/Sjr2laigWaLoGEWQ=\r\n=WHn3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cec7fb987.0","@material/rtl":"15.0.0-canary.cec7fb987.0","@material/base":"15.0.0-canary.cec7fb987.0","@material/list":"15.0.0-canary.cec7fb987.0","@material/shape":"15.0.0-canary.cec7fb987.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/ripple":"15.0.0-canary.cec7fb987.0","@material/animation":"15.0.0-canary.cec7fb987.0","@material/elevation":"15.0.0-canary.cec7fb987.0","@material/typography":"15.0.0-canary.cec7fb987.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.cec7fb987.0_1666004272158_0.32214055357009896","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/drawer","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.4fff58b08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dd9a79e086e06715be05bc3be6359af9c96adff","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.4fff58b08.0.tgz","fileCount":47,"integrity":"sha512-knQSsd+2R5MU/inOkjUi4jzkLbvYjH7MCNJOgOWxKq/DAypkOusG6b9vOqFbxlkpvlEF2mTUbzFVUUM65nrlzg==","signatures":[{"sig":"MEQCIBUd80ot3gdWfB0glBKef4YmJY9yHSRalXJMnBJO6dRtAiBacf89HD3tjfkoTCx0DMRKlRKF9eL+1CfVNlMVdCVGQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXOfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfMBAAjqRduBmrUFY2Z6zDvzXgKjSpzPz5qFCSuJiN0QTZOzkvZbc/\r\np+L9EqZTVYHj4fH79OmMu6EHxNxLHO2unQcNAvbgxNTeIJJYlMAVd7mEgZNZ\r\nCqVlaBRsq0ZsdBx+Ri0Ei2HunafARFWJ9izmpYT9ocY85mm6B0OUgkE71gAY\r\nsNWW3p7tIujYJ0LWwz6o4DRmPZptcQHMlgpP1jsYCmXLov0Pxig644E5wvPy\r\na5SA5DXEo4RhRxSuDhEvpBDJrDXAktApgZYql1+URqfvt1uxBYg2DjKBOiNM\r\nZqhhcxoZSuKwoykNi1sODnTFihGQPHNCZbA8KJgSddXeakQEn5OHCHxXKC1a\r\n2x8ujF3g5iS2CAYew+DgZhQVufJxUim8yUw7R0niIadjMjVI8h/6SLIk2ADn\r\nbJwUQ54seEygPZwbxHjxNQNLpwQ9EnIyCXXn+NKOwKdXcf/EIIgPdGa8R5qt\r\nfPT56Ka3NoXtvMMZDSsWbTtrmaJ8CvYm140AlovLrz0wBNRMilolhvD5Kwch\r\n8GmTANET4opYs/dx0Lt0j8sh9VDA6R7UwNNBMmEEqjSfEu0p3xKtRF64ZNIr\r\nctsLqEjg2ZXZpPklk+MJQ9fKF/+ruK+Xc3Pe0alv5Ll4b73kGBuAV0+1hTDq\r\nVfr8/68HSXl+fnwpMc6exATTEmBkKNb0PSQ=\r\n=SVIZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fff58b08.0","@material/rtl":"15.0.0-canary.4fff58b08.0","@material/base":"15.0.0-canary.4fff58b08.0","@material/list":"15.0.0-canary.4fff58b08.0","@material/shape":"15.0.0-canary.4fff58b08.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/ripple":"15.0.0-canary.4fff58b08.0","@material/animation":"15.0.0-canary.4fff58b08.0","@material/elevation":"15.0.0-canary.4fff58b08.0","@material/typography":"15.0.0-canary.4fff58b08.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.4fff58b08.0_1666020255077_0.21965108721836923","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/drawer","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.587d8f871.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b9bedbf57d0c9c42611b53cd8d65d1f34e51464","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.587d8f871.0.tgz","fileCount":47,"integrity":"sha512-QaOwRsUj2FSR3+k9BvIxYG4efIqhgOLAf5o2Z1tVVIVe657f6Hhel/47raCYifaA1UyERyt1mF04iU+qwo24zg==","signatures":[{"sig":"MEUCIHGizDhUB45dC20y+06VXL9EdXpi0vfzKZ/n4gR5uZcKAiEAiHYYJGukiD9PnO1i+cna00LnW2cFz10E5hvtFz5x8GI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXutACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmot0BAAl56gStkcu+DSPfFD0KQMVaAWPMpWEOLDdST+sPh02u1NbDdj\r\nVxOjHPxSI+Srwi6sLe5NmKWh73r2G1b9Kqsc/B9hK56abg1A8Tllgl3Pj9Pe\r\nfVXzKUC/CPiyfppz9rnF1XpqyJuBB2sWlaqqhCXT6juu/3643nbxosKwA8m0\r\nojFsAn+dHkfY/XIbrSpCADTsjTWI+fq8rvf8GtRcaf9BbrcOeTXZ0DwvBkpC\r\nTaC4Pu/OaTtzQ6LY/4LGN9gqw4K8SdoospEFEqN0FuWbffDYXL+cWlJREcA8\r\n3OyL34/laFb9ku+6pvBkFOISbMZOVO4pbTD8+Tv9q1+0GKh2lWEkWCaetMpd\r\nNrvtp3e8epPkIa800kk1xzB/0ZPhHLdLWtmfGrJe6V85aWe2pV0f5w4Qlbah\r\nCfaU4E+m1pBMfh9q0l+NmIwxzfF7k1Fu6GxWR6Td8u0yupvcF72W49T9WcvB\r\n1d3efSnhQ2bzg8y/8JMD1pqSNgO4SbasSjxrAUcYigSlZ+vSD1fggsPx/A1H\r\nA6PRS6hpZcMmjIJJBebuibOjUTvCguK+sYuTkxK3eOJwLfbsSlcSSmH7foFx\r\nR4szZ8iT/N2i76yr+ZEOy4/XHr6Be1PeDqy+dChRuUdWMHyxMBo6JWQsnUC/\r\nRpMxpwPsIxE2HHK3BhkTkyxiQFiyKH+p3sc=\r\n=e4Ov\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.587d8f871.0","@material/rtl":"15.0.0-canary.587d8f871.0","@material/base":"15.0.0-canary.587d8f871.0","@material/list":"15.0.0-canary.587d8f871.0","@material/shape":"15.0.0-canary.587d8f871.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/ripple":"15.0.0-canary.587d8f871.0","@material/animation":"15.0.0-canary.587d8f871.0","@material/elevation":"15.0.0-canary.587d8f871.0","@material/typography":"15.0.0-canary.587d8f871.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.587d8f871.0_1666022316985_0.7813531653655919","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/drawer","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.edf4b98d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e76f6ab45111eaf8f03ed600b7b0a2216c4af249","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.edf4b98d0.0.tgz","fileCount":47,"integrity":"sha512-K08xH9Fp/Ikkze9uq8tvrLj3/JNSVrCVBfo2FnEYAazo/OWhM9QM4+gr+9xvdaxDrwASDveHcGbjgei5LceJqQ==","signatures":[{"sig":"MEUCIGpZ9YqlwQTiWTqwHwBcTxNY0GSzDdyzJjvmfC6YZ1TLAiEAyET74KV3HrSnA43IoKZaYL6EmGK6TArtX396F59lF8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYXZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJig/+JhE14UtUOgR6hcKinztVrZuVEhSHzbA/ZK7L7iGJeNHsNAj1\r\nai75g6yWnx7fRP4tmYhVtcWp0p2thvMZYNlK4kY1F8CL1A/83aMgNLsO6F+t\r\nq7szRgoCppwOIgIXdttmhRa46+KqK3GWL1gAg3H1yR4a7QsJJp8tIWl3mVR2\r\nw9KumijxvLM3583pRiIIoph0Sm2P1sIwM94ksvy878mEqjzBVNkaUirRwxgy\r\nNbDnCyCDnqCi81QDfZsNWS0tDzAsYgrUwSU8Dqmf53PdLbb/wZAMjdvsd8i/\r\noRtZujLnrIhBfDOnF1RByiIvoF6t5JjTT28qdn8EP/b4rtqnreGnF2abhABU\r\nuCsifmqZAVDuxV01psh6HIdRlxtsFBmaH1loJIKZh1JJBNKio/UhQ92wznl9\r\nSk+fp6vuZIj6OfG/VKH2T0uzDnt7ue8z87WZ8xAG49zdQegV25M5K5C1xc56\r\nJtUHxnQOK4L2I6ZDBiy/+WUV1LhgO4igJoWuPGqZDPSyazi6o2MxsOuR/L9+\r\nQR619Np0BeFRB/XPxa93Xe05ecsqGJ7e774XbuJntVHz6XEohEKIN5Iy7qhA\r\nO/ow0qOb1qAOB2yJW++pYMz0k+edhQ/KAs//4ff7OJcfq4gYk5vuIX/2yNOC\r\nQexmbo2YVHQpmciLV7qoip/qgH6ghpHB/jg=\r\n=QjHj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.edf4b98d0.0","@material/rtl":"15.0.0-canary.edf4b98d0.0","@material/base":"15.0.0-canary.edf4b98d0.0","@material/list":"15.0.0-canary.edf4b98d0.0","@material/shape":"15.0.0-canary.edf4b98d0.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/ripple":"15.0.0-canary.edf4b98d0.0","@material/animation":"15.0.0-canary.edf4b98d0.0","@material/elevation":"15.0.0-canary.edf4b98d0.0","@material/typography":"15.0.0-canary.edf4b98d0.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.edf4b98d0.0_1666024920946_0.7484459970537509","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/drawer","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.024ac5f16.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"487fa417ee963deaa8145ae28a4e7ebf58e60239","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.024ac5f16.0.tgz","fileCount":47,"integrity":"sha512-Mvi2e3p2kLrLSk2Xjj0uGXivC13yJIoTD13GvUpO9nshFbF0V5N2GsiihiMHy+J9cJHEo5cJgkEPJeG1JCQJ2w==","signatures":[{"sig":"MEUCICYzpcSqEsPI+zm0yn8l9llaRT0Fo2fRYhhjYAuTarAdAiEA0tAQpdxwuv29hNwVh/T/3OhksTsuPZwmkwSNJIlP9wQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdqsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqe7w//XVk1eFSRc+VsS46fPgdJRCjDK9cNzAgEbkI/zzXKcgmh43tH\r\ndZijNXQ4N9CggA2RBSdnYY2MwU/eqBq2cI6EjVw+jP4zX4E4Q6hL+V/8C7Xp\r\neD7i78JzF9MX0kBQDvEx6ANken9/mQcKZTDEauzGPwOJLQgUGw8p9yQ3moBJ\r\nyIJ3KhpI5vK0EdLKYv+6fU506Vyz7eoYe52VZSY0OzAPnO58mKFm4Zuf/PJn\r\ngPua3z3JlBWzkO1H8x0Cku7D5uGdMl2zQQMPofpdfwnApCCkKcjWTi2gwIB/\r\nkTBE7Pc3vxB1TeSSA+mcQa5ZwE93YHBRfS+ujWm1EEI5y1NIuhSUowVi166y\r\nRHx2uwVBCWxgX8dprsjoRk8fkmbzt9qcDOh3j/3tLL8Ed+JmNXmVMXo1K7AO\r\nxyseVMevWivPm2P/pPlcUJYmC13v62eYN0q/Rvu30HmTjW+aOb30+Kw/yeOj\r\nWdJzkWaaknBICzVrozZ/VeI0bqGjp9PzQyTuzLqtWO319CqgWLCdKxOx+aqL\r\npPY75WE9XcOh5Z/VKCl4cEZVxvbaFBw5H74wAtkcItj2uMAeL4mtGzkTzXPl\r\n6gmeJq5wuRjRwaSUQozlDcexDZJ40O44iaYNesKOWcIzuUpG+/RqD5Hq4s7+\r\naznD+0geEU+Ms5/6VKooHB7pGp84A3cSca8=\r\n=7jry\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.024ac5f16.0","@material/rtl":"15.0.0-canary.024ac5f16.0","@material/base":"15.0.0-canary.024ac5f16.0","@material/list":"15.0.0-canary.024ac5f16.0","@material/shape":"15.0.0-canary.024ac5f16.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/ripple":"15.0.0-canary.024ac5f16.0","@material/animation":"15.0.0-canary.024ac5f16.0","@material/elevation":"15.0.0-canary.024ac5f16.0","@material/typography":"15.0.0-canary.024ac5f16.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.024ac5f16.0_1666046636163_0.3253772670185653","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/drawer","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.c8bdf6144.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dcafd68ed5af3f356dcd085c6cc62da45140940","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.c8bdf6144.0.tgz","fileCount":47,"integrity":"sha512-aEXFhcaBi+JUmnA0Ma7sxEj+MdGLERz67+fxaUSSpjog6J0DtnPb54+dCQH//g5ZYNFWPdcnMjfCX5LWKNtINQ==","signatures":[{"sig":"MEYCIQCEpyTOeMO2oaFyCJpwQY2e9cJPT4lJdR+sIx9bm0shvwIhANgEmMmM2HHgxc6c1viNWrTM5BotshxbAW07i3Dk1Qus","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu97ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFaw//Vg32DA6w8SA8aAjPK5cJjskpAq53zHpjOUBjKDHbodM8kZDu\r\n9HeZbZqtVdwON0HpH2fjnJOrK9R+MtKLI/ZpIr4JpkjIA6tuL6fxf0kvjG0L\r\ni5YaoRULTTRlXh4quHsr/zOqgzrVbogmB/60S0y8GclrjYkGXFdgFqQ/fJPP\r\ndjyZNGFV/orqWuJU7OiNut3SMrwEM5MW5RysgeC+yGFnQnCpjwiXC+NHZIaL\r\nrGJVnuSWkX1ZMurEOmR91xOV77EvtL3y479zQ+BVGkSxqPfz0d1j03aB846i\r\nmCqSb/9OoFvdpHgCzriLdLLCqH4B0LAMNBnLuLqsPdngw082yyXzFl/zVu6Q\r\nKWXmcgMWS5Jl4E+fBZnnZ7Q4Fn6TaG8msqeM1Hm8ujzIp7PX2nZhKvfXpLKA\r\nFImLj64RTHgx4uvxYvWdaBvh+eA5x/O7v5Dwt/IY3I5vmxEAcI57U4FlEajB\r\n5wZNxpEjQtGiJRqBnqyV+diKN8EQqRDfoL3TLE4XZG4e4h5VLo/kkyoSGR/A\r\nt05ORBfd9yz2hL+b97X1vju/Sxb/X5NtSHf+BmTNQyy+O3u9UNPOIkqcszk4\r\n3TuKimRwPgQiU7oADWj5u88COMA2kk0W+g6a1gdeGTzVZvRBv6/app1fdOnr\r\nPAs4E1EvXdd0WQHIdWrzUX0XgQoU772fTXc=\r\n=5oT1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c8bdf6144.0","@material/rtl":"15.0.0-canary.c8bdf6144.0","@material/base":"15.0.0-canary.c8bdf6144.0","@material/list":"15.0.0-canary.c8bdf6144.0","@material/shape":"15.0.0-canary.c8bdf6144.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/ripple":"15.0.0-canary.c8bdf6144.0","@material/animation":"15.0.0-canary.c8bdf6144.0","@material/elevation":"15.0.0-canary.c8bdf6144.0","@material/typography":"15.0.0-canary.c8bdf6144.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.c8bdf6144.0_1666117499116_0.3302501239670457","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/drawer","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.bacda4885.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e9c50502070fe950e61b4a8ecef0336362fb1b8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.bacda4885.0.tgz","fileCount":47,"integrity":"sha512-ipdcST2skouJwOink0Id8ArO5zmH6vaWZiZAHLLTY4SDfQ5qo1z98f7i3PuO71RpfP3JM77Vv6zGm+EiKC58cg==","signatures":[{"sig":"MEQCIEDleraQuuUxrl2uxZMrZNY1gBEJHch0gVpCm/2S1Ol+AiA4OwAIy/gWfUIPPCGjvHdgcNc5wMgCFkm45rFxePZD/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvQEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYwQ//fdk/+94ixB3L6C6R5elAbgwOfbv9fcaGun5nq//T4nIB8AAi\r\nUT653HlCiAIh3XW1O9TnlycM1TlXXUpsHyTgYr/8IDTnlBkz1cl3+lFtYirQ\r\nfSAZotwKzcocrWy1J8384oThG47QJXi7grOEkzh9Ra7Uwg7VugkmvFnALoge\r\nsUatYFjjbb4NCSlD/2T6rQcbVpQ7Tnzmzr2NMLKuW0n/4y23X6YjLhpvNTfR\r\n+ZVMZelJGOy+5cHRvY++Q168WDCHqAjNhbTvZVbORF1CF1EZL9Yn3Cb7bY2v\r\njqjRWd95FQ3P69p5KreNUW/XVzng5gORvuZdzA11yRY/5EJfxqfiQCoBFPX6\r\nZbvJXaD7pwk3SOJse9LE3DMKBLmi8HztvxJWpo+N1vd/9m0CRq2bZ+1psSAm\r\nE0lDM+pR8Zu1oH3oVRGXiiFxNKfdNh1MRtoqy0VbD335pW97Af/8KTqNL6aC\r\nihAMyIy+sSWCFPkTZB4xXp3f4iFwzjYZoH58X/s2hz7PrWgKhiFH6/lEUPtU\r\nC2//RM05rx0SBkFHrtUE5L0Q+YDUQwCJzYtHCYA6/8589X3Jn62hT2HfaO7U\r\nQ+AKI13eKORMml4ubCPG6nELM32MFVymkE162zLdEAMLcBmbLH/IMxQyg7iv\r\nyYcoOLToRpsOVX1SJBG44Q/YsH7T1OOHYfU=\r\n=qCIt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bacda4885.0","@material/rtl":"15.0.0-canary.bacda4885.0","@material/base":"15.0.0-canary.bacda4885.0","@material/list":"15.0.0-canary.bacda4885.0","@material/shape":"15.0.0-canary.bacda4885.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/ripple":"15.0.0-canary.bacda4885.0","@material/animation":"15.0.0-canary.bacda4885.0","@material/elevation":"15.0.0-canary.bacda4885.0","@material/typography":"15.0.0-canary.bacda4885.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.bacda4885.0_1666118660415_0.9822233401066627","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/drawer","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.92b2556cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d7bc520c0fedad7d11f7afb6b782406f27ef356","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.92b2556cf.0.tgz","fileCount":47,"integrity":"sha512-0idQ+cL0P7dA0KV9ZkGv1Pod6ckt+JGYOXfEr5x3cCq5vrpaYCY4vYGxhUht2i68IhbUPCFlY8LSL9P2K1TVWw==","signatures":[{"sig":"MEUCIBsZd93fR0EJ8bK1iG29dQl6W7TeffK/3+zkD9xQtZ+mAiEAnnySTsO5JBomiIrYttgoFDXN9OSWNiG3qsPXPzLTnls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":977244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT0+QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwCA/9H8h4iJhO1iW4/tum7tSDN28XJqp06yUAvcBQYlGfcc++TO+a\r\nBZcf7k04ZECCoS0mAXMMVoQLDlSgEidW7s6dqagoO6FagxnKS9gHROxCmUpp\r\ntXeG7ORgUPM0+Nnyws6my8HHtkmp0tt591u/FDWOvrx3mDpDIoOwXVCVRsWy\r\nOBAsWB+nD1u/QpDRnsaA7VK/ZrPHBdrL8qFRjF8xqmeb9fZJ6ZHNqRKH+Qcf\r\nr2HEXd/XLbZ3Mvn2mkaBTFKfgxdN4q0j5Qao8X+MdpTRew3arehyyxKMEfLG\r\n9hBxs5QrOlGX5NSnCgQFk+kGEsipmaT+KT69FOiysJwV0hJ5ipz19ZZcX4l4\r\nDxrHE68SE+1Skbq4148JpK0bjoqjuvgm69eV2b/Bi0ABEAR7Hr5xsU48iy7z\r\nBKBlteahqhNr3fKUSqweZQSOEbBp/wumYOteqmpgST1cKarlhzpbbt6zCuF1\r\nqgzITWou16FZXuhGGUTVQzoBncZvvFIubarcALsufCYXXilF0E0nbEcUiJTr\r\nOYUTK1oBJNY6SgXQIEVcptcWpzMfCCoTSC2dpy6THvZQG9PIIXBDxc3gO3l4\r\niZPnGdcV2L1FaNrGTQbUoaFNJDjJcWLo4KsGCH9ezu4pVq9zNJ5+qRVYznpU\r\n5FCdwfu/cD88o6fI5F090debKSB77Fhe2kk=\r\n=yu2p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.92b2556cf.0","@material/rtl":"15.0.0-canary.92b2556cf.0","@material/base":"15.0.0-canary.92b2556cf.0","@material/list":"15.0.0-canary.92b2556cf.0","@material/shape":"15.0.0-canary.92b2556cf.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/ripple":"15.0.0-canary.92b2556cf.0","@material/animation":"15.0.0-canary.92b2556cf.0","@material/elevation":"15.0.0-canary.92b2556cf.0","@material/typography":"15.0.0-canary.92b2556cf.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.92b2556cf.0_1666142095757_0.04902683057609236","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/drawer","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.cc804509a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5724fc91ce0c5691f680f4c61d06f38030e4f5e5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.cc804509a.0.tgz","fileCount":47,"integrity":"sha512-W5kqibldTNeD59KOAKMxma8vlOpG4YjrgmL9tfpVN/cV4HDZuYlHKQ/4mtEsPa9IMlMQRYpvMYRKwiYp+ZGTXw==","signatures":[{"sig":"MEUCIB8GIQ/auLtiI1e/wefrtFs6B5hPFuUw8LyrmKUb7D/uAiEA7KzIxX/TbDRwfOmaabDLFgqwMBcWpTLjCUDMU7vTCP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1BxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgvRAAihkdg+FXOqbopWsYM5dYECQgrkGs2UPetIqCvsUR45ICxerN\r\nMnHahDMujeSCKZQfqvD7ca9mx9iFuaCAHnKKcZDGglfhFCwDZbMn051omCzT\r\nytemaK99gDdr4brUmRHG3CSSK/gYAs6iATN6hQ0LIKKrMoiquxwzNq490Q45\r\nWNVKwb8ehdc+rOtxJJrzONYXDxwl6Axyu5KjnOichAGp85nzpdvycB5wmCZ+\r\nrYmSzr1L7kRRRRwUJ7K+845gCdDor7LRhPd1Cuo04Q8MzsTYTLezihlc+lUO\r\nxd3mYg+ojUc/84WEhRGrXeJqXVG0CaAng87py5FEoauO3y9gbHuJzH3eqr8w\r\nQecg/Rul1ALIecFVomEE3b0NKqbdzYMGsvB321m2dZFSCygpUthCrAN6KGha\r\n4ZL4ZJ3ja5DZhSHIM0NYfPo/FZ26eKkyNuqg4NoAFfcgqkWFnA6FwkJlDYhR\r\n0IlFfme2MXHLt069XiN9qVic5aIAAKbmmzGadVLRbKQ2O0epnlIelXScQADO\r\nYDSCrqUzCKiPaIXn46FzYLkVIqLrracpTsXU6UgmvUInxOo7EWSZ2u2VVJjk\r\noC1wEfdlUcikgQZDbnTXMsG8Eu9MkHNqbmzExWVXT9z1J+/sXTP7H+1lB/Ae\r\nNotrjUeua9yu4BK33U0qeEoMawYTs/umuC8=\r\n=wzh8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cc804509a.0","@material/rtl":"15.0.0-canary.cc804509a.0","@material/base":"15.0.0-canary.cc804509a.0","@material/list":"15.0.0-canary.cc804509a.0","@material/shape":"15.0.0-canary.cc804509a.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/ripple":"15.0.0-canary.cc804509a.0","@material/animation":"15.0.0-canary.cc804509a.0","@material/elevation":"15.0.0-canary.cc804509a.0","@material/typography":"15.0.0-canary.cc804509a.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.cc804509a.0_1666142321687_0.6714130743637821","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/drawer","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.982bedae9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06bbfa62ec6524bfa3aa5522daa8c05907c25e06","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.982bedae9.0.tgz","fileCount":47,"integrity":"sha512-Wf3fHJJyQk39360BTJotraXxifgvwAFrvU95X/gYfOCQDhhNk4Y5Qn5+/64OgWog6opiurEgqiHmcfxWt3jRpg==","signatures":[{"sig":"MEQCIHbEE3VrZfFbi3CZaHCkW1yzyn1XgmBhujPoev7Gco3FAiBLA/69smqOhk1DkSwAy818HVqkrQAAk5DeDzWYydJcaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1UkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreRg//ZMGZpFp7uiB9YU97M74aFq5qS2LsAbYjrenSobZE6YLSP5TI\r\ng3drOdWy712RkaXr6EveRSWUmo9wmzWdUMw2vFsS6uEBQY1P0GyrWV7grElY\r\nzBin3O+da1q3wQGdoHn6/Y9ssN0NzZRPBP53pfEBkl2BZpyfX8xns4AFrnnT\r\nUoaUOZESnT9XTx31yQzjIPaeoG+MVN/Lt2j3LLgIthRjwSjVqx8AzDcIo3b5\r\nwuvO/E9CMdKnKfGCf7/FnAOckFcCLtnCyQYIOWTsA+TLMxW7BQu7MDRQRP9y\r\nRAwzAz2KK+ron89IqJwhY/4zKF0sFFZ6ELZKl/HW0/oxvtWRStiGJp9xNr4h\r\nFIo/vk+p3aLat5PuuRMfz4GAkGI18v4brGe+XfjtNOHN761sSiwu6pq+feJ1\r\n5P85Yt42gLfBjtqseWhZ3Vv7dMKsej8+VDdpQUfk+Wo4ZjHX9QLA1ZN1KXgL\r\nnoTQ3FHRHoM4IedcwNyfsdF8IPxmyDHhEQAoc/z4FYw8iE3Me/WQPWvgULrX\r\ncsYUNtqUVFXi28zNmWiPjPLGxzHL2hAnBRMZl9VEhl5l8xsPXemQBQfYLc/u\r\n7yuU0ZG16xBitdTTy1p+W+OScNIaZZ5dMgQJbPgiBMSFWWmChVT5NgHo+Zn1\r\nZJrX4x3jVi0fbwef5LmK2gm6kl3qJC1Ecjc=\r\n=vE7W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.982bedae9.0","@material/rtl":"15.0.0-canary.982bedae9.0","@material/base":"15.0.0-canary.982bedae9.0","@material/list":"15.0.0-canary.982bedae9.0","@material/shape":"15.0.0-canary.982bedae9.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/ripple":"15.0.0-canary.982bedae9.0","@material/animation":"15.0.0-canary.982bedae9.0","@material/elevation":"15.0.0-canary.982bedae9.0","@material/typography":"15.0.0-canary.982bedae9.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.982bedae9.0_1666143524585_0.7070713774000836","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/drawer","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ee40081f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"784583549a89482a73d53f4945c127067719182c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ee40081f4.0.tgz","fileCount":47,"integrity":"sha512-c08C785O/wVBgVKG6cOK3MK/hsw5rFQ28dsBddOXmMV3CT73f5Q3vjJShpSTvvjip7MJMLXpYdid0BPND/f5XQ==","signatures":[{"sig":"MEUCIEaCtiyh8j9OaMoZxukT6e+2AIqNaUjvjH4i99T+3blqAiEA6BZsNVofKvzV+fv/UQCMnbbTIUgbOzQ27YBIGd4TETA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFppACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNjQ//TiQIgBEJGxgOotydouGzCgb3DPGGqfGMnFacafoxzyi7DVpi\r\n/y1K1Yu88pFW9/tLi6KhIOnxE4QQzMkNnebNKKKhzTbwHQhjslFYdDpPVayx\r\nf7pHfAePlUSz/mSGKVGEydYvXuzFlgf2gol99Y8nFP3Czna8T8g1gthattuo\r\nWjWfg5OJIJLLg3ZA6cuk62ZCqKEx1QakQ1tq2VhT/5oeyxRsSvNL60NgvAQd\r\nGt6zFzrYUA5FNyyNFHMU/Zoc/5NWF6GEyyjRHm3oaBNHJKrr4Yj/AxTG+owN\r\nlGhqGfSj1MFfyycW87wG37bKKUQ5vGv4+VFHXWHUnuk3YirU/NYPqV0diegE\r\n9+eDXmB0PsJMEilMWTIZVCGe4jlKXEa1eIrO0nenQYXGhnA+KmEHJ6A5O+iJ\r\nGI8X2EE1LUR9x7VlC8EYLyHR5x5BtGM+p5HugtJQ/1pcvowCNVo7729avfa5\r\nBvXCcWqFl51AHTcxKrN7woj8jhP6AFjcxJfVmd6b1BgpPyJrnWqqub6HDgzF\r\n2TQWDf6J18lT3FGStTjxDbhQ4alv6tV91OyVevG3T8kBIeWsi/poy2Sm5i84\r\nLRtc0IFEUkPa4S/4UIJHQ+Fzf8tC6av4sNtRvbbjXvrwNwVm3pY3a1aXa611\r\nnZefShFYKhU76RDXmiGmKqPwJxo0WcX3YCI=\r\n=6emk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ee40081f4.0","@material/rtl":"15.0.0-canary.ee40081f4.0","@material/base":"15.0.0-canary.ee40081f4.0","@material/list":"15.0.0-canary.ee40081f4.0","@material/shape":"15.0.0-canary.ee40081f4.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/ripple":"15.0.0-canary.ee40081f4.0","@material/animation":"15.0.0-canary.ee40081f4.0","@material/elevation":"15.0.0-canary.ee40081f4.0","@material/typography":"15.0.0-canary.ee40081f4.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ee40081f4.0_1666210409133_0.9732296932750801","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/drawer","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.98f1b54e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c4350c2227fc7273379453ccc180e3c1f6a54d2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.98f1b54e2.0.tgz","fileCount":47,"integrity":"sha512-T1bCJxizwj3PIeFry3wE1M1nLmrAdyjfTDq9ckdpsD1AUdPZQT+1VG2ybTr9dfyLUstsgkgcPyS8VFSU9t5J8Q==","signatures":[{"sig":"MEUCICYBfX5nGnz4fXj/+6ByTF65PTyujjy9Se3wYEo3JC9uAiEA/ntaioFDI5Z8524RWMH9TQR6MxjS6DDDs1ebYTXBWeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdKHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQYw//bt53l+a/cU8bTW2oeMD5q6xpVpl4vysTLabfdrHuB1HCzkXr\r\nLhpUJlmAAmiEsYRyUmerhnZsD+wjZVnz28l+KkQmOCwQDEkYzw1uDzd0p4+0\r\nx+3njgodftrusWOh1OJko9iI95mwJ/X4QciVlwIBGB0GTcqaZDeo4gu1/oGz\r\ntCjNSEpWfUWPBTHnwEpljljwnUm4toS7ZjkcCzeKGNgOiGIyYDvWVci2P75F\r\nYHxoC3qoB1AUEKAxsKWZQIPmX44yJS/wmOgKZByQM6Smb3gpcGwjsYs4RVMR\r\ngwcOeEp8A6KHXXDjhypB2nFUuHQL4ixRqiC3rx5nX/F9/7sL290RdrBXDeL+\r\n51pk9lI5edWwu+/jM1AaJi64+aAwYNbP0mPUq6Y1FpLAkUXig+RxC0eGwgkF\r\nmNRQNvbYjedttbY15ngM1xHusdzYTkHV0MfgnofNuBpJZCZBkS/9mwhTUzpN\r\n6LBK9htwWYrC879oKz4zQSefogPZmyvul5Z/Idxi9LnDYxdZTD0NzT9Wh1eN\r\nnYTzkUmKQIlG7UmPrSrgK3geyFHGeu1PimN13GDUeLfQm5ecb83YgtJa83Q7\r\niS5ZWj7vHHzAJHy5A4c1hsPOCW7rIA5wLk5y3npJGAfP/3zIgeeHbFltZPnn\r\nwVf86GCT59jCHVkdHJ5Y8XMnDyF9+Oz3bqQ=\r\n=Lsai\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.98f1b54e2.0","@material/rtl":"15.0.0-canary.98f1b54e2.0","@material/base":"15.0.0-canary.98f1b54e2.0","@material/list":"15.0.0-canary.98f1b54e2.0","@material/shape":"15.0.0-canary.98f1b54e2.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/ripple":"15.0.0-canary.98f1b54e2.0","@material/animation":"15.0.0-canary.98f1b54e2.0","@material/elevation":"15.0.0-canary.98f1b54e2.0","@material/typography":"15.0.0-canary.98f1b54e2.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.98f1b54e2.0_1666306695016_0.367671452521543","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/drawer","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.e74b7ba7e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7887aca3ce234b2e5324c14f6d395839ded6e185","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":47,"integrity":"sha512-WUGLj9Ffy+aFGE9FZ0qqXUyOI7zIVOwi6Bup0+pZ5FmHv8F/T6wXxqHs+ZNbgN9YiSHwuo4hQY8DXQQ0Ym8O6w==","signatures":[{"sig":"MEYCIQCAhLPtGXQzx4SC18o63UdzeG02xLlVuLfkYoWnY+vmaQIhAJUrgI2++cRk+xUpUTqmuakdZ5puS0gbTCccl2Bh+rrO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtHIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrhug//QaeGfyU6ioIGZE0kvUe4/X7MVFMFSnCwgmjLH02uQNutFQnY\r\nC/k0UK+ldmMeOhoYAtNuERom4vjhKTirYR1DQxCR6FSKZUjdwI4H0HjvXyhG\r\nW0MyiGFJiGXNE0OAll3Ua4TNDiFyw+1FaU6jUSMdbsNixlZOKP9thE25y2DU\r\nZn+XcayVudMltvS8uEGMGXvUwr5Ke6AUBFrMD7pE5BPETKbHtoyGbCYuSiPL\r\nyZEKCbTtaMNrwmAnsiHvDLYGUo/1uzM1vgBpI6WmPE4m/lltrxDOAFM21vkz\r\nlFyl6p1TKjVw6MdkzIrdmJ9RJtxhwbpJaGCllCjUnHV35Nx3pH/wPxhNxyIh\r\ny0NS36zUkvSI3icZMYI5UsIj2BFTanq9SBjPaWUSSademdAsOq648ZeV2bc0\r\nDmxB5CIRnEm7cv8Ii+0G5jLlLHWDqgM2whMfwR592FLTHy4CUqiEeaLUicY4\r\n120wPaVS+4Q8JmjqGD9HxJDPU0MtbdCfNWjqi2yTJbXVEqBBfluQnObKt+zO\r\nbBss3PJcv53Fs5E+0W1gQhpZsCxQ57d4phI0gVbSMvgpFI5Ff8mmghW21SM0\r\n3pRkArj95Ju8fX9GLRxP7ayUxzHVizPKWTNyDntDo5LkJoJoOZNqN+yVWUBY\r\nSwObzIg/wAYmMndFijIkVecfJ1bEu0t/j34=\r\n=ODSU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e74b7ba7e.0","@material/rtl":"15.0.0-canary.e74b7ba7e.0","@material/base":"15.0.0-canary.e74b7ba7e.0","@material/list":"15.0.0-canary.e74b7ba7e.0","@material/shape":"15.0.0-canary.e74b7ba7e.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/ripple":"15.0.0-canary.e74b7ba7e.0","@material/animation":"15.0.0-canary.e74b7ba7e.0","@material/elevation":"15.0.0-canary.e74b7ba7e.0","@material/typography":"15.0.0-canary.e74b7ba7e.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.e74b7ba7e.0_1666372039924_0.8225597351826699","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/drawer","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ab55c07d2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4412ed90f55ac8a7c87ceb340a702dec264b73ff","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ab55c07d2.0.tgz","fileCount":47,"integrity":"sha512-ujDu9v3G700H6odKp6krxs72glLjUgmmSQbr4XnIr8amQ/LQ1C8NOSKIMCbRJ4Cz8byvGwHdKCbzyRgyHc+H+A==","signatures":[{"sig":"MEYCIQCSCvCU8cOZlkfWHCuob8TGICTC6v04R2E+d9VpwejZ2wIhAK2O0Gu9TXTLv8uVXVsRTd2RA+HhDT1500GGLPt/8PEq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDR6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmolcw/+NYKlPqarTJWVffiGtltcvVCQE2MkPtNl0SNV+cZbAo0iPb+z\r\nrusHpGFnWlg9VCv3+C+s09hOey3IleyLpj2jCatVyntDzFsze52qnQaOnXZc\r\nWccOVkc7RZCXY70eS2GoNx2+cppd7RoXZzPm9T10ms8hI7l516Cex2gFEUdr\r\nVXcFkcZCoRtVts60KXVGAdz9+lzjX2qc91UwRaDAHtlxI2Y2+pEQasnqRVX7\r\n3IS50hTqLAAGfOYKkYhnIrqMgmYxc2M0L5litKPN0KJnVLh+LoKT5eE5NC7E\r\nZGZ8mgd6XvhUw+tSu87pQcGLVB2qT+w1hA2mO+h8KqSYeyjOE5mINrs/q3u0\r\nukZfDXK7AVPGQARqLA7VqGzjVxicbZ2rVhvAErbfBHd+pAC5XsOQXBOL7nMm\r\n4/A+6JfWlnUFGelobTiJuy4T0stxt4ptMGODN41r6SudgeiKkJ0ltkA0ponS\r\nolnwoWtHGWSFMz4G9uwxSbmVNolQ9O1PrX7QBu8KYajNuqNhRC2J+dACvUiN\r\ncCCZCaFkF77EJArnIhfNXPOltVe1xsqDHsEf1CYi9vuQcIBDR11GkJEQPquL\r\nlWBNHVHMQtB2hV/K1gZcKYbmL3C04JJ9C2qG8xKXfdfDsgq2Jy4WQAAwtrDq\r\nMr2Q4qtMNFgLI8Or1yFX4xn0e4RuI1orAmQ=\r\n=Z0kT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ab55c07d2.0","@material/rtl":"15.0.0-canary.ab55c07d2.0","@material/base":"15.0.0-canary.ab55c07d2.0","@material/list":"15.0.0-canary.ab55c07d2.0","@material/shape":"15.0.0-canary.ab55c07d2.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/ripple":"15.0.0-canary.ab55c07d2.0","@material/animation":"15.0.0-canary.ab55c07d2.0","@material/elevation":"15.0.0-canary.ab55c07d2.0","@material/typography":"15.0.0-canary.ab55c07d2.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ab55c07d2.0_1666462841894_0.2064565151619544","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/drawer","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.fc539db34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4403b140b1b86deae15451ca12aaab69030119e4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.fc539db34.0.tgz","fileCount":47,"integrity":"sha512-An+tKX9il4UbF4P20n/1/miDyOm2TmLdPr7dhUcYm1dfdFNM3ZQ3+6EVX46tkco0xaF4QZgSn31ny3e0xszUtA==","signatures":[{"sig":"MEQCIBWXROjeiHV0ueMeI4pj154OlZ8KEe7Oee8TxdFhQcnnAiAEoF85eYDnyVtt0hP2N35Lb3suejrzEM6IBgsKX3Y78Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuDeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn9g/+JK3CU1Zl/CmIZTdyPd605tZTRp9mpVMbbI9FKIP0f8yMGL74\r\nArmoE0gOr4lY6gCkJBdoC7WR9/3A3meKRUhi3+LQO6/MHr7K9WwWisy2iDQf\r\nYEBE9gkIWwVoMV5GlbDu1cDPIV/1AWVw7xnXAM+iEoLLn+ALo6KiVndapRPR\r\nzKbGj4wDGP6hPUOqpuUeBVsNlVvdqZ4vLEr2HDcSKjz2TniBzvi6DNGS0QOc\r\n3BQNYO0nieAyOa7lTb7W60dw2INqAXIfT5lkjkM0Mpmf4aQhionlV5dLBKXW\r\nmKqEE4tGlT+gvsRiPuLJ69rZrKYJUDRCl4WpjP0mMyC49z/HaqTI0f/C1zlE\r\nBdOcApsLOMYlxX4PQkA5bTty/LNN/2/9Ga48rn015bKTgJjMW+FXKXPJ44OZ\r\nda2r+k1/FmnvVlsQUDJEL9ER9mhdzJXrMUKfaBhxVxslAO2vhuInhr9WknRK\r\nnRC11X4/WiTCf3mdWsIyCpuFhXLFth+ykm+XyzSTjrpuS0zSPzGtbTsNrzuQ\r\nXaF2FsAmds0IrlzXMOA8YqejwfaGU44zEsD9AnY75qTsX8s7KIlqiww03KI0\r\ndc5pUTgdwEDL5TvkM6PPX01qDa6ZGL/egdWEJpL/jMEB6zbNXPP0E0iMNg1o\r\ndm6BFgPigOqIJSgdwgeqcOh7Sd6CcAsMv+E=\r\n=2LBG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc539db34.0","@material/rtl":"15.0.0-canary.fc539db34.0","@material/base":"15.0.0-canary.fc539db34.0","@material/list":"15.0.0-canary.fc539db34.0","@material/shape":"15.0.0-canary.fc539db34.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/ripple":"15.0.0-canary.fc539db34.0","@material/animation":"15.0.0-canary.fc539db34.0","@material/elevation":"15.0.0-canary.fc539db34.0","@material/typography":"15.0.0-canary.fc539db34.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.fc539db34.0_1666638046275_0.420627870699114","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/drawer","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.e340b04c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc1403732e66b2fafed4a4b51d235aec0d473563","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.e340b04c5.0.tgz","fileCount":47,"integrity":"sha512-X+FJWgk9ExiBgAAOcoSgDU8t/1ogrWhsgQX5SSgsm8YlGNqanl/dxqf+c3fUTcerGe8TkWAiAK9+QqdwmiRsvw==","signatures":[{"sig":"MEQCIDGWj8rCQcVWqbkgv7MGd44F/+4XKWrGT4kJLomKPm4cAiBvelMsgOLem8xtulYyx0PwTkess3T5rXpmFBCQDr5mDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHVcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7jg/+Kei9VQ9tmdutRCLPqbN8phL4irgTiT5e02GXmXUNedwKJvJB\r\n3z6XAZyshFXqUXEQUIsof87LpXjEdjV3o6lleoJucgkoiktXevmA9npu4Fe5\r\nKldXowfwmmNWzI4EQomqLPiySk7o9evOQzUznQFdUgGfHdyCVTttfj6mKPug\r\nnd09nkK1E+4CqwZkDoH+J9wYAIVA72GSYo6SPYuOxveYnxaClCRsQJG49UdY\r\nwhiyrniX8aOv7n+VUF5PazCscI2EGM0BvxunOL7kOuoXeXHJiLdNphFdpjJr\r\nUzGk9rExpB4gnL1tuw7xeQ2FQULGVa/Uue5w/3PijRr3zwq0g//cOML7u9bL\r\nfBD+txmfln1k6VkHk+G0X96hd67bklpE9UcC59Qz37oVzLRp+82aGzPsIoK4\r\nvS2gj1hNo16wHZO14TWq8xx/cchWwIC8PL9PftvarrTJE7bX2O3KQkFfD02J\r\nZ69NHkR+ZjbATBVwtUftxYzQ2q/fEyAnmdkuOb9D9sIxXrpDLYWqqQLMYApG\r\n1tXpqK/GQQNxZmOw1nEISJh6wDTp+1iyc1zOtupx5/C5qtlP6YYn+NOuX8SD\r\nQJ/LuGUL5pWMPaGDQU+yZ+m8wMYSUaEN7kmfaaK/cHv2aJlXfjcg8t4zRvPW\r\nsXGKwa12xXtcR8uOe/LMKxvklLZRrGttZ2o=\r\n=nDIy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e340b04c5.0","@material/rtl":"15.0.0-canary.e340b04c5.0","@material/base":"15.0.0-canary.e340b04c5.0","@material/list":"15.0.0-canary.e340b04c5.0","@material/shape":"15.0.0-canary.e340b04c5.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/ripple":"15.0.0-canary.e340b04c5.0","@material/animation":"15.0.0-canary.e340b04c5.0","@material/elevation":"15.0.0-canary.e340b04c5.0","@material/typography":"15.0.0-canary.e340b04c5.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.e340b04c5.0_1666741596217_0.34309833076677965","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/drawer","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.2c1a8f8fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95d965100934fb2426eee24c3e3a4787c5903228","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":47,"integrity":"sha512-sJXGxP5oXKW/AIG/keyWctCFAZSP1aN5BEQqupbe3yEv7jUa5Ntp+/reudYddMMRLM2z5lDWLjcHLS5x2LpLqg==","signatures":[{"sig":"MEQCIF70Vu5hRIhCdW+fTYWDMP4mtFY8In7KR9WgTZGzFBbiAiBGM+k5GRL2TYiEdOA1gwxVeMgOaWRbWOwMarsn/F45/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW8dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmppng//WQTDgvVzqEwY7God1coZVhvJZ1uAwYGxn83qAt6E9PEqTS7I\r\nEb/oykPMZRKpKa4QmHfTQP9ktJPatjK+9wjgjdkSWNxlwjIiGCj/uwEd2Kl+\r\nH5ae8TmV7Q7xIO9PhvgUN/vyuLvuLFofMHxzDVw3ioE+GQGKwEw2CuSyK/9o\r\n+QEWMSjyVJrrYwSk7SDfz4aiE0JKhu/JPEm20uP7QNaEhj66ljZCHWK4VYsO\r\nrdlbCfUNaogWyCk4QJNGamg2maOV9n+X81cvEMjVNOwIrYeSCHe7fMRUeA+V\r\nYIWdyhalDaGJBkMxiT3WFuXE/S0gt+98GLJs6ICWRHgCUzVltkWpPr0qUwJJ\r\nWTsNrNevVXcMzubQTH3GU3kdt6Ds0nByxGB6aSrYO6g61gDZ13TX+si2Ony9\r\n8gU4+fsRXkAi4cKonFvDBMaMQCIMKc0Yw9aXR1DNLMGx/COf+7asepQvpIQH\r\n7wjJBCmG6nveT2Ly8Av1kkmwgrr9RV4hvSFj89dY3RiPwIfgeD9OP+vndK4u\r\nhnEJY+k3aLRfSP36Zw513/Mkae7DrjVTnfFltyryS84PYsv35H2Jswifi+VJ\r\nNQXaI4MVyWEfwDaRfR5n+SF8P5av+ST9VBBICHoNhWWnVfaViGW9XOhS6K5N\r\ntvU3uT+t4dh23SV81UJqM0Av1GvpM468Q4o=\r\n=3zkP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2c1a8f8fd.0","@material/rtl":"15.0.0-canary.2c1a8f8fd.0","@material/base":"15.0.0-canary.2c1a8f8fd.0","@material/list":"15.0.0-canary.2c1a8f8fd.0","@material/shape":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/ripple":"15.0.0-canary.2c1a8f8fd.0","@material/animation":"15.0.0-canary.2c1a8f8fd.0","@material/elevation":"15.0.0-canary.2c1a8f8fd.0","@material/typography":"15.0.0-canary.2c1a8f8fd.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.2c1a8f8fd.0_1666805533634_0.5993238655780848","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/drawer","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ecfee946f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"badea3410e52f32ded2e087d5b6216a087062acd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ecfee946f.0.tgz","fileCount":47,"integrity":"sha512-26dqb8sQuQCieaUbU4g/BKneCaqtnKnAbumTnEtr/7aOn7PaiYvO11viUja2FnW5C5ZpvWDW13v7dG6ymP6Ucw==","signatures":[{"sig":"MEUCIQCVED440TFqJH9cQjw3CczXfaofGU3zRyIhOD8V7NQZNwIgJcjTWNbufVcynlVU6TbLPlPw5g9l0flRFQbYY8cYgYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZW5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjkQ//bjYaLS8Lo4FC9/cJvO5I3WGAbXCfox7YFh8MWw2uPsje/G+9\r\nudq+U5fRYUzXLGZPl/8hdaNwPtg2gU6/6kaOLuNm5oypJuBNEnwvt+2NJWqK\r\nWZ9guOIqiXK57DKboKbNqFIdOEfN2FxRorK0uHQq48Iy8Gj1lpiKyweIWdJD\r\nU0Q8Y73xNXmRBVbiT186UR5gTxwmXkSKHI/MjRPU2GMYLwCvCNmwIZXJ16hs\r\nEnYASOWwcdwZt5pIF3BQnhkG4Sgwd6B25jDkUtox5uTrfuLgqI3fupkbwrRS\r\nZpdjjROHO1cyKo6/I6yQ8ZjyY3dQ3wm0/8LnulXNaEOdPZRIXfkMTgNS/9Fp\r\nRRiNkvhX1BGK/eVrcl2chWodpEdDglt861jsU2UbsMDJPAdkHicDjhecvBsF\r\nF4hsUVmlABUpObSFiDBbNekGlCWiv7tcxwd9TERpcwU6qG+/7tZiyw7Etmun\r\neTiRHc3Kp8bkeYoUOx9uZOFMKPntbc6Gl9RlfK5z/69bdStqpCVUABBE+UwN\r\nxaba1MtYvGCi11SKSBn9JcaEI446q8SSLp6l/yT7GNTHuAc5EydpvxPeiOD3\r\nzkZbEa999mH0I/Ug9qPx5aMiknwo0cv0ubb1pe96CdhufiI/qd/S+I5Vb12g\r\nxaH6ja2DNO2GW5h8x9AiayzjS5wMRdmTSZU=\r\n=bx3d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ecfee946f.0","@material/rtl":"15.0.0-canary.ecfee946f.0","@material/base":"15.0.0-canary.ecfee946f.0","@material/list":"15.0.0-canary.ecfee946f.0","@material/shape":"15.0.0-canary.ecfee946f.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/ripple":"15.0.0-canary.ecfee946f.0","@material/animation":"15.0.0-canary.ecfee946f.0","@material/elevation":"15.0.0-canary.ecfee946f.0","@material/typography":"15.0.0-canary.ecfee946f.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ecfee946f.0_1666815417174_0.3611723350376861","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/drawer","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.73ca9dbb0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a79ce1311e009d8a1556fb18e5544fb02c10bf1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":47,"integrity":"sha512-NaGxL2Y+5ueUItEIXdnvzJYl7eo9UMCUeiZ7z5bxnXoM6Ebm8sRjLr7Hj6uVFzxOTuyyzG/mJ0iNM5HxLPNu9w==","signatures":[{"sig":"MEUCIFYpmx3OTASEn6575tagheu11q5j2P/fKpuloXh/1wefAiEAzl9TiWuQtK/f6sjJp23V1sgOtIVayNo2EfnvailmKVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAcJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpH8A/8CVwQbbc9bTGhcm/kBlPZxx2A4jaWdpXIXhKIZ109He3akv3R\r\nFTgLjL3N2joV2NA/z/760WwLNG15WNhpr1uftPKjtqyzHkoVH/hSTjyOSihU\r\nIavyesi7hgW2gdSPzo3WHBKBVhoFzgHn011wrh4hUpH3cZGcl6En5yO63bDc\r\nnAIqEvPB2pyB97dfjvXCR/LsfvbHfYwwr9zsFpNsoq/znJPk2GM43osJTDuP\r\njShStpCHGheEBrXXTVW9+XMH+sHKzASirz+swe4aQ+IXylUgrRW8Q/9YhL+p\r\nWjanBKSb737bNIf5QUrU4NIfX6SFO/0Gdu8baiQbUJ5UoaTTmcYVV5BUpsSx\r\nO+pHyPV68jW2Cd608MoQQDuzE+a9+Ccz2xWv0VJMkDRhXiifpwx+903gcPii\r\nTrTQn1zTjD4/MPlqrR2SshHLXnmzfmaTiDkzbfe1EfHHXtJoHLbm00qVsA4c\r\n9LtRWQfNpduSqlNXFQKDZl8GJvA2IXkiq9uYTvgFSDdteOYZqflJNth9VWs+\r\nAK/Ty0lphFIUtsE6XJRklpG+oChe1P/QnKfFG6IfHDa1l/JoVg+UtaNlCCl8\r\nH5Z+wYliJQ5/LexYJIR18REZpfDaU4KePlhneokNSvDrsWnN828gJ3o7aqh3\r\nzTLBGhT82ueVQ0XfZT/fWt3AjpXzOttH8Gc=\r\n=2CJZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73ca9dbb0.0","@material/rtl":"15.0.0-canary.73ca9dbb0.0","@material/base":"15.0.0-canary.73ca9dbb0.0","@material/list":"15.0.0-canary.73ca9dbb0.0","@material/shape":"15.0.0-canary.73ca9dbb0.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/ripple":"15.0.0-canary.73ca9dbb0.0","@material/animation":"15.0.0-canary.73ca9dbb0.0","@material/elevation":"15.0.0-canary.73ca9dbb0.0","@material/typography":"15.0.0-canary.73ca9dbb0.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.73ca9dbb0.0_1667237641678_0.14754750478531586","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/drawer","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.357f2e5f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6057775b6555cef327970aeec6cb9a084fbc1bbc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.357f2e5f1.0.tgz","fileCount":47,"integrity":"sha512-0tPcNv2TWOPOfSqEnJqOCfRhU10cbBqfkuHdJmjpBnJZpN2hF3gClY+5UXKGjBbanfiyVYKFyAvnX3JATsz/pQ==","signatures":[{"sig":"MEYCIQCyriqo6NLDj+ek4IEl5HgDADBmp3KTIi+Mo9ALvDlWzgIhAPP/mvDVgKZ6D3FfEWOQBeyC75Cel2esEB3F/w/9R14/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBkdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfRA//ZImLy7JUF8dkDXoHIm3B5Zbl5t05qu+TWXoFDf5KmxPi+RPx\r\ngIUd3f1oPveSdoQfMMjn1RQdKJEClmiWmD30xAPWjvqofA6iyWEsGFnBvYxd\r\nz/yCR3lhr9y7iGHlGM12M4T+iBqVPP1SQFUJpY6GtZ49yS0sCyahRec5T01U\r\naJ8HUfD4LcwTWIWHtSyz1qTrQAADdNba3Fx7dayc/MVPdJptohLwMIFOqzAh\r\npKSXoDwi/pi3a2SBHkBTekR5cZx9Rvu7p+C9E/FulPdz8ls/GigY+ri5I9fY\r\nAHuSY9XpF+dL85IbljkFkbjbwZoyCcN48ycGYYXVI9dorQp+UayHhb3uN7lg\r\ntOh5FZTDqPKOhVJ2xXaVsD4tnnVGiKPsE9rf8gMNHpg5XeNd8Q50Zwyu3UHt\r\nrF73kJcwNm5RtQSnlN3hEwu4X1iLqE4RDA4aQg47YvucVJ/Def5+ET7tNkqM\r\neXnxRpqgYeNCpXGEFjVKaD0KkPEZqD/8T9d6mnm/cEh9GzzeOTN/4jhCq7CS\r\n/HIeDK6Jm5TnwFp8EPrP/ramG5a0EK/C5alr2z9B14hCWxci2LssgjMCuP9Q\r\n/U4NTAiLU1w4ThrPUAmdBnhpZRgjuciH20fwYaxc9WRONeEdplWhVccMskLK\r\nwGzKD5nS/NH+QIowNicy+0MRp3CULSF03G4=\r\n=jatB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.357f2e5f1.0","@material/rtl":"15.0.0-canary.357f2e5f1.0","@material/base":"15.0.0-canary.357f2e5f1.0","@material/list":"15.0.0-canary.357f2e5f1.0","@material/shape":"15.0.0-canary.357f2e5f1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/ripple":"15.0.0-canary.357f2e5f1.0","@material/animation":"15.0.0-canary.357f2e5f1.0","@material/elevation":"15.0.0-canary.357f2e5f1.0","@material/typography":"15.0.0-canary.357f2e5f1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.357f2e5f1.0_1667242268761_0.12748779006763677","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/drawer","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.eb103d4b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6677897fc0886b7245db82c9c1932898fe9bacb2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.eb103d4b5.0.tgz","fileCount":47,"integrity":"sha512-YnSI5WvO4LMMgICjuOt4tLgkhuhloYAaoPvlV5SIi3fIil31qvQlVKU9pPwEmU9d2AZvYC/9tRTwqDsnaTDAOQ==","signatures":[{"sig":"MEQCIA2Tb5HqWqy2hphw3MXL5c9SKgFQZHmzz70u9rKcl5APAiB6ZAiRwWn4n5zKo8h04zJb9+azdyCLMyHH7OkocG0KHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCjMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmookRAAkflsrfpvH56XPNdqzXfxjxdl4z47O3qRjexpa/jp0lkizcNU\r\nXED3VXxwBXb/NuJ3UiwE2pC3WbIKl5XjzDBR0saeajOPIs/t1iZD+MLCJpjn\r\ncsxwF/9AQiHKna+XJ5mWuFaptUkS2t6fz2Ir5Nh5nIM7RDqSEZonmFn9SP8f\r\nzYbh/9hFPT/Pte9NW9Bl7wd4391vv85B9+/pRmiyTls/7V/pHWBjHL69AzQz\r\nemwVHb38bNH6XLMoJUKbXxPlaVJLk2c7mE+UYReM/AECCt1nZ8rKnO+SqW0e\r\nGvzeShS0cTG8R4ZeiE75BE1FNSkcvE/l1XOLrooyNth8f8lI4IZc2fjZ19Wp\r\njHfQEl9KvQc5v7XfuD549UvqEPvCvt6Jk0icg/mZpXav514omaN6zAZXvHoh\r\nv6dboNcMNfhK8P2x5DywIoVdra8QkXnQ/izxYIidl/OKszDOMgNvbkEj6qX6\r\n6TTFhb7zxE3uXA7EHWmSLdv+YHbzFo0H8hUPnfmdTpgGyPXFd4TzZNtU2X8/\r\nnQueRcgNyh4YDCrSErC16+hzX+I0eatOHqnigtGPbZAM4o9JOTgMA5seWiI4\r\n4cIyH3jKYyK1kHHUrJlpRQ6cyCRnWL4saXhDSRgfh575glvkLjLU2Ut7gEtt\r\nVbGCSex1oiyuWRTbsSpMAUriQE/MQhQzuJE=\r\n=CHFZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eb103d4b5.0","@material/rtl":"15.0.0-canary.eb103d4b5.0","@material/base":"15.0.0-canary.eb103d4b5.0","@material/list":"15.0.0-canary.eb103d4b5.0","@material/shape":"15.0.0-canary.eb103d4b5.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/ripple":"15.0.0-canary.eb103d4b5.0","@material/animation":"15.0.0-canary.eb103d4b5.0","@material/elevation":"15.0.0-canary.eb103d4b5.0","@material/typography":"15.0.0-canary.eb103d4b5.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.eb103d4b5.0_1667246283722_0.001677655750021323","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/drawer","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.af5f01223.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86741bdba279d2d9d3151b49772e86cf4a16f60e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.af5f01223.0.tgz","fileCount":47,"integrity":"sha512-6vAzgqP9g4mSVlBUgaJc1SFn1mAatNRB8UDe6aSq+4Pehwnl30Ka1fy4E8esbO7kk0Op7lacok4PuLuxEEWbvQ==","signatures":[{"sig":"MEUCIGyYCr30aTo2Sp0eKHhXAT4g8xHQU0cPq7O0ZaYlJ6nbAiEA5dljWPb1/PUFYo+eQfM5QUe6jaH4mlU+nEB/WBEPEG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWehACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8Lw/5AGwue17aFUgiG2uyInPVnybasha5I2QJH6WFGHfygfLTUcUn\r\nCk8d4petnIuDpgLscmvPuEzoKSq8Y4m2B8ThvFIb+L5b3tgftaMvrwFqR9wJ\r\n3e98OVwDzsqRrP3wdQm54eAmFeF5NPvB4knTG7nI2vlXMbR3YPs8xi15SRgU\r\nj54G4Apf7sIM7cp30Roe/gp92s9k0jRwlhMpQT7w4LSxpuECI8Qxbs77fQMf\r\nAOjG6N24saMgXwZwg1K1jMOPKvsubI3SC4CYL7bWN1nmVzeJfY/SiJdIhTvi\r\npDs2GKNcDhVfSh7kUi/aCw9UcaGPwgC2UFJiMYfTQuwifl6M+l7r+yt2eQTS\r\nBnVFJq8n9Pwh6H9l6Y8zEqI1RsrMSR+Hq3oA664tD+ldYdvK3fNtSTtYP6o9\r\nDpeWeJBL5LbMTt9ySi8w1t7AQwAF/wOUQXOTu/VyBTTGmmoY9lgSs7bwo+Zy\r\nfj7Xk3Nr3TeJ62SOxS+rxra7hZ7IRcZ4RjjCEVI7htSiOmSPA6mP3xMhlkX5\r\nC98ePdolyqQwBXxOlh4/KfHTvq9Qpbtsjo66NQvrjZgBjYm3JKW9+fqGuHom\r\nP67Xhm3cSkZ1l4RDm2pS1XgU6hoGziyMSoB+ViSdYdqbGqDbgIiN2P/13iBj\r\n1ssuKb9L0XAtyPdSwK2jNH7KXpk9b5o/os0=\r\n=16rn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af5f01223.0","@material/rtl":"15.0.0-canary.af5f01223.0","@material/base":"15.0.0-canary.af5f01223.0","@material/list":"15.0.0-canary.af5f01223.0","@material/shape":"15.0.0-canary.af5f01223.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/ripple":"15.0.0-canary.af5f01223.0","@material/animation":"15.0.0-canary.af5f01223.0","@material/elevation":"15.0.0-canary.af5f01223.0","@material/typography":"15.0.0-canary.af5f01223.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.af5f01223.0_1667327905515_0.19338214787722352","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/drawer","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.58733ef41.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5c66ffd3b2ca9da1daa73cefb572310252d138f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.58733ef41.0.tgz","fileCount":47,"integrity":"sha512-yo+FMgq3TPTde0BDHbzC+kmWVMeFvnn+9aZR8RXMT2A+9pQ7y4gxiBTFRjspSc/LWC1+MIXIOk1vmzWwuVKmaw==","signatures":[{"sig":"MEUCIQCh7ycyjZArk1WB97VxGDhEyCIv0PfS0xkqBHY3QBq3WQIgSV0U/MHAyU+XctB0gTSjsUnCCU9vETfhz4wur/YadWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrMCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryyQ//QuVw2BTHX7pAlVCO6hSAILfC/VE1ANcj50OTXSE0VTi9nOa/\r\nvUTFgEyd3Pmr4OMAAQrAFcQr9EAfX8h81wz8oEDMZtEf7AQO5+OsqAf19rzn\r\nKrdI2/hI87spppLwYx76+9nFMhrVy+17KVv9Fdg5SwTXYfBW4za4wMPrIZtg\r\nH8dExel3qd/cbfWPk33RRDjRNzRkB4ZsTl9pGNOe7j7gJaXRbxoegDdBNb9y\r\n10yKZW551oAMD+FoqH0LNbISTjZJPmtwVclFFhNFzC5nazocsra40qydDI+W\r\n6ul+kHnF9ODUoAHoJSDjqexZqAS5rxAOQCIJGXjgwlWiwKEp5roHXohxVeEA\r\n1xL7SLGzmUfww8M6p9+dx9lJ8e1vYBDHK2Ck6Xnm3WYQOR0NJnl/59CvBPse\r\nccHOJs4VFORcnKGNMC3Q8XAEg974uJBg2qRG3yoEZE0ArXWaGBArqMZXq1bE\r\nJgFJd8dzrmCEYPp5QK8wSxQU4fyOiEapZC6BLcOD3+ErdsfzfXIvZOE9cMpQ\r\nVylYZLGsIEkv0CgbFKjeawcZEfwxCd339QGDtG5FWbib087TKLleeRCnrKFF\r\nA9/V5rE1MXop05/1x8FiwHaFWQj4SnGMq47g9FgHF61vpd4BERzwiNiT7V0/\r\nWDTogEW+1J3Lt/3xJKawQtnj/+E4lTWDAv4=\r\n=fMu9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58733ef41.0","@material/rtl":"15.0.0-canary.58733ef41.0","@material/base":"15.0.0-canary.58733ef41.0","@material/list":"15.0.0-canary.58733ef41.0","@material/shape":"15.0.0-canary.58733ef41.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/ripple":"15.0.0-canary.58733ef41.0","@material/animation":"15.0.0-canary.58733ef41.0","@material/elevation":"15.0.0-canary.58733ef41.0","@material/typography":"15.0.0-canary.58733ef41.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.58733ef41.0_1667412738038_0.9815809907346977","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/drawer","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.909b48215.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df7c56d80471c62e111658cce23f1db362f1dcc2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.909b48215.0.tgz","fileCount":47,"integrity":"sha512-7BHMk8Oovn6GHkLb4KnVigC2VOQxqk93s8Ym1tiEND9wr0LDgSi6fKeWp/qKlkvOJs1GJ9bDX9hJExDeG3rMog==","signatures":[{"sig":"MEQCIDtnfmfYUzoicttTEBRFiPQ7W1X5ac+GbroEf6oFOrRVAiAUgJBOrii0dACU2z4FpXnqtdtkBCCAzLmoaZzjMuT21g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz7+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRXA/6A1LSpPa2nBPBRqJQiI36jaCk42GExVsRWP6JYzCkQwiV3cSd\r\nmA7KmLxawMqOyY0iau2so+2gH/nhZVPYWtDi2bHy5h5MfK/f8W4utk8uI6M/\r\nWMmqnKv1md63Q/PAHi9tXRfcqs0JjWGFoHIjXkb7r0YtH9zRihkRGnCetF7I\r\nEVPzHeN/2BMoV4yO2wuGO2XEIpERtvPd3mu5L1SRNBI/k5GGAGewltImOIJb\r\n9JFSf7HgEWrR1HwplfoJbUlFlm+j00wZ5lD/IyftDELeZCc48oxyJnSkONqD\r\nVfIlQGqJSV2j+W5SqO8O1Vfs3O28czYUYISp32R1fbObh0LXNaZM2ZY67EYl\r\nsIa9TN06M/X12edymttHl4wDssRjXBWV/flp4M8831guvK6wzpQJrF/5WoVJ\r\nsq7cdOwNi+0COGJARm/G+u5KZvyLfOaEtuYHeDbrWH7Vl5kqm/gepMVAzhDj\r\ndrn0KsOLz/LTyaHSSYAPjb2gzf39fF8CEsEem6SalWIA22mvamNfcUWe4cbr\r\nDPL2he2b7g5uTqrTRZiLIV112pf0taIz6k/lwqiQlnDObX240Tja1gr69216\r\nJPj0PxW2X8UEBDM9eB50hwj1AUCFs/GXhWRZKmu/2YUzzPYxKXLYuWCcQDNW\r\nRjx9MpN7NU97shXo7vU4cYJYr2+8+23rnO8=\r\n=uKzQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.909b48215.0","@material/rtl":"15.0.0-canary.909b48215.0","@material/base":"15.0.0-canary.909b48215.0","@material/list":"15.0.0-canary.909b48215.0","@material/shape":"15.0.0-canary.909b48215.0","@material/theme":"15.0.0-canary.909b48215.0","@material/ripple":"15.0.0-canary.909b48215.0","@material/animation":"15.0.0-canary.909b48215.0","@material/elevation":"15.0.0-canary.909b48215.0","@material/typography":"15.0.0-canary.909b48215.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.909b48215.0_1667448574369_0.2851632897890999","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/drawer","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.7f17127d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7f900be8194a5661d354c65b094d66b5bd48161","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.7f17127d5.0.tgz","fileCount":47,"integrity":"sha512-8miFamRPNqwNrAHjKfN/Ak5CvIxgN4RMtyJRN2HkJiO4SR9gbQeBn+N+xr6gS41wLH3lFfHIVs85Fvg3qhuNew==","signatures":[{"sig":"MEUCIB0j9sVjPQhvrIwN6AwWKna17ajUnd6/i12pBccHobLvAiEA2yqXjESP/ph3rjP//+5XTNBOrXDHLrTuwF3xn2Iu/JM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAZ+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmphqg/9EhlVEoHA0JII/ouGrsPPWTMKPGslOjMhze9IWaLu9OSfS3i/\r\nkpXit+Rp6lGbbHgXJIGOl3m1DjaNy2MuU2XW5FNn3KJGkl1x+ZD/R62YiVLT\r\nyUgU8+1LddGUiQo1W5uQTxY+EJ/+9Qvj8Bw4oFAQ6fBmdpvMpovbiZiSsAo6\r\nct+TSWev4HUHBhEEAId0j7l83dhgTSv3gTehcM0ZjG7T6QpzlKtvpSHqbn6/\r\n0dV/RxOxfb2WWXZWrA7nL+MrvgiQoLIbnX6wiLEFh1bkDLElwOLSGk+iylbs\r\nTPXKOIwcD0zag+059qbWulHf0Ujm+u/KeHptPVwPp6HSulLPvRGueN/ReTh6\r\ncpyS3CJSFE+6COXsDE5LjYMhcury6hSjj9yBcg3wIxeze9OSx4dbZNOET3y0\r\nw+aH2ce0o27MgfgVkpISVAx7bDvePim1qWdSBz7F0crdwTWjZFTotvtAsp+2\r\ntadk7JgqyH37ZpoVPas2fZbj9jZ3YVe2kf+m9BWNiJ+8HDMpVnJz6zE+L1w9\r\nNKTWkNPZK53mJ4KPfVXadIZhajLdpyOnXsWJ9DjmN7KRTEZL5JLKFXJda/2g\r\nlJ9YWI0ub3xa6xso6sSWTKWzKAgTZM4b1ORvQ7Mz0v8caiSoLHNW+tLvA70J\r\nNl13hBG92d+ATVsjZdS0xzhr0kwzQB5e+xw=\r\n=yCnP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f17127d5.0","@material/rtl":"15.0.0-canary.7f17127d5.0","@material/base":"15.0.0-canary.7f17127d5.0","@material/list":"15.0.0-canary.7f17127d5.0","@material/shape":"15.0.0-canary.7f17127d5.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/ripple":"15.0.0-canary.7f17127d5.0","@material/animation":"15.0.0-canary.7f17127d5.0","@material/elevation":"15.0.0-canary.7f17127d5.0","@material/typography":"15.0.0-canary.7f17127d5.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.7f17127d5.0_1667499646399_0.2602702465294322","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/drawer","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.da95e2a05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6344a4594ac6ef78b780595c37d823ebedcd970","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.da95e2a05.0.tgz","fileCount":47,"integrity":"sha512-42MVlrUDk6xaMNuW2HZ0/tcbofYObsG8jse49L4+K1sp/0Uoq1vvHyZJzYb3chzLHK6OWg6sL9Dbnw78SnjFEw==","signatures":[{"sig":"MEUCIQDDqAbMu7djnsP3ZzRMHYbe9rkJdGkOoEDWYknoWPIAwwIgG2c4SrXijbcRy9bNrbIK6v23+uoqIS9rp0MknJgi21U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUU4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmre2hAAmzTCKXr2FdAS9WvIMMfemIWvZn/dmpzlql3Xsh3tmGIj9WKN\r\nFfWHAgI+cB9Gu2r3TOkKGxqbgiOU9mHFo2IMOaCTGcXGXyOnL9MM8j2v0CQa\r\nZ7K+h6g+AmloBVOZfnuyuV0Uag50xbMwCggSUK/eRhu02neoEIV3sYTb4JX0\r\ntAdfy19cog/fuwDcbd2oEz3ERKPGDdwrB7B6XY+sM+ny3jJQNF0uYHrIUEvp\r\nDQaWeKfovmCIUyiZTmXSNun2WyqxnseS/CTG/X7RPb7DFNbyiAUpzQc5L0fe\r\ni+H+twzwjSZUD2pacjBAcwo2xLxj6X6p+1C23g8s1ThAumM/ghnFX/FWL2OU\r\ntuHRfaoLNiuZKA6xQBkE8cbP+DH7eVIIbDlHmE72M5vCaf4FmLxexJ17m1Eq\r\nWx9m7M7dSqx22TjqNdBTRFpVpE0w2E3ginLrv98/jGX5mHpzHERq8wlctE9/\r\nZ3A7AyIB919TufLlSxg7imkLCURnpZnqGwGHY40y8ozhsUf0/Br4Q5dS8QiZ\r\n1JQmOZq296yu5bqty3WjoaoaobzXyTn/sKtDqRHAnPnk5TkzVhp8G01Xuwsw\r\nHQmNduXM7YiOnmAQWM88eVEkuaThssGT5s0O39LvcnS+/vPi0spB/ugePmaF\r\nxS8B2uJOx5vCZC983ycHrSEXSRWLE0HS0oo=\r\n=oZ07\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.da95e2a05.0","@material/rtl":"15.0.0-canary.da95e2a05.0","@material/base":"15.0.0-canary.da95e2a05.0","@material/list":"15.0.0-canary.da95e2a05.0","@material/shape":"15.0.0-canary.da95e2a05.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/ripple":"15.0.0-canary.da95e2a05.0","@material/animation":"15.0.0-canary.da95e2a05.0","@material/elevation":"15.0.0-canary.da95e2a05.0","@material/typography":"15.0.0-canary.da95e2a05.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.da95e2a05.0_1667581239780_0.4632979005091853","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/drawer","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.4832e2750.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b044e29a2a642daadc4ab5447515a4b421cd183","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.4832e2750.0.tgz","fileCount":47,"integrity":"sha512-HDPpGNtpkjbzdIpWwdtxrOvYrsqSv2ac4NYd3Z/TP8AqKJzMnXVbywtXZeg614j2jleM/17zwi3i7rqOB4W8Vg==","signatures":[{"sig":"MEUCIFI46ukqOXD3mghPhhQ6sjn1gpN5msNGM2UbSd9IEX4jAiEA0DVclThwN62eQS7ic4aOVXxZ/+f+ZkrtEd3vl1CF95Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXz9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphNQ//RkTYN7cObXDfFDeeHA8I8bqSWE8a0eXTrKb5vEPLXfZXR7YR\r\nIKj4m/5dHGtDQXoo+CqANQFb34SAo7qx7dfHzGJCDE/wqyAQllyU46cMfOA4\r\nRRMUgrkc98dWzdXZLX44WhUjie1TKTwX+wyJE+Ccajd0g/NziUIefDrwQFqL\r\naS2D9+wA7cfIzI7Ttw3CnaFXRPO5HFGsFrHvHybocqndjUGAn62WfJp6Zx1s\r\nYl+Lihs1tASxO4fMMgNO4YysOxNlt8w2L2p2GHHNky28NxOUipL7xTFlW08v\r\nNG0Dj6ibCRLUQoZhk5BWXD82l0ntsv3oZACTm1ihUF9SyTQxDBpGy7ohjXLT\r\nizlXwi4Bd5uJ+0jg68jQNCIXjbWRl0Qj3au0UVh/r2yYb287khyQQ1pIvDXk\r\nxEMfzOxw3JuZNcGD13qPbvpraxQKlEdo0gFykEq8/ZDYrOdkL/yX1rkH7pln\r\nP7D910VPfsmW6jta1DAw1CuazqzEyIsXxnbEuwblNn4hTMbDy679luhxCTPT\r\nRPvvxoiM70FBRs+ZwyXlIKwcvFuYjzIYctctJuWTVusQrKEzn/Jzcy1zBgjZ\r\nvxQeOXC07xiz0O0cF728yZDCEUaD8ao2cRrYnD2YZp7UXbrabUK1VLzem7OR\r\noa9EMsZGq/xkQFTSrVJmUkorY4yYR0ewUHY=\r\n=LrXu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4832e2750.0","@material/rtl":"15.0.0-canary.4832e2750.0","@material/base":"15.0.0-canary.4832e2750.0","@material/list":"15.0.0-canary.4832e2750.0","@material/shape":"15.0.0-canary.4832e2750.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/ripple":"15.0.0-canary.4832e2750.0","@material/animation":"15.0.0-canary.4832e2750.0","@material/elevation":"15.0.0-canary.4832e2750.0","@material/typography":"15.0.0-canary.4832e2750.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.4832e2750.0_1667595517698_0.9608221008896725","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/drawer","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.215506426.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4c4bebd6be4cb2005a6c4060bab7f56cc34797f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.215506426.0.tgz","fileCount":47,"integrity":"sha512-qChZyDuoR5XuLK0lTldL0StDYjvJJId6Gi95xRygwlwyJvbzZk6lXaxC1S98So6LUYXfKLtJaJ/7DD6qUNMoRQ==","signatures":[{"sig":"MEUCIQDP/ELiEIJmyhFmzP/Yt4yTBO4qS4O61Q/b9fF56ZfMCQIgFUQxyZX0QsxqygOrOSBpTeG72+uQXM/2mp4hbRA7+Zs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":976988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbdZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCUBAAkNcTUhJdOC88Rca/4uuX0UhVSd9cpqDiJZqYu1N/Gn1bvMEP\r\niS93Q8fjLgpzjEnPSigSk+SWK2oA3qcSkqKq+30owYZhVpAlAzBAnSypqR5R\r\nEpg5YBGXyCN8fgKkiHJyApJ+JjAL8qFZXFoGGtHx2tVk3dEjwAphMaZmcDni\r\nq7Loa2I//InIs+72ltG0+N/7K8+dJaI4KG/lQ3oB3pOy/q1BpaUeaDMocZw+\r\n+5rI7g5AVk0d1nc22OcQ32tWx6KfKNWPqtCvZfR+zDWTmBxP7mC50Ag9ELkl\r\n1kkfEs28hU3wKy1hpTuMweTRvtcsaOnROQAIAIFCc8lCLUNbm+irb6xyethO\r\nKJTUCYKgY6teMz8xdgN71Zd7MW75bou4C/hFDisAVi7N2uNeWOBQtmJDFpy+\r\nUz2G/PecB08vhZjWamKDptSRh9pRgqpEUztPODNW4yyR7cvgmHyUNl8EJIaP\r\nTc7DHT9msBqQVi/YjEhFa25mPoVTYLqnLiV2XKQVbCmtEKfzSW7iBBYOnPbj\r\nCoPVOgY+l1i4OSdWlahafzTnPtjUpqK2K7/J/NEHCKTVF56FdLakbJ0yrUzA\r\nMO6u397nq0cubBBq5P/c8zJZ7GHsiZAuiEkjPN+6UjPf6FmDtezdPRNLaPVV\r\n4e3lTU9NWS9lHUAooM/i2ls7gYXO1NTEYvc=\r\n=0Avc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.215506426.0","@material/rtl":"15.0.0-canary.215506426.0","@material/base":"15.0.0-canary.215506426.0","@material/list":"15.0.0-canary.215506426.0","@material/shape":"15.0.0-canary.215506426.0","@material/theme":"15.0.0-canary.215506426.0","@material/ripple":"15.0.0-canary.215506426.0","@material/animation":"15.0.0-canary.215506426.0","@material/elevation":"15.0.0-canary.215506426.0","@material/typography":"15.0.0-canary.215506426.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.215506426.0_1667610457132_0.142135971035507","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/drawer","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.4cf917476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61f9094fddc83d435329864b2af67de1fb303bd7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.4cf917476.0.tgz","fileCount":47,"integrity":"sha512-iyu/EyPWrPjSBJIPhkpxkC/ohrPhXC++e6eZNsKoe1VZ40oVsiB9qOTcMDECYUXa7h7WBNQNAlYdzh3mWARJzw==","signatures":[{"sig":"MEUCIERko+uu6PH1l5gBDKeeCkWZDWRjivGx10Opmo4fj8yNAiEApFKxQmwVKd7kLx4UOHGaao6NWTp/1bjNJ1uNeDy74cI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqX0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpS1g/9EYnPwqriJUBFYapIrOem2AyXEwP0kj5jk9DKoHolu9XyEz5T\r\nKZ+6jMiWq1qCSfNpsjS5gSKufDy/qzkQJ+wXoUyskNKleKK5BiADQM5noauz\r\nizTvDDJSlS29TkABHG15RMgbPMYeQ0tQuv0FnpexqOPZaIdCj36lLZuU9Gri\r\nWfg3+Mfvk5c0SPWrabgpKVzmYBZ04jSqiPre2LZ2yUX+u62Q2nfiYOOqqCys\r\nI5L0sfG9TWHZCKxB823RiWf0LR1h+hOjxNsBwqrU5QfovV0BdKJi7CsGGJMG\r\nF9TKMRXuDmtqHBgqmMzPwpRG2cZwPk19MUXLLgaFwFWWJqvKPH3do0cbCPXv\r\nX0/GzGFRGIABwgb62UHyXp1rlq6imn2Y3V0P89A3+mrukpoG1wnDYvThiDVT\r\nqfXB5X2iENtguyeFSf4Et4Nwvu1Q90DB32hwXxZ6GKjH88eV6w4CHeyjwqvH\r\nX2ha+ylet+qhBHFjpEhPe4hJ9ULICUgLuX8kfPnm4cQDN9gqfqZeDji+KzIH\r\n4TyRRMAeSjIqAFgjVCc+R3/Q4+DAv1eotbeZ+Z5xY87jaGfCpwAtfKwH2Y7f\r\ntaQGdIA0RMo0B2JcIclL1jRYjjMBYqf8b74Wu+OHwddMkFaf4zPmdJgK5HK2\r\nOPzlYuKPpR2p8IxdVDbIvkL8+8ZSNI4Q1j0=\r\n=0t5q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4cf917476.0","@material/rtl":"15.0.0-canary.4cf917476.0","@material/base":"15.0.0-canary.4cf917476.0","@material/list":"15.0.0-canary.4cf917476.0","@material/shape":"15.0.0-canary.4cf917476.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/ripple":"15.0.0-canary.4cf917476.0","@material/animation":"15.0.0-canary.4cf917476.0","@material/elevation":"15.0.0-canary.4cf917476.0","@material/typography":"15.0.0-canary.4cf917476.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.4cf917476.0_1667671540432_0.4839309170927897","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/drawer","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.eef14bd32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f325d9b92f3cc96571fcd42f5b68bfae3854fc4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.eef14bd32.0.tgz","fileCount":47,"integrity":"sha512-5wt5dJsQ4ShXqLyVYaChK/s7lfQZ9Tn365kNCZqkKbzNmN/szl/MUQhzsf0JDdm4qwdG7RS2CdgcQdDFqYQJPw==","signatures":[{"sig":"MEQCIHTAEF6ppQZhZtBlbgdrP7h/fQMgxH7b6fALvkjp3rgPAiAvSOHM40pAXIV9ThH/0ODeOyuRrOCevBB4fwjVBPD21w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+4uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCRw//UvvaDFhE3Cb0mN/+eRPeQ4E/XAAHyj8ezchYLHissZ/grogE\r\ndB+Xo/bcPiNRtatvh+IxO9pLnP01P4R4+gUlCbVjOVmkk+4w/42CqiZIzMv3\r\nKzbxXKPHt+GrY8N8qhU1qQfftNjD0e32BZhPn6hwO+RzurWC9nhmIs6nNapH\r\n8bJmBu5hETLcqeP2Th8wrc8RpgvPkQW8EFtfQlDyQmPzpEi5eWWqekzmRHMR\r\nbBxhBbZ08hBGHRQOaF52u5bFajSDlcayJZ/3pkt59gK7tWqxWGh3HELaHuT/\r\np9MHkXHlDhYZQZwTBKM9fCGw0b4GtolCJyib8x269wOJ//bO+PvF0vLei/QH\r\nP0xe2tfVe490vRGVg19QBb03fxWdF7jOEdRfnHpoNAcsUrsY3yOsIPWhVyME\r\nw1e8dLP4D1Sj4oKgO5aonqoe81g4JXLX8xXI39851dO1CnM2Hk7uSRMkegKO\r\nFbUyRAo3Lo+ZMB2KR1V5D0CtGtKqVCoLoRhTFbYxGLkUJQhmC1JPVo3C/CBu\r\nYF/5MBfovlk7jNT9m8OiI07iLedGFK9U9UeBel5faQFN05BK8TIgUgT+DXpz\r\nMXkuW1niJ2s+96oQTu+PJwaMgDcUHrkjFnSXLX6I9qB8RXCyPXyRN+MgCY4E\r\nes31eFNEXn0a2stQ26HxIUHpPnkwGJLIMgo=\r\n=XUae\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eef14bd32.0","@material/rtl":"15.0.0-canary.eef14bd32.0","@material/base":"15.0.0-canary.eef14bd32.0","@material/list":"15.0.0-canary.eef14bd32.0","@material/shape":"15.0.0-canary.eef14bd32.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/ripple":"15.0.0-canary.eef14bd32.0","@material/animation":"15.0.0-canary.eef14bd32.0","@material/elevation":"15.0.0-canary.eef14bd32.0","@material/typography":"15.0.0-canary.eef14bd32.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.eef14bd32.0_1667755566138_0.8947872641422827","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/drawer","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.6faa29fe9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edcfed77594bf375f75d575f5ad958dc1d24276e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.6faa29fe9.0.tgz","fileCount":47,"integrity":"sha512-2oDu+ZVPD6qEX+TQjniHxi58NJspJk6TIH24sQfn0lTfV4q+xh43kWak8fwG49aV2rePoE0ucVGIB5/OMsE4Xw==","signatures":[{"sig":"MEUCIBZXN9Ws8wvn0SfOGeX0aRjOzLK2w0Ywj/LeWguf7RD9AiEAs/s3obLN6IzXTaZ0r9PXD63LT4sgkOEKkAF9QzQYoyg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHgxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvzQ//aukVIUs+iVvrd3o3ZJEOqQ+SF6udYcd9OnpQ4cnZUzS7nt+K\r\nFmE8kdZKBKFUHWoDaUQCmPRU/3g4l5d6EnizooaD1q2F/lYSGorhOp779yoi\r\niJjLpiCu5LPV6b/ofCsggKjFuJJlFKWC9UbIHgTknsXDbP5dIJgr2S9yUF1W\r\na5ThDQ80ox4OsdVpJi/3YKSlJ40BEAYSuzZyKq5b1CNsf0WprhSAnUpPzM1h\r\na2iWTQjdTBSOAiNggVJ3BwStp07MF0Ezy/9h1qfSFYrSYC3w0WQnacwSwdWa\r\ng4g3IGE9Aq4NRXTOek63wuqrfXhjPKuxoWiTZ7WyXDOvTI4ASh+bm9LKX6dy\r\nDv1Sz0UYk+4q2NcX+fMf5FqfAL2lrSEoLxvyM67wwVvhmlgDGGxTxhUKOhiQ\r\ngZm6LJbTMVq+n0w6pp0huSxXf1sjKPQVgpwCptXKpD7LGDe0rGFxGImHocAu\r\nKklENg1RlGiW6/WCVaHBy+NaaY30LBjlKJWiil5TDIMI35CmJpIorj0ob6C3\r\nZz8DCiy35+/yLyQ3HTSqIg100o4AaVk7gdEQjs8Gt9YJ0v3fN7ScJ79727ci\r\nI9dQoaDbSopuwpyTo28yPKuPo9Hqhdu+3E4CunpV0E5F6LkhmqxTIwic3FQe\r\nhsI6Vbas4uwmYjXgvM0TKRk4fXZJbTyjCbU=\r\n=Te8H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6faa29fe9.0","@material/rtl":"15.0.0-canary.6faa29fe9.0","@material/base":"15.0.0-canary.6faa29fe9.0","@material/list":"15.0.0-canary.6faa29fe9.0","@material/shape":"15.0.0-canary.6faa29fe9.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/ripple":"15.0.0-canary.6faa29fe9.0","@material/animation":"15.0.0-canary.6faa29fe9.0","@material/elevation":"15.0.0-canary.6faa29fe9.0","@material/typography":"15.0.0-canary.6faa29fe9.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.6faa29fe9.0_1667790897505_0.84283766818229","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/drawer","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.9af09b967.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14030ea91c887a9c85b5c5758fe103cd900276c1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.9af09b967.0.tgz","fileCount":47,"integrity":"sha512-WrKWYOcCbStMn8ap8Gc4DGry36TzuVEFTzTzTSlLG+1cKIDycyk8fOyoZ1dfsIND5xxwOmR7uJdCPxcWheJijQ==","signatures":[{"sig":"MEQCIGgRH+lxGh0in1KV7hBE2P5HMd6czY3E27GmpQuAdCGuAiA76vnzEu1xwWjkrIcwIjWwGU/oD93DqJ8Y4Wd6yyWt1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU6KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEUBAAkLdrlcz8Iq8Rtsm1+ydNxprYHUnxeaCOm6nkU6wTZ5mlM1m1\r\nu+ZR3oDmg1wOh8M0o3hDgLqU9VzBbM5q5BnLaZIiAr1ULKx2460g2HUy9Wnq\r\nRc6OJhT+hYoYpoaPIg2dmPLPipwEY7SQb0zuzjwOk0s9xDGsREd8ItR/xdnS\r\nyGStGfplm6eyl+AuP1sUrrHlnr8FzAQcbJydJhrZEUcSFbT3IIuaOE2Mu3Av\r\n6g+iP7Ph1SwBVT0X9H1JS6y3mgVRnKyqEbLhXvcOdHbTP1SiQ31qMaMn5wWC\r\nxM+VuWpBaNHvO3z879s/8nWW9DM/xjGI5RwrWTyCPgtGUYfNXWe63iC6uogP\r\nLMoLyOtiSZccFmkrb0Wo4/7A12OCxkU332qJ/guCmAug949rMbS/0RaBYbl7\r\nc8LTIc8Ql06v/11l3A7ZaD2w/GGZaxBggJFTbnxmhrM2gjTgdareqA27z9FB\r\nIdzVOcvXXT0AavllpKSv0lr4F+wkWIJMVtcXC38u+qm8f+5VC+H+Rwmrrfy1\r\npNDVbNfoR8ZHYRhkAa3dvSq1eBalndixWqAAGePiqi0xGYk4bgGi01TGKJyq\r\nybTrtxm9daDJqhriOiRmivy5SBW23+04zJBfRG7Lg5NcczgfkEhQkPOi2AfK\r\nzhZ7nN37YEOhltIqB9AoF7u5+EhAxpihz2Y=\r\n=jPvn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9af09b967.0","@material/rtl":"15.0.0-canary.9af09b967.0","@material/base":"15.0.0-canary.9af09b967.0","@material/list":"15.0.0-canary.9af09b967.0","@material/shape":"15.0.0-canary.9af09b967.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/ripple":"15.0.0-canary.9af09b967.0","@material/animation":"15.0.0-canary.9af09b967.0","@material/elevation":"15.0.0-canary.9af09b967.0","@material/typography":"15.0.0-canary.9af09b967.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.9af09b967.0_1667845770192_0.49286485744480024","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/drawer","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.0f54fbb93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db4b3f2b8e7bcb9b3888012324f4fd32e88127dd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.0f54fbb93.0.tgz","fileCount":47,"integrity":"sha512-kVq4+667D0b2UEu8Mr8SxlGkoUpGGWSOcw2j+xfTs99WohpSL1QIYvXyPVuZopupZmM9GIoI+GSADTPQh+JkmQ==","signatures":[{"sig":"MEUCIQDn9jT2b4NmTzRG2XGqYC19hDlajIrFvBt3LcLp+04T0AIgV4zpxCxvWonMjciZKabg1opB0EbCrSCYJZedh07IwNU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatDuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoG1Q/8CkxAbSRO+zaThu8fMqexD1WwFJ/n8mnKJypSr5nF34iPGRg6\r\nCKiO8CgkvvsqChtCQoEPa8pqF4SN50gvxv5cdpNfuujzItTmp/iqqxF2hJ1q\r\nCZZWRgB6JdbJWTQucOTz8y3yAOuN4yXs35txA63DP6wdKuD4t6pfJlmGFY4F\r\nah7cw66ErxZGGTHORVfCtDNXFWt2QO6ujmacpb2F7mjezomBV4NWnODNn2RD\r\nARw/Ryo8TZnT5Pc7JmxYnSTrgzQ7WIqVkKDMIbjJNi1koix2e7BoLIBf6c5O\r\nlXQBnl+NJw35PO3boWb+vCshXIKsdgKgi6vj1KBVQ3CxMQsKm6qRBvyUInm2\r\nkn7fzLXfpD1rzfaqQi5bounKLNqUTanq/VeDgbE5VYRpJ30LkdkMRKI4So6h\r\nq+Nx5uDxBvKj+Teovuv4CC3wJZNhhPXvDuQlOGRUJoXF5+XSMjXCQJOqFB9z\r\nxaah1voM7zFBgvK8VLwXfnQc2RzuSjKU260m1Nwz6zsRSs9ZRHxE9i0J9twh\r\n4n5khttdZMB4WYU6Q8oMMd4wPOsatRvh2OjvT33CNrF/Y5COb+XfRgiOqpb7\r\nf2iQurvTXNLOZG0wt0xId01qHO+9HVWhM+G5yETYsnvqihswwl9U6v46psGX\r\nUBq4BcFDBE2HPjyi6P4tTUBXZHNaAK+Pld0=\r\n=bSbp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0f54fbb93.0","@material/rtl":"15.0.0-canary.0f54fbb93.0","@material/base":"15.0.0-canary.0f54fbb93.0","@material/list":"15.0.0-canary.0f54fbb93.0","@material/shape":"15.0.0-canary.0f54fbb93.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/ripple":"15.0.0-canary.0f54fbb93.0","@material/animation":"15.0.0-canary.0f54fbb93.0","@material/elevation":"15.0.0-canary.0f54fbb93.0","@material/typography":"15.0.0-canary.0f54fbb93.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.0f54fbb93.0_1667944686104_0.7550805184466034","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/drawer","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a8d47f9fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0d7af0ac492e0e2b754e043137334efbd2d9b67","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":47,"integrity":"sha512-S2o4s8qSUMfCcLJ8KQPU7ITnIvXvn0syz09BmKTL6M3w2qTi2iI9Hwew8Re44M9+p8hpBjLvnJ4OqmgXWI2+Rg==","signatures":[{"sig":"MEUCIFbTVPxCB6AOzSUQENlxlxeebdG+dLFKG30L+ijHz26yAiEAp1ppU49HbPft+3nuSvk+FFKjqm2V2lkNjN2aFQA9xZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjayphACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGSw//QpN08/fr7iAxqUxQUgzYRPh49J2io9jzeF+OXxuCaQ4zo//0\r\nwq6c2XzhEsNNHRc88yZS8JP/01mMaL5kwS82Si8wfbXyKs+XjcKsxn4thW3t\r\nkCfPDHrticakPT2HM9piok+Tra/qMTE1Vpm8DzLxx/hv6B21vm8TPXccMXAj\r\nxUAEWKXlDHMFTz+H7ogRM+mnnEYhs87TXQpP4VsuZ5vZWR7fAfFd6iHJ9lVn\r\nK7tlfvWENEopwmKxUSmx6B12/6lWw19o5WVwu+OD06W9qiXnIl2xKMOqGQin\r\nNtjD8OCvw8Z54zbES3LYTaKgO4aOizXQkXLSWW3S6mzWon3Va/067uKgx9lO\r\nR1UpvI01RN9yg7a6Bp93V1iuNnoLhkhbwrXQsgDCqPDs1t9u7nSqRDlxFKyI\r\nWb6nReKHcjmJxvL+d3u7FqU+h6d2wDNkKUQOnDBHs3HettMRvEQ2NFWaiRED\r\nFSlaYR8cYQ3hIh7I7wwblukow/sBZT1G7CE5FzyncZFic2mgfXY99cTfsOww\r\nTk3W4Gp78G3UQK9EV2z+oS3hHh3whblltYOGB5eELmvvPrzoWUvd+7KyCPuT\r\nMKnBEdq4FlyemRrxOq3IklPUxvrTTCjmmKJKaAUgYCz0bqQNQLFHvR1Bpmfr\r\naCmq0y8DoCIT9KlLJn6708Sp9t4rj3H/LAs=\r\n=bZXQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a8d47f9fe.0","@material/rtl":"15.0.0-canary.a8d47f9fe.0","@material/base":"15.0.0-canary.a8d47f9fe.0","@material/list":"15.0.0-canary.a8d47f9fe.0","@material/shape":"15.0.0-canary.a8d47f9fe.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/ripple":"15.0.0-canary.a8d47f9fe.0","@material/animation":"15.0.0-canary.a8d47f9fe.0","@material/elevation":"15.0.0-canary.a8d47f9fe.0","@material/typography":"15.0.0-canary.a8d47f9fe.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a8d47f9fe.0_1667967584940_0.37092417814896095","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/drawer","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.66a1e75e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9adda79661bd80599e464ae2a6aa16a31f6a9b96","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.66a1e75e6.0.tgz","fileCount":47,"integrity":"sha512-XYgBwhiEVVsUkBbhFRJT1jdOBw6p94ZD3+abNCYcx6tM2E6nHI1sC5/21AzDOvNnpseKlvrsLRPG4EGJl/URtQ==","signatures":[{"sig":"MEUCIHPbhKhPjEz12BWSWFfrzugo1IuNDeWXB9Ho9JOhyyIxAiEAqfFcSlj+ST54cEm8gk+3Od8Lb9XrF5dG347yKGnSVng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3TDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/IQ//faCkfIWlmCGnvml+G4/lAdbrngMcmm1zsAQ8dsvVdrL5HIh6\r\n5wdEvH2mdWIII5sRdjlEzSwu7wgXFS8ca8qqyHD7m31bK30ae2fhbvKas4SE\r\nouWZyWl1glqa2o69NWlZ4HhVcPXGhYR6LQIeBJy2mOqc5S/R3euxijULD+HG\r\nOFou62eAD+TL3wo2gb7mRsW4MZJuEQ6gfXbCd38mjvpnxrqEq03iEAs3DIPM\r\n+LSfTTBva96WtzncOuILYMSMcDRlDJA6iRk5+XTmcYDT9dDISbwpzirWF76H\r\nar4mdwi5UHAtCGvWRFMzac2CPXwdw7OhG9IsHOq5U94vgmt0iCS8UYsqPFZm\r\nIPFjvatxxKfSfduow5XNs4agWyEHFIV+8vzFje6PZokAAbbj8CXAvZP2qRo+\r\nlYgQ1tngqZbjkcN6sWI6Ajc+lPJDU9fHASc3TxOOuO1upGfpoc+FYsC2DXZA\r\nznHZvDx8oakgbvDvvYO9i4Mwx0vWz3bhh8orbfwRiMeHi1LlZQWHXRmdtUr3\r\nEfEqwP08oVt292b0xaraPr4M4UeiaCARFjuF3CTyPTa2nOQc61VJTqgTkh6w\r\nJyBUx5VDE/OfMR5T/VruUICkJpEUu/yE7dw+C0WCcpORMKKoKN/jpbs+7MOr\r\nJLW7xGnIcLtjL4lmWgpCaYvFY4K1kIaWq3Y=\r\n=5w0E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66a1e75e6.0","@material/rtl":"15.0.0-canary.66a1e75e6.0","@material/base":"15.0.0-canary.66a1e75e6.0","@material/list":"15.0.0-canary.66a1e75e6.0","@material/shape":"15.0.0-canary.66a1e75e6.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/ripple":"15.0.0-canary.66a1e75e6.0","@material/animation":"15.0.0-canary.66a1e75e6.0","@material/elevation":"15.0.0-canary.66a1e75e6.0","@material/typography":"15.0.0-canary.66a1e75e6.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.66a1e75e6.0_1667986626701_0.3419813855982623","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/drawer","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.5e5c2afc0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e50554fdd5d643d9c2ec79d606e41745ebffaf45","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":47,"integrity":"sha512-rhtay4V5DOiA/TxGUYY4P4FunsrJXD+Y5SQH9IUYIwYBRDg11DkIMDXa7ymqMGTBITCBZfQGWFaahr3vx4R72g==","signatures":[{"sig":"MEUCIQCLGCMX39hEAZ0QOvfMrR2KvzVB6qcbA50K6ZkOP8kSlQIgFpEt2neIn2tHfONNifXIBY3pcUtniQsm7uCftimVHx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5UKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoxyw/6Aq1jjhTmmK2Xr0fDNA6TuYyVEKq13grCOnrN10kJ31Q+K2GZ\r\nKYvC3uKnosJkqIOg79Xp4x+ut/gT+bm+nTC5tNWubiol0DBHZqbwfSk0QaZ+\r\nU4LKz3lk2UcMlC5OutpUDI6db3Wcd/tNYGJtUB611k2qUBMkVbB0rDmOMoJ8\r\nChUb1IQEYzHMMWb24itaApBLdgMDB3xUzJm/inmQ64iB9L0L1t73u50/8JkO\r\nM7AUwuOHaWbCuXyeR/PpHFBUzkwJZRqPoAnkEF6Eq23Cr/t4Nq/dRNKMgs0e\r\n6soE+w+ex0jumZLm/81kI6HG9YFexk0Z/UIg/hMslqDnLU5wPrU1ZFuR6+sI\r\nl7lq50ZvDbcPU1ewDuTCtM5tHx961KhycSBjn4rS8Y7FbaqHGjx0pRseqO8/\r\nrjeDEFqLTxGqD1zF8lbInW3A7Gd3SjB6QE9dspBqW5sbQVZ5+4pLHXsto4vD\r\nd1BCPHXF+Ut2QKkARn81pQ2um4P6HbIY2ZjKSBj8hij0ZYBQiKNaOUk8Gm35\r\norheid17c/1pnk2qV8AB03Uvo7SOWf1HnAO9EniHCkujfbhwXLe1Rh8sVtBz\r\nRiA4Z2ez70a4YJuH20acEvPDo37xQuCbpArg6WVsn60uTrIXKs9hcgOdfsir\r\nv3gva5ZSwVt4Lh52Iz4e4sStbpJQi0pugMs=\r\n=lztu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5e5c2afc0.0","@material/rtl":"15.0.0-canary.5e5c2afc0.0","@material/base":"15.0.0-canary.5e5c2afc0.0","@material/list":"15.0.0-canary.5e5c2afc0.0","@material/shape":"15.0.0-canary.5e5c2afc0.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/ripple":"15.0.0-canary.5e5c2afc0.0","@material/animation":"15.0.0-canary.5e5c2afc0.0","@material/elevation":"15.0.0-canary.5e5c2afc0.0","@material/typography":"15.0.0-canary.5e5c2afc0.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.5e5c2afc0.0_1667994889803_0.884282233433928","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/drawer","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.3e3f43359.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d634c792e068a5a2e9e2ff39c00ce9e0464a2d6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.3e3f43359.0.tgz","fileCount":47,"integrity":"sha512-LZum3dH6aB1T5z73PjPdTtd9u7Pl++TDa/M+LSABXzsLUvsBf0hxhA8Tojqi+pw4C87GqW9dxEJGJV9t6Vvngg==","signatures":[{"sig":"MEQCICwXUWZyiPZqZWw2w0OvUeHyQcWQWQiNX/YpNWlqwZjFAiBPN+OttM7j0swy+xCWYBHtFJKBAjHh8c+7Bl/WIha/pw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAfNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRrQ//WPBmNXHjrPzb04I2TwG5zyJWQg0QzBAdwjF0j0w33T6rqqW+\r\ntYn/4K9Q3U94YynW0xqwCbdw4622U8IIGDsMKEQwwFoN9lB0eprnbXsWcfEj\r\nnAe3OzCui0mlqb7ton/+0fqRTtKrWXBTUa0RgApM9p74dYpZcrvMRy4Wma41\r\nmG6H8eti2nlBHIL8BUYQRLvqMfWQT5DyccNb9nURyZxHGCJQY8cP5oruKdzf\r\ncmo1qaB2qZeCbcqyIx5hy0h+PE1c2mZRqQCa1MMCalrqg8s9AqUAHsw6eJgW\r\nd03HcC2hmlFvTB/F95UD3bKlABjae+yLzJZEVTTCiFh+TPCJo6jCIfugzdGK\r\nMUMVwygNChMJzfyt4CTSDbzklFPkRKKhDSVi0eqQnXVK1uPWdVit7MTRtFV+\r\nOzIgSAuH+2GAzk9IvT9UwI4+4bW8JomAavEv0rvYEJCc9ZPECboDTQ8jDHKp\r\nbKqUMgj9LeGPUHvTutKyisTwYAxW2TmFQqqWIsVCJciyNvzm50W2cTOLcELz\r\nkCDQjpFJA8Hjan4YLvXyN3h0ZNj6OMuUwXk5uIORlMSLDw9O6V86tW86dYWD\r\nGnxh7Eqkf+KHrtjc2n1gto5j8hLNLYAm7SRvlG9LS/Zx9j6flYJK+OcMmUfg\r\nBWT0BsswAwC55N1pyiKhesem4+s+5BLr0cU=\r\n=UC9d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3e3f43359.0","@material/rtl":"15.0.0-canary.3e3f43359.0","@material/base":"15.0.0-canary.3e3f43359.0","@material/list":"15.0.0-canary.3e3f43359.0","@material/shape":"15.0.0-canary.3e3f43359.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/ripple":"15.0.0-canary.3e3f43359.0","@material/animation":"15.0.0-canary.3e3f43359.0","@material/elevation":"15.0.0-canary.3e3f43359.0","@material/typography":"15.0.0-canary.3e3f43359.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.3e3f43359.0_1668024268824_0.34024225295094324","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/drawer","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.3f667fac6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66527f215da36dfb8f90b3067fe1245eba64b184","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.3f667fac6.0.tgz","fileCount":47,"integrity":"sha512-RL2RctlR0WoGYptG/Hh2yakMAlyC0SIlaBOtdnznEnXGBwlAhaX61Jw333jwKuIJXPVxUKpe8JSHtzTYArBIrg==","signatures":[{"sig":"MEYCIQCwPJjU9TM8OGYFH6VTocJlE1+gndJ5ZTPcGPJBXCMuNgIhAKVT6YYot4kcDtMldA5bmerQ5h6/lQS3N54qoJtdsDOe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCSwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqb9Q//TDM2Zw8G+ILgAIVZIQFJB5FdA5d8K0X8XBLaXmsshOmP+/Wk\r\nA3gha7YT8YMJHsye+fw3zDn2UEpbt2vhU9/hrVn+1EPy8aOaq1/WFzKIupLs\r\nkijMRR1XxxNlzsXRbMBFViX/xh3l/Fu8uzq4hkTbCT2Sa5PEqq5jnaTMMzwt\r\nawSzVhSeFDnlIow4pNy12ijm0gAJrxt6hZ01Kekpyswmh4dH1IVDU6OVGYcE\r\ney3dL2jpXK34cbPzBlGz46v2i+r1xRop9euBZ2bjEa2eCufbYJjv9KkUWFPG\r\nGQWbtqFFa9esON1jvfujHVi3J+ffjjAmLEKrp0TcTLBHx+u0A2h71+P1e03r\r\nimCvEoUkZ2FN/y7b67A/DbRrhbBtHfbP4BU7NP8rbOdc/4Mr6Gr7FyaZei8E\r\nbsfOd1bBfB3oT60PFyCsO/ddfxw5D7I2tthWkRO0xuTVNavwc4/L1d5HKdh3\r\n2UZO4POSzOJuhoLE/Jk5skVGVkKVv7L7PHTpHaQaxI+/LOFmR0HsBIVC1CBW\r\nSr959DOM97m3Oyta7EW9KEvsLgspMepEfcIz33AFV321rwirXmDRoSGT+mYi\r\ngO+m3IDGmLsoBD4TVF45vqGdJlY6j+EgDM6nHdOHwePcPf9O1/0YAY5GCU+S\r\nROQiTGjSkwMV8VuF0CTLMyJkH9MBWcc5HHY=\r\n=CQEO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3f667fac6.0","@material/rtl":"15.0.0-canary.3f667fac6.0","@material/base":"15.0.0-canary.3f667fac6.0","@material/list":"15.0.0-canary.3f667fac6.0","@material/shape":"15.0.0-canary.3f667fac6.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/ripple":"15.0.0-canary.3f667fac6.0","@material/animation":"15.0.0-canary.3f667fac6.0","@material/elevation":"15.0.0-canary.3f667fac6.0","@material/typography":"15.0.0-canary.3f667fac6.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.3f667fac6.0_1668031664278_0.7516653282694827","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/drawer","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.faa28c1c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2771803de35d1b7cc0a3abb47c651350867c65d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.faa28c1c5.0.tgz","fileCount":47,"integrity":"sha512-UN/Yf7/hneIxT3r7pzx9d67EQCNa0j3HG5Sz+iPhCQ7Pp/mE8hFZZHTVYXeZP/rn+1OpuqB66ewky3ohAIbk1w==","signatures":[{"sig":"MEYCIQDkpMFzCs6vZ55/WPRJse6vXbLuMT1M8q/MlLwyCRJ3PwIhAJSsv9aE61SYKEE1aO3fbclFJ3RfZdU60vEOeJBCDF6z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnpIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrriw//WIRbgLJ/HHsZBU9F9MpJpLZ1bQyAmS4raNF73iePAVUGZ2c4\r\ncv1hWzq/doi98ssrYi7cuyW7n4kS6/S5IWHYvdP5S4LkVxv7rk/UqHRbnOXD\r\nW0H3cxc9S3MJo8fKgVq4UnV6pGc2rKb2qI/Y8IhkAeflNCX5NXAGJQ2NPjfW\r\nGUL7ng5u2pXErK8+2/+wSsqBrNDPMcqW7YMVAkHX0EfsIMKQA7octsk4n/Hk\r\ngeuQvUOeC7xP7Jc0n82piTw+gOhXeSm/H1C8HyaR8YAoOepv0pdDrRakR6uJ\r\n51xLE4RALkERCjQ2wEYA2FMlslrjEJeCNZDdQd1G/GRZKBPzXvKOIBPygs+d\r\nWT4YsXoplRrW7mhUgyeqRg+ZoK5ueXs7N2drZ/6W8Q9o+oOYlxzMqxyfb6ED\r\n6NgrOnBki9wSOz8tsVZGL8giB52e9BvEcgvghHczUH302rNLJ5MHu/UFwEPR\r\nqUKyYsEKWrVm0rt2XBy6kSYveM6J+qKLm4xorHPJ2aeSLMLPTH+4qZMGd9eo\r\nwZQJ056xKoNZ3OYF16ABI3nyKIxlfrqCmVRzxLqB8u3tz9ZxPSIKlWpLtqlv\r\nzPvRlvwwg78Vv7JQfu8weWpvmNkXyEV4qiB6+u9RDvIXmpkNPl8vJn7ozbVX\r\n8z1rupGVEdDBCkSf18mPcjKfd6NIkHc+npM=\r\n=6HFC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.faa28c1c5.0","@material/rtl":"15.0.0-canary.faa28c1c5.0","@material/base":"15.0.0-canary.faa28c1c5.0","@material/list":"15.0.0-canary.faa28c1c5.0","@material/shape":"15.0.0-canary.faa28c1c5.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/ripple":"15.0.0-canary.faa28c1c5.0","@material/animation":"15.0.0-canary.faa28c1c5.0","@material/elevation":"15.0.0-canary.faa28c1c5.0","@material/typography":"15.0.0-canary.faa28c1c5.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.faa28c1c5.0_1668184648368_0.7260222307694058","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/drawer","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a868c7866.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"369c521b783912419320594c4df9963b028ebb5e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a868c7866.0.tgz","fileCount":47,"integrity":"sha512-o79w2BDq2/y2QuW+9Mogdm1EbOFm2We83W/gvsuF4Va9/vLIwiUJRj39dv9Vzvv4DZ5ZZQbJeKQFCBK8h8GVag==","signatures":[{"sig":"MEUCIAx9jtr+xxbP8/5Vbakxgrv074wAvcIIaB1jCUw3zl//AiEAsoFyTo+yYIY33lTxTpF/0U7dXUka5r75rBq6eT+0Zc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnp1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqe0g//aymE/wAHOAtFu5xHBgNv43GQivFAKwFw25FXrI4sXN12Saxg\r\nirNeeseyCPL5k1q04v6Nonrdl28AcuLgGIxKHMw92DqOdcSzR2kNN1KjQvfH\r\n+GS4+LU41quBYNzo4Rupf7k8Vyv2NVAdQX3YobrqfEZE/JXzRyV/jiTbp8ls\r\ncPFfj9Hm3XtoNjb7EnlIQ4TjeOtvarqZ+Lslj2P86Y4kO6q6xskmgOgj/bVe\r\n6+VB7lrP7QYTUbUF1uw+rLTj0EqwfSmPnV0hEd8db8A1gX+wL+TszjiBgsfS\r\n4TSW1ylnTekq/0Zbfl2ClV7dGAYaYJV8TQzY2E4mK1zg1XyJtfHvp0qzQuog\r\nB3ab4y0nufKaL5Szd0lY1/XwWqy+caRTBxXxsjoDC3wkHK6v4lonU37lcuWt\r\nTA3c8i/5KoSCRTgAA8ad+yeqUhHzJsSvH46xEVKPqebjnmEGxZ8U5aNbm+rN\r\nPZzZpAkQ9Bfrz1Qsplv/1BLS54p4NtDl9BX3r4tFXCKKkFhdUfsE4IXhw6i7\r\nHncqYttiqWE08jju3S1022lkK4SFthXh5AKxMjMKgd00QedHakTetpNGSHyq\r\njiGVax6WO7QavE6f4mpB+ld/E9y/rWDrC2C5EmdCImuIdSbyPn922WpN6hyq\r\nZdRZgBk13lkRjJBksg77eSQ+855b5S8JSJE=\r\n=TiIR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a868c7866.0","@material/rtl":"15.0.0-canary.a868c7866.0","@material/base":"15.0.0-canary.a868c7866.0","@material/list":"15.0.0-canary.a868c7866.0","@material/shape":"15.0.0-canary.a868c7866.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/ripple":"15.0.0-canary.a868c7866.0","@material/animation":"15.0.0-canary.a868c7866.0","@material/elevation":"15.0.0-canary.a868c7866.0","@material/typography":"15.0.0-canary.a868c7866.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a868c7866.0_1668184692860_0.2875186745042888","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/drawer","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.602fe8efa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32bfbfa88f4ba7f7a977282d076838de5eab4dd8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.602fe8efa.0.tgz","fileCount":47,"integrity":"sha512-N78fjKkm65G6n9r5xV5nS1emD+P9fBT5L1raAEyn+aSDBvv/GqN//ejQZemYcULXRcSkq+HJ33XeR4gDJIKL3A==","signatures":[{"sig":"MEUCIQCzi9R6MO7U4tAscFtE1Nvp+wmYS3rmlS9IPzEpJ0iLqgIgSY8F1AH2gM2gpuNeSeG2vzHbg+BmykhLINH48RGtgjI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboK3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWYQ//WoqRQxsb3f0xonrIQGMRHr9TlL9nNcWE4w3gDMM/eOyybQbf\r\ncA2rii7YFOFnE0Qn1nzRWzed2+IBk1wzrYKRCLOlPIZXHy3tjYqkjZkUbWs1\r\nezhDvmfz4NaQIPZQ0739LVsKtEZW36dCWMAH5L/UFx1OjXs3erX9AlQHw4NT\r\nP8kLmtAmp5susq7vpktlBhnZCvSts9qYscy5ZL/OX+RKCFooQSYDctfoYYJq\r\nI0/oGGWT1cXUrkEEhlMV7eZKHwurDObceNjR76UmLcj385oVqkyIlcDqMj0w\r\noK72q0b0rGdp3p42EXFXJ/oaudxd6EuxBeyWEY7vqUNpjvHsEhAAGSxAf8Se\r\nQ/jV0igXROfj1bkchrEfQn9wfXV6ZRKr9ujvcTwzDeVzdJKdhgcqP8sAse+9\r\nkNQclnle7fkX9DP2HTH3O1IWPL0vWRKgb1XLWrJ8ptGwPvxMbYNoY/QeD5hB\r\njBU/LsRSeFfXWKU3JvS/FhKmKzhmuZIpO4kCjnjHSC8mqGUgD7vaQus0Xys7\r\narFqkyMFHSRoX2Egk7QEe8Kvqh6BWzp3ShoOD3KZcASkWD81oHT7PaPqJbVq\r\nZGmLZ0jojUYc7u/6FgoH7qhnfh6va0URgCijyw/mNrUaJMkV5spLUW1TWufy\r\nDKz9GhtOLNvzsxwZFcjH/sbAftPvB3Z5qXY=\r\n=wCxd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.602fe8efa.0","@material/rtl":"15.0.0-canary.602fe8efa.0","@material/base":"15.0.0-canary.602fe8efa.0","@material/list":"15.0.0-canary.602fe8efa.0","@material/shape":"15.0.0-canary.602fe8efa.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/ripple":"15.0.0-canary.602fe8efa.0","@material/animation":"15.0.0-canary.602fe8efa.0","@material/elevation":"15.0.0-canary.602fe8efa.0","@material/typography":"15.0.0-canary.602fe8efa.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.602fe8efa.0_1668186807342_0.20797801634493052","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/drawer","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.558c2be62.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d6a2bd9f4f21cfa25ee92b71d3156f179d17bd5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.558c2be62.0.tgz","fileCount":47,"integrity":"sha512-TIJp+kC9pw6MhT23YOcFuzK8orHerHKoamUlc5djqlrmMgyrYMeRugBXOA6ww7eZqyeNLD5G7oijEOU0F5blTQ==","signatures":[{"sig":"MEUCIQCvNXyIoSUhWuZyyYFEshxK5H+7OEag8pLMivdWaYNKIwIgUXHWz+g257S04HQru+J6GNAhNGUyYXJkpfhRcp4+wzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtDYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4Jg//cmzagwaQbgktKnb5DQ4sfQZgRe2lrQIE/wleczxlOMO9pm2j\r\n03ukJgthA9bpQoBgpsu73mVnXa3344oj6Mf1FzWOCQC6csaSyFr6ID6BArTq\r\npdAxVQV4E8nQXyhPzNSq5evQtZ6EJxeTeZGWxQqsRH9Vyj/FbfPfK7jx8pTU\r\ndTUhyQdIdQnlXj4/1KxlBLPT2BMYK6BPtjzs+fX9ASr2wniRC3CWqL3WB653\r\ntzXbWlI56ViWM2z8uc9r6ecG/HzqDU3GGfALrkFh9NKN5IxqRhv3MOvvRnoD\r\nJONEhHJmmRJhcnzLwOBldEqmk8VBwgVqMcEguiOoJj+oupyvOwPQSrDdgZqh\r\nKGWsiCahTei4+F0jioyNV+yq7/otU6QdUzJPr5lpA+HDl69aolrv1BTXC5Uo\r\ntTLbvzSZ7EPljWTuOUpdfyhzCvSvbsmNFV40gU+JVHeQIzY/9itrBnBuJ5zg\r\nPjmMX2oTyWe37IChZuIv5lwfCEBmfq/0Jx0DBw2+Oj/SEgJ2NA7ESKfu6cy/\r\nlgYbjCMnMAmX2NEAEYTtghyzv6pQiBXfmeixQ0cbI/00mrzU9uDow3HkQmug\r\n3+Ve9Nt5VjRKVh2UDoypnoxHw1Dbrulc/J/6I572vW+jqqhA+DWH6YtQ7O3y\r\nhifviOD0sBZ5lh768072wE2Te2fYSfbYxRs=\r\n=xVM1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.558c2be62.0","@material/rtl":"15.0.0-canary.558c2be62.0","@material/base":"15.0.0-canary.558c2be62.0","@material/list":"15.0.0-canary.558c2be62.0","@material/shape":"15.0.0-canary.558c2be62.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/ripple":"15.0.0-canary.558c2be62.0","@material/animation":"15.0.0-canary.558c2be62.0","@material/elevation":"15.0.0-canary.558c2be62.0","@material/typography":"15.0.0-canary.558c2be62.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.558c2be62.0_1668206808302_0.7639296354589129","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/drawer","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b5c13a7a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1638716d0fa7cc3ccab6aff15ddb8ed1043f41e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":47,"integrity":"sha512-2Ncde3zG9vsJ2XaTrWLK+UN19vSImbdqwJSLKy5Pn1DmnQ6klf0BXGNb7fgYQIWC5BeZFhjZXf6wn5OS6fVuJQ==","signatures":[{"sig":"MEQCICvzaGyrp70kGtchxW2itIrHrqwna2Oqp1OM5QxOAbeaAiBL092E2ajqw9kKIm1m3s8j7NG+GS42Go6Q5hS/BvEn0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmYNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrukRAAm4nRWYi0BMRYgGr7JdzglngrjiASdhNpbLWaxIN8HPG5vXGY\r\ncEvtolS/58Xp4i6bj/bARKEPd2hi7RShYslRd/J2UeZB0EdNoPEOwgpXd8b5\r\n6Cg7Oc8qlHbk1691wmEhkmDZdRqbht2Le03EHpRA6C5pLjFrWyyTNs0jlxdj\r\nGFfqprO3wNeyInyBbDlV7f89VJlagwk3B0NDqZR8/poI/o0QrGOVheUaYUOC\r\nQPxmC3fbniotR/jkXjPoRas0u8LwJ3ZfRLMqfz7fiegWcXmvKRbJ3t3AWSPw\r\nCNQ6/HZBkWMrzkqJYiN3rXihlcX3MEOsusDiJ52pGleOREZqBFn4SUjiCAiC\r\nIfzz2IGtc2fL08VzqHoupMaO8KidkPCkzw4cyGr4h1fAZY4yz5uyrFgsYCwE\r\nji2Y0nAH+DFSVxrqgktNlPWRc0BNeMdE8gvVlwatgPtuYVCY8g5QtfPlStMy\r\nPphWBiBVlAUeRsxjJEKEL7co8SrhkRZDjo2MDpwYR5CxLzOkEANpnMNP81MT\r\neOWVrOPZ84qkwMoRFOnFuRPlQIgcuAgMAWgFGxi8x3DkFFVIhm36FdDJfiF9\r\nB6vzQlyosDkYV2hGYKKhCJ5N1BAACXbV1E66Mgfax65TLkLXnZg61fPqYI8l\r\nFY2QQfcWKFB3aYG4B/eUf0GAPa02SEO9oXY=\r\n=aGjh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5c13a7a8.0","@material/rtl":"15.0.0-canary.b5c13a7a8.0","@material/base":"15.0.0-canary.b5c13a7a8.0","@material/list":"15.0.0-canary.b5c13a7a8.0","@material/shape":"15.0.0-canary.b5c13a7a8.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/ripple":"15.0.0-canary.b5c13a7a8.0","@material/animation":"15.0.0-canary.b5c13a7a8.0","@material/elevation":"15.0.0-canary.b5c13a7a8.0","@material/typography":"15.0.0-canary.b5c13a7a8.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b5c13a7a8.0_1668441613515_0.5121109562632338","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/drawer","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a6e1c0702.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04e4501be7e9ca9dc45a3c49a10128387250dba3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a6e1c0702.0.tgz","fileCount":47,"integrity":"sha512-KhyNj5O9zc1kA8sRTjEvm22yqEaQwPkEVhSxtW220cejZj9XponwX+XCsQesKcljaLjGmD0wgCKMdsZRSSEDWg==","signatures":[{"sig":"MEQCIF6BdW09NWjmsRVoGZe2n39YgUGHfZ+1ms/g4L3LnjlAAiADNX3+P2XheLvsQF3Ps6kqykhd2aZrxE1Qm3KZtrKK9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnrJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2WxAAjCZLZnwZVMOV0gMEC19X7A5mfaNaksE2/53f0884lqUNLq2N\r\n6x2P42aqZcpub1uAx+c1vFQOTy4ikjZW7fgUciOR1EGU3X5zvPiFCQvxoy2i\r\nsn8TrP+Ne8El7oUjgKICvAakLeGhwYCmzfv9SbfMNCqLkEMDEmWq6jA1Dim1\r\nFIH6JHLHCPdtAkAhDMqQXeVVX7JVzvGfMJhlPgq6AmOdle71H/N/vSR+F7T1\r\n9HDrKw9FcgDulyE5fIibbVYrD9YVupJawlOjkmYQgy3cNTEqIiOy31S2lZaR\r\nw+EeqQwvBiKrPRgqOHLM72i7I3m6qc+EUtEnubqyYsYohcnKUu1D0vtIy2uE\r\n8WwMfgv9NKvmy+A0EqaXnlSzWTXGF3orC5n0QrEep1gvFWfgYwWOnjRwT1Oa\r\nB5xTUQJJKLFU6JNC0p7iRqxDh7ZF+I2f2mSQc3wD7dSGQoGVLswR7G1UeSSl\r\n3wL0PVgH9lqE6lATO9/CSp7cik2lUwI24yvjg/1lJWhZ9ZMGUZbFg29/SGDE\r\n7H7FormYTiT0WV33VdR23kQAAt1ztpMjYiHsmkYz102CCzrdJVm1Mt5sc+94\r\nZ36HsBTK4XJlIQIPzjplgpZ8C98igU8dBqcrmUjdZ4PBppXGPBF/DmqoYT/8\r\niXR1AtbQXmjr0/teKPHl5A16vHciJssdlG8=\r\n=zXEw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a6e1c0702.0","@material/rtl":"15.0.0-canary.a6e1c0702.0","@material/base":"15.0.0-canary.a6e1c0702.0","@material/list":"15.0.0-canary.a6e1c0702.0","@material/shape":"15.0.0-canary.a6e1c0702.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/ripple":"15.0.0-canary.a6e1c0702.0","@material/animation":"15.0.0-canary.a6e1c0702.0","@material/elevation":"15.0.0-canary.a6e1c0702.0","@material/typography":"15.0.0-canary.a6e1c0702.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a6e1c0702.0_1668446920852_0.560961201608364","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/drawer","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b6f8a06de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1c10108b0e3ebf3f71375e8bb0aba905af5c727","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b6f8a06de.0.tgz","fileCount":47,"integrity":"sha512-v5dwxNUqCF0GV90gJB/D+zAAfKue4bR7WrHMHfiJh3DBgSKIupRclEJCKp6ycv1pwAb4EPQBTwa0/EXmN2yEkQ==","signatures":[{"sig":"MEUCIQDFkcVBKXoY8TuH3HWhUgdDyC1ecUPVwV0Prmxo+y9S2wIgG2+zIBjGmIcbXUVYFMO84FjQ4KrfqORb1gA5b1SNoLE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1wcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkNQ/9E2KU1QrPGZxSJxeDWK4HWUoB+gTo4ubLdYw43QhPXmalugHQ\r\nivj4rvSk8++EI8qqXbzowu2uWRCrW/F8SWfc83Q728418CRH69xXvK1WNO+t\r\neISHb/erVvjjpQAb3qdxv/q3CpZ4IcwIGxbnlZsjIQR0iIXGGcEhP8Jn3Luy\r\nv+tAbOk+xUiNsKgAntxE5pGqxC+xjBGDhR1cEZ3v7cbNiBW7XeVr7saU9HIw\r\nMeCauc0JKBv9L2UM5zx8gZ4FuHLUN+zvytAWMfT4dTglP+u5S/H6/Cg5Dhcp\r\nWJ4kwqXTdEcbbTXPuMDh/DT/dY9+jxOweFMVx03W/Domm138Y85/VeNlnbR2\r\nADQ1MZCgKaZaoKfCqR9A60vVoF4NqGoj7NU5C2n6UI9TdsrGP9xjcqXGcJRD\r\nw5cBiEWE88+qWk77FUELAxfpvdSYQNFqsakupv1efQOsVDYSvP1d8JsjphEm\r\n7lX5oYnKftbGVjx6kgWOLRjgEXaIUwUkEMxH+UMNMxhRuFJ3N8GuoxawJ3rv\r\n7oZaSQ0SGDzds7lN3ektJQdi5bb3jkE2UOxzkhMG6CzzIbO48ZotBLxrg5Xu\r\n2fXBEsFYCWVtZ6R96R8+vzhEQjpO4QXMRVm7qGMmdsINbLlVPEWglGZfjlTq\r\nOhQpsQBG8+pG4aeDmKJRNjuk6Z9OEwwTqUc=\r\n=RhbU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b6f8a06de.0","@material/rtl":"15.0.0-canary.b6f8a06de.0","@material/base":"15.0.0-canary.b6f8a06de.0","@material/list":"15.0.0-canary.b6f8a06de.0","@material/shape":"15.0.0-canary.b6f8a06de.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/ripple":"15.0.0-canary.b6f8a06de.0","@material/animation":"15.0.0-canary.b6f8a06de.0","@material/elevation":"15.0.0-canary.b6f8a06de.0","@material/typography":"15.0.0-canary.b6f8a06de.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b6f8a06de.0_1668504604018_0.8951514097452327","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/drawer","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.0163f3ba5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1484ef557f0c81153a5cf8d00bf422b7dee0f21f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.0163f3ba5.0.tgz","fileCount":47,"integrity":"sha512-b+gQY7w77Pk75Vmr0gj0Mqe7lDE12tEJJqUD5xu2lexF4V+bH2x1lukB1DkNzZglPHh18JMgZJPUIXXDFQJY2g==","signatures":[{"sig":"MEUCIQD6k9xqFF3xwLyVe7XBnZEv82rPLv7sQNzfmgyitcfI7QIgPu7WUqDrLZxvQxs3tnYmiCKpzB4s/gBkSkcoNq7kNU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9SFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMaw//TNeOT74RUSRBDOaRy+bALU3plgiFUPCfBJ45MSwzYYhk4Z0G\r\nIBVVX053mwCMe7cYYNMU0ShS/JnXD0C9OdaQGFlJJEnIuWqU2ed89W8XgHq9\r\nMsRIcRFsCmytRvRXliKVMHPIM2+Nhs1CgjK+XPYY0ldYwE28GmLVsyP2T6J8\r\nFldUxdH1afBrWzR4CULV7W2sxSnL3oluPo716Jrt3eGWr7StBuvv5lZ1z+Q0\r\n0pTRr6xsCh/DQRgW7PyRZYqIl/HQi964MRJacYK104/5p5RonM5MMXhz0hUB\r\nndvlQhhpb+KCyBDBFrk1wGgRjZBKnq9NtT/LFLn8mOkQMmhrNM9M8MAG3c0I\r\nVKk2BWWi0pkP6E59zSULWrZNqRkrFYaA4h9FPHX8FpQeFuJKJI11xgOn/rl2\r\nAo7PBhhP69GDBPRL0PBkH0DNHLySkrcI/A7NQyDMh3pciLPnMNkiU/2l5AM8\r\nZ0mBWu0rX1+iZNTUWcRtdeU2xQhGnzBj11gWmjlLhROi65rU/IJnTQlTZu2g\r\n5N4JYROweQqlZp0kXNL4jLViynkBmb3Lf/MWckDgx8987zqk9xZom9H6whCb\r\nG1RoH60C6y3cJ6LL4jWHJwUqVNcRKWaSNctYM0O31RyQh/HyUDDRGVYsFR7j\r\nK2Qxn0XUTlTJcoAt/4tnCn+RtPQ5l7Iyjlc=\r\n=Zdtu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0163f3ba5.0","@material/rtl":"15.0.0-canary.0163f3ba5.0","@material/base":"15.0.0-canary.0163f3ba5.0","@material/list":"15.0.0-canary.0163f3ba5.0","@material/shape":"15.0.0-canary.0163f3ba5.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/ripple":"15.0.0-canary.0163f3ba5.0","@material/animation":"15.0.0-canary.0163f3ba5.0","@material/elevation":"15.0.0-canary.0163f3ba5.0","@material/typography":"15.0.0-canary.0163f3ba5.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.0163f3ba5.0_1668535429463_0.725589187601057","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/drawer","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.66c5cbb94.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"609df341d8d29ab30de2803ad53207b4cad453d0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.66c5cbb94.0.tgz","fileCount":47,"integrity":"sha512-PS3Otwv3ZsIYTG2csl70lntqS76Vqxt2bVzigSaXk704wKINMYSo2O//wnPJ5T0Sc41RnYh11KYv2ar/sFU+Bw==","signatures":[{"sig":"MEUCIQCqs88wiB+bIAyTBC98GtGHLHvl2Ap+ZhGVv+AG9TEetgIgMUYa13NRCuM2lyfFSwUr4U/ngiYSPKG5x6iGCPXZUxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+klACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoepg/+K4BMbcXFqVym2e3Ccz+mv3CpAJYwGJGT/gVyR/6G4ZH9Knch\r\nPXb0XbR4Vbg25LTurGU0PjijbSHFNrD48iqbdRoyghQUkNRErdRJQ1YLdBxC\r\njdawsyijtlSlE/3GoxDuBmK4oO3OyebP7leFvUNbil4G0ThOmiujdaf5rc/W\r\nwwA0XoS69hQ7xn1h+rQYfWp2jwXhrdjQAIMp23oD4nMkmfxbRWsRIiYipP5d\r\nZmAvO2paT20tgqGRtUxpd61Db+KOK1pmt6V/BS/rzbljkUHsMP/aNuZS3uVy\r\n0QLEIqLDQfnktjsMVMy07AqF8KLph/Uy2WRG8xzM+32IeH6q2jHH5A4wP4PE\r\np4TpFhmNs+4ltNe5qHMbLrvjTm1AoKGt1QhVkPy2JToBgNQyNcdgC7VbOwDx\r\n0ymNCXy1Z3TL6rTySyqnZyBVgl2SmrZww4Eq5TEtI1Z8BtfUD44vxTlFblsX\r\nhWJx1r9OHo4jSCoJWuKkFVwz+YNd/piPCVO8esynQZA4AEiGoQA7go0N+k+U\r\nRUObrqQHu5d3c77J627V0r4FZAnmrqDMX4QeN7B3wpTT7FbgeM4CTMc8khWD\r\nPjHHjfOoMeM8IqleimcwpP+3hhR0Zx/I9wi6na6iU0O6vyV5sy04HQTR/gKy\r\nPTtUYufkO4KhjcU4eilYv3hU3R50bm7kZbw=\r\n=5YmZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66c5cbb94.0","@material/rtl":"15.0.0-canary.66c5cbb94.0","@material/base":"15.0.0-canary.66c5cbb94.0","@material/list":"15.0.0-canary.66c5cbb94.0","@material/shape":"15.0.0-canary.66c5cbb94.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/ripple":"15.0.0-canary.66c5cbb94.0","@material/animation":"15.0.0-canary.66c5cbb94.0","@material/elevation":"15.0.0-canary.66c5cbb94.0","@material/typography":"15.0.0-canary.66c5cbb94.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.66c5cbb94.0_1668540709377_0.8323792620022616","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/drawer","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b01136063.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecf46f6c44e1911cc19ef0efe3bd2ed26759bee3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b01136063.0.tgz","fileCount":47,"integrity":"sha512-PPsNGifWUfdU3iUxzNBSu0arF4XucwB5QEHg2CgnyGGKdfASqy/pWdyNZ43TNl0wzicjG7c7BsN8CRiX3dSBYw==","signatures":[{"sig":"MEYCIQCChsOCSzju9vXTYZtF+LutmfUacz15Wu9Os6CGFi1JYQIhAIN6j9FDCwUGFXicpHrVQ297qb1eiXSJ4F02fWSYmUbd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCweACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVpA//UMAvH0juVoBKmJ4me0BNhgxYGwYWvW75Cd5gJvkoXJe/msIi\r\nmmZwXIjLmiq/HMQZdMUOVEuhonVbSsoULhTVfDvTAQ6bwK4sme0IPTCPuoqC\r\nMpqFm7ABS2DThdcM0SsSawPliGf4PmBiheNSeVRxZB/syn7iphFBT4mAQo1I\r\nsTfgwftjRBOvCx8GYsSv4ew7LYpmXwZXhe//RgTKUZRSqIwYS3VI0aKFttCH\r\n3OpcpTeuOvxLkkzs0Wj3fSATbbXGtAJceb/mqvxeCoQYY7LBiapFPom8rGjX\r\n9VoEk4c4qSGyVxmFAZKMiFcR5oF5aVg1Z3wQ3GxqmjHxiQNmkVGxMBqqMi6S\r\nJ3c5I+Yd9JXcxb2W+PdJneqYZqjMgdirx0cwapWVtbybZgwP/42apd7fZkEI\r\nL4wcON/fErHte85QFBn1eRDK63NjiMoL0CDOQW0IN9XRV9EebePU0YFwovA5\r\n4ef1WPHRWSPcLrCpY9aMQZqbqf1t27GikFlqDCHhAUC6zwNYAzCHz2hSfZTZ\r\nWk8VdkEncBpL0Y72I6yC7oSWrrgVnRF+I7f6r+DRi2Rek7mAosyJWDgChAbl\r\n0k4DwfQF8ZjWqnmwCwtDcna09UFvsQQXHDNdNWrkg9cJN6xBLWtFypuCyZxN\r\nEQ/xnf3q+6nRDMxNYmqlzDcpJF5RjwgfIp0=\r\n=tkvp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b01136063.0","@material/rtl":"15.0.0-canary.b01136063.0","@material/base":"15.0.0-canary.b01136063.0","@material/list":"15.0.0-canary.b01136063.0","@material/shape":"15.0.0-canary.b01136063.0","@material/theme":"15.0.0-canary.b01136063.0","@material/ripple":"15.0.0-canary.b01136063.0","@material/animation":"15.0.0-canary.b01136063.0","@material/elevation":"15.0.0-canary.b01136063.0","@material/typography":"15.0.0-canary.b01136063.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b01136063.0_1668557854628_0.29104377355739697","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/drawer","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.01da0cabb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6d7b51d3f9ada09ecdf4e9de01e4172fba5997e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.01da0cabb.0.tgz","fileCount":47,"integrity":"sha512-OQYGmPlJiRfLWmpAz0JaCjO4imZze3y83z23aHWeqP8jKprRsvXA0Z9yyUK6Sxz5qglczPTIiIhAOQiX8jrZTA==","signatures":[{"sig":"MEQCIDAhkCVDVdkjE9ilvfj5SwTXe401InFhgrkhaD6nG/f+AiA8ICH7VMPnt2tNMeqmB3twzodugPJ6lqQYpb2WAckJ3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKoUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQ+Q//fREhpBvMU3FL7MOxe5UUPDQ9PiflIoYEvulODYC0NMxYN7wB\r\n/2RXww5iXJDS/RLxwk08ttxKmb3GibFqrhTivnzt+SGuon+bdehNkYnqHhsL\r\nlNZOCon8TC+XStB9JPQ6m77/G+XF1qRSBCU1PT+cvXdF/Sf+sBfkBI03Wj/w\r\n3cU8/WVOgOf76VpyH11KhAI+z62n1dtKKfBf/o/i6/1xXL4dPNKaNIt5OmqN\r\nfzhsVv1LdBg/WsNtwDj9aLfdC3N/QAn8CtgKdv2tMFxa8Yx0NuARtDOL/q+R\r\nv3uB9PACyAhza0TKkEndj0IYgvHkpn6rO4ZnPh78Y+UbB0RPyxxr8XPPzgav\r\nHKuoEssWNVVCE6v79jtuV6Tu1vuglrxCfwXMfme2P7OjArCmo+80bzQivukT\r\nRFr2uWcpMz2IzNQgPVVTZe7KyYO7lyho3LKo/lVCT4EbGR/PmBRNN+9AkNgv\r\ncfQP8PtkOpEwapJWi9/+bKHEh/gzHZwdWP0Z5rSOPEabEZ+DalQeYiMiDZ3z\r\nlkZDgEWxkSSU0G1AsGGjsQPrnEZ1XKv4DFmqExwMSCA1O6bMdxJKBVXmgUXx\r\n4jb2fmOPrmDDPqkOz/IwUiDNmjy2QoGAus77GYtM6LxHipeKX2i1cmZovFlq\r\n6LCT7DrnTPXaStuMu8/LYzMjbQtMPlddfrU=\r\n=eA98\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.01da0cabb.0","@material/rtl":"15.0.0-canary.01da0cabb.0","@material/base":"15.0.0-canary.01da0cabb.0","@material/list":"15.0.0-canary.01da0cabb.0","@material/shape":"15.0.0-canary.01da0cabb.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/ripple":"15.0.0-canary.01da0cabb.0","@material/animation":"15.0.0-canary.01da0cabb.0","@material/elevation":"15.0.0-canary.01da0cabb.0","@material/typography":"15.0.0-canary.01da0cabb.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.01da0cabb.0_1668590099771_0.9503912630309332","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/drawer","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.4ac393164.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ee4dbec8db3581ef2110905ea7e2b0da65baa1a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.4ac393164.0.tgz","fileCount":47,"integrity":"sha512-oSDTs3V59COwMc/h9rDoQVyCiYbCGxGHCpH/75XSoX1wV8ynOQS6Y6KyiukELRnFs2pAdHXr3SOEGg3oe1ou7A==","signatures":[{"sig":"MEQCIFJTWHFvxJQyKW0nQ8TuLIdALM0g/udt3l0eBTMlX+NRAiAETzaHi2VMK/cjc3TqhD/Tjwo/vdiLGhv0a8tTsi2l4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ0OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRyhAAiV4IYZkDZTdkMRFanOYaMReoy9+pkwBHcPlrDeOK3nnhmFdc\r\nE558M516pufibQebxsEMeCgjGw1bDA+6IJH80tuEJ/kq154HbtT70yYMuZ0B\r\nA8pieAM+7dFqVJwzQUqX1UAnW3cgo7kyvlPxOXoMyCH/wvLywV/7d1mIbcVA\r\nAxhzo7mBirbG96kuh2R183p56imRMJhELmTpbx/bPJ7gR30snWqg34zZvweO\r\nrt6Fpq7m5FFevTGeaJDTZN9UPWlZNy62uZLjYcfpaw0z9Tq6158UB0I+IxSS\r\nlCHV+dVS1IqforWtCOrsbAs9ML8/Tf3jajX8Nlynjzq5Svn3Ho306SHkexNf\r\n+iu7nkR2YWiKtolNF/8VDxYjvNQZ5v8I1Nvhdc/bjwpzdjxwFhGcbqG21rjY\r\nwER9wXyBngaVVFvwHA8q87pTseTe8fXPacROJUfoXwLIXrWGFRqqK35l2zif\r\nwLkeOqa2pDVf/90GGzTY4qbKorklmeAGFZPs1ZP9H56nEeAbpERNyvhlRshd\r\nE56uXBRz73D6ArW5tZDAwDj0Yv8UFL9II/qDcGd4JtZLsvhAry9JWbBXWTmc\r\n7/VeyJYvjr2C7k4zuahCelLf7Wnzql+elff3Futl09g0EjyBAVDKxqEaBIeq\r\nX3I0v8v+hfDAxx1Ou6RX2eSJ66rco+hXACU=\r\n=GcBb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4ac393164.0","@material/rtl":"15.0.0-canary.4ac393164.0","@material/base":"15.0.0-canary.4ac393164.0","@material/list":"15.0.0-canary.4ac393164.0","@material/shape":"15.0.0-canary.4ac393164.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/ripple":"15.0.0-canary.4ac393164.0","@material/animation":"15.0.0-canary.4ac393164.0","@material/elevation":"15.0.0-canary.4ac393164.0","@material/typography":"15.0.0-canary.4ac393164.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.4ac393164.0_1668615438662_0.9440788988874371","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/drawer","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.6048fb563.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12e0c915f23b99c28e38172fdf0d43f1fa2b4afd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.6048fb563.0.tgz","fileCount":47,"integrity":"sha512-L5qOKi3y1xihn3JXodL3R5F6100OrxZCuDOv8IYNffSAle8BqkCZOn2Gj0lNnmqJ+P7Gf4vXFcXV8kJH1lciRg==","signatures":[{"sig":"MEYCIQCpOxeC2KCdXUkp7435HTkNaAGd2w4LwqKM2/rBASFWzQIhAOWoNTxWwVeR5B7NVrCOkZMYlQCVXyssIq/UMyd4ZGJh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ2RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQzhAAi3R6XiHQ66QFkcnLLNXSanU+BuhqhqGEuAy3Xsg2ixA/3A54\r\nP3gpDCnyPOF8EFqbYVrR79oBUI68WkZirv/Cs0tm5BO1W2d5TDRMIFz7lk24\r\n3MPNHmvNmKwdpm7NXgU0R64ER9wLJmOpd0NhoqQ1ccyL6PranLOMpgHsxXtD\r\nVPGgnI92U/ezx3oT6BKX8w3lthIj2HladK4huHfYRmMju38Kd2HBsWzhWU30\r\nepQ1Mpm67LlxW+Mvp8wEWyszf6AW2YnRydLQrziLrJ441WTFvmLFNczYIUT8\r\nUGLQplTrBdnraeUbqdGbUxVMowNV6yw3rOFlfiAODmdv4uUDeOej4cLlviq+\r\n0v63ou7laqunMciV/y4OMDcvym2J+eze8mY2SDGaJSN6Unz+jv12y0vv3LuO\r\nPIQEpQT4e5cMHBBnNdX7gfj6N8BqznxrGuRWjt74xMy5XX66daepbl9c8Eg0\r\nMrxpH5JSbeY6C3lac0/oHTOjzKZGQkIhxM1mqMU3gZzgpi3DOd3qCjI6l3Ss\r\neUgkQHbsbt+B5tsX2TgqRw+XhPHLc4caYheYEvrJ0uFHT+kekiToNUN8fFRn\r\n+s/CfklbachcdlHyBmvLjSMZo3Km7u7A3qTN2+795MJp3AJJ1rL1KJHZJrKy\r\n6AfETzMCUYSKjgcmAfhBDyDsPuGLwaH+aZ4=\r\n=sX7o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6048fb563.0","@material/rtl":"15.0.0-canary.6048fb563.0","@material/base":"15.0.0-canary.6048fb563.0","@material/list":"15.0.0-canary.6048fb563.0","@material/shape":"15.0.0-canary.6048fb563.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/ripple":"15.0.0-canary.6048fb563.0","@material/animation":"15.0.0-canary.6048fb563.0","@material/elevation":"15.0.0-canary.6048fb563.0","@material/typography":"15.0.0-canary.6048fb563.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.6048fb563.0_1668615569183_0.47699895227531486","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/drawer","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.f7f56fff7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be41daf089caa347a290b4d6cd925c600e02d4a3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.f7f56fff7.0.tgz","fileCount":47,"integrity":"sha512-/IYlCSmCUNOGp5a9A284IGU7MTEEEdSC6jnBUikDUxjKPB3ua+153U/mkWLtVOAzBWCRpKUwRct9KczLRXlboA==","signatures":[{"sig":"MEYCIQDHIL+jF3oOMNtkqmfHOm5X2ZR8/eAaAkBT36An2GFohAIhAPaeD1sXaHMXzRUEK5mEBut3zrgGIkJtZCUYPp4Hi9bQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUC0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrB3g//b6zir/rQdHX6m8LKay4VX9oLbZ2HGTEImdIT7+3V+W7Huunx\r\nClb2Q1yKY0et1H3Q9/QIpLMWBUv1lEcXCJqBElcriQGwRM5/mHycm61wVazX\r\ndUjlVXnF6s/JWrHBixAVVd4g+VVMNGONu8YMbHy3yn+gNhKixtr9Rl7C+VY9\r\nAA0QhBOzi2cUsIbTtTsur64wksvjJsc85kvavu3dbq1Qhe/swFbkxH1HTQYF\r\n7jciw2AB10poATmOuocVSxpLx+BsHBqNqiENyHkYOwH3UchPPDrVT2amU58P\r\nTTu0cwIx/Y48uUJ7rswL6M737O7zV22j074KRvqGY54zuVPQ0iKokmEZhQC/\r\nJI/7Olu3lFPbgkUA0JRnLUuwu6cRdDjQgq3W9hRfz0ss9zFnAz2L6kxdtTuG\r\nD/899QQwEQgG7jUVDiQahW7BqFP7Ekr5c4El2Rg4Tu470iBfLTKIKmfJ3ePf\r\n2P2XLJ/hTq32gOjhAQNJxs9Aio42L84fd52gw+VRdO34V5bBsnzeJMG+1vLC\r\ng3qXopddrey1GSpQguJGM7rhpLjiPycgfWFkw99WjvvO9+DoiqZqAbpWK9rU\r\negIgMhH0+9pJFgyRLaY5wSUPa46apJUuhzPimQ7j+tw7lKkP92HM2j7IqS/Y\r\n+0aiCXhOBIw8z5/7fE/Jzp9cTJpteZdEU7g=\r\n=dVNk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f7f56fff7.0","@material/rtl":"15.0.0-canary.f7f56fff7.0","@material/base":"15.0.0-canary.f7f56fff7.0","@material/list":"15.0.0-canary.f7f56fff7.0","@material/shape":"15.0.0-canary.f7f56fff7.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/ripple":"15.0.0-canary.f7f56fff7.0","@material/animation":"15.0.0-canary.f7f56fff7.0","@material/elevation":"15.0.0-canary.f7f56fff7.0","@material/typography":"15.0.0-canary.f7f56fff7.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.f7f56fff7.0_1668628660413_0.17751969957829372","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/drawer","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.7c73f6134.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"699c7cfbb344d2ca868aaa818e73d2a9370b700e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.7c73f6134.0.tgz","fileCount":47,"integrity":"sha512-OoEvPqmWG4vrK6QB7ArVMNwTJFU56Xc6u71l9RTeXh9nhgH0G0fEx/tpE+iieoakEGX7vL2DEkRlMuMDz6KgWA==","signatures":[{"sig":"MEQCIA1iJdwNcZvK9pWZPoIA97SjEyj1dOFbRWewzhqfpB3hAiB23vYjMRq/JgqCj/LjqAMDhXWw4ahR9o4GR8MitZJ9QQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUG1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDaw//aapAaPV5JfZg2XrU3vAjRsDq+oShFzlX+HLreeISc5NHQElh\r\namvVEqouQ2RxPPp/5eevUgVpQVgbQk/ZRTCt5DSEATmlxnuvoqmoSZeIzCVw\r\n3bbYtrsJ9XxaJf3IUM90Ny35iOY3AbbE1kyYtzWyr4TvSq3EvWVr14bhQUDI\r\nYpXsLctmz3c7pqCU3slyBlTns1TOrVLoHKk9yuHQv16Rmq4QAUzVO0U/Ddov\r\ntkrWPWmzAS0AfhF6Cy6E1F7WyAKCxVYRFHj8auFRXdAmHV2Mj9MBcbVqBZ1R\r\njWgXbDdxvsXVXchMcZSRKq+k+MYyBQxBbbh4SP0FoPZm2YLlIgCK0KFMD/sZ\r\nnPevC9w3fz/WcNYvw1LuBqyUUv3+4UFTqkeWUyhQdOq3idU6Yenk2ixh7m0s\r\nd2v9r8V27yF/xpvcoEJ/a5pmxP/6eINeZGpIiO0mwjqe1mF7vXz42s2q43oi\r\nCjoRHznNRGDl699WTYgS3/ucBm8iqoaw0wz7CKDKlFN/udQEjoXBWXRmH2pZ\r\nouE0Ew9qLT1YkOhFDsk3WSIprlRL5/gvPyTPROzGB5sLtAJ7sXE0qDFML1KU\r\nhEaNU5gevXdqGscMjiAjXvVYDC4+xFm54g1jgdaNLo6fuZ0gNpIErULPnBVc\r\nn2UE85jPGO/hxpUjnY9mFqx1B3WcPcDcnvo=\r\n=G+mC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c73f6134.0","@material/rtl":"15.0.0-canary.7c73f6134.0","@material/base":"15.0.0-canary.7c73f6134.0","@material/list":"15.0.0-canary.7c73f6134.0","@material/shape":"15.0.0-canary.7c73f6134.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/ripple":"15.0.0-canary.7c73f6134.0","@material/animation":"15.0.0-canary.7c73f6134.0","@material/elevation":"15.0.0-canary.7c73f6134.0","@material/typography":"15.0.0-canary.7c73f6134.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.7c73f6134.0_1668628917249_0.31702551914779487","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/drawer","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.f1e037150.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc7f632998719d00a4152013e7bd6ff017f331df","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.f1e037150.0.tgz","fileCount":47,"integrity":"sha512-f3DTTcxlyxjnGKKdlmA9dWqZ2pL7uIDrfXfZGD/84gRY9Fs5zKpI6JDg1yJTEIjEP+X3M/BlDmo0LQr/qjvd0g==","signatures":[{"sig":"MEUCICaW3AewFhxYrQgKiTQCNmrnIvIAJwHsCp+0DLx11fRxAiEArLg+spLzbDpvaN3DlJR5sks8MUdd7SCiF7ABSV8S8fU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdULoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmobzg//T7RaiROn/zSSpVVO3YHzvFOQFBrLOSQAkAtQKSG1mTEgtFtE\r\nmaAtACPJgcTALvc6dBaSk5VoxPlooYcknF6zY2yjgXF99OUdGITAKwRKsLh9\r\nuHJ2pNdx5JTnnWw0EAqgI1fecyiXTRX2p+FXZl5t6SGOeTQji9SSzNDK+lKF\r\n+/70PjE/YkJMDG3ZH9TYgS64GtP4vcrL0DDXwatnXFpj8kLaHAe0A94uTwoT\r\n/rcFfiFq/+f6ZNLRQzYFFVWJyjyPVc8PmyBpyZQwGI7KN8eg0dJ5hoICJ1zQ\r\neGaGIW+EoKeIq55n2W2AxhjvBqANctot9Esyz/fYbzDPUVDPIivY0dTa3aJb\r\n/9fvp/xl63dippeE4ByZYEnU51sxD/qH5i/xg3R0kEqUFTZ90ZYI7GJ71RjH\r\nOP/gjaxkGVir8NWMHjaqGITuOK2GYIMUoMLp6Wws5YXyntkQN98v8O5BevfI\r\n3GIJDi4DS99hX7Nt5xA6QpCPk6niGGEfREtB0mDSKBVtpIg5m5YUT8ynZ+1R\r\nRkNRXGgAOTfQEtGHtU1GFXduuMBHfAHP8dW3t5j70fiT9jTqWwPYMoLE8Wco\r\nUEf/jm6RYTpWULhxsct5qf4k60foUhzGwrAl6Ko5UyKWuiY1EZqo/VxhBXC9\r\nJ3dpd7RB91EVHity8mNd3hroGGZcfBOkgmE=\r\n=8fOZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f1e037150.0","@material/rtl":"15.0.0-canary.f1e037150.0","@material/base":"15.0.0-canary.f1e037150.0","@material/list":"15.0.0-canary.f1e037150.0","@material/shape":"15.0.0-canary.f1e037150.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/ripple":"15.0.0-canary.f1e037150.0","@material/animation":"15.0.0-canary.f1e037150.0","@material/elevation":"15.0.0-canary.f1e037150.0","@material/typography":"15.0.0-canary.f1e037150.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.f1e037150.0_1668629224408_0.6069646912299165","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/drawer","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.40b18d043.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0198750aa36639c986838f482c71171d099b2236","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.40b18d043.0.tgz","fileCount":47,"integrity":"sha512-aNhmCwVpEFLP8VcwRl87rjxD2QQ9NSjlhuLoRh7wUvhjDy1Sd4HVXZt+2mP6Ln2dTHQaLlYTFblB+4zJ6GabTA==","signatures":[{"sig":"MEYCIQD3AjkvxTGOLsxFeqNxJm743VlBY/uw7EMabthy6OnGZAIhAM6rOFxYnZXQDds9ARBfJSr6k03kZ17ZRbcsD7HlmBqf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWuLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHLBAAnF0IqQ3Uo5zeqaCq1u+InbfKtIL0C+3WOMQNZjPv3oG/RxJE\r\nVSTFUfE7aAWzdIegMAy3YRnwSayQ+WwEa9GUSM0+p7fuWlnwxqsCbQgBHo65\r\nQNIiVjjDjIArUTVvNsHQV7H2ow8T4jgihC3/aVYKJvXwZZkxfTvKx491XIO9\r\n8a/EXAfp0GhzlKUXqIazuuJRrf58f1q52AC1uPswnxzhqNclFZajQykyKbEB\r\nbK/aMkbdNjk1MW7GFXZNEKxmusA88ktbkbDpfiKPrKOteaVuqCRbgcK1XduF\r\nJGyD5aId2mcoBwP/xoK64Ha9vT4ZSomlLRoK7cYns5WYtiGvYv9/At+HhdMO\r\nYd3OLR9VjExX+8C2d75fAOQr8bmJF7YeDtUsYSUd01yUShHhq0FD07Iyikzb\r\ng9hsOMT+DvA/ZbVi8cQUCprmGMeZO4AA5zHxjDX3E3MEmwCSWtA859Mw/qb4\r\n+xIi71fQkBdduq2t6/c1+fAGAmm9SAyc6JRaHZAkW0wfVbU3uvrgD5zihcTW\r\nPgJpz98XoCnVSYWcrJme+ww2y5ugqQX4qa4F9qGiV5DC0gy2B96Uakhu2rFf\r\nRjDFwp3IVS4CjziOUvQcCX9CbJ/ImDvH7tvKwV5sAwKkx8O1krgPSgGNFLFi\r\ncP/EVhhWfWmE4hoEXQqo8Izgopvy/Nee6ak=\r\n=G6sO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.40b18d043.0","@material/rtl":"15.0.0-canary.40b18d043.0","@material/base":"15.0.0-canary.40b18d043.0","@material/list":"15.0.0-canary.40b18d043.0","@material/shape":"15.0.0-canary.40b18d043.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/ripple":"15.0.0-canary.40b18d043.0","@material/animation":"15.0.0-canary.40b18d043.0","@material/elevation":"15.0.0-canary.40b18d043.0","@material/typography":"15.0.0-canary.40b18d043.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.40b18d043.0_1668639626863_0.5875908723932048","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/drawer","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.86bde5c06.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0f6489c3f6744a36c65de647edc8920115a8f3c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.86bde5c06.0.tgz","fileCount":47,"integrity":"sha512-9YH3atGgIXMcbLjXjTT5kcm3C8Pu1tdMuJTVP1NDH1s+o7JmvA4becyo4jXyE0O2BTMD/08Di+rigV1i1hkwpQ==","signatures":[{"sig":"MEUCIQCgMo74jWrmt+gokiixk41w/J5jlpd2DJpUmLU02VYUhgIgcEgK2jdL2X4UmyRfkQOjIHWbVP7jmtfsbpKw1jN3RWQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW3sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRvxAApPbSJzuFliuODxA/6RMzGGpMQoS534Vjw0sP+yol0hT29Cds\r\n0/cGpvhZmSFtChwKaW2VkaguzYZiM8mxcDW9Fs6Gp1nYqogJVJ0BWB3h7T8S\r\nU3ozwxqbBbEog0V/5g17Xj2AjvlceokHLS5dWrcmsaAiMsIIki4OJz2Lcn1s\r\n5kUe1SwOTlJpWEQ08mCqBfy1ji7T/z1Q1tosN6EvDCu8f/fC3bwuVXoXmkHM\r\n36xZT9p7mJwHsauM5Rika8OGr3UlTf1w8GbeHbCGJcTHXhPcUhK/bAw5yimN\r\n7DhGCwwDREeDKLhm8NM7b/VkZBLuHu83i5hRfKOHSwbWUVuGyNCpR5UaT2r9\r\n+uv5VsFrViQkjtM57FqWTzG7Ncy+QoPWvQRREaShy2l9Haemp3gBvf1SsCVi\r\nhOthM/3cRsYX8X14k6OdMOCyE3+k9YovXkkZW4aBva67t77AkWLJAv7/aLPr\r\nVADsOPPSEGdrBaOpgsdA4IDsKIv9fpOoiqy5OUzzCPoAjv3NWTT68ab/snAf\r\nErLcsllmtFKUelnA8h0zf2QhDkYpSa+8ZVJpoVJNVVnQPzTRcldxOSo8q51T\r\nlcIcCkTAfH9T+ihIZxGzowPsnwi32oFUivFzBo0Z/W4+qYQqNDWpFnxaYxnV\r\n1MH/KADVw81/TSQLi1CXaK7ALdXmPec9yug=\r\n=L0wb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86bde5c06.0","@material/rtl":"15.0.0-canary.86bde5c06.0","@material/base":"15.0.0-canary.86bde5c06.0","@material/list":"15.0.0-canary.86bde5c06.0","@material/shape":"15.0.0-canary.86bde5c06.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/ripple":"15.0.0-canary.86bde5c06.0","@material/animation":"15.0.0-canary.86bde5c06.0","@material/elevation":"15.0.0-canary.86bde5c06.0","@material/typography":"15.0.0-canary.86bde5c06.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.86bde5c06.0_1668640236410_0.7269739625385183","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/drawer","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.bb7751002.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"baf7f832d467a42889e3d6c3f15fe5e909ec15b5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.bb7751002.0.tgz","fileCount":47,"integrity":"sha512-Ni4E4AYbpRXvEWgp1KBEaZVu+T1//0uM526cV3RXQ/WJsQO9O6UYPtiJ87qCJdH4bxoYex0nyGWRTMTja7Pp0A==","signatures":[{"sig":"MEQCIAD16RtSp0tCymdZQuuU1/PMGgjw9nBdcCeiDFDY+gOWAiBM6cTzo5BrPM/UaaUtPHZSz2JTY5sbcA10a/5NNli5pg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXntACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8iRAAkGLI2vUb31wqTr6urf2OtGMRINM1cpGdUYTKlFrRYXb+QKu9\r\n7JjV56sfl36QcPrl3DKJqyxq1036tT/o0Grn8g2wOrcqaLhVzDENqPHE2d+m\r\n7MttWiYyKikMtrVeprTEJ9YrFwpPj8zBBKdU6tAc0e27JtQdixqOckRK4vsK\r\nwNyXvG4ok84aY39mpe9q7aFclJ/6KRm1FzkpnGKmfMm89mVnnNmC1nfB2pK2\r\nZ3sY0rmifbY1ZOl4690fcYl3v8NzQaZyk5txtA/DYWn7E8rQO5hM3wkrbmb+\r\n8prcm5kq8/9NpZsRUS4ki2qLIE4xsRE6frZR6aoG1W2qvh2Ctms4+CUCD3xI\r\nGfEQjSs4tB/oGUp+cG6E2gnEAwbC2OzAr8YZKwqlBK09dIRLEoGMh6O3F20o\r\niknNaN2/WuGHXkRE8tMkTU5+yamm60NmfMskupb2mSBh8YTlcr1EOJoXHmXq\r\nYKMoOSkPivFXdwIZpSZSRh/wH/HLnNmEz9kCXIvKgRcTA61ADA56mRSmUDTv\r\nxWgIdhOjtNHbDlrXMDnAY9iglIO6djYvoBh44qas/0+JSlNF1+yxboBaA2Kq\r\nw84FusIPQqATcbgjwVhxgVXmJ2V75JVfVWnoP6L7YWH5sUOkDSb5nFl12NVz\r\nXA5nMFpPLD+7ISKcIhRhZ2EgaHoJ5gVEQXo=\r\n=Z9TC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb7751002.0","@material/rtl":"15.0.0-canary.bb7751002.0","@material/base":"15.0.0-canary.bb7751002.0","@material/list":"15.0.0-canary.bb7751002.0","@material/shape":"15.0.0-canary.bb7751002.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/ripple":"15.0.0-canary.bb7751002.0","@material/animation":"15.0.0-canary.bb7751002.0","@material/elevation":"15.0.0-canary.bb7751002.0","@material/typography":"15.0.0-canary.bb7751002.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.bb7751002.0_1668643308858_0.7877481069185586","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/drawer","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.63aca9af6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fac48b1b31e88fc9b008fbea839bd9f30c8685de","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.63aca9af6.0.tgz","fileCount":47,"integrity":"sha512-XH3cGUmsOqg4PnaoU9v5di2kvpTFcNFDLn/vTWvM3OmyGKeAyq6ijImdzNrEbSOly4CvuAveXKNQaIwolZAA6g==","signatures":[{"sig":"MEYCIQCCO9Fsf8fgpL92FF/0GLr/24Fxj4Wp16MwZy7bYl0rrAIhAOdT1mYB7ROhyWwbj3e+4HCj4Oqq2QkwJwuMytEcyrb/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoVuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVcw//fd18qHIgpGoJ3W7rRtfkBpb1IMM45HTcdONMF1fEhjZGwSER\r\nCmS7UiPXYAGta9XYHwmeMsmZVTBjSq529oy2ZXL9ttaGTX76E7iMaYplg638\r\nOsU48HitULN1C3iIE7gAA1PYArqNRbMtcOLdAWNS7D8pfpJMCHavythShC/9\r\nU7gDYWsBX3XRvnydyHZ4N1azVETGWje1tcPOSKlWF3cx7BYHk778LswCVNzA\r\nxZscQ4F0O9HZFBQ5xmkD1ZZMoXsP3+ZwaNm7Rzi3BAcnnz7X5nw5t9EFKO62\r\neR42osZ+qhdZdLkjZ9xoAxmgzqg6E1gqaqCRfcZ1/995xEfMTRAPAKqfEcVz\r\nbH7ww3a8WHWmBBHL+Z85MZClwJYVPK3+KFjbfAuqWbZFUqq1n0QFfhn1aK3t\r\n5OP4nGPN7IS8EjmIlmaT+J1GB9DZi+Xw4LAcs+81P8nQ8SRtyYoyXBg6//qH\r\nKApK0LiwDMl/5JJ5IWhroX7QCKkziCz3sboQ+DXkS8K7vjyJmXqllsFCft6J\r\n+X5E6SRoIW66YWHkOfV2aiYnL6vB78ySVqUeDyk4G1VzOhuUvEQ0uBe8MC3u\r\nwSurgNgxVz4zdAoGQBbMeUqoSU8HPETny4SpsN2afH31ONAWaFdd+m7j7Dxq\r\nkzkS/ZVF8ByZzhcxztP2YfVku0VGHXE7dLQ=\r\n=tG+4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63aca9af6.0","@material/rtl":"15.0.0-canary.63aca9af6.0","@material/base":"15.0.0-canary.63aca9af6.0","@material/list":"15.0.0-canary.63aca9af6.0","@material/shape":"15.0.0-canary.63aca9af6.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/ripple":"15.0.0-canary.63aca9af6.0","@material/animation":"15.0.0-canary.63aca9af6.0","@material/elevation":"15.0.0-canary.63aca9af6.0","@material/typography":"15.0.0-canary.63aca9af6.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.63aca9af6.0_1668711790066_0.4774554245342242","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/drawer","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.56482dc2e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44cd13e7b42cb85ae6cc4c7abf33cd13f81bc1b2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.56482dc2e.0.tgz","fileCount":47,"integrity":"sha512-Wxs5T0I/wa76u3uSW/ACUwx3ih1OWYMKIdVPyAW+gVdYP1Thlaws6T8Dqq+wLSaTjrkC8vq8WSt+HW72ZYaCAQ==","signatures":[{"sig":"MEUCIQCrq4e/Vz9irZm1YKy2PmdQBloE1K5pTcrMB1Z2e+gCYAIgK5eUOh0p73zjOesHkw6EE4yXRFrg8Y00dXpL8dbCVgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq4lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroeQ//ZrdEqv60HXtEYj+jOTf6GE5YwZRKziWGMHbKEa5QVrzGO/u9\r\nfMxLy+bhC4KC/kgVKvf7QynXgKse2KAD7k0cBedbjQmVOI48YHslRktsS3HH\r\nQSonx7dElDgHo6+Bl8TMRzXC1P75+ysr8ap0LYxa1Ai2kK2iOiDSty9S0GI4\r\n/aDx0x7r+CCdOA5zdCBwIddl7kl1AeZSySqBRwSWvpJ25odDgjvhMBlwfiit\r\nRdHK68cX84L6NAAZHTJQMHm+KbgA7huZDUXtg/y+KByRZB0v7Xh6iLB7YFj3\r\nNCPvJrfWNkDhviKIeomCMe6jXhdsgW1r+WLcX3fKdgF4BuegxuvphrUY5Pbr\r\n4ANMISL3TVZMdFhWjuny4BSrXajDnnBjYSBIPQMyG3XhWqmjhsuuiv9+EHLC\r\nHkAh+uAb3x2tgwf+dB7lWBLIBqcXff70N5t3QYcQTY0vGVcoH0wT/LWaMatc\r\nilmc3K9L+KoS2C4YhqWtZA4THr7Abq4Icu+i9KNFq1Gg3zU5nlZfjOEZCt8x\r\n3MxDPVUWNFigrAV5+/WqhgzCGl61rYuyGrJ3dyBprBmp293dZUKRpEUIQhU8\r\nMdioUdhmr9X5lkiFVqJkbcsJhxIUzll5XRoGuCMOT0ZAfbuP6U1RkL+GCZ0x\r\nKWtRuN//8gsGq3JYBjK4TfQJVTPK2BkAqHw=\r\n=kBf2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.56482dc2e.0","@material/rtl":"15.0.0-canary.56482dc2e.0","@material/base":"15.0.0-canary.56482dc2e.0","@material/list":"15.0.0-canary.56482dc2e.0","@material/shape":"15.0.0-canary.56482dc2e.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/ripple":"15.0.0-canary.56482dc2e.0","@material/animation":"15.0.0-canary.56482dc2e.0","@material/elevation":"15.0.0-canary.56482dc2e.0","@material/typography":"15.0.0-canary.56482dc2e.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.56482dc2e.0_1668722213508_0.8729441049601647","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/drawer","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.953e689f3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a113b19def34cf3583e2c13309bd0261cd82f32b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.953e689f3.0.tgz","fileCount":47,"integrity":"sha512-+7ThlZhqKHW+0A6/KzlvRUjYv4JAn8MNFDsb0twVn3/3cLbsJLafWfWlkxl+eFYfzbFo+tSpAiq0UK5oajkbww==","signatures":[{"sig":"MEUCIQC4ehYyuhBP5asbbIyGlTzSwSm/B/NbOdK3hyDYPovbUQIgAlrw/bl/xKMKCfnPG7AYMVUV4MV+jpg4KYMm7LcssdQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdrBdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqD1BAAoahzT1RFfd8dXpi3L5e9yTnamWnQFrxJI9pAqgEyp0i2yg8m\r\n6QSe0Mv1eo3Mifw3tYP+8Sk5QczK3qlqi5YxvYfibtuTY/X3GEX3lkOM5MyD\r\nfncukqjOxIHuzGTT4Aqrd4WkKDiXNgQuLCG75qQufX4DlfkXEUJcaXsPoSm7\r\neIzhJaVGpTtnfBF2KQ3O5x+pRD4JnVmeeW3CPYS3rrBvq31P+Gpy7z7RtKKL\r\n3+XlMWPSjBkh9lG2EqZureExiZpxSkuTaG8/RmaQa/XQ6503P7E5Zlx1EWTm\r\nWUs1QJ8CtJV6F1HWgd4qPGRdVYszC9KPJptl/ognpnFA7MI/mhwFnnQs+BUn\r\nsogqP8jiRMry0Fbkuc4YXiEJOUaucegxVL3YUOc4arpzZlKhC/DSsew2HS7K\r\nRUE9FpYL77ZGTpr0n1fuveYb4f+9ngnpajmJt2XZBS5cAzhNlPwL9vuBbHlR\r\nLZDymmDAoYc9XQSH9h42EOj+0bbMXtcOnCKEk8OpHsnu2bVlrbAzvQWhEj6W\r\ntRGkYW9moZKd+7vSQp1WFCRH7UHTUgze3eVmAk4FsJrKqrCBj1uDcR00+tP/\r\n1CvSZrgI7VWJrH8ZIEZUMqF9DFCCQ4GPrGTS0DzQAxAjvvtLTW7bZdB9fGSS\r\nTeQUscGk8UH1mlt3EBtFL3/V0CkHbsLemlg=\r\n=U56R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.953e689f3.0","@material/rtl":"15.0.0-canary.953e689f3.0","@material/base":"15.0.0-canary.953e689f3.0","@material/list":"15.0.0-canary.953e689f3.0","@material/shape":"15.0.0-canary.953e689f3.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/ripple":"15.0.0-canary.953e689f3.0","@material/animation":"15.0.0-canary.953e689f3.0","@material/elevation":"15.0.0-canary.953e689f3.0","@material/typography":"15.0.0-canary.953e689f3.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.953e689f3.0_1668722781410_0.5438713666430031","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/drawer","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b5606a793.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"313c4ed6414af738ca0a5b034125e3d484246dca","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b5606a793.0.tgz","fileCount":47,"integrity":"sha512-MqfL9BJqdCHZJxyuZctKDYUwKiI0LgbS2FCKnDi6XEbSw9Vf7H4qwBuOBTb2S/HVLr2lRsw5ky6FDylenn+1mw==","signatures":[{"sig":"MEQCID7YB7V9lf57xd8pH8i8tZSuPkpliOC1cag5kWZ77P5BAiB7hqaHUzMJK3HAryg9ZtH5rViJ2m9UqtXHlpwItC5CzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1z0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmociQ//R3LbrFGlMrA9vjBg2q28Zy5pkRSP/IBCsDDhaRliz+axFaiv\r\n1EVqehfiVP8Lt36PRr5g82aUvi3j5DZWzazpxNCD/NFd1ov0OJJI9f+qwInw\r\ne5x/PgdeQA67oVcDvDuCkjzd32Xmybb8JlaEYldvLfn+F25Iyz88DWrCSb73\r\nbXyyWmVLy11FRHIM27yD7P6AeTWGrKeucvGZg0XrpsruValAZpgTAXphqDq8\r\nxErE7P3JqWtcrUbDgoUMBGlsDUb2aUiS/XEdADV7hxZx17p1tUeanc5MwuOx\r\nyWQOwDT7SLL9X4lZjczZQXzjnHsxrV3Yo/E7We0VOHEpTOIuuDM6KrZhsF3Q\r\n63JCei51QB9XN0mIoXb5dUQbAZWhd6cKc1NMeKxHNhp/ytAk9lUHVB82fixP\r\nEbRWPaAI6Iy6nQaG9KB/qbWi/i7wTA/ts17iw96/Im4Hf5iOQoqBy0RH1qqd\r\n+/W1YPU/OJsIZJ4F2BWM4LxQIC2OrxCD6vBFA36We84dJgX9y6Wco/UShNHU\r\n2CdxCvxQBAjSCJLWuN7b87pBaz0IvW062718KaKL04QM87q1HjDdUhv8+jVZ\r\nA4HmZkNlT7cai2llFTzmF31c58i/yOY49iz4McE4zAdcr0D+io801FZ+IdqF\r\n34dSpqz3ySH4PRRoMlP9Zwqm3d3d2IDQ7lQ=\r\n=MvX1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5606a793.0","@material/rtl":"15.0.0-canary.b5606a793.0","@material/base":"15.0.0-canary.b5606a793.0","@material/list":"15.0.0-canary.b5606a793.0","@material/shape":"15.0.0-canary.b5606a793.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/ripple":"15.0.0-canary.b5606a793.0","@material/animation":"15.0.0-canary.b5606a793.0","@material/elevation":"15.0.0-canary.b5606a793.0","@material/typography":"15.0.0-canary.b5606a793.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b5606a793.0_1668766964513_0.7231331540220083","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/drawer","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.8c5675942.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b781d6d402a6091eb2e808121e1b2f9b711714b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.8c5675942.0.tgz","fileCount":47,"integrity":"sha512-fjUh7BtIHFAJkxxJw2O/D9t1AlT33bKZjcz6dchC4nYb4gRskcLfu4EWeE4N138oAju1gurv0MOjZ1X4R1N9lw==","signatures":[{"sig":"MEUCIA7NiSCSmNipBs5lcIdDPm4FcJBRcYKiY/vZc08MUET6AiEAya0K5QDRR+u4muC8AmyY4JSBrz45wAKd4MDzQUcb0Vk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6IpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmql9g//cZD6sevYu1JsOzvDHetTWYYSOpCXaQn1tIBxawgUIvcQJjFK\r\nLvHqS8DpmB6ErJQ7SYMTX2AzEowQUHVcEH0N8aeKWgMgb0j6AwZUJWJApft9\r\ntUTFegXorQ8s3MCXAKcjHtoVNdnOtInlwfEHG26VHAzWNKU03OIYWpVq6Sql\r\n0Xl7hohHhNpf4ZTfb3CSIByozVJivChUb1X70gR69tg3XR9orGPG6iQ3KzD2\r\ncb+vfW0/Lec/EtFMS0LOiA+nDrCwBQFIFXALBrB5nXLWQLAZ97sVtgMV6GMG\r\nrV/ZREeDCzWsKnFLCYk2cQiqOM0vKNdBZSXPmwOfTdR7MLh+pSRiYO4F7lX4\r\nfbNsBex/LgcCUvIVbIKX8R7fNlN3CDTVoVSMcMOWofKdqXZB23dt77RxYoJN\r\nHil2keyoQ5vACDQlkvNZKzLg+CPUuZOkcKEKE8922uiGX2tYHz7IsXQKKHRG\r\nc5myCnNWTaQYODq4KgRztyd7kGzhD33kvXuY2C49NpXEcBfJos6wY5Zxl9lj\r\nFVc49Ys/yn/d1bs+2ukJWpoocxTQ2W11zNbOP4od9DhAj3GzdZ+6B3kjdx8u\r\nBEshfiGgw6/wTmxv4LUBQ+OQe8xLKG5dyYEBQcz1mE3Lf+0ZiA0vCdExO0FD\r\nGlQMn9V0ds9tOmQ88beq1A4zizAIJYfrmCs=\r\n=hI3+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c5675942.0","@material/rtl":"15.0.0-canary.8c5675942.0","@material/base":"15.0.0-canary.8c5675942.0","@material/list":"15.0.0-canary.8c5675942.0","@material/shape":"15.0.0-canary.8c5675942.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/ripple":"15.0.0-canary.8c5675942.0","@material/animation":"15.0.0-canary.8c5675942.0","@material/elevation":"15.0.0-canary.8c5675942.0","@material/typography":"15.0.0-canary.8c5675942.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.8c5675942.0_1668784681245_0.3549751306302258","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/drawer","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.697fbdebd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d40eda3e962dd1d6992b618bc66a48e90b110d9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.697fbdebd.0.tgz","fileCount":47,"integrity":"sha512-yrokdHWzkH8JZoztB9HhUOuXsrzkXuo4oX7TnYW2MYrRlxGWGpVQbQNFkEaAfHGuDL0dJqj0RM9PGa6nAgCMew==","signatures":[{"sig":"MEYCIQCJzUzegLF/CotM69bHl2X9tJiecQn6ZR8yQ2E/fSCJlAIhAPSjZEscz15yaX25jMymz39/C/6Adb4kaegQksowyZop","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7q2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqF8A/+J3LZAauVbqkR51LoRhKaUAflo5vO0VfW0f3ZkeEbunJtesjR\r\nrWhG2noFnr2HVdIrd0JjK1s0FvxpMjr7G4luV9ilx4NJ8MNYEHfi2mgLDal4\r\nfRDpfSlcrGv9C4rj2dy9sNruVSm1cEq5GEqcegqx0RaiYNRdfEjUKJrvdfEF\r\n05NpXWQOqBhowPlDJL0Q5U2KE2kR6coFLW9bNt9R5q5L+S4dT5adNGigMvmX\r\nC/Qfp43ZlBGoOxWwHagDutXVDy9KFcYvfjbjz/58HvBQEhE+Cqdj+MZLAePG\r\n/gBh5jLULyhuuIQhj6v/UfVEwaMi93Cq2IrNuvwJbuLudF6SwDGYwWcP8VOK\r\nm8HW0iLUHgqY4scYlQ/boBvGpX/Fwo/ZUYdNFSc0R+cXW8L1BB4Y8fxCZNjl\r\nEEKJ0O6YkZ9Bc9sLLNAwAzUegbeXeqfZMGyz/O8nDVAUt5V+IRJLjftKhT5S\r\nWtSQhUke331EbQETo+s2I0iTkojAGqgZxTHqrifkwryqc4VxnU8OmHTiA7hu\r\nF4yt6g6zzwG9qZvxtY5Rpd2m7jOzccCHgy5Can9obzbggtyp/Vtd+3jJ2R0W\r\nSqMQhcqIGcSxZiXOEOFTPjQn9fwHT3I4diq1U26eKchwWg5TkbQraeolgMxX\r\nT0XJYReoqn5/JDKfe9Sy35U3TChSUx6TplU=\r\n=52eZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.697fbdebd.0","@material/rtl":"15.0.0-canary.697fbdebd.0","@material/base":"15.0.0-canary.697fbdebd.0","@material/list":"15.0.0-canary.697fbdebd.0","@material/shape":"15.0.0-canary.697fbdebd.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/ripple":"15.0.0-canary.697fbdebd.0","@material/animation":"15.0.0-canary.697fbdebd.0","@material/elevation":"15.0.0-canary.697fbdebd.0","@material/typography":"15.0.0-canary.697fbdebd.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.697fbdebd.0_1668790966639_0.856721296786725","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/drawer","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.d58410453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c10840220a79af0725ee86d4a10af915c1adfd1a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.d58410453.0.tgz","fileCount":47,"integrity":"sha512-HJDBnd1iP9PmppovoosIVi/ssuxEVCl/tNZrliNKnAuDm2ARBNZa+/NIWU3W9FAU9YtASHqOTO1MPYWdX91PZQ==","signatures":[{"sig":"MEQCIF44r6m1qOzpY9bEv+xo5DxHMd7oMImAA2ro8mqsfz3CAiAIgcREUhC8b+vPbHIz4f6rzaVs0OWf5vx9BMW7lQIsQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9x3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiTQ/9FCH0t7620hadx9oIWjOUnH2mI6k8ltQ+WbPOG8eVuSLZTmYA\r\nWNwCPJiOmWfOfZ9dCuodz0Sk7Ry+cu8auRSiy65qNJeCbHPLrejOhlIEElkk\r\nlVK3UG0hQ/IDdeMdet/I3OO/feNJdip0K7ZNgmGMWerbfg0pH4VQ3Lj/U9Eo\r\nHpCrrtlt0ihEV81nyikJvb69TbBydHG8Pjtrt0Ratm6euksCsHB2j//2swHM\r\n6i1y1mmjh4wmFq40f4uejzJD6i81/eUJxwADJ2dSIxW4G5xUlJkCeMmfeBbt\r\nYwv0JaTCWYG+4TV1dvCLzs/MG4L1/OPSMTgLnk+nM2iFAGwQRkNTrQqWIPuM\r\nSULxzS3Q+jf4KZVQ4iqjr7IZuzY11Jl6G8Nced79Wx9gogrXr0Mjg4trlf0p\r\n4x08P/pWDBY/uxtpmxwfcW5K/iq7CpVnmNOr64uHf3SsWIJcRkScbwYwAGml\r\n7KJOKEkroXwbcE1D5alL8qAAW2ReNTaMgGGKoDrxUgGNbPALlVogtEfIiP4L\r\n+c7aQXS+xL4JEBiWB2b9xwQI1R9NGZLGYny0h/uOI5THQ7NcEC++OudX2Dtk\r\nXf+ivoYeqfzwnBULqmDK+OGs0M6Lc6GOgD7Cem8EswE2MNwdR4g26VUgTEtX\r\n6VjIk0HuTEanWDKeFiODNvbQqcDZTsJdpiM=\r\n=Kj7G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d58410453.0","@material/rtl":"15.0.0-canary.d58410453.0","@material/base":"15.0.0-canary.d58410453.0","@material/list":"15.0.0-canary.d58410453.0","@material/shape":"15.0.0-canary.d58410453.0","@material/theme":"15.0.0-canary.d58410453.0","@material/ripple":"15.0.0-canary.d58410453.0","@material/animation":"15.0.0-canary.d58410453.0","@material/elevation":"15.0.0-canary.d58410453.0","@material/typography":"15.0.0-canary.d58410453.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.d58410453.0_1668799606889_0.10055154881374007","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/drawer","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.7971d6ad5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"420fa2a50b39770c0c3b9770434648282fb5aae1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.7971d6ad5.0.tgz","fileCount":47,"integrity":"sha512-LYuriNp3lecXXIj3lK22z0ym5bGHHIturofEV60BK9uHi4baBWS/ovTPAw5T8YvpADv5kyidg4mkgkPY9Ydexg==","signatures":[{"sig":"MEUCIQDR1UNuWlANgPFsKge/YAi+jp35G88h7OkzkG/C2neNrQIgYhTAtkchWpnLwkdv4Yp3n6ouknZZs/p9BicrkZivN/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJf6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmbRAApSAc1uoq2/Jtr9yLh9tTgnS9/SpgySAtUQIc1eydvMHFqXTs\r\nTfeX5Aty1BZlmXmUMns1e7z8IIR88lnEn8/lEAgGLZWb3uR9NzCuchMNjhwB\r\np1R9qdu1pq2Q1R+cy6uR0xLITiQ9ibHwp2bGQ3ATql0Rqd1ScSyA0D4O2fEe\r\n04Gj/v1YW4phESbZTmzpCWdpvnydH7oEM+D4fk5lwkZt3hxvFErO0yyY0HWS\r\nXkmvZLR6tvoGv3kYSRQw/IzkHh8aBsosJ8KgIvpshKccSviaqrhDN/FWYk7v\r\nTSSpMyXXJRlWN6RED2j8djJlW0LUVQeiigW7mkBSSYfawjMXMtdLFCmQ5aoB\r\nydYPzck0bqwDPUz3Ysq5pJD3YTCJihHDCUX9I5syeSx92CRfTLbmI+LCwV3E\r\njAlZ6KtWIUR6CQCochcuvp2A2Jl5Pe1UEi8TUIKQJ8topXV+htWDsl4ugNJi\r\nib2O3kdc7FZZNJ7vt4DZvEuYNq/AtFbv9ITsqzS8wm0bHBBNfHLbHCvqKS9a\r\nI+NEmF8RiFdWWoK5i6+oyJTytplrJZkBwvdmxegtRi3ZiU6VdzrtD8aeAYgb\r\n55kznHL7Oy940ioRtiTyhQLgepmrXr2IfWKLzOdEptPpjtJht9znB+rRGhmt\r\n5PxZe1txe31Xwg5AMisAH9RYzIponu3NQzQ=\r\n=MKqO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7971d6ad5.0","@material/rtl":"15.0.0-canary.7971d6ad5.0","@material/base":"15.0.0-canary.7971d6ad5.0","@material/list":"15.0.0-canary.7971d6ad5.0","@material/shape":"15.0.0-canary.7971d6ad5.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/ripple":"15.0.0-canary.7971d6ad5.0","@material/animation":"15.0.0-canary.7971d6ad5.0","@material/elevation":"15.0.0-canary.7971d6ad5.0","@material/typography":"15.0.0-canary.7971d6ad5.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.7971d6ad5.0_1668847609900_0.19022858259363407","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/drawer","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a0ae73b0e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b1220e74d39f2d7cc84bd685cd45561994ef554","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":47,"integrity":"sha512-ONRyoxV5zQV7bcXi4PNpewYKai2l7N79dT9evVklbHRtiKlyy9RnGqY5LOwLFCfBD9O5SfUlHBtcgNBndOGIKA==","signatures":[{"sig":"MEYCIQCmrAsW1Lrm0344pJW2VwMMSew/DMrQTAVcyDafEPliVAIhALrWJZJN1HagPX2c2g7MkxCzxPYfiBo1t96yOSPvP/lx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1kuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrI7xAAmYruYDzmG9xz7ySEcUpuyHOADd+EBtuns/aOCFiuvKVXflcM\r\nho0t+xcCc7EBA1HuOwtTq83rOCOoHWO+LMLFA8jb5kuVFdxk/LREwFNKKE4u\r\nJCwM76j0osEF1Tz4MSeWWuAypb0gv6WM5YPIu9L7u1SP3iZLwo0H4qNi0n+b\r\nH6vWteFQ+kLbooPlcDCtnU0N7IRyb7uBD8fjkgbMDkR5eTAcKPUm24Unmguy\r\nlIlT9A32dKK6ZGiTi7PLbBqxhDE/tGUfo0nNvBElRON+nRR0kkplrvi4aOHm\r\neG4yOhclNTzye09u0C16jkFTKvdJ37tRJ2QPPl+EDGK1UjY62d44Fkivu6ke\r\nLa/Ei8pqev/Em0bA5wxxXBt9mo1oK18H0ENEgAxiACdHHzaObaY+FhHTGJOA\r\nd+/jlmW/K5cDIAJjSmGORjPP7vcStYReVGKrOH7L47Qag7cRkecvCziosNtO\r\nTeEDs43mCZv1/PtUztJ/kPEfOXOp3yoCFy6X1Es5fgwQJiUp7pze0RP/bsKP\r\ngqMo3iO90BpCxsCM04KSBngZVa7o+QQnSF0XY7O5YMNC5RRuTvy8CumIm8ol\r\n7ZthPEpcNZdhJOsFqsbGi0CDbwG5ayuaPiAqAfsIZd99vEV5SfrtbSPSzuE8\r\nlDxMMoiJSx1PKA41DUkjLauJCAlmx7u0o40=\r\n=bxas\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0ae73b0e.0","@material/rtl":"15.0.0-canary.a0ae73b0e.0","@material/base":"15.0.0-canary.a0ae73b0e.0","@material/list":"15.0.0-canary.a0ae73b0e.0","@material/shape":"15.0.0-canary.a0ae73b0e.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/ripple":"15.0.0-canary.a0ae73b0e.0","@material/animation":"15.0.0-canary.a0ae73b0e.0","@material/elevation":"15.0.0-canary.a0ae73b0e.0","@material/typography":"15.0.0-canary.a0ae73b0e.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a0ae73b0e.0_1669028142346_0.5928707440521632","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/drawer","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.96f472604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c294cac564b169fa9edba8d7e77b77c554d8a301","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.96f472604.0.tgz","fileCount":47,"integrity":"sha512-DEUzFE8aznESNIRusEvHudL+dfo+EakbVgw7qfQ5uhw7k+zdCU1EAqc210bq0BLhbHBmE8LRKxsnuZLG5nbbWg==","signatures":[{"sig":"MEYCIQDARoLaeOlkxIowSv733IP0A/Pa78C/HVWbdsyEImz/YAIhAPNqZQEjHfrGdh3VuJauegExXs8fzS12n4Ic2CR3BYZh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3UKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrepw/9EZIkBerFMzqhwVg8R3/ZibA2Kn5b8hm2qAzOPwo9ZKTwts8e\r\nNmmHcpAwRiZw+tiiHSAeGiX+5+trFBdMXSAcvJZ4aDac7UORtUgeu+1ndOJ+\r\npR847ovqjPtQMxUKtuEoROVW4YG8nBzD4af4yUJT4/17Hmbw5Y42ZtHtkH2U\r\ngxM7brXmqFlhXGgW1i0ukqYx56NoDVdgWt6wCzNKU9VwVZQ2KoUlIbpjMF2d\r\nf1D6r1zMJi/B8RygOkrHbkkz9wb9vwA4Yc0FPbOHqZawOCh4x+IsTuBm+TH4\r\nhRKWN20cA0dvhNsQl1JQeqe+vyVWHFyhi20UpPODmFZOrXTJmvbxCmusUbtF\r\nbNwZ8JOehNqGoaH5HaGqGKag5HMdHhlwxl/oiCDFNb8dHsmrII45paV7BtxP\r\n5g/3MKSDIpzvuSftf0PU/ygJZ8BUjrviS+W2BiFRSSX6atNzwkj5kVBXqD0t\r\ncRdBg9L27LjI2CbthwPLiigswW8bJxbFpfXp1u1uGTbMj+YI+Y3Us9QTrdsX\r\n8AoztR0sJu2DdIM+s7RqTYd7RYZW8DZPuYx+Hnw18W5z3dIafs134U0sf0mU\r\nxelfUweewX6Up3snXXs0hVxk8+zexUXpWoO/5vD11MEh7dnwJRfvsgmehN9N\r\nFXoGaMQxhPPaALgn0DlGC1jWOgtJK7+3dlQ=\r\n=XR2k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.96f472604.0","@material/rtl":"15.0.0-canary.96f472604.0","@material/base":"15.0.0-canary.96f472604.0","@material/list":"15.0.0-canary.96f472604.0","@material/shape":"15.0.0-canary.96f472604.0","@material/theme":"15.0.0-canary.96f472604.0","@material/ripple":"15.0.0-canary.96f472604.0","@material/animation":"15.0.0-canary.96f472604.0","@material/elevation":"15.0.0-canary.96f472604.0","@material/typography":"15.0.0-canary.96f472604.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.96f472604.0_1669035274416_0.09426449959967775","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/drawer","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5f2dbdb6f4d84b2d0f406321ec5757ac398178c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.18b8f31e1.0.tgz","fileCount":47,"integrity":"sha512-zswAw8QcYmXuRWFbFv3+WTTj1iHAUcG8hoHYBnaKXVJj9dgZv89zLcHrhdveeD5syH3sjAX0LzAjWbHhZrwURg==","signatures":[{"sig":"MEYCIQDyqQp74DiTwDD8VTh7+wsnJIW18SB4byFsAWOVP/lbJgIhAL36X0kdWbsDJwli/DL8XU7EjG364kqOT91JJYk/A1Aw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6F/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxYg//RJOcFIExbqb3bFypSlW38BkoUPsiOxoyW5+cmB4e9POnXl5r\r\nekHcJWMVQMLHId342TfOA0ajgdr0sMBbgZ1nLwpUmYMg6sEfxErAg4wDKxKO\r\n00vTh5Mmqw0d5IrFosC9uOEyuS7JxxDpn5yaFk6hR3zMeIsK3j7vIc1J8YOq\r\nvlpj66Y2pw6kiXjseqGCxqcPDSplJ7J3xsehOxD3cxpJdi0fcKmptJR5T/5Z\r\nFgZCTpbUuL5EeBQnwRQbshntHDr32aLXWWmi/i/0VNyjwFfnkiQz0Pnic2X2\r\nj2rRb9krnebfwA0PPuSunV7v1PUoR6SAxSLTknRiwuGwQQUk29Up1wuOp5KQ\r\neCvlOX1MioYUqsQlBHR+oUcoMFW1nB5E2YLAICX/uIELlWRqTWW/hrNXkmXU\r\nWTU6G586+I0CipCgeWp2Wow1zK8pxJwnTZDLP/C3CuqXgzvFzoflUkHOP+tU\r\nT/s8CnL2u1w1VRXcTGiq6JNuGX3nDHdZMpsLMRtNVDvnEHpKxVYZ76+xAhV6\r\nELxPcdgR5wsrkmvFonkTcvX283hy/VS9KpIwkX+B4b0wwC+nslfADU2W/G+2\r\nEv80NQMG12uCq5g//+KZ+H29MimGDLE2xTW9ag9+rHfHZmLCxwreXil301pq\r\nbaLhTFBbq3ZCB+2hk2NU092E04yoDfAYvms=\r\n=3CtP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.18b8f31e1.0","@material/rtl":"15.0.0-canary.18b8f31e1.0","@material/base":"15.0.0-canary.18b8f31e1.0","@material/list":"15.0.0-canary.18b8f31e1.0","@material/shape":"15.0.0-canary.18b8f31e1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/ripple":"15.0.0-canary.18b8f31e1.0","@material/animation":"15.0.0-canary.18b8f31e1.0","@material/elevation":"15.0.0-canary.18b8f31e1.0","@material/typography":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.18b8f31e1.0_1669046655189_0.5567183177411019","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/drawer","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.912f33ce4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad87f4e8a76227ebc927efd4df3c7b6faabc41cc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.912f33ce4.0.tgz","fileCount":47,"integrity":"sha512-Aw48HFa5Agg+v5ce1NeNp6uaAmxu0wh1fIAWsZGbhLeJABx1l9lQKVKix2WvlZWEM1nKpVioRPgmFWTRnMJ0dA==","signatures":[{"sig":"MEUCIBmd0UKDfgKyrpXB6NwlqpwknkkKWJdmhGUvze4NFy15AiEAlydd+vaiAxyM3d5sfZMlKVdHONmuGBoK6RwMK0kD/64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7uhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGxA//QyfmQLPjOZUsRCrf7kA1X2t9YzMNLpnYtTY7FSSIlPzA7K86\r\nsMeFHO3wH93WhH0WvvbAr/dGNQSqjBrfSi95pdBy02XzebvNZd0CCGhnQHF3\r\nKrDgblppBtbh+eQ0htDrxLGJhwtW6r8QKeAvwR0F4CPXYzItfoBtemJxa8ET\r\nq4cx1NFyNvfkNqP1yCyTXo1YPmsfs/vj+Z9gwhqrVmIMl8Kgcin2CBv80PP4\r\nrINq8Qt/eHIUf9fUrwhFuKJVpGeIA+JgxCzCnkOZhkeIN+2V8zR2RGarEIix\r\nUM+6/8DheGcxpsmE7jG4uXBDsVcDSTO2GJ6hLx6tkJIBEluNOQLY0iZB+7Gi\r\ns1/hXNv7fFTj4tzAkq7l9A8YdP3D2J27wbNTFJK4n97iGTfvFBg4gSemahuK\r\n+nCoq6ga0Hkwu1KOecuQevpt0YKx0CU+JzTGPrwruGxz6tQOchsnJeUOxIZM\r\nTKDtUOQdbYakw1XevxSmU/lETv/VxEMdy8GkXfBFRQ0MnpRjjgSS62o2PKKs\r\nixUApT9CDuAoUpsK2XGUypJpqnAyqPxy2ONKDMIpkQMQp0KapTKgIeN70hQU\r\nVOdGcaEf0o/s4QygA/X9UEZ6oqWGAcCWx1g08x3cNlBUlOWGmecPD/tS0rok\r\n/eR2dTMKGhp7WuJvXcPfXBrnLIdDSjFgits=\r\n=1oga\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.912f33ce4.0","@material/rtl":"15.0.0-canary.912f33ce4.0","@material/base":"15.0.0-canary.912f33ce4.0","@material/list":"15.0.0-canary.912f33ce4.0","@material/shape":"15.0.0-canary.912f33ce4.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/ripple":"15.0.0-canary.912f33ce4.0","@material/animation":"15.0.0-canary.912f33ce4.0","@material/elevation":"15.0.0-canary.912f33ce4.0","@material/typography":"15.0.0-canary.912f33ce4.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.912f33ce4.0_1669053345291_0.5144288127075389","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/drawer","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.1e1b1c369.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5aaab4a87c5ce8a9d411838152346fbf3b66861e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.1e1b1c369.0.tgz","fileCount":47,"integrity":"sha512-fergvM/2eD1sQI5Dy2fZOZOTg8eNm5Bk9Gxk3v601O4oOGV2DgcMftyWPL7qKxoFOqCbeZP+Ezo0YMxvsFX49w==","signatures":[{"sig":"MEUCIQDzNuGnxr3yutI+CxSNEN4PEeJ6UkBNsjpzlfQC4HQHygIgHW7G9AR/Aj2T7ejwzwXOaRyQurSCkC8Z0CBa4oMZ/ds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm5FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9mA/7BkbYh/DlhFsEkS8/p1EgTGGFY/6yE2fz3h5a7LkOQ2e8/zdy\r\nIqIaSZckIUWi2Vxguvn5VlqjbkNuWjp90gp9FzMa19amJmFLCAZfQCzKOg+Y\r\nQtT/99JRocV8PflEG543XLmSDpGo9irBeKBMAL7e335aE8Pae3Px9MUNEvJG\r\n+/8TQHrSjXvI4UAK0aSM0+HROhsGBMdBFxz3IA7GM+y4pvc4bOuSQD/CSPnX\r\nu1GT3AREq5iWJuayEqO2Ovd+VNMbhhExeZD85+GV6ApEFtfYCNCbQBeCopsi\r\niDpDHQ/kWxUCBV+W/DinAtEcuLTJmBMnNf+68+ZlifLdU2MEqVQHlcUqhJWh\r\ndmQhcyyvbORmrt4mrgAvbdnFhsIUsskGwlfJbm0RRdWXvr73csFJMBqksAic\r\nipVwP2SmSH07neGIdbeukh0I6tEixFm98kyDSE7q5M7qszoI/qORXRbG3qSg\r\na/vC7/YjiWP3iTOp2s7WAxyeC1Zm3HhIeI6bIArpvVGHYX6u05mQ2EkCht3S\r\na5SzVBfSDD1GnAxeUtBVjamX4NfEOU3OhatfC5n+NQxjzaBnJJGdQYEh12Rd\r\n+CaYbZtZbNaQ9Chxz/Pw2ld/DamuNTtrwdKo2+m3K6OqX37f0Q2DgbyAFjF0\r\n+pQwcbAef97kh0aQ2VK6Tt10q1+M1/ELums=\r\n=AGmg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1e1b1c369.0","@material/rtl":"15.0.0-canary.1e1b1c369.0","@material/base":"15.0.0-canary.1e1b1c369.0","@material/list":"15.0.0-canary.1e1b1c369.0","@material/shape":"15.0.0-canary.1e1b1c369.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/ripple":"15.0.0-canary.1e1b1c369.0","@material/animation":"15.0.0-canary.1e1b1c369.0","@material/elevation":"15.0.0-canary.1e1b1c369.0","@material/typography":"15.0.0-canary.1e1b1c369.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.1e1b1c369.0_1669230149406_0.9852414432017507","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/drawer","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a2ec49244.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcbce2d51e107b0f70a07243370e497a614f163e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a2ec49244.0.tgz","fileCount":47,"integrity":"sha512-aJZy5Tk8nzBAtymBsuZmeOwb3l9Lm5Q7ePVsUC9e4oRoccW3HBs/NMbW0EBbaes92AiAb8+zx5kqMpoioDSrSA==","signatures":[{"sig":"MEQCIBnSmvE8tDRW1UrOZMNvA+ickIGUaMMFyCWsAhljM3EdAiBXjKvEMZNqbymcd6PSE5ZOr/iZFZOEncODKwdDFh93Xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnVUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDcw/+PZ3K7FTlXKucCaYw3qdwrEre+JaB4O3AJb2PaFUcZbAie3Dt\r\n4NvEPPInZYkBaUt5vZ130QTozIMhrp0pYOZNuAOoTSH4YF6VGUYomEYbfTt3\r\nN+decwXStMSdCuQh39e/LiAgwZeBhgdkqHPnGSM7ORQBx8FYAfXuYmd36bsq\r\nCY1I0qWC2IgURAwQt8+nhpOe9eEklTjE1aZl3lRrKFsS3wwEV740OuRlYe8c\r\nPatizRXjaxBqLrkVWMzAelvMhLxE3x++eFSjmQQMP+ODz1X1aJ9jOH5iI0/U\r\nmMDZmBJnq0EjlOught4iroQrp6Kto6PHFxV67sOY8ZIyVS6k9pvAJ4eJuO85\r\njPnobdJZhtgQL3e2b8NmVByfRWlub91hRP1kQjmj+sYq3rT/Fa8KvqQzuSSq\r\ndrEQh4vXSLJF7t+FmdF/awIhJuxFTb9Y1K2LM9JJo3bxm38hkHV4pArIOrp0\r\nTEhbcPIIfU653EOMxjWNSnrTTeT4V9tOBAdDMER795/SF4VbP6Sjos8ua9fh\r\nC7BfWisQsV6jMnqOJwZXLq+x42zMmi34CXatYnlxj76rdSEAW1+2k330VoXz\r\nqm19EZITQmnQklpwtfkf2kwaIk7JyoaPdha3U7vLweG4loc3CBV7pXhGMfck\r\nZ2z6Mtr5AgOkQnVakXKkqqbOt+3D2T26Z2k=\r\n=H71k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a2ec49244.0","@material/rtl":"15.0.0-canary.a2ec49244.0","@material/base":"15.0.0-canary.a2ec49244.0","@material/list":"15.0.0-canary.a2ec49244.0","@material/shape":"15.0.0-canary.a2ec49244.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/ripple":"15.0.0-canary.a2ec49244.0","@material/animation":"15.0.0-canary.a2ec49244.0","@material/elevation":"15.0.0-canary.a2ec49244.0","@material/typography":"15.0.0-canary.a2ec49244.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a2ec49244.0_1669231955797_0.2637309105281711","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/drawer","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a7458ba0b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"257d0bc38fde52d54125a2352162b6627325a3ea","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a7458ba0b.0.tgz","fileCount":47,"integrity":"sha512-Ywvw5Ny/VJsTI5LfsZ889OHq4YkNcVbnoUra0UBn6oX4tX40Q/QSJn61kYhwUKxLV5R4OiNS6hORny8eHnKIZA==","signatures":[{"sig":"MEUCIBluLaPiVokaiVTHDX/34Z9AsDH16unMjUZ4iROxsbjxAiEAmQjKEiGkOVCXfRIPIkarXoj9DN6aIRTNDmHaKmJcylk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfoALACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt4g/+JOZaTIvqCGJfyFCtwoB3pOD9OGIQH30RmULurHYsEdt5VFU5\r\n76qwUbice+p2JVn3ICIx7dtdo1c69JzkScs+gRvf/x5QH7467E84bWduxzPY\r\nesVHUY/O4uIxgVArkBjhsKE+K31kJtGCbccDTm+qWziKvC/aPopsWuSKSQaF\r\nWyJZxTnD2paWaLv+coDp4yhA4qgCkrsj5k3PqtIws/Z0uA27dALxLfbzq+Nl\r\nqnewS30FMxRvO+BDZKhjCZuOmWt1DhZcbMQAFglNojAY6it6gFLmNW699a/5\r\nNiiPrPEGe2NxUez6KApGPTSf7NsxAJFKvXN4iLO13jvbE1ETEULfGZHC/PxI\r\nG60nUQNFwie2kJXV6xvo3IOkDdFJO1SI/7YSIng5knKvP/hzpzzi+ijIgYyC\r\nWruivgq8cdmNOnHfsViGr6ky0VkF6QShhDYza2PwK5RaBhNjriI8tas77ONl\r\n+2lde5hRrWkyu4FKO+82Jsu9UjTxqdUAwPh2C15B6VUPYpsi7xpqnnnONgJQ\r\nE7RRzPyxmco8frB5Vj2c87b+z5H1eq6dyP+v1SJogUTPLjJOHvszNKV0Y15I\r\nAutVTEfXHLURbnOs5+4a+wOWxDhwmIu6W3BrAzA7K3nVGoZq/uN+Ds05TKMc\r\nXJPDaiE0bLGCjLPX/cGv1xGUlrIUGVQmQXM=\r\n=bsTi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7458ba0b.0","@material/rtl":"15.0.0-canary.a7458ba0b.0","@material/base":"15.0.0-canary.a7458ba0b.0","@material/list":"15.0.0-canary.a7458ba0b.0","@material/shape":"15.0.0-canary.a7458ba0b.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/ripple":"15.0.0-canary.a7458ba0b.0","@material/animation":"15.0.0-canary.a7458ba0b.0","@material/elevation":"15.0.0-canary.a7458ba0b.0","@material/typography":"15.0.0-canary.a7458ba0b.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a7458ba0b.0_1669234698981_0.8235428037215848","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/drawer","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.7c35e5036.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41817708af4b116a80da695db2aedb8a6b81ac34","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.7c35e5036.0.tgz","fileCount":47,"integrity":"sha512-6hYGZwAKUE9IrN3r5hZ1WY0/i5lQN6nqMk5M+045V9gaUz91gQ8PM8UnCHwa7kxa0SQCDRUpdcf43ZsUH8o/7A==","signatures":[{"sig":"MEYCIQDvAn/odfY6Y/uewdzsewZhGLi/rC10VGrHOBJgAU1y2AIhAPfrSPc67zmeveYpjLVsuB5G6dP42CXDAkyjYMjub5Pl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy4kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/TQ/8C5mDgyLXQHPNX7o48iSl9bCvNwB3TLWqPv/0Y5boCzvbnK1P\r\n1DY1WetymFb4463V4GPh2CXsYgO+Q/cKnhDNXwqnFQjUfmbUxm2WxIFRHvKN\r\ndsPl3r/UTHAjUZPT0R35XPax1gV6scWgBLp9Sibomr2MNaOfTkA46BbBLx2E\r\nA7EoSYZUr5cF0N3qxZshHZ0Q+QRXGJEls6STSI/MI7rWHe/BD1CIAJj9gqGp\r\nFKq4ui2KwbNgUK+XMDnqbApc6sDCqUFsV5oZ9n6fby3+gqVIY2qJ2yqKghKh\r\nBZozGBMv7WJ7yrW/m1iFFzOd0A9Nk9UUgDK72GdMmPotcnqd3FjAYQnG27P5\r\n9RaWz/ZwrqpVTkRu5q3th7pYV8JlkACpRbUEAwrhUWC10L+ROYu8mm40+CVt\r\nZVbWAIYwjlFEnNQ9P8pPXIq/XKXjssdDYw2AAW3lJV6JNWZcyduuN4PocQF1\r\njnfTVoNt16oX+JiwpCAzIjmwc4pVnqyZLexQJwZ5CJwDM/dbiVDOxe40w31c\r\nMkb1ej1m/WDW2oKDYjS9TRq7+yKvn2XFkUN3fTgfCGx2ZJcpchUZB+Q07vxT\r\nx+rZZ7mYEx2vtJE1x1IEfITLGA+GuH5MtVNgsYe2AJ4DV9TQWCLZP+872afh\r\nNv/fh+NVa5xfGRPv8stvWEyVw7InuJstQrk=\r\n=2aC8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c35e5036.0","@material/rtl":"15.0.0-canary.7c35e5036.0","@material/base":"15.0.0-canary.7c35e5036.0","@material/list":"15.0.0-canary.7c35e5036.0","@material/shape":"15.0.0-canary.7c35e5036.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/ripple":"15.0.0-canary.7c35e5036.0","@material/animation":"15.0.0-canary.7c35e5036.0","@material/elevation":"15.0.0-canary.7c35e5036.0","@material/typography":"15.0.0-canary.7c35e5036.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.7c35e5036.0_1669279268111_0.7132675237912838","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/drawer","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.4356e05c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35e2d5ff1b422baa8735dc99b704e3788adf5ef6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.4356e05c5.0.tgz","fileCount":47,"integrity":"sha512-n+7RrRKMJb2No4PsK0Q2VuqeFLey02pou7gVU0Mz57g8v0FqpydU7jTG54MHaMSWOztgqIF4yBDgfegu44p7Ag==","signatures":[{"sig":"MEYCIQC4/fV1ERvc78c7Z3O4nSrZwuC1Z3ItcIQAlHZC6B2oJAIhAPqYSWY4NEiqj1J63Su8VaYtgDyh2av2vJJDn63+z2IL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0BJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpB6Q//TSZZbzeVMQd4Wp+4liyBc8d6bDKW2dKdU5hdKZ8/Yl5Vv+rC\r\nNtU8fl+s+DIzcAig3u761iCll6JjN8HtN+DDBXtbR1RA1beMHsl4kU3FBstb\r\n6ROvBwUldBht9JEXE1UcvHohq7liz/nhDGl7Rglf7l4BEyH0hrtMmyGHC/7v\r\n6jq/TxZnt9mx4HzvU8FDYectQX6O0t6fnIwmwa4zHcStWFlgdjuaXhWUaUDg\r\nixHG/vyR/5wBd/jRk2oF6IVdViYEqWTMqS82DLp2UDsonzDxhJIvPVb58auQ\r\n0C8qogIl3aoZTbafDMazVAtWdwrAdUo4vr0WWasQHVGknttpEbjQ3AJG3wvM\r\nayjqhVpHYYUzl7G/E5pFj+bcGgHUcE2KzF4gQYnE/KoVuOGdTLMEuhkBfbfl\r\nLW62Br9zt6y7j+Ouh8kmm8uZNGtNT6wqdwDynxdkG/GUJ47xDJfe4J8u6gSI\r\nXBjKEhcalnIhksifynwZSULaB11l4z3/BCgHO6WwZW8tG8SAzTwRlMWFNWu8\r\nIvXxHHkTTBM/6/peZYdR1QecgLEn5thZ3aF4np9fXwz1DwN3wUpse66FU6am\r\nv5d5NrHQ25fUtiVHilTjqk/FKRkmG7beq2AoB9FvUyVFC5W/QG9n1268E8E0\r\nRhj09aXWOhSjdkEzR5wzmSvU9g/61ggQ7Vs=\r\n=6Y3U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4356e05c5.0","@material/rtl":"15.0.0-canary.4356e05c5.0","@material/base":"15.0.0-canary.4356e05c5.0","@material/list":"15.0.0-canary.4356e05c5.0","@material/shape":"15.0.0-canary.4356e05c5.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/ripple":"15.0.0-canary.4356e05c5.0","@material/animation":"15.0.0-canary.4356e05c5.0","@material/elevation":"15.0.0-canary.4356e05c5.0","@material/typography":"15.0.0-canary.4356e05c5.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.4356e05c5.0_1669283912811_0.7462197441106959","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/drawer","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.cb605f8af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d00a9a2f457d4673ed78c71ebf99cddbcd73c44b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.cb605f8af.0.tgz","fileCount":47,"integrity":"sha512-iqdrkYRmV9gxt3hgKPscQHqegt5XLSTkW+ep3CklOLSAUeFXoycr1JyMa7uHrH5ebxZhfhAzsR/TG6kCidDGIA==","signatures":[{"sig":"MEUCIQCyzZVT7cB3eSw52cqty87Y8/RfGcQ/MwYuz9pEp2JxDQIgYSHhD35oogDbS7TQ4X25IITQ0lAAr6EP6sIRMhqu0iY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0TIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwTQ//ShYQV6pN/j8UQjeGEYKcfSNWNopvvXt9TRxQw7rqg/ggCi33\r\ndHV8mSOnvr/mqA4+fPlCbmK/yP4kF/PtbEggBNs0L7z96wiwQ7y7PbhUMFSE\r\ngD05tRVFCEHJQomsXD8Uq+TPgFRJ1NA7HvKE5WBEHl4qHtgUOsqCGoH27G/S\r\nvJVpvuyeRtDjkXZzlwCgUL9sJJqVfgoRDO59ldVpiTNJcltqoG654mAxY6O5\r\nUCL8xJobu/XrqY3I0MqlK+QwwFGk+K5zkZmNfvx1smzu5RoBpy7Q+Ua31+YW\r\nXrBt8rQs+MpfW38d0m4GGSORv3FO1ltTra9JptmI0jgcb25gFLgNu4/Fv4Ha\r\nsYPf47GXygnrYWCk59f3/OzUoUt03rdjUab5zd5humcxzJXk/wq04SpAPUvb\r\ngoDxPDoxvg80hEW/ndy+aSidKPdbobOQ8VhM9ZfrQTThKunLJdSr8BH1E7eQ\r\nRcizqsZkKmvmbOHxIccitPURo0EdrapKtyZH+i5O/OghAd4hQsWEIeUaWwa1\r\nQAmm7q0m61eekk+auTlJxEQYV4869BHgIduf4TbjkpP3l/yV/dL/DEGUfxhl\r\n2FCSWyxaVynznvpzD2S7nc44KzDfHEdcjTmHyJoEGnNNHaE4etZa6wkwYhuH\r\nVgQw52VH8WPK1KbRpKoFrdIihB0RValQx/4=\r\n=QQI1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cb605f8af.0","@material/rtl":"15.0.0-canary.cb605f8af.0","@material/base":"15.0.0-canary.cb605f8af.0","@material/list":"15.0.0-canary.cb605f8af.0","@material/shape":"15.0.0-canary.cb605f8af.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/ripple":"15.0.0-canary.cb605f8af.0","@material/animation":"15.0.0-canary.cb605f8af.0","@material/elevation":"15.0.0-canary.cb605f8af.0","@material/typography":"15.0.0-canary.cb605f8af.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.cb605f8af.0_1669285063981_0.800051480204941","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/drawer","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.05fb07f9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24ad2d73f4156f251de15268ec42bf199fa89890","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.05fb07f9f.0.tgz","fileCount":47,"integrity":"sha512-P0FntwDFQSZ4jNqf84TxEEgOIe3Ae8Eyr++gFKPuMIEXDexKi3Qei8Nnx4P+8H/vXPHCQxDO3nvdDryBv9C3pg==","signatures":[{"sig":"MEUCIQD9b7FYNxIJugBdv5fSzqu1ChESrbd1Z8wUlsUTFKgftwIgdOSNdYKn2TwhGhaWUgWJbiwJZokqBXhNO4RIqv/zapk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6avACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrE1A/+KEgj2ILy4dqFtoF7lMTHet+o4D6VPIv3F+/aYyN+Q/BH75me\r\nRRSXiQGnzfu3h6lpkExe+0u7gFqg/ASMkmvLdDMLCoNMZ80ft/g+vh0LoPS3\r\nVsWsqoT79ZXcNSsGPZX5n6ADos1DHgYUBXvy5IaDBMkiEJsZozLUZ0XZQCvX\r\nv+tum3z7qqAbn+VwcpnIHz0Hq3r+/8RExNtbqlnzCMXiSsuiKjxbQMJf41aQ\r\nPydpoGkJo7q9nNqHkrQz1Yvs0+lxpVK3QRSJj+A+H9cJExgn6lTQpVK42GqS\r\nZiC1tHp1wVI2D1gfaI1kokFOorMu8FLNA4YtO+lp80RdoiZD0h6k3VYHBPfo\r\nFKVnWU+HUplSrhqHg6q5DCWpPevLiF17pl8kZNXekiNrBy6qTkxYqTYEnHyj\r\nRv4QnR01Vv3ic+HahBjwv9TXSsWlBuVWSHW1kPKYVA80F4e8UEChPKqUB01q\r\nM7JrKD2JSkKRBuTqxTlyTRvrOVi37/NgHLszTwbg2TT1eTnXeEpz5A55TxfK\r\naxfXRji/zskcE/iXmEpxazXEaObNtYe7cw/g8ig6/fxbzVscC+//AeI8DbgH\r\neltV/mXfhSIrgsZdSMeZnXs/sUoVg0ZimAhlpLEILanKuxgiw/9+D8ETd9Gb\r\n3UlFsWNssbBd4ak0CuzDC+tdS/FlO5gSyR8=\r\n=0RYJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05fb07f9f.0","@material/rtl":"15.0.0-canary.05fb07f9f.0","@material/base":"15.0.0-canary.05fb07f9f.0","@material/list":"15.0.0-canary.05fb07f9f.0","@material/shape":"15.0.0-canary.05fb07f9f.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/ripple":"15.0.0-canary.05fb07f9f.0","@material/animation":"15.0.0-canary.05fb07f9f.0","@material/elevation":"15.0.0-canary.05fb07f9f.0","@material/typography":"15.0.0-canary.05fb07f9f.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.05fb07f9f.0_1669310127513_0.3716512558063241","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/drawer","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a911b386b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c437a5a36781b2efc60fcc8a3e5fe57e8561775f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a911b386b.0.tgz","fileCount":47,"integrity":"sha512-6ReBN8izQxN6c0ncHjWWbqI+Ze4gnHx40TkNvRmILwC2/I4PEYX+4PulrhOEG0dTEfUJeudTe3yd6XHU7jiwZQ==","signatures":[{"sig":"MEQCIEw3BFcoP3hU3wI/QH3cpj8o9l9V6qjuMIRNQedSA2QIAiBcad5/b9qxOWl7vzCwD7EsvTZILEFiDbys9j3/T60pHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":986583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOaBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFHw/8D1CaP3WGPVoRUdkk+8/WN5limh1nhhumB624ZGMRkzOlJ3/o\r\n1h30dGeL4UMQrFB5bMgwveJv9d0CS3cYdLtiwaBR2GXfILnO91/ESzSUKZqO\r\nM+fukP2jDpUevGiRqhK5SDA+6RjyCbi01xbssmNPrvFbJRX/uk4rYt5Sq485\r\nHB7yS7Qkc7U+DjepBS7tFCcjNwGp1fbsbXbAkBCcXSlAvACUvFQ97Vtnuqk+\r\n/lgbAqDOQ78BKE4ku97LzL49ni5Y0Gd6X0hISGxcgTkVf6N8B0OTG4NzYdkA\r\ntAg2DX8m81KVPbh9US8Oiqx4XjbwyjKwzdTVerTlXPpl/Huvt8vA43JmvMZv\r\nje6y1L0KXoEpk+EPAzimVr2inim8hwQYIr+lbBwl32eh+k5W8Va5p2yPtcCJ\r\nr9e7RSL7Z6CTK8k5JeizzlALjNQGNkYFO0eb436soBFBHGgW1W6frCjwE6hn\r\nEUv6Bo6skaPYwuALwDuVM44ZGk0O9NGD/9s5rxC8STk5z4m2B7euzZl5+iSK\r\nOPWz8Wg4UqZCvboQgb6AKuG97Xcj4q6+r2xoKFXHSnzqqzLvSs40UCMBGsto\r\nLhSHKamSQCnQZaudUkK7P+dP0OMa1DGmcMdozyeEXv74o6IerL4x3PNTzMVZ\r\nQY+28bP0b8Yg6AJl4x81JCGuStYYOep6EhI=\r\n=B+AF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a911b386b.0","@material/rtl":"15.0.0-canary.a911b386b.0","@material/base":"15.0.0-canary.a911b386b.0","@material/list":"15.0.0-canary.a911b386b.0","@material/shape":"15.0.0-canary.a911b386b.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/ripple":"15.0.0-canary.a911b386b.0","@material/animation":"15.0.0-canary.a911b386b.0","@material/elevation":"15.0.0-canary.a911b386b.0","@material/typography":"15.0.0-canary.a911b386b.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a911b386b.0_1669654145229_0.18253803163930504","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/drawer","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.2aa8050b4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d1209f6d787cf53463a7f012467916f462b33c1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.2aa8050b4.0.tgz","fileCount":47,"integrity":"sha512-AvQeP3Ub9/bK+ws8P4EuYZMnXmUbceSmYhhZ6r6mz4Snim6/V9sRDFOpLQjjabqm9027om5dMev9fYIOgaxLfw==","signatures":[{"sig":"MEQCIBa+2H5LLLdd4M93enfw6V1swcfCdGu6xVvzzas/uEO/AiBcNEsP9S13c0jyqtyW6ppUrUbyakNcN05lU6l/VbScOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQhXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqudA//YTMETBr+gJongaFi2z1jG1OaUpdcUd7ekDIQlN+0av/aqLwr\r\nJkEhSxSOlT23Mn8eHba0zSruTPlx+jKH4Qm3M4u0RMWCpuMG1YgHXAU72U1k\r\n5GCZnen7MZ7lcQXuSgSmDdtpxLlCxkjzRpMMaCfjRCJvBvSpYfn28bxDM1bi\r\nrK2zsQG61YDBdSYlW6H5s33fTLUUs/XrdPzZN5TScV7cXvQV3x7TESoXYwyz\r\numPjMNjoLnr1yS56tBcE7gYqD7Eir3rrL/yiS+5N7TQ8CCQErRxMrD9FK2e2\r\n0rVYcpZYlI0zcFK3zLYHToVEV/D7RATKxk4SEznvUeixN4t7XbhmMfDSzNKg\r\noxSaXOtUForoWR0AGr6tZoTrVwvnVg6g3ShJZGrIUtS+JzRo0KA6ZgkVLZ8s\r\nHRfU8g17HDA5rsJ6FXSzSYKXkRReSoGE5ZaERg6YEKDywt3DpVD0e6CMwolV\r\ntY4NJJ393hC8XrpMa/h7fTL8k7CpDSQZ6FrNgivAo7+26DF7evhMnQ3crNqF\r\nnxPCGESdYjC8gMU2QEJw3sTbCK1Hkm+eBSDj3ny0Bp0yA5P2wsHDJBVOTWYw\r\njrduRL5YgAWXQLnZM8yF5gGZCq1SE+eDbGp4Oo5B2KoMpuvs1RP/3PPCkFwk\r\nm2RWpQR9CwlSc6EaBFCHp7utCATU2EcCR+8=\r\n=QgDe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2aa8050b4.0","@material/rtl":"15.0.0-canary.2aa8050b4.0","@material/base":"15.0.0-canary.2aa8050b4.0","@material/list":"15.0.0-canary.2aa8050b4.0","@material/shape":"15.0.0-canary.2aa8050b4.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/ripple":"15.0.0-canary.2aa8050b4.0","@material/animation":"15.0.0-canary.2aa8050b4.0","@material/elevation":"15.0.0-canary.2aa8050b4.0","@material/typography":"15.0.0-canary.2aa8050b4.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.2aa8050b4.0_1669662806767_0.6833475672510507","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/drawer","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.323904a9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d471d41c22c3be7c6179a3bff6d989ca58447911","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.323904a9f.0.tgz","fileCount":47,"integrity":"sha512-lWaqTmWh5oZOM6PWjaZ10P0SuUIx0ZW1pd8N21SDYv2W7M+3FtAuBYhSgbBgFBvZhvUHHRaRSzpJfaZKzob9dg==","signatures":[{"sig":"MEUCIQCFVRSI+v4s3RT5HSrTHts1P9aQvLjFg5P4vevATODagwIgJ33vKcu5B2Ijz2bYtDZQ/LaEnenYvGcnbqI/DxMhMEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhibVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuxQ//Xqb/hurjwP9b2wTgvQaM2m4WN4JqDsNN0fcEJjtrjQJHv2uq\r\n/Aq6kXiU/ZdGGiTTqamVS+GaGUwXier/8pPMnzaWoH0fzEuKstZql6+2urju\r\n0A/Gmr/0pZdi4zlCbsMG504G68QsqXNAvTf9wCJN2AxpcYFJslYiPC8/Lw6f\r\nQM47A0AQL1AuUSj2PwK97gHD/I10zwGsiRXxHQ1HP3kC08Hgl96OtOM/XqCO\r\ns2yqtNpoWBro4zYP31gnAHunVFXGf4fFrc6zO0rY6Fbg4a7lksKGdio6OPBb\r\nNmRJ2q9mc0c+nDWKFFhx1WwZBDB56NwDuxyiOg0JMUyrNMLiXXjmNcsGWFe1\r\nJag6aKAltF8onm3xZXAPyKFEn+tH0Tujlx3+Xh9JgZNBS0ZG2ndKnMLaqQtf\r\n/+OqL1/5Bn8zqE4kpoZ+8tIAIhzQ+U8koDdzDusUzddWimAAwjP78i6jJj5d\r\ngD4DzWb162G8XKEGmCDJ2TjtDP2Q4avv/TMrr4T0qJ14RqEpCcWgn5zQjEaG\r\nkJCzDdE0hrXRaC/E448DhYy4FbY+IAMbnisf/7rYA5ITCpXcJ2Xa0MBoqN3E\r\nILzPmqHzZxz62Bw2HQ/O92ik8MvOf3VyBum4KT2Hb1qR6/kLxgCkD6071oHZ\r\nI30+1mPsnU7+Rhl20tttESL3DDaEblZ7UAs=\r\n=EWoq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.323904a9f.0","@material/rtl":"15.0.0-canary.323904a9f.0","@material/base":"15.0.0-canary.323904a9f.0","@material/list":"15.0.0-canary.323904a9f.0","@material/shape":"15.0.0-canary.323904a9f.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/ripple":"15.0.0-canary.323904a9f.0","@material/animation":"15.0.0-canary.323904a9f.0","@material/elevation":"15.0.0-canary.323904a9f.0","@material/typography":"15.0.0-canary.323904a9f.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.323904a9f.0_1669736149039_0.7971045127185197","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/drawer","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.168a629a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11b837768d3304d21b9d0afc5de12341dc4933cd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.168a629a4.0.tgz","fileCount":47,"integrity":"sha512-bR3XMmA5pExFRK7e3pDYBqdP5O8vhyM0rZ8k5vi1VWU1S3lvsl6wtnPd1Q9BcV4phkegtapnD0F9Ms4RK3p1kQ==","signatures":[{"sig":"MEYCIQCORR8MKk2V3hMGPWBsaVF1cAfv0xsm7twId/tD6tjCgAIhAODIzl5Go7zW1YwUBBeQ5Pv1b4Q1jKWnVENZTKtILF7D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjhwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmootQ/+PJZIYaL7FWLzefK9lBlyp2AKgY62MdinlAXTVyzSya7xORHH\r\nxpbryLnNeTyENJC/xG3EbIY0COAKK65B1l9ChH1ecScwT+sturBzCq7151NX\r\nUqQmpO/WuLQAfENyJolVBjG6iZoH2ML7iZ72tvaJlWk9NjkANqEwuieeYZ2q\r\nKDE9w9IWSvuIiqv8T258g9XqnDLHoOvVwnhia9g8XdIhe6ZGLl6sh0UjBhPw\r\nnknMz4aQvKXMxjRY0xkotx3+QzKb3BJmWR5EPiRMQcW46iPyNLTrQcqVTvIt\r\ncyxY8k4XAK7XkeSqW6UqvMGa3sFp+Ci/pXzMQNcEyQHhg/y1iQc+kZJ6cW25\r\nSJY6wOG0vLhuWz4U/S2wJLoFoUaT+6/zqdE5FMiHV1Bk1sTY3br/F5fpQmwz\r\nKj1jr7ISv+cf40AHIojMtgHz8OVlk/iM5u2Sko1OLuhJjzIAIZbaxrWQIWIq\r\nM3FmmlYbtWj5jrgwoQSVtL/Inh6+58qed1tvFRe0fRHIks7iS+zmzuVnfWdP\r\n+S+wNfRicXmnM7R33dS7ZHSaVRjTmTmLD7RIfOGDJr9hda3q0V7dW132e/Sk\r\nRZZ1AtFDv8jgCruP5k70+l9q1XO9uk0PzvmdgAuBE9ql7nDKY1tOU+JotD+t\r\nyCH8j2KkQfCRRKvxaywBJGe8QKJ7eztgjZU=\r\n=rop6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.168a629a4.0","@material/rtl":"15.0.0-canary.168a629a4.0","@material/base":"15.0.0-canary.168a629a4.0","@material/list":"15.0.0-canary.168a629a4.0","@material/shape":"15.0.0-canary.168a629a4.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/ripple":"15.0.0-canary.168a629a4.0","@material/animation":"15.0.0-canary.168a629a4.0","@material/elevation":"15.0.0-canary.168a629a4.0","@material/typography":"15.0.0-canary.168a629a4.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.168a629a4.0_1669740656634_0.5574677445537588","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/drawer","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.65c411674.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ceb4c0bbc75ff530ee648343c990be302de01cd1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.65c411674.0.tgz","fileCount":47,"integrity":"sha512-OMmHJ927C/EGpDTIfeOmkbJxyDOKXzrII8iuET5lSFjwYRC4KTybJVlOMHOj9cEDIKBBkYQw8XbRG8qAVZoTNA==","signatures":[{"sig":"MEUCIDsp5WzrB5G4LTRR42a+z4zOF0bs/wodjVJgqHtEmW3EAiEA/1k3B4G/hszrRGzmuR90UaZnAD205z+3Bc0UlfgZA6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkQRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozAQ//UklLrNE7cA2/yf19APmkflgIfzpckBoPntwjPOWST/Hnq0hv\r\nqAFhl1iVGrk5ZASuE/q4iqnJSJ74uTtqIKvxZD/F+phnlHrLVvFu6zG8B9oK\r\nEQRQEY6fg0W4HOuHF8qH5IwtGITc3x6iFpi5WYaihoq8SKY6ih59wTItkxJC\r\nA1u+VN0k+dTwdoeOYSaf+WzWlQsz0AQBoMLUbVJN0oFmBSpB+btQgYQ9txAJ\r\nPUk6wPv6BxYsq636QOXUTCikclCRC6KyrwHD7U7tOUtLAaAEPelLZGp0fdgB\r\nThtFTKS3v+JVEeesmylK+kr4uumKgricto43ekWD6UkOXl8c8YnfdbXw0kQ4\r\nr+fbaGkQuFl5kFfHSuy0g4TujZxham5wXBFMh7nAIk6uT5XoZAweQLcHpb4y\r\niAvD44SJ/ue0TGBCdxT6GzajlVri0eFFuCVR/WUAFmzylJn6X2vCZLhmDkRM\r\nHlq1bwLhXE/jODPREe2cnBY/0W710aHbcgnVhmOiCsJW5bMYCuO4s38hpjsH\r\nsTOgBy1E/JSToGy+zBvzd2FY8Bi0nm4lWn7bsSv74EdzV3I2XxOXHwadC09H\r\nJBtqwFetqMsFyNsqnPbWErBdQV1OAcRYY8rmOFcId6G2gZThNs1cUnMwH7ft\r\nNGVfefPxU57D7ZC0i+FVf/91Ba12Rba1TLE=\r\n=hHLZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c411674.0","@material/rtl":"15.0.0-canary.65c411674.0","@material/base":"15.0.0-canary.65c411674.0","@material/list":"15.0.0-canary.65c411674.0","@material/shape":"15.0.0-canary.65c411674.0","@material/theme":"15.0.0-canary.65c411674.0","@material/ripple":"15.0.0-canary.65c411674.0","@material/animation":"15.0.0-canary.65c411674.0","@material/elevation":"15.0.0-canary.65c411674.0","@material/typography":"15.0.0-canary.65c411674.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.65c411674.0_1669743632996_0.015919552030959405","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/drawer","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a86d36fd2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c41fa501e733cc37fca0561cd2955b6a1c2cf273","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a86d36fd2.0.tgz","fileCount":47,"integrity":"sha512-k5Fhq30a0BFI3Lxfcs2rYf2o8EO+JfsYzNngsQ09CNu9Cao06frcZ1OrCDD+lHm0fHdohpm3KjTJ7qVnxSY6+g==","signatures":[{"sig":"MEUCIEX804IJAGkcK0CPJ2qLsjezpNSTWK5BTricqHHBTCFJAiEArRfetCSZHwcPYYyzutvyu7L7m5Oa4fX0f2HFCAkCt7A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrzhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqahhAAipGg/BTB8ctTrwBAuMOXyAkSaCeQ6I2K04/hkcTqapO2Pb+f\r\ngUBhMyQBtrVXQvRyjblmH+DABhsL4H0iULD8Zsx/Al1RaYvjFnQdcdq0ipid\r\ngw5mfP8Pgt2pfaUSBWdMubsarDU1vD8E7aRxBzdXETRD5M+avHDCyD1LkIbG\r\nMuEkpLb2dDJgVdKERxGivtlD5+17oa+TP/0bsfIulWIf167yGvQ+qkdJxMb8\r\njF9RlSel8AdKIaJih1RpDbevjd+Pio96AZN6bgBgVGi5/68N+P2CgzNRJTra\r\ngUFkLO6F+LRYcY9sHdBlql4Ozx3zSr75FqBg3PMcGESUJPcuBe0vGNUVogv0\r\ne1DjVlGhsTveDl3wtokuY1xFE/WNVI956pvnVWjJEMTikpIyU9hYDWPYss1+\r\nnUcdZW+ByoHIUlo6wrET8s9xI/Wk5Zzch2kzkDcsn5dY6tW6pwv4SuHtHVM9\r\n/ypcpmOUgTB6+ekFtXd8UaG3USsJ4AMEgARUcSWzRaFy1Tm4IjCJ3W5Rt4Qr\r\nYWoTjx/n6aUVIxkuCxM4epeCeEb3rD3NzzhvAIJdcYOTBw6+MamiptdgKY6N\r\ngb+IxLyaTNJbsivpZfjyUvYwD/j0EYBPs2CGpb+e7L2TGSGcwN0aJnSsB795\r\n19T8arxtYMR3lx/+8ukcDUXFh3cCgkIqoQs=\r\n=wT9N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a86d36fd2.0","@material/rtl":"15.0.0-canary.a86d36fd2.0","@material/base":"15.0.0-canary.a86d36fd2.0","@material/list":"15.0.0-canary.a86d36fd2.0","@material/shape":"15.0.0-canary.a86d36fd2.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/ripple":"15.0.0-canary.a86d36fd2.0","@material/animation":"15.0.0-canary.a86d36fd2.0","@material/elevation":"15.0.0-canary.a86d36fd2.0","@material/typography":"15.0.0-canary.a86d36fd2.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a86d36fd2.0_1669774560845_0.41052921421038757","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/drawer","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.3a1f46c66.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51aa64ff09eed3b6ace0ad96680dff959194b905","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.3a1f46c66.0.tgz","fileCount":47,"integrity":"sha512-Jp4aoUoSpOAS62Hrn10hz0rkiEOYmqKpICDoI1HZghxjAq2CFa9aY2wteFQFFBuf2+OQCi0zNYoj+AdWg29UzA==","signatures":[{"sig":"MEUCIQDeHXhwhI4PmyWWRotBJrXqA13f4SRrSmEmRcgWSQbIFQIgdHAgD7vjaysn4FyBUQP5RaN2bUR7nvFUiYvqurdvLKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0gCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUEQ//cpJmq4KuZf3lSWodqtn8OdIDDASkzZanr33VkGZ/Z/EzU6LL\r\n+XfdfgUDdikmlR9TENNwFFke76fwHXce4MxRZhaSrobH+vIeljQBSsZ1vVuR\r\ngEgiiQMH94XzSMEsGJ8U7IIh1LQtWmFi35cy50rTQ7CYh0vE239hENF7WTEN\r\nLwcBWdhmfLezYIe4XhP+rUYYjF3twKZklYZ/VZNevbIXB4ZMA+ibzJ94HR/s\r\nZz3rfnIpvc7GMYG7FAhcajp4N06i2zujUTDrRowasPYJCzTNIIJdwBGL+Bqk\r\n23nzphwKY5MWXEiT+VHs6QvBQv7X7H416OlWOiBTWeM6U+Tsy/OG/80vg5UQ\r\n7KLS8ajn+f4WYCuixu1uhGwqAIw5IMOS+L2PZlWeJLKpB29vIuUJUKHR2APr\r\n9Emmx3Tc5m6MM4EXgQGVRmsSH5Kly4MWktK2UEUwjzHHLDULYPB+xrbZuNxA\r\na6JPXrQvqoKSgbJDHRJgCR091Z0xfB91WwDA/z+3Uw1Cx7jYBwBH171ci6mC\r\nZyqDfnJhhVdG4YDYCrTID0SBOR4AbEVprco9fyLhbzrkHXwnsMmwV+hmqqmL\r\nUio7ZpyVIYUI/A4OQpXZ5id2tZhj5RBByOy2QMVfrTls4lBiJ/1ozOKDIkz8\r\nkcJ7eQUE6wcNCSIm3RtnYTg8BbPNor3H1qk=\r\n=Th/9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a1f46c66.0","@material/rtl":"15.0.0-canary.3a1f46c66.0","@material/base":"15.0.0-canary.3a1f46c66.0","@material/list":"15.0.0-canary.3a1f46c66.0","@material/shape":"15.0.0-canary.3a1f46c66.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/ripple":"15.0.0-canary.3a1f46c66.0","@material/animation":"15.0.0-canary.3a1f46c66.0","@material/elevation":"15.0.0-canary.3a1f46c66.0","@material/typography":"15.0.0-canary.3a1f46c66.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.3a1f46c66.0_1669810177872_0.7851219308593549","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/drawer","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.32d8a9648.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07b272c60d02efb5a499e300478261d5af0e96c4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.32d8a9648.0.tgz","fileCount":47,"integrity":"sha512-se9mIuoMWuJ0kDXzo0SJ79Ka2/7wdFUR3dfgtYHIW6gx325KIS2NYuJsUDoOW04G0Eas1n2aaH5Yn2Ig5z5sGg==","signatures":[{"sig":"MEUCIELBZtFHA2+Vyk5O0AxVIh+Ugd2XjVRzPTZKExVL6Dj1AiEA+SoLDcROzrq9cAOiNwq5IREOLAXvKjTOvtrXTCLYG0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOTbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMyw//VceGeaRiuX+2PC35PoT5KuNaTLTKKSg4HCQYrSGWCAbBANxg\r\nnddt8pNdey1mqqBdi6p9sn4Gjj/UIxHIzs1EkRhLYt1sQpjjPqGYfymqFHG2\r\nAa5XyiFQ4T9uJ+hZEZ0VMrKt1zbIj/Pn9vbp1ulHagWeBrAKqgdsDpPIQr4u\r\ne8LBeYURRd7Uc3vVff95eFcTYPCUh1MKOhSda89mwzh4ROJ3AoJk/NS5FExk\r\n9FM8mppFvjgkCmfcMF+RWfQRhrURKhrzWtrhI1ftY745QAANyVUbxVPRMaJ/\r\nhP2jlNKuu61HrFyy0elZ3nafoTtXpgOZtQuqBHbU3aOreZo/JgLQ9hPfgP30\r\nx/HVTrU4i2IicFfVN9xngLcK+MN40nidEot92J8LcZu3ZZ4D8W3FhuB/6ozB\r\nY819SJuex87Z64YoLfzlLP3yc+6oPcepLCCFeK6LHup3bCTuRykFOUv/hbTI\r\nmorFMRlBWTZpynoA8n4cnnfEo4fB+/PzDFWkTgkU2db4Myk4os8aWb+0359R\r\nZNwUKoXmXrSIPH0NkxQebVtGZyswPZsk+FecDkJpFQn/Ri7QuLha8KQlyR/G\r\nWaJSD0r2XGZriD2ySKLlC793M4rPdXa92C/bmzo8ORIuUYdZQu1IZv1Mhftv\r\nGdXDhUMI553HOsNjKjb/BB48PS8251UDETU=\r\n=vZxl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.32d8a9648.0","@material/rtl":"15.0.0-canary.32d8a9648.0","@material/base":"15.0.0-canary.32d8a9648.0","@material/list":"15.0.0-canary.32d8a9648.0","@material/shape":"15.0.0-canary.32d8a9648.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/ripple":"15.0.0-canary.32d8a9648.0","@material/animation":"15.0.0-canary.32d8a9648.0","@material/elevation":"15.0.0-canary.32d8a9648.0","@material/typography":"15.0.0-canary.32d8a9648.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.32d8a9648.0_1669915867245_0.4024999008366257","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/drawer","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.03618ab70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90b7da21467d10d1bed00851f9673b9848fe6972","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.03618ab70.0.tgz","fileCount":47,"integrity":"sha512-N+vfSQkJS+231cMrdyy9g1C1tf7js7bq7E542KhPprqXjokJjjzRjn97OcwZkhJOVqge0Pr/9vj2ZeNsb0dnow==","signatures":[{"sig":"MEUCIAmewHOqfoOM0vQJwWy3gbBG1nl91g47klbOdGeygMlgAiEAkF1smgQrWJRkHIJ5+/6vE3VM4VSNBQ2NLKPtFDkpkAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRTqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRnQ//bOTofPYmvlWayXlfS8i8PeiIQJsbdWX0UPFCMfyBGWKT+hFx\r\nizzdi2VymjOMLkFDPWX5P07i+zFUhlnYsh0SnBBPzV+wLY1intdNzFd9vN6E\r\nBb2VuMdF2iJtjbomjhOuda7R4yZhvN9IkzWYykQ2AGcJBH+MEyVSf96c+fyP\r\nHttyj/XYn6b9waOdbUvIP98UuZWk8wWVNUkHhMogOh/LTaKVuLOpGoOh6Fkb\r\nsv/raJLUimcHrsLl8jCRDJaaI/OEP66uvui0kjxs8S6pKaPYN4kiElzDXKVM\r\nbGXARVgUIqGpnVUc2BTRMNy8VMFuaNpIF5FLA8p7KutYtGB9Kfz+uLwOQVUj\r\nI/9CSHq+jMgnWqmYoEzPZxOsQSj3dagOpTaisCRUB5p4eEBr2kWS7PgFap7R\r\nolVGAb4yJL0stYXYZkRSC7hc8oiW2+s+7kMzTAhzVaiO232WTLZaZ8RN3Rxn\r\nuR6FSy9Tc7GoS+/ry2fX9zDN46/LG/zYKutRiqZIE51bdUBPr/+7KtSCuoK8\r\n8TSKoq8Rlh+IVm09AQDWckUBOm7fw4pZCnFTcfu1VcsjI3claEpjs7TVo98l\r\nSWtT1AmNGvqh34lTuo/aeli0wstdu3dFf2awFlteXKMtbu5TiCgq5H1X3iBZ\r\n/L6U6iM9dSNOsnSgC2IIe4PvzcVcD7jpzws=\r\n=+gAz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.03618ab70.0","@material/rtl":"15.0.0-canary.03618ab70.0","@material/base":"15.0.0-canary.03618ab70.0","@material/list":"15.0.0-canary.03618ab70.0","@material/shape":"15.0.0-canary.03618ab70.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/ripple":"15.0.0-canary.03618ab70.0","@material/animation":"15.0.0-canary.03618ab70.0","@material/elevation":"15.0.0-canary.03618ab70.0","@material/typography":"15.0.0-canary.03618ab70.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.03618ab70.0_1669928170487_0.1366214990963761","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/drawer","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.68aaed940.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62247ce783af5c956496947cbc3347ca9b0cfde0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.68aaed940.0.tgz","fileCount":47,"integrity":"sha512-3cBEd0owUTe0wNo8/NkWMfK3zdg3Qd6i8FC9dnyN0gzsh/GGwuNvd99QD4Zjx60m/mcLuBFLEwcTigG4sSk7gg==","signatures":[{"sig":"MEQCIHTI6fU5Cv6xmgy/bXB/w89gnV7npftOtXILqEXvDK+YAiABgCJUlSrOE9iElskWb1K2txs5baFdQ0/rbGa1SIMAbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRvpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquUQ//WfhVfc59ryL+4WqAOvY0M4xraFjpWSpFibwcbQt6nc+iwCHg\r\n1xRaqteCdJzCMYVtpAUmF/peTiWyZYr5mMipFDLDbCwSoQSAstcbNumKSf7l\r\not3jCYyAwdOnsHQpVHK0LoVhWIFEEsOKUqDyvObJ0SRlPH57a19Tm/gyTKl/\r\nejkQ2h+G4IreASDBHuPY7UwQtAw6Mn4TsQkP2cY/wxaRDl3PftAQC9AhITU+\r\nJmnDssow5aiszjXtgYMurKRxkhyt4+ED9TbCWQVxNlfjEgOBHWazroldIOLx\r\nA/iB0W0KyhVUXOajQNZ2VzNbVcpfG4dUAJ8yWyhyWmNa49gT24Zg14/Kc7Eb\r\ndkdZULV044UdZTKcsCBaqamIHh7vUUEZhI0dXHi1zZptoVWQSG8oTCNLCP/8\r\nsnSq4VmGx4RzJRHq7PNJokkcfeC1uRC2EesM5PWg+yWSqq5vVXq/E6tnJkk1\r\nIEs4HZx9A+Y/7p8PH6QVHAZyIPlvLDW67VeCyym6RGOBLHV0HZ4EAjawRciT\r\n9P6EpcPqnvTUm0YjeVzRTweyJPxrhgnWPdl7mSgTTewmanBByWMJ+pVKunWL\r\nN9jLZgVpBqfcVxPVbZJkjTdxnOxG+jFFvhntgStJWgMvbmH3hYfLEJLy2PXX\r\nYBwOf0AMUBC6/EtJ5/YKRvB2aAwR+KQl5KY=\r\n=gt8p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68aaed940.0","@material/rtl":"15.0.0-canary.68aaed940.0","@material/base":"15.0.0-canary.68aaed940.0","@material/list":"15.0.0-canary.68aaed940.0","@material/shape":"15.0.0-canary.68aaed940.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/ripple":"15.0.0-canary.68aaed940.0","@material/animation":"15.0.0-canary.68aaed940.0","@material/elevation":"15.0.0-canary.68aaed940.0","@material/typography":"15.0.0-canary.68aaed940.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.68aaed940.0_1669929961194_0.9850222411775089","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/drawer","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.f0a0bbc75.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7df7cd416ac7b7e9abc29f92af4740c2a92b6ba8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":47,"integrity":"sha512-LiDgRtR8hnNDghb7pnlhjDkRWl2+O1VzYeIIs0JRS9gntYVFSfbApCFHN7or/bhrBr2CnO1PdIt8w8COCXMPcA==","signatures":[{"sig":"MEYCIQC9b3btCq3Hn8AGlMWALioKQUyzVTNETrwqVMte6Nyp3AIhAJRqqqizw4F8xSJlrzXT6K5fDorman0dRs86Y+fL1Vse","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib9qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoY4g/+LCzNJIMWIy7ctENqIKu8+TcuxWSR0uCwaSRl0Z8hlA5phvR0\r\nLd/DuUMWwmuzlWt+Zg9xxaNH59qITgGo11qX1K3byfOYPKeGudzVv8LBLeoA\r\nEeD8kvSO98rl7d10XaH6L3CU6XDkFyG8ldOxb0jYD+rjZ0jHu2MsHsjI0lMB\r\no3BloX0pXW2JYhEaFSo5DI1c6RLLtdIbmKfDnkOa6K9oouN0JaCYziZjS8ML\r\nZbFE9X8ZnMMsPs7bmkvOIzYy7nCY33hnmpK46ccKFYDmOoU3vcKppY57dQ30\r\n0UFSxA1W/ly3qSe160JkebtEFUCIUo9pGQZFwn7Zmsfr+8BYvrD9WO9UsRtW\r\nucACZBkBe+8/CF2O5RCkKibU9qmukxnh5pphKeXg74e4E1hZXfHuFx6UjSku\r\n8/4deZlnhCyML4BPINv+/yxweDLZxCf8eYFP+BAZA6dQB83cwjiSrJRd4Mkj\r\nNkDEyxxE4b1rTIo833YPc62QKd99WATpziS+ujZW+uOLBTJC7E11aqkP5uWM\r\n/N1xkbZ8tHa24n1eghTfgii737WXEQkhHJu1nXf9Hq8jeBqIkRzbcIZ2kZre\r\naGbujge0qo/SRgxw7Lxi+W+k6Pwgqi9o2VdjzkLBqAfrNccaVlNzmUwp6jxI\r\nhR5ngKn4phmmp5FD9uoW6Wk9ksfNXv/cYsM=\r\n=zPNP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f0a0bbc75.0","@material/rtl":"15.0.0-canary.f0a0bbc75.0","@material/base":"15.0.0-canary.f0a0bbc75.0","@material/list":"15.0.0-canary.f0a0bbc75.0","@material/shape":"15.0.0-canary.f0a0bbc75.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/ripple":"15.0.0-canary.f0a0bbc75.0","@material/animation":"15.0.0-canary.f0a0bbc75.0","@material/elevation":"15.0.0-canary.f0a0bbc75.0","@material/typography":"15.0.0-canary.f0a0bbc75.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.f0a0bbc75.0_1669971818227_0.08404154821506671","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/drawer","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.dd99c8764.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"701dd0e69ec6e1788c19288bb54d8f057fa24a1a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.dd99c8764.0.tgz","fileCount":47,"integrity":"sha512-my6TKMnPNXuh1bgFWAdmfXS+oyeI6ZRHDAMJ9P5owhDYY8xGyFazP7cXLbZS4jgjPl7HqblufPuwEtJvogZpJA==","signatures":[{"sig":"MEQCIDpcYAbYoGQp1YOdzMYdx2elQUk6RHDodC7lvviz9J8tAiA4Ema3JAiMvbEYHAjhhpiRL6rh7I4krPsUXf1izF7ujw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigWHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2HRAAlAGdxuq3yf8h4tWfDunUdpHVlmU9t2MkD+JvMdrHzqQDbQrz\r\n+kod+0LNrX3cATwRewtIXHVCixY8Nojtyo2ymetnnWmaRZe+p+Z0uEh5zHm3\r\n4+tSMhpR4n9npcaM4wr/EwLkJyL0ydez8eUhzqam6JfVJaYzNFzlG9KLj/49\r\nZs9S12VGY+1nD3ORtOnjPP9mmHSn+LfcCmZZLzKYbgk+YjoyCEohaAMyjgiI\r\n4++BpBQvFAjRC3cIgO7HenA3ywP5RPZNBxTeQ6s4GakIZjAnwqO4UrPtzAlt\r\npd85sryvJqARqJc6wM9oem72MEKMeOdahqsCkNHGDkfARX/JjMHnVVeYznz7\r\nw2e9jLmxTTs8US2E5BKVKBPXNgVy5suHdGXoa2tTHKyi5c3AZuX5IclhJUIY\r\nKIqDEJFsOM/AlD+stdSxWDxdgJoqu8HBBGMiLMX5+PP1jyKlaG9AGE43D6fT\r\nHO7jIeuu0MM72ESQCnOPgXAYZwpKG+TvpBUpZWqWn5Cj0reRzxMPQXdi0mbX\r\nrzAtnpEhSEhXD0AORjy43g8KgJy/8wqzrcXjtIAdFb+jwkMisiSYAa/WhL19\r\njNPaBqLOkYfPzc1yq++4Hb72H2a3zk8pCD7z5qlMjsOh0HmSbk5t+mgWeuko\r\n5J2+WNLyrVdiapqbPqmsvF3kA71n1w1EBhI=\r\n=NC3M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dd99c8764.0","@material/rtl":"15.0.0-canary.dd99c8764.0","@material/base":"15.0.0-canary.dd99c8764.0","@material/list":"15.0.0-canary.dd99c8764.0","@material/shape":"15.0.0-canary.dd99c8764.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/ripple":"15.0.0-canary.dd99c8764.0","@material/animation":"15.0.0-canary.dd99c8764.0","@material/elevation":"15.0.0-canary.dd99c8764.0","@material/typography":"15.0.0-canary.dd99c8764.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.dd99c8764.0_1669989766825_0.8534442543408001","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/drawer","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.fabdcca3a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1149dd281e2933b971209f079aa80461084d0c23","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.fabdcca3a.0.tgz","fileCount":47,"integrity":"sha512-bBhW7lIcSO/dJYVyL4y069oj1gVRSMTqRow0e1B/ScnX12V5FzW/QVQMOe0+h4kuD61K5WGcMev4juQuZ3TRaw==","signatures":[{"sig":"MEQCIBS0odf6sOpXik+20M+ZT4dyY89+2jra8dYkxseDqknSAiB7ZLTBuMM7VkDxlpyIvSO0uWEAddexihzJ0FVhsC5Sqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihT3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqIg//UvnaFJNhH3h+KXbnj1xaEIP8sV8puzF2gxUfD40jB/89yZMl\r\nE4JqUADkbnUQBlHyxnpsrCPde7ibYvKpsMP3katH8iLF7ffCTxzH9dUWpttU\r\nMJ685a2S6byubzQeWT5dERRjhKHv/JON04410iaGF2lmBjqVn5OmDaXSBcjz\r\nJuCEOmWbnbm8nv9phRuBy4xZ9Xrim7WiXblRJ/3cCnRG5Ji7rX3NSf+RoP7h\r\nZHyranoJgNZx5O4lHJBA7RN3tdzLJWBVFI+QjWQB9LwJ5cW9eZtqUb+jOnIk\r\n5toA80wVALxHLpa2bLJXp3IIUEQzwUARpqgDhBeh9p6nQxvq0RPnRDoG1VCH\r\nlLeGZtSpl/GYlifeGislUfDIlrsuNGil/DofUQX4bhpsIdV0CNt37dS09JgU\r\n22zdGs1XaCvXcIiiMxjV5JiF3WxxiYP0/QksTaLI1NkLGYJEzt4uuLivKy5b\r\naYU08+QT42JTs1Xb3wiGRnSXdC60d0oqfpJy2kAJURuRP0aBjoyw9Rvr1jAI\r\n/DpoLh64u9h9CfTnKbPBodVJjNaNWWMU65a+QKyg0km1NYQtnoxlTXPps90F\r\nDYDQq2PjfY0UnN+g1TrIX8SDhkZ4E4qt69XJu2XadtxFkKKPF/v80CsCoaUo\r\nu0phLY3NwrNn0z3xLmW55pNx/O+tKfteIE4=\r\n=jdw1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fabdcca3a.0","@material/rtl":"15.0.0-canary.fabdcca3a.0","@material/base":"15.0.0-canary.fabdcca3a.0","@material/list":"15.0.0-canary.fabdcca3a.0","@material/shape":"15.0.0-canary.fabdcca3a.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/ripple":"15.0.0-canary.fabdcca3a.0","@material/animation":"15.0.0-canary.fabdcca3a.0","@material/elevation":"15.0.0-canary.fabdcca3a.0","@material/typography":"15.0.0-canary.fabdcca3a.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.fabdcca3a.0_1669993719616_0.2419666352440013","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/drawer","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.2d26722d2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2bdb2b01f8c4be9a5448fc8e9a628f738ae7991","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.2d26722d2.0.tgz","fileCount":47,"integrity":"sha512-GgZQ7gr51LOP4dwZ8xfs/lNGMJtCBaNDYxd4TuvHR9Y7A0QykOoBiW/Wnhwg2ZFKJwad3GoUPNZBMPMB/dNDAA==","signatures":[{"sig":"MEUCIQCgQOg1XO9u24FfWH+TgCCHSAUNYxshe9qxWtPIynq7EwIgckPMITR0RSlwTdkHF0768i+M5jiASVk9RGDlqC7Z7mc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiiepACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodYA//RI/T86oyME7xCG/4vXbhcQ5kF3TX7FVNYRPWxb1D2EbbDPJq\r\noL5UpWq2YdjjP0f+LuukUD4Xxcl/Dx+KwbjMLWqtsF9G/hJOqqoL1sch7VKf\r\nvk1m7OLHKfM1kx5CmE55l6yEx24sllb6ZRI6AGHh4k99rs0c1lSauAbh8Ndq\r\nQTPA6EiPnXP8egqGEVcC5h4SuejJB0sOvdPE1ct4NzpACysOS8/2iEDE9Hvg\r\nOfTiMnlrgKtcGeiewdLkkBcfPCkW0oIqrB7ZVOSgs48L1vBJtOBcjdP6Ccnf\r\nXrCAiYdk4R1A8F519qjbh666FDpqnanMv7tNosLAw62rWgkUbZ5M9sl7NYjW\r\nvRGS0ohD+SK0LPMZw1joDh3OWzxdQa4XCrUd2waWGnhJiJ5+HUql1hVEzayJ\r\nrMu5xS11vjEZ19ckxsF8hllIAijw0a7vA6mILFkjygfAeie5WQtaXOMp8Zyj\r\nO2aUYfq32PbFPt1iZhZwISU/XVQuHFVnPiyW+V+gTkLmFtO5lbjgUmc97QWC\r\nZ65rV6LLDZ0cjX/XnE2bplQp1ZqSPjqIN+iyXB2Z34dcNMCTr/weZlZRJjnS\r\nxPUzfw21xunCkSBKMmBBQ9HaXvZ44n5iq2UV48Jaz2tPn74kMCdSVcB3OM3i\r\nQItsn44jGQjCZI2UVApIwKJOBKYHqy72lbw=\r\n=/XUz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2d26722d2.0","@material/rtl":"15.0.0-canary.2d26722d2.0","@material/base":"15.0.0-canary.2d26722d2.0","@material/list":"15.0.0-canary.2d26722d2.0","@material/shape":"15.0.0-canary.2d26722d2.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/ripple":"15.0.0-canary.2d26722d2.0","@material/animation":"15.0.0-canary.2d26722d2.0","@material/elevation":"15.0.0-canary.2d26722d2.0","@material/typography":"15.0.0-canary.2d26722d2.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.2d26722d2.0_1669998505342_0.2967326610633769","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/drawer","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.eaa0c3a86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"830a5efeba07640e9641223394334f95c2a37a8b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":47,"integrity":"sha512-kW1/MlxisbeCgqO/2IwLFjF/rtL8mpSmIc1HZomF46wKysq2h1UfxY/voNsi2b69KLXP8B/yJtY79YFWl8f1eg==","signatures":[{"sig":"MEUCIHtVVbTgV/Ug4KceACLFMvTW0EHh6G6Ej3RI5X4OC+NAAiEAzuR8qKyL/JCxl1wClksHXduf+DKay+WDGiluX2czScU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijmEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTDw/9GRA7hWI+JMIujteVdhPNbjeUGchB1KM++GqFoDGFX5xJCYWw\r\nEaN01FhJTuf9D+MVAL56AYgcA+NDaUMATTHCbb0grEyZkQVbYpUGITn9z0r8\r\nG9OS7cgy5Ap+FxYZdk4VVzL9L5U7WsIwyK0H5B/csHa2vN/NZ/UB6iX0nuHQ\r\npR4s6o6WklA2nT/hMHqeK+Kg2r8PzAHM8gQwCEzNFbHctReh9nd80wMMQlty\r\n5FX2fe0n8MOV6I5gr3nFjL9uqPEszvpDO8JZrV78zmDHEJe1Jzul6zBrl9B7\r\nuqJXWB3innmSf83aOke1Ha6qP5ZDzle1crku6GVCYSNcec46gXN7wwSc5yy9\r\nLveLm7UeEBCtcxw50qeKXUgk/rcD2OhuLLpAWOn7/rUK1mAuoMJfQT9sYY0G\r\nzs7MFdyIEYrnw79IPiTvy1tDWc6KTqLcnbNmBwkigI2XBgFUTxLTZ9UzDxVi\r\n0omWJg3Alj5UdeInW4WFQ1o0kJB8RIFEMaiESWYwBIB8thmyH/jSIUD14sgT\r\ndI6h7SRYXKaVcBvPG+Msvu5nw5eLFy0gGI+1Qg1fYYJQU37Zuh/lkKpTXqGN\r\n8r/90pY3tSJvmtw09hqugDrUBnvwUPSyUEHybpAk+KrIZyCnwtT0wUi6wUaP\r\n3cyEfOEUKIVHvhuHr1eaclVK74lSWyftdzk=\r\n=d+nJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eaa0c3a86.0","@material/rtl":"15.0.0-canary.eaa0c3a86.0","@material/base":"15.0.0-canary.eaa0c3a86.0","@material/list":"15.0.0-canary.eaa0c3a86.0","@material/shape":"15.0.0-canary.eaa0c3a86.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/ripple":"15.0.0-canary.eaa0c3a86.0","@material/animation":"15.0.0-canary.eaa0c3a86.0","@material/elevation":"15.0.0-canary.eaa0c3a86.0","@material/typography":"15.0.0-canary.eaa0c3a86.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.eaa0c3a86.0_1670003076442_0.440109073665238","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/drawer","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.79a613bbd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73e855bb961f5ac8cd5daa6d2e9916f5a2d076f3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.79a613bbd.0.tgz","fileCount":47,"integrity":"sha512-PZJld19hcz/9ApgDeXi/QESyUNAblM2384F03qaK/pRUmTcXV5iSTjpPjDhkGOq0auwtJudS2m3+YJU7CypfPg==","signatures":[{"sig":"MEQCIG3eIXX6WD/9eRDZaUTMDTAdunSDUnuVdVOWcQUABeYLAiBChA4FAbuZFeMLfVOJLpG4mHtgxsd8fncTc/v5XLhRiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1FYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/+RAAk2jPOv1IplEDroPT8SV7h5kr260pGwGPzj0kG0sfzX32cY20\r\nSfa79eC4p41dbTddpVSF/uoVlmBboMrHtMBegs21l6FAs7T0Hxrv3RWoRCSC\r\nKAaNoXU0jrM2rdpgr6z6maarKkzClTU6UPP/IA5nx9A58rCfrE4THogMKmJC\r\ndwkFDmP+8XJSmj062VSlt/d6uTUC/VIwztqw0R/uusMVS7vddy6Iv5sUJcdd\r\nrWMT2csf9Sp5f6eY/54Cr1+3bSzep27kFY7Is2/qmi7B2VUROnox2Jss66xc\r\nrw9qTfgWPjcERmrZx1sPwFKEvgHuRZ5d7N8PAtPrRwmKcZnj4mS3icNpzJSp\r\nBHJ2FpsTs2lbkptdGmKrcRRQoXWHITS7AvgIDqqiho3hnYyNGpbJV5vo2jal\r\npAhamNA1fc9qkVR7n/l1y/NFPN2YOTUM3i/M/xaqM79e1SZs7IeMBHjQBCMR\r\nWJdc522DeoaC2s/3ZxYtxBBL6NBryS2pKfAw3HEi1b02tU5newmzMygH+dra\r\nmHcY39oC77JD15wiBkxqw/oBGXLpj009/PAbTg9Bzqc/TXGCvuOZ4uSgHfAe\r\nNIY5clSmxMk6t2Z4tf0RxIKSdQNB4Enpww5Z8BiRdBeI+p4VUia0BMIiW5Yh\r\nMm/OQnKyjuMieGPpYSjwzHc+5Q12+BwMtio=\r\n=7Nks\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79a613bbd.0","@material/rtl":"15.0.0-canary.79a613bbd.0","@material/base":"15.0.0-canary.79a613bbd.0","@material/list":"15.0.0-canary.79a613bbd.0","@material/shape":"15.0.0-canary.79a613bbd.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/ripple":"15.0.0-canary.79a613bbd.0","@material/animation":"15.0.0-canary.79a613bbd.0","@material/elevation":"15.0.0-canary.79a613bbd.0","@material/typography":"15.0.0-canary.79a613bbd.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.79a613bbd.0_1670336856174_0.5499459494619976","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/drawer","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.c871fe61e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b7e50843a9989b16d07bf38ceddfdee95cd15a8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.c871fe61e.0.tgz","fileCount":47,"integrity":"sha512-/h3a77ECkNF6W4q7WkOjR7ISDvSWyVi8iNwugZ+SF3zH5PVHy9cDS6We0kc94n0f8CNxmZ6JjJpfR8hm10BBPg==","signatures":[{"sig":"MEUCIQCvaH7rrrPmPC+16CEK3nMVkHE4RpOaVbOpSD0KXGHRXwIgcHczcpN4SgFJq3HJ4m/txBlgzMHzUjnQfgoucmUp3AA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEaCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+Jw//UOqtSt+PbwSBS7Wje/zbtAa8EX7x04h0oDZx1iDewgbouzIf\r\n933m2yYIi7/bSUMQ/wG9/QFiCPvcsagt5CehwtHCYLihIbgc+HAvEaOXCqKc\r\nRGfJf6rDDuPvkFWMkXsSb7HeIz+tduvmelRmEd681I9jkr5mhXCKRgoPfaI7\r\nzNHWo7Zo3FBWT1qdnAscgPg0aMuVhyNkbcGpVfbpnRGRVrEaUzVAh1e7NwVg\r\nJOHBbRNvZ130M4GnFyqW3vltkeiLMA27fQh/FboXiWs27YVytqb0336iOv0G\r\noXNk9FZwCRVOR/x2OEmJwAz/kMaRqL5s8P53vw2tndtFngQLHV+HouNwhNT2\r\n4l2bjOdePnc2ecMxgJtCW902IH07038fYXM4EJoheYEodGcYyrn4egbQVzEO\r\nmVoz6KY/hgGW6xRvcM1PGJtPMOAjk6zljz/UFv+NFaEEY8j5RMdKhEB5l3uI\r\ngK5n6wYCJ91+9eLu8cZdhXw6ulc5vgMnOqDhUSjs74JBwzFsWuqoaOoYReCA\r\nokZF2xSbDGr2g9/93UDMQVugqQwBkfjmPnjcDFYlFjuCI0QJMm9xxlbBEzBE\r\njjQ5RYjjCEwWKLKsaMqowoMVVXjSMUGCbUZr7uu1spqNTZsDkjtWUBNVVqCu\r\nt01RmyR5WfqfMPVdnmsoZjHv6f204BO4aAI=\r\n=FQlk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c871fe61e.0","@material/rtl":"15.0.0-canary.c871fe61e.0","@material/base":"15.0.0-canary.c871fe61e.0","@material/list":"15.0.0-canary.c871fe61e.0","@material/shape":"15.0.0-canary.c871fe61e.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/ripple":"15.0.0-canary.c871fe61e.0","@material/animation":"15.0.0-canary.c871fe61e.0","@material/elevation":"15.0.0-canary.c871fe61e.0","@material/typography":"15.0.0-canary.c871fe61e.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.c871fe61e.0_1670399618574_0.4755891596268298","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/drawer","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.9eaee7936.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecc7287914c66c4d7d02c1667c4f0eb015ea4de2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.9eaee7936.0.tgz","fileCount":47,"integrity":"sha512-i/cChO/uVUuojfrPoQjuZ0UVqEbMe4AssdLprg0GPVDa2IDW9j//w+x3zHnPgqBZuo/7rTCew1zVItcioH0Rbw==","signatures":[{"sig":"MEYCIQDkafxI8jsqVtEq9d6pddg7zMhfCqE42/DhEjEBrTs90QIhALb2GnXAJbv4W0YQ6nmsKlVcLrH+zIVnEImsClsp7/m2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPHrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqwbw/+PPuJv2mErRhLTiI+Frr+mtRVKlXcuy3tgTI4cfVV4/re17gA\r\nxXBkUCrslG9ipW9WKKuOBbEKuWDyWuQXqjWHCOMQM14Xx6u70ntbtP3NBx8F\r\n3phCTg0mgh0XjSosDDQQCF9A2qVc5YWoqKLD1SVi3cp4UtH3lYIFlkkpuKNB\r\ndy1drG2fLxaLe5OHREGMViN6XmM30y4XCcrmPK3F1o3dP90R6K8brpf7wdQ0\r\nq4CPDYdwF15TlQt0Jicq5heeh59WbWVEp3TlQBPfRLOtqjxWP2djYcHxMBe7\r\n8bwgfDIyKPwz2prrW+qmIO2QKdYVz2hinP/055xbJ9PGZu870fWPYX+LC8Xi\r\nwIQAS/MjORuHUU7DbQM8brWbTyae8vxLqnQGrIoiRV7V2UQYhbN8Ov/pZtjM\r\nFv+7WoApCXB/tYG7d1XxTUikQZXWTnQmxk3LI/ZEXdhlrMgUZ4xgqd7MLG3x\r\nB3HhQ2R00VkHoSBps8rjrnRbC/H+MRqyBluJkr2MrmvMAn102LEHkxtSTI0K\r\nd0hIp6GRzi/62KUbEVraBWzXv8eG2cBjDwpCwHTJ7EQNnx3D33WG7ilmu8Ll\r\nkNQxvYbI7Ubqybeb1MFzBKlw5vHVzD5bTlFHwApEogDm3oS6/n/7oSeB2xCk\r\ngcZwzxpt0gHkXKe4ugtcpZQC0kyFpYcaiKQ=\r\n=eG3D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9eaee7936.0","@material/rtl":"15.0.0-canary.9eaee7936.0","@material/base":"15.0.0-canary.9eaee7936.0","@material/list":"15.0.0-canary.9eaee7936.0","@material/shape":"15.0.0-canary.9eaee7936.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/ripple":"15.0.0-canary.9eaee7936.0","@material/animation":"15.0.0-canary.9eaee7936.0","@material/elevation":"15.0.0-canary.9eaee7936.0","@material/typography":"15.0.0-canary.9eaee7936.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.9eaee7936.0_1670443498817_0.09204663334038976","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/drawer","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.1d37bf601.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"185bc2875ee28da521be369079d10d1ce36dfd7d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.1d37bf601.0.tgz","fileCount":47,"integrity":"sha512-C8YuEZAt3IwZYbnx/1mkrTwagVvcXxe0/fXw8QfvMxWYkZ+olD8oA4CfhsWSJsH/PdMNAAt5fQyVy4Ln0TMgiA==","signatures":[{"sig":"MEUCIB0UO+N/btETQHWCjCQ7X30sJSK3bUorC05ivBp+XgxOAiEAg4FWs1gYGXrqf74uWiSVq8Pv+3jFdZRYi7bykM5A0IM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPrdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/1BAAmnWNGmigd3JUzVsIwWY3Y9YwletyIumMq4fDk2x2vEZRsmy+\r\nn9SXaNDvAoNHjbiRTBtso4JEkkI5H90EkB4pcPokzEdIpncNRzWNKKz6iHkV\r\nFJ7/IdewSkC2HZkfVkicj8U6jRPCOQaSGk7Zlpz8zS3wByRW8uibIV/CSgqw\r\ng0swE7cWxwrBZ8uPTnfEc9drmWc70ThjNyAp/B+kcteMbk54JFL9kg02fdaq\r\nGmVAwIbEKhdGTu2U7LDFyzOldPp1ajX65GnA4fxDKp51OvcCT4DyLSqlsy3g\r\nIwQ5WC/8PnBHgdCmd/iaPPX/RgYtDWBqpyWsld0vmxsD2iP6sTal4ene1AYS\r\nGEUDYqLfbRl1JaD2fEqaKwJtBaqqwdoHfPouzYO9onoWFIpxA2TkPMrUFpSr\r\n4DSVIZTjM/58obeW4Fk4I2vkorMx74P1tinAoU8MfJXsqJRAi5vbybA0v2rJ\r\n51/djTjzGvzXZA46cw4Mz7kEdVdflJEmcuVqUms4EcyGic0Y2Jfv/aPxdh32\r\nz+bc2dXDDUFV0UrZffT9e1saMVIPyrRHTsc33njeDs4ycTcr9ZmLxYATBQtL\r\nueCLKfPR7N3e9wvnJM1tZXCP4XOgwPCMmM5gbrV1J5DCsnIR1zjR+AmkfrSW\r\nZWz08wer4ImwVnQKn2FE9WguVZTezp2chEY=\r\n=FFrL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1d37bf601.0","@material/rtl":"15.0.0-canary.1d37bf601.0","@material/base":"15.0.0-canary.1d37bf601.0","@material/list":"15.0.0-canary.1d37bf601.0","@material/shape":"15.0.0-canary.1d37bf601.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/ripple":"15.0.0-canary.1d37bf601.0","@material/animation":"15.0.0-canary.1d37bf601.0","@material/elevation":"15.0.0-canary.1d37bf601.0","@material/typography":"15.0.0-canary.1d37bf601.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.1d37bf601.0_1670445789295_0.24113479076068312","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/drawer","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a5fe069d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88837a2883771fd812c8c277cb708cde4c35df4f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a5fe069d5.0.tgz","fileCount":47,"integrity":"sha512-iEYtUoSSTdrIpuxU1ZjvB3AIbgy8AC8ZSk3A1kSLogSy5As39BGoEL75JKcfGccaFJ6vhe/D2yibUbl9ShT2Jg==","signatures":[{"sig":"MEYCIQDTr94nVCMJI8TiUH5MQYg/HzphGjuH2LqSxPkwSZhBagIhAPz5ts7B2YZoAvuv3lgJvXSIZiYH6s0K1QYco6Jul652","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4J5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgJA/+LX6yHm2a+vDeIUVvhlxqhtGkCfH6/7iLpmoLEYlUhVod1E+I\r\najqORv/iobJ3gPuiPESQQRNEOTYJSP9j9zOaf+Xwipy7SIzOtJVT2GAzAzfI\r\n9ZpOcupNI/rM/bXlAd1y2Ce8wyM1QX7fWDI+KJnGIqbHZuJ1pPUMIN8jIdBk\r\nNYGwcpE4oYV5G9VNE7EDHgTQApc+7OtLWeDv/svXU1HrItqMnqpi0QrUFaC+\r\nftCJULep7vjfNjceE1ocuDdW2ERPDe5n3aIrtv7UulrHLADXvYnpV3o3du6f\r\nZj4gyOzOOvr32uhCZwT/3dFfTQso3EUA/ooUP+ddXtz7wmKLy5Y/zC022JxP\r\n9G8Foo5yyiiTtSo2j0oKTGImzWtk0GpLdslSJKqoxWkm6ShOfwRgj5dMqGNz\r\nshEdX0GZmf9CBhCX/swH1SB4EzYf6DAKME4oAybhB+NhfN35jsKk7/lbdjjc\r\nbdGozzNDZH+WLESE9N4Bfag3cEZLmQ6QtmoOOkPogLWpFeVUn2cCd0NY/YtA\r\nPLiPZkW5CjssHAhqAqjjctlLF/A4xhw3lRtb/dg19UHo5NIh6ZxPqPvD1ZW5\r\n8X9zdpiaopm/+SC3jFWeoC9WHzX30l+xY2l204Wj9w/7J3A2Vkfu3Xr5isvT\r\n2sHkaBZxRMrxQi4+SbvC35ra4edfpmvLjcU=\r\n=ugt3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a5fe069d5.0","@material/rtl":"15.0.0-canary.a5fe069d5.0","@material/base":"15.0.0-canary.a5fe069d5.0","@material/list":"15.0.0-canary.a5fe069d5.0","@material/shape":"15.0.0-canary.a5fe069d5.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/ripple":"15.0.0-canary.a5fe069d5.0","@material/animation":"15.0.0-canary.a5fe069d5.0","@material/elevation":"15.0.0-canary.a5fe069d5.0","@material/typography":"15.0.0-canary.a5fe069d5.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a5fe069d5.0_1670611577520_0.8746056958362385","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/drawer","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ce8b5326f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da01f2f98945174a45ee6717998e17816e7e9e21","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ce8b5326f.0.tgz","fileCount":47,"integrity":"sha512-uz90tlAdirIJ6/+t/byGA4pH4Mag1vs0X3LUL14+484amsvcPVxs2wnYgWCotuC8fxzBZt0LM17tQWZjrTgHSA==","signatures":[{"sig":"MEQCIGwC7VDVVPVr1v3/y/sAHlyw8TjFsWWuntw1rniwCRRMAiB5uRdIrkyxpBHujMUCvIqX552AUeRV2ek4RA0WS5t5/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8WVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+8RAAkBEcPjgq93uvngs8IaA/aAYj3w9Iri47gJ/GC92pr/VDKckK\r\nErqilB7ZUUhFrXGShfu1VvVS5TpwuqMklM3b8ZJzEEUrB112PFqKIV+HE5ZB\r\ngdMf3D1JlKZY728mk2R+u4mQ244Ep/EcPeialwjuhvpHlpb2DoE8GQ4XPeLx\r\nPqX1hFx/PIAmztDuib7ncpOZEwPl3RlHrKzytHe/NK5EYMr+11orex1ytE7w\r\ngLi9FQe0nkub+BaCidRPYGiBmeyMBV0MxmWsYg/FDzq3LJu3162yhC2HQUFB\r\nyvfjKptlpqz2NAqBpLziIwWU72pjqpr99RHaOrTnTpIWVJ1GSdPbUIJjgDzj\r\nl7/HXZt6/smMqJCsfC9wNioQgreF77hFzO4YAmnPyO9OzghjbVzvwFRfdQqn\r\n5yeOSNUspYrcGYH4rvggX43XaAPKIW5NxUP3NaOuZAev7YnbeJZ1cnK4Op9I\r\nCadUIE7Fnt04L/1dq24nNCP8reCuurrHuCZ/1p7ZpdRqK6H3HRIXBUduMFqc\r\nbvXAU0XBlIBGmh7CWH6BavU/x3D6nIYg7CuScL4g12jvcZOzguOpnaZiJvub\r\nm4PTGrMrO6Q3PkRjfc9kZZPOk7ySJQmZIH4EWEupor11XZRfY+ZneXrwfQUh\r\nIkz4rvQc5kf5MNFiEO4cU+56eQkhS1XYDPQ=\r\n=ssH9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce8b5326f.0","@material/rtl":"15.0.0-canary.ce8b5326f.0","@material/base":"15.0.0-canary.ce8b5326f.0","@material/list":"15.0.0-canary.ce8b5326f.0","@material/shape":"15.0.0-canary.ce8b5326f.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/ripple":"15.0.0-canary.ce8b5326f.0","@material/animation":"15.0.0-canary.ce8b5326f.0","@material/elevation":"15.0.0-canary.ce8b5326f.0","@material/typography":"15.0.0-canary.ce8b5326f.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ce8b5326f.0_1670628756994_0.4616224637050639","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/drawer","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.43f5323bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b3d79b1146db1f5ea64be08ec142aca37c1079a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.43f5323bc.0.tgz","fileCount":47,"integrity":"sha512-RyAxZPj7WgPAiJ0jFCuDnOwA4v5+9otCWE7cQL3QFGQT6pkDInaVEcXcMEA5+Zq7ku/qBrsmOwwGfwBMkmkXqQ==","signatures":[{"sig":"MEQCIFVIpPRb5NHmj6EQo3b39LICOcKf2A9AoS7oTjDvzbrrAiBIyMZazLot7wUJiUmWEq7nUnl8e5C6lHYgb53THUqq2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1tZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrB+hAAihzxEQF7UfAl5WPvV+JQgMjcAOO0UFoRjbsMZjj30R0u8EsZ\r\ntYJEWhMGNF6DdCnUWl5yJJxZg1XzbXoGxB0JqhSkThCQc9VsHIynkqi1EyjS\r\nVaNAtD9A0lFpGhOeNsTiI+LG0SS2vk7DcpDorxoda88ojeUIIejEIimORcRL\r\nS/TRMxhUceE70ERHbfJWDifCX0lRJ0py/H735N0oXWJzRSf8X0PpcY6TzfMv\r\npUgvK2X+abaXAVoG0KDGnEytJ7Y7R5Mk/7qMQiPG4PE9O38vKpPwabhcqDgs\r\nc2YQqacqBAxniqiXEgd2KaKdaPCB8DuUPouIdZ0G1ZDrztLzgV9m95Bhp/4t\r\nOOYm78n5xflfqu32uaPmmfWsKp9JLjtvO4H+upedrBbBU5m76sBODg6w7BjO\r\nTM+Hge6pPl2sG9MGV7jAyVmWjB6KCis6h7RzjiNHPpAdFf/EYdc9h1BV8qy+\r\nMBNug0WfwevAjOF20ghiudU6Uk4ZluAHRVTbWepgszIG8kJqolrknWYmiPU8\r\n5kT47iefqCt30ma/i464HtqiT1SUARR2KaeAhyQZ1hqKgVpMPsfQT80IH8M8\r\nrepMMb+JR3zICN0GSNf3KZ5F4JHqJzqqdXOQzVhi/iMckxsLjEHmMFOVPmfn\r\nEupw8q+013CczVDj3QgILE2PZHjTcR8C6Sg=\r\n=tDdb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.43f5323bc.0","@material/rtl":"15.0.0-canary.43f5323bc.0","@material/base":"15.0.0-canary.43f5323bc.0","@material/list":"15.0.0-canary.43f5323bc.0","@material/shape":"15.0.0-canary.43f5323bc.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/ripple":"15.0.0-canary.43f5323bc.0","@material/animation":"15.0.0-canary.43f5323bc.0","@material/elevation":"15.0.0-canary.43f5323bc.0","@material/typography":"15.0.0-canary.43f5323bc.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.43f5323bc.0_1670863705019_0.05536414655664035","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/drawer","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.5490e32e7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38431fb3299c5351cfee21a72da3c871637a8f18","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.5490e32e7.0.tgz","fileCount":47,"integrity":"sha512-8kDTrJUzOkfC42EX4/IfCgNszJDVGyX+yxlsUND4GwAKX9wOJCtU94D95nWPzjpy5f4o7UGGYSoqTDaTV7+aSQ==","signatures":[{"sig":"MEUCIFrTqtwvf9+j16n8aCGIha8oESRb7tv1mQchHbUo0x6cAiEAk+S4U7cgoVHRmueVi6EOF6EuAjsGlGmW5QiPU+TVRAs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl18HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpi/Q/9GVcHBnMG/tOdYs/FsZV4Rg4JpaEiyklVPmRM/3EhkNJ992qL\r\nm8G4LkAc5x5p4ZZURjwwgYGJa2PiX1JEEqL4jMY0RPtRwdE9e9vqdud79KmF\r\n2l1BphV9zSdmh7YJdG0TSPf+PJ2ZWy3bE8O/6TD2FZi0uhD5c+QcLksNdNiu\r\nPSkorQvgl2Ffaed4jmbKauwiNhVf1x4x2+qAzJQrxbYfszeZ/EkryHEvb6hA\r\nOd3MOxn5nM7l28QeIZd6KKhFCD0O53as+f5Iv7gEaUAX2tAvSzB3STBCn3uL\r\ns+IlPt9jj82KPh8QN/2fas0k8Nn9973RxpMZXgMkXMzi8rw9Z8NgOpUA8a6d\r\n1L3FhLi4Y3LNVx2acnU1yrtxItvrhojlwFPvcaJxlDBlTsStDaRaABbT4pQB\r\ntWzr67+RqRppTKGAVRLcKmmIJMzS1IsixIRnUT15oiIJwww9MJe/ggjpfggo\r\nfPH1KZaOcCNsxIgL7u/hSSXSVGByEQ1zLXw1TePfAyqLbZTHqGG8i2w8W4Li\r\nQJiDtUQNYZzEV0DnuqDRVnaSB7dSEHxUgHm7etjqc2o6BXFdaaaB+F+Ana9u\r\nl+NUoLgW2kntLLVEDB09tuFvOY+xb37ZAFQFqQjrHmgnThohXzY9AtCrO1M4\r\nNbAMc1pfDmQELBIK3SBHdfGVvD8GaSnPo3E=\r\n=Iafp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5490e32e7.0","@material/rtl":"15.0.0-canary.5490e32e7.0","@material/base":"15.0.0-canary.5490e32e7.0","@material/list":"15.0.0-canary.5490e32e7.0","@material/shape":"15.0.0-canary.5490e32e7.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/ripple":"15.0.0-canary.5490e32e7.0","@material/animation":"15.0.0-canary.5490e32e7.0","@material/elevation":"15.0.0-canary.5490e32e7.0","@material/typography":"15.0.0-canary.5490e32e7.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.5490e32e7.0_1670864647519_0.1389092417294493","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/drawer","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.817002c29.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a41cdf64cb0516dc26f205165a58ab05acd6ec20","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.817002c29.0.tgz","fileCount":47,"integrity":"sha512-qfch1xsGP1xvOoFGy1sRkmE9vGjhVTt51mn7KA3Mu2Ub+hKvHJ+EuhfwOK9rnq5er+g1xCKN6APKa5cO1Z63jg==","signatures":[{"sig":"MEUCIQDcYcDbQ2i5TrMsiwnqpojpFtOFEF5EETKBthMjSC9yqwIgIlwHnZZSf10M4e2Dh9L6n0Wt0tR8aGsxVUV+T/zzAMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPTtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonRg/9GYDqIaXmZ/hypOn39UnPHCPuJxo0NP6+Amr/vC2w74DQ9qCe\r\nwv/v/DZTXYXmpFCpTURlZsVpz7QdaaEyIcF+j7Og11v9dBhKSpXmThUZEzgn\r\nxhnrlHGA1rOVnfCmv8qbLMNcmHFmUtSJ7TpSbXd2AAQ4DvK4/s0NBmVcrlgp\r\nT18TDO4LvqBhVlvoeQ5qRpqiElpxKK0j+74mASBJ2PF7dGxZnKFM8YwzihVW\r\n0ffprRO44J5eWLgxPZ1jIc09oYDEPb6aD0Hy5+Gf1E7EUpY28vjl38RdhkKC\r\nsy9/Gv9hPKNI93YcTZEOm9Kab6cZCcPk5LrTxitKZk0RVsUlwPI7VSNSwy7B\r\nLpGDksdf2NKkho6ky2ZRY3yh8/2B5WcPZESZpkyetE9lAdrufGfLABUD5aC+\r\nqllFzXvF88Nl85mPYUGtZAghL3waxlASbx2kRIK1KSeLjQM+LZOW+TsNxecJ\r\nPSCxPkCCHTKJXGqzp5glmovuGcVjKj2Oyvbqcae/RXx72Q1p3XGJ4jG/tTsB\r\n5aXW053GtfICSqtQObMF2jznsO+28j/yv15GKCt7M4Y37PJUJjDUVw3p9dgB\r\nx8sdgmZU6mALzY+APEnpOq23ngYqrb6bI399Len484s3QlQjOTsKwxNDvnOD\r\n4SwHFGf3VsZ1yYeufwSpHGDZ7i5yot6TCNg=\r\n=Gsi9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.817002c29.0","@material/rtl":"15.0.0-canary.817002c29.0","@material/base":"15.0.0-canary.817002c29.0","@material/list":"15.0.0-canary.817002c29.0","@material/shape":"15.0.0-canary.817002c29.0","@material/theme":"15.0.0-canary.817002c29.0","@material/ripple":"15.0.0-canary.817002c29.0","@material/animation":"15.0.0-canary.817002c29.0","@material/elevation":"15.0.0-canary.817002c29.0","@material/typography":"15.0.0-canary.817002c29.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.817002c29.0_1670968556968_0.8518598260847368","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/drawer","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.313a1326a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec9b0f4c48a181a3d9b31025bb4560d7ffd64dc0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.313a1326a.0.tgz","fileCount":47,"integrity":"sha512-Stc2pdLqQP6X3V4F7Yk/p9gdIzkarcinFb7fhn8YUKk2GaK94lSnQfUAsnG1PXlzMOCPoeg3Z3UOA7FbsSHOEA==","signatures":[{"sig":"MEUCIBtIwmD+x/Gx4q34XTB25h8QX4yTtcdYIwcXdMLmiJiVAiEAm0sAwCGZJHcxsuk3yZlg/MFwwPRL5ifjuu+8CC/j/3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaXZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVcQ/+JGkqUWjFnKwgO6sKTjtJGDhnqA0hBljGA4teNq1VlZQGk4Cp\r\nDnPKbdqI+fr9bbrCRVJ+ZjVajuzZ6SOjMDtTtITACmAEYfmd16dQ8JD3YqvZ\r\nL1R0eiek3FHkhzT0F7Dk/NtICjc9VgNNMaemEPwkvU5nJmC9btSldJDnfDl2\r\nXCrHRUs+eqQeI9ej6d5AApsmsJCTiDxwhp4ZJss3rbQc45EFy7pI+M65V58m\r\nTa0kT5sFe9/qmJCP8OYa5azlY2aLJuqiQ0y3AIf8TBaUsh7mCOM+UtsdPHrd\r\nU1iV9Bq1IhxH8D6FK3iueLCMv4fBMCxp611fxqYzuqrGcesfbmS+OG2psWXO\r\nVreYLsk9v19Zx9VryneVe7hE5hTkFCUw4K8N2suht1W20qcZtwJeyU1pF3sn\r\n0+vIXrg19e0b5Ood0iWH65wt4vWdwtyc9AWf5hZzgBq4z8ahqrNGYN62AuMB\r\nT1KBgtVOFsK2+PUEAZW+vpFvWCI30qkidQBdeRh2LhqCKepZ/T05NE8pyArj\r\nPIZaEvDzS9/WEQ2oJu8Zs2k1CddAjs4/hVCS+k+zqRvmhwYpFkHDAkSkCc8I\r\nOLXqMKn42KaCYvo4IGAOAKIqTbQn3un7PogfvHEC25ftqG6li5xPEUHfQZ15\r\nfAgE/vZyJxHfxMJ89wpr0QHHl5PbxooDYHw=\r\n=LI8Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.313a1326a.0","@material/rtl":"15.0.0-canary.313a1326a.0","@material/base":"15.0.0-canary.313a1326a.0","@material/list":"15.0.0-canary.313a1326a.0","@material/shape":"15.0.0-canary.313a1326a.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/ripple":"15.0.0-canary.313a1326a.0","@material/animation":"15.0.0-canary.313a1326a.0","@material/elevation":"15.0.0-canary.313a1326a.0","@material/typography":"15.0.0-canary.313a1326a.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.313a1326a.0_1671013849409_0.6971646148668866","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/drawer","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a69c14e10.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93777c3ee14d485bbdffe76470d0505180ab3000","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a69c14e10.0.tgz","fileCount":47,"integrity":"sha512-mje4aRKThoLi/U2To3mfy32LPpVGUCA8IlQnbozkr5vUBiz+mpB1/KktQI2zsQ8fLJdRoVG5PJiZiYXyDkcIuw==","signatures":[{"sig":"MEUCIQDsRX5GQZcCe8+IJErNwO4pCVR8KFtmxVw38QQGLEbWJwIgFP5JHiaotr3FT6BwnuDY5S1GXr5GJY5jVqC2CsXnRME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbGaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrU7hAAlRKVGQKuM9BTxNvWbBPwLbvNtWx5KuYJbR615koqntYOGuYr\r\nO2Mh8JwXppA+lggMBs8Aj3NLuReyLt7Bj3TUiGCs4QSu2nAdmnUsVvNqdEwM\r\nNoXW7o5aoqMbtqCxZRoJh99BqzmKcFl/fYbQwdj4RKY5yVp8CSucvNHr7FKb\r\n8JXhFx7mVMTu6ADza9PAQYyw+H6jJa+7+UAXIuA0C2IHhVWPQDX+SJ7ULeRD\r\nDUCAvh7jG/NKXzMY8K5H30wace9F4KFBTc2GyaHwhNkYkMN0vpQFnB0mqmHV\r\nbmzHa2TaIs+oBKjWX07arLxGRFyA711Bf8M4PJzSFuy14uIixLh5jq8wvhuB\r\ntBfmBiAETc/zx1y2OfGVVcI6zkroU1ZTfYh+vANJkgicoB8YZb1tCC/O8v+7\r\n8qLx0TzBD4nJdvq5Lk8i+Fy8K82FIORFUY8azintBRybmTqAGxYMYzry+7VK\r\nSiRB3yV2KZ5YgxIfJqDuWgRPw4wwTppJlQJvJmW7MGq+l7+DknoElP81OMGL\r\n3CCSqIoizkal6PqMdMVtF/+2MUu0bp7NprcN14KoDRidrpy5heQNNB8c1lOO\r\n0ZOPbN7T2zxlsv96IR1e3O52UfTT3vMvyRmYtXfk27k3sV7cJuBNgqvaHvoe\r\n5RybiCN6JY2ZSlHdrBSfKB2m19/3NUSNg/I=\r\n=5ARS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a69c14e10.0","@material/rtl":"15.0.0-canary.a69c14e10.0","@material/base":"15.0.0-canary.a69c14e10.0","@material/list":"15.0.0-canary.a69c14e10.0","@material/shape":"15.0.0-canary.a69c14e10.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/ripple":"15.0.0-canary.a69c14e10.0","@material/animation":"15.0.0-canary.a69c14e10.0","@material/elevation":"15.0.0-canary.a69c14e10.0","@material/typography":"15.0.0-canary.a69c14e10.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a69c14e10.0_1671016858290_0.47697215648332336","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/drawer","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.f43e0ceb5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42cc5c78582b594da6feaf31dd84ea1eb0c99beb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":47,"integrity":"sha512-zX2S7yBK0QAhNDU+JghjZ7cj+eNSw0GEQ0qm/vS0sk9IVvj1PksbNy+AB+KcQPNGdvZOHqmaurvX3/TVQP5JAA==","signatures":[{"sig":"MEQCIEe+MsNzgHHLOk7ueU91ilTO3hE9N4oE35nv7XORyDBLAiA1outB2WjAck3EWOGVtkBJjuTOx3k928TbLjlSFEHiow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf31ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpscxAAk/1lJMUQ49NHxM9v2VqGZHX1nS8/0KVlfPCAghrDe+qZp7pa\r\nXoCAjGzR8sUCFHGzdji6kUbcDvdCPjzSZ7bN3pZQc1Srholy+nCZLGN//KYn\r\nnatzQP+iw57iHViqGT8q4ntiDG3kxGQ09ub00F7NURRmMnjL71K1OhqZi4kv\r\nNXjeR4v/gQJpzC7ZMWTd2eZ9o8Yk6WJ1ddnOOasrT/LBAJyHX7n7vPiqbnzH\r\n9HZYVkn+wZq+9c/pGKUh8vfTSyDCBLP0ZL+oNiC0DpED9y68GdmDL5AsDfID\r\n4W9x5IUUBF/8/Fwne3qKy3lWeg772qeK1+PDAO952Dh1Dkpb85UC+njJVLca\r\nfoi55R/Vnop03s71CbPNx4om7a/dEJA1Ko+TyMsCscqsrtz7xNC3VyDHrlYC\r\n3aKmX5NsR4DO0zMtwcCphqxwhNiGUquQGMFqbkP/MAcnzoTjlglSskqLR5ks\r\nb9MUiI+avQAAqg75+8q9nBNIWlAedg98ZArfwKriN8lRkGrLckEfH1HH3cPh\r\nWusm5wd5tFCFfnJJJBn/D7x00Ce0Vz+g3B6APgQqhgpWejX0zTDTViO8HwXj\r\nWZp28nPCQuIn80WkPz5ARjMGfx03O+WznijNbyf862wTUlODUwYZvTlQ9Q4o\r\naytDB2LhqCsuT0HC+HbNOdiQ024woIDhv1Y=\r\n=cR9t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f43e0ceb5.0","@material/rtl":"15.0.0-canary.f43e0ceb5.0","@material/base":"15.0.0-canary.f43e0ceb5.0","@material/list":"15.0.0-canary.f43e0ceb5.0","@material/shape":"15.0.0-canary.f43e0ceb5.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/ripple":"15.0.0-canary.f43e0ceb5.0","@material/animation":"15.0.0-canary.f43e0ceb5.0","@material/elevation":"15.0.0-canary.f43e0ceb5.0","@material/typography":"15.0.0-canary.f43e0ceb5.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.f43e0ceb5.0_1671036405485_0.22813837082591037","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/drawer","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.34767110.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"639833604c0fc408a7f13a83ec0f3952cf889c4b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.34767110.0.tgz","fileCount":47,"integrity":"sha512-XpYxwzECLVBDi7JwAftt/47k+XUdiQCN2yd2IFLi33d4TPQh1iBRO+veeqZktFcmZMfDF3TvQk1PJdph3kWdvA==","signatures":[{"sig":"MEUCICFDrFiFiCSLu8Jjd+GCySiicVDXxPjkoiBlNiT3r9xgAiEAnirB67bAb7PFqo3OEjHtwcyT0RD6TzcS0jWRoyLHyGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgXdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzpA//QM9yxwY7pWyvmmte/Xz14CeDsMwqUofgAzxDNccAUvBSVZ7H\r\nq1qYy89aU0YAWLKB8pSwFRdRwZhbw/+osvo+kxXkz9b/g4iyals2Z5oZJvwD\r\nJUPnl8kqGrBKGyNxXyp57FURvuzNBOwCHHwDrhJ6yZM81fdHujsbgjAfWI/w\r\n08Crl0sY8EdUPd6AS3okHLzGo7Je2B64NJ0/9Ug53rcfdx7CuHPU0FZoZmTn\r\nBbVSc6DLBzqd+ulvfrQTef3Tbwcmh/8GOnZqJHa7MhKwUhHjUoeU4oaK3aCk\r\nHOSpK0GxSG6hkzfGHOBJPCuXxmDfXMfq/qzNv7TWgZcpkCYiEk/CwTSZiAp8\r\nd/9dhZPjag5yg4ZmPMBU5sP6HZEkRmjykG9S2Pu0jQphPHIRNV+a/k6znfaz\r\nCahkG3apNTQPapbt/XLsVUMh4eRlBli2MGOzucO7c3LoP4HkuxiCmsu73Vo0\r\nn9mNP73GK0t8Mi1TOn0vkKDdDcMz7YFlZgqyN85AoXYInQ/osXwQOa7wRdGi\r\nhansDR5hyYqj02KEE79suHx1iKNtDz+DbWl60dIVzfU9tGJkF2Bo0NZ0Rf/I\r\nl0pTdOhCeh3jYtg1DpWmWB9+ZR+ptRTfpm56o1G96TvV9fiDEJto37Zq+JCN\r\nzxBsRkqm8eMxu8+pSS9WU+dzT8GeUQdyJL0=\r\n=sskf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.034767110.0","@material/rtl":"15.0.0-canary.034767110.0","@material/base":"15.0.0-canary.034767110.0","@material/list":"15.0.0-canary.034767110.0","@material/shape":"15.0.0-canary.034767110.0","@material/theme":"15.0.0-canary.034767110.0","@material/ripple":"15.0.0-canary.034767110.0","@material/animation":"15.0.0-canary.034767110.0","@material/elevation":"15.0.0-canary.034767110.0","@material/typography":"15.0.0-canary.034767110.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.34767110.0_1671038429460_0.25590187504386397","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/drawer","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.1f99f3c50.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d54e820e05e3c6d9240d37a09131281a494d3861","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.1f99f3c50.0.tgz","fileCount":47,"integrity":"sha512-5cr8fCWJdJ0dlbIJ5eooJB7NzCRTQ5p/vWSCl/PrmsRmstlRCulPF7vOntumQmeK0yuvuWYgLKYCAhuj1rsgfA==","signatures":[{"sig":"MEQCIHlsAWlC14hY255X6N+olUoduUhf3ltNTeysVCqfwjKjAiBspaXD2mu5qWQKYhBV9Kryga6Wn2J551lKzOEeu00nIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy7PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVNw//eIUtH+fEcHn2Myvy+9j09eyblBOwx/u6FORwIpnRSF2wkhHi\r\nWreXkDvQUq+cCtr2NV8MrAiY1FAh59MCXxJbZAlhwgqCoxE4Rxj19xaS9TGG\r\nTCZnik9rULSdUmjz7hoXX2bBUdMb6acqBcilZ1L8ieLPxSV146x4+6N4j/fK\r\nfDc0Rq4blQGsf/yGgxaRoc63mJTkWIi3IqEeh8J5jmSYjCQ1q2ExzYrVmqHU\r\nriwFKcPpR4XfqnankKnR+MT44i5bM70Tlw9nCRp/+jm0WMaFWpMMkxHt0RY6\r\nUX5h+jwFyTkZSmVrNO59qSAIZLUiLXw5ja/xRqQoIJN4UkLx2PCxMIu9q4Tt\r\nEYbNaxtj0WNk3RGKF6R5+r2DISfkNnifWtuUB5sJtq1AouidTrrdXKCm/W+n\r\nPaGOjtnsmlFV2pKKY58tnAAhAC0PiZSNoDvEnaddtVW0gx41vdjZXe6ufN61\r\nKRYmN+4PIBxxJgUPtwIUuha+9UHTfAiuSIFLjYh66h7dXvoKB2sI5dgw7WJQ\r\nZK8ULvmpmaTjJaUFZuGK9b/26k+fzEERYpV5I0juEWPijysSprGlgeD37kNn\r\nxekL+Ss4XZe20a/8xnHpUMiCHXWeJpQbSUmVK4faONxSvV5cWFM24yurdmT9\r\nw5RRDhbzoMRyLx3FZIhEX2gRKWYAqLfC9bI=\r\n=OuzE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1f99f3c50.0","@material/rtl":"15.0.0-canary.1f99f3c50.0","@material/base":"15.0.0-canary.1f99f3c50.0","@material/list":"15.0.0-canary.1f99f3c50.0","@material/shape":"15.0.0-canary.1f99f3c50.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/ripple":"15.0.0-canary.1f99f3c50.0","@material/animation":"15.0.0-canary.1f99f3c50.0","@material/elevation":"15.0.0-canary.1f99f3c50.0","@material/typography":"15.0.0-canary.1f99f3c50.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.1f99f3c50.0_1671114447353_0.15043461239594258","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/drawer","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.cfd69490f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac7229520f4c74ac48941bb8a4717af06154bea6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.cfd69490f.0.tgz","fileCount":47,"integrity":"sha512-vBhyjwdmHg/LMahJd4WAybGTDtbaGFEozM7CBgswNrRptysc/1Cy8NGaVSyNuuS7GofKdq7c33fDMs0onMSaQg==","signatures":[{"sig":"MEUCIQCXSSBDMmbqD/jEbPoeQm0x04OTnCcks9cY5J3OfrJDWwIgLxqNByoTgFMPSsGnl26NL7eCj68qRWp6acNGxWHCcMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNC0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzVw/+KqxwXPBGRo8p6bXxpQ5DiVrLK5gdpa/xmWAv/HGB6ZJ3xe0D\r\nQsIX0x+k5Q4b88XnGCfcDmP1egstwHOl78RiSxpkK41m+AxGJAmm+wTyve60\r\nNndSRvXV7k50Qittu23EXteMtWRJ8R1O7DTo8/Rrcor+uPg/1bsW7TTR7dr6\r\nRouztBsLHQYWTw7IK82/VoX16KY5zxywEP6iz6cX7NlRjRcSLIoasshaA5PO\r\n1gs1HOEPkNHVejqc9qHQaJi1aTcASx5JLGvXDJRDsQbB4iOF1k2BvwVwDjDE\r\nLbAhm/fsV1Qq/d5ZZKuxVZRHr0Vt5KkrVBv50TRY20+4lhxNA5jNDobGZvXE\r\ngEeN6SS4ENJYl/yqvRz/IxVbX31YOg+crjciFfeNO6xpRrnrQ4CdQOXpvqVS\r\n4FVuXM33zBf1e0wkaBpfImBI24BFFWjcfm1fZ8rQ5GqFdXJ3MrPK8E+vFZ0K\r\npnfhaqDpvr+XGrV8emKWwG9IH8whlUc/A6av0YJxs+BxUA++w4rp9Az2lt2B\r\nNnIuvNZiED5Cxygu6PaPy+3RCXYoIuWbpHVxYJfSqesEkbKcQ90FI8j3842c\r\nLMbK9N/weq08nko/R+nCrvZ1N9uGYqCPlYrb71s6RNXbXUqfzNb8YfIkY8cJ\r\nlteIYNtHKDyNh3UdV1rmI0u0UbfuebiwWAc=\r\n=s8zZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfd69490f.0","@material/rtl":"15.0.0-canary.cfd69490f.0","@material/base":"15.0.0-canary.cfd69490f.0","@material/list":"15.0.0-canary.cfd69490f.0","@material/shape":"15.0.0-canary.cfd69490f.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/ripple":"15.0.0-canary.cfd69490f.0","@material/animation":"15.0.0-canary.cfd69490f.0","@material/elevation":"15.0.0-canary.cfd69490f.0","@material/typography":"15.0.0-canary.cfd69490f.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.cfd69490f.0_1671221427781_0.8646442539329173","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/drawer","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.94ad8d986.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a40f1017f033c2e5be15802c2807c7b17fc4fc40","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.94ad8d986.0.tgz","fileCount":47,"integrity":"sha512-Jg+DqbQX8p6wPhy8HkIedSYBQhfOGa0s3tCke4gcwabQY1k9VrR38GZ4miXs/lJ6y+e/2BLXRvekIE9D2yt4EQ==","signatures":[{"sig":"MEUCIQDXsIPoGRX3naKZ37sHY0BfvfBK0P9Mtxy8AVR3fvlCkgIgM4d/3sZpXlTmcqMQXqrzFISuMlghZ3LWHs8+BNykim4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLt/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqf6A/8DMhIWgwtrm8eFWLYbWApTXdkqBtJCHjNMS9TvMhWjCrVwL4P\r\nEQcWwaUjEb3mpdB/CPLTsbd9rqIxTuBXHmCXbKkGzj4mhoc1kiJMW9ZYHXmy\r\nlrcXYxErsBNGA4+p+VR7e6AWoymFr0e5apxa7c3ili/CQZrUw6SZPg0e3OYS\r\nr/9QLL9x+dnpXPYq8p6PbhgY3Q59GbaRaucZ3oxTWEGurn7hJy6u2uskM/JU\r\nl8V54TyZzEkzNFETI+sjyzZj8fcybeNlfshE2csiP95I7vBGrfI9Xk0iEnDz\r\nm+xWnvAzpsaEN5BKSAHlafDBsOJr2fLqL9nKyRUTo3X9hOMyhuO5iEkoOTR5\r\nvUZvy3VhaYQI0LIHXUXJ60J6VsPDki9YJW09lYvXvA4HTU1VulfrSJeNs6Bn\r\nu+Z7W9n03rDh9X/a1boFdvkfWtP/pKrMTfXpdt9eOe62MqB8iRDhnuhEnH8+\r\nyZFyUzWKwPKiZhBqnCE6HYPgYXrdhRCnLf6KSIPc5Ciw6THtyHMwOwrSZmLw\r\noPx+PKzTLtME1xiRDz+BeVPznP3/tG+5j9TAfRkiz7oK8Ow6HsInEqQmA4Sj\r\nadWqT1r2U8q3KPOj/blasPLUcVMZ974NiMdLDcB1qnt3SJqAlo+D7utwa1Ae\r\nkDvpkuZ3abCKfv+wSYZnPsZg7aXHWViZhVo=\r\n=lJsu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94ad8d986.0","@material/rtl":"15.0.0-canary.94ad8d986.0","@material/base":"15.0.0-canary.94ad8d986.0","@material/list":"15.0.0-canary.94ad8d986.0","@material/shape":"15.0.0-canary.94ad8d986.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/ripple":"15.0.0-canary.94ad8d986.0","@material/animation":"15.0.0-canary.94ad8d986.0","@material/elevation":"15.0.0-canary.94ad8d986.0","@material/typography":"15.0.0-canary.94ad8d986.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.94ad8d986.0_1671478143054_0.2165132739741411","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/drawer","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.604264203.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6e4175726b5ea9a0453e3f434140bc586aecc1a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.604264203.0.tgz","fileCount":47,"integrity":"sha512-jHJ4aHXOlIgRBxzWGvYhkwNLE+kXnTgr/5PEyO0SmtTJXgu5mXyJt+55McU28jARuqBZHI2rtX6ke8IiWkYJNQ==","signatures":[{"sig":"MEYCIQCKHdn0YzgHlRQUL4VYOsXD1TAZJopzEmrbU7TsZ5k5cwIhANZb9QPUVBNsIZsxQ1XoahrKVHc4mgnnQjSt2C74hAGq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo33IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozQxAAn3L+JxsnpOQD7u8QhxgepuiAryRrTbux7izHkJzv3dUM17CQ\r\nlWbvvEp0+6pJhA6V+5B4MOnHyL9lr0zCLXiWgE/QoUI/7bb/Tf4U8zkZu+Yy\r\nQX/WlXlQyWlYQ7JV1hj9Rg11SdlIAeLfgJ4R5DcP7Tmu6xVBUfPde3JLhz/7\r\nwyUfXIpAcRFiDr+SKP+R9ICuoh1TZQWy8pU+Dr20ZAAYybRyykHfXT458zLP\r\nSTn7PnrGKm68p5bGzSA8g8wHGBotEnCzS/0odsx2pFL13Jq/A6tgcmsEn4ti\r\ny2fH6vvafH6+S182bGlo7vFCdRVNuSLdmR8aRRYJIXEzEMGCRXh9Ijdgw2hd\r\nIVuseKsqwC9NS2DOgQdHCk7702UCeqSbZNBVGS7RK+1UeYSCXB3j2TK77s62\r\nl9XfGdWjzok6/86LjeQ2LIc9eecfl8XgNwa3ZTOo8+xevZ1/q/0VzAy+925R\r\nJnkVBUQf8e9hfezzvEy61It5ZtpBxytOxtufbDkrcSCWCTJX7h3dbOzyEHdc\r\ndvzIIAzmb5dMD1Tk+uog8AsGkYyThGkZcLtrlFTxo/9SxmrGCG6y1IJ76s9N\r\nWOjHPgoDIizLxZ/mepGe7oW6SYGPqvqbnlIjVwkuwpUrh2ByhYfwPXByKTUa\r\nYnbnZce2DNbvJTymFXr48+vOETjFxx6wsi8=\r\n=tJON\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.604264203.0","@material/rtl":"15.0.0-canary.604264203.0","@material/base":"15.0.0-canary.604264203.0","@material/list":"15.0.0-canary.604264203.0","@material/shape":"15.0.0-canary.604264203.0","@material/theme":"15.0.0-canary.604264203.0","@material/ripple":"15.0.0-canary.604264203.0","@material/animation":"15.0.0-canary.604264203.0","@material/elevation":"15.0.0-canary.604264203.0","@material/typography":"15.0.0-canary.604264203.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.604264203.0_1671658952592_0.3131866553185947","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/drawer","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.85bcff6af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c04beb710b6738cf6bd4940f0ac2e5b2c56391d1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.85bcff6af.0.tgz","fileCount":47,"integrity":"sha512-43u0AJ9AO2IbcOJhVV6rwijoYSYQlA0Zi/q5XvSQVPEvgHk0QvhhDuOVLvp+yU386xJ392YmzGKQ8eAI0lbyfA==","signatures":[{"sig":"MEUCIQC+tTSQ3jBC4IZoz6DfkYCTrE9qwuErn5uJUrH4X8YaGwIgOELMU2zcTSYV5lJ9oDrje5G9GGuRvtdXqJ4U4GfqSMk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDECACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmow2g/9GVymtLpmn79gLB+E02XFu8Wz1hqM8ogxNHFV/F40omGIDwh8\r\n6arRFR+lKdui6vys1mzYHK1M37WRIEZzwGgzVpTJBShmI/TF5mBnxBfhHpVM\r\n4CekQSzgwWhUcxUAeoo7OXKsZ34mLDwERzwoTWNmQyi84+WxJ8gz+Gi45ilI\r\nnBvNfIZDwuTnU8kHqZhmJVSUhQfooTKzcNOKu2ZshCKvD/rDl3QI6efrxU4B\r\naaB3ql46ZfuJGSfXTjMtbzde3i0OaYGDSxMVVgepBD7I5VQnAnRdlRosuoXd\r\nBRYi48GvYE0qzCIF1wqa5Dnwnj7n4CuHDk4lAbeexxqFQUmZq+j6dZjmcyju\r\nQ0doMj10iAg4OaEMLT4G5J7X7A+RW5dxg9BEJmNDzSDfQCzbE+uLsxUACFoo\r\ngVVI61FHjSGCcqlYNofvczDF0nZjEv4tZNWMkdJGRFdP4X4xYHrK7FL57UBH\r\nWkbHQGGf8DcnNAX6nqm/OzhQwhMY/1bG+6C7ZKV6+XLMOjRztOn753jMuyc+\r\nVZgtRxqr8J3yLmhomjs97oTG66+V1caBQQ+JajvpfCqH/DB7w2LYlocooq8z\r\nam6+HUfQPrQPja1AQD4YAFaypb42rZVEYk6JXHdJQWJ7zLntw9rlUMvHgbcV\r\n3POSxfEiGzwGLFjUGLX9Erhm1kxwwhuACmw=\r\n=GVVj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.85bcff6af.0","@material/rtl":"15.0.0-canary.85bcff6af.0","@material/base":"15.0.0-canary.85bcff6af.0","@material/list":"15.0.0-canary.85bcff6af.0","@material/shape":"15.0.0-canary.85bcff6af.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/ripple":"15.0.0-canary.85bcff6af.0","@material/animation":"15.0.0-canary.85bcff6af.0","@material/elevation":"15.0.0-canary.85bcff6af.0","@material/typography":"15.0.0-canary.85bcff6af.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.85bcff6af.0_1671704834345_0.7300595958208635","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/drawer","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ece3e8d21.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15362458f44172e71a18ba756a4c7a67ab776324","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ece3e8d21.0.tgz","fileCount":47,"integrity":"sha512-mKMihwyjwXAwZVkO6Uwug0m8Nugq/s8q4P23d+iwaA1XhhbdAwWlkDE5GZT85dbdErfMF84loBIVgXUtQwD/pg==","signatures":[{"sig":"MEYCIQDibtCULTSdGPEhrM10lFld2oKEl5rM1jSemzqcx3Zq9AIhAOXKBNNJKLw35C1KIdLifvK4mL9iKjND4HLRJ+Z0ckX6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpJBeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0uA//f6CRbX1+/G5NB7T1EWZOkLJW5E6E/Og9JBSTxz6XibWLqkl3\r\nf/Y/Bx2zh/SfpgYPKd8Ot/caNV2xpf5YqMdRzsKPEYnCqScg1LODioWb2RQ5\r\nKnuwfUH0BaYexij3l8kFiQFrZE+ewM7nAz36J9Kwefr7afLpTgYqVC2G515j\r\n8gNgHKZ4H0wZjNQY5UPBq1lXgfk5q6zWnT8/uh9s350eV2J22oyaNMH8O0JJ\r\n1O8NvyCTshQYJiyf/JQwBbah0kqJR5DZZ66I0j3ptGpxyUksUhiRBwBjhd+M\r\nSoc6OXxnSuBPAVoxodAB1cHibdZiWT727XOzWZucOYnaUVRRZwKtQ3raSPNG\r\nAHiZLn020HSxGTmz9LAtMLm8fa3Sn5RKzZ/wowUeMvBOq5ihoVSoMqQW6XBE\r\nvLC1bLm7o6QZwiJZDyuRzH6KFpMaKiIIpfSoXWaev4MUTwnX/avoI1EocoCU\r\nIae2NftRhbZGmHa8W1AH8pSVFirryAVsCruan4QJHglbEirNHLZoxq9ClgW/\r\nomeQy7m1SsGBvP7cNkcHZ/h7nTjz7dkvSOv5KTUiEBLuBC6xtAUnh6o6c7LX\r\nMCnWmYs0WmtcQbbWc7w3Vgc5JvRfC6+EkTG2P1HBt6xMnIbZsbdGV70P5JwP\r\nQri+qzTITuaYVYKUiZuUo8WSE/xbWAFPsl4=\r\n=eFKC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ece3e8d21.0","@material/rtl":"15.0.0-canary.ece3e8d21.0","@material/base":"15.0.0-canary.ece3e8d21.0","@material/list":"15.0.0-canary.ece3e8d21.0","@material/shape":"15.0.0-canary.ece3e8d21.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/ripple":"15.0.0-canary.ece3e8d21.0","@material/animation":"15.0.0-canary.ece3e8d21.0","@material/elevation":"15.0.0-canary.ece3e8d21.0","@material/typography":"15.0.0-canary.ece3e8d21.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ece3e8d21.0_1671729246158_0.8706997810108468","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/drawer","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.278ad53d1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b08cdc3153694cf79bd03e921f7a9f8f4e73b6c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.278ad53d1.0.tgz","fileCount":47,"integrity":"sha512-teoYYztcozWLO7nYYWkfSyH0aFlDf285UAXKau4NNz2VZsl+iShlFo697SDczqID/vIhY4NOcUzJimzPLDSjIw==","signatures":[{"sig":"MEUCIBv0CGWHYCs7MiIxOz+4aNqFHXWILhykl1rPK+nbZzWyAiEA8RMoqxsePNV6zJcZsliIaQySZ2rNwIBNNzOx0P54hFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyY6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2vg//QFeDrhHHfGmeb+0ZKjYGUJHPvDR8RmTktipSSSYlyUuLJ8U9\r\n9MdyASZPTNKyy008hxvzbSkxByxe7A702R3UYbPfv7SxxOQm6SadO8rWggqX\r\nMlqHCx/JsbyBJkpUgbnvg5+L15koIIXAG1Djs7mmwWAM5IkND75wlTQS9mjq\r\ndUByvCGM7YB3TynCSSCC9arfK79kG0KKNIfqK9QBoSYVSUg6SxhPu8lVJbb8\r\nSXbh9xk7oc2pSr9YOmn3sEec+3D/wCesm+nIQIOIPnEELd4cqq/H92iZ0CQX\r\n3UWQhwb6IDGL+dKbh2Xls+25CSRvbPgoD30Jj02jaCoty9hx0PTebe4mup25\r\nK0DkXvBkQVvNbm15zYWrWNeVBIJQK57+cpUneGbS9JaJK0mkQ9XyGuY8GB0T\r\nWUpRQ2YgAIempZRJydy8O0cjl+FCfEcFPoT4EMZWAwBYnPCnnZfhwaduvxf/\r\nbNgxcXz3TVkRo4IV1c8Miwqk4kWSf2PDWnpY3bBtCCzobNNvrkVKyt3y5oBr\r\nt50uKWSpZEyx+q4Yv6MtUrcVsxec8wps3nAPpotnm77JfEY0zCJ1gL4gZIw1\r\n/LCT5zMVBUteEvb6a81lfYsVAna0pX4qu1sZHjr6v0pMbadoLwUt+xL/QN47\r\nEwDvQi1WyuJe4NynwF8o2es2+VU2egPrago=\r\n=eoBn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.278ad53d1.0","@material/rtl":"15.0.0-canary.278ad53d1.0","@material/base":"15.0.0-canary.278ad53d1.0","@material/list":"15.0.0-canary.278ad53d1.0","@material/shape":"15.0.0-canary.278ad53d1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/ripple":"15.0.0-canary.278ad53d1.0","@material/animation":"15.0.0-canary.278ad53d1.0","@material/elevation":"15.0.0-canary.278ad53d1.0","@material/typography":"15.0.0-canary.278ad53d1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.278ad53d1.0_1672160825963_0.21976559940073637","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/drawer","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a7d8389e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94299b3a92327f4893c8a25b9f1e0134b92f99bc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a7d8389e1.0.tgz","fileCount":47,"integrity":"sha512-yLa6IIUTYjmWwl31dluQjO7IrhchV6Ik078r9UG793257KjskZpzboH0YMlXUjaGiw1B+SfkuVHgeD0vgtrIgw==","signatures":[{"sig":"MEUCIQCtdkxeyed7VyEieI8byORRy1ogNZEW1i0xwg4bl4af2gIgAhAn1irGBFGmgk/hYgtWpMP6UIoIVLZ9mvdPnkZTgrA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0IOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVdg/+P/3kNmlWGmpwhzbif6tY3+JDVglEcLXWo8iAcUbK8DHZe+PG\r\ngCzGS0rQPyw8vxKZnIyW7ta6sB2z3HQ/mdBktwh1Crjjty8m+OrCI8k1JmGe\r\nIvdpFWS3LlXzDJ7hKkBo3XFACg+zN812vCz13qxpxC0ZI4GomsmuT4vngESO\r\nRHoYNSGLks5mXZJgLWmeF5uq6+Q4PU/oVnNcV9yQm//MP4XVFyNynfTXr+Mf\r\nulywWROUrZB5URxH8OndLu5QOeqK+BCQdyrIw32IF4PyPo8yCV9QnyKX9jgV\r\nzardYjVbZciv7jCx8MQubbbIjwRx0O9vIygCBW9qhDwBhhPLyB55j2M9+755\r\nYkXUj+9VVHQM+uM9NKGpJDZpbFszF0kmqEjsmPljPCduUciFsScETtQX75EY\r\nh69Y3fHJetzqec+vngY1v494eyptLVD84wUDoX7SojvWRYBCQmNV1nv/n47v\r\n4JM7IWcOdiqssMUxz8TIK0+59aKPbLOaorUFsAUKTCMHCpTbH2wCiy2hdv/v\r\nYKLX84ufEPb/crvszDfB1ikZo+r/HK1dQmK0qdnBdB6/vKyGaUaBg++Zn/63\r\noL4GFMx0MXK6ZvJbfnippzif1dd8AIP4jSF5kxPaXtNNovXKh5d8nxqcuMBd\r\nDeQjIxlrAiZFuOK1rAUqnJeurF7XQRj4uDo=\r\n=v+UR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7d8389e1.0","@material/rtl":"15.0.0-canary.a7d8389e1.0","@material/base":"15.0.0-canary.a7d8389e1.0","@material/list":"15.0.0-canary.a7d8389e1.0","@material/shape":"15.0.0-canary.a7d8389e1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/ripple":"15.0.0-canary.a7d8389e1.0","@material/animation":"15.0.0-canary.a7d8389e1.0","@material/elevation":"15.0.0-canary.a7d8389e1.0","@material/typography":"15.0.0-canary.a7d8389e1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a7d8389e1.0_1672167950591_0.19350628618313803","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/drawer","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.8175d5eff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcd4bbc8a5f98b80852df0ed39371b0b6018c673","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.8175d5eff.0.tgz","fileCount":47,"integrity":"sha512-8iTkdvpxUK/yy5yXK5O+h8Ggn94oYOzhYjYs1yF4NcXkUivC0eLatSxpyoH9hJZEJ+G5Zt2C0qGQjF0ZVjm0aQ==","signatures":[{"sig":"MEUCIDygjoXN17wpSW1jEWiu48DBk6XYJ+A8wzBhGyst9jO5AiEAiqxxXHla/grFhKMJIM21gAv7oByKY+GOe5ryTwFM27M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":991494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6GYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4AQ//bT4I58k6x9nn8jMDLB6XWigIKfpSKbDz3iiNVBF9cuANHmIG\r\nb8dBUcMz3J61NmbzP4XOwKX0ThczbsTfYZyceu5Cz7P9EiO3/5qRGF4kyXYf\r\nO14wBQnZU0BxN0YGdGeXGOsWgtWHT1lQUbuK0L13mUg7U/h1XB5MGt0k4BRk\r\nKbaESPFplZebqJozigAu5I0uPu0jHeZG8etC14v2wSDzUPKg5fmoGTjtJKMz\r\nvj4yb/UreThia7Nd8N0psYbolATRCbeGJO6Ii3YWLPMZ+yRYWHKyZm4/jquY\r\nzbgfUjPbU92OU8nbLglXpCammDNsYI2QBpM+WGko9Kc+GTrr39ocd9dOQ2r9\r\nJ6dwt0sRjYII3+D6RHr/Er4qkNqS+cJJNOHOWWGQdU0j4NB4cs1wTbxfNxny\r\nePQLGOtvjSb+eZWLaKIyc5XXeyytibYjK5ctWJV6rOzCNJF5RCBE7IeorvI+\r\n5PcKM10lKJ5g3OYN8kpCoPfZuzrorh/CNupPQl+3sTkPbAOoHndusM4A8vEK\r\nYcVzRH277fDd0E5z7M7jH0HZs81aGm0NcU9RIioZH73cKVe+dnm49lRpmcos\r\nXOmCEywMrpm2XN/iQPiJsBQIlaxrMSvfcR8VDsGVNaKtvCgjcnp9i6vgY1Kt\r\nzjjGqK18Fam4aBpawHCiQ0v6NxUiLldZbHs=\r\n=zcls\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8175d5eff.0","@material/rtl":"15.0.0-canary.8175d5eff.0","@material/base":"15.0.0-canary.8175d5eff.0","@material/list":"15.0.0-canary.8175d5eff.0","@material/shape":"15.0.0-canary.8175d5eff.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/ripple":"15.0.0-canary.8175d5eff.0","@material/animation":"15.0.0-canary.8175d5eff.0","@material/elevation":"15.0.0-canary.8175d5eff.0","@material/typography":"15.0.0-canary.8175d5eff.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.8175d5eff.0_1672192407837_0.15374182211128962","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/drawer","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.e21dcb86d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abf71c11291043e02ea92b71e0d1e3d262f2f22e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.e21dcb86d.0.tgz","fileCount":47,"integrity":"sha512-f2KHKaGAn+e/IIcUEBzXgzhD9Di3VRrYDKOeepqWldDPhMprbduvnE30MstahEwf5nPQ5rQ+m6/fO6ectTP0Rw==","signatures":[{"sig":"MEUCIA0l5e7d2iNn3rXRSILBZwWEyjpb550bJhmMtsipLKKNAiEAwt+n4lCZLcj93JKnqyb2EqYljEJ9H1Ld4s1vrH9Lgxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":991576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ5aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmof0w/+PJxHQcG+GDPBYop+tVR26fgpv/M/FuzvybYOfIWwxavTaJpW\r\nOXjtSB5I8nKZMyRkBpX16W5/eOmOrRXCYTQKoI8PPJfe6+aUiXQh68RYmycG\r\nmLjsAo7S4NVne/9cx84hSvLklDBHniF4Btmuon72UDwcGd+tXYoSqPy81q+t\r\nssQpCdY+yUmHlt5ZkebLOR5h+s7CHA3El/X2HLwgXOlQfEHMy/FUxnzRcp4e\r\nNkSKgX2kSNCh7kk9LX6+yfuhcNpbzZPxCtULKsaRr6d6EqcAcumntCbpCy9L\r\nRZgKinQ8tHgxzdg/ufGq9UBm141GjiU33Yvv1UovaJ76GxM8eFRgeLXFKeyn\r\n8OhkmQw/ZkWklglKsXE8HdiztEG5OPys6jXkJfDtwdrhZOy5+jYTdFAZiOhW\r\nVJ5tCKkum0BV3LyQIBQl+tRE1/U5bLM4bSxo6QfMTxYPlKyPx/n/Mr2Zfs+1\r\niKisX4C9EisalgIGcSgFQPi0ezg9QNDPg59GArrOMUbkGF2d6zbcK1xvNx0i\r\nTyWc3a8aEBBZHiMSX8OsDbbstiulA8zukB+XyNXsz47WImi4Fn38Y24yv6lI\r\nGmdTm34tK7vrN/RTTCaDSi61zhLkRlXPJD3UvvQlwOfCOVhfbyuG5Jgw+Las\r\nBbB4ZcVktFzFFohQKV8fs0duFndz+bnR7RE=\r\n=3ss5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e21dcb86d.0","@material/rtl":"15.0.0-canary.e21dcb86d.0","@material/base":"15.0.0-canary.e21dcb86d.0","@material/list":"15.0.0-canary.e21dcb86d.0","@material/shape":"15.0.0-canary.e21dcb86d.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/ripple":"15.0.0-canary.e21dcb86d.0","@material/animation":"15.0.0-canary.e21dcb86d.0","@material/elevation":"15.0.0-canary.e21dcb86d.0","@material/typography":"15.0.0-canary.e21dcb86d.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.e21dcb86d.0_1672322650500_0.6054629713829982","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/drawer","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.20ab6f5a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2b745222220c50da0f88daa9b2ae09252c13488","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":47,"integrity":"sha512-9WTXUSixO1JvMn+p7ZBe8arwYdUOBg+5eZoTudCPmwp44nkjHR4LPE3mMP/lctR1mVQ9+y2lUl01zf2mSelkRQ==","signatures":[{"sig":"MEUCIAy5ctCg3jdi+5z9Y6eHLav98l15qUAnfP+TlzVSs+njAiEA7bMyBRYj9S+Wu9yUGfUit8x66vhalZs7/yXOvjLmSfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":991576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre25ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3cw/+KOZNKehMIqP+km4XDqZHqPut0T0wSfKzF34tKh8B0sICt4Aj\r\n0ouwkaEx2rWvpdWa8C230QLuZHyAA0VQODYSHI7i4U7cRzmRuX2sADGtidT8\r\nE8JCx24wzfYRsyb3bO7gyBkB8/Xzl+2hoFdvqEk2WUnXn1vOibgBlFU7wmAn\r\nCJNynkgT9dUMvDmycmKEc/AkGoNQ6YBNpFo+9Ij19Hogpe5nVeo8B+3DjZTR\r\nZ7KNooHpmAuT8cjd17+69vkGtL1NDI58ndN32q2gT/WWvVuJcAUS5vvRHeRQ\r\n4rbefTqjGjOZ1FTltyTJWTsFXLNS8jm/VZ/y9feLF0XtmdSTyi526Yat8Oqz\r\nWux5QNkSyJOJnEELpCq1PIar4SjOSTFLA7BpLDTN+WqNJP7bhfier7u9u5B7\r\nc3cFwF3Vm+ComfeMcT4b6RMQdbQqsWD6ADBGHvpSTBQ2mUTps9QtkTQp2u/A\r\nQhi26z8xhatljYwPAx/clnvmFG4CoTi2SKeY9AKm0F/8iCC982b3HgNOD/gy\r\n3e8ePeG0L9VdDIPVlB/A0+r5UCRyh3oyL5kZr0OLFuUpe0HLdUJHtux12rvY\r\nVQX9N4LYdMC3sqdpotz91CYxWNbw+IRLbZHNR5gzGJsbxCAQKG3nQoXInNj/\r\n/bYqJdgpt4b9NmPeqHyvdNr68xSJfSxGS8c=\r\n=WtsO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.20ab6f5a8.0","@material/rtl":"15.0.0-canary.20ab6f5a8.0","@material/base":"15.0.0-canary.20ab6f5a8.0","@material/list":"15.0.0-canary.20ab6f5a8.0","@material/shape":"15.0.0-canary.20ab6f5a8.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/ripple":"15.0.0-canary.20ab6f5a8.0","@material/animation":"15.0.0-canary.20ab6f5a8.0","@material/elevation":"15.0.0-canary.20ab6f5a8.0","@material/typography":"15.0.0-canary.20ab6f5a8.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.20ab6f5a8.0_1672342968993_0.7025209300405644","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/drawer","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b9806f623.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6729cb561cbb615b10317ad1d5e7ff9eb2f77141","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b9806f623.0.tgz","fileCount":47,"integrity":"sha512-0Geowdh41TMEGj18GwZpnGCZHdVsFO5iiUDckLPC+Jb487lw2GBmbMMfM8Ic8voXq4aLIbxB/rHndkkimlAkGQ==","signatures":[{"sig":"MEUCIAfrtpKs2FlG9GT/R18BeVJND3Uf1HYIiWQcoK++v3PZAiEAn+KQYHfkgAvN2Pb8J03tpr2Me1vsuSu5FjSClaja9Pc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":992421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh3GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIuQ//QcC+8IrmM5ie+khKKpPUYjtIu7WrHqZTD8e6h6/X+wAbp5or\r\nqiNm535RGtHTiMDTfQiBWqm30y8Hz1BATAKrNY98cBmDtlQszx/mM8hMWm8M\r\nUTujCowW4JwHCZkE6Ef3uMlZJamJaXVq4s9hKCOES0z1xNxGpy4l+dHfIHl1\r\niNdUKNLnD7TIVyulPvUReI2AEVn5B9i+kBFKDOq8d2QlfmQ2yBeOdwOZfdi9\r\nNffrYOZzG1KMQdxXuBWBRWH3pNvO98jagNj3BIwrTGe3/vHl9ZR+a0GEylGj\r\nXbv+J3QbUgzra1ACnfRji0wMWNT7qB4VTKoVeNYQUYFSvshLLYANrypdhHto\r\nmcURU5l9vx+l/ds3zS0A5WQngikrMOQzGQ/ExXTWlUafj05B3gaMfC8Q1rJa\r\nDKzkxx+ujLJNDifLH9zLgy4li2P5F1YksZnA/fCUbxK5HHSXJm/aWdTS+QEY\r\nKnP0W+tV6l7J2PsTiiqm/9X9PHEw7zuySjoyw0Is8zKEoyE5PrDV0aNrIUZs\r\n0mz4rleR8wOmYqsWlP/PuEVCVbWSrqjXI1WLCRUc9aY+QR3jn74G8Ka0X7Ce\r\nllgAMH46KZ+2/vYjLPHB7TgtGAevQL6s6gIR3O1EodnXMTK+pAKbG3gq6KZR\r\nxZIdv6kBuBwdapdNtM+a3PJiOb1/8esyuow=\r\n=Hfgc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b9806f623.0","@material/rtl":"15.0.0-canary.b9806f623.0","@material/base":"15.0.0-canary.b9806f623.0","@material/list":"15.0.0-canary.b9806f623.0","@material/shape":"15.0.0-canary.b9806f623.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/ripple":"15.0.0-canary.b9806f623.0","@material/animation":"15.0.0-canary.b9806f623.0","@material/elevation":"15.0.0-canary.b9806f623.0","@material/typography":"15.0.0-canary.b9806f623.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b9806f623.0_1672355270620_0.1160932980571594","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/drawer","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.50c9f550e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48ace7404158f6de95677b54d7871ddccbee430b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.50c9f550e.0.tgz","fileCount":47,"integrity":"sha512-jIMs7erGjaMi/DUZ91mzZzlhjQoGpVPFY2o4KjNdJqsZF38IPKXhhHptbR0VI5EtV+OpslxBGsOq8OuDC2LOmg==","signatures":[{"sig":"MEUCIQDgoTudI/P7tvDI/4i650wWm+C1lIF0buD3dAvB4OhW3gIgEgLiO0YL8VXqI4hNmRGN75j++oH/C/tYGjU/MpJDoAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":992421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE6LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAeQ//fdYjeg3OYfCXRPqJ5O/RLPFKhXWq1x7ycGnaxFjmBlTkvtGR\r\nkQ/vZX+uI17UeFrThosBTssxVb6CHo6HOuhKGrCnsOW9ouehXvo0Z6wjjqk5\r\nK2LrtPJj/wg4NXSr5izow07n8xp76Qi0J1MrBMtDJbbiBYU/RfIDWa9l1YgQ\r\ns1sBRXXfH0+t4CJv2JQO4FL2wGVsDgSRmhhvCYABruGknk6CCLVy/ueM3FtM\r\nHwL0SrVqI97s23x0Y1c72YgTxRX8oAbk2g/FMiA6iYGBnAnRfTrXDraLFppc\r\nGWKgDWTaTbD27Xtl+gBLQWkh/v3rzFcYclX3kzihyCBTPQZ+wms5PQ+QXH4X\r\nzp+43J9ky1/VzEPNMCcddAJG7rZ3DyPqwOo+vTF6hfTslQ+cRzRb54HSkqVS\r\nzYzeuNBeXPLkH1tS/NXVikREnPeHRhRcYWaFOh89BBmQjqq2T4ZCg6oxsKiq\r\n1xT21ndjVSUi+I2NgPNsMnMsnKS82rh0XbF6hvIFhTYuok+kaqs5jnnoEOzq\r\nzCK93j3+zHnhKiFVS8VTUF9o6T5JNFnIx8IGi9LWhjKsEfqV4Mvukugzfgxt\r\n3rhH82AfSJEajwUyg2ohGg/BQEGd5Bkeaf70IF73F7Wi+O3qi0DHfQfimsYh\r\n0XWUU7CQjfN3yI6D8tO03CRZz3SlMlZJjWA=\r\n=MJ3c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50c9f550e.0","@material/rtl":"15.0.0-canary.50c9f550e.0","@material/base":"15.0.0-canary.50c9f550e.0","@material/list":"15.0.0-canary.50c9f550e.0","@material/shape":"15.0.0-canary.50c9f550e.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/ripple":"15.0.0-canary.50c9f550e.0","@material/animation":"15.0.0-canary.50c9f550e.0","@material/elevation":"15.0.0-canary.50c9f550e.0","@material/typography":"15.0.0-canary.50c9f550e.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.50c9f550e.0_1672760971487_0.1625907533390476","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/drawer","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.af490a848.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47cd421fe2d1a2276f02fe8f51e37623d0f0d06f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.af490a848.0.tgz","fileCount":47,"integrity":"sha512-jCansEUcJxnpMZdjgBJjEtCF1yQD5wGArXzrEkmsWXWzFzAOq6CjyAp1Bjh7g1Mvvgnqpl5KK/jYanaNoD7y5Q==","signatures":[{"sig":"MEQCIHgcGH9y0YW8wzLDiYo4bzJCSUCJOdR9uXRuWixpJsc/AiAp55/pSlgKHe14A6ZcnuHaEhQQFAUQaj/lvq1Tf0gekw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":992421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFD7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9GBAAotjsRCj3SO9OVWLFXr/JBKH8fgf6HOEeEj02KrT6iL3k19kr\r\n3d8CWoTDffpIZH1rBmedea+mPhB5cjoHcVNuRc+nx0IO4opyYBlCRwGtHv/x\r\nRkl1oFWYC6urLScYI80FPSfGv481fWssxBellw3Zpo57EdSWYlhF+//d6yLB\r\nHEJfVMtTDvaPgm/n9hflx968VqCfcdr7j0Qh8tq1Tl9MQ+nT19Sm2Mf+narF\r\niuSeMdgjjkOVrER5ezb+runGZ2OjEKOToX/8drSb88a5pdFr0usfyZaYTVuY\r\nyjK4hceXBgjKDC7m3n0YVw4vTOLadetP5BTuZd7CqlNm1ljoDHFNfLXk8KY4\r\nQ1QsTI2WGqQZrVXhYotfJDljmd4oTdZzfxddIHG1o2kQKG5142/A1S/qzXEH\r\nRJAczdl2jxAVl9dtXK7GirI36g+Z9n2OTtxjI0cW/tTi5tqC/eoiYzG6z7L9\r\nNWknC6S7O1pDluDbaZXq+OgbsrsvqO6RxzCjU9XXsWxGJnpf9fhgXL69CpPt\r\nOz89H1KPH+d9Sjfk8TiWAB6o+RJ8HBfG9dJ7cIJYuQvUdotMF1o7jpaKUEv6\r\nkixAHAJ43iMytJwUFMId++8MeuU8E/9reXlBZDJ1rzvt6jMs0A4oOLm7avcs\r\nCevMQ7kVXh36oPjCQqnfyqMCqdc8W3Azvlc=\r\n=ybSm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af490a848.0","@material/rtl":"15.0.0-canary.af490a848.0","@material/base":"15.0.0-canary.af490a848.0","@material/list":"15.0.0-canary.af490a848.0","@material/shape":"15.0.0-canary.af490a848.0","@material/theme":"15.0.0-canary.af490a848.0","@material/ripple":"15.0.0-canary.af490a848.0","@material/animation":"15.0.0-canary.af490a848.0","@material/elevation":"15.0.0-canary.af490a848.0","@material/typography":"15.0.0-canary.af490a848.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.af490a848.0_1672761594950_0.9491942043572732","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/drawer","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.7cf487c98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9762f1e2cc31d6f83e17c7ec18c5112ebc9dda71","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.7cf487c98.0.tgz","fileCount":47,"integrity":"sha512-Z6wGbQHBWSKROADjdmyKR8LwLj29bR3zVsjzOSaT+0SYdv5GsWfsIlV020NO1848h0X0lI42oh15ymCHVL8DFA==","signatures":[{"sig":"MEUCIEjuL5lCQB6ZgCCVfM9vkA5VyP0oivG9dQ7Q3sOqCUktAiEAxsZXio+zUWubGCUDoI8FBuL/0mtotINF8M39peD5awc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":992421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGiaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZ5w/+IQ0QGjhvDSh2i/ljVtXLzVAbF8ALaBOmuQeImCOhunoWloo6\r\nbW/mgVAJQYLV5jOknCVKUEXOJfXTY0HhbTNFtBAGQ/n12zoFl9Pkwp7EBaC+\r\nNmFS8lgJBBNr2DHDEHoV6cfS8fkk9G1U/+dHXW5jiMorzpKN56LLMydCnlUC\r\n8zRfttYUCAIOrfC//5f45p5sStO1tTMCRil83Qt6z65TTUtSCPJlEP1fa0ys\r\nZnFcCV+1AdK2ZM9dDgdIBt2q1M1ZVSO6xPqmXeaWpPuVslq/Ac1F5eDcVN04\r\npdhmAQJz3YpcsPx2Fzw2AQsfAOU94+WoQkDtAEzLGw+DJQMCFJpJmJ2uohjd\r\ngFWo7p+ZAvd4By++jTkl5NBMTPHUdlOeoVtMapTbyZJvkKlCSdcGuDDZ3uZd\r\ndtVeKKrj74n/GjejbAHkxa8HDLmUcYhZR64jMXsPOY0fCLJf32DR4QTQC5h7\r\nsvl87PWiAVBQxycsel5Wj6GRIlNngebZS4YsUPPowukyV7+TRcVQliAqVqbs\r\nKOKmLKVKbn690usnACHvCOy24Eu/gwk+G5O/3kmAnxHLBYwkut9GvlRzCtR6\r\niMvHzw83+c/Yl7zN0MsgE/Xo9QMgvCjIt0RO5bm5vbUxK5AHFVwgJAagG12P\r\nrEE/iDgPiNvitGYMvXgRNIEcNcgxaSRKeM4=\r\n=VqCc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cf487c98.0","@material/rtl":"15.0.0-canary.7cf487c98.0","@material/base":"15.0.0-canary.7cf487c98.0","@material/list":"15.0.0-canary.7cf487c98.0","@material/shape":"15.0.0-canary.7cf487c98.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/ripple":"15.0.0-canary.7cf487c98.0","@material/animation":"15.0.0-canary.7cf487c98.0","@material/elevation":"15.0.0-canary.7cf487c98.0","@material/typography":"15.0.0-canary.7cf487c98.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.7cf487c98.0_1672767642006_0.5943889664235127","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/drawer","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a52be2d5e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51c846423bc19b266c1b6dddee6585efbe8414ee","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a52be2d5e.0.tgz","fileCount":47,"integrity":"sha512-V+4aW4cRTXuFscsn6GTJAccS00wlAD8jaYCgI47QGCJG9nSfPWkEIlRDuOXNtFzh6NYRZZYzXIy6GqE8HQ7y3w==","signatures":[{"sig":"MEUCIDexAsrDnmB69G8tFNJnEmhMTp2VV6DMQqH9KCJWdTKaAiEAharwMJXj3SQbfQE0dWRxXIZ5ePML8CASNxmlNdRW/H8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1330388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH60ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJ9g//bkhVRokPEoOx2uFli6kLlLJvKXrw0gqsRIhYXnhpvruvaBzw\r\naVRN5PfU7G8VK+pozqzWQLVBAxPfyKQr2LHJ89u1jfAFxKh7hRR4fnpG4eGF\r\nD0AXhEsF1j4VjAixsCM6F55a/itqbAmQZkwnLMMPTSj9jOKocJpdKJK4Dbly\r\nDeu8sF9UUnrxhk7kvnI0rdEqYXTL6tK48WMpZ9ju8agXAUsYbxse0ZDvkS+W\r\nsBHtNe//JyNqvTFd/1DdFzFEONsTXjOJZKkGcVF/76y9mpvM581CbfVGdPRQ\r\nS3pN8ZgROBxUOxXVYa/aooyHq7JfCYT5cd7OHr5ERAQ6iXFbaBpuY1+o80Fq\r\ndfrIi1q2A+5nae+6jlDqGHYpdv5QDJFXSV7sNJhs8lkbk+JYZqghCXMkSq7Q\r\n9L/Bgo0w+3n6+PKXQdrFD0Rw2DYIwGSECU6j2lXHlCy02wFih1Ak0L9+836D\r\nUYo+/WDXfdlYktEXjfhbqt+2oR6zN2fESpXl/CLTKHKEITSJCUKbJaxEF9oe\r\nZqroI3o5RTkqEgDZQCRGO4f/H5uXA9QNRh+C+w0811ef+cFYAqa+srWHO18K\r\nY0tIeg9E5XI10ZnfA0MjVYeYmqMWnrrlYKjSSiu+6SaNa3MBkg8OP/ruL13O\r\nIyqlA4fp17tApGD/0Oz9IaT2FZk+kPfe0pg=\r\n=F8pP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a52be2d5e.0","@material/rtl":"15.0.0-canary.a52be2d5e.0","@material/base":"15.0.0-canary.a52be2d5e.0","@material/list":"15.0.0-canary.a52be2d5e.0","@material/shape":"15.0.0-canary.a52be2d5e.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/ripple":"15.0.0-canary.a52be2d5e.0","@material/animation":"15.0.0-canary.a52be2d5e.0","@material/elevation":"15.0.0-canary.a52be2d5e.0","@material/typography":"15.0.0-canary.a52be2d5e.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a52be2d5e.0_1672773299712_0.18128017238280147","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/drawer","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.e38ba17c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37d98a2f225935b38a5cc516ff064cce600ec966","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.e38ba17c5.0.tgz","fileCount":47,"integrity":"sha512-ywdxcoBKNspoEimEuoJdjlB8mq+hB/YTYRxJ01kYQoPvxlx9s0vrDZJENp3WgBVlxHLstm39ZH07FOZRHUjCQA==","signatures":[{"sig":"MEUCIQClmhOoT+KrYK4tFPNmxaDEWujWnZXCcWmh3+kHVvgZzwIgJzNXXd1HpWJtuymibegUM6FmNUIqSHdLbLpE/h581cw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK1tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdBA/+Lc9MYQXOUZ6yLQgV7eQAXyt3YVlyCUDTLMkaFrFfeOm0UrGD\r\nT+y+Ps0lhDJh62NaCBuChfByyzg1iwBFw+XaSp7RrlSpwWvtbQshGtt3Kage\r\niOQ7aMUgK0EmPNOPCAxfoooYOO8v8nXMXlduRsKSr0+eDft0NsL9CHwAgHAM\r\nTwqq5j4xJ6KPkrglZ2aEjPPgMkcVSIn0fzUPlT8L1LaLf6fT7XxFYYJHVQ3X\r\n1U9sDWgPCKVicpcI0ESvdkYFDqMHnLDCwio0OHFPZpQtVYck0gPd+EjmWIeo\r\nYGeU0QCLon79XlKhIKdbrZo38jSAOV1Bk47YBcRMjtFQQvlAYfmcJZbR/I10\r\n21TrbR2h8iXt5/1Qb5bfdqs45Xm81n+Awz7mUrM0VrAhfHzLhPFJOq1awzEn\r\nYL8E1A1cPcr2t9wH7srGKQW1nQUtFK9EfOUgdimLBwed0gRpQ69lzQOMRtna\r\nMIpyZ7YOMHNfWLl4fJDta/Se5w6LKFSZpy8v1c6yJp+nxm3ONPrJKbzOt5UW\r\nrVnjAFsZrY3sGSZVmORWBe9IbYoeu1Bfgq932mvxuqVgjRtTDv6/Ejq/nmDR\r\nLU1KTNFg3VgW3LXtZES6F5GcZq6/uY0o6PCaMBVhcor/wwBTJxG0aCj263ke\r\nAD6ewVAIxbsgMHcKXtV7KhCXP8LxPNgAeDA=\r\n=ZRHE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e38ba17c5.0","@material/rtl":"15.0.0-canary.e38ba17c5.0","@material/base":"15.0.0-canary.e38ba17c5.0","@material/list":"15.0.0-canary.e38ba17c5.0","@material/shape":"15.0.0-canary.e38ba17c5.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/ripple":"15.0.0-canary.e38ba17c5.0","@material/animation":"15.0.0-canary.e38ba17c5.0","@material/elevation":"15.0.0-canary.e38ba17c5.0","@material/typography":"15.0.0-canary.e38ba17c5.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.e38ba17c5.0_1672785261285_0.14189654019600106","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/drawer","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.49041a6c3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0667ea0fbc5f4c092d7095f7f1c2b46ed719b197","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.49041a6c3.0.tgz","fileCount":47,"integrity":"sha512-GiWLXmOZO1u1crY9MlcN2FXsb5uuT2jxTo9a9U2mRTZvFdbPQjO8uswA4oi8Vo1fau9n4rzD94jF3EXupewSRw==","signatures":[{"sig":"MEYCIQDOis+jWQih5rQvLRhmgi+aCeaKOwTP+y23eXnADM0DfgIhAJaPbLrhkTTb+FD+K+dgVw/x2pLQ9P+UIBNqFs9xRWwo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZkNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrREQ/6Ak7UFf/hMP8lbpbpGDZ/hVgvwLiHj9h88YblXVKQiAdf4N/9\r\nVlhLi3JYHmGQyjo10vf+uzMHG/PWtzsK+z489nIeA+VjJL+S8sVABQxNEinM\r\nCu/jp0UGR6PP8c01E5Ur3zrB5FYzEII6l/3CmXMAoqEyC/tcE/BKahxz40We\r\nuWMy+wAP/9U1t76OsIhdFmxffkBUiD3Zkft0lRuVjBcakNn0AuRt+Gxe9zMT\r\n/VLqh8OjLJ3d07SEttlyl0QHeB9xPf8qwL51uormhA6g3P7t7gdc/ZPqIbNf\r\nDui50si/GjhHquNpPOya7gY0DgMnYJUNRX/lYDVEuIJ1VDBs3zyI3Dn664Zx\r\nupEOgkCy6FHII69246t5h0hTEOHii5Vfj4EsVuJIBFCeU3ktitLsH5gx3faP\r\nsMGrVXmfPcOCTnD5Zs9pPmZd+dU4gmPW4cTJcKN+pW27aCa5VmKJ/eqSpCWo\r\nbLqQ6mS3Z2n7NgJRzly0rKE61qYjIsKJKXolYbPQeL80mDd0+v59ocVmbxK9\r\n3CZB4ny8qEtYyogndDidWhKdibligG0TM9Qv2uF0ui+FjW7TFeWp8jmPObqj\r\nIFYS4Caqlf4ZcqdYhtIkg747UhVD1s1OIYSCtVpzxCG/FWjP7HknbGamDCza\r\nX8NaycrWp8WXB9VeddlhaAKqjUulrx6NY0s=\r\n=PV2r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49041a6c3.0","@material/rtl":"15.0.0-canary.49041a6c3.0","@material/base":"15.0.0-canary.49041a6c3.0","@material/list":"15.0.0-canary.49041a6c3.0","@material/shape":"15.0.0-canary.49041a6c3.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/ripple":"15.0.0-canary.49041a6c3.0","@material/animation":"15.0.0-canary.49041a6c3.0","@material/elevation":"15.0.0-canary.49041a6c3.0","@material/typography":"15.0.0-canary.49041a6c3.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.49041a6c3.0_1672845581456_0.09465981869022966","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/drawer","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.c492898c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cd56d6ccf5ef320cfce8009b410b034827d0d08","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.c492898c2.0.tgz","fileCount":47,"integrity":"sha512-ISf+Lz6OfWak/vZiglIVeMczJc/+R41JLSAUuyxFqZdpSiQUhbk+A7mNaEB7h0bHvXOBRchqGWaiHbCLP8AzEw==","signatures":[{"sig":"MEUCIHLKsxBoLHngaohZTmRHU6TQFEfoVLJtIJL+dcZTJS6xAiEAk18zZ0yqUPzAzAtYRWC7nigd9EcwYrta+fdLOqSdBeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtbnJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmob2BAAn5ypf276lnB1G1H9eQkRH1CCm/6RFCCjXTdIkX5p/+EywZXB\r\nXvi9OjtCI4CCSOL37UIw+Qu8O1FtJxyOsnl8bsj1dYORSuZ7OYU57dl1ybr1\r\n5faBh8LNXkBBnCzbk0fI3AtOMdxO5L6TIP3RT4MHwOcbLnXFvk3DReGjZAWb\r\nFhakcXeIT+2ffwUim/WbRVUZ7r9A7qBjRdSRtMHnAEHYBkquVq6lb61YvR2S\r\nfde7qY4NsVjIVuBk+MW1n8AgpazUyZQH11k0PL2h+Zk0S2MpmcecZSgvPlVg\r\n0MQLhFHUtJmXZW6ECqacwINW6GtG7iRd4UygfxB0QNy4TYY5hNs4aKSgYXXa\r\n3pyOhG6b6AVanpXpKDWY1D5RJQrujRLCTE587sZLSS2tqoGrMSp8YrWhgWjX\r\n9gfKbcNUDbYGKMZF8Olo1EQ+vbtKbPx1nqUOQN86mYT9rsaJgS4yCHCxkyO4\r\nTXjlHlYx0z9054baJo2oV4FR0elq6q4+at8AqZS/F9iN30uGHlRX2qZnistv\r\nLBfK9yCgtqOHvnDM4o58N0usaNWqrSdqLnnJgbdyCAzUFQzN7NLN2JfO+fHR\r\n+wT16UAsFYeGxuhUQ0khnluWgwcy8ImVNvxOY0pI932xjdRv4pX2K8ZLdFVF\r\njyCUArXCdAvADj2bbDEVl5f6vNg7yUy1ZyY=\r\n=Grza\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c492898c2.0","@material/rtl":"15.0.0-canary.c492898c2.0","@material/base":"15.0.0-canary.c492898c2.0","@material/list":"15.0.0-canary.c492898c2.0","@material/shape":"15.0.0-canary.c492898c2.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/ripple":"15.0.0-canary.c492898c2.0","@material/animation":"15.0.0-canary.c492898c2.0","@material/elevation":"15.0.0-canary.c492898c2.0","@material/typography":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.c492898c2.0_1672853961518_0.46484120232806414","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/drawer","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.d7a2277de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bb62c63fe1d2fcc52b3299cca70c91c56370349","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.d7a2277de.0.tgz","fileCount":47,"integrity":"sha512-MEWKiTNdPFv5vZgceK/0x8w0WMGun0xLEzC/JhAM0PFu2+ImNlooCUciq1+ez3DL8c1JTJOhI+dOl3YjBQQFFA==","signatures":[{"sig":"MEUCIB3cKfwnRR1aBgVuy0xmBo9I1xO854jUdRpVA45CCMa5AiEAp3FIcX5YrRILh0hUIrTUhExh2fpGqpEje12pSSvy7nk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfGfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrORA/+JzIgFjoPXJkhuAGtyRsZiomvoko8oqG44R9GLKmSzzLDc3/C\r\ntQdssg/meprXanpF0WEWwAAtFL60F4seU2Yf8CUL74p8sUCIC8E38cZWP2Cs\r\nttef7Ouv+QVjTt2Kpw347MofQbIDYy33w5U2SamktOOf5tw2irNxfQchXACj\r\n58HduE2iZZFPp/KyMf3F4in5ysCIjI1Ygu2n/4JsP9ugh5WW/aUZAFt4HHsK\r\nqwur8bSdNwsCEvOiyLlWFJvAvFmOE7mghjm60Vb9+3gmbXQku/Q1VLkrbdP4\r\nzIvY0vNODZH5GXXsThPp+zjUQsRJngbdROGo0EzZji245FAgGz7tOxtdkvkp\r\nlahCugnxeATFPzid4F1YYJGBGEljMQGCiWAvl0hV5UkHtBue2RGOmAQ9AmIi\r\nkvnO6y9GIwSCukGMFMW49D8pLrZZhdF0Q3bBhe5J6uwDZY3IDUI548J7bn+Q\r\nUAcjYoTSGS+Bs7yn2y+tCy3gZbSKlZ0idSSj3qCcz6z6c1l+dVi0bl0U1SuW\r\nRIOpsLIzt1jo2FiRoKDFLkR3YOvHL4I4LCAoMqbgIqMKKN9oON2pJjxXWR5f\r\nymqjvWfBDBIEaZv/rhMhBcnqqE2g7TS1XpkHTwx5Wc1tKebzQRrwwvqG11Fl\r\nrH0dUx+52KlP4f3b3gi3nLzDide1zqqVuaA=\r\n=b/s8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d7a2277de.0","@material/rtl":"15.0.0-canary.d7a2277de.0","@material/base":"15.0.0-canary.d7a2277de.0","@material/list":"15.0.0-canary.d7a2277de.0","@material/shape":"15.0.0-canary.d7a2277de.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/ripple":"15.0.0-canary.d7a2277de.0","@material/animation":"15.0.0-canary.d7a2277de.0","@material/elevation":"15.0.0-canary.d7a2277de.0","@material/typography":"15.0.0-canary.d7a2277de.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.d7a2277de.0_1672868254836_0.8055065543179867","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/drawer","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.fd95ca7ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"898286feda2430a31eb4b13737791bc09dc7649a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":47,"integrity":"sha512-cRSHHU03Q502iJr0iEQFYEhdsIC+Gms43qXmAnjLFUs1EPDxlf/tKiJnvQX6QI03Z5PBoiArCRFjd3/uTvp2KA==","signatures":[{"sig":"MEUCIDedQSmR2imgEkaiOZhFB0OG+KqEWfK7KCxU6X8rnpx7AiEAwc1cWvirDPBOr/K1XBOc3TZquZED7MATqvNSzoRiGWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiInACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4hQ//TYk9XX+GpltLXrYHXzjHP/tZZAtB5nQOSZW48sq3Xfrg2iEz\r\neoIDMz4AkB4q7/h4BRILgrfG8AuRhjVVupH5xsFllKoshO2kmf5P62YTm5Mg\r\np6Gr78tgE4XwtzL8IfJQ5R7xDnzHIb4ZN/vA4epC7tnYyuNCQ2Vz/esioLk5\r\nBcwBbfR1K8IEk06cPmkdskOI5sVLbAxKw17mTZLIcbOH09hJeIOHDfS+88ER\r\ny15U9ElVOGXrCm6f9cq7z8QuQJXAdBiA+C1rW6CfqnTgPvH3vPn7zubzCSVX\r\npgIHnz6eCvQkPtfFj036+g3mHxy7XXWwkH49HMXo8RAu2suRwzgX6RswUcDL\r\nVTR4bLcS+0GCdDFzY9iplul+6+ZXPmFJFSLax5mqWYQUsvdD4atdofV99/MX\r\n5CYZsLrwB36M7oFT2o+idLrBiF1cinLP1noFRu7pG7RyoZgkU1EBobrcP2Ph\r\nMT1ESiPeCoZ63V5rz1DuopITOn+7Tf69kRK9r9cWkRcrk9UdCwAFMcWcXRIt\r\nmsnTlf78DJwi4VF7r406+lVK+U7+pbj8vi87m953c7zhNp0vvwpDIXFsydZB\r\nWe2M/pmaWCtYbqUYvQA2/Rd40eaP16CcORhpH5HMLyCZkSvHwpPZdRR79vem\r\n/nnXaIcxbZrkY1T6/2iumt8qfKqjX3pOaB8=\r\n=GwqF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fd95ca7ef.0","@material/rtl":"15.0.0-canary.fd95ca7ef.0","@material/base":"15.0.0-canary.fd95ca7ef.0","@material/list":"15.0.0-canary.fd95ca7ef.0","@material/shape":"15.0.0-canary.fd95ca7ef.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/ripple":"15.0.0-canary.fd95ca7ef.0","@material/animation":"15.0.0-canary.fd95ca7ef.0","@material/elevation":"15.0.0-canary.fd95ca7ef.0","@material/typography":"15.0.0-canary.fd95ca7ef.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.fd95ca7ef.0_1672880679164_0.5649682811043708","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/drawer","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.1eb44faf9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1d1c72d283394458205cd19d9ef1bf31ea1c9bd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.1eb44faf9.0.tgz","fileCount":47,"integrity":"sha512-ZU0p2LtSbVICk35npEOR07TcbN0LrJlHfk/aZMZQ4FceoVuJLq84ayEkDpAAx7P9YCwLz8DpPWnJ0Lx0+JErIw==","signatures":[{"sig":"MEQCIDMlPb+MLhlt9d9ozTKY36NHzQ3leTuoeTgTWUTJ+aKLAiBG/4rajL9L7bD69tqVrxyfWQvgkltuUC543XaxjLSwfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpQxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrC9g/5AMk3GY12JjhOD9blDpcPlNNgA88QIMP+7JUzizHvNuRewliW\r\nAcxK+OEWyFkVYtphekI9JGf2QdjesNmls+L14R4v1qREUq6wAOo6v1NDqgxL\r\nmAUMry98KPDs6a0wnM41SRPoabtRoMg2udQzrggk+uJPvtDQM3HP0+X/FwVV\r\nnk2s9VgZ5b9Dqf9gy11CxxfFIu2jLOjdL5OgVrSYzHxUzf2unISR8USDTBtW\r\nihbqjgFU2k60FHWgvaRN4PodZ84UwfeetoE1FwBrM0rpfeXzgmUH/Y6kX9le\r\nDGSy0PwNSmMmNStx0rhsabHgegGF9VAsQ7Y4mv32sSb3iSqtFOEgqWpGiCTj\r\nnD/Q4ZQ1II+p40cSJI936L90GD6VoKAxQWo5eBEtOr9Pmr+rkIIiBZZ0Kpeq\r\nunrcpDKmva7NQ6PEKwt1+AvtbfY8lEUWVXyV8IXprHKnaA5Nllh7IJBX+V4+\r\nWqbAgV1N/hq11YnT22glwnHwUxxCA163CqcoXRTH32HyL+t/K4pDHDqXPlYb\r\nCMQLaspewdxEdSA62Mm8v8TjTajQ8VcequQGnVHp9fVyGy4DiAKWe1g/VEC9\r\nGGzpWxnltNVAVTgTqeH4KV/7dtKwQp4lIoLbJuXeC7gxGJyBqmIyY1Le8DnU\r\nJaGeOA+vtZ/iA9l/Yn7CkPGaK/q7gkO/v+o=\r\n=SfM9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1eb44faf9.0","@material/rtl":"15.0.0-canary.1eb44faf9.0","@material/base":"15.0.0-canary.1eb44faf9.0","@material/list":"15.0.0-canary.1eb44faf9.0","@material/shape":"15.0.0-canary.1eb44faf9.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/ripple":"15.0.0-canary.1eb44faf9.0","@material/animation":"15.0.0-canary.1eb44faf9.0","@material/elevation":"15.0.0-canary.1eb44faf9.0","@material/typography":"15.0.0-canary.1eb44faf9.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.1eb44faf9.0_1672909873515_0.015989282780777492","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/drawer","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.adcdb7db9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dd4003bf3763bdf9f66c3e4eb9ef90e95d714e8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.adcdb7db9.0.tgz","fileCount":47,"integrity":"sha512-GkfNoVOPlbLtwryjTf+WHmXlN9WRhhJVTv45V7cPH9641xtKGQ7aenr4OPfqM7atShtftguRdHMFXs5GGQHuYw==","signatures":[{"sig":"MEQCIGzddawUq6u+aXj0QdIxx02fSmw9ArNaBQhSyC70K6UrAiA7vGcZURtoB9/GMHYsFK9i0JAY2oceXJ1atUwBpDCXYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvmVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWFQ/9Gnr8XPhbA1g4ZXKGZFle3r6v+WRoYzm7x0VDtVdnse7z+olx\r\namDXVwUscFYpURLpkPC+E4JdR3ufFWqKvLHt6K1SSs2Te4SEiSnE9IJH7UD2\r\n6YkdAcQi7vUPClEk6Wyk+nRcjbWz2VQPb9wqLH+68EXGtdEyd8RqW6F5jLDw\r\n55eAvWOGhz5hVA9Go4Ptw5epIiYHME6/Qn7afhtHcuS7DsQsjtY3YJrpNCYR\r\nHEGFFVI2lDUyW41gJK7YIN/5Sp167NkNUDJgSTr7ja2k0Hz67Y67rBW0qvpN\r\n1CkMW4yyxWWgpXc9Cw7Yt2n0aDNX3IDnlyt9SBR0e13CQnlc4WsivQk0h7hI\r\n9Z6Jy2kO6p4cIEzd4N9dMMH00W/1AMytG6Pb5t7NyLG4WI6ONWAVhZCMOp6d\r\nW9Ruzkuo6Z4KMkoEne7rnkj7DVOD1ija+wO4gHf1CEMJfA53oz1FRSm8uM4K\r\n18T/sLfs9UXg2yM0qQbzyQsowfHtbIh7S68CTTjjLyH90I+EWoePHQqbRAWh\r\nX/QHOfNIl7d+WOf6LYVlgP51nVW29WIdu68C8XmxO09g2Ffr1IDb08eOigw2\r\nLOMXrq2xjCjTebZ2NiZwYtuM0h47jbJffCJbPYUkey7MWdrObYB6jrkXADQm\r\n2vKRhnoy6ilAQwXFou7n1he6w1wxrE1RX7Q=\r\n=gJLR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.adcdb7db9.0","@material/rtl":"15.0.0-canary.adcdb7db9.0","@material/base":"15.0.0-canary.adcdb7db9.0","@material/list":"15.0.0-canary.adcdb7db9.0","@material/shape":"15.0.0-canary.adcdb7db9.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/ripple":"15.0.0-canary.adcdb7db9.0","@material/animation":"15.0.0-canary.adcdb7db9.0","@material/elevation":"15.0.0-canary.adcdb7db9.0","@material/typography":"15.0.0-canary.adcdb7db9.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.adcdb7db9.0_1672935829270_0.11192941534801526","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/drawer","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.067af7eff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a91706e15d9b73d137ee35f4af7c074e2c46a8f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.067af7eff.0.tgz","fileCount":47,"integrity":"sha512-oRNopd8GkT17e7p7Qhwv12e8wZQGexuwJnE9vucQXcGNHOCWBi2rPhypX3+4xbwzFOaDlB/xypLGddIEm/N7bg==","signatures":[{"sig":"MEUCIQC9MqHglDASep3wwX5tStrWoCIK1peXKlp7UrHv7sahwAIgBlrEDbEQfWlnohlIk/ii0BcbqsGJNz/gvgs02aIg76M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKwfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaUw//YK/zUWJ4L9xru49skVdpYvFpiYGjxRb0d74ZRco4Po6gzXjA\r\nUOYO/acBftqpjZBAYJclW+lgb5CUCvq7p3CRhGbzT5EuGatenfECIY8gzPpv\r\nCfP4hwaV/lylQch+2FYhpaP+pXFUE5O46a4ck2VVkIwyWrlQKfgYE2qCTb7q\r\nP8AWhVHcSHDkyXDeayi83kSKFxWRkx/nHRIyM0qEX/njfymIXIJcvaPSS/CD\r\ndtU/rhJsgGru86S8z97rpFkMe01R+lKHHUJGHd69ltobm67dg0DkNuDYnVFs\r\nUWuKiGm7YlBXMj6WIapbShbRhi053XG/OgfjO+INhUaXvQ1wrSL0cCgAfq4y\r\nmXAk/GbRAdZgMgQKHrNIY+RZ64pxTHfxCdtwQ23CmqIZX9U/Rp42gIcPdobc\r\n2ZXKxlBrNSNq2P/stWKrX5gzSSIedmK+jqyI+QkpZxAnG4UAPJrfe+3x5rnL\r\nFroRIEHq+EnrW5AKI5gnV2BHdkQLGERWzNjmiNDgaq/M5yIWoDwGLpGZxRfo\r\n69MwVBtYdtUiTOdfmlhKCEuU81Y6mvXAZMgdr90tq/IAO/Bqs9sfDsLmZicr\r\nm/vTFerk7KVdmRp7PKauXhdcW6Y+ciuykjfzJ84r3D3VMnez71/jw6FWv8SC\r\nDpgKVGrOTDU8x0NdiZ4AnfCQ5x/LLLm1Og0=\r\n=4lLH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.067af7eff.0","@material/rtl":"15.0.0-canary.067af7eff.0","@material/base":"15.0.0-canary.067af7eff.0","@material/list":"15.0.0-canary.067af7eff.0","@material/shape":"15.0.0-canary.067af7eff.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/ripple":"15.0.0-canary.067af7eff.0","@material/animation":"15.0.0-canary.067af7eff.0","@material/elevation":"15.0.0-canary.067af7eff.0","@material/typography":"15.0.0-canary.067af7eff.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.067af7eff.0_1673047070639_0.9453662606351272","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/drawer","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.21d1196a7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97923eb605f5087e3a6415405ee32a5de2222ab8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.21d1196a7.0.tgz","fileCount":47,"integrity":"sha512-W9S45aUFnQEW2bhj8Jw6E5U/noVb83/pdDYAPWlDeg4rw+iqGBBwpI4zjRu/wXyN2GzXEELkoJdqFz3r30/7QQ==","signatures":[{"sig":"MEQCIGEdVrVTO+/INOnRxE/w28AJozDuc7g+A+Pgag81RA3QAiBDSsTQiTyIvv8wnJmljxj6+ou9d6CeR2NhdteoKM0uHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju/A3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZTA//WoFB8nilEmECEau8Dw4AtOIbrncF5JuaDppWVJaW5iRgtbM+\r\n3PKqaUCgE2YpMhwifjSenv9G3Ey5/tcOpUlHzxg7r/myJGxmzwIiKiQxlyOH\r\nSb7ZNJ8rNE37dIPPuA+Pp+P8Q4LPSZVzQhyeQiThwPsKHNIlrLmo7kRavK1v\r\n3Kv8GpnlFaZ13aC+7NVvKmhoXTKGvOraWg2wqYkUmE2TTfIAKarWOVgpG5wY\r\nGSgoyzh5fZ+8Q3UHGoatAW/GFYtSqz4uLqnK61FVFSAhw5sfdiLaxVpx43UR\r\nQMVFkQCCZgcBsuv9CCakfArIZH7chDoz4oOwbWCzr3yd2ppMlYwFrdoaXLXK\r\nVGWYUnOC1oqwYKHFMtJaUuetoXVnEebiYB+/vWKNNb6YSltWB8Fy5m4hcdY/\r\n0nXtE6KGZdnbxd+LUCMsKfPj7quOiYOlvparB5NUoQlJOWx9mwkUnzJeMH2W\r\nwOhDWyg+pYMxR1b6Tx3qr39u+1JhO2Rh7PD3ayPcjvUIM3DIQ9/fMR4TkVb4\r\nuWtlj3xX0f0sEZgyg+wkJGKYNCTNtoEjNjYtyExQGqJ6ZsCFq1ujJYazzCSf\r\nxmQD9J0M/3DuIH/jkEPIUclHBU1YR5S6o29F53q3pwAa7Setdwkpo/bd2Kq4\r\nteNPKwbEQthBgw1pqHbHp3YA2XnXeIsiUUc=\r\n=DUMq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.21d1196a7.0","@material/rtl":"15.0.0-canary.21d1196a7.0","@material/base":"15.0.0-canary.21d1196a7.0","@material/list":"15.0.0-canary.21d1196a7.0","@material/shape":"15.0.0-canary.21d1196a7.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/ripple":"15.0.0-canary.21d1196a7.0","@material/animation":"15.0.0-canary.21d1196a7.0","@material/elevation":"15.0.0-canary.21d1196a7.0","@material/typography":"15.0.0-canary.21d1196a7.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.21d1196a7.0_1673261110997_0.29455758831987455","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/drawer","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.8d2d8d3c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a0635d1a43937fffe38ae64a31d8501f1418199","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":47,"integrity":"sha512-nOn2057H+aZOci9jl+W/Nvq6ulnGnbpjJZ2IhDTOitWPPXLh628ca8wu6cut+0Sm7+AVDRVdHRcUHAqeMKffWg==","signatures":[{"sig":"MEQCIAc0iTnO+NwW5W3L5a5Rrg/ebu0SQY3EKJ0hOeNqoxeCAiBUREwaOHSs61faGuXiaDIWiW2iPRXVBvSWmlOE52NszQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJRwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKMQ/9GJdPaz8IsLROstxSwALogGoYx7piAUCBh0w4li4PpGcdmp+h\r\nQZ6E0DJn3cZsyGoJ9gvN8gUxYrKUG26OdWysJKv3EHVbkaLUauPMUksxAAJs\r\nKl/zdvAAyxHYRmeNsR+VEz2CXF60d+hHwRtg1OURjhZR2lUH1P0hbUms0v+r\r\nwY8yFCF35tiLkEiRc9CAsiipNdsj5FCcptCHjogo/Ud0uYvr4FdMgkC88Aq/\r\nEWQW5rAEVFlybQ8JfpNMEscCsToeCXvGwT7kyel0KCWwpK5mZJAp/T5i7/t3\r\n7IsRPkSV+GdFR+rsBSbfpXNI5V1nXESTx7eV4a/MSsJJbsZuVPwVzaQQURif\r\nuEVAjWl6s8f6cT1kzMAW/l24r49PEWeZYI0mafNvGBFIleFWGlfTBdlola2s\r\n0RVQRorh5ROPOTzp18oe/i5dBRXk6SdP6SKhZKhxIMt/A1/FL3LLT33FMfdh\r\nT8/GU4upru2lAKmZiQYstV2CUceHQqxG493mLYNadiuFTZlP1Egn9HDXV7wV\r\n4AiZQ6kvRHwWQ2PwexAHhEV/63Ts+0P7PEmlZ2tyM61TFxtgzl19m2vZ2Klq\r\njTmgzekcA4ZGgz6eXeEC4jmPJWgs31nod7PBTRuToFZ/wC/R1w+Lv/3iz90S\r\ngTBn7v6eiUkEdNG8P0PMvyxs6LaPF4C5JbQ=\r\n=u1bS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d2d8d3c4.0","@material/rtl":"15.0.0-canary.8d2d8d3c4.0","@material/base":"15.0.0-canary.8d2d8d3c4.0","@material/list":"15.0.0-canary.8d2d8d3c4.0","@material/shape":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/ripple":"15.0.0-canary.8d2d8d3c4.0","@material/animation":"15.0.0-canary.8d2d8d3c4.0","@material/elevation":"15.0.0-canary.8d2d8d3c4.0","@material/typography":"15.0.0-canary.8d2d8d3c4.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.8d2d8d3c4.0_1673303152355_0.1004311163378","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/drawer","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.fc6ee6c32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9674f28f265952babc515f6b957263b3c7c4004","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":47,"integrity":"sha512-cYAX8yYHmZrMBxe1VTBOOVDYCKOPSZ6KaYRYAPM/SZ9HxzAlrGQUmWa3sgIZe5CYx6PnYg5ToARttFl5FcHxwA==","signatures":[{"sig":"MEQCIARs4UTCugPq9hH8PWFZYVvS23O6EeXzPCBP8cMSbrpCAiB7KcU6nXKbrfYFZAlJT2QSfliDDClkj59sHSiomc3Rxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZKOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZIw//ZIHfNWaJZ8TDGhPEOzy22jEY7sy4NnZcgNzgtZyWwrRWbPbo\r\nXSOlcZtX6ffG6qtP1jvncGZ7lPVND6AUlSdIu2P2JovGCjAVnq1gLd2ks5Vp\r\nR6nkzIloLW3WM5Nph7+ShSa2m6IVdsfU4EXt3nVnfzfoUVqvOAXOeANV9bKh\r\nXcAjQ8tjo88fIOsY3+ubYEnyNp5qIQeqoGstpjCR/Ffb3fXVgyBF7Ovhjdjp\r\nNuauQADIrhy4oiAQbcWGbQi8/nXTpZrsUY8TAkodLdvDfHHvv/K0d8zjtvkH\r\n7E5V6J2QIR1F/HN1K5FPfRvzEvDLkEQyQEQN8YRGdGgJM+RqJY0O14H7JVNh\r\nIq6l1SpSvgpMJZTE0UTXwiIzwIxiQ23FFY1g6x0GTmEDa2OibYHsERPImc8M\r\nUEiy55gtPR3hhzxpO8RIFhNF9pQ7RPl4xKsrbHPnL0DF5wQ/Q7e5TGdYbtGu\r\nKiactPo4yzkoJuSjt+fPfUp/SeTVeTZBmEZz6IlY2ap9Byl8HOTVbMRkZyeq\r\nE2Wiq/dIibm87ryxyjMXE25ovJ3WFukJJGZVxvoDrLemb5bgOAlFbA/ZGQjI\r\n7L1WT1x57TXtTjNXlwHQQWGRboY9mZxOyWW0y/LJL0ZQ4gHrM/GhPzpo1Ll4\r\n2iX/QrTWU+nVk+ZX6j/lYLpmL1gGqoNzCDs=\r\n=nQNG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc6ee6c32.0","@material/rtl":"15.0.0-canary.fc6ee6c32.0","@material/base":"15.0.0-canary.fc6ee6c32.0","@material/list":"15.0.0-canary.fc6ee6c32.0","@material/shape":"15.0.0-canary.fc6ee6c32.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/ripple":"15.0.0-canary.fc6ee6c32.0","@material/animation":"15.0.0-canary.fc6ee6c32.0","@material/elevation":"15.0.0-canary.fc6ee6c32.0","@material/typography":"15.0.0-canary.fc6ee6c32.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.fc6ee6c32.0_1673368205144_0.11961454856415088","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/drawer","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.73537ab0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2a47dbfdc60253de5568bbf4c27c4c4be5f9798","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.73537ab0f.0.tgz","fileCount":47,"integrity":"sha512-m7W6iGFPEI6qlu58o7NOYBMl5BLbmvG1KZnm5kb1N+2sLZlmlICm+cAAYLcElOIfAsWK/1UW92LtXo4EDJr5RQ==","signatures":[{"sig":"MEQCIGelOUrPxpWelgCT2bIcwE/2zm/6RFOXOOH+oYdoRDXNAiBRyo1de/FHhelpZxzhoutahZdr9oQkcpnS354waLexUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvarIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgZhAAj7aaphB/Rsjibxo/MLNgqiCmagyNge6UkemLTTEw4VqtYhui\r\nh27nD5Z8jF7lZpbz5e/3wSz7KaY1pRiucJmgsG+xt9FRSHiAI6GSyIPNrCVj\r\nnZljm/tMuInTSNqy0CiIaK6o22EalXpJqbYHAYHY88CeAMq4/hLB5FFKzPIm\r\nd1aBlWEZyDJLS48rZbGgaI1Mvt1og7EqUCkl/aNLtzyuZBO6fiXc8Kx/gRjs\r\nUw/Cqvhbc8IavyoCAokL+Xcw9mz18Oq7V0f+fXUQuK4+hkLap8PStOvI/gsU\r\n12JLWGOCcYvaKoiACWF6fOIzsFd+2D7WC2h1rlyHVy5w1oc1nUBjCKHOURkg\r\nsodUec/OllPYmC0Q6vUer9gwHmhVX7R39jFsb53GUr3quMzyFlyUVRF0j9+f\r\nzJYGgEMWqJt8oiyOLEdTdmjist6zxoQDqu2FzmoslwclubmX4W3RkTEyKa5B\r\n4U0cdC5CsKDdnCEqEcC7va9h+D7643wkggXXSJQ2NBmDjbywqKqGL/JknXZN\r\nsSb+1qxVD4uGZR7q24LF09ctHKNEv6dAgqOMVrxQ2Eb7lGvvUPr9/wM7b1SI\r\nOZmM4wbzGffHOHFfs/ksW1dtkEqwgZVegX0sJNAvGUdpEMvDGn4sILaSK8bE\r\nReRnylz6/eftpzttsqg6NOqSoa+ddsc5YM0=\r\n=Upm4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73537ab0f.0","@material/rtl":"15.0.0-canary.73537ab0f.0","@material/base":"15.0.0-canary.73537ab0f.0","@material/list":"15.0.0-canary.73537ab0f.0","@material/shape":"15.0.0-canary.73537ab0f.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/ripple":"15.0.0-canary.73537ab0f.0","@material/animation":"15.0.0-canary.73537ab0f.0","@material/elevation":"15.0.0-canary.73537ab0f.0","@material/typography":"15.0.0-canary.73537ab0f.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.73537ab0f.0_1673374408598_0.400647822317729","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/drawer","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.684e33d25.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c56dc67a441030cb4cdef2030309d34c1d5266cc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.684e33d25.0.tgz","fileCount":47,"integrity":"sha512-/KMckLf1PYU/H3PXnS4e0aFl03qG3JlSv4LGgX6juJufcONqGTl/m63EMO/L/eUy6H1CRrXmVDjik/jzHLyDhg==","signatures":[{"sig":"MEQCIFywnN0rkLDIGZq1oXlNplQsZ/LNTmEU4oQQVki26hlaAiAGlouHjdIyFIUDjoJRiD119uCtFNKsamuvyYnUTOZcbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbp5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTkA/8CYZHXfkNbs/6mCfL23ncDV8DurW11TDgmYoCGCQPIr+UVIp5\r\nsVQNIkhSoZonMA6q20SvgloxpgBjpQ48BIJlOb532rY0wX82Z8o8OjuXQE6O\r\np8VrEE2DLuGIcd4GI179uDzF4vYx/y/95PPMsoXnmoY7CJDAGKxZ8KHg6g3U\r\nsRypIErDGXgkjjQU4+u0IwM7Vkr3satb3l/z4H4C1j0kAutmT3Hl4QCkG6B9\r\niU+8x3wwjAh8vcVq7mWw824O9Cod+aeBTfhxwyg6JKEeU4Cq/WWqZ56LesYV\r\nsMTud7yJo/A1+KloeEAzzecc6p7g2q4FQhNarMB6XlPhaOsykWRqiJU7g6K4\r\nbUa9p8Yjdvh+eVSBkd7kf20/o1VdJUuIMl2o5/98pRa7m9VZUglYgQXClAEn\r\noZMEQLu/PwRtV7/qg6gxp9DEnrs4IFNBspa0fz5nYti0t3rLYKz1WWo/PRuE\r\n+HB1m6vLTh7u7UlnHmzcPcj3JI7BIkvZlO2IDVUoyJRzcoLc33YYAoL+V+8f\r\nqT4YJg7FrYo4VRo1wGxdPB9pr86ZudnBd5r25OUbQ6FbZ0i2djqaUSUEKGjn\r\n7LKdT3sJwdrIPtngZd8s8C0/6HTOwjBeSh7fkVVR+iFnD0eFF+tj9snwvp85\r\niW3pdIqEFHQuic5F/uKhtEMhctPXp3POHY4=\r\n=vnki\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.684e33d25.0","@material/rtl":"15.0.0-canary.684e33d25.0","@material/base":"15.0.0-canary.684e33d25.0","@material/list":"15.0.0-canary.684e33d25.0","@material/shape":"15.0.0-canary.684e33d25.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/ripple":"15.0.0-canary.684e33d25.0","@material/animation":"15.0.0-canary.684e33d25.0","@material/elevation":"15.0.0-canary.684e33d25.0","@material/typography":"15.0.0-canary.684e33d25.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.684e33d25.0_1673378425601_0.006506644046347709","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/drawer","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.0e89aab6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7cc0a40f2f89031d350597db836de9a226337d4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.0e89aab6b.0.tgz","fileCount":47,"integrity":"sha512-mkm8XoOyidlnwC2R+KxiSBl2miZa1azh8u1auA2H1OaV7uRk+v9eHdhCV1t4MO3R9/JZFtdplwm6EL1kvgePbA==","signatures":[{"sig":"MEUCIDHg3UjR7rYOV6q9VKSV0MNTCjCJDYMzb/CHmg6NzfbjAiEArLuRkGsyRvmvWwzHrp2RnKD86QQtlo6z2+fQXA6Xso8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuG0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUAhAAm6O91pLmszm8R8LQrrfr0HqgiVc6VdZQocstzhSV5/f/TElf\r\nBuc/qE23TPb2ErY7TR4Em7Exjr33zSEJT3ArpVWPHbwFrOVH+auWJoezC52I\r\nab6Mt65itUB03yy0KvhULgVFovqHr7aVT3Na2ALIthAk+1ul5K7EY/+jx6sx\r\nRr+sm2rw/YPbJLqJZA7vTL98+qD6gU5y5/q74mqwdzoOkJgJruHtlB4PazTG\r\nN2hYpG7bR5as6Gjpl6Da+K8+qGlOd4GWt72aujLKppw6Kg6jdzavZxaByl9r\r\noTssRWCcvAqELyl/o7sLPAbIxDyTapXSxwXLnUnjGizDhSQube/F9YlBgWJ3\r\nZdNMylK+f2QycGlOTCrL/qLuqymFOqYvSMFt6INob+WmiAs9RnyDCSPpYhfO\r\nk2sFjoZly08dUkfzZZ79lzLNgACf5Xyufqa2wpPvsWaMwHyMSCZMeaWXEWfq\r\nzH93ojt323KlWSaixeWyI8SNENA2+fYIyXhq63IghvnDsEbBQHpfXtgfRZRu\r\nggzXQ27E6WFjKjClz6TlE5ujdSWvUPrQPzqaQPH4V9rF/gBJHHb5wdWtQPKi\r\nKn2U+meoTQmST60/WBeA9drpiDIwQN6eZKbYFrXPYfGozv88n1Rr6j11BtsB\r\nQJuvL2q0tcIF0frfnFilgM2kyWmQ3kn4W84=\r\n=+cOn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e89aab6b.0","@material/rtl":"15.0.0-canary.0e89aab6b.0","@material/base":"15.0.0-canary.0e89aab6b.0","@material/list":"15.0.0-canary.0e89aab6b.0","@material/shape":"15.0.0-canary.0e89aab6b.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/ripple":"15.0.0-canary.0e89aab6b.0","@material/animation":"15.0.0-canary.0e89aab6b.0","@material/elevation":"15.0.0-canary.0e89aab6b.0","@material/typography":"15.0.0-canary.0e89aab6b.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.0e89aab6b.0_1673454003843_0.8116273118525692","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/drawer","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b0103d10a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e2f07098abe3d888488e2dccdd2b56cedc00ba3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b0103d10a.0.tgz","fileCount":47,"integrity":"sha512-r+K6BqitWfLSxswLyBH+GpJHbrwpEvThTtVU6wauMtYUdqJAvp62qpaN2TpsSqtXCJOnNIgx/vZJlJ7RZbUCaA==","signatures":[{"sig":"MEUCIQDzcj1bibhhu0vGy73VexkUirp/IdUBHdXbIlhWpZA1cAIgBbeBo/nDPiwLi/qK7eIf3wVv5daialfz8hMHCtt8YbY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwqdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7SxAAntRuzc8OZL95cZmyMBvW79AEedNCVwatXyO/hwDFLlpFjYhw\r\nDkOMrWxkxdFl6ZGpFrz8j7DV/7ABGpWQmleYzLpmtz55RW+G37+XlKPfI+zH\r\nSs+IAiqlAvzkqGmC/FggUpLF+Jb+HZZIpEKdmk7aDbf8z9HK1HPe2EabA1Xi\r\n3R/HhduV7571GF//BmDr8zSbc7JdiTSzmclOz9/YjCVvHTwQLndjNIQ5D1Vw\r\nHPOrGq7GzJJKp8BZegD7zJsWfAW67o7rsBH345DYqOZu2Z7Q5CgdK5rN3aF9\r\nNCHhBMuapO4eTXfWawvTir6oKmGZee9Ga4HoYBD9P+ffuH4FjAbKZLkx8cSd\r\nMELDNxM8wjiHDqZTZ9XjkhNsiNSxiyklClI/QuvU4E8aN4hO4UaoehRcszKn\r\nD8qfvkqgjYoU120pdJD0cEyJn+1EyDbboI9YzfbYKG8kF7Ym0qy97HVePBhd\r\n7lAlFWjZ4wJEqM9+Cy1souMKoNS9KKfsIre30dThRGpRUFzk92Oyhl8qvA9P\r\nlX8+6RvyyGQolA6dGY3cDpU6ZOFgVRoEotwhrn8nZ9fhZlc7Ebp9ehcf6Q/d\r\n8ug9TJ4tPs2JEgBhyDVX0j1aYYn0Ky6/HSysMuzc9zhH/RiLuovZi+4gUDbk\r\nzik7wQJq00d+TDWOgjo0NjTExSBMoIqt348=\r\n=O2D1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b0103d10a.0","@material/rtl":"15.0.0-canary.b0103d10a.0","@material/base":"15.0.0-canary.b0103d10a.0","@material/list":"15.0.0-canary.b0103d10a.0","@material/shape":"15.0.0-canary.b0103d10a.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/ripple":"15.0.0-canary.b0103d10a.0","@material/animation":"15.0.0-canary.b0103d10a.0","@material/elevation":"15.0.0-canary.b0103d10a.0","@material/typography":"15.0.0-canary.b0103d10a.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b0103d10a.0_1673464477070_0.10030202015592038","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/drawer","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.50e7a5312.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4852412157114579efa54d328744ba49b8cd7e7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.50e7a5312.0.tgz","fileCount":47,"integrity":"sha512-BlFyB4EnTXkNJM5LEHAMTz/DLiRhvAK86Cda5/nZVsfYBvnH34r3oyBH/IAx7TfVnPe5V1H5BgInD4TCZnZtJw==","signatures":[{"sig":"MEUCIQCM86tAXodwtbhauWQWa/kr8EcQHcY6jPaaYqm1GXyFYgIgTYUd9LztsTFybjOS65tWeKW/+7voFmaaJATxRI6K3mY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyJnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6Zw/+Omo1I7X4mOSKUltHVqXBUeUMqBSKR+Jcfw3uWV4rCABsID1A\r\n8qQoluC4SnBmok6j8y1foVse1KKjTMDgeQezSXLPQ+S0mOZ/Cp1xkgwszBgs\r\nnzIcqCFr2BsN3Z+hf5mdLfdmmL7Cpm7XF2bcgdXSHRJLxhOKOpsIPk9f36q6\r\nP/3u6AECEC7sEJTFttySdwf/H8uX/WO6yXlIGpd4ff9ckOcaJoaX38Lm26F4\r\nZLSh7A4zSOlgEG02goFOWNP0m/3IwP8hCZ1b1ewavYxFRIGrwodLcvIcVnJi\r\nKL1DCxofEVmI6HAISjGyFZAbMst4Bfosre6lNurhZP0IG4dxvR8hLS56HbKM\r\nPq869f52DL4fziEOy2IPMqvv4oaedKZURjE9VDkYpf+SssxWe2Zdf37SNNej\r\n4bhBWhEiNpxQGjFOLK9X1Tog8wjRHnoVuz0tiV4ADb5S3dvo44YtBg8gLoef\r\nf7etX3vY4fHkGFnh0skaCX+9ObtK0wNuF1ksrCWgzlenXDAz6chSSH1W/gOA\r\ng63LnleKQkTdNHgZapzE1SgRVA0uZbr7HbBCQDbKOmShxiaK96OejSnu1mAk\r\nVUe6AFbGdVzu8aUEh/U+ioPrKgjI6ufL7ERaEY0Uzp1WwKK1cMVzbFbVBjHy\r\n6m2SnmzlTvqDWNG9sN0+nkOESbgzeH8tfN0=\r\n=6Xyb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50e7a5312.0","@material/rtl":"15.0.0-canary.50e7a5312.0","@material/base":"15.0.0-canary.50e7a5312.0","@material/list":"15.0.0-canary.50e7a5312.0","@material/shape":"15.0.0-canary.50e7a5312.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/ripple":"15.0.0-canary.50e7a5312.0","@material/animation":"15.0.0-canary.50e7a5312.0","@material/elevation":"15.0.0-canary.50e7a5312.0","@material/typography":"15.0.0-canary.50e7a5312.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.50e7a5312.0_1673470566780_0.8300525410664845","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/drawer","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.202823f54.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb309d24d1492e0be556d60f42b85788fb504743","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.202823f54.0.tgz","fileCount":47,"integrity":"sha512-vjxH+uceRveGHUyf0mGzdNgLyykHnm4ngMFlmhs0+EIY0L+3sTgJbJLtQRvbbdPHM+v66Da+zZYpJB09awHJIg==","signatures":[{"sig":"MEYCIQDHdeIjYYIIeFzmoNxnkl8KC1F2S++v6myzaRc8yk8fdQIhAO3N8dUfGbANrdmRSb0pO2XgmhweaCAWUD+C7NdkFqxU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvywfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqmyw/+Lc0nHSQwq2B3O0c4QuiB0LXONKbY58Mhn2vmvEhvN56GBG4c\r\nn4s5522pX5jjjVjA0915/7QCoPz3Mgl6RBs+Ebx0DFRkrwbhkgTTthaOxs0H\r\nMriDG8juo6qaCAZdgUB8wc5l7F81cFdHOZ4oDQRyYcSHIDhcZhkZe4KY2HqR\r\nUfKhpnRATc9VOqskYUEMA2EX/b801Mu2ttsMt8uvKjVT18wjFqWGNO2mbgch\r\nDyXFhj5zMpSA/mScy2WKXFfPZa8KtsscDsCZJeJDDIgOAwbSxsSDKjzgut0F\r\nQ4QNKRmcFk0Tum9n3XOV95NyXYRIfKpTkuJg8kPi+8uTzBlOFXORRibiaiUm\r\nfm70e/4XnT1i7AIqXVsZ157vWkL7cvDwmgg0SxTe3QnmGnIY809msC+RDQbG\r\n9GV+gwYCq+eAYyg/RJxEdMLsZYeyjjeZGhXdrFZPO6PiKTe7ptHPIazLIBLQ\r\nz+vIgAb2CyEN5ujtQcLFEuUTKXOL4dEwO7wLwUbgrgbQBSaX8Hrb9OJjKvJO\r\n2UZbcuGn129E5OHsZIDF0b/A9Hmb1FqPdWPr6RIk5ANiR1w3g4nhpznxNM74\r\neuQ8yJqMVxWKlQBqEzaUf7mZDUbys/Sf0UZ79dcqJvsrl0zOJ7G29NoHy7/b\r\nGSl/AlI62xRw6yA+hHi2ZpJEDXqHszV9p8A=\r\n=NGQ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.202823f54.0","@material/rtl":"15.0.0-canary.202823f54.0","@material/base":"15.0.0-canary.202823f54.0","@material/list":"15.0.0-canary.202823f54.0","@material/shape":"15.0.0-canary.202823f54.0","@material/theme":"15.0.0-canary.202823f54.0","@material/ripple":"15.0.0-canary.202823f54.0","@material/animation":"15.0.0-canary.202823f54.0","@material/elevation":"15.0.0-canary.202823f54.0","@material/typography":"15.0.0-canary.202823f54.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.202823f54.0_1673473055295_0.651141181175602","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/drawer","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.199fe2a2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"927bed8ae9b0aafd95fb94be0307903644ebb080","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.199fe2a2a.0.tgz","fileCount":47,"integrity":"sha512-u+t/zcMGCzCKtmTOmo6xUihQkl8DJqFqKaIbknEtApBozQYM5fBMiH62ixlsZv5RRpXCgJCJXtJIU9L6s+QBzw==","signatures":[{"sig":"MEUCIQCOUiVQfPbppe+Nc/7EpeoidgO+Ig0veD01TsbqmEYezgIga4mCZNrGy5lVd9CjPEK27fG2VMML8q9AS6hpi1K09eY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzDaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpH7Q//Yk3D+2fDAsVxYSgMaj/Op1nrrqI4DNP/DkgK5+QDqNiujJe6\r\n722LdILZL0MbbUHLoFhfgRr1biUOK+D22h8RJtDJrgttMiSFY1drmQOaIwLr\r\nJPrORh0/QIL3bHZPVs9rqPAVEnfw68sk8lxPK0kex4ZKy10wDtG7DLq8SVBx\r\nkzYyGzfy1U3O8K4G3JgH97fqEubIEahsn29HbaJzxG4Oqm6++rKen2bO7fTU\r\nuero6iKHeQf9nsW8lx5SBqJ20CYZqetkzxp+zuNfocEVU/lWiEkomRh7qiDc\r\nocMmzaZgKJIVDKfTw4xZ0c2Cyp1kJ/tY9e9uqimWLHQgOypnVP1OwOoSwDrp\r\nIP1s3CppwUXc6msD+M+qScRTawI2Quli8QJMvdmD+Qb5itDNgFJIyA9FKM2Q\r\nCToEETvMWloiKsbZmWy65P7G/holAJlz6L/KSf7aZToiRvtAkctnxMdpC7Ww\r\nVVW/7zsJPT5KN7RGfstj44c5OOrrEE+xsPRi9W3zFYWt6xRMOyUK92YvAFHa\r\nQ8fdHB8aiLejxddz1Fzysg8OMqTX52ggG1DWHoAN7MXljryR8LS4pC2p6gFE\r\neqAs2C7Lo2T26aMmMii+FhEZkpTZCmY05fmderwD2WUFjra9GVCtZd0hmaLt\r\n+jfdwTLIxUJkeUfkwu+brEgxJQsIj5w/4Dg=\r\n=L89o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.199fe2a2a.0","@material/rtl":"15.0.0-canary.199fe2a2a.0","@material/base":"15.0.0-canary.199fe2a2a.0","@material/list":"15.0.0-canary.199fe2a2a.0","@material/shape":"15.0.0-canary.199fe2a2a.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/ripple":"15.0.0-canary.199fe2a2a.0","@material/animation":"15.0.0-canary.199fe2a2a.0","@material/elevation":"15.0.0-canary.199fe2a2a.0","@material/typography":"15.0.0-canary.199fe2a2a.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.199fe2a2a.0_1673474266169_0.03746837261430924","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/drawer","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.8c0786d6f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5eff78fcf0f6a625c121a07ccacaaee207efc3b4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.8c0786d6f.0.tgz","fileCount":47,"integrity":"sha512-Ff4bpDqisHk98XXGUzIlf4uWTRWFHwQBlFF4Xs7p0FYQaE6EDkGz9InMh4IxuVjJ53IaeRZ6G3W7aDkWp9dwYA==","signatures":[{"sig":"MEYCIQDyvfEdmV0JJ0iY16qjvBy/XAYUqKO2g4ek/EbJ2rsVbgIhAIkkrg0r4ulrl4wLePVc9F1su/wVY6P6rlcEGQ2Tx/Gv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBtdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqACg/+NIBbHRM7l5ndUB1miJwElPnr/yVTMNNZlrJ1tIyFv4Jv74Xz\r\nEmuRd5dGzOSVhNvanhMtkKRRGIWtM/486mzk87O6+uCq25pwkdHbaodkdPhn\r\ngMzDxY6JfYIg3NlfvbaseAkzT/3ojfhmFvaHw7O4B53trpuGCa/EfeUkLpW8\r\ni0B6CeWcxBYFyI//U1tphiBX2cXz7skCzzQtdjVTfhP4oqrvLzkPr2gHt8lB\r\nB6gCYikDvU53g1YnaH56HJzWgwMWFwgzKOUuCtyWmlVMhyEk/06uvucXFeZH\r\nkYQ+gHu0fXdLFw1cBZQxxZ0VnpZvlP1xqq8hidOp/CTdj2duxvnc9Uc3kfOT\r\nrzv6w/oxigwuTdL1o5BoMtGAmFGVIwp037wK2gjeanu4KEO4SiskHbzagQLQ\r\nc4GpjUJ0zfd6iPdCLp56SjKmCGJej5MUF2/Jf1Cuafexkl6Eo5isMmUnRSxW\r\nh6CYs/0F/kWxsInMGbF3jMU55dBR+LH6NE5RibQFexH0mjN9XSxubhyDdgB/\r\nQ4w8tHmsdwt8wGK6cfOJmYp37/ICGvhRDn/Esc0jxGJL9w05qVEPdpeXzQcX\r\nqHHFV4RSsWzFqWAyAYQWkb8OBMeSZeg1IHKEoIoAv4VIGP/ii52vSit2bsHn\r\nmzlCsl+7a3XtFfkesPZvcPw8IvoWUkYk4HU=\r\n=yG2O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c0786d6f.0","@material/rtl":"15.0.0-canary.8c0786d6f.0","@material/base":"15.0.0-canary.8c0786d6f.0","@material/list":"15.0.0-canary.8c0786d6f.0","@material/shape":"15.0.0-canary.8c0786d6f.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/ripple":"15.0.0-canary.8c0786d6f.0","@material/animation":"15.0.0-canary.8c0786d6f.0","@material/elevation":"15.0.0-canary.8c0786d6f.0","@material/typography":"15.0.0-canary.8c0786d6f.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.8c0786d6f.0_1673534301540_0.6183540119519","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/drawer","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.8a74f7c6d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57a08f19db420359303c3d82a43d7fc439c80a71","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":47,"integrity":"sha512-5TJSAfx3I9JUxvyiL7Pzs25dbK1eZmxg5ia7hfSjL9Wblt0+cK/fiiGcNxyhvrnNYRX3TYsf+D1ZHuNQVGAQeQ==","signatures":[{"sig":"MEQCIE79Cmd3sUi1itdlw5lU/lSu7VYYDPk5D7LyM7ApeORtAiBQzmKIj7V2OK43RVBIdV5MguXNgCOcUDqN5vKSD7es/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvZxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrb3w//Ta0qY45fZBM2By7CogWzg9Y9sBlly3puUIEiEzOZaUlgt0fM\r\ngpDUQx9MAqYlwyTmh4MnJ7jyl7Qn/ZeQ1cSAw3iMt3yWeTzmVTwhXYI3LG+v\r\n1PzT6hcGRd5m4o4+El+C6dUi7GBIEDHmc8uFuyWb+QEq5+62aHHr4HN+/wPe\r\nWAfU6MJPb9hQZ1kljqu4f4EkCkyXTjbQqKhilaIoP7sZhV9WZ2ICWDQ8uCWv\r\nhHRcpn+IEkvm4PKBVqlTBzZ4lqr4vwn7Hjhc1oOLDkJonSUqErtJBK/Lkioh\r\nwEY/o1EPWOcgJiXaRRozmYzvSbdHJI/UztqXIUfTEl6Tx5huAl3WDA0S4fqU\r\njv58ungkAQuDYpAH7yqNu+FvXpCuJvU+g0zIudAUlKXQWAxZlZwQhKKWZN5Q\r\nU225f+KP8R00+HhaJDHcgoidBRIzJh629JB1neGYN2tzlksLbwKIyJkNZ6F1\r\nCnTN1v4YsWr24T3Bj7CZ9t3yan3aufG2dMC5Mp7rqLz6XbxUAfrPmAiH7cyl\r\nvapWu8VEmA8j0eTdk/HRKrBXHq+tJLfhVisvWBcPtQkiSl1Y+9UpzKW06E8x\r\nuQNiW+St2jiXwAfQoL1mpjJ5S1YSCO16GwXmM9W4O+cuYInpoyIaDY1dcWX3\r\nTs7sI80d8M0Lw43xzWW6clzAwjotIt3sla8=\r\n=FFFv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8a74f7c6d.0","@material/rtl":"15.0.0-canary.8a74f7c6d.0","@material/base":"15.0.0-canary.8a74f7c6d.0","@material/list":"15.0.0-canary.8a74f7c6d.0","@material/shape":"15.0.0-canary.8a74f7c6d.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/ripple":"15.0.0-canary.8a74f7c6d.0","@material/animation":"15.0.0-canary.8a74f7c6d.0","@material/elevation":"15.0.0-canary.8a74f7c6d.0","@material/typography":"15.0.0-canary.8a74f7c6d.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.8a74f7c6d.0_1673983601061_0.8637333356770169","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/drawer","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b4687fdc1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7613cf489b2686a64a6aa36fc4fabaa9b464dca5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b4687fdc1.0.tgz","fileCount":47,"integrity":"sha512-mIwg8ivqs6gkpShuTRO1kCKKICCSMu7hlSSzWiUR2L6kCZD0hM0pCIiuKc/SPomtbGagNKanHNf1TsORk516xg==","signatures":[{"sig":"MEUCIBIY1aT7I0cNafLlGDQcjM0GvqMICPiaLv2JNfzYcFbZAiEA65wf7GIoU/bqXhfA+6qjR9i65eEbkjXVkq3HUm21i8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ9LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7yBAAjp4UrxC9gt9jFg7TZUbKTg0K7csYf0yb3a6Dz0PQbbZ124Di\r\nGed7H8fi5RcabojdpHVcPBLe4caoRbp9bwRSdz69AwPehsThWGkvsjrhRILH\r\naXNiGp6NUOutDUNflU09QtoLo8A7JpSJLK+55gCqhgKPtBZDLS3gKqccOPRJ\r\nTk2cvB1ZzprH1vPZQDwGl51UewNlJ1yvQd9YJdpZm69YvH+31H8Bc2nmEXBX\r\nP5fwsuHd2CJXWGKi+AgkgOLn4Vn8ko4Y1KTTMAkOqf7O+7QbTSx3lEzXa7Ns\r\n3sF9hMURWWZPlDrrUy838SoEG1SNrHdIabTdHGuFifrB2nS/2M/Ja66XIdrd\r\nik55N/6aBzC159H7VVWxfvpdwKv+P9Gbk7u6TRtDmaTr0NxGLP2jCEemC5F3\r\nphjxXsbnsg6F5F0rU6BYy2Y7/jWCl0JvnCJ2TX60+DazGJap3cNq303f7ph6\r\nvBGsVsO24a3Aa/WcF0NyEWlKlMAI0Z697+6Qge6/zMI/g9T9QcBd+1Fev2E0\r\n7+XjycS1gC24HqrtpM2cYuCc2c1okLFnMJG8IF4X+79b6P1WVCXaFvalatgG\r\nfMLR7iej5j64UYDNRmtF235kJ0wmrlxeuH36ffnnr1cwy9ehs5gxmHoRm58B\r\ny6T7dH25W3lQ2K+sawk9nCIZBoUUffZ9E5E=\r\n=7hzf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b4687fdc1.0","@material/rtl":"15.0.0-canary.b4687fdc1.0","@material/base":"15.0.0-canary.b4687fdc1.0","@material/list":"15.0.0-canary.b4687fdc1.0","@material/shape":"15.0.0-canary.b4687fdc1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/ripple":"15.0.0-canary.b4687fdc1.0","@material/animation":"15.0.0-canary.b4687fdc1.0","@material/elevation":"15.0.0-canary.b4687fdc1.0","@material/typography":"15.0.0-canary.b4687fdc1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b4687fdc1.0_1674157899014_0.95941465010336","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/drawer","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b836b9892.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8069550f3ec27a058c9001756733dd42bae31da3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b836b9892.0.tgz","fileCount":47,"integrity":"sha512-lS5luo7LmLl39GTSdpvh0IbaWN4XVcqz5sVHyFOKiEbvc6JvwG0runbRvUL0Ke6ZgmJnf2KZv7ZZaKHy+4ei8A==","signatures":[{"sig":"MEQCIDGJv8g+ODkkdOvIwnSGflZzTbEwC2xe+kyDLFMP+zXzAiBerTWTpG4s/ITlT44ZmqyaZvGVYoDvHONhndzU6MBvcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F5+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiBw/+NNfnSQxQFxjvhhEKmNmniP7evW5LR7YYTDQP+hbK0UQ4zhEL\r\nG82CU31yFD9kD7e+FV+m1tOG4oX4ZkRQsO12ON9SN/x2AwUD+8hwEQItbBA8\r\n8l217SD5snowSScJfm/AtQkv4jMvNiBcwU6hIUnhcag4aN/lDRSIHWnKo8KF\r\nRf+wgwJ/mEN4GV79cFcUboy9aLdubXDsv1rusJl0viNFmgXXIqfI4zDu9Q9/\r\nA8Lm6L2oPonZdDC4+cW7IaLa+fXnVeroSRO2A4tW1KBhtSbNn789jhFHCufz\r\nRt7tlW33xz0/8KxHXneB7xP9U08rzOxErIbO2G50OPAg21qh6+TnH80mXazX\r\n3PmKp9HRIlGXLxlrd87txlQ9hSKeQJ778HsNf4E/p6Xc3/tgukILa4Ukz6sY\r\nc0mhZzlOmCUnN3r/cjFl5EDeIgUstPXBcONDNac6wgE8KljyvWDCSECrjfhV\r\nCFEDJHSlnWbHHc7WKNqw97/aXqvGTjHCUpL1bFzGAiGIsYUB+rwtTU5v5jv4\r\nD55JYs+QCRDIshST/D1fTUsuKiAwuisqhFi6tsqZHAm/lcmWN06K6tdDIGZB\r\nut4rRm47+PbB/m7ZgQFxtG2ZYbm6acRlPA6F4ZnNmAqA3uqBYidKuDYLZTCx\r\n3JlWmkDlv28UFrKZnlpqCW2r8t5qHuQ2ehU=\r\n=bk4p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b836b9892.0","@material/rtl":"15.0.0-canary.b836b9892.0","@material/base":"15.0.0-canary.b836b9892.0","@material/list":"15.0.0-canary.b836b9892.0","@material/shape":"15.0.0-canary.b836b9892.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/ripple":"15.0.0-canary.b836b9892.0","@material/animation":"15.0.0-canary.b836b9892.0","@material/elevation":"15.0.0-canary.b836b9892.0","@material/typography":"15.0.0-canary.b836b9892.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b836b9892.0_1674600061891_0.08472669856302595","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/drawer","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.e8912fd37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c9d6a11aea6d3857ad1ebc5809ab790051af8d9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.e8912fd37.0.tgz","fileCount":47,"integrity":"sha512-Q48QlSSR8DeDJLOFIPE6kVNAdvlz39n2rRwaVw15qr8CDex0XBy/184iEORqT/gyS05Xr8V7JT0hKg6Iy6S1Vw==","signatures":[{"sig":"MEUCIBcU5WR4i2rrcNBBJJox6gW2L6fBDYsOFcASUwal+I6xAiEA/F+UL6NX+7J3/P8CDd4O/amyVLHrC9QYesqluibOFH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0scNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNKg/9Hki6BMED/oOZAn4xrk1lMpOQlmZ/coFnSdeq14kzGf7U/1RA\r\n8pwo/FrDk4F2zoumJUfPt1MPYOxGxaTwymSxyD/QoEKJB2g3vLyQnRiBeREY\r\nOPgoBR6jZS5EP2id1dj8tfRKWCswBHbFR2/NC6qmGLY6LMc6bAMwtEZHHlXB\r\nLYlg1nyub94383aEbAtxvv/kH0kggUCPnK6xzzkc/6h+p1d2+JjsnvayvvV9\r\neDe9cQ6pKoCv46vbOk29lL/mMCFfrNr9WsMxBuqvNCz3YDMApPz51IKkgPM1\r\nELLVhGKNO76uZrWcTaZHy41xhnfHIwZ1mW8ihExpHtC3knHz/MffXxJxFmYn\r\nbJAVxwA3zBsz/10H5+7Y9pNY1LmGLGLgO7OsiRdw/wiVcTFuSqrs013E2gAH\r\naW1HvB69MMBUg8MG6Tyx1KiL/nVUZ9mqR+tDzDVUEjjZGvcVlHNbPZRKyyUN\r\nNyvNUhp0LuVKLE+cW8oP9wTOGTxESEDmG3yhkW9sR2q1ZpGOfDXNCzZYYtHx\r\n7xYHmIcZShX6wInzN1xOfB5gu7mEHYWn8jhL7E8+nfm/P5yc1IxG85wiUw7l\r\nXr12ttqOuRRS1lgigoUGdr4OYL+Joc09uEYX1kVRZrxkpvtZoYBph9gqmc3Z\r\ndVeifYsnEdw3kLonJmlIQoXrWf0mPoMQ8BQ=\r\n=yDGy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8912fd37.0","@material/rtl":"15.0.0-canary.e8912fd37.0","@material/base":"15.0.0-canary.e8912fd37.0","@material/list":"15.0.0-canary.e8912fd37.0","@material/shape":"15.0.0-canary.e8912fd37.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/ripple":"15.0.0-canary.e8912fd37.0","@material/animation":"15.0.0-canary.e8912fd37.0","@material/elevation":"15.0.0-canary.e8912fd37.0","@material/typography":"15.0.0-canary.e8912fd37.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.e8912fd37.0_1674757901610_0.1905835268765117","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/drawer","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.16fbd30ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f60b35475f631441d15e7b75b1d255c7c1d706e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.16fbd30ff.0.tgz","fileCount":47,"integrity":"sha512-4eyCwaCyG0ufyA8ep7P4pIdE+cccwH4nHZDPSSlXqlS0w86Unz6ccrMBOxBf4jkOru6aEd9iA08/mWPvO6c7VA==","signatures":[{"sig":"MEUCIGdIy8baR2giJ46z7ih/V9jAwp1ENwOvU7a2QN6dAZMpAiEApX7cxHCS47PLsIlNpRiCorScUNZ9mcqMxd5yN3H/bzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sg8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrH3w/+NaGruxinMvKqpihlNs60BzYVbsyYcnZyVAiOnJLPiNB/ffd1\r\n/0YuYexZMbCkofZWfvQbiTsPs6scR/3Qvl8xkYama3svZQcHKlUnMOeuhyLz\r\nCRnDJy48/Us4+fo0QWGr6Ig6qvpu7XGBLevz5tQtomBi6on1PWbihLqYb5m4\r\nX024dnTm/DYgEgcUY40tvjDtLHIx+zSHM5zXjXmZDaLTcHLY8FrfuT7J03Qr\r\nXAkXpUAinuSyzFL1nvreJG1RWOOOKrThYRxlGfRcyAPiaYm2h8tLTJF3/48O\r\ny5X6spmB+p7kkHH5i1tBpCDo/FU+DLHwaetTFfN0DRpcUI1m+gvHT3hdG1nZ\r\nIPqf9D7Wzqtr0+GlAUCZkjsR2rTIb1t6hwrHI9D5anx+/NvqrO7XiHMw3HFb\r\nTeiY+QDf4rWc3ZSzk2qFF0KNN/tAFeb81oCX/3M91mDknQNYFsrWIteaSTea\r\nl1+xq7gkYBzwsmhi8oSBTFMypTdb8E7aWrku8nehyEXdjx/GM/oXhgOXN2Qz\r\nwURdEZxT1n+uW9l/HklTOjS+xHbo8kSzvOxduD24ltvRp5EGQd4x6Pn2ABxg\r\n4k3+u+fRKGjAQot5GBacHDrjoTENtswF0GD30XOPuCoQ34/xyhiP9oMxzztj\r\n5oYgF+s1CYrjWH9x+bqpnn4tD7NE34uUcYY=\r\n=j162\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.16fbd30ff.0","@material/rtl":"15.0.0-canary.16fbd30ff.0","@material/base":"15.0.0-canary.16fbd30ff.0","@material/list":"15.0.0-canary.16fbd30ff.0","@material/shape":"15.0.0-canary.16fbd30ff.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/ripple":"15.0.0-canary.16fbd30ff.0","@material/animation":"15.0.0-canary.16fbd30ff.0","@material/elevation":"15.0.0-canary.16fbd30ff.0","@material/typography":"15.0.0-canary.16fbd30ff.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.16fbd30ff.0_1674758204401_0.36818552800993376","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/drawer","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.033ae083a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2a2303cc3f20e47e8d26ec18e221f89b761898b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.033ae083a.0.tgz","fileCount":47,"integrity":"sha512-XTBuVZXOsGJepRMKdi6AIeG4K6fYBYy8wFwAJ/QH69i6DUl6Ae2o38Fc29WD/HaybOdTzEtVZ43AO5hY5n+PcQ==","signatures":[{"sig":"MEUCIFtYr9mEUIaSuy5Z0/Rm52I3WNhpzdZrcLi4EXk78UhGAiEA/SiE/bntcxMSDGHPyADiM2nqb+WzJqlDlqw1zx5PERA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tRuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDiRAAlacBJ689n5f6wlV7tbOK9FUc1TXtPe5DyCeB5822dXNoWf0n\r\nkvUitjWb9SeTeR5N11g+0iokSu4I9kT4Zus53rkitnJrE4oW1BS8q1Udcgg0\r\n7mmQwgytQ/9pi3BFjkcTi+IV5UXz0cn4cWsHO3hF3BvrQvMNDHllS4XHdJR4\r\nkM+uhXZUSiKOF8Zrvi1nVcF9VRzkj6Olm/2GpC0314dahXEiDfzERx6qdPv9\r\nrB0svHxNkn5sf4LuUaXkf5JurOARVLez+kmqJuUKfowcgoGb9FdbuIJIR/UY\r\nw4V44WeRloAHKtQbF+OHx8EpkflrdmWJ+iOn7e4YJRQusD+WlC9587OL1gao\r\nn9MIMpPRI4MBK+8r5qmEfRHfWBQDYwk4J94XK4Ce5AdQ57mS9/4JT74DCTmL\r\nqs1f/Z6cLgW8D5KmR9Fc4sWPmBxakCHVxt5o6ljAEToislwFAvxYMykojxHY\r\nowye3jatcRqbuN+orm7CiPqmK/zxE0plloMNN1nbwzaRTQQlTlvB50Gh3d0X\r\noRRlV1QbdeceJpxOUZRLewD8ALk1owJ3SNML4DJFB63vMIhGP/1aWh3//CXR\r\nP4VbxVbVU0Ohep9s/0sXV2NP8F3S1trsUzJSs4+az8QoSjqw+uiGujedYLEp\r\n686MU6k8JpW7vuK3RfcrtFAGGhoq/2EDvuE=\r\n=IiTs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.033ae083a.0","@material/rtl":"15.0.0-canary.033ae083a.0","@material/base":"15.0.0-canary.033ae083a.0","@material/list":"15.0.0-canary.033ae083a.0","@material/shape":"15.0.0-canary.033ae083a.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/ripple":"15.0.0-canary.033ae083a.0","@material/animation":"15.0.0-canary.033ae083a.0","@material/elevation":"15.0.0-canary.033ae083a.0","@material/typography":"15.0.0-canary.033ae083a.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.033ae083a.0_1674761326162_0.7491361367054332","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/drawer","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.3a705fa1d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"726306059758fa8e284a66d067a7ccd9b7c18584","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.3a705fa1d.0.tgz","fileCount":47,"integrity":"sha512-e5PuaYLs3Q3VVfFVnF7U5/hpNO/CjQVEiT6qbS+lBsyN+f0MG+6EmN8W6zRwVOZD1r5+ImnzaKsoxviD/5Hz/w==","signatures":[{"sig":"MEUCIFubrOhqtnFW/rK5zLHEoGbv0m2NUAbU7X1D2HYdn7saAiEAxptZmIR9ABex1WeMzzG0KJQdGzZz0t2ZTDu9Up7Pgqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FP/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/ZQ/+MOKq6lYZITR/N2bBnXIOcNHBvEqi41QdVMCHYTsfOo/5et9r\r\nJe1kQ4N+4xT9aYF53woo8Od/koEQ4FVv818cGJ0lThuad5KeeamR9+RFixTK\r\n+1Sie/8n7yBAUOPm6ANaZun3mKrUzGebVl9eNmoBhXWYenSgIcrbMVqIUwxq\r\ne/AK8qFagwP+Ck14QVObzGRQXoBzrVYsg12fpvvxtnwebUiITF1hh8d0Hg6Y\r\nbsty0qh24gsbdH/rSa327PHod+AwpFDQneUzToJ+7BFfkQ4RJQiWavBxAlrn\r\nwDqDgpvQS3KT6LkckprZK4qIGWNCm9Piz9V8ebbiCojdtPNBKhehDQkRkars\r\nXCIjYnXqlBWdf3yMfl7rqXi0ncDk6ePfTaOoSNLuCnl/jXtC/mLp0gT2t+sA\r\n2gDwafW3O11Yx27srIOJEabADZs7oMbccmMtmJYF6SVOKFP5lToPXHxnGQvQ\r\nCspqIFd/ESJ5yi7hJlPD7H1bc+rl9mPAmDpsYWKkD+v7/Q843qIjH+qv+gu6\r\nb6BYZ1YX7h/2GeXOpZTvmQ2sIPVNuEVm2vPKSb1f3opcHW4NR+KlTBCgZEhs\r\nWBo979a8pdFKqiFMOym6eFQQ5J2DzJnQIHMfBlyhnqOQuvsEFTAc33tCJU+3\r\ni8Q/LwkBLlOb68X0Xhxaj/k0muAtKKiRUz4=\r\n=feVz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a705fa1d.0","@material/rtl":"15.0.0-canary.3a705fa1d.0","@material/base":"15.0.0-canary.3a705fa1d.0","@material/list":"15.0.0-canary.3a705fa1d.0","@material/shape":"15.0.0-canary.3a705fa1d.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/ripple":"15.0.0-canary.3a705fa1d.0","@material/animation":"15.0.0-canary.3a705fa1d.0","@material/elevation":"15.0.0-canary.3a705fa1d.0","@material/typography":"15.0.0-canary.3a705fa1d.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.3a705fa1d.0_1674859519219_0.4792479523578954","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/drawer","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.d6bea2ff2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cbe43d9cc32b8c3ccab2cb51e8f41c90cc47e24","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":47,"integrity":"sha512-bouACfMZmJoHr+e7sWyitxMPX1wcZ+V9GsmbX/f1w5qS0Wem8twkd/t9wdjaPqStlNtFPIUJh5aztmMd6jyAxw==","signatures":[{"sig":"MEYCIQDNmCmVGBTj7sBTnWmYU+uyZKNZbz2Wmmi9UOd/OEElOgIhAJDo4u8Hmpi/m1K3nFt+HWma0LruN5QLZtgjUWCBhYuY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TRtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/Zw//cBxdo6xjgVhZQwP3B2CrmjSw9Cl+V6DySmjupB9vs5BQwYhj\r\ndxPDA/D6komk9NO4xkKJMwh5ZE1hWbqt9kOKYbfoepLBrHgWk98iKHDv8pMT\r\nleRQY6J8p0RimQ1GJguyNhDtU8XJaD+YEyX+NVD1pvvpKeBXYcGXnMLSAL4J\r\n9dgS8pTnFlq828J8tYqyojE1en5LbWMEfXPBlxzEpSo1sj3FDWL/0d3Ljotm\r\nuel5u0uCAKaK0zHSGllZJPaLtRu/nsZrZGptX/L9sD9m8BMkxjHp/1C/32Y4\r\nYjKTo7GqupgLw0FublElCYK4jfQ298bOFGjG4idTZKlHO+9D+/FxKP/OtAwo\r\n8kJpf6FIGXCIAv1+i/ttHiL+nnidiXk/WH6qqV2FHfJD+ea1NG4uXpUhE9O2\r\nyOkLu6orNIPvWRxUIyx0pM16niugNZJFR5lVSvHYlaLF9vTtrLiJH/048NOw\r\nAwu7H96pRM6yPsZM3CC2zTC2P3Cpg8DwZZ6Uf5+WtlT9xWnvyy3TNHC4uexD\r\nRlTWTWiv+9vQs8LsVNik5lwINT7db/hg7ySp7ei39URhA0zfj6TqJtHLdBMP\r\n/Hv3ZrkOr66RfXPwdzbm5fQNBKGVV/3gAaRTyHS7LC7+NL/M0wdKJwYsbCmk\r\n50YOh0k4b2Lr5a9ld9PbJnRv04zwEFok/BA=\r\n=kibd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d6bea2ff2.0","@material/rtl":"15.0.0-canary.d6bea2ff2.0","@material/base":"15.0.0-canary.d6bea2ff2.0","@material/list":"15.0.0-canary.d6bea2ff2.0","@material/shape":"15.0.0-canary.d6bea2ff2.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/ripple":"15.0.0-canary.d6bea2ff2.0","@material/animation":"15.0.0-canary.d6bea2ff2.0","@material/elevation":"15.0.0-canary.d6bea2ff2.0","@material/typography":"15.0.0-canary.d6bea2ff2.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.d6bea2ff2.0_1675179117657_0.7883499411592276","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/drawer","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.0c94182c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d8b74333cabe1e80a53d12c38b8d947e6e52fce","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.0c94182c8.0.tgz","fileCount":47,"integrity":"sha512-XDYwaapzukBuALKoA0LJMFOHDN4M4eLRv/v7mJceADe6ZzqqXenV2bfmF1PUFqRH6CZWYN9KqFVDFsIYU6MnZQ==","signatures":[{"sig":"MEYCIQCRs/8TJtXlgSYUcfVyQ3JXb6v2HLSmzcQPMQbZNy+iwgIhAO1vUMUa5WYAitVj8lSR7Rdexjh+ZgTzTox+VlPBlEed","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qVjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdfg//RpLyPlcIZ7zMarFpMkkwigdcjbY8+98vBLOfzFiuGOcxEBas\r\n5S66l9F6xnEPdLac8w4rxn2rhJrG+BvdVHvXxmGda6F+8veIfmymrcivE0gp\r\nXJWIxUawA7q35szMZV/HzyiGtB4rkmNniaTjvo9RvvggU6gCNzKQkecMPqh3\r\nv8k54lwISkRyXvAUPJGp1kKjCrsMDkOsdmPwc3I9nBW6KQvOOZBnQb1YKrkj\r\nE1N6qBAAbnSoHXNOIb/dYNVmr/MhmstPNZOOstMHOM0Rc6ReT7CaeLeQDSdO\r\nKG/Ruva3SgYOijAxC66oXARzQg9a2rNH8537+UsTOpLcv1FJP7xaEP3FG0dp\r\nii+DeIRLySgIQLaR1EnKw2OQGlhuQWqSiFzH2Bzr/yJh7W9ytQvwycRbzemL\r\n4+WqZ7IlwwjlAL4tvpOqn+u+UtGOD+NV4OoxQhOnvPAYP9j/aDMagC7E6ysU\r\nQ/TzfZclP5dn1HQHLyqY1+a4eKVUxMvK6qGxfltMo5c3Zc3NjYJvPIi7eHJJ\r\n9Z/QT3cuu4O754E6Ki9z1Pf7syl+sVWsmYr1JcYgv/TzWaMnLRs7c3Igx9H2\r\nMgjOW+yjuAq2MKUaZ1NRCi0+v5RZdDC496lFnDSeOUEfTM4bt7i4yX5rnpzA\r\nudY7C3hdSEks2jBgyLpNz3M5jz9cAhBDIek=\r\n=nyT8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c94182c8.0","@material/rtl":"15.0.0-canary.0c94182c8.0","@material/base":"15.0.0-canary.0c94182c8.0","@material/list":"15.0.0-canary.0c94182c8.0","@material/shape":"15.0.0-canary.0c94182c8.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/ripple":"15.0.0-canary.0c94182c8.0","@material/animation":"15.0.0-canary.0c94182c8.0","@material/elevation":"15.0.0-canary.0c94182c8.0","@material/typography":"15.0.0-canary.0c94182c8.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.0c94182c8.0_1675273571034_0.3206838809077899","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/drawer","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.15b221540.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3f65116ecb0a55a6eef57566b4eed3999a4cb51","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.15b221540.0.tgz","fileCount":47,"integrity":"sha512-7E+hCqtZUUgl66JM8j/Wkbvp9eQPj1OqmPeH6SZx9noBZTsUYCDaod+xcxJmcslSX0TZc7rEAlNAT1xQz3qE/g==","signatures":[{"sig":"MEUCIEDRfE//1frYx+P5EaiWxy3c2H2J49ozyYksqUicMqRwAiEAvOrb7oQh4Um+pioNuQmYqK7mUBkl7RgdUKxhQI6EOZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qdVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQXxAAic6oTBknXnd8dtu6KMTpKV8feMIxR+J+th0whT7EeEFQ+zb/\r\n94zlAeFpE4D2w+DzNFoCEcA+/MvqElL16VjqyRopNQW2LAyZAVBWymmwc0e9\r\nU1RKTe0X5j7KWl/+7OwdhY2+P1M1OhhZAuX3Rj0shitcmydXa/7NyESw5lfP\r\naDZIbt7lZBJvGDCAkLUjt7z12ilxqDhDgtnrfD7wKabF9bMK3LgBuCIo23vO\r\nE/FWHUXskGPQNnl326OLn3jWnpnLmGF1pUGL2Y1/DLfFg4HqeUBRoR8ZJrfD\r\nwbgvJl/lj8A+9bgE8XcaTmhiJ7yd5p0pskPZ5fNUtWG4Y7+VMZI8FbpwmaUu\r\nRqbpmSadlN1FvLFXD6/mlB1tojFI3oPljRmmVMrPVbTO1asWaJKhmazsFy1L\r\n2akfY/T0BShh6GEs6ldN+c4oqKjChveEVTClrTEZ4VT9julhTC8/KzeShQSR\r\nROFRvWjN3htrmtpWJYxnMm7wALcS0iMXz9ybLgYnhTqm+a2ah87289H7AuQI\r\n0bG0hrBrYIssx+LZE3C4yk7K0zvJyIMlqj95qa1RbdPH6sgMJiO+ctv3qVP8\r\n6jJ7xj9tqLrOowDSn1x8HsM/ewHE27oyTIeBKYn7Cbrlo4PWyKMuFCnS/FOA\r\n7Wv4RWsBWhQazn2O8wOAfEPtCo2PSlGSaug=\r\n=pkqd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.15b221540.0","@material/rtl":"15.0.0-canary.15b221540.0","@material/base":"15.0.0-canary.15b221540.0","@material/list":"15.0.0-canary.15b221540.0","@material/shape":"15.0.0-canary.15b221540.0","@material/theme":"15.0.0-canary.15b221540.0","@material/ripple":"15.0.0-canary.15b221540.0","@material/animation":"15.0.0-canary.15b221540.0","@material/elevation":"15.0.0-canary.15b221540.0","@material/typography":"15.0.0-canary.15b221540.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.15b221540.0_1675274069332_0.06738205168628486","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/drawer","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.6a4b3f834.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"987123ac769944640e5001a447a1e20fd7870d72","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.6a4b3f834.0.tgz","fileCount":47,"integrity":"sha512-eA3gEKLTA4TNUxNrW2E0GAvpL4x8unY3hIhFpNQD2I3jaujgAHbdPHe8ZgEmsXVl48aXHnxxzBHR+Jw3fEVsWg==","signatures":[{"sig":"MEQCIBQ3lOV6EPCXmsKdpMybyKk3IVLDfrE22Rj+f0CAuzu5AiAEX79VZ19I2AoXDCQHKC1qZBPvTALlPblcYSlk1DjQXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rbGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHbg//blfyjP4yqPKE19ITU55P1r/mNfsYDPns5wWbsbTf5garK42a\r\nKRTb2uUy1AnoWapb4y/1y+a3bYsINaUMfoTW5NiLrEyBM52Bk/vTh+POHpgt\r\nA86o9ZxlwZjyUjUvB1/MBSwDNCJIjNradbLdSFn57tuq8kMBadOjMCUYVpE8\r\n8++2niWK+wnxavtYKxPufya7jZrrAPLBrPAg6TuFRzp8UpF9h6OlAUqhVyqS\r\nj05x4GQY8tD58NTbJ7gSenJcj16FgCv7ZKsgdLKNhPvNFcqCPu2ZQlFp1OPB\r\nsUUyy58w83kDDB3W922LP8I+KCGU7xKQBguCdV9J2pZlG3fsRUBz0ACL7+Vh\r\nZh49t7g0rcmvh0N4q2Haa61gk2LoXLMNcwt3NVQNIOznZakCvTyomqk7TCNC\r\nvg9HVtdzjnJoXcNlH0mBLYQRiCfPBa/zxTk2Tz51LevLL+ZMDBTsh0fsT6on\r\nrFMgx1I16K4pLh0Qhv//c7HgVf7Kx+g8ATCkdMrTaEe99upoJY5rLEy9Ryzd\r\noVH6yZUj9tr8czR0e7u14EscJ8eqeoFAdcOseMpMyr4VGa1Q5UdsNNzjbcuK\r\nEyK1HyMGoXXd1MZW7Goo10tsCZ5htI4zbBhQLFB4flyfpIcv1zRfNZJ7pxdi\r\nu+PWZO2wIoPB+GDPdve5CFFCWnvbzbn0UaY=\r\n=d6jm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a4b3f834.0","@material/rtl":"15.0.0-canary.6a4b3f834.0","@material/base":"15.0.0-canary.6a4b3f834.0","@material/list":"15.0.0-canary.6a4b3f834.0","@material/shape":"15.0.0-canary.6a4b3f834.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/ripple":"15.0.0-canary.6a4b3f834.0","@material/animation":"15.0.0-canary.6a4b3f834.0","@material/elevation":"15.0.0-canary.6a4b3f834.0","@material/typography":"15.0.0-canary.6a4b3f834.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.6a4b3f834.0_1675278022117_0.8470092035847556","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/drawer","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b177b40e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fac27ea8d821b01a4a57fd9175b23fa5f7561703","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b177b40e2.0.tgz","fileCount":47,"integrity":"sha512-xOMhv1FGgLlFMONiE43bhlFq2iB5+KQxuidrQRqR2b3DM0OupkAZP7+vVQLJw+DCzpko+/Q1j7dMqrjxgQm1cw==","signatures":[{"sig":"MEUCIEGbjLXMd99l2RntM7fxgitNo8GffEHgv/9rPx2toKs6AiEAiMioZpe7PKPy/6ssHP/NvETdHH2WmsHtV16zXnBNsaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y+rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqv+w//e9TEllCDlaNPzwFDtI+NspYLiOT/h4f5gfl31kF+ivI72F0O\r\nAor1N2JPbASNYM+EBalZNCESXn7xqbrQUval9e/cwdys7FU461sXyoiaeVxX\r\nYplcYGg9gWJ1lV/Vzi5EJOaMZMoLzMIkzv1+NYG/qmBHePDy9y0OGShBynWp\r\nVj02I/4z1LwBqcWPNzKPt1Lqmwc6Cm4JcaWLYId1PKgaVz79I9tFgvxqzsiR\r\ndn2nuYxzzslLqnkAz2kF8hF78OynVYhlNLEKciNYXYR979jlJ+Vxkhpc1GrL\r\nH0UhJxq59StSZlDP6hXv1gbAbccjxZvJE5kxhSxBnC1DHy4pUOUnKZkLPC59\r\n49fnWlH87cD9hZPuj3dP+uoXZoCxoZLojOsFZG18qoZRlf1pJV+ewzLa3ebd\r\ntL+ggv4PecxO5WDZGEb9x5sIpWLZcpleVyyDYqk/f8GxZGWTF8BOlx9cfFb0\r\nYWShBSkZFLFj0RcPvVuMdUA/LQH6VULor/IOBqc71XX4Y5g/GznaBTbg/o18\r\nFMrGOiw7HGV9TONyTQFUSiks3k182Qi79T83iNbiM0BnRGj23YtzhvyRB0vY\r\nnxGsVd5XxiOmELhz7QL017jmnnJQ0uyDDB6fQvAf0+xlX3yv24RbQwtYkulc\r\nicTFsWFj4qUqTBf7+VrjrGK1EogcQD1z2qg=\r\n=Rjpl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b177b40e2.0","@material/rtl":"15.0.0-canary.b177b40e2.0","@material/base":"15.0.0-canary.b177b40e2.0","@material/list":"15.0.0-canary.b177b40e2.0","@material/shape":"15.0.0-canary.b177b40e2.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/ripple":"15.0.0-canary.b177b40e2.0","@material/animation":"15.0.0-canary.b177b40e2.0","@material/elevation":"15.0.0-canary.b177b40e2.0","@material/typography":"15.0.0-canary.b177b40e2.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b177b40e2.0_1675308971114_0.23172539792548785","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/drawer","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.d9f821042.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81bec26c32c1e9872760d46f54d9fcbeb5d6a239","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.d9f821042.0.tgz","fileCount":47,"integrity":"sha512-aBDfvyssSUDalPAl6+Iz7QKntvNtq4ZhepVsCWJXsQV3UzmWO/vZkTuu4j8B5cFjF4yCVBXk+AXzRwYbkm5V9Q==","signatures":[{"sig":"MEUCID1LhhYGktb9tvzrHTUP+JCom1LqBDc7t4sF0GxOXQZ8AiEAs1d0inqcKF1UNlvi/0JqdbwY332C04Gt1Ob3chctQC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/WBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJiw/9GNJNStCttAH7FoZeJMC8COf7+gIarRJU1MK7WSBpFVzQMz0T\r\nsaDVG3f6GCAA2n/7YxRdVFKOf0f9lfsRc7SItsAH/e048dHi31uZqkwIokoj\r\nW2f6cudHhDTChFYVG4SILUFCgd1L6Hy6nr58MOiv9p0arL/AeYt2wB6u5lMo\r\nvolzhV8z5kyMC2b8PW2+OMUVRuLRcwRbHEC6+wuWQ75E3IYVhkfTJBAoa8sX\r\nTWuvL8XcTXQysSinB0Gkq1jqWXWiYyB2U3yjQINOCj8s0KKyw/51MrcmOuIt\r\nLSiC/tN9pQxwq3hNFzTFSlArihoFDIvgZGsyjFZWHnSPDc1dFrD1+RixPjzy\r\n65HHXgEr3Y8aasHo6NxZ8WU0tJR6g0FEmM73kvDElTTl6d6+rF4D6rgFbIVP\r\nMSigIZBdoCiSGQvKJ5cvb43EfvTs1DS6Bu3w7uW+RgBIm3Vhpv7+JKCmMeyv\r\nl5CPB3HcLyZKQ3SzrBKvhKIsYoSnpBirnsCILjUOS9wVTYdmfuWpHsrJvEq4\r\nPXN/JRcPySzh39JyNmoMnLE44kHilxPzjapHtrmCQN3Sto4vlIDVg54Y4BFq\r\nudrFwhPeg0HzIQ9CnDrh/JF3etJxZ2JFqWjtZXRi9LPW8ObdTI8+FhnSld0k\r\nUScuip+SdCz2W26s2wVxJEOm+lnkbx3xQ2w=\r\n=Ekd5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9f821042.0","@material/rtl":"15.0.0-canary.d9f821042.0","@material/base":"15.0.0-canary.d9f821042.0","@material/list":"15.0.0-canary.d9f821042.0","@material/shape":"15.0.0-canary.d9f821042.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/ripple":"15.0.0-canary.d9f821042.0","@material/animation":"15.0.0-canary.d9f821042.0","@material/elevation":"15.0.0-canary.d9f821042.0","@material/typography":"15.0.0-canary.d9f821042.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.d9f821042.0_1675359617444_0.9157117325631146","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/drawer","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.47c7deb19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8c8c122034382289cf8d36911acb654f4e0753b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.47c7deb19.0.tgz","fileCount":47,"integrity":"sha512-Q9v12u8fPn0f3NUDi8SqdUeIXeHWnAXqU9Tr8v9zGFvOvTVOBYcJmiW2Zoa9I8VAA84NXNwyO4Iyw/s/jUf43Q==","signatures":[{"sig":"MEUCIQCvDKVed+LHHlbmQEBkzQ5kr+DKyFkar97aAhcdgBO1vgIgLXps/XWGt83pd+JmnYYzoPyQssZK1LkMt2UbRARdUrI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M+YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqM+Q//VWj0DDNuC4G9G3nz51APgbi5o8jvNg63j4K84AtRJH803vUp\r\nhHRk2P5n2t3ou94nq1cjG7S+nISoChbE1hU0ICV4usHhWS/Fxubhs1jSQ97+\r\nIiaUAhwtd7rZLMzr/0dl4Xn5Gi4+oPkQttA22HvGRQYsR9YdAiKZeDnjGpYU\r\nJX4LDu9nY14gnTgGIVpPAev5Jdve2dSzFORAs88g14UIpuukfW4qkAAYHyZY\r\nFI+mdMryUxLVhANw2lAqT70eXTYVfRyE3eT7WSr02g8K3aCU4h9Uh13OkNiA\r\nCAM0Uga5Af4FV7ZblQVmEVm5w5UiAR188iAf0MFf2lVKS16suKQWHmJtFySK\r\n6vgHEwHQhrzSUWgm3ryucxm+4aAczlE9C32FLN/D9hL91cFOdp1EyW4u6KkW\r\nyqgDdx6EhD1Lu4/KhtPJX59gnaN2ENE13pCaXL+B6behjkM7rsuKdmK7cD5W\r\nYE8HThQV0t5Qxwz13paCIrdEGgFaG+JYbIH3jY5o856acNnx1ObNjQAbYfi/\r\n5SNqaruooCKxUWRaZ31FNbgH20LlEA0jcb4/4e/qTb81dU18kfOwHX3Cu6Qh\r\nuXi7PF40wpqBIqxu1Pq2DLb3m7SQuRrTkhZwnkOF/jWDqiuY/31t49+5PVB6\r\nDXHXzQXFsN2uOYuPaOUOppvUyyJhZeq6aK4=\r\n=ohII\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c7deb19.0","@material/rtl":"15.0.0-canary.47c7deb19.0","@material/base":"15.0.0-canary.47c7deb19.0","@material/list":"15.0.0-canary.47c7deb19.0","@material/shape":"15.0.0-canary.47c7deb19.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/ripple":"15.0.0-canary.47c7deb19.0","@material/animation":"15.0.0-canary.47c7deb19.0","@material/elevation":"15.0.0-canary.47c7deb19.0","@material/typography":"15.0.0-canary.47c7deb19.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.47c7deb19.0_1675415448651_0.5951629425604361","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/drawer","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a16dbd1a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"294e61fd6aca1bf70519a8c0e46440e61f1097cb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":47,"integrity":"sha512-9mCXlqqZu8rnoVosPkG83LmLy4VGB8F2bTWwgmXD658GYpYUN5JW1ROZGEpcPUDGYXdpIjjnwLZouBD+KmHh2Q==","signatures":[{"sig":"MEYCIQC7Prs1Xo/xPfKisJ5CVZqgUUPKLK2TNqemZg4sy+KqrAIhALcu+3G9MVmVtAM0Bg86z2w48l/Cg9IW+H4KyZq56YWA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3fg0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDlhAAoUmWCsF48ODZxqvc5VltARlsjayHYFrkyybH0apyTQ+7Cbi8\r\nJl2QYyhAuX/GGnizAM+KR2xyRue6hacDq1MmVGlM+X0qheQZoazWNoGE2sm0\r\nUYM5vqXE/G9rSk0bfGOgnPBtOoMkFWdxAnRkLtR6f//Uv7neKZTrMHv6Vo+s\r\nvfymXSqR1x0S/ZKRqjH0sOGwDxWsTUNOu+14oBfZiPOEJLY8YFL/74dXH+9i\r\nq/KT9wpp3TT1Q2csBdF7Ez8aWeLRmSibAicVjAv/RR3WTn7ZbpqRlgyoYolk\r\nAyh29BLSjNlgkACtRTBTfI+fWoHgdLZpHtsj8mtlEa+lcEvQJrWPpBehbUKg\r\n418auAJdsoO62uoTc+/0Gqc0DEFxKcQZCzjcyv4UCzckArbq3jNttnHvpMDq\r\nVXs4X+jEIZttWO2d+f0OfIa1Ho6i+u5MxzkbFBfW1SS92pBsM60R+QimZBwJ\r\nToV9EHsuimu6ygkN4ccu0IQJBtUDiqD7j/XXiAip6BKhdeKdxqdPSK9CQ39Z\r\nM2h7kM2VYti+w1MwYVgg6OCmSwJb5W+WOkyv9Ij3QAuaHajzIRHwjKHjfdkj\r\n0XCdPvgNNPvzknE2gTjOEjkJLQYzallcdHk1Bv0Mx2JFklK79YIyrRA87tp2\r\nfSbQh/A765I+7XjuVX+HnKi9rsrXrT313/k=\r\n=swr2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a16dbd1a6.0","@material/rtl":"15.0.0-canary.a16dbd1a6.0","@material/base":"15.0.0-canary.a16dbd1a6.0","@material/list":"15.0.0-canary.a16dbd1a6.0","@material/shape":"15.0.0-canary.a16dbd1a6.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/ripple":"15.0.0-canary.a16dbd1a6.0","@material/animation":"15.0.0-canary.a16dbd1a6.0","@material/elevation":"15.0.0-canary.a16dbd1a6.0","@material/typography":"15.0.0-canary.a16dbd1a6.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a16dbd1a6.0_1675491380617_0.6022715301041983","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/drawer","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.93416f87a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cedf508115fdbf6172c56c7857c56c00bf29e885","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.93416f87a.0.tgz","fileCount":47,"integrity":"sha512-ZMXRydQBCvWwPz+u8GFPibwf+A2XBqeXBs5PwlZepk1aW8licltP3nkYi7vQwzqSOnqJsGqyGfTH7rBw/2h8Fw==","signatures":[{"sig":"MEYCIQDQQkuiBmYLGpAAWStJgc3g4SpHBl+WqHdnOGp867o6cgIhAL7SaC6CYnTSdHkhTbGFwesdZWp2ae0vb5izewPFlJ5c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lFrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCOQ//eB/vZBYo6nBxI4IenC3h+PIAqR8Qxok9bSAbtJGMBedg5udH\r\nt5AgCeTKagGYtpTJOcsakL3GyI9ufGBALglyKIfBaZImgbKx3klIDn0uIo9h\r\nMc5Ow04hIIGWNL4oxEbJ5Q5IolltIH7yhc5UO5Q2v8E8wJQK2jQr2Sm+vn+6\r\nxdP+B0tObAS0qzikCuP4KGLOKZ0mcIkzqHAN7Lwlqk9lsKEmMDX+2frxjDY2\r\nbkENMnRaeC2sr7E9lIPXKnxgmyw4P0/Tg+0CeQ7GSsqy6ZdpM1bw+mu7622c\r\niRliQ/yV9F0N7zy0sjUUTVoFbBLmtidlR8jpgDaAcNxriA+61XMoOP5olxv9\r\nxrMpeOwGYqte9uxs90Da3QJPz174qqL5g8NAWRTamKd2RX5BaHN6AJnhvo9V\r\nJRZ5o66ouwKhEDUroTytqSR1VyPZjvIo/8UCIpxQHBE2cI9TnGVocjjN5fGi\r\n4Ztmfz912OQu4q1N9GIrQ73V+uQeJqx8qGQmyoQ6tJmMvQbad49GsbuBiuwj\r\nhMuZLTbBQMznsccQOQd5/ozEHH+VDhr0Bl80rKKVEjBQb+3qT14I4X0NtxSJ\r\ntWc+JApbwEM8tVIOH0NZxJN9bsvP8QsDNoQMOBwNzJskdmBDXzjuTfegvNiw\r\nce8wE9ra5pmtcT2VGx0syaCqtTfBUU4+A8c=\r\n=AuxS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93416f87a.0","@material/rtl":"15.0.0-canary.93416f87a.0","@material/base":"15.0.0-canary.93416f87a.0","@material/list":"15.0.0-canary.93416f87a.0","@material/shape":"15.0.0-canary.93416f87a.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/ripple":"15.0.0-canary.93416f87a.0","@material/animation":"15.0.0-canary.93416f87a.0","@material/elevation":"15.0.0-canary.93416f87a.0","@material/typography":"15.0.0-canary.93416f87a.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.93416f87a.0_1675776362883_0.6307126700448635","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/drawer","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.49b8e7442.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e27ccc7fdee8d3776bf67c26f03279e7078c5ad","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.49b8e7442.0.tgz","fileCount":47,"integrity":"sha512-rZn7vTZejWP1XYB7m+Vqn6/i8+5+rJ6LBRz+Lf7B1bsqdxGqfqA2kQcQl6wx0HvQKL268fuLfuJAg1Rwj0V0Jg==","signatures":[{"sig":"MEQCIGXa95WAW2s2iveEh7+/Odoxd9Uqhf9micCudxLtzhaXAiAgx4f48Cwpe6oW0hbrEiX+7p45Mo6XiK2RUi+oJe3iwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tqdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkYQ/5AJWZ8hO2oUIQ3FKEbEV6k5MrGdsYv8yW0kbAaAbRb7mpPmJw\r\n1KZVwb4DAp9v8cRot6ock74Vo8r9IY4Dj3/s13HN0DN35/3man7RSI8X+8Ym\r\nZeQ7f2NsXSNlwdnI4jZfmYaVY2dDSG5ndFPHq0Tmk5KEQvkrpXO0WCm3QLPR\r\nChVAQ3K/jjDD33wULgZHVY3CYfWfQU4FB3Ebkb7XMho8rtCc76ce/VT5/lRa\r\npTu/V2ELHiKWADVlPNXPKvpWG61/HvS5ajLkZcrzaR/x/hCZMkxSXJkCjfIo\r\nWnFmWK4Xgpi6gZyDfO29nYEdBzfyfGCB50HB2AkmjApGb9uBRKbU5FP+83tJ\r\n7E5+2jev2LoVfg5io+kYS3DYHrh8jQ0gi8RkIuZdgclxCDhuUuzmOl8RY3yX\r\no6mKjiQ6BC6Cu4DjyCNwBeTNMIyWI8B4st5ii9EpeKmRuh92yIkOWbU2M17I\r\n8P6idjElTm1ss8n/eipxrjhj7k2bBOvY7p/LeA/uVVeljOKfQviI09C9RkOr\r\nG4fyBJ47nGuoRFX2CghThuZqXPq3Q3eC3RqlYVlQEcAZbCAYNE6dGoqqZZw8\r\nRxSdMU1pcbeQ9roZsx27+b4wOmtQpPJlCLIUsAs1Fi7rS3E+4Qn73oQELJ+6\r\nXQ8U9i3BRIVUBHaivUlS/9vZn48ypqrZ70M=\r\n=lOPy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49b8e7442.0","@material/rtl":"15.0.0-canary.49b8e7442.0","@material/base":"15.0.0-canary.49b8e7442.0","@material/list":"15.0.0-canary.49b8e7442.0","@material/shape":"15.0.0-canary.49b8e7442.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/ripple":"15.0.0-canary.49b8e7442.0","@material/animation":"15.0.0-canary.49b8e7442.0","@material/elevation":"15.0.0-canary.49b8e7442.0","@material/typography":"15.0.0-canary.49b8e7442.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.49b8e7442.0_1675811484866_0.4905651329469978","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/drawer","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.de38de758.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccd008c9baccd1552959c9e3d3c478133757588c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.de38de758.0.tgz","fileCount":47,"integrity":"sha512-X+FC9t5TaiKkdb9cNVUAtuT1O+ybgbja0alVxISIaEk+pcYjB65DTORwukH4sMsV9N3/lEs+wsahWB44e2PC4w==","signatures":[{"sig":"MEUCIQCac7g88gU7tXojvnYpllAsUE/NBAzOQvutpOmVDrJI7gIgUNHqvFAMD9Fiss9DLNssHZ3lgHL6xTG2BQ+lJPeGp4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RTSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMMA/9E/csLOqWTOuj6Cb/mAw8prz4StGv9H/YdztEkufU3lA4wEnE\r\nzATPqoIG2dzAT1SQAzAuJosxETHohzXTkfYzXtsMx1HprZNvoh3+P2Xtpatq\r\nl259d+4XLzbSZPWQ5geI78XQJFbjhGFVTUKxGCajxW5yOP2MgLmZJmgtMBSP\r\nP1N2dEvQKThUw43zfix+VDFTecsBiSh5TIDG/TLDr3jupx/eREQnhNbpDz+X\r\n4hb+g5ZqbgKAvk/U7a2K0Cfcq9zkWNG4mLvy4eHXoBpMBiyHzjrTjYWvbNNY\r\nq5btuBuoKy0QrVjp13lk6FLU6jEnamZL/6EG+EqZx4qKeoIFjxtZzPZ3eTWr\r\nsHX3cWQN0tkInKdJNnmCvSGa7s0JK1ZOXIQmRitiDwI12Qhq2jzG9FIh4AhL\r\nhFAGSoOb7WDaIdgWCt9f/2bmm0bELRUe6EX54ho60V6ptrB7j25yt1d8/8aH\r\nt0BARWqYNf5WGybxHU09h4BA5xy2JzI8b6A7UDTmm2p69UdjQk4eIIZPL9nT\r\nzxk1i8oCo0TB7yEzxko+HG7Is+K0SD2gFt+lCFXjtsusA3iCpKyIjltjYDVC\r\nGqJjDK2Tho+e5uHh+oAWcP+XFsPm720q7jD0K9z+zxy6TjPZx+ZRAcYiozuw\r\na2/6dtvXEqxHgbYsEPDWsr5aFrk9ywFqm2M=\r\n=vGDZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de38de758.0","@material/rtl":"15.0.0-canary.de38de758.0","@material/base":"15.0.0-canary.de38de758.0","@material/list":"15.0.0-canary.de38de758.0","@material/shape":"15.0.0-canary.de38de758.0","@material/theme":"15.0.0-canary.de38de758.0","@material/ripple":"15.0.0-canary.de38de758.0","@material/animation":"15.0.0-canary.de38de758.0","@material/elevation":"15.0.0-canary.de38de758.0","@material/typography":"15.0.0-canary.de38de758.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.de38de758.0_1675957458211_0.9600898653755903","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/drawer","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.4d62de70c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2209511239f14614960584868c6762df51e52cef","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.4d62de70c.0.tgz","fileCount":47,"integrity":"sha512-HDxK3gppFA/mE/stNENTmjEGqddhxpioGuyJ5JXPehO9d4SFN2T4IDRVoP1jlp8d///OCxHDVyjQNoHifoQIbA==","signatures":[{"sig":"MEYCIQCLDu97TsLGr+jqoxo+j+mIBxjNYXYTkiqt+F4tQ5dEOAIhAO+UyWcAWwIvmrVXhW4c4LznPZwAkMvKYaygGR0pubCj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W4MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfoA/+LJSMOYx/I3ZL30KNW7I2uzbqguY1gjCAm5bP79d4ZYVeFaBs\r\n4bWBJY0nhfhaZyg17OndQ+sleERjWYd0vofzuqsNkR5F+C8xvsfF9S8UHA57\r\nuyQKKkY9EYr9SOs9cMoK8y39ZBbortATq2WpibNKmfMlocs0n96+4pjubE6v\r\nnIKRXz2hpaQWqlpgMS4qDRS6RM4/9lv9NjRN6wTinK8HMwIMY2pXTYB4CPg9\r\nRpRV1ckSodJS6CQb4k5qt/tX+q7eNELXybQjIZfqgrGephZ8SZGvsDuVrB4d\r\nrDDn6vREqDdaSErbBSkeUfLTrUqoAFMFRkDoq8G0w4Q/BPravdF2VoNOHlOJ\r\nXYyCRAqfz0IEEJn/Bsom+ueqrx36ACtRzzvaYiRc6RQm/V/2ATL2GmhTZd+z\r\nR4xUplNY2Brpx7ApVT1otciv2m4rVNcmmqMThSby5cWViAqEsBDkM11QbiBW\r\npN2yXWOspV2BTkmsK3p6bBj2CuSZxvE1eXYhdjDmHKi9wPhL71q4co4Lepp5\r\nVWBnka8rfSPudtKFzvTG2nUbRkk4uyIGhaLmcB6jdq1rAgwzu3hVELOwLtxw\r\n83NF5nGyQuxLLpR30L3BrwXBVG2e6q9jwD71evw5c8kjSkgXSywu+jGxFflT\r\nIGWY4f/qnO/XtzFU2i49eJWQlpTjsIRH3wQ=\r\n=wJ/L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4d62de70c.0","@material/rtl":"15.0.0-canary.4d62de70c.0","@material/base":"15.0.0-canary.4d62de70c.0","@material/list":"15.0.0-canary.4d62de70c.0","@material/shape":"15.0.0-canary.4d62de70c.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/ripple":"15.0.0-canary.4d62de70c.0","@material/animation":"15.0.0-canary.4d62de70c.0","@material/elevation":"15.0.0-canary.4d62de70c.0","@material/typography":"15.0.0-canary.4d62de70c.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.4d62de70c.0_1675980300291_0.7781704731072341","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/drawer","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.6fcd8d418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8ddd4f6486a150b563d7dc81a5f33649a929c0e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.6fcd8d418.0.tgz","fileCount":47,"integrity":"sha512-ibI8Kpk/d84G6D+wPB+plWuqFg7SC6wc8dxrrSnKpHHqeG8FLNIKl+eNeWdBh0F4A9YHGaj+VL27SJoBdVZ//g==","signatures":[{"sig":"MEUCIQCC9FDNVBS1WmgzaXs3fT9kdrYaBgFuCNusgW+pTnoXyQIgJQjR2MWj7ozx3S1/FPJeUTTTpMlL76BC0bQTIq5nCp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iRIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSiRAAkF+yx6gRxj9rclWjPUjvwYBAF1vmK5NNqYpBvwSq7eeMVrCc\r\nBjQZ6/AOMlU2+JNFtMrBTOZTBy9vasDfuKyxBZdWYEDY48pvU2MV9xMll3dS\r\nRUSU57TBWRUveBwLS+lm8A82+sbAhN/rkreLUudRfnuntpsP3vc8X1U+PV4Q\r\nkw8lqc8UgCdpBJN4N+pXdisLh++F7RkEynORuBkP+Sz1vmS4Q5XH4TOPIIMS\r\ndQMPtYD8fqYGCG3M3f9yV4o2W6TUaMrWu1OgVQJ7t/S7/PqNeQoyeEzvZITy\r\nC2GjsSotoHRfJi4LJ728ibW6ftSHD/2srMQJ+zjQuk+HZEDbxh/1QmIk8MpO\r\n45IdM8zMogVKFIi/XFdh0YPhsuIsSxUKtoSXgSWdzzfbB+QvzorJwyngCH4K\r\nbBbq0UvCMSpzTeuuQVWYdeyeMuCtP81lSbv6hFFJvWKieJZQb+e2cISsuc9P\r\nBJ62aLsXTMjHxJo2twA9/aF/rPMmJzNWDduytAxoEZv0La8lzPc5FZG+fVT5\r\n85LoMp8NstHPgMYKjE6159onU4DG+XpJF0rZVlXws4+It9YSg4srnDZEk5Wg\r\nmKKawvQlD4gmMwb5gplPLu763ZaSCOMAzhdXaanJyHmZSpJ/Lsuv05mnlBTk\r\nDo1lyZTeSS0l+b2iTZyPTzunUv8Dp3hyPWI=\r\n=fwiW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6fcd8d418.0","@material/rtl":"15.0.0-canary.6fcd8d418.0","@material/base":"15.0.0-canary.6fcd8d418.0","@material/list":"15.0.0-canary.6fcd8d418.0","@material/shape":"15.0.0-canary.6fcd8d418.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/ripple":"15.0.0-canary.6fcd8d418.0","@material/animation":"15.0.0-canary.6fcd8d418.0","@material/elevation":"15.0.0-canary.6fcd8d418.0","@material/typography":"15.0.0-canary.6fcd8d418.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.6fcd8d418.0_1676289096467_0.4220051203567159","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/drawer","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.066d9439b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da2f06d0410ef791741199a99d0a0320228caf15","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.066d9439b.0.tgz","fileCount":47,"integrity":"sha512-97KYw9ihYUMb0SWilcmXuZx0Mq5TDggw7Ir/UNMS+Y2AUBR9uS18Uo0vKvd4b896r58l1TmcuKQ9ViK/GRnyDg==","signatures":[{"sig":"MEUCIQC5kyqeupXbq25LAc9h/u9RMZQqQ5ooEr5MapoOs/v2LQIga4cTlX+tmKLPYrWvHJepmYyw0fH31yGyN3L5h0TXWaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TnCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAzhAAgGknwsU43obwdkcZSJGzQXKeijVr5QoI0sGgXMbTqqT7msQu\r\nJeOrozzCI8rrWCAHJZdSungcXgs1Kq+WRxLntOqnR4rNnute8EfTqgM0G+EQ\r\n3yYDlO+JxnGwhLGEHHszLzQSb10rlq7Nz0b31y316X0sepy1DV0c1QarbEIT\r\nh9MX04iavH9RGNlNGqjOct58UyiiNC1xs2CEiyd0TcF0kO8GuJGPoKGKwDJu\r\niAqhlmyob5DxiqMo9Ami+wF6wfN9+x1HJSiqeI49MLUQTmQD9DWlDI6YvTv3\r\n72P2PHjXDzDfPDqh0pm+zfH9nmsNi3LAuB1nCep/mBs2QbqZVNTs3T8LnFHy\r\nU3wVQioFV9/Ki6KhqM1QODTmeikfyciJqfFo2hObuPIggO9YasG722yAGqhW\r\nRamNQYpBeyd0+e8H0sjkGti21o1tYgAI4nzhZdtRS5iu19jvCTU9QZ0g9IlJ\r\nzJsyg7ChaQOzgwH8+IfivHtMYG2IF5EJ6e/geyVWLXsdDCq1GJVbd6bAnFeQ\r\n8nJBQ/RzS2JUijgStnqJaM07VXoVPr85Tq0IihvEKI4OmHlivN+JnsWIW3oe\r\nXVUaHqC2/jA0TH9/dF+TRR+etg8o/oda2MP5UFyLuJycRkOhhLYD7+UtFJz9\r\n7x1OaACXLISuwfUa7aMfBYJnnN7ba9NK5QM=\r\n=vN29\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.066d9439b.0","@material/rtl":"15.0.0-canary.066d9439b.0","@material/base":"15.0.0-canary.066d9439b.0","@material/list":"15.0.0-canary.066d9439b.0","@material/shape":"15.0.0-canary.066d9439b.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/ripple":"15.0.0-canary.066d9439b.0","@material/animation":"15.0.0-canary.066d9439b.0","@material/elevation":"15.0.0-canary.066d9439b.0","@material/typography":"15.0.0-canary.066d9439b.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.066d9439b.0_1676491201566_0.9389480789347595","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/drawer","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.7ab32468c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc071e65d6c42ad80b851b413aa3f0a9e81e5eb1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.7ab32468c.0.tgz","fileCount":47,"integrity":"sha512-lW+N6X1USSSwmERbcAgMZHfAsS9uQti0V9SveCqoRB09vd5yapI/I+skrqQNU83ZirE1cUG8IjDuLS1qCcwNng==","signatures":[{"sig":"MEYCIQDhKqH1STeUxOU5JFiD4o0SLgUrjFKjavzUDHSylLyMPQIhAKPE8j+KUXgAZ4LlSNzfoqHVNGlW1RqRemZ+oE8bjY5p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q8YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmYQ/+PTtE7aFPcezv5Mz+5h6yUvOnRVT6GQPSXiEq9Vs1L6iIswmG\r\nuU8MegvAZEuPR1pOfXcb1CPn2dXnyeJWcpxOw7Q6S9bqFAoj/YU1G9cLuFHF\r\nzaE68JngZfFfHXNoyKNSVjZlSBbu7ztGH0QQihSHOcFA9A8tZut0MNaBvUGj\r\n2k50k7Sez8ESh3YGE9jckwALk62j13NYmxqXyoSb+XKwgNWFlVL41Kl3se5x\r\nMQOD7oNYCvQ1M5lqemgCUJMP/mEkSMBfswHueBkX8bBLOA2pZCWUAAyYrIeG\r\nk8+fUjw6qfB7y5oTfDTaLZbRIztxsAYw1cngPoEtLSI2hJjuVvRTClAc+fsM\r\nT1EsHj/xPFRdD1wb0Q4po4f5nFVmMKU+LN6Vh6fbEYSnUkAtYSNtqtQ4y63L\r\nCBxvkrUDAf9s8hN60rHqZj+r+gwm0NMKtWI/9X7LZrKJfygN+cWYvc1d+/qh\r\n/0ygHXcIwQJcttgiIoLXWJEtsStzU2JsafYmx4FzVqMYHQxZhjrC1oCHkoiW\r\n5vFnO9y3U0SWApTHhNT2Q6LtNWAkaxyQcxNdIyV/JUa8WtLlbWxrTvYHKzvN\r\n/lP2lsS0JswAF82utQMTGeDl7PQ70DhP/whl8QC+A2dRCNoOrHkqt7hRBph9\r\nNgxNRMPklC+WSnjQabU4MOIAcv+AxqPfLSE=\r\n=um0R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab32468c.0","@material/rtl":"15.0.0-canary.7ab32468c.0","@material/base":"15.0.0-canary.7ab32468c.0","@material/list":"15.0.0-canary.7ab32468c.0","@material/shape":"15.0.0-canary.7ab32468c.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/ripple":"15.0.0-canary.7ab32468c.0","@material/animation":"15.0.0-canary.7ab32468c.0","@material/elevation":"15.0.0-canary.7ab32468c.0","@material/typography":"15.0.0-canary.7ab32468c.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.7ab32468c.0_1677004568477_0.7423920484147188","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/drawer","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.fa27ba61d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c89569c57f3c32ee719a4c518be9117b66a1805","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.fa27ba61d.0.tgz","fileCount":47,"integrity":"sha512-/CUl9y1Gm2m3C2TlsSgyi/fijNBhvi8IskBUHtI+awMJm55ZVawIaasqlncvLKwp9E+EC8LBpXp9b+HVU722uw==","signatures":[{"sig":"MEQCIDlwwC1S2lQYIpz5oHfDMqvXHlKKpePpqGqM2os7zhGUAiBkpjo48YpBByKC+XqHkVbzVQHktrd60/CBHVhYlTkHrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NieACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpv6Q//TDPX/ZVvLQ90M8HIN+5jxdRmFZof2aXUlW/z5mHlYetRu5Hz\r\n3fsEuOu+C32TuQL8dXT57z0lJrmSWleks6XGhSBlik/5uphfKtOWNfF0rzVE\r\naOYY5IJu0fWKg9q/QiIr2uH4v9gXjbT6uggj0UtG1+n4Dyu95ncoZpzBKYB1\r\nk89gNAloVmA99DlpQbMBMlxaQKBtpR4FvVy+j5z+Fzi7UuW0UCR6W+gTg8XJ\r\nkMyBRVO5dwdP3hhYD4xog2mGzfVkEZImmKn/B1JAVFnc2WvTFvGbUHd9Vfk+\r\nX90XDFBKHjNomtVgbGUI+LEaVdVpHN/pElZAfm96jKAEjzml8K/uGPQ0on7T\r\nZphsG3G+s9wKskD76/7AqErKh1iAT4QPx3PgoTmCTxXscuNvdfje+AU/vea6\r\nmmz+EacpIeGQYE1Ur531Vkk1gIci5jvTdFZP3N1z9STvPKtn4Uv0Zk8Me1aY\r\nfogDsAHVlCZoZ2KBLL3ndhM7qlkftDY9hu6Oo3Zm0Kx0sD9OW5dfNAhhPYgD\r\nKNAJxJbyj52lpYkXyyVWxbLqin1BPvFow7Oyiv92cyz8aODomoVmlQpx5U/d\r\nR06iZNRNEwMsVkZOZDIZBBYDVOe6e3NkBJtCVLtiUIiGdUv0PqnBd2qs+ME9\r\n+jkTkZZEyU9y86T5jYv64qSFwQHlgVsh1c4=\r\n=7USb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa27ba61d.0","@material/rtl":"15.0.0-canary.fa27ba61d.0","@material/base":"15.0.0-canary.fa27ba61d.0","@material/list":"15.0.0-canary.fa27ba61d.0","@material/shape":"15.0.0-canary.fa27ba61d.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/ripple":"15.0.0-canary.fa27ba61d.0","@material/animation":"15.0.0-canary.fa27ba61d.0","@material/elevation":"15.0.0-canary.fa27ba61d.0","@material/typography":"15.0.0-canary.fa27ba61d.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.fa27ba61d.0_1677514910664_0.19857598195474324","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/drawer","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.311ab4d4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd9c3678d207d68699ce1dddf946225c7acd0b87","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.311ab4d4a.0.tgz","fileCount":47,"integrity":"sha512-N6qhZ3YmyoQBq+1mjj6GIs8X4Kj/JxF07NGn2n95NTxUNF8KP/7ZZk0pquz6ekfnYoeNHTuc/1ikpo5my7PVOQ==","signatures":[{"sig":"MEUCIHHhFtpSdAX5JqPQdIuIBiZVWJ7eNJkCUydFZkh4JXfDAiEAmwT+zcolsZZZ6ostjQtaDGYV+5WgqmiReGvn0yJrkjY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N2qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnrQ/+NmDQPqOlil/0gxnPmZl11tz8DBRJ8yeTEv5LjviUxvwUIGRb\r\nevvViaxtwVb25aU4w7xVKv29NwkhV9i/f2x8sYBCDl/CSrwZOOrN1tWVHQAl\r\n6b5Vnpq04TXg2Mtkof+8Kjlpc39trJTnN/1BLxpEHJKDEfhr0unh4O/K28uL\r\nBa9GG2nywN9klaj/xzvzN8XlSmJiZmj5L0i9P4coqN3QNgnRRSL1+6w59+75\r\nAeQ5WBbEx8Pjd0d9pp3RGJI1g/CvPy2rHh0lXb6hK0abKa06pmoPF0fDzr2x\r\nWIm7k7P11DKz5m6d2pAGqdB0O16eY7LsHwd20pwmyk1qeizjk/SP+Nj+gSOT\r\nJLThK0tglssaV6qNVWIQMDYv8wtLiAs/Oi4GBLsffg1iDRgkFCTsafh6t5/+\r\ns6gbXo84BGSBTRxeHF1rx0OXUkHAcyOHkrC5N/N57qOM52dyzdPfdO6vPzjf\r\nB08H2cRm7GeJolVGe3MG2TKPw+awbhu1PueOhgcHakIQGmfKQm4ok4m6T7e9\r\neiJxwHds0MlHAfBumxvHl3z4qFhZyCxNQdneiD6szzjZMnSiuUHuX8zBCc44\r\nNSZaNf9fss+x/su77PXm3r4ww9DleDV/W+TeuMzMX5dZBqMPRhI89/9FJjYF\r\nEygtKg3tTLFHs6WLgMjbZQZwoUW6EiKKJCk=\r\n=4eem\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311ab4d4a.0","@material/rtl":"15.0.0-canary.311ab4d4a.0","@material/base":"15.0.0-canary.311ab4d4a.0","@material/list":"15.0.0-canary.311ab4d4a.0","@material/shape":"15.0.0-canary.311ab4d4a.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/ripple":"15.0.0-canary.311ab4d4a.0","@material/animation":"15.0.0-canary.311ab4d4a.0","@material/elevation":"15.0.0-canary.311ab4d4a.0","@material/typography":"15.0.0-canary.311ab4d4a.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.311ab4d4a.0_1677516201767_0.7354187718892544","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/drawer","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.5cb8e2174.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4ab40ed692f1c31955e2472196144b0d0ee5e9b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.5cb8e2174.0.tgz","fileCount":47,"integrity":"sha512-0nhgFFJmFNs3gdRaH7/SK2fL1bPMOhABKA8Gv6HGmZuf9MW+Z6SEYCaKKonPWOFsm1TtvXNa7FOrKo4FbQ0F0Q==","signatures":[{"sig":"MEUCIHT/jsWkwcrPM06wF4EjEOcc3whT3rHzsPtku7KK65gPAiEAq6wq/+2qbHahwn2gfxdwFFjQCH2U45NJ69J63iRs42U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/39VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVixAAhaSfKFdJKLtRZvi2NVIXOT/gHUzdBAFiP4DZTvfawZVKLUCd\r\n3n1/VD2r63XWiOn6OQcbzt94xhivHj30ePDudvbcRVj7FYbjszxFg2P2fTi/\r\nKhehGf+bMAyurV1bxiJWcFP79DIaLhAXmnhr18h7+RaTH0NVvXFncqzmIT91\r\nYMBpDKP1uepS780lzEmmzQr5NLxowwNOkLrAWbrfEY+FW0Hn0DrpF8zzxvQP\r\n8ltKD1LeNQ3HnYXr3CBst6JlOIVUDQnvqi9R4LvGFCQe2mHsmQLaoZli8TnM\r\nHKkJFpHb4Pb0nKV9RcZ4nziVo9Hz9i6KYV2OdTpZoqYHAxPKqALkh203VbLF\r\nknEZ0+nULoSmO6QMvjUdkwy6vxRf3QV4MawFbrllFmFkSaCHWA7KWSD2bG8V\r\ntn4R/fdCij5KjkDvZ0CjZpzj8i78Mlpx4jCs462GEGTodesh+gU42o8K9klP\r\nrFTpWoThZeu5g0eOSfu0l0KnHwBPfK6sgxghQ2owgpSRWy0sRGaMAaLBoq72\r\n/myDNbMsrI4xF3OALchLNpIr4MGTH4vct4mkYShkRLNm02Jc98koL/fMPaxY\r\nexi/vdbv6rsQhp19QHAhGyw/NR8/34/Xaxwmf06ip9TEh4OLUmv/YIlBxmIW\r\nQyI5n+Ds9C64kg8nCnyPs9vtPHEcmYjFxpA=\r\n=P/DK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5cb8e2174.0","@material/rtl":"15.0.0-canary.5cb8e2174.0","@material/base":"15.0.0-canary.5cb8e2174.0","@material/list":"15.0.0-canary.5cb8e2174.0","@material/shape":"15.0.0-canary.5cb8e2174.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/ripple":"15.0.0-canary.5cb8e2174.0","@material/animation":"15.0.0-canary.5cb8e2174.0","@material/elevation":"15.0.0-canary.5cb8e2174.0","@material/typography":"15.0.0-canary.5cb8e2174.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.5cb8e2174.0_1677688661609_0.5903325766943845","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/drawer","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.f32339937.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf862bc0c1763eafbfdfef8ef5606fad11774a5e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.f32339937.0.tgz","fileCount":47,"integrity":"sha512-oOjDva/VVQlUSzybowR1Xn4x8E1dLSSflBuTFFLS+wsD8US+fjPdaspOcUg/9EabgH3T0ft+aAwYhU15czFK3A==","signatures":[{"sig":"MEQCIDrUfuhun/LBbOLhRJbnHnb0tcXIfdH6aVDrWXuszDlHAiAFfJmalc5XEpOhjBqV6OAgUOAh0/GUOMkNrjqyThckUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgQQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDdA/+JKvlcOD2vE9FM2/p8zVHhlx8MevY/L49LR295e+Z4ztWsKDF\r\n2618+K9tLMX1pYq+MjmYkop7NV+dRAFvmjFLf5TVlqcnD+SZpI2TV2oOGpip\r\n5LiTiVTSzldoFH5J5lf/TKX2W7swCYeJKLvodvfy+XGCtsmQAhKZNAbnll1U\r\n9i3VTdpv+QAhga3mylK3ahPAyTKYwhDqCtDQPrOf/EzwtcKsiz8uBJVExKzY\r\nRxId6UU5Lt0dnCw5fisDz9uGggOO1gvxYzEO0DHuurGOZ1x+VGktaUAC5j2Q\r\nIqg23quE1KnR4mVbMV0OfKLE/6UGEpDk3cX/cZtZ39DHH8mwN8/faEsVWTeW\r\n9I2VAhowAFxPelgsaZptAUsPmbETaUhMJBSNQhS+IOoXzPr9bg0Ki8DUxQDR\r\n/s2Rl0b3DRI1umkrTgO5BEAzhQHWIQR7buXGGyqJgQYexG7KSp1DIkJQHVZ8\r\nxBsaS/Uql054iBBgFc61wV6UmLdw4FsedOaSMr57R1XaZAeZcbvQ8aB+cp26\r\n7yiFSUcelC/25y7MmpufcaSV1s2u7Fd6Su+gpc+bWPssvArAf4o0aUQKFPGm\r\notfJT8mi+NGYTjlCoN1iv/iA2WUYc8GhI0zS+bI0LkKsVWjdOUrGpIuMAR0A\r\n74fpUf4Xfogv/DS5c7GCbDCp8KhrdWbudx4=\r\n=/2kE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f32339937.0","@material/rtl":"15.0.0-canary.f32339937.0","@material/base":"15.0.0-canary.f32339937.0","@material/list":"15.0.0-canary.f32339937.0","@material/shape":"15.0.0-canary.f32339937.0","@material/theme":"15.0.0-canary.f32339937.0","@material/ripple":"15.0.0-canary.f32339937.0","@material/animation":"15.0.0-canary.f32339937.0","@material/elevation":"15.0.0-canary.f32339937.0","@material/typography":"15.0.0-canary.f32339937.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.f32339937.0_1678115855970_0.08692359959829221","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/drawer","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.7644d63d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3efa557c115096dfb75f00d6322f7f7cb8c0d28","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.7644d63d5.0.tgz","fileCount":47,"integrity":"sha512-KQQsGh7VpB/aV01U89SU7cvSM4lm/4XiP2v1FHPw6i3pV40xh6jYqLVHcFmv1zq1n7faObVeQRNBNDsTPlsoNA==","signatures":[{"sig":"MEYCIQCsAAQBxSyaWCgXqGdMmr1Z4icO1JbyySc3qEHE1zxTHQIhAJspZbe/FjHhwjmS2h64vG+rCPoLbmUkThEjcqWGoH+P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmk8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1hg//Yj4oXLXP4inZoweUCxbFVYC6UfW9P3lNSxIEZO7Kst0z0i79\r\nLyH87BYR17rLyQwH9LHG4Sy/NukrANQj4bG65+EnNuT2jrMS6tQUwetth27q\r\nCgo8lsTW3dMdr8QmZnQ8C/Z+WrWWvkoCIrqfibUD78VWWsJptpJuL16bENyI\r\nRNqGXRfS8eSdpqSBwvQdN98/SfPypmjDoTnA8ciKTirSagm0VWt7rE2dyjar\r\ndylfhb5z8DZMtb5j3dY1CR7sFbCbf65gtgjBIMUX7b0SAel4rxhgWKadwabe\r\nEXOG2aEj0UYHLbO5q4sJxmJ7XszyKL/mKcIylUq6pk9MurLC3KfV3YvEy38p\r\nkgTfHE04H8q9rgsZ8gwzNm/eWpRCEyn7LFpzpQq3fYLVDqreeZvCla6Ytg16\r\nvhZhY9/ZQ//7vUNP7q+C3lM7ML7Z605OL6oIuR0grKSiQXwX/zH4NaMPBc5j\r\nVHbqxHY+u/1pGKByns5GL8iy/k7Ppx693zKJhIRWiFJxOOPlVHaTfZQzpvPH\r\nQy2EL6NaZsz3wFLU3m6Ox3Q/YK2d8tUQVIEQhEnGY/c+kdfGtfkzkExe/jur\r\niQq6dt7Uh/8cTh7n8Hf8+r47dwp47qHzVG2CWuRk2YAmc68qA0dFqZCbRUkI\r\nQDtVPkPJsF3PEbSv1i6GHaJGOoSM7Cq9KGk=\r\n=Lxxy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7644d63d5.0","@material/rtl":"15.0.0-canary.7644d63d5.0","@material/base":"15.0.0-canary.7644d63d5.0","@material/list":"15.0.0-canary.7644d63d5.0","@material/shape":"15.0.0-canary.7644d63d5.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/ripple":"15.0.0-canary.7644d63d5.0","@material/animation":"15.0.0-canary.7644d63d5.0","@material/elevation":"15.0.0-canary.7644d63d5.0","@material/typography":"15.0.0-canary.7644d63d5.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.7644d63d5.0_1678141756528_0.654207659802196","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/drawer","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.d96330c08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9313bbad985d3ae10925770ed2a49b40a3097cb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.d96330c08.0.tgz","fileCount":47,"integrity":"sha512-7cAY9UzQE8sHgQog62W8lTLz5Wp6snTD2pcIa4jvI+rYPWR16kkGOH4KevnZgYDqLctiQIiSRgEU7de93zKQJg==","signatures":[{"sig":"MEUCICW0T4dKL8W3RZ1kaokBiHn36fgKwyr7ODHymKavpJbYAiEAlJhoKotkKLcALOxvsugOn/5Gdob4YJyi6pGyATaU3PY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHTrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqaA/+Pq1pNy5e5suFjuHsDQGgcIpG5NMnpQMFzZer/5W4usbVTu1Y\r\nNNPj0z85QnNZOQ8qGHoouyKZ/A86v4x6gIitk2fsIiAv8MuD37rFotZhE+S/\r\nnH5SdnkK/Kn2+jzYNdcqaAOQA+asb+60VliNC+/I89j3JHTQzNJMKRXOXB5P\r\nW91SdHZPxeXhgZ5Oldb4f4N5eRbqyTXZNp84Z0CpLgoe0tj84mpF+vd1elhF\r\nSgxYpu5SPfFjmXqGAIT34OKq6PnCzO/VApbQnosMRJ2t0nxT7sX4J4B1B/xF\r\nNjjt0l2x4MWQ68MaN+LpT0E6ZSa1xcdVRSnnVSi8QyINmSqO078JVMThooGW\r\nnTRITupgxCf9PDF0xUMNNfLd/JiZqiUtpNpT5l91O/hyixRoXNM/UX6+O1cl\r\nlUYmi0MCaGdrPi2y607SV6b+JpNAxMbyIprj7UBRawZvO0PkfF//3+Avp7Ph\r\nbikkJCDU5vsF4wY36B1BIKc8cySKLXOico5Uazq5TxYh1ZCFZPYol31BFusv\r\nt7/5bxtvk7hfX78S6pej2IwEuJKowF6SDO8qh8Nqcc/0jNsx0u/LLU1HQVr6\r\nj6yudlcgPNUH3II3X3zm3jp9PV6cMoCtBTlKYHXE1jof3raztisWxSL1oV29\r\nnnmw/gXg3BJZcgRLj+dnjpXyXKTEHtwAKOo=\r\n=sxWh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d96330c08.0","@material/rtl":"15.0.0-canary.d96330c08.0","@material/base":"15.0.0-canary.d96330c08.0","@material/list":"15.0.0-canary.d96330c08.0","@material/shape":"15.0.0-canary.d96330c08.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/ripple":"15.0.0-canary.d96330c08.0","@material/animation":"15.0.0-canary.d96330c08.0","@material/elevation":"15.0.0-canary.d96330c08.0","@material/typography":"15.0.0-canary.d96330c08.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.d96330c08.0_1678275819368_0.732869113849326","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/drawer","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.c99cae77c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0e858ae79c1d1c14c6a6f9f7e7b20581c49004b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.c99cae77c.0.tgz","fileCount":47,"integrity":"sha512-lL0VRlutRnQ3o6+y1S2ZCoUQxoFTLgAn/yMxBJVSAgUb8p4vqrxLLz/puL3ss9okYL0EG+OYIo2QXKJLwKJlyw==","signatures":[{"sig":"MEQCIAh89ocaDgd97bD5O6qfxVpMt4ovctIlkS6SMyMdHW1JAiBTWmkJAsqdX1ZQMzZHtD1hlLLz4TkKlImonhiUsLggIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR3pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqfjw//Xak6zsdy9GWS40BOcDefafNwgFUbqTjYvhpY+ePF11Xij0N3\r\n5rjP5BBU77hvQ1iYccBEQXXDNJArDXq5t2ytOckGVKTyHk4PkNgdI0qouu0y\r\nkGtv+zOuXdbf6Z7gKNrWXS94hfrQMIevVpHw7kB6LEBtUDupZdkaZtTWXQTA\r\n7t/1BBGWX2/qTwm/7i4EbeewrO23EXi5QzZJ5hv6gwOulqY4VKC5vGYs/PlW\r\n9+/W8Dt0FWEDBnG6QD1O+xd+UmuS0Qfy/qBokCt6S6dImgeYnqXnJ0YQ8F6e\r\nj/uvQd+dcb4wls7UeSSkPAZzR4cLqW+1yNaFvC2kyNX9aDs0wuRn806DnyLs\r\ndtPOiZbf/76rWv2Yu7XIDfUj5dyYD2ZoTCcp1gM47byBA47g7Mh+qo44f4PX\r\nXfci9UuESrvnxe7BXqLoGbokbxF82/seXCqEL8aLBNHDJc4LwdNB6T42t+HK\r\nDDoVIfuk2xeBi5ZML+5afnsYF8hwgBsLWq11mtF3UbYIEMB6XCfL/iuvCIvP\r\n6VOIHEIyS8AWnASVx1MJXEKN+4pl7hdXkRt/PGZdRj+kk2b12rvsU5ndaNcH\r\nPb6sA0BJtX7RJTr6KpUW2wopA993su6SI9doWxifRNmQma4PULv6uXAB8gjt\r\nxmRigEPRfc4CyWaT8Krg5L6t55gYmZ00dkU=\r\n=5xyu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c99cae77c.0","@material/rtl":"15.0.0-canary.c99cae77c.0","@material/base":"15.0.0-canary.c99cae77c.0","@material/list":"15.0.0-canary.c99cae77c.0","@material/shape":"15.0.0-canary.c99cae77c.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/ripple":"15.0.0-canary.c99cae77c.0","@material/animation":"15.0.0-canary.c99cae77c.0","@material/elevation":"15.0.0-canary.c99cae77c.0","@material/typography":"15.0.0-canary.c99cae77c.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.c99cae77c.0_1678319081148_0.35734108212955507","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/drawer","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.6023b1cd3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef6b5a835d245757bf47f5f52881e9198ff10c8c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.6023b1cd3.0.tgz","fileCount":47,"integrity":"sha512-Uzrs33zGyWvCZmYKv8uNPd8u7aRvh0LG6ifJczyzeb7UuaP3s2PWCsrfNqGS46/glyJFO6zNaVc174xFTfJaDA==","signatures":[{"sig":"MEUCIEchotlUQPvJm0HjYFUFfyWTr0wwPvCBmB3sVigJQhxhAiEAjnufUEqf/Xy9+Ov8gfXC0O1vd+a085en7fvBwVuiq10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCez5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQ+g/9FYj4HvBfa0kyUszanhDkBTE9Btc4JflbgJ1nii6p0kgxeFUu\r\n8waEb5ixU2lZf1bXhCceIPR3xenslCT7u41On/1hzg3qev+k2QTtnfSojxz2\r\nr+PCFZ4PFnU+oshZHCmrjO7Skm1+AQ1XTkhiheZRKzFDscbUkKqySplCUPl3\r\niLATPbWwhj57tZUPfa6intx/LhKQh3P/rnCFi2K1F3e1x5RiM4VlW+QbgA1n\r\niSbBfRsJQCYx87LS7XxwVq4pPyisktEF0ds4yySKJy4Jpi/CyTL1+51fEwgK\r\nTA0brAFP4HPxJO4COroqV5x2jGA9UVBM/RnMKrgBrLDnFVH0S1TXJzUu0bab\r\nIX3FwA3vuoB9/BIhVjiJK6Q0IsByVVvx/sRBtouuolswCzH9sBfb4e08bKZN\r\np2WvJ8rkxwVOCBYz9puhMrGWnLJKxsOVr2qc0TxIzChVZYbbbrTU0VJ83gbo\r\nCMeftxWWOKzXqBM2cvrg//4Q2YceiynSPssw1XkPqkbJLvYthn6vlhqq8CKU\r\nLlFSMxFbFjOLYv1vlk+G6NVAJjl1LS2QQBgrxiM8v1TYZncOPHbwXwdhvERS\r\nV0OfIwbVkGuyDuOGjhWec0EtJuuJnIcMI1B4Hwxm5FF1Mt1W+0FJ5F7XIAbx\r\nkY4CzISMo6su4gwd3yjF6kLRG+AowJQtyhE=\r\n=aVdl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6023b1cd3.0","@material/rtl":"15.0.0-canary.6023b1cd3.0","@material/base":"15.0.0-canary.6023b1cd3.0","@material/list":"15.0.0-canary.6023b1cd3.0","@material/shape":"15.0.0-canary.6023b1cd3.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/ripple":"15.0.0-canary.6023b1cd3.0","@material/animation":"15.0.0-canary.6023b1cd3.0","@material/elevation":"15.0.0-canary.6023b1cd3.0","@material/typography":"15.0.0-canary.6023b1cd3.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.6023b1cd3.0_1678372088817_0.42968621569711707","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/drawer","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.274610c77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e0f48af7da835dd8c18d579157e3ffdf12befe1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.274610c77.0.tgz","fileCount":47,"integrity":"sha512-qsR0MI+4Htrqd0iw+c2/KkQwqRo+2badcFW0524bES7BLPGE4AzKHr7ypr8lpudqU22shHrCmMTUZkv9kzC3hA==","signatures":[{"sig":"MEQCIFBwPa57oRb8RGpVEnV5Ou8UIMyVNfuvL0BKOnUVLnY3AiBw8QiMgiLpf+iqTlPrYq4/zNkVmLAMbOmPC/u/K+Rl7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfScACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjvhAAkQieeeNTm2Nh3QX5vTbyPyl35IsTg4zJrkx+NOVgLvIvBtX2\r\nfDDZmmwQ9KzTewf8yWqx/u45t0u2rYBItAA/9entar8fK0hme7PNXa/wvpjO\r\nVHy0yg8wDPV6CWm6UpiarjWWsa+rM+sNP5Zz39CMj1jiR6O1J48T4O44yveh\r\nv7j1z97KUIBuUOCk0spWrUXUEuvln3WvtbDlxp+oEr2W2QWaEBOK6AoLvmbj\r\nbGfXCDH+45SFhYA6TZoUdrAinHSH3hKbO6hku1vnV32Jaaqe3ihBjT5Z776p\r\ndFw91E2W7CNQ/fXXmYx04f5rEQR/Oxn+7LyNQXZpxtZv8EMD0Xm4WATA9BCl\r\nXMmS2GpRRuUExGwua+02ZkSu/V9t32OMXkYo/ejEdrOWdysrpruTD8T1Ymd4\r\nehoJ8ino3CWxbFaN5qcEE0PriMcUn9h+SBGcLysb2w4Y5+mRol5h1O+srySx\r\nwMpA4rzYt5TaDwClvnM/wj4JxgPieVpn1aDrPVzgpRgiDyse922o8HPeFP+7\r\nftEwfyH7RZnssdVVJfdMojjAKGyXXM+hUMEMQgwSnmGT1FVT67IVx4y5jNM3\r\nteq0nXuDjVnZK4+r41bJl2jifC5pdg7dDoUDOpkd3k1nHLANTf0lvlLyBlIU\r\nRiz8YwfsdaBV3PMdlCMPOuaJXlyzyHY7Kqo=\r\n=TBfS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.274610c77.0","@material/rtl":"15.0.0-canary.274610c77.0","@material/base":"15.0.0-canary.274610c77.0","@material/list":"15.0.0-canary.274610c77.0","@material/shape":"15.0.0-canary.274610c77.0","@material/theme":"15.0.0-canary.274610c77.0","@material/ripple":"15.0.0-canary.274610c77.0","@material/animation":"15.0.0-canary.274610c77.0","@material/elevation":"15.0.0-canary.274610c77.0","@material/typography":"15.0.0-canary.274610c77.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.274610c77.0_1678374043958_0.312596986155381","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/drawer","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a274583b9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"060d75a5bc4e2d79c857e9ac6f022b26ed33b60b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a274583b9.0.tgz","fileCount":47,"integrity":"sha512-OiUejB/hS9xiqqUnQCK+si1YcXjNOxv0LRO8bK59sE/wG/riFirPovtq9eUNLZshwg4UfgIv1D9dvpua6/1Vhg==","signatures":[{"sig":"MEYCIQD6RPNvkAzGApNWS8ohOPLoYS6wgZ/hzlIA9JSzvlNT7AIhALHVTFCIL2rN7dmktyhr6U8tanuoFsASNdqTVZBHtynd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjlyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDyA/9F0wpXhUUaq32nBbIsBTjo032rBnJtA3aP8cWs3G57QLY8lsD\r\nAOn+enEgdfpJ4Rej6tyDWo1KCXl+8iIRGNHKzkofdRWQY+F6BJU1xlzlO2Pq\r\nR8vAZ01HuIfIBcir0EcL6Dg0SKVriKe+GW1iFFb0XPzOo55Tdo8kCfN2gSdb\r\nd6Do6x/9XtuIFRkJgFx+YUspVMZCLPGe3xHM/XSIFbpKn0LQiNWY/HQIJvVq\r\n+20qvyrzC9GNwdQWDBHCcbOy6lM13DbDauaEysLtl/WPw+EGVthhd5GgU92m\r\njjhSdlPwa9n7F92GmYVZ/qdvxtUx2h+lfvAr6GBtdTi7ymIoxtclCsnMyOQU\r\nvdzgo9IbsRFweDq6671s2k92illeCqm3RPE9kgqAITY0d8swSWw0FhXJ/4iY\r\npCj+LTtHUdARgIFAW8O3cvua4QTfLKyizJAxM+CHKqORvwcS6TWRya3Ospg8\r\nlm8zrt+W4WkBWUPdFSSv0osRGpZG8ixhiJMPz6dpv9xnZep2JVgkFOifJhZK\r\ntFtKaOlSWarjlClTolJMUJnBF5KBnc5dCC69dVYrYzVsSUj6SnTvTs6RzFE+\r\nN9fOu27yePxfwt8Wlifu+Nk/73Xk99lq2pgTsLpckAgpGpK/s2Yzm7dHce5x\r\nipu4T/0G4VRuOAFPQldCJYCT95CqRxznnZs=\r\n=jMoU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a274583b9.0","@material/rtl":"15.0.0-canary.a274583b9.0","@material/base":"15.0.0-canary.a274583b9.0","@material/list":"15.0.0-canary.a274583b9.0","@material/shape":"15.0.0-canary.a274583b9.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/ripple":"15.0.0-canary.a274583b9.0","@material/animation":"15.0.0-canary.a274583b9.0","@material/elevation":"15.0.0-canary.a274583b9.0","@material/typography":"15.0.0-canary.a274583b9.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a274583b9.0_1678391666260_0.6432140941090883","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/drawer","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.304a94e8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c73675b560d0d125059965dad9bebce0c793982","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.304a94e8b.0.tgz","fileCount":47,"integrity":"sha512-j+tdGGuHCgyYdDC6YOybD4airm1AoOVduN5r/HLRNFS43SOgRFBkRP/D8naVZ7AEbfvNTa+Jkl7W9dxXIA0NkQ==","signatures":[{"sig":"MEYCIQCUivsfVgcgelu3EoI2cDU7C2+vvelLQDGhMAzTFG9VwQIhANjxd9dwnPTbJS7cI2o0njCHBJ2zSHDZaGCuIIcXMNgp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkW4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoMw//fgrcH4df8DwzzIxJvlCC04IuVbHiXtVV4nfItOiqjjzInx2p\r\nuwvaAqGIlfAHtlU/rR7zT+AZ7EIUTq4DvrsqDPzEr+R6Lw3+BUGQHW9XcOE3\r\n1lbukFmeJjWCE8jV+2QLNZlWsgJ4g2oZcKhdTRUbs0pLsTtXvdSm+WOzUHA1\r\nIJ1NmYaSAPCDek+bU6yr3ox+n+n17/b+nj72jGG727mCm07/9zdEftabCah1\r\nlcy2GmyevEBg1Lzn1RazeG07K2VXYPuym5XuAFr7areOzuWiyZEc7rpNek5Y\r\noE+lnVptvyd7A8F9Xka2X2GZwOIspE1KK9ZNBq6Mnx3mv07dBbilTgOroC+Y\r\nVTKZYNas5VmVsY15bMGdgnxO4gK42eoq/U7YuBOoynoyM4+jR52QKfbeDJrh\r\n4qe4hoJwTvrzi69YiT9deTk7aCkrMA4NmHr6JPyd8qFV3ITtfnmAaxTQX/m9\r\nkdVJafMqpo10+iG4DYNp9mEPCnjidYlnaqoqx2yjpfaItNv5j/MMV37P3yzk\r\noIE9RUlrpLaIJVLzyJGPCsBS1x0j6vibum9niRoB0yEGhYj4yXl3xWNg7Gwy\r\nLV6OUN/OfJjuMKt/hgXg8XeheKVvC9o2uOwIApw8GDvCjeiSBETCnSV2yuC1\r\nkNRxC2XZL2lz0ByP8S3yHrHT2dxSfPbxyOY=\r\n=onnB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.304a94e8b.0","@material/rtl":"15.0.0-canary.304a94e8b.0","@material/base":"15.0.0-canary.304a94e8b.0","@material/list":"15.0.0-canary.304a94e8b.0","@material/shape":"15.0.0-canary.304a94e8b.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/ripple":"15.0.0-canary.304a94e8b.0","@material/animation":"15.0.0-canary.304a94e8b.0","@material/elevation":"15.0.0-canary.304a94e8b.0","@material/typography":"15.0.0-canary.304a94e8b.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.304a94e8b.0_1678394807788_0.34913181783674574","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/drawer","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.6c265915c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b7ee02b3eaba525f18509f4ab3d2b3192c97e1f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.6c265915c.0.tgz","fileCount":47,"integrity":"sha512-v9uQzVdqN6sVJqnCUdHpUXYbta882tLv607ouY4gCnXpxZNp2PXM2G6+8uo05kuSmTyDvkv98SJ6tqxIdEC3iQ==","signatures":[{"sig":"MEYCIQCQoW4YEyacjBgeUiLvW5VGXgcn7MJushPsdpziEgS4rAIhAOPhI3ieOh7gmOWu6jmbdmRFe5d93oEkd/RfL19fUlRk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClRSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpl+w//c7ENv0sWwNu1KzyOLdAb9CXnOAeUgh3QqRjwH85Kw7lfc2Dv\r\nFwg5g1kA0WOrej+99sU3tYfxfB5HfIJQ8MMOgz6KSuIQ9Q2j0YaXA30XiKOs\r\n7aytC6wP/tVerql4Wgoxjcg3iRIXSIw0qfqJHFE5Pyrq5mIf1J2PCgRBefAx\r\nDvcXr+Fdhd0ckL7ixK0tXHFRzcD2VceLuRbesK2sp5tkiN1SMZ/Q0z6u/yLP\r\niAE31l5+ZuuynKQZjbFDsmsu+ktRuO/vrrAO3H3awRG7pSy7qShe7wqguw6E\r\nFQEUZgAFLS7JHTp4EbP7Rdq9Mdpy0Xme+n8xnKdSVnl4QVr1ijHkolvATcJU\r\nNp6osFhF4jz4io91zSWCwjKjS5kjBbdsHhT05wCYOpp4jmLWJL3R66L5BXbi\r\nYd7/AaMYl3zwtmIieeZX7m3gI8NnMI39fHnbALJIYA+UAYh4q66qYFoHFQ4h\r\nDLXxtarG6tGTmxVymi2gLdOCFW5yBkWHVfJBHmn3BsT0B6//xc4RwJ/7t9ct\r\nrJNFXsw4GSeV85LCvIM3l42jpKe1Vp/RAsiOWwPaHLxU+aZABKTqyU1ciu8o\r\ntPLCQVgLtU65LlOI0YNRFAHVP1QKa9gIiw/uOpNo7uiunD1qC4LbObAH0sP4\r\nqX9V0oeRqOgGam66RorBkkGetKGh7lEEwIk=\r\n=y5zf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6c265915c.0","@material/rtl":"15.0.0-canary.6c265915c.0","@material/base":"15.0.0-canary.6c265915c.0","@material/list":"15.0.0-canary.6c265915c.0","@material/shape":"15.0.0-canary.6c265915c.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/ripple":"15.0.0-canary.6c265915c.0","@material/animation":"15.0.0-canary.6c265915c.0","@material/elevation":"15.0.0-canary.6c265915c.0","@material/typography":"15.0.0-canary.6c265915c.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.6c265915c.0_1678398545718_0.17077222576149564","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/drawer","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.de5224633.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1aad1c0eb766480d24cf1cc70f19c0e5062f612","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.de5224633.0.tgz","fileCount":47,"integrity":"sha512-+imKPfdA+5nG/+LbMipivb2JNW48ckANjyxAKvcV2Cvd9KxFl6bI3GxZt81HmYO621EAfOOmGi9oGSsIw1VbJA==","signatures":[{"sig":"MEQCIGr4D9QupkrpMehJK0zB9yrTZ2grlK6FwqcCvfRzF3b9AiBq8tWV8eIdZxKxZ96O6C6Q1w6jdJfT2M7o+tCGpM9xIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnJwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpd+w/9Hf0s/0f7fMX64LgvaguTkJwR3JI40SNBxqUgOEzgJyEYg1H8\r\nEvfD0Y8Ib77/U4aZB16e5scyVp6NGDdWFZDhbPjflrrr3I3hyjlnSkVcq1Vv\r\nSadrfhkwm1wd9pAH2gY1Upp7DM5w6/JCu+wMbMCvIkjh7RKV/0jVAlA3mLq1\r\nLm/AU9M7bhHr/vGXIQfnWttVgl0QJ+edUn3vi5MNO1sLif/THrQPvfHnjRcK\r\nChQ0yrMv33glZ/FI1ui2WalliZGXsEqpBdkFfJCPvqHPznbSjzGhMmCrJHr9\r\n5A95WwWk2ngat0tYgC4BZdRGSk+IaqC5kYd6noO9Plh4LpaBLuy/XZfUkZYH\r\nr4dGBl1Oa+Edr3pvU3k2gzI+ylQpfsnHPL/tN/lkv6SHRtZe/YJydSd91bmn\r\nitJXqN8/YnPONT9Pqa/SvKvTCdP/3skbHt13TaYid/Exf9lCzeboy7qy6g4D\r\nR+nRYFF/uHZ18E4zSNT+49ZW0CFfkeF1VkurTkrRKgaPXL+d7HiAsEh5pukw\r\nrrxp5u2d7X5q8n5EeJo2ArAFtatr+tc3B3pIIorzuXR6NmwVH4XyDMTD3CsS\r\n42UngkEqaImGT9xT1fVd9+9A/4GrAW3+JLW5A5or2gYZfPXicijX+FrZNWWG\r\nvuXY9fxAjd2iK5TjBn14NIV2o7Ge2L7EALg=\r\n=V++p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de5224633.0","@material/rtl":"15.0.0-canary.de5224633.0","@material/base":"15.0.0-canary.de5224633.0","@material/list":"15.0.0-canary.de5224633.0","@material/shape":"15.0.0-canary.de5224633.0","@material/theme":"15.0.0-canary.de5224633.0","@material/ripple":"15.0.0-canary.de5224633.0","@material/animation":"15.0.0-canary.de5224633.0","@material/elevation":"15.0.0-canary.de5224633.0","@material/typography":"15.0.0-canary.de5224633.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.de5224633.0_1678406255782_0.11263826291967272","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/drawer","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.8879557e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8913a7b5d54bff33b4c6681a0f10672ee9a2b99c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.8879557e6.0.tgz","fileCount":47,"integrity":"sha512-N/nWt/G4du7u+pqaG9iV2WgY1Xen1SiZY0piCkJXm9IxICYxfS3PVRdN0jCuLi33UXZB6DdWFs7DbLqFCCa/zQ==","signatures":[{"sig":"MEYCIQD84bJLRhkxk/rAptv1CyaK1WAA3LAGimr4aFtiHhrCvwIhANGzzroRS6+h9DjWoVowjtU8gBxQEeZZ4FIP6qjjxxtR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzolACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/BQ/+Kq4ZW5c4VlpkQQKcGtNnFnuZN6Ri6/DPzYsHJxKHlhN/5czP\r\n/YxcFRd6n6zvJoR2Qnuadv53/CgmfSXayHax+xJYFLvnQF95OS9UW2er1H8L\r\nvo3phNgM9y552YxFPqo4pJf/B2SUodNlDZM9+0WWQhoFj1GISFY/jy+rO9t8\r\nX2hNVnrQNZ0VU4uTV0Wkprnuxk7/xcPNBo2QV+wp52BqeGhhZurqGzgXpnsx\r\nF6uNE7/MlnCocy+bZH+93L18zZLAUQ/dru34El411vzKZXSJTRXVaAYKwN/a\r\nRCS3Q+NsoL06JDarMNg51PD9CFhbghPysQ5Aw9OfQ63f0fbp8LMFMM2XJlof\r\nXyP+gt61c0dNaUy0xYrlHk0azo3tUsCbDJBUQ02hVCtbXxzNMb5+Mh6llUsf\r\n8jHXlYp6pTDKD6Nipt1Seub+arQomPWysO9pzTRxp0Bf8qHoJwtIPksQimKv\r\nr7Q7mz3AkWRLXl8JwsAEymdX+TgizgVgzg2JB/aeO12oPGAUJsuKrnB7DsU+\r\nclB6Job8cTHhBLSub23b1Bk7n/5HChOPCQLKR53UXAXuY1YSYclBdMHfqZ1A\r\nZubViU4wX/VRYRKum+9CmR2QbMCUnYIl1X/6u6Df2TmVT0W7O7cpQTcf/NfQ\r\nvSv6qI6hiuo57Uum+i6oQhdZpBI0AFdaYhM=\r\n=Qa72\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8879557e6.0","@material/rtl":"15.0.0-canary.8879557e6.0","@material/base":"15.0.0-canary.8879557e6.0","@material/list":"15.0.0-canary.8879557e6.0","@material/shape":"15.0.0-canary.8879557e6.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/ripple":"15.0.0-canary.8879557e6.0","@material/animation":"15.0.0-canary.8879557e6.0","@material/elevation":"15.0.0-canary.8879557e6.0","@material/typography":"15.0.0-canary.8879557e6.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.8879557e6.0_1678457381154_0.1144968811069127","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/drawer","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.23073a303.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e094f25dca590ef2d64efba167b1e06ee8554a6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.23073a303.0.tgz","fileCount":47,"integrity":"sha512-r7X7XLRW/2Qw29CYEC3CFAnukKSSfxX86BeYkR3n9Z6JIChi3kUKzo4IHWgpCFd1NmwYgyEwTB0XEp2fFbD14Q==","signatures":[{"sig":"MEUCIQC6gSLxNhymZcYuCAMOLeEMKcEvxzLbeSikuPGghsPkNAIgBJP5mQ7vDqdIGR3oZ6r67wNkI09GxmXx/KXxv7NZPkc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzvRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrReQ//c3GSFm+g6kKtsRQ3kJbWG6HzpTDAbJFPQ8tGM1D5D0Tfo0sO\r\nZbDub0tYAIHpKK6mvEEsT5Id7HIbUK/6B2MLKfwuxuOjT4j7zHJCNIplaoo4\r\n64VHxWsO1c5Y9Mw+s9tIuA5pPNvPbNSK+dYl+Rx21S277ikg9S51VsOdeE49\r\nTogAP4PQrOeq2F1zkNZ+ssdSkc6FcwM5P2UNU+4AhH2McvC7NBMqOpWitJHI\r\nsgJK6658HHVlVEu8ajuSExgke1puUoRHLtG52ehWCkRiz14CMO7NrhPQDI14\r\nbQYZRXHPBbQbFtB6y1HWwamSLYA9xfazDEvUbpFbMV+JNYaBeYeI6SEKs3eG\r\neV89EEmNGd7dteINovzEWRWi/Rm1vk8xM8qkDzv5Xunl4vftwJd/Fkd/lUbP\r\niNbwRn5aRD++mS3VS+Eb0VuNVrVqaQI/9pIwp+pEOZHLD0luk6B3XcRo2r8g\r\n2ne8Aep41D7P8dtF5QKWD55EYP+UMp2R+cGCOv5MVU6D/LvO/l9LtdOk6O56\r\nuHnicPRc+fLjZ8Pqq21TDcFBE+UIFQFO44UnSVDXn9QLNtIPgW2vKiwWGxzo\r\nYvKj/U6ogKJ40HFIiOteFK7uZiz7tojVIgow6YU5FY+7oxf5szP5y91Y7+B3\r\nkXffq7SpPqROjIy1DRwgevk6JQZ2MLsKKe8=\r\n=FTsU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.23073a303.0","@material/rtl":"15.0.0-canary.23073a303.0","@material/base":"15.0.0-canary.23073a303.0","@material/list":"15.0.0-canary.23073a303.0","@material/shape":"15.0.0-canary.23073a303.0","@material/theme":"15.0.0-canary.23073a303.0","@material/ripple":"15.0.0-canary.23073a303.0","@material/animation":"15.0.0-canary.23073a303.0","@material/elevation":"15.0.0-canary.23073a303.0","@material/typography":"15.0.0-canary.23073a303.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.23073a303.0_1678457809120_0.5937670280056055","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/drawer","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.51c7d4014.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4499e795a010c6209c120b7f9502dd56e1294f60","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.51c7d4014.0.tgz","fileCount":47,"integrity":"sha512-oUML1DlIfPlvxCkQz/HoxxsTfRnlrRwokpVIUqskmqR9BheiZjzA5J+qpY9D4o36HlmxsQoJin27GWXMReJE2g==","signatures":[{"sig":"MEYCIQCSsR/5eZAQUfRbr7Etd2TLf5Ou1pFLVztUVmwCcsW63QIhAN0/BAppUl2evh5t51vyHXX6zqP6A+eNKPq6uMF0ZTVa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC1+RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXxxAAoRSzZKB6XA+q1lw7uTTPopLFchyUDw04WJyCLrgxD3T4tPza\r\nv5PmHgs7hLbXg10N/KBl+Ixsuiob0CPVvAw3VPOegvSmM3NXBSCD+3gWv/8k\r\nbcIbZaKr2sEqhfMY1i9ghJvs7MSzHaRj0v92xxGNC0XX9Vp63NzawCINh/Pp\r\n+9urn7fbE5dqNDQb8Lb7e+pV2h73AcCGOS+r53h8UUZfrDl9o4prqyTVEZAQ\r\nujaWGoyl8ufY1nMZLkie5kDR7neiFnhoQK1Chef2LCBujNiFkdm/IemJ2uHf\r\nAcyJ7vYkMtvgbsR5FCGEJyVHO2R+IWpe/WBU/Vv63kB9/f2MfqmMRcarY5fH\r\nrf4iflmcv1ZjHCGVA6dtO9NGD3oHmq7lU1hvguwRD7Ns2ilaKm6c+UY2U9tG\r\nNDqM1Wn7+aqo9265USTg7gXQ1nne4OPl06Tf5NedJBruzH+ofkapHY9r25Ia\r\nhPAYGAWQeTFOV5LD4VDeU7VNqeWWm6aZrqn93HRL7m2W9YpsClxD6jIKrDET\r\nCU3fj80IXliG0W2efgsb8EK1/2F6X+hWdR/LhRPkBtkd/mRveOi01RYW9I0n\r\nZmN26K26aTiLsP4F/8QZAhpBw5bw7bPdd1CxDmYS5TBwrIDN91NNKS8bBqKJ\r\n0XGKl6QHPee1QhMMk8vS/0gCZqI2YLWU5vc=\r\n=LstK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51c7d4014.0","@material/rtl":"15.0.0-canary.51c7d4014.0","@material/base":"15.0.0-canary.51c7d4014.0","@material/list":"15.0.0-canary.51c7d4014.0","@material/shape":"15.0.0-canary.51c7d4014.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/ripple":"15.0.0-canary.51c7d4014.0","@material/animation":"15.0.0-canary.51c7d4014.0","@material/elevation":"15.0.0-canary.51c7d4014.0","@material/typography":"15.0.0-canary.51c7d4014.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.51c7d4014.0_1678466960914_0.6701016066789904","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/drawer","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.1175a5be0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4a3d60010c6ebe90e7bce8582d543726a0004a6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.1175a5be0.0.tgz","fileCount":47,"integrity":"sha512-PdaOn/6pmcn5nd+07GaDNhSpvQx5fK3eKKMPhYAly22c7hWT7jj7MtZoorXopaweLniKQuV1sBpZxXVmxO6iyg==","signatures":[{"sig":"MEQCIBD1TK5l3R2ThKrmoAFFgfwpeB4nu6OvpFI2jvS4cSLhAiA7SewMSpv0TDCdmfHUYCKmi8zeoZxFuu1vgIPIpa085A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5fsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKlxAAmjfJfBmLAWPXbYKMN8FSd0/tDniCpGMFk4n0/LoqSyZ1rISg\r\nKehMNqRV6tx8JVm/MPNi/43MWWLkF6twIkpmSx1z1ly0M+wt6bQB6FKLrFWF\r\niAuuCR5do5j0LCMPst079PCaoWSheLQ+3r9BSodJilzsCclZEsdko45CyCFU\r\ne/QUv2yblZxN/gXj7aK06vDKnPn5n1JOvSmd1C4GVw3Ia0zlZl010kaxvi7/\r\n/V6pTNKyqilTy/6bPvIJ2HyG9G8kdqQ3/zrbASX9oKrz4P8eVYKe1QckuL1q\r\ntS7AWSGBocbZS5ZbY418OEysVR/88L1r73edbH3zXY/NBfYkB9NSXV7jVmDT\r\n0V1vvhKj6AMZwKYma0oZvgFAKYylYYniBuHzhjMCkESOJFqRPZjtFFJ1HJqB\r\nWa5T3cAb7/mrK5s6rsoBBUYVx4+NpDRIqlxwArhGZXHxGUcs7fta2xbBjyx5\r\ndmY/LvqIQUEl4AAKzlX4YE4zwz8NEKBjD3X7BskPkdzuRNVRqISqrUSd9eOR\r\nlKyh8dpvIU+5SwELeeHjdl3dC/qPXxvnyWJTF8Ir9QgJoeURP3ExyylpucCu\r\na9XXjMsVXXj8nHwoq9KRJNqudwgOCKGptu8DVav9S3prLMzxqiNNJxhzpOO4\r\nO4LlroyE2g7FQ0xk7JiZHX7l1Em/HMpChok=\r\n=QU7V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1175a5be0.0","@material/rtl":"15.0.0-canary.1175a5be0.0","@material/base":"15.0.0-canary.1175a5be0.0","@material/list":"15.0.0-canary.1175a5be0.0","@material/shape":"15.0.0-canary.1175a5be0.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/ripple":"15.0.0-canary.1175a5be0.0","@material/animation":"15.0.0-canary.1175a5be0.0","@material/elevation":"15.0.0-canary.1175a5be0.0","@material/typography":"15.0.0-canary.1175a5be0.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.1175a5be0.0_1678481388419_0.7906413574521922","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/drawer","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.7adf3af80.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef03b6e5907ad44608fef4dc2822d4c7ba22c744","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.7adf3af80.0.tgz","fileCount":47,"integrity":"sha512-FfGfUmPPX8buByzOuV8Ii6XUWuP1eKgJyoqk21UjeMs8kl/0ijMtcz6vPC5DLF+OObglIWbJkgk1U2xQv4B3uA==","signatures":[{"sig":"MEYCIQCuRI158+9VZXDWdbkSZ7woO1UlIztCVkGMmAKtkyK3MAIhANT1jJwgUkVdVIT1eVB6rYJZaM0uAI3keyfCRLDzqma8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9jTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSlA/7BUJqDH3MsWc6ao1irC+96qxXhF9KUxzJLeN/PDXTEZIjGhes\r\nOtrg+knmbDqYSPdvOLiKclzbUpYJ4wdC91jKnsEQ+Qw6t0x1t0gHTgLJWYta\r\n+rm/sB8QvZ7NIOwYNeO4vAypnXKAN1g3V55t72AgNHDPluW9dR8e60wGahmv\r\nOW5/su/M6dmjR87574ofyJ14IrExc4BOZp1Spyd7uMm3UP1BuYy4ybYZZEn8\r\n2j3MbhFY5/iqshKKyQ5GrAntRtbtrsQtjj6rEY69cYkW0HAA3RhuOFVg5TWo\r\n2udinUPlwRvIRHFWiH5AqjqLKRebrQMesWeNOdyILFtHuDZiq1e9sq6DdWPW\r\nqg7YB6gDiwexbXQD2I4p0JAz5AR2nShhDMJ2/DlsdmuAJ1bTG4yEbvun8eQJ\r\n2sAF8+q4n6Q8YT59scVzI8fHnsm40jw+tRL4+vTggyDIROmltSA/zK+Xc+sp\r\nxG8W/hG2mbwg+r3cPsQJUMVZoK2AbUJyBosSsiP4x5RwgS1zxHcqUXDRafx5\r\nI7KBMSulG903y0K1K5NGC1jTs3iCvqG9OGQmvdOGWYc+Th9OKlxto1xcWQo4\r\nQmj5sCp9ne+H4B4JErVDqWi01W7RDcIj5czk8ANZzGzKGZNjXZneK+hMu+em\r\nDtatRJttsJfTeFDANZKBOFtAHwUyCjhwtJY=\r\n=yDIi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7adf3af80.0","@material/rtl":"15.0.0-canary.7adf3af80.0","@material/base":"15.0.0-canary.7adf3af80.0","@material/list":"15.0.0-canary.7adf3af80.0","@material/shape":"15.0.0-canary.7adf3af80.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/ripple":"15.0.0-canary.7adf3af80.0","@material/animation":"15.0.0-canary.7adf3af80.0","@material/elevation":"15.0.0-canary.7adf3af80.0","@material/typography":"15.0.0-canary.7adf3af80.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.7adf3af80.0_1678498003730_0.9995185450124495","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/drawer","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.82554d770.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b504413e25bbde089ee48bca2dd953c009f3e1be","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.82554d770.0.tgz","fileCount":47,"integrity":"sha512-tDOL0VsQoiWPnVPSy84vxJMheq5R9X3cT0fXtUImrdLnYyc2VIeQ8LeJBLg3qqR14srWEOuO+jm5pcy5siMLbg==","signatures":[{"sig":"MEYCIQD3uMcjo9MLTvJKAJAFvW3eakjcCInOAp5Hfj0gFTSsngIhAOsVR+++0axTUlbFo3z6e/NeMt/yjM6wz80KtRi1davy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9u0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCZw/+Lkz4Z1wHavWWIkh58O38XVHXmWk5CZWNSwK/8F523l6EsTK+\r\n5uM9JDS6UVAuFw8JxD5kT8vPdhisJ0Fz3+bSXHq000vYFv84eNt5ub6E26al\r\ncOeKTZ+Cgfjxzf+Zx7uo3mWVHvxzvueKZ9kyj9TNVQ7PZFJZpWtHXYUvEdHl\r\nYrtiSKyUfR/upyxLCkXNOZJeXHAjigQaC/bN/x/+dMe5KJkfnTW0zIeYNyyJ\r\nR04VGdosIkkVSwXnlLmvhrmI4pBRG80RHZqhQQi0mCXG5g4PGxK4Z+B/q/ad\r\nke0+wn2jH0Ki6Cn1ok02t5IFrACgkwYWufJ9UMgGBopAx5L0//+NH60R+iC3\r\nyVhupGVojrNUzY0o1fCFu/P5Ztwt+Ow1iV4qcQPSjI+70I/mL9qu0DyPZjAq\r\nRgEWSFpibbDnb/Fp/cLGIrCG3FXrc8n0p95hC11ifzKO7rszcyuMwHdYJpvB\r\njskkDDUEKjI4O369S/lWolAT71RP/Y0xD4A8/DaWk5W2ONWG1yrF555dmh3N\r\naVb0XLU+JTKBfKzYP3TVL1RwlU1qwIwwni+9qBfyoOV8dw+USMGNWDydtGLc\r\nf1takVlX5KPdAbitwmdKxV+OBoL4YqeXBHAghWvIGBSc2v53gc+ZofBrhYco\r\nq8Vd9qjhJnzWRJzIayybS0tnL1Vde850oS4=\r\n=/foT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.82554d770.0","@material/rtl":"15.0.0-canary.82554d770.0","@material/base":"15.0.0-canary.82554d770.0","@material/list":"15.0.0-canary.82554d770.0","@material/shape":"15.0.0-canary.82554d770.0","@material/theme":"15.0.0-canary.82554d770.0","@material/ripple":"15.0.0-canary.82554d770.0","@material/animation":"15.0.0-canary.82554d770.0","@material/elevation":"15.0.0-canary.82554d770.0","@material/typography":"15.0.0-canary.82554d770.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.82554d770.0_1678498739856_0.3909030654586376","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/drawer","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.93fc524b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"219404d5963f2b971eda0fa5bc5cef5421751891","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.93fc524b7.0.tgz","fileCount":47,"integrity":"sha512-M1vd/IxPITg0V1t530IJZ5NrAOOMx4v19+DTCWgJAtM1C5j5hpqjl38fTEQBWVJXLTud3HFWBI7OAQeNx1ck5Q==","signatures":[{"sig":"MEUCIEN5jViTVEdWlWwM3497VRfJgtzjoIcltK1SnUMCgYW7AiEAs/aWQ/QpF/rlURNDjjAiOeN1IdXhzQmupDPnjS6XlvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuGVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpP6BAAnpn+p8k1cMl0N51TOmy51AeBYGa8J28KIz8JiNRd9L48KHrN\r\nt8xMZyABvQqm4mdZxm5Tc77YcnDU0iZP3ebAwC0R7e2DLSXATorEMpNsvzeL\r\ntg+wh1yyWT5gPOsl61aQHbf7vj/18GaFA+3KN0gachuTZEWpgJyQRRsvhzRn\r\nmDcT7OUnop8i9UTyf5x/9tBjDdIxur0775irapVtyFyqKNISnKsloR3Nlrgb\r\nZJ1IkxwnRzyuTJXtqhix84Llft+YlWTImJwNmstMgtOX3gdk+LWKBBZExa10\r\nngN0xkHj9PRc/w60F9SVwxuNtm4Kjl3DlhOVdMYgeBJj929gkWbhRxpmNc3E\r\nGHzY4Ri55ZV5VWoOaBBRx8/1bijFUmnbLbWRnhqbaKRXQH8Z0Jo7QPnuoJml\r\n+oQu/8WGP/b9QgNu0d7MVlgd2PXG6eSBbpEDDsrGQUCGVJTo+utWOw+uwhK+\r\nHfDpVAXFtjqtPiv893XWHmYGCBmK0TGHmB9NkI0vfANHVTcDfS4ixAJXBIrm\r\n+HgDI53/FS10bTjQ+SFvnmVarLmUf9qQ7AcqjnWRaoHfF3h5igo53w+lg+Kz\r\nGDjfDzw4cHlRz8lUZ1/YFGUNsRXUhVfV0DsWyD2GsjBHk1xMfP3JzITVy/Wc\r\nILMH7rGxgMPcf5YI7kC/LPzeR8V79KN2mGk=\r\n=L4/W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93fc524b7.0","@material/rtl":"15.0.0-canary.93fc524b7.0","@material/base":"15.0.0-canary.93fc524b7.0","@material/list":"15.0.0-canary.93fc524b7.0","@material/shape":"15.0.0-canary.93fc524b7.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/ripple":"15.0.0-canary.93fc524b7.0","@material/animation":"15.0.0-canary.93fc524b7.0","@material/elevation":"15.0.0-canary.93fc524b7.0","@material/typography":"15.0.0-canary.93fc524b7.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.93fc524b7.0_1678696853309_0.48980265180006377","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/drawer","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.50be0fbae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffbc52f1e28e9b2e3923fa5c829f72dd0bb9eddb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.50be0fbae.0.tgz","fileCount":47,"integrity":"sha512-IECWKviueSHaONitEc/JQ1o0+p7kXtmwreI5AwzZaJndokHbaBmw07AWPQq5AG7PceY0+0IiKJ9XuG7/GMwxmw==","signatures":[{"sig":"MEUCIQDZ21/+U5MxNHyUlLqALpxWBKpkOEjni1W7a76TFtpjYQIgJufWvDXlWqnFTRAZ4vT/q+jVGE58epAAoqFSIisoJYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2FYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoj1A//S85dJ9XtIz7t8DKZ3pFNDfJfzOcmlEbxBbOnkNGrZstt8EqE\r\n+FRkJU88J8CBAD/bxzqZ1ZV8CiouJJCl0dx8OWm0GF+TByfQO5Yypa1dvqvk\r\ndy4ceUQA1QGp5nEEERO6L83l5dYkjMyp0mmdcxcVYfr05y7JezTDyTew55Ci\r\nD6oXlWzm7fMF+mYhp63WXzrvuR4otY0Dv49uz453qKeUkITxh2cRSXVDuWtH\r\nRLCqmfrWb/kjuFvchY3zCYA8NUgV7IgE4ntVgELTBIu3z85sOw0R8cJB9EPZ\r\nECNBQfzGpmoQSYiNYWJsz2fkMUwsMP22lATYCbfm3p7dMQ/zRW3ireI9yhML\r\nYxJnL6xsd6QZeg1aCh+R3wgjeKGL2J9i8xfAMn0xWF3lq0xMto6o+3EoIZJm\r\nb7rPMJ5MW053M0I9C87hreNQP42JMDzg1Z+r2IkDkaFsYo0CtAGNW6XEzd31\r\nUU39ik35NlSstuSsbjlSj8QuXMzSkWqv06G9vAyvHz3cHx3kWrmHO9+yTbt2\r\nXPTrzJLnnpPAV2wqvR9+vZAIEY/nRjm1tdi0qfAYe7JQttVxh61GQJgy4NJ7\r\ny9Ws7UX7cUF63yCLfLGnTu7o4IXGJmLJH4+yyWNosizRqi+2WFHQN8lnWfvS\r\nYmchnYmNScxU8RKN4rurrpkq/yqpIuEfsHU=\r\n=zGYO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50be0fbae.0","@material/rtl":"15.0.0-canary.50be0fbae.0","@material/base":"15.0.0-canary.50be0fbae.0","@material/list":"15.0.0-canary.50be0fbae.0","@material/shape":"15.0.0-canary.50be0fbae.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/ripple":"15.0.0-canary.50be0fbae.0","@material/animation":"15.0.0-canary.50be0fbae.0","@material/elevation":"15.0.0-canary.50be0fbae.0","@material/typography":"15.0.0-canary.50be0fbae.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.50be0fbae.0_1678729559778_0.22854225053708843","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/drawer","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.6b5ffccd9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f780499b67ab129594b99a492b6869f1670ef11","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":47,"integrity":"sha512-ZwS97XQZoS3/WfAeZ+cCGoUaYT4Pb+c8Xm8CnC3fyEeJvVmZapAxZjgSaXIiOkAQvFBqalH43GqZJutiIyz2lg==","signatures":[{"sig":"MEYCIQDWHwhjV4Z2Lr6vQr4f+jWPH6eNJoYvYESXYdpajN4pegIhAPwuD9xjfjk5uFHK2SmT6DuujHjxjj4XvhYjThEJhBJo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2ImACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpU6A/8CJZxN7iSzVeuWCbabmdFdvapPkQtxosl44K/F2gIzgISO0l9\r\ncjTX0aaPHctSW05T9VZhDYCSMBb5Yl8OFY4IUuJf1Vqx3L6kKvXpCRJz6gyy\r\nlLXYxbvCGe2sqFauX8mXDf0fVkDWmh5VfGmaGi2i8eKPsktiHHmp0eO3udMQ\r\nETG1+PPpAlp5vns9ZI4cY/ZYtYw0aaucIrGY9FcjBK1DrYhc0PstKr1dZPNZ\r\n67R2y7+qG38oYNZ0ogp7HDNc3OMb0641mFnR9X2zoEUq7pmh+kwa6MzmzsBt\r\ndDu6cT+uzD9+DvloWWHkAFfd4o1PsyQeoSB+sKU4oL1OjmZPnzwNCABmWuSo\r\nrrD96Q8/into6vJjQJpVfrRTKpw2lNPaqSWsyMz7Nm9fRSYq+avpWuOnJj2u\r\nMI4NBqX3XAAlFOQD/YtgxQMmoKgqj2yTLE/YUGUpkCZsAI2N7/ASUVA8QWTk\r\nv3y4MlFs5180B7Zghxmqsg/AebHaiChWBCazrpa6yTMkgMfYPgGeLYs1Bof2\r\nTSGMxwtWIRMUgKUn2LTA3sfNxCsIq84RiJbCUproe90a8KEiH6DqJcC3noTF\r\nfpqmRHEzVpi84XHuqUghoqHtgXmSZx1JJiVA8lgDycPYrFvuqzQ8pGp+kips\r\nvxH93yJdhSvBXs24OVfaTxgP59Dg9XkAqjU=\r\n=/2Vf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6b5ffccd9.0","@material/rtl":"15.0.0-canary.6b5ffccd9.0","@material/base":"15.0.0-canary.6b5ffccd9.0","@material/list":"15.0.0-canary.6b5ffccd9.0","@material/shape":"15.0.0-canary.6b5ffccd9.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/ripple":"15.0.0-canary.6b5ffccd9.0","@material/animation":"15.0.0-canary.6b5ffccd9.0","@material/elevation":"15.0.0-canary.6b5ffccd9.0","@material/typography":"15.0.0-canary.6b5ffccd9.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.6b5ffccd9.0_1678729765790_0.458862623622065","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/drawer","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.1c8013f4e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdd04970794a016f4427e4b092b243d87c9f26aa","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.1c8013f4e.0.tgz","fileCount":47,"integrity":"sha512-VNxv1ZNKryVuBnUuaBahK8HthISb5k37sRU4HbJXkOwj+6mwy0zFE/QNV9YtDaVChzd9cKRQu1zR2RHMjX7RRQ==","signatures":[{"sig":"MEYCIQCbrRY7Z+8QMi7YGqFsM6Eea1z2Kl1MmKMtuGuzecNDPAIhAIsBHmpCBmGf9m7a3NdgL0HBtGvCuYvSVqkeT6AsD0SW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2W/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCDxAAk6WbtsEQG4zCE1SUbboQkiTjxHHhzosegcmN1zii5eoZvMge\r\nNDiqGUtnxdNzCfiBruF7ImkbTHa5q5T0tLgNvWFiIpEqbeqx2y8P9nBrN2sp\r\nJGt5UxQZxMWzzWAKWpKWwr9ubMeMzrN+mPUp+7U7qYeE+fkjQvy5rTBmroOF\r\n7pdGRD72d0m0b7LptFS+cPo0+0vxqbu0LL9b6lTzhLjZjkDvtrAS9TCDs24w\r\nLTaIEQ+NKdGxfn0MmGMr6bzGvI/AX0sUPh0Gf9bG2eGBHsdJ0idYhABVVUXZ\r\nk6JBkq4vkNKoXIldXNT6Iogns7dMRqZm/NTVTOM9LNum3yqaJdGLVFKh7/le\r\nSZRMI+jITg8ick9ickAlTiJVF7B1dTw5y+JsuUJzPo9YSw6C21wRUH12haF6\r\niV7Pf5mpqb1RX1sRiltopiqhzYNtE4LdrcX6j/KlgCD95GxOPu1kgLha7rDJ\r\nkqiJQkL0BJUTwFWx3eezP6zG2xx4vPWxgkQwlIJZ4sVHHrQFHr/j595XbGCB\r\n8SG3kKGE69ptF7LLjj2ZdVMl3NO4kWhkubuR8MGBARrHHYPRqIBcT4IqJRPK\r\n/sLuikwanfiTAExfoRlSPhQ7OLR5cJjFHpoV6ZyxioyBijAvRJtc1KxWErob\r\neFKDwnP7vV7yNV/vIvdVzmLfCu5IsoNoC2A=\r\n=INib\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c8013f4e.0","@material/rtl":"15.0.0-canary.1c8013f4e.0","@material/base":"15.0.0-canary.1c8013f4e.0","@material/list":"15.0.0-canary.1c8013f4e.0","@material/shape":"15.0.0-canary.1c8013f4e.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/ripple":"15.0.0-canary.1c8013f4e.0","@material/animation":"15.0.0-canary.1c8013f4e.0","@material/elevation":"15.0.0-canary.1c8013f4e.0","@material/typography":"15.0.0-canary.1c8013f4e.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.1c8013f4e.0_1678730687487_0.48198332274171096","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/drawer","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.112715df5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee5a21e9b943cde7eabdf38ca0168f8d07ea6969","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.112715df5.0.tgz","fileCount":47,"integrity":"sha512-y76I8KqnlwlchXWImq++2X41yP2/6mMj+l0hwXIYZoxAEEYl3HSedO9c5gZIhFkAZCSU7Sai/glPum7BQw59ZA==","signatures":[{"sig":"MEYCIQD5cqMkaOM77RhE9+86NCF3+5SHHDPaQ9zpw+DJjLLNYwIhAKH8jjyKDlnYQDL5rp5iJahJ3jHha5TEW2G2mchR0hf+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD25CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQqw/9F+SLLb7EXobNLEidHAvH4LyxQaZZK7wB+0owUdYN8MjfVqWb\r\n/eRVBOE71i9rv8koXFql3e94ovYMoe954sHWtp5OUZvkz1Td3nw07E6r+tXh\r\neZXE6gy4uDUDWsqzoKSnOtuWiQeiPkQJ5zBIOyAdMa9LeM5cncRkkIbaGpsj\r\nCn9dtv1k/oEC0DBdkYkst6WRBdA29cPw85ngieGdhm+6DmysvasHikk39Ngi\r\nn9F5ddL8JxxpgukGKZWNm+A01UPsDOEaFhPzoa8449xtVJnPdwI1cZjqW6te\r\nqquMnTBk2xBvVNl/oKEpgd0i2i/NHRr00CPD7xIrGwsODC8vVBSIGcTkLQ9m\r\n26Kz1elIkqVXre8jTqP9EvshGpOHqV+e+P3CpZnSzpazG7gb4ZpdLyGpUW/v\r\nuwWF8Uz2A8pylotoYRySzjc0sTDrC5Z9McXraEuOur+WxshXnSPnbXzmfxSA\r\nszMJrVqFQXIvSo7rWlgYGKNgI29wsILrg0PN5KVTFknCWV7rd7juRdMTJQ/y\r\ndb8LgT0+ffhsDyphvYQQeUbeUFIQCHjEnMK+tKFIaswGiD02aXdA3FGD/iPh\r\nW56cNpUG+zcMxRVxX3ZinSJfGoc0fZnPjh/lBoLSBcEAV2WwH2FBvw9ZRG23\r\nVfcule7wA+sLdvL15WBS+PXo0YL8TlHNnkM=\r\n=PBzJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.112715df5.0","@material/rtl":"15.0.0-canary.112715df5.0","@material/base":"15.0.0-canary.112715df5.0","@material/list":"15.0.0-canary.112715df5.0","@material/shape":"15.0.0-canary.112715df5.0","@material/theme":"15.0.0-canary.112715df5.0","@material/ripple":"15.0.0-canary.112715df5.0","@material/animation":"15.0.0-canary.112715df5.0","@material/elevation":"15.0.0-canary.112715df5.0","@material/typography":"15.0.0-canary.112715df5.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.112715df5.0_1678732866638_0.4233240422501836","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/drawer","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.d250911f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0b9bbe718a8efbc6a5440a2eb500998057f291e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.d250911f2.0.tgz","fileCount":47,"integrity":"sha512-ozfTRrxcYYLfDJAyE/QMgShOpFdZZ2ZfssY4POMsyUTKmvvTWzVbcz30yBnOFM5++jJrGCTO0PF5syYsAlmoSg==","signatures":[{"sig":"MEQCIGafqKPcUB1w6XR0n0SS9j9mdLT8WInA5MHqGzh6KIbmAiAh2DbKi3/b+y9n5753KCZxQGfRtyVUqCEMQ/OceywW1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3qJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZIQ/+LtlMOl0FjCcPvnrFW0gAv3VJ3c4wM1JA0SSz4aS4g8xHVWpM\r\nhuE5pfVjueuPYUFkJGXqxWtGE5iE00m49PZSVsDS2I3PB6oqRhnqcaeFIY/W\r\n0cL6penY+WtUcaMf1n8Sf7fI6nzxHuunqlbhFY4oi+nEArM/fKFGZHAj4ltu\r\nToM8Ojb5d7WcpJIK79WFe18IVHF5SMuMUdzv17C5B/9c4av80VFqAhhvIVPF\r\nH9TvhycRuV7naZqr1pt8ZVZDnNAlO/wQ2sdSzZPGmg5oDlZtph/LZV8Bj46I\r\nK2WjqvuZ2WlytfLus/BwlP2kTeQSvlacyUjqfg/Y3Sp9zGzcyTeC0Zwwv2jX\r\n+QBsoklT8XQf492O9IJZ8SvTdep5lUDA5uqFRxShgwg/RIT+YZaORCly/yh2\r\nIKLRv7qTp0fR5f0AAGnx/y2BWd/13G/qPjUARxxiPV4WDPH6BtctWLpZHWNx\r\n9UlGwqOof+3+5/dfmosPBiOItooFY+bWevc3zgX485T/7yvhC5tmhxl2YiiA\r\n9E6zYOUmdnq17ht9J8N1Ysr499uxIMWPJvUWtWdmWVfg9wly+xiS6CN6NiXE\r\n3kRNzcznDBOVW/8ZCr1ENw7GrjL4Nlt5vQWVsY/yBei3ix9aTkcIiE9Tvflp\r\n0WNsqZulIDcmd5UsALqgOZLILiD55oXT5ao=\r\n=iZQQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d250911f2.0","@material/rtl":"15.0.0-canary.d250911f2.0","@material/base":"15.0.0-canary.d250911f2.0","@material/list":"15.0.0-canary.d250911f2.0","@material/shape":"15.0.0-canary.d250911f2.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/ripple":"15.0.0-canary.d250911f2.0","@material/animation":"15.0.0-canary.d250911f2.0","@material/elevation":"15.0.0-canary.d250911f2.0","@material/typography":"15.0.0-canary.d250911f2.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.d250911f2.0_1678736008705_0.18526894345491418","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/drawer","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.7cd925c12.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f400753d40952e4507e7f8aa24b01808bdc012e9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.7cd925c12.0.tgz","fileCount":47,"integrity":"sha512-YRLhJPrJiy5bNkCWBrToFTjKW0+cY5PjBcq26gQkwRlELl3EJmlaIreODxhUPMxASf4gQMhqGAHsPVGMVrb6Dw==","signatures":[{"sig":"MEQCIEE340TiCOFFf9a5sfwn9S7axin3JrgPxwyRkp5fZzV9AiAfm8Kd6uEt5Moxby8pJGOhTdVdHioov98rn9XruvXB+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3xKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVYQ/+OIaYVzwZNSrxlx5Pes/L9wcVLikLPLygsA3Rr7p0Xe5TQpUU\r\nH87ykN4lQ82JOOz8VemkRYN+a9WTCehTstVLNYgbXJNx0sexwXyyihIuLb4D\r\nCYELqM2c1p4am5rVpQSnctpeizaBjfCUPM2zupBgFTAf2pLaQOPmckT3ylTM\r\nS/DBoGHxv3jJnOqz0XDUpdGdp8z1o3hr9Wb0Jtu0VGvCddeG5SuPQYEBRcKd\r\nGg54l24rW4xZFLT6k31TO0uThNaGcEoes63bumxxclTvR7nOTo9JrLkGihgj\r\nGEWjSunIhaGDGXs7ide1wGPns1OqLh0d4otbo26/5+Z/VXMiSkRC/gpCg0jI\r\nmC77YimOqxGOiIJ2+JYyzVdVojhnVdB6dc6LI1s2ucWM4A2Yfek2Fm8vfWs0\r\nAyKi7zzcaP2/AWAxQgUe3Nj3oYWWxrwB1J9Led+qeBGULsaJkh/y4nXyy0U/\r\nbdTMyFT9JWk6ksmEvcn92Ob4poFaX8n/+N6JTIen05voauCWnWzghJbcKMKD\r\nEXoBV3cI7L3x/D4jTN5IKXZvHCoe4CHOZDMcE4nMhN4k+K0GaKHSODqm7Yz7\r\n1DEW/gtFlK5nf+53AQYJi3lbixw8l9vyS+PrXYKx83gDcK5kX4pLx80m9sui\r\nUikb9XmzQLXiIEcBrJHHS1CELN5rp8/C8cw=\r\n=RodP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cd925c12.0","@material/rtl":"15.0.0-canary.7cd925c12.0","@material/base":"15.0.0-canary.7cd925c12.0","@material/list":"15.0.0-canary.7cd925c12.0","@material/shape":"15.0.0-canary.7cd925c12.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/ripple":"15.0.0-canary.7cd925c12.0","@material/animation":"15.0.0-canary.7cd925c12.0","@material/elevation":"15.0.0-canary.7cd925c12.0","@material/typography":"15.0.0-canary.7cd925c12.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.7cd925c12.0_1678736458631_0.047639551367469446","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/drawer","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b2ddacf73.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75bbb59c9796b212a866f17016ee5f8d08fd9f3b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b2ddacf73.0.tgz","fileCount":47,"integrity":"sha512-RYwwNYSTBPMeXQGfq2rcgfDXYZlDGjeXJ3oi1O7JLNFgk5/zTD6XZBqO0D4EZESSI/gwC1xKKadctrMlF1kZHg==","signatures":[{"sig":"MEQCIHc7JYAnLcb1QJ7u1EKEgaU4ezNnBa0se+YEI7ZmHQt/AiBv9mFIcngNOFTqlmCx8+OnlyA3fRAaXt/aiYPVrg8yFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD31JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3ORAAo8qYxB4rmuAPShl+MsGHiichmIh1ascSHkow2lfGVg7LPstV\r\nhIFcIakfmfVj4BurRr4t2c1ecxocjYfIpU1lcLO3edck1/VvxIIbtbm2uAtn\r\nuYdDM0TV0fdeL5qCnJexetcFVZJNQr/xByy1z28euf4WnVqKQ+nrIS9jfoT0\r\nfiEkj+MW9ljlu9qRUVTYCgiS1H6LmNOEBLzI0Yc553EyDd3agdtCCsJUcDPw\r\n5pBFt6lIImCz5DFydTnGignTODm7h/f+++mLw0XBRrdXxGV3Nat7GuXutXiZ\r\ntbW13e889MfT8xK+rTTqjJEv0aSpCn8/sc0dsi+fBIz2VGXD7euZAPt8wPje\r\n6ciutA9DnRKHR9QkI8AorvCF6T9uq8ENznFUPkVvM6TkKTLQspd9z5WaRSVz\r\nxRLD8OEK60QvRGBZQeLL8Rd5yL32Mx0cfLjweA13LZPKWmbIC7RIPBSIpRB/\r\no/HUSR7vwXAkLvkOrw96gM8OP5as/x/5HLczPJsgZ/eNX4Rj2pUC5RSPd2XL\r\npmbkNnzzw2b5jzcVbjfrdYomZEA+IQBghdvhBBCFi6K7wedQ1lLVr6u3f60Y\r\n+zJ6nSvzufD51uaFuiPjIslp6aIoS8oCKYW3gUXs0sVlrIudUM3WshNWAqYM\r\nj1mKi0DCzrCG4plvfez8FedfX+TL7fR12Xk=\r\n=Dvrx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2ddacf73.0","@material/rtl":"15.0.0-canary.b2ddacf73.0","@material/base":"15.0.0-canary.b2ddacf73.0","@material/list":"15.0.0-canary.b2ddacf73.0","@material/shape":"15.0.0-canary.b2ddacf73.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/ripple":"15.0.0-canary.b2ddacf73.0","@material/animation":"15.0.0-canary.b2ddacf73.0","@material/elevation":"15.0.0-canary.b2ddacf73.0","@material/typography":"15.0.0-canary.b2ddacf73.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b2ddacf73.0_1678736713307_0.39934903812142597","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/drawer","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.989ae2ecc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0edd227e3a3d202ed265d14d2ddf660c723146c4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.989ae2ecc.0.tgz","fileCount":47,"integrity":"sha512-08dtyKUflFy4uSScgat/ahf1qkhWm5iAiNnexUd+gSd/y8c00xaE1MpxP+lNm584x5GK6Nkmd7fC9n3Zu97W+A==","signatures":[{"sig":"MEYCIQDyhHUY41EhaJ9z2zOAcLIBNGxCptz1StUHOlbArg8gsgIhAJxnrUEXrYmMCK+LU+H/7YEdir5kG3aslBrK+JbOePfY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD393ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNnBAAmxn7coFZmqk4WIUpZARo4U8f/ct15gPbmrx9AznXj0Q+a+LM\r\n/130aAPEqAZe7ozhnP4pqY+y2Un00CWsbfqhQWHotJYkY0rZuytFQXmaP7OD\r\nko1y6XPu1+J2SEqKauB7rmxOuC5PnsTimW+tm0O9IAQZLLL8nBCof3pIw++A\r\ndUNCT0rDFlM/PWGcgNUAclerHZrl0QXBQ/qKLCeg//Y/CaaICU7IVb/h0wiG\r\nsw7KRuVNVUSB87ph5lsfOSSe7/s9XIkTvFRUSU5esR61vpBlD5+KodJblNlm\r\n9v2UJ8fw7KAEkBv8CxqKrxET7VkqtmWQBMGXVjD9scnPGXWNzP3sL36uK9VJ\r\nVPdbERO5n0TXUOGfe1mYr+g3Zx44M7xGY9HhsYaILX0yZrsJpxn4uiwRho+b\r\nPrKn131yGuSwQW7mivOnnY+DM0DVWVmVpzX6Ooht0D0XulpzoVkQYjJwdbmi\r\nmb5e7Lo9nO/Ktc44psyKPNmNrPSecaZ/+JNm5aOZeNGVdvkkliduhLF4LHgU\r\ncccEK+oAtHqidlrmWquHvduxtckk79rBuWhdrtp9o8VqupggXNSzmHV9WITV\r\nTvPwYcw5aV1fFmRg1hhirVj46GUbdyzoZV/sWBVUuBsAvpHIzIeqnqP7BrtN\r\nBdqZmpnf4ndFRYuWqpUTnSvFwRrgty6s3eY=\r\n=Zxry\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.989ae2ecc.0","@material/rtl":"15.0.0-canary.989ae2ecc.0","@material/base":"15.0.0-canary.989ae2ecc.0","@material/list":"15.0.0-canary.989ae2ecc.0","@material/shape":"15.0.0-canary.989ae2ecc.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/ripple":"15.0.0-canary.989ae2ecc.0","@material/animation":"15.0.0-canary.989ae2ecc.0","@material/elevation":"15.0.0-canary.989ae2ecc.0","@material/typography":"15.0.0-canary.989ae2ecc.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.989ae2ecc.0_1678737271343_0.11820283617364624","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/drawer","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.89c66483a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4cd5a41c010518b030a4d9fe0a04b86386da83b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.89c66483a.0.tgz","fileCount":47,"integrity":"sha512-Vm6Bd+j2HDiRcMF+a++sSoViqDseZPJZXewNm3Gvuhk1+KWMfdHiCJo/Ry3I0YXyQh6ZvFj/Aq7qmGlS74hATw==","signatures":[{"sig":"MEUCIQClXhdsT/ltk/b17fnTyN0xe1GZ6VMQ6THAgxwSBWtMPAIge6f+zA0RuoIidpQywrPvCgt200zwuwUa5nUIXwBeIOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4UDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoB5g/+PW5rEKReTNLdSGUQBL1xgw8/ApUaevjdAZ6WXfQs81viZ+DE\r\nZdWhMaHYzLmCExGPOoNiRtrgCHlC42430BNIonpzWF2SCwl/WHvDNwrmmZ3S\r\np3sQswTkwyZuFeJ0Z02yvdEEhhvFXyGL+go7vzsf3sbxNdS6Wj9r7BAD7V0Q\r\nZxrOpcUjEEdUQQT2kcabJ+NVcUJgpa3L83fCK+2Ot5KO2PaCc+NMeOqj87/m\r\nzliq27obkRi1INvti2rs7CvUXb+SS4UBJ+3og7TYfoLnMB5vyWzjdF/wdpad\r\n8O3NTPQNgpppfa6gkftn/eUbLdh904lXi5s0yT69SgTeDSvBlP6AwkHzfmTP\r\n7IyQzXkvCtCI8FW5eiVBWnY9OpOPTeSSw5zya0oRcVDVVFrCPPMzqp3k4osw\r\n31+i/mBqHwGPXvuDlppFD5F+Of6cetEKzcafWwzYUOy644XIshELgQrn1udA\r\nkmsV0N+wZ4g5jIfxubnthpXlJ1ZniHslhflVio1YqYRqM8noGQk/Ya2gO6rd\r\nn7blCWu7/feaU4wvSIjPAWCgFkQS5ooTxc9UCQCiRSKLrDYyoqmducHfltQK\r\nHOryDEIl4KMskXYFmZpCDTUkViAuIZ6VrVXp2SeuL6bTWJWm4YBzpQzLHjhe\r\njxD5RRHkSd/saZQl7XTlv8a/K4MVcFHOW2g=\r\n=UR4s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89c66483a.0","@material/rtl":"15.0.0-canary.89c66483a.0","@material/base":"15.0.0-canary.89c66483a.0","@material/list":"15.0.0-canary.89c66483a.0","@material/shape":"15.0.0-canary.89c66483a.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/ripple":"15.0.0-canary.89c66483a.0","@material/animation":"15.0.0-canary.89c66483a.0","@material/elevation":"15.0.0-canary.89c66483a.0","@material/typography":"15.0.0-canary.89c66483a.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.89c66483a.0_1678738690909_0.5380103634684634","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/drawer","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.6a85742c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"536869a60f81d2462aed7a4f5eb3228107d2f8e1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.6a85742c2.0.tgz","fileCount":47,"integrity":"sha512-VKNM5MoOBAjQkm9IYpX/1VO+F3HbDGZkKK1vUCUJNhEEqE45H3+afuEp+dZmqEvtTKwF/HmuWs85U/YWCXucng==","signatures":[{"sig":"MEUCIB4ZD0/deBFu0w05NpVgc3968YHSv7Buu6sJHb0i0WFYAiEA6Zdz/u1rsPzrC1gNTDYVU8gq5TvDX1iBtTOjBph0Xoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+CjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqG7w//fWQPBO7mxR++M7tK5d4tiHcqd40qRB12w3UIMAuH+s/uTvr4\r\nINx1u1Dl8VDWFKjmssZhz/D1y/09wvArcZIlNNXfPgu8e4iwDBy3gPqi1uO2\r\nqI3ZYngxbPjs8zyXuU5rnYUwROmwvHQMYPV2YL3pWyTJ1bcF1PJvTEU1MRJZ\r\n8tzeAkMVk5gIMcpCJ1iJmIwTEznoeYsOZmZPdTLrtZyr1Q6wtj95XC+o1hZB\r\n/dVkSlHMS7ySY7/+CR1qpK0TxGAVKkM8VegPGrqwG41+Uha/e+QcjSdWJaFm\r\neLWcT7y8qPPBpe0LeuQva2MOCQy003WltwByFueV5emDk8VA2mYTzBfv3r8/\r\n26IAFa/m+M0eZtGRKmuW6dQhmCdpqgMCv4Z8CPNe1b/WGmfl2PXrNWlN9/8s\r\nwuEvVNp4H76PXMrkWsfWZDp4yzfcpYhlGhvtB4QhfVXlKXbR7rpx7gBNkApI\r\nP+2MgNYhHgSNw3B2rc5Nd26WVvyTBljrj06DGhJji8PGcNwh47Y2LoEsK0go\r\nKCZ+FFsK69lHqEyCo22fL1G8UayC7ujZyh8hW/ehtYt3HEA9Om7SfkXSfvpT\r\nMLkAzb+TkGqa27YI9Sf5IrbB4GacjdEoxsa1qh3eK04bruG/A+OgiAdmJVat\r\nAGVUbZ/JQPQpqHJXFlH+etUZ82py5NBovLY=\r\n=F5Yu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a85742c2.0","@material/rtl":"15.0.0-canary.6a85742c2.0","@material/base":"15.0.0-canary.6a85742c2.0","@material/list":"15.0.0-canary.6a85742c2.0","@material/shape":"15.0.0-canary.6a85742c2.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/ripple":"15.0.0-canary.6a85742c2.0","@material/animation":"15.0.0-canary.6a85742c2.0","@material/elevation":"15.0.0-canary.6a85742c2.0","@material/typography":"15.0.0-canary.6a85742c2.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.6a85742c2.0_1678762147327_0.3298210114861133","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/drawer","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.bb6cd78d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cafa340a4a1e5377d84bcacaf6db6e8ff226e8dc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":47,"integrity":"sha512-uOhfqVUGlx6bXKUCSvSlGrC4/Zgmm7i4x54IWg4m5pmiKDUeI8ZrJORfxoax2xIZsQJfXEEMZwDmwI+2KyuBZg==","signatures":[{"sig":"MEYCIQC6AzTgkJmbhvuCfDMPX5GFnd/yEBH/YcZ2jIpffyE18wIhAMUZY/lgVy3IUksWm4WWvpxjkAId3SRmYrqK3OAXd52R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELqEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0jQ//W25439UWuNv9drXvP8xcV8hDOJW56SVWa/dMhSafHo+Jf7J6\r\nuM5emUQ37usSPJAtqHLSMRzyvvd9WJIV0e66xyS2Q1Fz0pfy1RkdaS4uOjzW\r\nlp71WJgAUYZc3y5awwoUDVFcYTFh7+tQV4DxUz7K8bdFcF/o0w1YscpsB8lX\r\n9vVPJPVPEl2Mn5ziTWy/SbCV3AG7Nt/K1fWl2FEOWrYqmtPbqgaQPoKqJZQa\r\nz3JaN9nEIBun6zkZx3O2+NLEB1i5YjEUA440TlOI6gdcbh3KIfIZsOe75Kxg\r\n3lIPIG9zM4c4VqCz6BdptoYgPRjLH9TKiIQOgtLJqguRfh4tHOmmBRvky9mo\r\nEpfhWpyiipadjLkxitZRTIXa9AdRCNDqephLL4UMF835QEzOIPd6J9etpeoE\r\nHXk5CkVDaV+5Lcxx/WqYVxrAhUd4oBdMcsfk5CUZCp/Jqd+WDSOY5IlDQhKu\r\nOL+EgkoN+7IXkE9L3SzWrEh+eQbCLRbFsI1VIdoX8e6ZcoYLIN8jW5RsXCYh\r\n3XUUDnCbHi/ox9qN/xcCP7qqNwgK858UjmrppRHgrnBRvog5O0dvaUvdgGd8\r\ny2rEeRMz7FQqB+FRq1USJfhk+Huv6nMjhg4D6ppmV+Nq59EuUzPiaAWKV4WM\r\nkC1bXqGsvE6h8ojk4qbaA2kquW6n0WURa34=\r\n=XT6W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb6cd78d5.0","@material/rtl":"15.0.0-canary.bb6cd78d5.0","@material/base":"15.0.0-canary.bb6cd78d5.0","@material/list":"15.0.0-canary.bb6cd78d5.0","@material/shape":"15.0.0-canary.bb6cd78d5.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/ripple":"15.0.0-canary.bb6cd78d5.0","@material/animation":"15.0.0-canary.bb6cd78d5.0","@material/elevation":"15.0.0-canary.bb6cd78d5.0","@material/typography":"15.0.0-canary.bb6cd78d5.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.bb6cd78d5.0_1678817924494_0.23677306420800015","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/drawer","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.5f94aa37d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8778adf8c41d14af16a83b8b1d6bb33972bb143","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.5f94aa37d.0.tgz","fileCount":47,"integrity":"sha512-q66TRKFpkT0mF5sIdyP47YG7BiXhcTWxSL9wQNiN2GE8uQ3z3IWjBba4emAm6N+ihsP6ZaembhkDyxg3Novb4Q==","signatures":[{"sig":"MEYCIQDEd6CPnSOmJ3NZ1GjLhb8EeXHj5045AMiCFReAQgtjUQIhAPBeHu55r0WBhgoAVxqZtvzHgx1hRwJzSyM7ayiJg8xL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELtDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5pA/+KUc8UoiGMNNcv8QAnvlGezK4+AaLTjdVMxJoB8aIVWgc6V4W\r\nZjP7Hx23J7HlkDkITiU8T1e1RUF709gyFkSbqfFU1GpUg98rmjGiX2xXXMQT\r\njaiWB+zxVJ2LhHG8aqfJUe+mhd82aLUrl3dIxP3HjhkFsAYf/QKXpsjVeuMY\r\nlKSecSoKkWJ2w5z4Y9NwWMR/9PTDP9qLs63Jm80xtZeNQqOBxxFdTFZaKYWI\r\n+QL7UVtGYwPaetiytyn6jIMz3sQw6HlrYvNMW4FJKUtf5tUzZSgnNdxdoKLJ\r\nmO8pfhgTPd9XZPdkgcLR8DYu88KQMe22umatl4Q0aOGUKQiCv6+DJCyOK6+k\r\nQu4etrg8s+0nM1qicClQ3yI1mEzuAzTXmLX9dtpdHqn6oyqQZcVYBxnUpTBg\r\niHO4yTuto2EbzgrsJ9VD7TZGaGalVuXmnaTkJmvvFGT3eikfCL92TxJdq650\r\nK+YmsdsScxmN/eQrGtLShv+3NbMDmpGxi3n/72ToRRZyRgIMYEwz5kyKzoJs\r\nO+YLybVhhEM8uupiTAR8ZS6zK1dIhRByVLuO1Fg4JMfo4Hf1FcYRAnJ1x23t\r\nMyNlfqrOfP2Cm79SRycxCnmTrPGnLWtcOCO/pChCAJgXb3jRUUZSH2hVQLEa\r\nLK+cjRzUyyW5lXBsPEy6tp9EZL3xsRox12E=\r\n=6HIp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f94aa37d.0","@material/rtl":"15.0.0-canary.5f94aa37d.0","@material/base":"15.0.0-canary.5f94aa37d.0","@material/list":"15.0.0-canary.5f94aa37d.0","@material/shape":"15.0.0-canary.5f94aa37d.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/ripple":"15.0.0-canary.5f94aa37d.0","@material/animation":"15.0.0-canary.5f94aa37d.0","@material/elevation":"15.0.0-canary.5f94aa37d.0","@material/typography":"15.0.0-canary.5f94aa37d.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.5f94aa37d.0_1678818115532_0.6891972192629052","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/drawer","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.1bd317240.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd9294f20e5f4591c0ba49482050a8865a5ec8f6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.1bd317240.0.tgz","fileCount":47,"integrity":"sha512-dDt9a50NZbxUHVxF42S1Yij89yuaBUapXVXc6vqZw8DLHv/PLtYD3iWfZrMOssXJwo4c2KVqPyaiFiALGDwFYg==","signatures":[{"sig":"MEUCIFjSU8+/FJkpoxDa4VAXhW3TQt9OjyzD05at6VBkRVs1AiEA/WPW/T/e6wbGfWDS1ysUX857o6rmtI/CWNTdXz6/8wM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELwvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9MxAAoA2JNMoluNBBSr6womJe5TpPpGDinD4jNUhlF4tOz79SC9Rf\r\nYfzm21nfGWGAb+bv626A2TYAm0A9lRLM6XLlOhuocjB2L2bfVhIuFnjTEHw2\r\nMB+1qYR4OWR7Pv1x5vlJLWe1OfqT6ksoQi1k5B7JS4TcILvUG/p4uDXsMFvM\r\nCU/+P7xR/2+cBqlJ9QY+QwMNQnXxkoqoGdm8K8vKYysWUkVWF99AdfZTprYb\r\nRnA0lMiv9tEnBI8ScJ7s0GZGaYu2Aed0QGyOuQJC+EhGzqocMbd4KYoySqQE\r\n+Op9AR+QRW2lHqt8G3m0d0EnA4VYdxr5yR04dKg8g5VqXYmrHzgcTitSqjMJ\r\nfQ7oNPamb/ym7eX7GZxm09U9Tedv0x1JSucCIb77VxiqxF6ImVBElVNJ3nej\r\njwuoRhSiy4mQKI000+sWp7VD3EoJghLl9QtwaZ05G2pfyXrmil6VoX64mnCD\r\nRaqd40SkVmGUvEqpnjqnXYQTW4PmYMMMXPhsFcFiDQvPP6osmCOXnyaJ3f2h\r\n1kgUdyBgN9fMKloYn0KqsmpATnCrIe3pnAD3YfC70oCy8cHWNNV9zeMGb4Bb\r\naPZoRVuiR5Pc/+WNbuLF/tiCLRvZE/DDo6OEe2Qh3ZKX+L9cLl9lO2h6Nn5Y\r\n4UED0UBUIeC2WabBmjAeAuu5AgUeM7VSHr8=\r\n=oj2l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1bd317240.0","@material/rtl":"15.0.0-canary.1bd317240.0","@material/base":"15.0.0-canary.1bd317240.0","@material/list":"15.0.0-canary.1bd317240.0","@material/shape":"15.0.0-canary.1bd317240.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/ripple":"15.0.0-canary.1bd317240.0","@material/animation":"15.0.0-canary.1bd317240.0","@material/elevation":"15.0.0-canary.1bd317240.0","@material/typography":"15.0.0-canary.1bd317240.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.1bd317240.0_1678818351282_0.5028506183041697","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/drawer","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.d441d2a2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35b467e02f58577f05daf2c1128d69e57deda2e0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.d441d2a2a.0.tgz","fileCount":47,"integrity":"sha512-FW+/5EKYZTi0u1WVJNMHdcCfMKjps62HUrkiqRoYHLhCY+Gw6pq8+CraVcyP63zmChYxtdQ2uwViRmUdCmxPOA==","signatures":[{"sig":"MEUCIQCeGEUW8QPNn6I0nm/g5GlXrEiFGkRjPj2Q37X9JcX1RAIgbzZf/xSh3iMzP3h+bvXvCR2epylDmND+g2Vwv8OccJo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELzUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmAw/+N0+Pp0XPjJjb5kImNnvde1KJFl4hqBHUOIqUaOque81+QqcP\r\nklU0ro421yxbv5+o8Hekp6LXDXL+RwiN/8xZiOpSAIw16XUVZ27IizRMUlo2\r\n8u55a/Tb9/b3s0fuCiSNzn1HXBkXenss7cyczbCqI5cVz5kIBCeUHFZ+BMq9\r\n3T5eXXWTle/FC1SQrvmzKp3Hzc2cT5pBQ95mMJKnV+WYPCrkq+7qj2aaiTmQ\r\nn1f3OuUOkYJ8/TmvRUAoalnRldb1DWxLOo6K3q0Dam1YQOJ9ticLhLAKyFs/\r\nZWVx+uAJr8ItoHA93D2/YtQiGUwOOQSR9nsaBuCtnsgHXAL/i77Hmfrvoe20\r\nD0sztsuHcIsAchZuwXdlsysTNXnq7yTqrWJ492bWz1ZDxdhs3tvMDuvd700R\r\n+/hOUqfaWADTVch30Vv5Xa9LWhryI9HOVE/LhgfWFX7PEvu+8veBqtblcIVe\r\nnh3fMXvxtgLoEvKzj2s0PYwRa3kHCicqzguuqADXIpqjaXlNMVokw1Rq1EqC\r\nhT+87So08uQu8mxJOxUtTwlTmyIH1Pj8YxjoqyNGWtQf39kgQ8tYWb475yxr\r\nWgDiXWKxJwQD7kIuocbhA2J3S3ZQsouyr227fcfFtdh+6beLPMcEiJZACscZ\r\ntgxeqIQdrVop9w4jzwwjo/2UmwQaGPNCC+I=\r\n=zR2F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d441d2a2a.0","@material/rtl":"15.0.0-canary.d441d2a2a.0","@material/base":"15.0.0-canary.d441d2a2a.0","@material/list":"15.0.0-canary.d441d2a2a.0","@material/shape":"15.0.0-canary.d441d2a2a.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/ripple":"15.0.0-canary.d441d2a2a.0","@material/animation":"15.0.0-canary.d441d2a2a.0","@material/elevation":"15.0.0-canary.d441d2a2a.0","@material/typography":"15.0.0-canary.d441d2a2a.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.d441d2a2a.0_1678818516128_0.8238253473555068","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/drawer","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.fff4066c6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e8637516037548067a60fc0808d3ac85834bb50","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.fff4066c6.0.tgz","fileCount":47,"integrity":"sha512-NJKB6DhsT6Mbr2ADltMA/sv3xK1dyaNC8WoyAd98J5nqanxum5iGFrpMaP2wjGG0Z2Y+sPgc7eAT58gMfC5OJw==","signatures":[{"sig":"MEYCIQD5mF/UckvuZtdYRzVuVySqbbsQfcfiYDDnisZzjyhCpgIhAIGfT0Hx3VIH9ZQkL2JTwEsUe0QVv3JJLL0LXn1ijDOk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELz9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoiA/+OXIZSJ/rUxML++66dy+9ImF67wqV72i34NkkuoVax8BBHNzi\r\n/L3wHNX6UxPpQGo3Msfgzw7fPggZJbjlG/gpf6yZhWLbgWva91FmsBDXkotc\r\nVlRWTM7EeuzqPvbGKgIHX6e4rq7TbVtgE7zaQNmTWwWluwuUbckQiXBe11hc\r\nc5xI5ExHyHAxNGuI4bIywSZzsv1CqPQ0P8NNJB+S0uoB7VnWqGLkuecX7q9w\r\nO3jRfysBCemeDXx1wXtiNItoraRuNIDs50mKyDYLiQjM45pbwn+gdP3Bjhit\r\n954MxuBxd2BsGBlK283G8eKtfG2oO/Fyk7vFIs8jBG/VIv5rqv3L6tEHWupT\r\nazHgjDRONYQJQyHO5IspnFOohgA/Rgw21Um+xO07qX6z4l869id7YGHGd3+i\r\nAg+4wEv7Bw1n8E7afWMLviFmqw16+YlkEYZKTTpxBvftwtDTmRKe2/EctusH\r\nmY77wvEebfZjCV7167dGPo+9GVvKtxg5KeinviljHXLmNzF4SKhSUfQ8ZJ27\r\nbCiUv07+2vcEHtT2QWyHk+tQiM1oqa0ZfB1zZ1K+Ptl/b+0pjHlXeGmZkM95\r\ncAxDhjA/81WuvhNh0m7XSxP8TFM5pnuqXmEhbtquZzmffPR+XPlNUMyWzLzT\r\nfy9AgWcnqVrcFkb0IrvSxNieLA4p2Au1QSU=\r\n=YRJp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fff4066c6.0","@material/rtl":"15.0.0-canary.fff4066c6.0","@material/base":"15.0.0-canary.fff4066c6.0","@material/list":"15.0.0-canary.fff4066c6.0","@material/shape":"15.0.0-canary.fff4066c6.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/ripple":"15.0.0-canary.fff4066c6.0","@material/animation":"15.0.0-canary.fff4066c6.0","@material/elevation":"15.0.0-canary.fff4066c6.0","@material/typography":"15.0.0-canary.fff4066c6.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.fff4066c6.0_1678818557476_0.1573506361965744","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/drawer","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.87809c710.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34bcd63e6ba414e837586cba2a24c2a9d751aed3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.87809c710.0.tgz","fileCount":47,"integrity":"sha512-jklJDeaaxKD5cWsddJvgw42ckFoSu0tvmxZaiCG0vbcJyQaTR3D5WWrgsyiUcHZ/oSe2Idyh+UJ7mEMJHRfgHA==","signatures":[{"sig":"MEUCICk2QG3nIO0HV2W2NJLMBZ21ghOG2MBCp5Uz3+4EmTecAiEA1XAHg87FrMLp6bxrArmTf32HFk9jalPinzvYdY6+pzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMC7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpjQ/+P1ZJPtccVoSYgjoVsKr8Hs9rBICblTe/JcEnSXUYkNklg0Ex\r\nI+j4B8LaNnW2vi5u2GRYUCdaIt+b7yu2rHHsNg5Hcu3xkixzBKqIcR+06P6/\r\nf53RhrcRci1CU4+k2p+/dX5vonOiP7lQ+Fw19pJDGBYwmba9mrcJ/5p78FF2\r\n5PsUISQAPmySA0nd0v4L6nkYjic3Dcc+ehjaWUJPgBouYW9gp7731YMAK5sI\r\nWNfUujuRtoW5pPPhMt2TSm+69X8zxw47+XNUw7gYXLY/CPOz0S/c47Pzwfv0\r\nIFAXdqgFUq4Dakz/ECam/xpWRPlmsYy0WcSONPVX9k/UmTHNyC0BFW8dIPuP\r\npiFJjkb66apfSkEBO8shTVaseGF/zJ9Tn/kfPPO1DeVloypTBBEdPZJUvXNz\r\nXcBWxOWtWaIs9c57pmEm1Elpe505VXiE9Q78uwhYTLisJotMeArixHJ39BDF\r\nCGcm8BoFksoqs7rxmT2jCulZi+J7B8dO4v+uhg0OQOcFa2XK4rO0xCgdXsO5\r\n8CVQXk+F5lPdbpLEOUjmD8IAGVsvskkZ03jA9INcLVH+ecvj7mrxkoSGSHQf\r\nSTDpt1NQSkm1cYGaAPPJchLfhDSqYXwt23ovCofBWkx2f1lmKixU0DlVooRF\r\n64Z4cdtHCEa2Tn22v3lurHfdWbBCago9nLM=\r\n=ktwN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.87809c710.0","@material/rtl":"15.0.0-canary.87809c710.0","@material/base":"15.0.0-canary.87809c710.0","@material/list":"15.0.0-canary.87809c710.0","@material/shape":"15.0.0-canary.87809c710.0","@material/theme":"15.0.0-canary.87809c710.0","@material/ripple":"15.0.0-canary.87809c710.0","@material/animation":"15.0.0-canary.87809c710.0","@material/elevation":"15.0.0-canary.87809c710.0","@material/typography":"15.0.0-canary.87809c710.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.87809c710.0_1678819514733_0.060461556574487485","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/drawer","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.48d30012d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f6f44dcd10b29a670654f6ac17ded722808b1a8","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.48d30012d.0.tgz","fileCount":47,"integrity":"sha512-I3Uwryp9SzJj6CWTwM7zv5TOV3EJDn7NcTzhat2Nj9bxiWsV3zEGGmWfjy5JXKm8GFSYl3nbRx0cqPzeKDI8cg==","signatures":[{"sig":"MEYCIQC/zxhopSCHZdm2esz97QH7j3sQ5LI2xHNot8ZzskVOOAIhANyyOZSV5aigV2K0gSt9kztFM/LJJlMLYQ4Cqtpk5RIZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMG9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryjA//WJGs3NRn5c+5r+5y3zFmlZful/rbUv6mnoh3AxXOY3MkaqrZ\r\nDz1WDCVtOF+SApDPI7GO8e0ZJwcToGQR0kVhxnBuqNUt4xCxJXlwsS+k62cN\r\nx0XL50OboYcM1Nu+qHHlDC+MOG2Hquxwkmye6vY3MM/eHnzrsLMduHFfx+NR\r\nS0NKVvs5eCCdSrwriy5I64TNCycNvFuQCJiCaBP2C+7v2ULAZn39RMdp98/m\r\niGxt43H+m09E2iArehHfn1Zf8+sYLLf9MVLmJte/EDdKRW1J2ylM+3gFMtk7\r\n2oc7/Cs7Ffp68SJ9hIha6xKWiyg2pJD8ol6hjsWs+a5/cZz4u1llAZGjWFda\r\ndEws/jUPlYqJ63wIXQpYFrQ/40jSs1h0+6xx6hyQhRsvCvMZacwKC9kERHdY\r\nsx82LkOG2brw0CaS6QnL/bAcVAgxYMejLbJSngQ6XOV9CElBG7dFB/hZfa2K\r\nMmv2bARh6h2w4GY6DRRPOsjF7MQpqO136z9cy/r1Xr8z9FELEr5GgRhFdWf3\r\ndbwxU72jUBGrJR/VZX+Mp2jaJevC3YchRC0hVBbpNrYYeYyAytwBYzhWoaXi\r\nqfhg7CJQ+QLk9MWC/XdBiXOqIsdDTNXtt/6ZhUgJUkl80yeiXeZE2g0PDB5U\r\nqVmSf4BPB9w8dqDJ3dZ33l3a031avNxd5uc=\r\n=JF74\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.48d30012d.0","@material/rtl":"15.0.0-canary.48d30012d.0","@material/base":"15.0.0-canary.48d30012d.0","@material/list":"15.0.0-canary.48d30012d.0","@material/shape":"15.0.0-canary.48d30012d.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/ripple":"15.0.0-canary.48d30012d.0","@material/animation":"15.0.0-canary.48d30012d.0","@material/elevation":"15.0.0-canary.48d30012d.0","@material/typography":"15.0.0-canary.48d30012d.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.48d30012d.0_1678819772872_0.3541633445749641","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/drawer","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.419b23cc6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eea7271b50681e6c03e78932728b7ad15bcc38b2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.419b23cc6.0.tgz","fileCount":47,"integrity":"sha512-YwbSACNGpH/6BEq4bF1z2UY18vWITZnSFqBQPucTDPYozzhush5eqWUimdyOOrN9hnwDHY6rgUAb+BIeO5hPLw==","signatures":[{"sig":"MEUCIQD1KY4VlYFNL+uBYUjlOkOo9TBHqJWymLipbpihgO6RzAIgS5Yo+5iEErTm/AMHsVH5LaYGN4780YQqQ+3gn2LtAfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMRUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLsxAAgCJo5JYygWbE7jvgoNri7DWt2OWCGJDcLBear55z9KwOVuzU\r\nQrVHIZ6q6x5R9tQTQ+90/iBTpkfQz4QwHfc2x+hFbTXd4ayBYfzOh4RIj9zr\r\ne3s0ZRn92CvWFcCdK8UJZN4LDSHmGbqeIFoN8cp0y33+tSH37NRIzOC/qWWg\r\noT+jiHeJNTc/9tU7nt5V3RS9+2wRU36KO0b3oYUVvcIAF6zHkQfBo/3m+u6e\r\n8o+JFvjDXmObR7Cgetlb8is9qJ+q/kt1kTPk1+XrDrGMNu8kiYR/L15A/qmj\r\net+l7OP0r2rXiF64Xh/+qNsq40QzNOtZgvrhF5+6gyA9OyNNMRBhH3PJiJHB\r\n8mxSXNUakF+G2+79mSE7d5g8jTcyqwNW4GEAN6vWYwXre9beQscN2NQgsZLr\r\nK+MBkwbXOWYR8uJIOzXY8kFzKZbFJz/yp9NSSFxlSZKZFPcUW/a/WmMqR6ex\r\ndyWiM3c417tNp7Tau3vxvV0+++d6SRb+A3m6i0IBOuBjHMh3afJMAhYdoEwU\r\nzVQrUlZ1D3x4AkYtaEZB5r4k8YA7CIfE87py4anlhuXGvBwKyUSLPuuGv49m\r\nZ4MvqegFuMOOak214JXHNsIy66t+N3gLoC7OSpguVK5ei5gOBRwM5kaaUhVv\r\nTMR/4pIKtZSXObL63TwU01+Hw3wSHjXBeiU=\r\n=MsVf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.419b23cc6.0","@material/rtl":"15.0.0-canary.419b23cc6.0","@material/base":"15.0.0-canary.419b23cc6.0","@material/list":"15.0.0-canary.419b23cc6.0","@material/shape":"15.0.0-canary.419b23cc6.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/ripple":"15.0.0-canary.419b23cc6.0","@material/animation":"15.0.0-canary.419b23cc6.0","@material/elevation":"15.0.0-canary.419b23cc6.0","@material/typography":"15.0.0-canary.419b23cc6.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.419b23cc6.0_1678820436238_0.41366782586923856","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/drawer","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.bf86521f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6c7f72041c435a085c4a4b335c4879b1a084f28","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.bf86521f4.0.tgz","fileCount":47,"integrity":"sha512-DMRexf/LQpGk42fldirXJ/u6iJ+qFpnL/idWXKl3J/3bIvNMkRM3gNClmZ8pEMF/F5t5iIMX7djDE1BO+k6P5w==","signatures":[{"sig":"MEQCIGGmY3jN9QCFw9cUPS4Jb8UizNWlfrnP3wQXmN60zBq1AiB+FUF65ubg8cqvcUTbcwg4hc7BYp9WG1PqUuqPpLnL+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQAJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaHg//Z8AY287jj/ikqCh7WSGpBI5Jz5kxa+E4HRoj0ch8Trw5Oy++\r\nv6NCmfUjao6/e4wtc8wfQ+jhXW4zaqDBX5enDbbbdjJxvhnfiGlzg6EaWIze\r\nzvKw5BtiYz8z1gznrcJOTGTHmyKLJOWpX+TJtBT8v0PPhxxxVZBysD4oz4j/\r\nyv4y91v+FL86HGPr/Vfkyge0cz3QWS5yC5oxzFDdxbofp482bN7MAzWZjsVn\r\n+2e+Ks5+kMeUmkz9PELtEULhT2CX6+y4iz0k1avT5Aa4dlB5o86KTTqqodzL\r\nMuosu1n9eSvSLpqNOXO1hIJ6ppzUJbpbmEIweTq4I+RKfDvRGBxjDWWyDNpV\r\nwoqef7YdzeEcxDyFQEdjupO+O8fm4llDu0ovUZ/JxiW9vttYgVcSCQR0zxYo\r\ndTnkpwxaZ/tr2ZtZbz+9L4avHsx7DamsXnvGcqoT/nPtFDoXnAFxiRGZz77p\r\nueD2b1debnRh4zQ49TbMzgM04F1/n7kuttqkguI55VMM+GkJ6xUYtuBmAiqA\r\n0pQL7AwGc6PN3zIT/8vz00TQjUME2TLf9d8tsqNvjf/ipc7bl4irweosGjpL\r\nmVKh4bfZI77tBJICnLrBkrZXYDI0CKrMIich1xueqrJCISbMMv6/S1srNPyT\r\neZXU5dgzC1TxCHoInRewNfZvZeDz9PEoRd4=\r\n=YfVo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bf86521f4.0","@material/rtl":"15.0.0-canary.bf86521f4.0","@material/base":"15.0.0-canary.bf86521f4.0","@material/list":"15.0.0-canary.bf86521f4.0","@material/shape":"15.0.0-canary.bf86521f4.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/ripple":"15.0.0-canary.bf86521f4.0","@material/animation":"15.0.0-canary.bf86521f4.0","@material/elevation":"15.0.0-canary.bf86521f4.0","@material/typography":"15.0.0-canary.bf86521f4.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.bf86521f4.0_1678835720747_0.8384349650900114","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/drawer","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.11f3d280e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad61e2b70442a9e9d2dfce925b329b9e0f41064b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.11f3d280e.0.tgz","fileCount":47,"integrity":"sha512-O3/JzfFmCDW6es6Z4HYXVzwV0i5qz1vH/aDRfk1JDPvKVRItprnvU2ALe3d0dEjfEdg9o5Eh1WLerR3v2/AA+w==","signatures":[{"sig":"MEUCIGqNz/p37Hqvl8ftsCbLY+zcemiEgTs5HpC4/jl/rgJ4AiEAi3dHTu5u92Xac4gieSV2hk3aohQHm2aWAfuXDdt25Cg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ2QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoc0Q//YOab3ao4m289ALHP+OoIpNQ+9J/xf3DT7kLvLyvQskHJJRTo\r\nTsfGRfsAzrtiuFRxRJxmK3hlEubKfJVbNUpk9i0Y/siu/GhE0k9h7NvUnR2e\r\ncnfpGsvh7pTRg4Q96kCaQI4GP11LlIdIMe2w1WknCdzlMmTAuK4nmbPwGXC6\r\nbJjxnHFzLpiN2sPuyOzlicZBm2u2351aO2jhfd/TQcY+N8MoJuAozu7gv9Ok\r\nLRagv6v9In1avT+sPhMpwb/3cGv700NP1sHV4x+Uj4EY9WQ0+ymlcyYORvbW\r\nm/tV+PKo8UT/99UCGFcuxz/Y4HUeduUCQIWDpTHdrT794AVGxZX+ekJHeXPQ\r\n1t07o1cjPe6yJ9gCAboQYhaG4kGBQQ1vuTtywXbKTZje20ic6gRGZSIPZzng\r\ng9kgBbv69Eg8tnRHqQjm8tAEVJRwphmi2W2Vw9Du4DEqQpOkyW98Qq7Xy236\r\nFcyaeh+jJVy5DT8HLbwHWSOjoyxK26H/yz3Qb6tfHtZTIeNkurj386Jq9pcF\r\nh4u0LhhBKuqOyUDxZkEl5/1Hp6RLRa+3YnOIJqf8RUujOd8hER5dsIISDup5\r\nLbk2G+E6LO6v7hbgpJVRPwjPX0RjyBZSBd3uv2IoQJrN45asUMWkY2xoUDsm\r\n/SUdPZU3xpYl/jqHz63aWSsRGs1R5Hi6WVY=\r\n=3muH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.11f3d280e.0","@material/rtl":"15.0.0-canary.11f3d280e.0","@material/base":"15.0.0-canary.11f3d280e.0","@material/list":"15.0.0-canary.11f3d280e.0","@material/shape":"15.0.0-canary.11f3d280e.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/ripple":"15.0.0-canary.11f3d280e.0","@material/animation":"15.0.0-canary.11f3d280e.0","@material/elevation":"15.0.0-canary.11f3d280e.0","@material/typography":"15.0.0-canary.11f3d280e.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.11f3d280e.0_1678839183915_0.6351037584564831","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/drawer","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b281a409a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bb09e1b5dd24881ec9ad0770c62cf78fdac394a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b281a409a.0.tgz","fileCount":47,"integrity":"sha512-W84uaMpEJN20n2Q9qGuooGe4gce7QjtAS677Rr1qVS65J5Ca4BU3YQEH7Vghxo1CyzbV8yW6DRhv7x+Zdy9N9w==","signatures":[{"sig":"MEQCIAJiO0AdPijhdE8/PwM77e6/PKocQQQOXeIxgbMCRUbgAiBW7CD9WTdLu0jz0GaUcg84TyzSUVxPhz0xv38moToibQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdCfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIKA/9FiWo7RGSB+9G4dYWA4YIitOcKl9mI8Y0cZSki1jXQl66k3s4\r\nTIQB5SV8fJEbZKenJpGC3HOtJd5PQoh5XbT66fIL4QnXlrKTE0Mb37mMgshn\r\nK7jIFwuRkGInE53RFgUaKMDXOXwWA+2U1ZElFVeELEJXKqu9KUVxqQ1G0zEs\r\nq7h7ybkyH3hzsAn8RZ3gWZFLxvWRFhoWlqu8OWd8I8lKRoiAlaKHgb0rNEqt\r\n9nMtqBgKn88j2eu6ki82SxI4BXNqrUaRgy+h6sIdBIAVlhxgXHX3aPSHWV1h\r\niWyfx3IKmixfM8PyWfGyULYTl29F6By2RVOK9iDlhY8E8qNFEzZSALXXnndT\r\nfUcQfAZzp7DPdikTwuQx/ZJV/gSDRLtJ7vJPOo10/seac9cDLlaXZKEGvVwU\r\nztYkXFxa2XOgQzBb8kDz/aimBSYEE0G9Wqsu7gF+Q+f92jMbZgIxg/mixyxN\r\nUpUbhj3fdYoiGdgoH7Dr0AlhOgsCpmEI0Cci/PSbYhFat6aSp1S9PpQUzKth\r\nEaOl1C/brCvPqV8/E95Do8aqJ2dNHP6xgx2WBXiAK60M+dufio6o9s0osIU8\r\nejgwVrJEf67La8lwIyQZy9RpJKDo0UP2crheiaJjafZHTFe9508S79p633zB\r\nALXwnqvNJCQrXPTaUJG84asu4gZwbttpCpU=\r\n=ANe9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b281a409a.0","@material/rtl":"15.0.0-canary.b281a409a.0","@material/base":"15.0.0-canary.b281a409a.0","@material/list":"15.0.0-canary.b281a409a.0","@material/shape":"15.0.0-canary.b281a409a.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/ripple":"15.0.0-canary.b281a409a.0","@material/animation":"15.0.0-canary.b281a409a.0","@material/elevation":"15.0.0-canary.b281a409a.0","@material/typography":"15.0.0-canary.b281a409a.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b281a409a.0_1679413407014_0.6376078999573103","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/drawer","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.39e473690.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"555ea0fc673a1ce246763b64bf5900ca7bf50f80","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.39e473690.0.tgz","fileCount":47,"integrity":"sha512-aTC/f1bs3TNXWO1QATvhd9kECWKbyfYNIHZrmV0QzBtk8itsGNc//xxSzj3sNjPxlf16ig04bNCG2GMqJlJA0A==","signatures":[{"sig":"MEUCIQDy6DsFZuPyRhKAkAVk7j1MCHM6iSllvnK8uoVm4TCsXAIgfBcsXwVXLpjSVNHkLMpTB0JL253e36NKOhNwkZDftcA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe8QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUNBAAk8TXRyUrTUB/djjrU5gBmGGh4PgL6WSbGcNTuDuALaA8DPse\r\nQJPfQm1g6aAdSNE0zV6uh2H2DjGZlO8B3NM/owxlKJUZGK3126jFKSjHrj5i\r\nFSC9QoRNZaNNk6ctQk9G5P/e6AOiGsv7pvwJZMtJsYLIoREKGNAaUDM52YIR\r\nH7uMlB+PbBo0O70ui8ouy8D4Et4C+LOf6X4UPPQ3GMAnaMOGfmOp1ClHYkQJ\r\nJR6Jnqj1NKpjlBNwcaHkxuteqYRJlK3t9ZaVQVQwFSg7Kmw+DcG/hyxZDzkO\r\nv6jeENiz4qHgzRofw5CDNhcnJfOck+MIrzy0uajgWnTgjqtiZHt7xv+SAUaX\r\nGY7+or2BTSvAfvEZkBz6nET4v9WI1q3XpMhLQJc6FZN73f+gDt/iGfFE6A4s\r\nct78Yq4c1ihctaQaSAYLzSyMZQc15jaLAkNu/6yLcNxV5iZTx6JE/gRsQ8A2\r\n1PobmHhLUuhg0bAxaJp1csttBkBUte8NaRztOv7TERoKGFqDMZvBSEbZBUBk\r\nIghD3vWhwBKZpslKii3C9P0hRXe/UQQYZ3WQ+iCeRV86sgX6XfvQ8t4Bp8nP\r\nDR7WAk4NWmf9F7ZERPbabSeCuvxUuvKO4MQ6y1RDS3IslyhDmt84VeUUf3BN\r\nZTBEuyBWCvA2CBTMFFZswJUGg/lcbpivpcs=\r\n=zJEM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39e473690.0","@material/rtl":"15.0.0-canary.39e473690.0","@material/base":"15.0.0-canary.39e473690.0","@material/list":"15.0.0-canary.39e473690.0","@material/shape":"15.0.0-canary.39e473690.0","@material/theme":"15.0.0-canary.39e473690.0","@material/ripple":"15.0.0-canary.39e473690.0","@material/animation":"15.0.0-canary.39e473690.0","@material/elevation":"15.0.0-canary.39e473690.0","@material/typography":"15.0.0-canary.39e473690.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.39e473690.0_1679421200299_0.07136200667786241","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/drawer","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.cedffb44c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d64ac7fb1d86cfccc41d2a1f59cda2955233d029","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.cedffb44c.0.tgz","fileCount":47,"integrity":"sha512-bYSFTeLsHO7mcFlmscPTTvBGsbiDRNrR2VdxsReEW3+semvEZw2TGVppcLXf+p0AcyQ3fZBTbcAREPZ7ftJivA==","signatures":[{"sig":"MEUCIASHRi4CYz1PIaUnNkfQt9sEboNLX+3nxLSelLv0nV1uAiEA30aCpeCfITBlivvqG2Ie707WsBBhRh90wAfXUtICTrA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfCwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1PQ/9GNVfIaoLW8sVAnr/x9zjleDi/Mzipeg8C6xs6ur4haX/A6Ur\r\nbZRnx34ukZOpbmqISzR/hHetsXel2do1NVeb7uSoxdhCRMWKwVJ5cJFWsTKn\r\nF/KFLVeH5kW2pVc2bQZiO0Hx63yJMjXXL6cvqT/8VNbWBN5xiBVDUg5tk+0y\r\nDq12msBP6/h1HXBVe/FK+t0O2yn5nrhjESkiljjlm/bPqmGvhnwYodp2gXyB\r\njTrgzM7EfeCqZyAg3k7rodLOM6Z5FyksAT7c4RUcXc35jutK8yIBtoPNSWY1\r\nW+MQJCPz/AElHzxgqdU+UJhX9n+W9XbZ1OsyZv5NI7up0aLQkRFtDKnuHT3N\r\nV2W6pN8qOfpTT+iSVEoIeSzPLCTTvQTZF0DdMGJNwpUeemsZjkia88xa/U11\r\nDwEkdHI+9WL9aWvEVGvso4p+Gx3k8bntem1tkXaPdwqL3XYbr3n0CtFPlkT6\r\ndRS782c7tXNlGvRwoM8gDVS9AjSwqZRLk0UTxsOGp1NToJPaXFoURw8e3G+j\r\nWjYdANQj9kVrWqCa+38vC6hswlg+KGNuE/E3Wu6CQNJCCF31mhY/+4z9jNuA\r\n8gOTL9Wt57GDM/bS3pT+PvE7AhyqLMlS4MvDg859vBe/Gj8vHp96GFaq2PoU\r\n2bsRI9fxljy9DPaP3JtITddXv3lwzy5GmhU=\r\n=/txZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cedffb44c.0","@material/rtl":"15.0.0-canary.cedffb44c.0","@material/base":"15.0.0-canary.cedffb44c.0","@material/list":"15.0.0-canary.cedffb44c.0","@material/shape":"15.0.0-canary.cedffb44c.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/ripple":"15.0.0-canary.cedffb44c.0","@material/animation":"15.0.0-canary.cedffb44c.0","@material/elevation":"15.0.0-canary.cedffb44c.0","@material/typography":"15.0.0-canary.cedffb44c.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.cedffb44c.0_1679421616457_0.8677421827706857","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/drawer","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.36a4cba99.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2374d1d8de992f9e92f0aff922c125f74cbcad19","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.36a4cba99.0.tgz","fileCount":47,"integrity":"sha512-jl/0qCGseAZ1JXtCXJBeg1atcuiKUB0hlp70nTN0PUVdfggl7NOLQM8g/T35J3RCvaRsr0M5d3DbNZwEQbn7UQ==","signatures":[{"sig":"MEUCIFvwQu+/Zu+c3Sv19le4FF0A6OJ3nUYgDUYuXDqzzIDaAiEAhmpngA/WK2qk4jyWXq3gIzSSP/bT9KTcNr4pV5oDrpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyk/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7mw/8CcdsGbdGeBGTHlIdr94iHbMHF2L+0SeuUafoygiARadOqquy\r\nbYx1k8K14oyryp4XSk/H6c8ayOl2rFbUBWNx7UezwRL1RfuRBAEdjm9W6S1Y\r\nRm+rwxJuGDVM5hT2j5impGxOLR7bwN7/fuA4q0OfLsC3CRoxbwtEC+RqBjrV\r\nmjzmlaZzojtVOR9vPsodqiacswF/QSkbZCpPOkX/iSosW/yxGkXw3I6qDPFx\r\nyUjBV2QdQcLCfAZNjcSt6AUCr1kFoTff6wcJIC8iqH9mezXkUIwXzHHmmuMQ\r\npoKXCURe0xBCsJjtTip7Xa4/GFzTBgJXnAfSnfsRxJvU2Bf6X9je6Lbx/ZN/\r\nYv95v2VvLWXu52aIF5DGVVq3bwK2Bw2vlLHIV2bdy8mLUWOC4T52JpkkO/u8\r\nRVAZi2UAnv/H2k4lzjljmsBArLnBR59DTP+YAG2v3vgzUD9YU/KeRG/gM8Op\r\nTkMuTCnCFgwESxt45a3bELMz8/Q08HB3RLX7lvjfXACIRXDTYEAt6IkgF6Zm\r\nNuVLYzicct4Sy1GJV7BnNWCsTCXbCru2ts1dmfBKGwkVRSXTTKL6mdlSIKHn\r\n8CFAWQL5DGgfr5YE+Zck6Cxh3rFwJgn+pyslE5pvFTelk3YjgRqaPLNs44Sc\r\nB1o3b6yMin8FqqGyvNY3ROhO8Tx+A5cqKMw=\r\n=+O73\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.36a4cba99.0","@material/rtl":"15.0.0-canary.36a4cba99.0","@material/base":"15.0.0-canary.36a4cba99.0","@material/list":"15.0.0-canary.36a4cba99.0","@material/shape":"15.0.0-canary.36a4cba99.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/ripple":"15.0.0-canary.36a4cba99.0","@material/animation":"15.0.0-canary.36a4cba99.0","@material/elevation":"15.0.0-canary.36a4cba99.0","@material/typography":"15.0.0-canary.36a4cba99.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.36a4cba99.0_1680025919068_0.39323157365971095","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/drawer","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ed7e82ded.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa6f41fbda7e62ff13fb3947281071c3ede853cc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ed7e82ded.0.tgz","fileCount":47,"integrity":"sha512-usXPzzj9LTMtRyumyI569S6zInPWWGKCg3FOE9MEeZ8xMImOOt5g7uqQ7Vbk1GEuYlka+kzvNCVc54SVGyt6xg==","signatures":[{"sig":"MEYCIQCaC3jP+/Pp348QdRdIClQ369F0acxm6W9uIJWK5BMD7wIhAO6uQFdTu5ivNDfWn9acxtifu5cYe8TMbsIeWUsw8zNR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI0/VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3OQ//ceIcafhUBjjTWSCrP9CUJY7yGveVZNwCDG84zJsYLjiLxnHC\r\n229TySGyCf/98+i619ZZIn8cq7lcNSU3jsCIaPHl44blw8OV3wXb+2c8qO2t\r\nXgBx+k7GM2WIE+Qh7ipE++tFqfOA6pK6UiIqFXwRDI186+tXJ4rh/erUKy4n\r\nXIEacxsaa685ob1w+tHxVaezCEWB8YjWwZiuBkOZHnBjHw+mXTmDH0Yp4Em0\r\nfyeqFIMl548dDAcYefxoqcrw1HuvPj3dokq0WvEPEkxBzfv7Yn8xLczXQME/\r\nRtSjP+jjS0NZ8rfI1v2lllZKTVAmgLUtUzem0qsBmZ84KKA5UfjgiL6JRhi1\r\n4VA0OvpojqVSr75CelMgasAQ++HQ5awgaxyrmlnrUv7K8G9fiO2fsvfm5Rkn\r\npVh6RnDToE64dcmpe+pDDpe7Eopu1AtKTZh0M2IwJ1nZKEAbfaSczEB2gUk/\r\nb/93Yx9oHx8Lq5py/SVPzsyV91wSxmJcA8jTqzt3O79cWzRECkGiBKaRbIlQ\r\ncTETfRuusmDI8q1cnb0TT3O82o2kvWZ1fR2XZPkZ4PtxtCcjhG7AKHCZr469\r\n1uFkh0yvZULFTj/g8xFXxFfr2p/TcxdBhs6dogIVMbGHUSUc1/+aJPDJXEEp\r\naDHZAgaIYyN3DZXBQn+xABftmryEP0pWz9Y=\r\n=HGA3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed7e82ded.0","@material/rtl":"15.0.0-canary.ed7e82ded.0","@material/base":"15.0.0-canary.ed7e82ded.0","@material/list":"15.0.0-canary.ed7e82ded.0","@material/shape":"15.0.0-canary.ed7e82ded.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/ripple":"15.0.0-canary.ed7e82ded.0","@material/animation":"15.0.0-canary.ed7e82ded.0","@material/elevation":"15.0.0-canary.ed7e82ded.0","@material/typography":"15.0.0-canary.ed7e82ded.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ed7e82ded.0_1680035797543_0.8735386425690796","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/drawer","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.55093ee1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12fe5df1706571ad92b996712d40852411c51715","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.55093ee1e.0.tgz","fileCount":47,"integrity":"sha512-zuuZyOmrybvWu6B1BPwQt4+CKkTHjgLaqayxl8JWJEjWrwtq5lWB/aJ3V371C3sTQz/0kUa1RuHosd05x80s3Q==","signatures":[{"sig":"MEQCIBfnWBNbvLEPfed4onKmg1oI3fkNY+DIiLsD4wVHsnWDAiAzrtWBJ7ULDyk2KiFrcYGGPz+WPJ10Gc2IpdjwiD9RGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIiJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq//w/8D9Bb5lsxVK7c6kdYoioqiBLeoOlu199rSI2VuUoKl9L8ko6o\r\nKOAo5W7DSZXV3ipVSJZvBsmEYfR9v3emFIQ52Cr0eLBcWNRq1xJPFS250eT5\r\npIGYK1tb+V37NK+Ku2byY2C2jpYP/Hb8yS9T+Dn0HOrw7AQohIw1+ycnM5RK\r\nzJDvw0FzlRSh2WEDCH2x3DK5PeNr4OyF+sgJKDIHM4/E9qdk0EOvWeKlNyu7\r\nQEt2I0gjjgRVTClZtP7VqcX/x9zOrBV38RvdlWTphmS7TXjTDiCtLmv64+zC\r\nfrhy7kcEm/cAnitcSpl7dZ/DUkXvnybnCFVLUKD6VJ0tcV1ysUB86uDX/wFG\r\nlr+B1MqBIN5srX3/xoSjs7NE5v4Q2zqgj1zz+Z6+t0Xpl4+AUTtyCzNv1MdI\r\nkZVvlFSU1xUFlX7MImG+iZVMWcHzYb0ERNHXi9aqTFkF5jrxp+bgwbifWYIn\r\nxbjBeFjxkTEZjOI8BrR4gq949MFlZAyFPZWmCtONjV+ql9PmFMT2mB/CeRva\r\nsLsQcOrZI+TH0uNxvkzVy2godC411DUjk2q7bdfaN8X0oqPXf3FMELOwGger\r\nogFYIwzlqLJ491TTcG0DV7OBJTl21Xs1qHZTl16q0pi9S+1XMTnSO+nR6zmZ\r\n4/CdRc+A3pL6OwntM7pUtkKfx1OmujTs2ZE=\r\n=9Cox\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.55093ee1e.0","@material/rtl":"15.0.0-canary.55093ee1e.0","@material/base":"15.0.0-canary.55093ee1e.0","@material/list":"15.0.0-canary.55093ee1e.0","@material/shape":"15.0.0-canary.55093ee1e.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/ripple":"15.0.0-canary.55093ee1e.0","@material/animation":"15.0.0-canary.55093ee1e.0","@material/elevation":"15.0.0-canary.55093ee1e.0","@material/typography":"15.0.0-canary.55093ee1e.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.55093ee1e.0_1680115849256_0.9308725466029033","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/drawer","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.0c53abc81.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b0a5e04a9326934eeb545f916944d348e0f72f3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.0c53abc81.0.tgz","fileCount":47,"integrity":"sha512-gWvUBsLg8bD7V5ZpuSvyaUX+UXf55xCVKnXwOaEoHniqnFvMhv+zi8vJYiFCUk/yu8bjA9/1D9GS7qGaXMUO1A==","signatures":[{"sig":"MEYCIQChDbq9md2IWMMlpZX3cNeYTFUAf0UXf8HdCmPg9vCIiwIhAKeST5BBqG4tEwhJEI0oAVS29rBzlwkwkzhDxMN7VJBF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3UZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBug//RUmISOEnFIUNC44Q8Vxz7ccLnIjlIwP8fqB60TYxPkFas1OY\r\nF5nntAWVus+KfzKBMd+FNb8VQgfNrLsl9xZ9VwPJ2UbB+DlyYtx49+DGxojX\r\nULPiUX8nk2MJvjKqszaWYH6TW54YsGlMply9wLYFOuqrgssnu64GiGO1Y9Ma\r\nAQyU7QSO4JnXEfGwA+eH6lmo17lHJuDHabNxRr8k32n5w/5Aj65/764iNxDO\r\n/jh6YSya4J1APa3i+o4TbdLSkBK268XgiiDWzsIqoI/GGeRqGpfT2NxM8BWS\r\nJX/gCUztrphIqHi4osnGBwOOuMMot9Q+nOXghAm+CLzcww9XPMdTbA4v2+JR\r\nYAre74XsQF/maLDgWjCo56qpbX35XAMBRrDd9/Rn7QXMbVaysTmm1Po3J1Nl\r\nF6c7LC/oCz9xIE6HE1G7xBVzLLRN3l1/IkJ70YQeqIsGD2LbT7IckRP9/lmu\r\nNuuubUnMhIQExwySNRH6WJescBK7SU2icjK5UR2nGVVUNlAAdE3pPPHYIpuh\r\nG5oEU/Y5LOmogOpQgs5wt6O/4YJVdi7M59w93crYJmCwEdHmBaKtKwUPUoOm\r\nM5UkvCEem0cP33tL+/OmtG0vtLgrBkBJDnFGtWaBgPm+dLrs0NcglRxNLxrn\r\nBnsSW5goXAljNvdAVklZiSt3AkTTTBpgjpo=\r\n=USc8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c53abc81.0","@material/rtl":"15.0.0-canary.0c53abc81.0","@material/base":"15.0.0-canary.0c53abc81.0","@material/list":"15.0.0-canary.0c53abc81.0","@material/shape":"15.0.0-canary.0c53abc81.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/ripple":"15.0.0-canary.0c53abc81.0","@material/animation":"15.0.0-canary.0c53abc81.0","@material/elevation":"15.0.0-canary.0c53abc81.0","@material/typography":"15.0.0-canary.0c53abc81.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.0c53abc81.0_1680831769526_0.4281613978012837","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/drawer","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.51311e69e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e98c3e678ea97a70f5045fa9bd759f81ffe553dd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.51311e69e.0.tgz","fileCount":47,"integrity":"sha512-Jj9FKgEY939cWtwBt9dKUYtgySI92440wRjWmvM1gsGXJyHb6+CUBGqFYQU7KXbGmS3rPQd7zb3eJjNDGXhYQw==","signatures":[{"sig":"MEYCIQCLnh4PXN7dgv7pVUI0NQlMGHMKl4ARYOCGhGI5hrS3QgIhAPfSkqJN8erhH7s+rO//K1NBGmdZQMLOrBOyp1FS0kHQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFxfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoLRAAmvnHJbgPBgdcAQI5hMHrDy6E5n3nBr7B9jTzgOHh6LFZzFES\r\nLeq3L2qi6mt8dZnVZeWR982L7I9N5SWpu06S/lAzMs3aKN3OVg76wll5hwqu\r\nlQlLR3t81yDdn2a+L12Qb6WF+cS0l4svV6IxJF/nuWYXyfDVWgTCZBGV9HIa\r\n539wGTtXkgROiZCgz28T5Kv7j+JXIiIw80a7EorT9Y/qEMYzQ8paJNmqkwt+\r\nLNtEbg+8gWaMhLLcj2oPt1aeLLBzOW5CndkYpSXddeVUidb5xKGc5HHkR4fA\r\n759DVe6zJetdIfXCbuiLknJ66rgaZZ5Nj+3DY7voqw0vpy6LaGLYTIh5jnvT\r\n+YayBqERJ4mkou/0nlVFU+bNv1namXi87q93Ir3deD7QjtB+L1yxMjN2iSxo\r\nz6AKEbf+eN2jJ5o7MEmfxy7IMIfCmMhAMgnVmfjRuyjRE/sR2lrmfSlTdOXy\r\n7mIJggEb5Xt6tUzovqlQPYM8WWaTc1Z13pwL8mSHBZdbvRDvKmcbH8l3k33R\r\nVn8w7750QL3qs0TqQLD1mPWRh/ncAlmpuL8NT7UAjIYGhztq9HnmSzmgOSql\r\nq1dtqrAN8spr0rPSh5Qliw0ptVS/eQiO7AQJIKIYdsctiMqEgdqn9r0SiylP\r\njnyqKkXXs/triksGeujnrTumav15ge9NET8=\r\n=h8Sc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51311e69e.0","@material/rtl":"15.0.0-canary.51311e69e.0","@material/base":"15.0.0-canary.51311e69e.0","@material/list":"15.0.0-canary.51311e69e.0","@material/shape":"15.0.0-canary.51311e69e.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/ripple":"15.0.0-canary.51311e69e.0","@material/animation":"15.0.0-canary.51311e69e.0","@material/elevation":"15.0.0-canary.51311e69e.0","@material/typography":"15.0.0-canary.51311e69e.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.51311e69e.0_1680890975144_0.5253883436109743","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/drawer","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.113b1a38e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86792913b2b8b1a150501e0fcfb5da8ea3c2e66c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.113b1a38e.0.tgz","fileCount":47,"integrity":"sha512-u1HrGar8FKrU1TqsoeAVU5hmqzU1YiJQqLo2IN+ngW/8hyRp/IMYnkHIW98DyslxlvQKFj/0Nl9eD7QAYYUJkA==","signatures":[{"sig":"MEUCIQDhn99rMKRNBunIFyvzhF6iLejWA9xChKJJXDfWImNgPQIgL/i4TTzgsnyh/pgJXDWsSrgucZURBwW6+zirE22E7JY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIXSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzNw//buItc93UsTUveFI6p27+M2lOOaOLhjRy7oqspNkyWQzxcgCM\r\nYeAUiNQ/BWjwYumWbv9SE8SqDBsyvkAHR75tvn+X6ejWMx4MsmiTCEoEqAoN\r\nboxqYJdqbsmUB1uOLK/yXzs+UlOTBkBDWjZpRDv0DRNXhPZnRch32QUjoGwi\r\nM4qHluTivLBAw5p1bqS+k+LvoIP0qV/VKfmQzPD/jsBrP5BC8YUj1QpJFc7E\r\nEKH0SoUZrYHH/e57c7CjeLwT8EqGMb1VAMySKwIrfLsyC/Fy4nV0evyRD22L\r\nFiA0SY7Ea7msQJiKPm4dgyVzEHKAYNqlnDjyhesi6e/rtd+fxp56vF66kP03\r\n3hwaEO2h2Zg6TAe+IOYIZWZCmGfoJjbLr4J6ueXviSTyhPH1BTZvSA9ZkhTQ\r\neJqtLhPeLw4m4ngzDBc4J/XA0dYhnKfTmkmtUEorzgUQtSrxdsWmuo4wE7qK\r\nKB51TrPTElCzLIdJd7R2yLrCFjNIAcaCtEIZyj4NK/P/vRSzAtAZ/bBYLYzM\r\nFjT2CLp/ulvRUGEuXd5yqBcWxiLAlxdEfmSZYTOkQRH5cK0jpveU9Ccdkvfx\r\n6tjmpQyVYFVOb1VRQUxPiNKoD4YfWeCWwAzgVkDwZXxZIL0HgsByt6FBVq+e\r\ngJ3JmtZ8RYKj2Ey7vZcG2MQiTddJf0YUy90=\r\n=3+7E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.113b1a38e.0","@material/rtl":"15.0.0-canary.113b1a38e.0","@material/base":"15.0.0-canary.113b1a38e.0","@material/list":"15.0.0-canary.113b1a38e.0","@material/shape":"15.0.0-canary.113b1a38e.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/ripple":"15.0.0-canary.113b1a38e.0","@material/animation":"15.0.0-canary.113b1a38e.0","@material/elevation":"15.0.0-canary.113b1a38e.0","@material/typography":"15.0.0-canary.113b1a38e.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.113b1a38e.0_1681163729807_0.7680232134294698","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/drawer","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ea2191426.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9074a9ea7a5a30cb4011f57f1668bbb753418c43","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ea2191426.0.tgz","fileCount":47,"integrity":"sha512-W90YdK8lUQD0OHOO+aqJMOaaayfo0JAAW7st2gLUNd0Ag8LL9I/17iYDbYIGtXcdm7bEhnpVVXsI6ObRrlwIhw==","signatures":[{"sig":"MEUCIQDnDEVF1p01hxZrDswpHnQFPwwVqa3mb0buNUc6LqHgtQIgX8d6ipwx8aXEmAmpUChM9SiygjqLt4dw/rfuUQF8hWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdfHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoy3hAAnfKu9S4SbXdzDaF5vNGmeyN1sAQ3KMzzAelUnPT401kjrNs3\r\nHvKkr1gNlvKw8S+diIWfUH5LZqMpkzhFOMK1CokZvN2kQnDcBZsWIa+6zTbk\r\ncNazDemEh1eTO/n7QE9+64kQzCi8W5tkqL191cPbc3sN+nbZ/OK8zKBAerN8\r\n4BWBVYRmt6ldpeCoSGl0wNE9uJTFYdzFqLV9UHnr3r+9EUZY2wDQ86zrO/cs\r\nKcDs3lKZK3+euHY2Zh3eeVSUOwe1PzfESvcUHjbpT81cDuqFHcFAU+1m24wE\r\njwoLPgPCa+SKoZ/dpOt7KrLmZTAyqXXgkTOqA0EzKJaDt7TAljqiLvZWjoPg\r\n5923Fjq9ymAiVsqvzMCP8oYcB4vAUSREgRDAAy96L7cUqdqZDyXCpvs/8E30\r\n0NqbAH2Ti0PNBBJf9KTg4vAi/L9o1hWZLyYHkWtRFF5IyMLrK7Ws/vBhLs9e\r\n/4LJb7+2FTbwIbEfYQ1AhzngdV45vCF4cot5WRBeyYaXrPMdQerNMfEnoOWO\r\nDRD0CID+eGm5Hy6z0BEtTVou2kbhQtfbLPkDCMwbpjnUvm48FyWZbP7qP5UO\r\nV+noO56cgICMO4zQDMCxkFUj4CF2xZ1pvXn47GOen91Mk5gInRp6qOIHUhF2\r\nGWB2m0P8zDl1q7WlpI8u/dny8lyd8deJdMg=\r\n=QxFr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ea2191426.0","@material/rtl":"15.0.0-canary.ea2191426.0","@material/base":"15.0.0-canary.ea2191426.0","@material/list":"15.0.0-canary.ea2191426.0","@material/shape":"15.0.0-canary.ea2191426.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/ripple":"15.0.0-canary.ea2191426.0","@material/animation":"15.0.0-canary.ea2191426.0","@material/elevation":"15.0.0-canary.ea2191426.0","@material/typography":"15.0.0-canary.ea2191426.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ea2191426.0_1681250246792_0.45275436633593147","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/drawer","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.5a5c38538.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d02a540b53c2646d391120f960f4f2485d694fe","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.5a5c38538.0.tgz","fileCount":47,"integrity":"sha512-WAAZjlGsMxcvsj0SByzF2htr9yc8Q8ujRI5ZQbO3uWLs3wbxq1bSili26yrV46Oq6dQQSUY0KImw4jBqCioonA==","signatures":[{"sig":"MEQCIB/EEb1FIpNsPVncjDnxYNQUlz5xugsjk1a0pK/hE4C+AiAIHyjGrzCYjbyjrVXgVwHZNuQaUaRtuIqskJ9BCv+j7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd/iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqs5RAAiovxHuKnwUZ0YwUxqi3Q0hh/UjU7jBQFdF7FBq2Z4w3/zLx3\r\nLvTceSHgHsGurW/LIK9/CwOIL9g6GuT7Z5wRmBWCrMDk5/d+9XclbWxLRF2Z\r\nPAYyKLkNDk5WtT7n98yTnN7uuBx6uNn/qsW30U/4QYbgYCWgsJSr/YBsVnaV\r\naBAg51GI/iviJ6ieuCiNMuVpn4J7lIJXyaSgH2EULBcCdie492k73WayxrxE\r\nvKIwqdQTfJXwgr2K52VRZ0bLKUboLzV809ePvBKBD50F+TW+mTJszWq/rX2m\r\nE+cFOQSZ5q8MqsKAS9T4OS4+DxYmujrz4j+xzMVIbU5TevD4I635UTvJzNSZ\r\nnQ3kKbyq2dyvtMbJ3QVo1qeCSyDd1vubptF23z5tv7duXbLwBBuAwl2VtCQF\r\nCMx7BDkKHVMq+oQoYvI+Ry6D2Das1PvUkTYJj8TTUN35bJjF9hD+3y4h4BVg\r\nQdxTkW71f4PbXoMLt8xHxTxZahg4775A3cjE7AKmUMQedBXLhoic/ADaAPhj\r\nagALe8wC5hue3ith+CGndXJxRhgfOnCkxVUO868Yd8i5e6d3moxWT2UpGZgJ\r\ntQ28C96HtPSB+q3lClHBcrPV+W8WPLshGDNgkePL/NRX7QNU1EGkZLXk2Kvg\r\nT0/Z1AAl7dE0iyMLZsnivtDKTlFRYgPOLlE=\r\n=3Yd9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5a5c38538.0","@material/rtl":"15.0.0-canary.5a5c38538.0","@material/base":"15.0.0-canary.5a5c38538.0","@material/list":"15.0.0-canary.5a5c38538.0","@material/shape":"15.0.0-canary.5a5c38538.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/ripple":"15.0.0-canary.5a5c38538.0","@material/animation":"15.0.0-canary.5a5c38538.0","@material/elevation":"15.0.0-canary.5a5c38538.0","@material/typography":"15.0.0-canary.5a5c38538.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.5a5c38538.0_1681252321720_0.5059804246323689","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/drawer","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.e4b5ea7eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"222e9923d3d024389e3b458d03a11ebccfe2af20","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":47,"integrity":"sha512-3hhLJ4AxoeOt3ghql7it/Fo6hEmBCLrtUAbxm7EfvmZq9Fk2KtdK3iOJ7AMrLiwyviVJ8oxAwPnv3Iw1BWWXAw==","signatures":[{"sig":"MEUCIQCXUCEG+8cGfTp/Qhc3x9yYu+szpzaLjNTrel7iH4PyIwIgMF+wOR4q3pkreGD11i0TAOfw/ukO1sE2B+GztZK5ftg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNef3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFKQ//ds0p+NffxSokXNWkEKVN6UDOSVYzf8uVE5EyAWonw5IvuSyI\r\nInOc8J1Fi7qlccuzOIOvV6VmlpB1U3t1ryeN0S9afr2+QLs8BO7S/LLL3mRX\r\nWuRd3x7F2QypgK+0bxkwkLxr0NOzO99wtCz30KUBs5NHV/CqNtBibQ9gc6O5\r\nBerxLZzlycR9wTkUiimhYRB1LtsJi5NfJ1csyIrlCo8b3CmD0M//tONw4t+d\r\nf+bVKgpBpxiGnHZ3GyhIj3ip2v66nyJA8LceUgi4Hvo1sH+340vRDj7tN9Yd\r\nq44sXNMjxYPx099gPQvraxZ2j2ptKRVBwXMbRBFaE5oHQWje/bneqW1uIVYp\r\nujoyqHDrhOvWmIHJ9MvBh/gp8s79QCxTWBUjYcU8mGGt9Sv4P1OfvPQRQGiI\r\nncAs9LsjbT5c2J9a5qlmHNSuztbBBnFb2U1pqZ/4bPPd3TG3snCdF3VndgRl\r\nqfZ6BHSfd9uVjbXYM7J/CRjfMJGI4IqZEQUGzJzVVwkIPLuFaBKpvXttBzB1\r\nG7EV/F2+fJtugzqvU9i+ofJLsWnn953jkj9/NP4fhYR7+8FLv+fLLqxfiaNH\r\n8JK00VJ6A97hDuSkvr7Wadz76oW0LevyQ9vzZrioboaW+nPV669J+Tm4jIKz\r\nIG+DTQK867eN5QtCrNOdQEkx/ZGXUDTAzMw=\r\n=vBxs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4b5ea7eb.0","@material/rtl":"15.0.0-canary.e4b5ea7eb.0","@material/base":"15.0.0-canary.e4b5ea7eb.0","@material/list":"15.0.0-canary.e4b5ea7eb.0","@material/shape":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/ripple":"15.0.0-canary.e4b5ea7eb.0","@material/animation":"15.0.0-canary.e4b5ea7eb.0","@material/elevation":"15.0.0-canary.e4b5ea7eb.0","@material/typography":"15.0.0-canary.e4b5ea7eb.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.e4b5ea7eb.0_1681254391582_0.2210646020727658","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/drawer","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a094dd9c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f41c4e0a474e7ddd9d3efa981d7fa53127900a2b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a094dd9c1.0.tgz","fileCount":47,"integrity":"sha512-3umhHs1yAJbt3FijLVYcL4uemZPS0/aSuA3ebGWubb6p6cFg4djI5QNvEMbKUqBOFo5lNlxoWJWasOtR4For8w==","signatures":[{"sig":"MEQCID/yWEiGgy8eHuNVcmqQcDziAp1FfH1lEGdGXYyFyXFmAiBXBZEyY7e1mH7KNB0HQ+thFXn/7nwQrZJlfpEIw1U0iQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdc9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmou8w//bGi3KUlgG9iC3inBqKgGWKX9zy9WnfRGOZLxlUWnpjvtmgvK\r\nUqBTvhIZh2/iPSIJqSzPFaPQiGC7zTegGUI8KEOk3sYugcDSLeWQIO1oJxUn\r\nxCIVtcAeweGKfsJVCNhpx7gwYWqyEvKjg8+/zwf0WxfJojb26NB/MYGnNvEE\r\nTcL3z0PLbaxMhIu7FiDUTqRhFFUNgXNiARozLBU3LivjPmxuqhAJRNKRyu/T\r\nWbarW8l6Eg/7JWAjW70EFLeJWNLw986o+RMN6AIHlxEFtN5RcUUfCFeIQYHk\r\nq1Sv8DruAIQLwqAdAyTyDehEtibNaW93oCtxi0qdW2FTkAlSJMA2HSJNWN+f\r\nAwowZdRQrJtWleUbOQZQSFQrzf08kCA7T9F9qNlJr1r9kPm2Lce8l5K7vanT\r\noPa1Sx8UUItBe33nyOuKB8kQU+Ja6iW11TyXBiA12dwq9I9XxjRE3kP7t73C\r\nPaKDh5UQKqQlocVWCoYN7znHldT/2kYZjrusZEu93bxFzofuEL//PaEBpAei\r\n4OoSf6TL374wTB9io1K/ADozf/fjXmI0WYo6plYnuso937E4DF2Wn5jYx5CF\r\nzjRnBwSI/i7e0effs9rA+cZrSgIK74DXhlwGK3hhNxSJEAFGijDPwWV+5xhY\r\nCPPB//0iSQmTw2fVL/JiDG7YmYEZuNDnGkg=\r\n=79uS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a094dd9c1.0","@material/rtl":"15.0.0-canary.a094dd9c1.0","@material/base":"15.0.0-canary.a094dd9c1.0","@material/list":"15.0.0-canary.a094dd9c1.0","@material/shape":"15.0.0-canary.a094dd9c1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/ripple":"15.0.0-canary.a094dd9c1.0","@material/animation":"15.0.0-canary.a094dd9c1.0","@material/elevation":"15.0.0-canary.a094dd9c1.0","@material/typography":"15.0.0-canary.a094dd9c1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a094dd9c1.0_1681512253411_0.5708753075859829","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/drawer","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.f771b091c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5aec71b1ad4d11a351eb474c612d692a9173272","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.f771b091c.0.tgz","fileCount":47,"integrity":"sha512-uDLJN8p4QoIVRqItiAZVPA5hJtHkU2FnPEIrugZMgTeZJCuBCmRmuqc0NbLvb5ELznBg8Kd0h4tDLUAiBmV6dg==","signatures":[{"sig":"MEUCIDf33YhiJxfpUq3m5lOAKDWIHkrGZ/w8LDehkHMbzwtmAiEAkcgCissRdxYndnS9X3ny6nOXAUppqPbcyNWgT0n+kz0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWhqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIxw//SSgTQMTojsK2rvJ9DdeoiwG7Dft30d65+jIBk88vu2AnFIVG\r\ngiGeQmkXD+FuN0n9ibw6iXOTe7y+Dvt10cdFpEjvRbwvxNo83o8ZCvhhsMe2\r\nlmDqdQkaZsGH4qZAYgvCXZRugNOe9pXOKuW6wp318n38E1EK3Y/W5yMfpapw\r\nqk0hx1Eafmf9cjmj+6220drgcD6X61i+0P86UPYa6FaCxZsGa1O67Ou+bIVg\r\nSO7uiC/A05Sa/C+PFfKXi2w4sWe1T6fXlPSneaa3KZH0z8HpXcGJbx/d6UFJ\r\nGj5QVH05ReT7cZCYhnagzncEh9NAqvz3xh+hPqCJmA31Bk6vjNRBN90w+2M7\r\nlOVwp1O/Hoq31NMWlDpkuQNWdIMBxjrPl2yQdbgzWlTOfV6xfAz/AfOfl0tS\r\nI3dDUbuieUoTXebsvnquA3SVG9gjTgP9TMDdh2qh0/lR7GXGdZf5KgTQA52Y\r\n0sHLtUBkdzvrFrCNkui1NxUTx/Xhaca1FdYH30+zMBFaWZYHUl0a65ocb5Y1\r\nItCqTbeQwtS04q8ISfGPne0h4/8Fx6URSLOb3gjG+E3CFd/JwioL9q6K11Dd\r\nsXSQlX1ltVWYqbpcFAL8kiKRw2lBYdDM6lkAgk1uVwQOFbMnXtJJHWljGx42\r\nGpcCaaG8t8oZyZW7groMkEDtZ3uxRCBf7GY=\r\n=aaT9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f771b091c.0","@material/rtl":"15.0.0-canary.f771b091c.0","@material/base":"15.0.0-canary.f771b091c.0","@material/list":"15.0.0-canary.f771b091c.0","@material/shape":"15.0.0-canary.f771b091c.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/ripple":"15.0.0-canary.f771b091c.0","@material/animation":"15.0.0-canary.f771b091c.0","@material/elevation":"15.0.0-canary.f771b091c.0","@material/typography":"15.0.0-canary.f771b091c.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.f771b091c.0_1681746025714_0.6475653591647408","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/drawer","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.79b1b612b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3724bf1d68e3a3edbbb437fae2a5a955a6797c4d","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.79b1b612b.0.tgz","fileCount":47,"integrity":"sha512-jNZaTfYyDwKwmnh/LRgfQ8XTMAi8dwBGfeott4A4FaPwtT/4VIHD+pcNe6AaQo/7UAAOO/X8ej6dndHtnDFtEw==","signatures":[{"sig":"MEYCIQCyOWjrSxd42pnaO/IW63jRQdyOjnILePlladz9XMCFkwIhAP6f2BDidVohd9FYoWo10cbrnwC6bvs3s1clkOce6TFZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHxDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+5A//W4sNPubg7TgP6OQv0vsEJH3fSVHP1UXduKYEwIDrm15fWdqK\r\ncnkYVgkIZu9A5PAGPE0fJivUC0t3jgddFSSI+ZcushWupAVMs01X2BKE1Mbg\r\nBRduEv2Z8buV8M5Am0Zk79BrydL3H+fUL99DA1hWig/Wfk1Uy+KCjNU9HF7v\r\n34ZMfLI8SRix48fk/fbM81QCZ7VJ/g5BdQwEg7+vT//TPVlzk7nXl0iJMdKU\r\nP7lKlwRtR6lZ9n2atCI2AkhkoyUyj2atK7a8D2kyFOIbnZGoAVXCZxWt+Yxp\r\ntUzt/5DDefrLs7fbz40A15Ge0Q2NGLfOUYHZ5fFf+8DHNowqY0mPn6gQngTR\r\nBMRkWBjsQy0551/4s5Xp8AxLIZHLZrdDIGIbzCdpHCt/4LaS1RncV7+sa/q5\r\nLd6dzv/ih3jZhn00Gt2fSf0zC0UPABPKogXl601cnF2Kkiykhg1hQIR3edew\r\nzG8YGeb1esdPdDND0KGxqKbvYa0BV8JJYBUa3YsIGcIjGhufaSy2aBpc+BhP\r\nvGBLWV8jwS3PoYrWN2lN3NQhWGB9BJZA1ge9dUCnq/IkMHks7WcAfRG+2Vnw\r\nNZc6GAbDM30aQcBbSAVCu/kUpPwkkw3zUZEDM4UgB9sfPKYmr0w76l2tfqGD\r\nTVmXiADDu9aGmGYb7Y5NrnIawzxiZvpTC9M=\r\n=AXYk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79b1b612b.0","@material/rtl":"15.0.0-canary.79b1b612b.0","@material/base":"15.0.0-canary.79b1b612b.0","@material/list":"15.0.0-canary.79b1b612b.0","@material/shape":"15.0.0-canary.79b1b612b.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/ripple":"15.0.0-canary.79b1b612b.0","@material/animation":"15.0.0-canary.79b1b612b.0","@material/elevation":"15.0.0-canary.79b1b612b.0","@material/typography":"15.0.0-canary.79b1b612b.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.79b1b612b.0_1681947714764_0.42728484835587777","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/drawer","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.6f50071e5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"223cd7ce66e2b5be8779f7aed9295a0832549366","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.6f50071e5.0.tgz","fileCount":47,"integrity":"sha512-JLEmIEQ8lUtq6dlFV8Zcn3x8gnFldMxqTPslyaR9Lmu8nTTC5baa6He46RIOrS1cISqHlee9pYWWx/+OxxArbw==","signatures":[{"sig":"MEUCIH5yHy5QXInqNHUPYKOfcTDUM9wIuLcJ3wFOftHPxVq/AiEAnF6E+c7OnGuqtdeOOtLFeGaip0Wzne6elQWuRTiAujs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX5IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogOQ//bawkpsW9We8oRCn0zoK/JjKEna1ZNFZ+HaGKfy/zuWY/faiW\r\n8xSoTLGLimMbTNGLJ8AwfS9JkB3+NQZ0byuCWhx5WqJT/zWcdVvd1ko1MCye\r\nJ+LnZ+b9SFKalY0w9eAMnZrlKMxeJ1Fr+JiP/xeg+4CBigdWUgUd1CDix8y1\r\nQn7ajZe73h3bAEXyNB/6uufCqKzoUPOQwcg+dMz1dwdzOLVR6UVg8qrxKlDW\r\nr+9YxJORsHmwSvC7zF050O5DixWyb4RFAGyvmW2NYSkfWBT0pMFZ/hlN0UAl\r\ntv377E/yCdkoiOCBy+wkgoDKbplGuVa7fFrgnzNGGM02ptii+35gBNkE59pQ\r\n0WDY7B6ae0l6F0/SVU3QRgbBuKCi/nNw+5s+PuIn5NES51Q/XFr2Co9uBss4\r\n+y7JlAvSKhkqg1NqFnDEuL7+IONu8DlsCJ0JEPPhQkjzQYpXAnWSHAu9AJ2M\r\n6036CRpzEv1s7bypzk7jqwpjU8+ybnFV5jtxCLPpqS0WWNDXBlQFaniRHk02\r\ncVffzFqXiAvd3nDtc7fH+PJzo3NSKQD1CmBiIItw3CEn1IqAIJhI8gRgVmEi\r\nOjWUvwN54IH8pFBmsrENjqr84q2ysrTOTtPK8Cs4E6XwvtBKdRC/nMHSt8zc\r\nhio7A4H9b9vfIi7VXpHRhLhNA2deJD4R6+E=\r\n=RNoE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6f50071e5.0","@material/rtl":"15.0.0-canary.6f50071e5.0","@material/base":"15.0.0-canary.6f50071e5.0","@material/list":"15.0.0-canary.6f50071e5.0","@material/shape":"15.0.0-canary.6f50071e5.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/ripple":"15.0.0-canary.6f50071e5.0","@material/animation":"15.0.0-canary.6f50071e5.0","@material/elevation":"15.0.0-canary.6f50071e5.0","@material/typography":"15.0.0-canary.6f50071e5.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.6f50071e5.0_1682013767868_0.533893837754138","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/drawer","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ef754381c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"207fc3bf35a6c49a7a3ae07397f4e63c180ce2e5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ef754381c.0.tgz","fileCount":47,"integrity":"sha512-nGbTaE9Wm0UAgVYh17C1LWvKGsL//XEp1eAoSioCgYG8ntHhVsN6t7iLz9czwUf3nhTkQ1nqvpAGIfCLxjIsZw==","signatures":[{"sig":"MEQCIHMO2qul5g5+wPRJvzmBGyKdA1xSQSqS6lJ2Ox0bpND5AiAZVnByIXW87AHveCBWB/X1rqyw26KQGnPK15MvxmR+WQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuwYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplCg//dSGS9rw8gz3heBX+3VU1ufvluaMjyR/XDwPuEgPTcyMS1hm0\r\nyZS5r5ZyYttvwW4/s5leXcIdG7+HEuxBs7lzScZBBZst4L36THRDIDIkFAk8\r\nZSOyCrGOw+8eMGBAo5H86/OfXhixI9d/qOFmiObeF1+ZRHdANR3LMZjCbUVy\r\nUxkAFiihu8yPy1lCtKXALpXan5W1IPC2bjUyBoM5Km02icxVAkvuwRgvIwlD\r\nyxxRv9IJnz4/wz1vowwSuWatLjqjHKGk2BUfvNYwdXEp45Rjfzhk4L/sKhqt\r\nxVNL3pI1nLmz7w4HyB2m8xLjOP889oGhp46NAeH7I2NlNIX6uPB5K1HG6KMP\r\nSl6WOEOsvXg/ul5k40LESOjIvZfisD4DNU/QL1hVccVTyA7iAVeI3BARLmcg\r\n9Ic4T/4r0r4vj8CNzfCMoDptfFzAvpIEoH3S9c3RY4UM165wu6N/w5RQJM/C\r\nm0hdnORwP0jVDtaPZ0vTqxo4BBSJIDzNR9yUZBAfu4u7/JrZOx1+DE/IuHHP\r\nMVSfqF6eFmtbufJBQ3bTHRYMWE+XBj9nvxyvSyo9w0kGs3WkBGnV0hSNtbXM\r\nkLsZ9mlNFBIwYd+Zi/r9gHJxmgyIWbEdiXVSMoV+UvFnWnapEXuRx2ohYzTY\r\ntRC/PdEULDatX5ZgkfUnDY74lKjRO51v+2Q=\r\n=O9S8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef754381c.0","@material/rtl":"15.0.0-canary.ef754381c.0","@material/base":"15.0.0-canary.ef754381c.0","@material/list":"15.0.0-canary.ef754381c.0","@material/shape":"15.0.0-canary.ef754381c.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/ripple":"15.0.0-canary.ef754381c.0","@material/animation":"15.0.0-canary.ef754381c.0","@material/elevation":"15.0.0-canary.ef754381c.0","@material/typography":"15.0.0-canary.ef754381c.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ef754381c.0_1682369559668_0.1802180094970265","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/drawer","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.69ebf61ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f623e87e416ba644ff8acc3fcdb18ae6fcd6a4f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.69ebf61ea.0.tgz","fileCount":47,"integrity":"sha512-l39RZLUY7+ZrvS5QrjH8fU8V+RILYyeP2pqVl6byCk2pSuC4SiKAQHZfoPsXr+rxD/xICHh7yQzMzcYRwyCIpQ==","signatures":[{"sig":"MEQCICs7c3L4vHQGFhtU0Qbrl4SeSrfPt8xo/Bq7yVh8+Y1NAiAk4rRwutS5dgqD3H+gqJ7W+44D1lWLxehY/6mUy7CTsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq+KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9Rg/+I3o5qgz7mfUC7X2UxOBIh45ReHK2CJ1aefXAeymw5cAauTou\r\nETtTaSYyyaCFvYTrp2ngrVHSadNtJIVOZ90R2okwxiswD//TOZ9YxpOr89+O\r\n4Y4qLT4Kb97LvJjsJxS4wxjznK0Mv4FWm4vsdWLkkgyoCd4HjBrSYRJx5h+c\r\nD2wlaB9+JMQO+5anAVQXXVOLP8VqERr3JkPvOZ+96fNGGqhM7fZungXLotC9\r\nIe2AnI0z11/8vaKMFDJypGMKX6KfOSiMTuPuTG09NKtkmjUW0EbQspBIVeXt\r\nohe4+mNdUDM+i/Vgdc/LqDp7B+TmSjeWRlNJIrRuTCuLwXC00MipzbGdeXpg\r\njSucoZCULGAs5RNGQVHP3FqdTo/8CuJlwopcg/8gwJDZiI/4NtWO/kLiFHe8\r\n/m9uiSmbR3DwoJfhMimJktIYuNwRVTZC6+dJjOJI/RY/rWS3aIh7ULaBmBms\r\n+nLXWgeRDYClbuSGKVMbhchg5/IqhuoEtM3DyEwBM+/+6YSiLkIi/0GYDvFb\r\nyClEdrJXs/AsYHqlQve4dWGjP7vphqJdkR7n7SFEnVI6SxsRrS8sr/r3u0QK\r\nB9C1hNZxi0jWuCQeoPEA9c061oWJPSgBQsngpegp9zhe1xEGxni2kaui7RK/\r\nGLuP8wdMXVftpeUjfIZ/q2YQpD2NHAOMWs4=\r\n=TvtT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69ebf61ea.0","@material/rtl":"15.0.0-canary.69ebf61ea.0","@material/base":"15.0.0-canary.69ebf61ea.0","@material/list":"15.0.0-canary.69ebf61ea.0","@material/shape":"15.0.0-canary.69ebf61ea.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/ripple":"15.0.0-canary.69ebf61ea.0","@material/animation":"15.0.0-canary.69ebf61ea.0","@material/elevation":"15.0.0-canary.69ebf61ea.0","@material/typography":"15.0.0-canary.69ebf61ea.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.69ebf61ea.0_1682616201836_0.6064776208652527","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/drawer","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b90be86de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72c3a1b3d67715027bf3318cdd99fcc8e6d51fdd","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b90be86de.0.tgz","fileCount":47,"integrity":"sha512-p2v9CkMkvJpQMDyc2OiGvTKh6P68alyfmpcveUREVltjXJDCsJ9+Wt7Syb+pZnQVv7MvjG0l9Ijknp8rR3wkBA==","signatures":[{"sig":"MEUCIGHL32vJR7gPZ6xh8wTLGmxs8RLSWsmAbgS5y/1Ne3RLAiEAlWQ/x7oSfQS9o8LAEP4JbwIbBP2pA/4cjV1IxO6IqeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGN8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMYw/+NZC7Ca51YbveFqC5ZBht3jhqVY97YPG2nGeYUIQoz+NfcVP3\r\npEY1XqmPDeg5QtrFAHB1rmUDUOXCEaw2g+UfVuWrtIhAsl6VuEGvrHFNtVrl\r\nU50UJQcsDertksBxAOMByCFVMgqyYKNTfT2xR+Qv36Lz1m7YhTAV00Wqt6la\r\nuwISswiPEHxuR/0i3S4RJ4uNr1dKb/xO9uAqstdkR8HSKPvX8UwyZf42ZgkI\r\n5RIxsWgukoY7HfZO7JpITV5FQ9peASyoVbVarP8Pathg1TB1AoU882MUN0wQ\r\n3jYJ/ETsNchKxKdQs4dgPl7DlQK20gch4uMBWL0R1Len/KPENeoQAnBXR0ia\r\nV5kOZfqj1HV9WPrTK4i+KXOF8e3JCvNEeolSn3HcZ9ZZvQEVM77/o6vtDpMx\r\n0U8Q8IQa3ybX0jCSPU9W6uPkV2D9pUbEzQLS6G9VhLVsTOA4tIf+UYAD6KuS\r\n0hhQgICEJBbSnSnC2ypfqH0Fzg1LYJtqbBU0E+1U13m/6rzm09MxRwsdsWrZ\r\nhzXMeJ0PmiqJMyw2mMFktHa7gyPjG3gL+7krN6Nhfgj3UCK/ErutW+sDybh2\r\n8VvLPcOqFc8jQhwnlzU0uu0QdpyAHVWVwkaCtqwJg9wjVOxAfo2CFO+D1p/P\r\nrC5/WprsdFtTmCic97thMhV0qSfQ82p5a9Y=\r\n=IAK4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b90be86de.0","@material/rtl":"15.0.0-canary.b90be86de.0","@material/base":"15.0.0-canary.b90be86de.0","@material/list":"15.0.0-canary.b90be86de.0","@material/shape":"15.0.0-canary.b90be86de.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/ripple":"15.0.0-canary.b90be86de.0","@material/animation":"15.0.0-canary.b90be86de.0","@material/elevation":"15.0.0-canary.b90be86de.0","@material/typography":"15.0.0-canary.b90be86de.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b90be86de.0_1682727804248_0.118928484243914","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/drawer","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.51f9c0c28.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d4a72c66b82a61604fe3677b8311269cbf381a1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.51f9c0c28.0.tgz","fileCount":47,"integrity":"sha512-GXq6jHZHMX/6A0z1YEYkI9809sxC/r7g/uJxF3CWC9/8/d2TRYRATAccnllgsyK06XhrnFPf6DtXhyPr1icOzQ==","signatures":[{"sig":"MEYCIQD9o94h91GIqd8IjkQH8FRKqss85WcOAg4llZJ4cuQrnwIhAObEsBpd/ZQjAYgkZd2k2bRl+jVMYtkLY/4l+U7ak0HF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGXDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJLhAAhu3v71+YU4ptbCBUhsmyPYYdlRtoLKV9WHBfZgYTgIY7XhsM\r\nZjcpfUIUgpS8ha16Gn0UIgkmlyCM3ZTD4ngiM4C5Jhbg52jJhOmNlUAB2Pu/\r\nVIF3fTDPjHKe5TbY+HnqJnpoyk9fwcuBK9Znm1lMLF/3otjhKCPeLsGFazpq\r\nQF89H31QTbzMemTtK0dBt5AXkBvZ1+TbPZa/NUD6yscrI9cMUmK+QqcUfITF\r\n517DOLP2fpqbiVg391pmmo240uBu2qlkQVBHgPStq2HX/OlLp1sOmkg0QGA4\r\ni7R+j/ANInFemmcQEbN6BTDO7LzP3V9m/exL5l9ckNm6tEDEYwRuAJ4VTZsG\r\nH7VJ9LKYl5IPzFugLgwfYEykZ9gmQi9y87gLDHjxu1Ng/BRpX3UKvirzsbV7\r\n8ExxM8Ikf6cAvUjm3z8eVlPIRAlo3dRWGy1cnvd2yPLlPziodXtuvu+z58QT\r\nDI7JdcMe7gpcZ/Ls+DtJKOI42DWyuHydbWSAyIsuQK3TG5RFKIqWka6tvHPY\r\nI+Q4hGtlK7dnHkKdZsO8sg6Cj1vA5ozLZrqUs+FEWKaGcSwBfyvv8cgQ1MuJ\r\nrkZGOPhPeSlaZ88pbvIbYtC8yTg+zeUaSjXZHWI/QVUZ6MCx+nayREjcKk1J\r\noY6ZBctBYhxRtJ+7JPOMNNfD3xQOmw7plRk=\r\n=21hR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51f9c0c28.0","@material/rtl":"15.0.0-canary.51f9c0c28.0","@material/base":"15.0.0-canary.51f9c0c28.0","@material/list":"15.0.0-canary.51f9c0c28.0","@material/shape":"15.0.0-canary.51f9c0c28.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/ripple":"15.0.0-canary.51f9c0c28.0","@material/animation":"15.0.0-canary.51f9c0c28.0","@material/elevation":"15.0.0-canary.51f9c0c28.0","@material/typography":"15.0.0-canary.51f9c0c28.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.51f9c0c28.0_1682728387256_0.7574160409417994","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/drawer","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.4e840d685.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9eaa7c72eede78cfd807ceef79af0ed866f6d107","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.4e840d685.0.tgz","fileCount":47,"integrity":"sha512-TvT60K+vuwdIeTC6Rb2UGEpdfaGJ7zB9ZJbS2LAogKMzhTXIyjtu5GWGePaYFt9itoBfjNcjRMQN25L4xQYFwQ==","signatures":[{"sig":"MEUCIEQgrfUk42GfSUntJpnXrsVk0E3ngv79NVFZK+Kb6d71AiEA577COdupcZv0YAH+A1nZCXsPbdvAAZPfpkHcYePHu1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329571},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4e840d685.0","@material/rtl":"15.0.0-canary.4e840d685.0","@material/base":"15.0.0-canary.4e840d685.0","@material/list":"15.0.0-canary.4e840d685.0","@material/shape":"15.0.0-canary.4e840d685.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/ripple":"15.0.0-canary.4e840d685.0","@material/animation":"15.0.0-canary.4e840d685.0","@material/elevation":"15.0.0-canary.4e840d685.0","@material/typography":"15.0.0-canary.4e840d685.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.4e840d685.0_1683041735015_0.7304763137045269","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/drawer","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.10b8563e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adfe2b28226898f65a85f434b3036a70b54f39d0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.10b8563e4.0.tgz","fileCount":47,"integrity":"sha512-5MkD90GbE6Qm5lBxwME4nkbsTygF9kJskKaBlHu/1O436nkE3r0LP4spjhAnaTXAjJxB0iSqlWAsDBfz+3e74w==","signatures":[{"sig":"MEQCIEauCvKj1yLF43EElBI8eYxNlE3sKWVlri/xkKpgNsRIAiB5SASe5gRJntU8S4e7ErOquJJ2ZCE+4cT+CwqnK+s86A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUaAmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdlQ//YJvgyWd7Jqu0fFO/yD1LbiXCEI8hpQ7Ox6TJRntqiXrulBc7\r\nMpYI7lYE38qScnL35StkBCxVuR5dN0wTWryNPNHaVIvwx3hS2SKWn8thYgwc\r\ngyelIArs9nWgXxH4erKWmYesOAv5hBNe1QEuY41Zk6pmCEoxxSXNiNsRdl78\r\nVfKYXIAp8YX1tFvXmG+jqrYZEj8TiWGPuIeVb2YXpvVy+G6nHExwSR4KAt0w\r\niyiYj79GcpW8Ouc6GXNLEavZgMBfsgAqIKOtkQB5HqI8sS2IU+nw1gjDl7/K\r\nsZ+jX97LRG/zXfAULbiNkUtV5xqLqUP/8iOmH7qsRkwIhNDflhJE72jm6IFu\r\n+unBVKdlLg76qU2BbgdS/w62fqn6fBkubGCzJOykysFP0ieFdMpqQYlV6zIf\r\nHqkB5XdudGPAER6kNMNXxZwLDARlWvi+g3K4MPtTGOpW/8AlwenGKpwtetQG\r\n9FHR17id6mqjdgjxX7tg00jegmxV0hlyqiSSEohTP57g0TV9FpKm8r+OsUCc\r\nqQ9BCTCYucTF64Rq+hRb14qpVXBTCU5jGOq8hSOKixasXWgzm+BZ8ix04tdo\r\nJ1RoBlmnhoa2+viONG4V+hOIMYIMXpNccKiCDFUtm5ABLmOw1gMJ8+yiM+qc\r\nb+T5C1ghUyC5xYqqYz7B3ufUCRnLLBzqUNY=\r\n=Nx93\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10b8563e4.0","@material/rtl":"15.0.0-canary.10b8563e4.0","@material/base":"15.0.0-canary.10b8563e4.0","@material/list":"15.0.0-canary.10b8563e4.0","@material/shape":"15.0.0-canary.10b8563e4.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/ripple":"15.0.0-canary.10b8563e4.0","@material/animation":"15.0.0-canary.10b8563e4.0","@material/elevation":"15.0.0-canary.10b8563e4.0","@material/typography":"15.0.0-canary.10b8563e4.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.10b8563e4.0_1683071013958_0.7836298770773971","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/drawer","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.736b7fda4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ec72a5fad9eaec2a9bf66b161d2ff9a7a018376","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.736b7fda4.0.tgz","fileCount":47,"integrity":"sha512-bgO7aUMiXjYh3Zpjsa1xBecaDQiGwC+v2gQ2Ku19g7rSw5ev4yhMW+WsKYe10W8egor341qkFJIaEHNVXwoBAA==","signatures":[{"sig":"MEUCIA3OyHyKPPWv+efDwG3djhaH+c8OOAAzTq7sJi/aroiHAiEAzxfn0zhvvSJHth3/beke2GHGiuktrQRE2lbEeZlaEgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnmbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEcg/+KIemxBwTd/CMG2Bu/tMbqzNI2ddgi8wSqWeYmiHQbfl4PW+P\r\nXg7xMXt7Fz3ADwwweC4ABNMysq+pXoP0aYA8QyF54ubjI0lLsFLIt4qNgJPy\r\nu0AqTklSWu3QUh4O+rIDYHuqQ5tcdRbVf3F1nk3RDJkhzPRjZu9DWRsEE5EQ\r\n0ThWkdHgQgnw72ucZpD6pTVQD9bdJLEfkVRqd7La1+8EtFc6hBsT4A46LvFK\r\nvHk0QZTVuxl14edE4yKPsXeGk2BQEaVEYSKkfTUWgbkMgnWVYLujxdXM2dK6\r\nJE7O9yCASfHAE4L0ua3OzttDnaT3DysThEGko8R8xVZqbu1v0aua+Oo9us0N\r\nXCzqNaEP8kgOmWBPFejCOWc+VJYMcLdlAwcD1uBAMNAynOSNyFiJdkLJjsQ5\r\ne1QBzhZMgIQhJ8InSkBMkbmc6swCZjFW2mJVlU6BNHI3Z5teiiCx0sPNtgR+\r\nCgUIt+P7mOQR+Ax0LJDidRtFLlr8FQKqWWb0txDz72xI6/+Zz5cJTzPFZAyp\r\ny+PR3vXMRWnU2Yn5ZbCMDZJ66qt5lztL9vS8CHabD/dYAQARTS8GNh45EAcQ\r\nuag64YkAKKDMC+QfhVpdCHlT7ziwRl+BBs8/+TaF19Vy8maXghM4h/hd7qpE\r\nPnFheoyLFBh/CJBEsSM4NSgfQsCDB/mpVKg=\r\n=TjOK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.736b7fda4.0","@material/rtl":"15.0.0-canary.736b7fda4.0","@material/base":"15.0.0-canary.736b7fda4.0","@material/list":"15.0.0-canary.736b7fda4.0","@material/shape":"15.0.0-canary.736b7fda4.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/ripple":"15.0.0-canary.736b7fda4.0","@material/animation":"15.0.0-canary.736b7fda4.0","@material/elevation":"15.0.0-canary.736b7fda4.0","@material/typography":"15.0.0-canary.736b7fda4.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.736b7fda4.0_1683126682760_0.35635121497059985","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/drawer","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.0e533c5a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ebfff001ff0d20bac877c0e759013d8b6a14f62","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.0e533c5a1.0.tgz","fileCount":47,"integrity":"sha512-j0KR2zO+3dqIYfuKKPBIQ7WVoN8bQN7+7w/5vnvGeaB9ZvbzsDck9JugBfivMwdE+D481sEb5Os3DlN8p1lLTQ==","signatures":[{"sig":"MEUCIQCryjSpNCkAhuFcxS2TxrOC3xez1jVN/2pBxusW6inAOgIgHknCe+UX4WPMr+qV8pVVckNB+eldn4MoeY9UNGyASFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329571},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e533c5a1.0","@material/rtl":"15.0.0-canary.0e533c5a1.0","@material/base":"15.0.0-canary.0e533c5a1.0","@material/list":"15.0.0-canary.0e533c5a1.0","@material/shape":"15.0.0-canary.0e533c5a1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/ripple":"15.0.0-canary.0e533c5a1.0","@material/animation":"15.0.0-canary.0e533c5a1.0","@material/elevation":"15.0.0-canary.0e533c5a1.0","@material/typography":"15.0.0-canary.0e533c5a1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.0e533c5a1.0_1683305908062_0.0885807683073756","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/drawer","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.5f01c15a2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fa8881836bcc455e66db2e1ba20f119179724d1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.5f01c15a2.0.tgz","fileCount":47,"integrity":"sha512-qo5XO5iKGnf+du/pRFCg0J5fs0Pi1KDA0IhVFeiftxruLCpT1ccdFEfxn+ZkOvvkAiF/omrSUEZltnYA1E2vrQ==","signatures":[{"sig":"MEUCIQDJD2tHjGBNcwkwtRlPe5K94aMQ6N+Pz5V+6DurPpSuoAIgHnIaMwTqW+tbMfhJQjPwQoC8u4QTuY94MvvDhxQk460=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329571},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f01c15a2.0","@material/rtl":"15.0.0-canary.5f01c15a2.0","@material/base":"15.0.0-canary.5f01c15a2.0","@material/list":"15.0.0-canary.5f01c15a2.0","@material/shape":"15.0.0-canary.5f01c15a2.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/ripple":"15.0.0-canary.5f01c15a2.0","@material/animation":"15.0.0-canary.5f01c15a2.0","@material/elevation":"15.0.0-canary.5f01c15a2.0","@material/typography":"15.0.0-canary.5f01c15a2.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.5f01c15a2.0_1683307685411_0.5448540816161318","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/drawer","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.3b5b55e31.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"394da9b00f68268b6c1a2805be639f429b49644b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.3b5b55e31.0.tgz","fileCount":47,"integrity":"sha512-ZwrihhH5M+ioEmnc84st5u2E9x+9bMGPw+yyxglcchtTMA+H87VlcngQgX8qf2fwgEGp2nv6SVXnh9lQya811Q==","signatures":[{"sig":"MEQCIGgkln3mdIjsz6BaEIxnnTlH+jGJ24aD8wwYcJarG+cyAiAcURALwWaQqTrhdmgPdUh+qduwjCz68fXezU0IrBLqig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329571},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3b5b55e31.0","@material/rtl":"15.0.0-canary.3b5b55e31.0","@material/base":"15.0.0-canary.3b5b55e31.0","@material/list":"15.0.0-canary.3b5b55e31.0","@material/shape":"15.0.0-canary.3b5b55e31.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/ripple":"15.0.0-canary.3b5b55e31.0","@material/animation":"15.0.0-canary.3b5b55e31.0","@material/elevation":"15.0.0-canary.3b5b55e31.0","@material/typography":"15.0.0-canary.3b5b55e31.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.3b5b55e31.0_1683312063351_0.872391401803243","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/drawer","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.d0788120f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4a70dd2cbad8b576f2044c5e1c0abed13d852bf","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.d0788120f.0.tgz","fileCount":47,"integrity":"sha512-nIxUblgrLakUp8pWy/R1jjOhDmgnkdVgw7dUw/2rMyi8abQpge9PLSPbn+sKXyJJwuHvlfxgfbPgIf/+BFk3Sw==","signatures":[{"sig":"MEYCIQC77Rij1GXGNLra0qVtDcCYNCj2IyaSW2g0oaQbE1w9HwIhAJmfrMEXElUqUVOMyAvmHt5vcPS6oX13g4/cDmdrleRP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1329571},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d0788120f.0","@material/rtl":"15.0.0-canary.d0788120f.0","@material/base":"15.0.0-canary.d0788120f.0","@material/list":"15.0.0-canary.d0788120f.0","@material/shape":"15.0.0-canary.d0788120f.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/ripple":"15.0.0-canary.d0788120f.0","@material/animation":"15.0.0-canary.d0788120f.0","@material/elevation":"15.0.0-canary.d0788120f.0","@material/typography":"15.0.0-canary.d0788120f.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.d0788120f.0_1683620701595_0.01734353505106223","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/drawer","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.f52358dd0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9596405e79f56c5692a195992c13976b0c2048ee","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.f52358dd0.0.tgz","fileCount":47,"integrity":"sha512-CoQZ2cT42qC44KCdqF9VWiU9ZTz0IDwBl/f7cWixxeJSlfpclP2dvl9fhtqDRj3iI/J46KN0DN1cd7ljc1GQ4A==","signatures":[{"sig":"MEQCICac9jKcWaZjBII6aCmZNjJ+1OGx0mU877QaWL4X3NmwAiAlaTII12xI+uvOGHYhaKensVqnfqLKTjc2qr8JPKGQqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326477},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f52358dd0.0","@material/rtl":"15.0.0-canary.f52358dd0.0","@material/base":"15.0.0-canary.f52358dd0.0","@material/list":"15.0.0-canary.f52358dd0.0","@material/shape":"15.0.0-canary.f52358dd0.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/ripple":"15.0.0-canary.f52358dd0.0","@material/animation":"15.0.0-canary.f52358dd0.0","@material/elevation":"15.0.0-canary.f52358dd0.0","@material/typography":"15.0.0-canary.f52358dd0.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.f52358dd0.0_1683901935232_0.895684182798341","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/drawer","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.576d3d2c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3053ed1a4976fe0ed10c36a3a46e2f103da52174","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.576d3d2c8.0.tgz","fileCount":47,"integrity":"sha512-+y+DaXemENGgouy0qzP8XhcO+n57V40lyzHd5lZ7MaTSy7VcgKUjIoAX/aTGKjbh/jFk+fuQZeCwC8D0oAZz8g==","signatures":[{"sig":"MEYCIQCKW5EYfHVcaJAA2GkkdiVcsLqBXaFSI+8r04MdaZVlygIhAIdarA6KeFEjItLO8jjSBRJmZrfP8Z1co9jFh33GdeDg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.576d3d2c8.0","@material/rtl":"15.0.0-canary.576d3d2c8.0","@material/base":"15.0.0-canary.576d3d2c8.0","@material/list":"15.0.0-canary.576d3d2c8.0","@material/shape":"15.0.0-canary.576d3d2c8.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/ripple":"15.0.0-canary.576d3d2c8.0","@material/animation":"15.0.0-canary.576d3d2c8.0","@material/elevation":"15.0.0-canary.576d3d2c8.0","@material/typography":"15.0.0-canary.576d3d2c8.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.576d3d2c8.0_1684202504820_0.3167609413970651","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/drawer","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.19bb36a46.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b668faa877a9e2a04aba63063b5d335c746e7c7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.19bb36a46.0.tgz","fileCount":47,"integrity":"sha512-1fqsh5ulYkfF0vgNh0Xgo8kVLkaqnSzPM2nxFKAa8pFlrbTjkKLs23VdVmGVgWBAXkbbVEbMExNtv26H3oYsVA==","signatures":[{"sig":"MEYCIQDtxfvRC69nJ3rmf+uSsGQppnLiGUUpr7rUg3OV0cjKHAIhAMqy+4U8P3G+fi7xNfv2k+efvLGr28QJImFLlKGRSrvL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19bb36a46.0","@material/rtl":"15.0.0-canary.19bb36a46.0","@material/base":"15.0.0-canary.19bb36a46.0","@material/list":"15.0.0-canary.19bb36a46.0","@material/shape":"15.0.0-canary.19bb36a46.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/ripple":"15.0.0-canary.19bb36a46.0","@material/animation":"15.0.0-canary.19bb36a46.0","@material/elevation":"15.0.0-canary.19bb36a46.0","@material/typography":"15.0.0-canary.19bb36a46.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.19bb36a46.0_1684266955526_0.467756478221127","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/drawer","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.aa5ac7fe5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5b3a88cb84524d15aeb5870daf09f2f2aa10d29","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":47,"integrity":"sha512-aHRQb7wu0CIn5IFoqbWOS2Xo5g7IxtaBJ8pGNgCdgf8Psp1bDzn786oZOGDhWIggylgWCewv84ox396mEmYgDQ==","signatures":[{"sig":"MEYCIQDj2p525/3w2UrFRLNdnKoGMwgWeKoNHYuBBGukSWGu6QIhANGup29hefONpscCQHk+DbE9kO4ozvxZoknQRjJRwI+b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa5ac7fe5.0","@material/rtl":"15.0.0-canary.aa5ac7fe5.0","@material/base":"15.0.0-canary.aa5ac7fe5.0","@material/list":"15.0.0-canary.aa5ac7fe5.0","@material/shape":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/ripple":"15.0.0-canary.aa5ac7fe5.0","@material/animation":"15.0.0-canary.aa5ac7fe5.0","@material/elevation":"15.0.0-canary.aa5ac7fe5.0","@material/typography":"15.0.0-canary.aa5ac7fe5.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.aa5ac7fe5.0_1684776463325_0.49262627996847974","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/drawer","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.90291f2e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98945fe42780050262826f971b4b7eb4991a4109","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.90291f2e2.0.tgz","fileCount":47,"integrity":"sha512-7MJbjUxqpQG9J52xWGVKRhSI/0/7Uhf7l2P9VI2WFb5Fz0IeUupXlw2k1Ktb97nxSjMe9OazjtVUgzBNwOad/Q==","signatures":[{"sig":"MEUCIQDIkErfwuRzLdIHPRMuZdRF0JURxcwhNzQoloLLUGCQvwIgV3VGmVjCoMVayEgvrPknyIDsrYRADP54nCnPotCG8fs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.90291f2e2.0","@material/rtl":"15.0.0-canary.90291f2e2.0","@material/base":"15.0.0-canary.90291f2e2.0","@material/list":"15.0.0-canary.90291f2e2.0","@material/shape":"15.0.0-canary.90291f2e2.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/ripple":"15.0.0-canary.90291f2e2.0","@material/animation":"15.0.0-canary.90291f2e2.0","@material/elevation":"15.0.0-canary.90291f2e2.0","@material/typography":"15.0.0-canary.90291f2e2.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.90291f2e2.0_1684863890507_0.6369048639248323","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/drawer","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.446734f27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20c67cca07075d979ebc98babaef5a57fc0fc19c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.446734f27.0.tgz","fileCount":47,"integrity":"sha512-m0kBMokv9Xo7Cpse0wM6xL01M7y9GrmIsJeYjTdoZsNahlVUy9cvqA1m7mtENsUiKy1FfJ6ptNvXQEUblsYX4w==","signatures":[{"sig":"MEYCIQC7H92dnjhW1jh/aUwLOTVVDfN7bNpZt2N70MMiYjqCTQIhAIG2BCYevhsQOpoRGP7FCdwmTvoDig554pxOnSs0lBk7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.446734f27.0","@material/rtl":"15.0.0-canary.446734f27.0","@material/base":"15.0.0-canary.446734f27.0","@material/list":"15.0.0-canary.446734f27.0","@material/shape":"15.0.0-canary.446734f27.0","@material/theme":"15.0.0-canary.446734f27.0","@material/ripple":"15.0.0-canary.446734f27.0","@material/animation":"15.0.0-canary.446734f27.0","@material/elevation":"15.0.0-canary.446734f27.0","@material/typography":"15.0.0-canary.446734f27.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.446734f27.0_1685483396478_0.3155372418941982","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/drawer","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.19de312d8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2693df747199ecda3c2328fb9330c3bbf83a67f7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.19de312d8.0.tgz","fileCount":47,"integrity":"sha512-X0QejWaqBZFflrudclcNAZdwoO9Q/WGoObxXuEUbKrC8oxVC/D7Sru5QUKStE/E8UkmaFbsfjkWkI1fGqsYdQg==","signatures":[{"sig":"MEUCIHEip0SfsEFcBQVbRWdC3b79dqeXhF77b/vOVsKF6VBLAiEAoNC6hs1XogD4sujjLTW10nFf/Lz80ixTJPez1axURck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19de312d8.0","@material/rtl":"15.0.0-canary.19de312d8.0","@material/base":"15.0.0-canary.19de312d8.0","@material/list":"15.0.0-canary.19de312d8.0","@material/shape":"15.0.0-canary.19de312d8.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/ripple":"15.0.0-canary.19de312d8.0","@material/animation":"15.0.0-canary.19de312d8.0","@material/elevation":"15.0.0-canary.19de312d8.0","@material/typography":"15.0.0-canary.19de312d8.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.19de312d8.0_1686072015319_0.3674778192246837","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/drawer","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.6081d829b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"238ce537224d444dcc4cd010a57d9aeea0c51ce2","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.6081d829b.0.tgz","fileCount":47,"integrity":"sha512-Tf3HA0U1AtgjgmFkd2b8uaUbH8/AJOVM6vTkfPmSFCFTCul6y4ROr38HiHFN59FtoagTAxGUiO2lCa8fhYWhHA==","signatures":[{"sig":"MEUCIQD7pwEO4y3Gf85gwymuZTmz5DjHE3c1etS6LbzD+WcUHgIgXjNJuNdSBW0y0t2/7uinuPK06M4gll9qm+72osQVWio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6081d829b.0","@material/rtl":"15.0.0-canary.6081d829b.0","@material/base":"15.0.0-canary.6081d829b.0","@material/list":"15.0.0-canary.6081d829b.0","@material/shape":"15.0.0-canary.6081d829b.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/ripple":"15.0.0-canary.6081d829b.0","@material/animation":"15.0.0-canary.6081d829b.0","@material/elevation":"15.0.0-canary.6081d829b.0","@material/typography":"15.0.0-canary.6081d829b.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.6081d829b.0_1686100546703_0.6427136930094188","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/drawer","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b26c34a68.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88873c49e7403092566f7a212a096e9561ac6923","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b26c34a68.0.tgz","fileCount":47,"integrity":"sha512-q/zfuyBOIgmKiYln7a/f8scTzV65qgCxyBldPC/XOtUbAXgLR4+HVXPLSfWbtRpaKat+26J8OKVXQ/7+WrJ0bw==","signatures":[{"sig":"MEUCIEbU/m0TJvQk5pziA4gn2tJgeEgA1U1OMIkeeRFW1N2MAiEAtzf31+6o5QtyXpOIuzK7W/egrBLYx1IDH+HgqzT9HVs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b26c34a68.0","@material/rtl":"15.0.0-canary.b26c34a68.0","@material/base":"15.0.0-canary.b26c34a68.0","@material/list":"15.0.0-canary.b26c34a68.0","@material/shape":"15.0.0-canary.b26c34a68.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/ripple":"15.0.0-canary.b26c34a68.0","@material/animation":"15.0.0-canary.b26c34a68.0","@material/elevation":"15.0.0-canary.b26c34a68.0","@material/typography":"15.0.0-canary.b26c34a68.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b26c34a68.0_1686169220836_0.37646777827626177","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/drawer","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.4fe911371.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b7d70d5e0f6b2860d891331ebc9b7a05548ccf4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.4fe911371.0.tgz","fileCount":47,"integrity":"sha512-6LH8kVeqc/YQbtzZXz5drfhWfbaIbydRDB2nU9tdYjKoTXPPDFglzMn95vr00/gPk4NRyznsJT1IHb+69Vvftw==","signatures":[{"sig":"MEQCIGdvPyz4/hMwtzt6SaUp5r0N7bRwr2qeq+AalRtQv/OyAiBns8JmscR0+iNqFH+4BjRvzwLaCaSFvjtR410YT/07XQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe911371.0","@material/rtl":"15.0.0-canary.4fe911371.0","@material/base":"15.0.0-canary.4fe911371.0","@material/list":"15.0.0-canary.4fe911371.0","@material/shape":"15.0.0-canary.4fe911371.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/ripple":"15.0.0-canary.4fe911371.0","@material/animation":"15.0.0-canary.4fe911371.0","@material/elevation":"15.0.0-canary.4fe911371.0","@material/typography":"15.0.0-canary.4fe911371.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.4fe911371.0_1686179272837_0.17372359538045679","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/drawer","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a9ff9866f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94366402d105a84c5f08591fddc311cb1d366d5c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a9ff9866f.0.tgz","fileCount":47,"integrity":"sha512-sxy6qAMn1F1TPn3VGmeGsgjv5yQa1WzJVkFWBz38DerTKkx8TFQL+etokbS31UGKuqlMbZF9mtHBQ/QqR1HSTw==","signatures":[{"sig":"MEUCIQC2aIOrf2X8Wc7m+aqTpWzJS8ZDuakHOtdq1e8BAmnj0AIgJ9ry6sG5QKVxx4mpJSEGL98Daz3wlq0YDSvPcQwr8fM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a9ff9866f.0","@material/rtl":"15.0.0-canary.a9ff9866f.0","@material/base":"15.0.0-canary.a9ff9866f.0","@material/list":"15.0.0-canary.a9ff9866f.0","@material/shape":"15.0.0-canary.a9ff9866f.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/ripple":"15.0.0-canary.a9ff9866f.0","@material/animation":"15.0.0-canary.a9ff9866f.0","@material/elevation":"15.0.0-canary.a9ff9866f.0","@material/typography":"15.0.0-canary.a9ff9866f.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a9ff9866f.0_1686656401284_0.798216566553337","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/drawer","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b994146f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a33752e418e9e9e2b3169aaf08638bb58279c66","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b994146f6.0.tgz","fileCount":47,"integrity":"sha512-Kbuf32V0eX69amvCVbAjNSabNDerZWyG8ip466EfQHRh0OUZwvsbhLp9FZOB7AyR+/bQiHf3mVLcombOdmdkcQ==","signatures":[{"sig":"MEQCIGw+iJ9EVNvCl6L+S559Kth72x/k1MWhqQCSa8qfJsMBAiA82cUFoI9bwoY+wmEDMxA/CWhJB1EHxeQfl4SC0kA/Iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b994146f6.0","@material/rtl":"15.0.0-canary.b994146f6.0","@material/base":"15.0.0-canary.b994146f6.0","@material/list":"15.0.0-canary.b994146f6.0","@material/shape":"15.0.0-canary.b994146f6.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/ripple":"15.0.0-canary.b994146f6.0","@material/animation":"15.0.0-canary.b994146f6.0","@material/elevation":"15.0.0-canary.b994146f6.0","@material/typography":"15.0.0-canary.b994146f6.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b994146f6.0_1686776735997_0.8088904268211101","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/drawer","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.1fb4b1a06.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ebd87cf35271d4e1401d4c62c0f912f2dbb5a69","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":47,"integrity":"sha512-Et4Ef7JvgYVNNAtM0a3Y+5HtE72Q5OS/oniyPygmPY3tJ6+fXYxjqMEzLjD6wmd+yXidYFNulTcKP9dDx04Jsw==","signatures":[{"sig":"MEQCIBXZgtMG5OffkIH9ybC6e9uQhadGsVxj2OP8Eoad7GpxAiB/dlxtaJaq6sUimUOv2EVy6czCtrOtvtP23M6GOna2BA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1fb4b1a06.0","@material/rtl":"15.0.0-canary.1fb4b1a06.0","@material/base":"15.0.0-canary.1fb4b1a06.0","@material/list":"15.0.0-canary.1fb4b1a06.0","@material/shape":"15.0.0-canary.1fb4b1a06.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/ripple":"15.0.0-canary.1fb4b1a06.0","@material/animation":"15.0.0-canary.1fb4b1a06.0","@material/elevation":"15.0.0-canary.1fb4b1a06.0","@material/typography":"15.0.0-canary.1fb4b1a06.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.1fb4b1a06.0_1687892348083_0.9588495066285505","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/drawer","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.c64a2776e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ddd66e7c8a07ad10cab299ddd66f7e5f075a43e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.c64a2776e.0.tgz","fileCount":47,"integrity":"sha512-BJtILnSh+lwI34yegnNbuHkWxdFgtnHgrzqP/Bb7MPjXFsHeXsFTALPxM/+y6hsQ109esBUhpvgF6yARgLZrrA==","signatures":[{"sig":"MEQCICdnzJIQnTdNstMVHpSQ5HUIjHkM3jj/4uAR74ESIWZHAiBbriTa8Da1k28yYSTriIthM6/2EGr73GbqJng0eFgMKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c64a2776e.0","@material/rtl":"15.0.0-canary.c64a2776e.0","@material/base":"15.0.0-canary.c64a2776e.0","@material/list":"15.0.0-canary.c64a2776e.0","@material/shape":"15.0.0-canary.c64a2776e.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/ripple":"15.0.0-canary.c64a2776e.0","@material/animation":"15.0.0-canary.c64a2776e.0","@material/elevation":"15.0.0-canary.c64a2776e.0","@material/typography":"15.0.0-canary.c64a2776e.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.c64a2776e.0_1687897113324_0.015836217642291928","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/drawer","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.b05d9eb7c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd3e8b21cc2f874ed7acbca4d2a7f480b5984162","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":47,"integrity":"sha512-xmSc7S++R+bPT8EeYO+n/TQCNXxZY+j4lYkR9GdvR4/Fq+PmCYu/eIdgcTws6rkyE9N+QfLgcU1nqsNjzXF8sg==","signatures":[{"sig":"MEYCIQCKLZkHRL1suLHoGBEi0MwWKSY1Jfb+568shN5oyYLoCAIhANzNvP+1L4dgLOYcROo0vcLehaPs8q2dtOv7STXpI/J3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b05d9eb7c.0","@material/rtl":"15.0.0-canary.b05d9eb7c.0","@material/base":"15.0.0-canary.b05d9eb7c.0","@material/list":"15.0.0-canary.b05d9eb7c.0","@material/shape":"15.0.0-canary.b05d9eb7c.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/ripple":"15.0.0-canary.b05d9eb7c.0","@material/animation":"15.0.0-canary.b05d9eb7c.0","@material/elevation":"15.0.0-canary.b05d9eb7c.0","@material/typography":"15.0.0-canary.b05d9eb7c.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.b05d9eb7c.0_1688055938136_0.7253636472800338","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/drawer","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.2a9697dc5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d33811725c67bc93d7e370c465dc63e1b4944992","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.2a9697dc5.0.tgz","fileCount":47,"integrity":"sha512-8pwta9OEu1Z0BzTKlgpw5eh0AQr1N3bminOLK4yHlya6cuiszdhvsJqtVbv9JmIWXI78E0uGRyragGW6Fwjnww==","signatures":[{"sig":"MEQCIE4mYpG31tnywh9hiuS/Gjq+llhMyE2PD0ms06wai6AvAiAulV97B9/sFGLlwk2CmWCRynT0ZagBPvl1id31GelWuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a9697dc5.0","@material/rtl":"15.0.0-canary.2a9697dc5.0","@material/base":"15.0.0-canary.2a9697dc5.0","@material/list":"15.0.0-canary.2a9697dc5.0","@material/shape":"15.0.0-canary.2a9697dc5.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/ripple":"15.0.0-canary.2a9697dc5.0","@material/animation":"15.0.0-canary.2a9697dc5.0","@material/elevation":"15.0.0-canary.2a9697dc5.0","@material/typography":"15.0.0-canary.2a9697dc5.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.2a9697dc5.0_1688163338342_0.59189497790364","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/drawer","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.0c52adeab.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16e5089d9af8b40bf8720bdd66899602e683d569","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.0c52adeab.0.tgz","fileCount":47,"integrity":"sha512-xHHI2ln51NV92gYf4oo7TAEDpkdFZJj7gHdR0apnv+JxWx2XmlKiL5t8Ia1PrkT/iPu3ZkAdCkuk3EB0Y68xuw==","signatures":[{"sig":"MEQCIDdt0/H8kURNXBRfDrzHvtZoRjbEASS7RfaafcuTemcdAiA7VZtTj6mslOdscG6yUn1ugNPhCnL2pOwFwYm5lzDwAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c52adeab.0","@material/rtl":"15.0.0-canary.0c52adeab.0","@material/base":"15.0.0-canary.0c52adeab.0","@material/list":"15.0.0-canary.0c52adeab.0","@material/shape":"15.0.0-canary.0c52adeab.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/ripple":"15.0.0-canary.0c52adeab.0","@material/animation":"15.0.0-canary.0c52adeab.0","@material/elevation":"15.0.0-canary.0c52adeab.0","@material/typography":"15.0.0-canary.0c52adeab.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.0c52adeab.0_1688574462712_0.6084955822584266","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/drawer","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.83355c322.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"400abc81c37440cbaae4b7fa73d52ea0c0f491d4","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.83355c322.0.tgz","fileCount":47,"integrity":"sha512-34TjRTaqXUBEPCB0S+HTvsbSC9eiF20oCBMg2Uq6KAD4DOfjUYQC/Q0fEc6oang2Nmj8ff7IFNAR6Ineozsg2A==","signatures":[{"sig":"MEUCIQChMelP0K69rOR8sClbbImBbCt3/88Oendk9x62kZ5opAIgJTAmDeypz8D/CP+FXGJG1XzK/rn4qnaR3gFGAVdfs5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.83355c322.0","@material/rtl":"15.0.0-canary.83355c322.0","@material/base":"15.0.0-canary.83355c322.0","@material/list":"15.0.0-canary.83355c322.0","@material/shape":"15.0.0-canary.83355c322.0","@material/theme":"15.0.0-canary.83355c322.0","@material/ripple":"15.0.0-canary.83355c322.0","@material/animation":"15.0.0-canary.83355c322.0","@material/elevation":"15.0.0-canary.83355c322.0","@material/typography":"15.0.0-canary.83355c322.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.83355c322.0_1689001659209_0.14530486543892773","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/drawer","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.bc9ae6c9c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68838f1a12ddd2bb56795bd187d0ce0192689ce5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":47,"integrity":"sha512-PFL4cEFnt7VTxDsuspFVNhsFDYyumjU0VWfj3PWB7XudsEfQ3lo85D3HCEtTTbRsCainGN8bgYNDNafLBqiigw==","signatures":[{"sig":"MEYCIQCOByjlHl5blUMI3hn2ilBD0YJEldwpVsbkSoXKJoQgBAIhAN4s1ad45nddQ5AZ3gFjdfvYaNWshfbkZ/RfnMkQSiLC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bc9ae6c9c.0","@material/rtl":"15.0.0-canary.bc9ae6c9c.0","@material/base":"15.0.0-canary.bc9ae6c9c.0","@material/list":"15.0.0-canary.bc9ae6c9c.0","@material/shape":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/ripple":"15.0.0-canary.bc9ae6c9c.0","@material/animation":"15.0.0-canary.bc9ae6c9c.0","@material/elevation":"15.0.0-canary.bc9ae6c9c.0","@material/typography":"15.0.0-canary.bc9ae6c9c.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.bc9ae6c9c.0_1691097802626_0.9720049370379975","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/drawer","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.3c44cd956.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ced6a1ac302d8032773aac6327cbe813d3a789a","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.3c44cd956.0.tgz","fileCount":47,"integrity":"sha512-yf/DQ4IIKW7Zh9umnUtpKjsLX+C85YUuHTkzWM5FRpfMDLCg8qjlZxJVr9gzM6JOv8IdnWJYww/lattD/T/OSg==","signatures":[{"sig":"MEYCIQDKtnyfh31a2pJK+5uVy4YqJ8EUC2xEIkgvcdfpR2Cz4QIhALP6+1B3EUivBL4kEHGXsdQzWd6VE9F7wILsvp7qQUT7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c44cd956.0","@material/rtl":"15.0.0-canary.3c44cd956.0","@material/base":"15.0.0-canary.3c44cd956.0","@material/list":"15.0.0-canary.3c44cd956.0","@material/shape":"15.0.0-canary.3c44cd956.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/ripple":"15.0.0-canary.3c44cd956.0","@material/animation":"15.0.0-canary.3c44cd956.0","@material/elevation":"15.0.0-canary.3c44cd956.0","@material/typography":"15.0.0-canary.3c44cd956.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.3c44cd956.0_1691430619559_0.2478556525474771","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/drawer","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.02702296e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f4e2bf1ef3d21aa4a1508fffc12094904533302","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.02702296e.0.tgz","fileCount":47,"integrity":"sha512-MQXwAkw/NWAqD4prnVisd7GZRZnvO7kJf25vXEHYdQhEAzZhuafDWXQmeIlPtnul3ja3f7mqDOd3RYEVNCKq8A==","signatures":[{"sig":"MEUCIQDKWYt3CpVCkCRfgFvdSq+aeboVqa4L/OHSMiEpZTxVHAIgUizA3woGIGZe7XgIA2/koqFCowaor4ujTCGhm9SIkoQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02702296e.0","@material/rtl":"15.0.0-canary.02702296e.0","@material/base":"15.0.0-canary.02702296e.0","@material/list":"15.0.0-canary.02702296e.0","@material/shape":"15.0.0-canary.02702296e.0","@material/theme":"15.0.0-canary.02702296e.0","@material/ripple":"15.0.0-canary.02702296e.0","@material/animation":"15.0.0-canary.02702296e.0","@material/elevation":"15.0.0-canary.02702296e.0","@material/typography":"15.0.0-canary.02702296e.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.02702296e.0_1692965223434_0.3691381163948677","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/drawer","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.872b65832.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e9070a583c8af4494030ff72b606604aec3881c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.872b65832.0.tgz","fileCount":47,"integrity":"sha512-oSwPQzUeSUbrZDAeFI1O1HpnWVWvvlpTIpbNdBozII3CMH/E8wkD2Zggy3p/u4vVk2dM54y6VL6gHRA8f3a7Dg==","signatures":[{"sig":"MEYCIQCLERQAzwnu69dz07OVVF5gtE2DGslE3tqBH010L6evAgIhAOytrgEZQNdnLfLGJB9lh50KZ8Yw1pvs5uSrzuJbSd81","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.872b65832.0","@material/rtl":"15.0.0-canary.872b65832.0","@material/base":"15.0.0-canary.872b65832.0","@material/list":"15.0.0-canary.872b65832.0","@material/shape":"15.0.0-canary.872b65832.0","@material/theme":"15.0.0-canary.872b65832.0","@material/ripple":"15.0.0-canary.872b65832.0","@material/animation":"15.0.0-canary.872b65832.0","@material/elevation":"15.0.0-canary.872b65832.0","@material/typography":"15.0.0-canary.872b65832.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.872b65832.0_1693397729923_0.8704412822229788","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/drawer","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.89b2e4122.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b77ecd5fb9745f24100facbeaf5ed8c665960ae","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.89b2e4122.0.tgz","fileCount":47,"integrity":"sha512-TLsfPf9cNEcpaqwOJ5W8HyEwhQp10mCMd5TQHoLI7luS29tT+0mSHtfxEOZzAZyfKIapfBLUB2uifXMfqOjrAQ==","signatures":[{"sig":"MEUCIHOJmXcteSpjMnVEKEYGfrj7cvByaaoSHN4Gwiv295e8AiEApFp/L4uoak0e5ImuOHJoombrHTCFMhES2xt9LD2xNac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89b2e4122.0","@material/rtl":"15.0.0-canary.89b2e4122.0","@material/base":"15.0.0-canary.89b2e4122.0","@material/list":"15.0.0-canary.89b2e4122.0","@material/shape":"15.0.0-canary.89b2e4122.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/ripple":"15.0.0-canary.89b2e4122.0","@material/animation":"15.0.0-canary.89b2e4122.0","@material/elevation":"15.0.0-canary.89b2e4122.0","@material/typography":"15.0.0-canary.89b2e4122.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.89b2e4122.0_1693498126110_0.4904896139164945","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/drawer","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.7a3942e7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fefc1ad10fa3631921aa2275171924baea0cf84","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.7a3942e7a.0.tgz","fileCount":47,"integrity":"sha512-vatJg0eYKpMJ4duIfgeASBDsEQKtyKYW+Gao2wyOxQacLdFlmNLtnEM76H8zOO2k6ndr76hRH4F5Pf0X/Ft7BQ==","signatures":[{"sig":"MEYCIQCCWfYaZJrPh2867hYKqEazVn2kwxz1gGcs2vSS9Kq8zwIhAJznt3zrU3+OSLnpzoF08b3tVwDxfmog3eo/DyNrFuQY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7a3942e7a.0","@material/rtl":"15.0.0-canary.7a3942e7a.0","@material/base":"15.0.0-canary.7a3942e7a.0","@material/list":"15.0.0-canary.7a3942e7a.0","@material/shape":"15.0.0-canary.7a3942e7a.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/ripple":"15.0.0-canary.7a3942e7a.0","@material/animation":"15.0.0-canary.7a3942e7a.0","@material/elevation":"15.0.0-canary.7a3942e7a.0","@material/typography":"15.0.0-canary.7a3942e7a.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.7a3942e7a.0_1693507294466_0.4421404343367279","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/drawer","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.54feb3020.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f48ae493f0ffa7777ebd64ffd87e380b4161603","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.54feb3020.0.tgz","fileCount":47,"integrity":"sha512-P1+KP3JiJj5Knqst2ZUBzyO6PSqAsaXQa5r7UtxPsXxb3PIWpQVKIZ2s6fJU/cObcbgV35HS/lQOIe1EhAR2mw==","signatures":[{"sig":"MEYCIQDqn+rIWQpP1K+GdWQVTNPQSqfrUTIubckQdMr/RaZ9bgIhAPAYZ2bIu3iuVtCZuvZka4RJ762bXY+i/sYwx77nKwE1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.54feb3020.0","@material/rtl":"15.0.0-canary.54feb3020.0","@material/base":"15.0.0-canary.54feb3020.0","@material/list":"15.0.0-canary.54feb3020.0","@material/shape":"15.0.0-canary.54feb3020.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/ripple":"15.0.0-canary.54feb3020.0","@material/animation":"15.0.0-canary.54feb3020.0","@material/elevation":"15.0.0-canary.54feb3020.0","@material/typography":"15.0.0-canary.54feb3020.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.54feb3020.0_1694466435554_0.668146220240448","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/drawer","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.6cda3ce8d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"245fac5389fdb2a490d1db18f4ea254ee218d69b","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":47,"integrity":"sha512-ShEJQlgSoLQUvTDmE74hm+xjWG1uz+NMmqb5aCeulzDc+P4hO+cpf2eDYizB6bwDQSn8jBVtwmK3z4EzxpGIZA==","signatures":[{"sig":"MEQCIAk6q4RLLhn8xCjiJCtiL1yBXGf8Hor0UcYPHSTZ+aI2AiBD2vFYxHJmNAfaruuBdr/M7RudxmTWOJJac8oaiAn/jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6cda3ce8d.0","@material/rtl":"15.0.0-canary.6cda3ce8d.0","@material/base":"15.0.0-canary.6cda3ce8d.0","@material/list":"15.0.0-canary.6cda3ce8d.0","@material/shape":"15.0.0-canary.6cda3ce8d.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/ripple":"15.0.0-canary.6cda3ce8d.0","@material/animation":"15.0.0-canary.6cda3ce8d.0","@material/elevation":"15.0.0-canary.6cda3ce8d.0","@material/typography":"15.0.0-canary.6cda3ce8d.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.6cda3ce8d.0_1694483234567_0.13294883251694478","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/drawer","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.205b20b36.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4df27f4e9f60c36dde0a0579f6bb571bb8fcb01e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.205b20b36.0.tgz","fileCount":47,"integrity":"sha512-hG+WQFAUtztoAdWwKe2iuOqyGUeLcZ6HXshVsc7pgudva+IqYiy+izW4IcB2DeGN0+BfIKkuHylrvgWdChs/xw==","signatures":[{"sig":"MEQCICf7YwjuE8BNH267P7/NL2v1JypKXyd2VllM6y8Q5TquAiBWWSGMnNqarmQd7W7GkozHb4dOFyJJnpfbui2LGoKVww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.205b20b36.0","@material/rtl":"15.0.0-canary.205b20b36.0","@material/base":"15.0.0-canary.205b20b36.0","@material/list":"15.0.0-canary.205b20b36.0","@material/shape":"15.0.0-canary.205b20b36.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/ripple":"15.0.0-canary.205b20b36.0","@material/animation":"15.0.0-canary.205b20b36.0","@material/elevation":"15.0.0-canary.205b20b36.0","@material/typography":"15.0.0-canary.205b20b36.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.205b20b36.0_1694625636483_0.700993338149914","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/drawer","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.22bf82024.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d49f2415f570ff6f00082bcee337efb6da82520","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.22bf82024.0.tgz","fileCount":47,"integrity":"sha512-dyPTnW+akocx/qLETfl5QyyesZZZz0FESEJBpWOhWEwBCEZKZHum2PH4+ds5IeMLcxtPs5vE7WcbppK9z0QIPg==","signatures":[{"sig":"MEUCIQDOd62M/EyVSMIuoQppm0O4reGBQ78qfaCI9StYdiL1EgIgPzRmj8ENNzb5QD0gX0lGn01d5XPtucCtXN/qti24UXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326468},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(evtType: string, evtData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(evtType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(evt: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(evt: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.22bf82024.0","@material/rtl":"15.0.0-canary.22bf82024.0","@material/base":"15.0.0-canary.22bf82024.0","@material/list":"15.0.0-canary.22bf82024.0","@material/shape":"15.0.0-canary.22bf82024.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/ripple":"15.0.0-canary.22bf82024.0","@material/animation":"15.0.0-canary.22bf82024.0","@material/elevation":"15.0.0-canary.22bf82024.0","@material/typography":"15.0.0-canary.22bf82024.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.22bf82024.0_1695028424399_0.8447748314176697","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/drawer","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a246a4439.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"791e4b776049efc7294a0a9a761c009f0f65fc88","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a246a4439.0.tgz","fileCount":47,"integrity":"sha512-/JUmbzRBaikdbZ250yA9ZTPqp2W5nGvvuHYoNVAAmtOmxuwGvvNNpWiVZy2lIYeYcf1hA7hJ5mEQxs0aSD7iWQ==","signatures":[{"sig":"MEUCIQD3hLwK04S2nBbFlg6Nv+tzTxHRuqA3MvWyyzXfcVDcOgIgYCblU1a8z7AmkWmN21fqPD3ZPmNSESwxb7b6XtcvMBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a246a4439.0","@material/rtl":"15.0.0-canary.a246a4439.0","@material/base":"15.0.0-canary.a246a4439.0","@material/list":"15.0.0-canary.a246a4439.0","@material/shape":"15.0.0-canary.a246a4439.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/ripple":"15.0.0-canary.a246a4439.0","@material/animation":"15.0.0-canary.a246a4439.0","@material/elevation":"15.0.0-canary.a246a4439.0","@material/typography":"15.0.0-canary.a246a4439.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a246a4439.0_1695059286377_0.11526930649813805","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/drawer","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.d153db62b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c608e3edb5ccdd517a802b11030e8bf679d6f4b1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.d153db62b.0.tgz","fileCount":47,"integrity":"sha512-njpMXxfAjpdiIPL2vlPb5wMXmN48X2W2V/g1n3JidIpVuwTglTA8nk3xqbvVWOCbVLK+0Qc/pv2iV1LIbwhCjA==","signatures":[{"sig":"MEQCIDSg6wDHb2oZ3vFQVKFgCSjMwp4B5kfmQ1nsn/EAS8EkAiA4Dlnc/dWn2RV+9W7atJci152hrrFAxtMX2yR5cE0tCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d153db62b.0","@material/rtl":"15.0.0-canary.d153db62b.0","@material/base":"15.0.0-canary.d153db62b.0","@material/list":"15.0.0-canary.d153db62b.0","@material/shape":"15.0.0-canary.d153db62b.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/ripple":"15.0.0-canary.d153db62b.0","@material/animation":"15.0.0-canary.d153db62b.0","@material/elevation":"15.0.0-canary.d153db62b.0","@material/typography":"15.0.0-canary.d153db62b.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.d153db62b.0_1695151029703_0.8182956208295551","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/drawer","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.2528c1c3b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e64a62596bc140c959d9a4d9d0d4da140f24fed1","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.2528c1c3b.0.tgz","fileCount":47,"integrity":"sha512-P/UTMbvWORL2Az+ctKKkBk2AxRyLDz2w8vpCLoad2ud+3n+7PL+PKHWThCkfTdivUalbZyXzkWrq/Kp2CqrTqQ==","signatures":[{"sig":"MEUCIGj+fl9HbxMS4GDgJoQgKPk8zQyotw9afwmuJia9gG+AAiEArw9HuzZuNCE7CFIza2pwJ1EYvG+682jjoqXQ84ZlEOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2528c1c3b.0","@material/rtl":"15.0.0-canary.2528c1c3b.0","@material/base":"15.0.0-canary.2528c1c3b.0","@material/list":"15.0.0-canary.2528c1c3b.0","@material/shape":"15.0.0-canary.2528c1c3b.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/ripple":"15.0.0-canary.2528c1c3b.0","@material/animation":"15.0.0-canary.2528c1c3b.0","@material/elevation":"15.0.0-canary.2528c1c3b.0","@material/typography":"15.0.0-canary.2528c1c3b.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.2528c1c3b.0_1695233327048_0.7910205174615019","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/drawer","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.1728a6dcf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4753ff2c378887ea8eb5e047ddcb977049c94d75","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.1728a6dcf.0.tgz","fileCount":47,"integrity":"sha512-0m9cHxBHr2VY7fXPNjFtgGjkRCXzIb52UZJvNSmTmfsk7XCUv8xyA9J/P+5eAAYQrFFMyuyx3arMxD8uVA8mRQ==","signatures":[{"sig":"MEQCIBA+6WZ1mfj7n28t0a793oTmGHPq9ySr9emuFoJtlKE+AiBIkD3Vj/xT2Eae3FO1npNXtc2h2XPp2ommG60VErXefA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1728a6dcf.0","@material/rtl":"15.0.0-canary.1728a6dcf.0","@material/base":"15.0.0-canary.1728a6dcf.0","@material/list":"15.0.0-canary.1728a6dcf.0","@material/shape":"15.0.0-canary.1728a6dcf.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/ripple":"15.0.0-canary.1728a6dcf.0","@material/animation":"15.0.0-canary.1728a6dcf.0","@material/elevation":"15.0.0-canary.1728a6dcf.0","@material/typography":"15.0.0-canary.1728a6dcf.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.1728a6dcf.0_1695691499135_0.3067154242700967","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/drawer","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.ebb636f3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd899091961c63f22d5e2a3acebdc6a172e64ebc","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.ebb636f3d.0.tgz","fileCount":47,"integrity":"sha512-15KBRIZFeheC/RKG3PI8ftlF7r2xiC7HL8bCOxTiduMK8/qF/1lpqupzbYOPUqzpcm1q+ZBU7kAfPs4ohnWtNg==","signatures":[{"sig":"MEYCIQC1D7jww16Zc2hhguOR1gG/wOu99qq2zYrOH1vBcLm+JAIhAMmHvRDpsOVCFcX2DRSjjShPGQK7SCZyQU5sBGKDvaHP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ebb636f3d.0","@material/rtl":"15.0.0-canary.ebb636f3d.0","@material/base":"15.0.0-canary.ebb636f3d.0","@material/list":"15.0.0-canary.ebb636f3d.0","@material/shape":"15.0.0-canary.ebb636f3d.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/ripple":"15.0.0-canary.ebb636f3d.0","@material/animation":"15.0.0-canary.ebb636f3d.0","@material/elevation":"15.0.0-canary.ebb636f3d.0","@material/typography":"15.0.0-canary.ebb636f3d.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.ebb636f3d.0_1696016765902_0.6385447252642327","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/drawer","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.c0d21ecc9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf1db722fe6277d0487c608bc2a2cb8ddcbcef47","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":47,"integrity":"sha512-H3r2wqO5BsDW/xOEcpSRXMZfwaX+KPC2FSaAcQmDKrdXFpNXJKPq9IucFivAAMqdjdp72A+e7R7Gkhb/1OEh6g==","signatures":[{"sig":"MEUCIQD+LpcV/CT9DXO20ocGMWH7INi/hCWWpFNpVuIVK6BGAgIgEzl+FkQDrrWKFv3Qqxn7XsPsfR1lgKRTxwQooyY3vgY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0d21ecc9.0","@material/rtl":"15.0.0-canary.c0d21ecc9.0","@material/base":"15.0.0-canary.c0d21ecc9.0","@material/list":"15.0.0-canary.c0d21ecc9.0","@material/shape":"15.0.0-canary.c0d21ecc9.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/ripple":"15.0.0-canary.c0d21ecc9.0","@material/animation":"15.0.0-canary.c0d21ecc9.0","@material/elevation":"15.0.0-canary.c0d21ecc9.0","@material/typography":"15.0.0-canary.c0d21ecc9.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.c0d21ecc9.0_1696880311194_0.060449464565793365","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/drawer","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.127a44b28.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a1aed5916173358e006bc24d616891b8d084ee9","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.127a44b28.0.tgz","fileCount":47,"integrity":"sha512-InQ3E0GiTgYT46lUqXiuctQTpbHVq11j1MxjOqHtQtQDIU+D2vRGqrUl4eLcSnjbHKiXSLOkVsevrUa25rD7Dw==","signatures":[{"sig":"MEYCIQD1KeJwbJ9w1OYPrQBg3y/ZXXr0suYBQXF0uuhKiypF1wIhANTo1rBchkCP/v9IdlHF4EdlLCMG5Jyyxi1Pxq/GTbkO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.127a44b28.0","@material/rtl":"15.0.0-canary.127a44b28.0","@material/base":"15.0.0-canary.127a44b28.0","@material/list":"15.0.0-canary.127a44b28.0","@material/shape":"15.0.0-canary.127a44b28.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/ripple":"15.0.0-canary.127a44b28.0","@material/animation":"15.0.0-canary.127a44b28.0","@material/elevation":"15.0.0-canary.127a44b28.0","@material/typography":"15.0.0-canary.127a44b28.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.127a44b28.0_1697140943667_0.4947765616617299","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/drawer","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.0ad128337.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ec362506083851909dd0d2185186355de787556","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.0ad128337.0.tgz","fileCount":47,"integrity":"sha512-fqlgfKzf05Bi1fEaZdiDV9R3I/CAIYz0KTsnz6mlydy/S+X1J2sOAllrTbhKcSHVW2EzOiveAYd4Hys46UPJQA==","signatures":[{"sig":"MEYCIQCy736pPY0vtv+hk1nDC0xRzxVfkH1+5fQULRDr5ZKuNwIhAMfiyrU6dqRHTVEssl+ktAejZC+O833qMCEpcGSe15g+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ad128337.0","@material/rtl":"15.0.0-canary.0ad128337.0","@material/base":"15.0.0-canary.0ad128337.0","@material/list":"15.0.0-canary.0ad128337.0","@material/shape":"15.0.0-canary.0ad128337.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/ripple":"15.0.0-canary.0ad128337.0","@material/animation":"15.0.0-canary.0ad128337.0","@material/elevation":"15.0.0-canary.0ad128337.0","@material/typography":"15.0.0-canary.0ad128337.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.0ad128337.0_1697741643332_0.6891259539315968","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/drawer","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.9cec94097.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b515e9fcd7c928c3334a6959050b6a49c8a9259f","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.9cec94097.0.tgz","fileCount":47,"integrity":"sha512-3k30uQMesBbboWzVi6IEbMeMpqJEJN2HuppJVcsV99nJe+lmiKLWX/FNXEup8XbqfEspvBj0MoMQSK+YeEhoYA==","signatures":[{"sig":"MEUCIQDV/DptSR1AQLE3J+fed6sT97MiixRxEY5H4jH9aFwmtgIgGZZfHjZw3kJBpcOEe1LwdGhVsL1si9KlX9Ja0iAtkJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9cec94097.0","@material/rtl":"15.0.0-canary.9cec94097.0","@material/base":"15.0.0-canary.9cec94097.0","@material/list":"15.0.0-canary.9cec94097.0","@material/shape":"15.0.0-canary.9cec94097.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/ripple":"15.0.0-canary.9cec94097.0","@material/animation":"15.0.0-canary.9cec94097.0","@material/elevation":"15.0.0-canary.9cec94097.0","@material/typography":"15.0.0-canary.9cec94097.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.9cec94097.0_1697757075904_0.20828105167045252","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/drawer","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.c51a0bbcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df831913d13613c26cfaa2a2949df9273e442df0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":47,"integrity":"sha512-wp1SU0gRKFaeglb9aRQvTamg6+Eh4gXrbtu1E0AfPXZ3PsTS7+uBk7gzfzmUoaTA9BjtR57p+3biKIWJwwd4jw==","signatures":[{"sig":"MEUCIEzPWuh+OuUHTeefihth50e+P/wURqt3mwJ6I47r121eAiEAzAF7vptO+Qojy5fCBV7I47s/SdR0ewMud4+SVyVb31s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c51a0bbcc.0","@material/rtl":"15.0.0-canary.c51a0bbcc.0","@material/base":"15.0.0-canary.c51a0bbcc.0","@material/list":"15.0.0-canary.c51a0bbcc.0","@material/shape":"15.0.0-canary.c51a0bbcc.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/ripple":"15.0.0-canary.c51a0bbcc.0","@material/animation":"15.0.0-canary.c51a0bbcc.0","@material/elevation":"15.0.0-canary.c51a0bbcc.0","@material/typography":"15.0.0-canary.c51a0bbcc.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.c51a0bbcc.0_1700081966989_0.4024199946825211","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/drawer","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.d76666ad4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96f873c7883114f234baec507a209cf0327143c6","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.d76666ad4.0.tgz","fileCount":47,"integrity":"sha512-8uqwZat57uDsm47jDR1tchKUZPJ01DoA0Yt0UYs2QGkeDyZH+JTur0ZHvXzvXGQNlEGJVHoIX4vcr932vttHkw==","signatures":[{"sig":"MEQCIDkfNxAwue+mBUltkdQf8t9mZ1fLu6LH8ze0nVK+tsTLAiBrg4ME4RJQ/JupxwQNTO03HXlgJblwhws2D/81vYy3ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d76666ad4.0","@material/rtl":"15.0.0-canary.d76666ad4.0","@material/base":"15.0.0-canary.d76666ad4.0","@material/list":"15.0.0-canary.d76666ad4.0","@material/shape":"15.0.0-canary.d76666ad4.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/ripple":"15.0.0-canary.d76666ad4.0","@material/animation":"15.0.0-canary.d76666ad4.0","@material/elevation":"15.0.0-canary.d76666ad4.0","@material/typography":"15.0.0-canary.d76666ad4.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.d76666ad4.0_1701123231374_0.8958113240647378","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/drawer","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.8656bf0e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03d2fcc65c2b19ce2e175a28fcf7e8da77f17cd0","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.8656bf0e0.0.tgz","fileCount":47,"integrity":"sha512-+1RFYbcDeoHkB3qkNx2Kl98LVw4w85HWOPp3H9GRzYr2tRlpIhSU5MYsAfFLx3VcbmGo0ZBkhy6YK8aO00362Q==","signatures":[{"sig":"MEYCIQDJQR3pG0uX2h0Z0z32dkRHunop9qWIzzWqpQ4VDttdqwIhAKbUbwzYy3/pSAPZaJONCzbPsU4oHKvzc58F8hS3DNwI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8656bf0e0.0","@material/rtl":"15.0.0-canary.8656bf0e0.0","@material/base":"15.0.0-canary.8656bf0e0.0","@material/list":"15.0.0-canary.8656bf0e0.0","@material/shape":"15.0.0-canary.8656bf0e0.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/ripple":"15.0.0-canary.8656bf0e0.0","@material/animation":"15.0.0-canary.8656bf0e0.0","@material/elevation":"15.0.0-canary.8656bf0e0.0","@material/typography":"15.0.0-canary.8656bf0e0.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.8656bf0e0.0_1702415965728_0.3310795586791968","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/drawer","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.7f224ddd4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"089efcc9ba1622c6f6acb5e292f2edd9b2482558","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.7f224ddd4.0.tgz","fileCount":47,"integrity":"sha512-qyO0W0KBftfH8dlLR0gVAgv7ZHNvU8ae11Ao6zJif/YxcvK4+gph1z8AO4H410YmC2kZiwpSKyxM1iQCCzbb4g==","signatures":[{"sig":"MEUCIQDF1BXEfxt9J7TLLS8zu37Adxs/vEEpb+AmyncvddfPlwIgGTxi0qChp3oASyb+1r2QMIUkusZDUmwW114pB7Tmsc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f224ddd4.0","@material/rtl":"15.0.0-canary.7f224ddd4.0","@material/base":"15.0.0-canary.7f224ddd4.0","@material/list":"15.0.0-canary.7f224ddd4.0","@material/shape":"15.0.0-canary.7f224ddd4.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/ripple":"15.0.0-canary.7f224ddd4.0","@material/animation":"15.0.0-canary.7f224ddd4.0","@material/elevation":"15.0.0-canary.7f224ddd4.0","@material/typography":"15.0.0-canary.7f224ddd4.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.7f224ddd4.0_1703743797427_0.03008088580561563","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/drawer","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.a0b8a90c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4487d7f1d824e4261f6ab73e04baba428021bafb","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":47,"integrity":"sha512-6tK4m8UODYItFhKvL8wTHkaAGETBaGRvm3sW+392jQ4nd7yTQtQaE/qg0XxauhMLhILF3V1JIsw7jkFQNGj3kw==","signatures":[{"sig":"MEUCIDtbWfABnahEIAIn8Ems7tsTXTaGvgE1VXkxLa9IHMsZAiEA6zvHt8FZfY5Qlq+9oyCf8UX0fXYd20kK/F02D4yqXhw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0b8a90c0.0","@material/rtl":"15.0.0-canary.a0b8a90c0.0","@material/base":"15.0.0-canary.a0b8a90c0.0","@material/list":"15.0.0-canary.a0b8a90c0.0","@material/shape":"15.0.0-canary.a0b8a90c0.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/ripple":"15.0.0-canary.a0b8a90c0.0","@material/animation":"15.0.0-canary.a0b8a90c0.0","@material/elevation":"15.0.0-canary.a0b8a90c0.0","@material/typography":"15.0.0-canary.a0b8a90c0.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.a0b8a90c0.0_1707333613870_0.9096320370742108","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/drawer","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.e50b478eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce088ce8752ef1a7b30c22b3da50f3de3fb7e85c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.e50b478eb.0.tgz","fileCount":47,"integrity":"sha512-trqxUHZjj2Ynz5uy7YpdZFAfd5Y99MDI6eml/QUDndI8uS+vJPfinBErI/57c3jCoX07G7ijWS4bNDRQScr5ww==","signatures":[{"sig":"MEUCIQCZhTEJiu/ui1Z4b/4rTqkf2G52FOvK06A4am/q/wtgTAIgOZOLBNmMrztfbG+5AEEWbYy/j4OSWbDLyI+cut+aHD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e50b478eb.0","@material/rtl":"15.0.0-canary.e50b478eb.0","@material/base":"15.0.0-canary.e50b478eb.0","@material/list":"15.0.0-canary.e50b478eb.0","@material/shape":"15.0.0-canary.e50b478eb.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/ripple":"15.0.0-canary.e50b478eb.0","@material/animation":"15.0.0-canary.e50b478eb.0","@material/elevation":"15.0.0-canary.e50b478eb.0","@material/typography":"15.0.0-canary.e50b478eb.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.e50b478eb.0_1707415737717_0.07658173619324082","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/drawer","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.c43b3438b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c03ba10bb8f3a29aef9a20ed1d4652806b2bd280","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.c43b3438b.0.tgz","fileCount":47,"integrity":"sha512-GU3edtWemRBJeAQ6kV+RVeTXxqKoOAVNT++uRtXM+wb8HrrDQGe7MEVOJWgkP2mlcvj3rrMDtkHS1jv0JtDWvQ==","signatures":[{"sig":"MEYCIQDEOootNLweKhkt2a6vips7WEcvIrXDcf6tebHVvE5M5gIhANsvxNonQF2Ewq6H53F81hkqB8gJ4AFHFzsKZD+XaxUq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c43b3438b.0","@material/rtl":"15.0.0-canary.c43b3438b.0","@material/base":"15.0.0-canary.c43b3438b.0","@material/list":"15.0.0-canary.c43b3438b.0","@material/shape":"15.0.0-canary.c43b3438b.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/ripple":"15.0.0-canary.c43b3438b.0","@material/animation":"15.0.0-canary.c43b3438b.0","@material/elevation":"15.0.0-canary.c43b3438b.0","@material/typography":"15.0.0-canary.c43b3438b.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.c43b3438b.0_1708719503408_0.2722333947494693","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/drawer","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.819498d8c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a0880eef0deb4f3384fa02464568e2f7ad2753c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.819498d8c.0.tgz","fileCount":47,"integrity":"sha512-plG1C9lDEqQ684G/FZ1Xp/60ApEIIz64FPRt+J6WZMZ0W3drteGpxF3uH1dxqEJt3wpFtCB8oydBmUS/w5Rsug==","signatures":[{"sig":"MEYCIQChrnbgQiTt91ggN19l18SFNsRol1vpv8lMiGF5vk5XiQIhAJZffKUaKlhf4u97hUxJBhCKBtul03/KdtaYyC2tkSOR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.819498d8c.0","@material/rtl":"15.0.0-canary.819498d8c.0","@material/base":"15.0.0-canary.819498d8c.0","@material/list":"15.0.0-canary.819498d8c.0","@material/shape":"15.0.0-canary.819498d8c.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/ripple":"15.0.0-canary.819498d8c.0","@material/animation":"15.0.0-canary.819498d8c.0","@material/elevation":"15.0.0-canary.819498d8c.0","@material/typography":"15.0.0-canary.819498d8c.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.819498d8c.0_1710515755717_0.5535260066935579","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/drawer","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.453a6248a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e2b8c9d9118a5092e32fee44d82e37f792da550","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.453a6248a.0.tgz","fileCount":47,"integrity":"sha512-ZMip6LzCOQc8kxcjAi8baTMsrG2h/FnXdAbosCdl+XvRBhbSKgEbbop76jRROAQPsak7RTJcX8ssJNgxpfisaQ==","signatures":[{"sig":"MEQCIDl+nAF+jhtAElEOWI4+zUmWVh4YoLo/YDcM1mF2Kt8yAiAXwbpreLr/11m/QkPBe6cLBJt9XV0cA6J3gWBoVEdNHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.453a6248a.0","@material/rtl":"15.0.0-canary.453a6248a.0","@material/base":"15.0.0-canary.453a6248a.0","@material/list":"15.0.0-canary.453a6248a.0","@material/shape":"15.0.0-canary.453a6248a.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/ripple":"15.0.0-canary.453a6248a.0","@material/animation":"15.0.0-canary.453a6248a.0","@material/elevation":"15.0.0-canary.453a6248a.0","@material/typography":"15.0.0-canary.453a6248a.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.453a6248a.0_1711386866574_0.8455506201495662","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/drawer","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.68edc03c6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21c4c4bf76869e404f933ca16bfc943e134eac77","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.68edc03c6.0.tgz","fileCount":47,"integrity":"sha512-7IadqqpPeRMbZeXkTmu3IEOpFtWCachY6Fp9PYsb9GdaJkjrbzN2oZdcKUHIQmZoinG7s/Bbn3hWJED5fbMIqA==","signatures":[{"sig":"MEUCIHfEB/sGRmDHnI14Gt3YGFl12EUp/BpkGkM6iiuYik8lAiEAl6ZzdK92se+Ssl6pWEiJToUFJm9np212j4r/3x7eM1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1326698},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68edc03c6.0","@material/rtl":"15.0.0-canary.68edc03c6.0","@material/base":"15.0.0-canary.68edc03c6.0","@material/list":"15.0.0-canary.68edc03c6.0","@material/shape":"15.0.0-canary.68edc03c6.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/ripple":"15.0.0-canary.68edc03c6.0","@material/animation":"15.0.0-canary.68edc03c6.0","@material/elevation":"15.0.0-canary.68edc03c6.0","@material/typography":"15.0.0-canary.68edc03c6.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.68edc03c6.0_1712603242818_0.8289735566709233","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/drawer","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.5bebc0064.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8abcf6526f98fdaad14bec2e21f6c81bcf9d0090","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.5bebc0064.0.tgz","fileCount":47,"integrity":"sha512-CWcBEjdbjnrlkydrgfWnDVWSS4lTuF2YzWHHdSZb72M6Y48ACsfW4meJhtIjcpm3uv/AQYVDDCtYkTB22LSKVA==","signatures":[{"sig":"MEUCIQDmjLrX7LTHzYBye8KyfiWCQJtayvvL+N78KWPN8jCh3QIgVTDslX1ByQBrchrhejwJH2eXzUEYgq5IPNPrVUkr650=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1327196},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5bebc0064.0","@material/rtl":"15.0.0-canary.5bebc0064.0","@material/base":"15.0.0-canary.5bebc0064.0","@material/list":"15.0.0-canary.5bebc0064.0","@material/shape":"15.0.0-canary.5bebc0064.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/ripple":"15.0.0-canary.5bebc0064.0","@material/animation":"15.0.0-canary.5bebc0064.0","@material/elevation":"15.0.0-canary.5bebc0064.0","@material/typography":"15.0.0-canary.5bebc0064.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.5bebc0064.0_1712871732063_0.1938572691420779","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/drawer","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.311f29a60.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca2b98b044d68fdffbdd1e972b2b0559fa8d266e","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.311f29a60.0.tgz","fileCount":47,"integrity":"sha512-MlSj/rNKOyTFyhoA8j/1S3Xl2qIOJOH9b/zi9kRzEb40VngdaN0n8JpehR/fqPZq4d7+F4G4ko+64Qtu+W0B2g==","signatures":[{"sig":"MEYCIQD+fYA4/ewrGtGjISwTO0OqKvHczIVBbj2PuAduhUfTVgIhAOT2Z5xSU9tTWCRZQg0RHm07jPEaOKz4K3WHXi8o0zph","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1327196},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311f29a60.0","@material/rtl":"15.0.0-canary.311f29a60.0","@material/base":"15.0.0-canary.311f29a60.0","@material/list":"15.0.0-canary.311f29a60.0","@material/shape":"15.0.0-canary.311f29a60.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/ripple":"15.0.0-canary.311f29a60.0","@material/animation":"15.0.0-canary.311f29a60.0","@material/elevation":"15.0.0-canary.311f29a60.0","@material/typography":"15.0.0-canary.311f29a60.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.311f29a60.0_1713895279323_0.40719306216754036","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/drawer","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.65c10a622.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"370529f114dadedc4385a547e28d769f45c50c67","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.65c10a622.0.tgz","fileCount":47,"integrity":"sha512-QZ5hyTaklqwqdKEnwzCt5YLmKlquUqZ+kGyBSO2MDLRZFNbnjTqnoxMBkrpvmqJDaVWz6OmaDnc1Z+R6ncIK5Q==","signatures":[{"sig":"MEUCIQDFW0SgQAjerOoKs5G/YxYIwDVfbr0jMp6+OdhKuN9vSgIgBWFHM9bVDL1a/he19DONlnPgr2N3OExO/bCj+E0dqBQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1327196},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c10a622.0","@material/rtl":"15.0.0-canary.65c10a622.0","@material/base":"15.0.0-canary.65c10a622.0","@material/list":"15.0.0-canary.65c10a622.0","@material/shape":"15.0.0-canary.65c10a622.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/ripple":"15.0.0-canary.65c10a622.0","@material/animation":"15.0.0-canary.65c10a622.0","@material/elevation":"15.0.0-canary.65c10a622.0","@material/typography":"15.0.0-canary.65c10a622.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.65c10a622.0_1714070990837_0.14429775543427104","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/drawer","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.4b35cb7d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b757563aeb2cd38e2958b89eb2980f318d67dab3","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":47,"integrity":"sha512-8o4wN4k3gfkq+UVzDbcBRwszWAK12f4VCY2Cv2j4gEqmH5DirOAChcSkyXKuX+UOBMk9RRXIo2dJc5PhRz5LFw==","signatures":[{"sig":"MEYCIQCsZpNTXBu03ziuU9rLeXiK/5T/Ju92xkb2BFoI2VY8vAIhANzrVjthdbw2euM18hV6hDf3Uq/lmnDj9e8en0tW5DdH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1327196},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4b35cb7d0.0","@material/rtl":"15.0.0-canary.4b35cb7d0.0","@material/base":"15.0.0-canary.4b35cb7d0.0","@material/list":"15.0.0-canary.4b35cb7d0.0","@material/shape":"15.0.0-canary.4b35cb7d0.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/ripple":"15.0.0-canary.4b35cb7d0.0","@material/animation":"15.0.0-canary.4b35cb7d0.0","@material/elevation":"15.0.0-canary.4b35cb7d0.0","@material/typography":"15.0.0-canary.4b35cb7d0.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.4b35cb7d0.0_1714651435885_0.10953282976543965","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/drawer","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.f80ac92b0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10b77507b7fdea6578e734ff8c40ade56d7a530c","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.f80ac92b0.0.tgz","fileCount":47,"integrity":"sha512-UN2Toj1965adnV20p5RUJv1+2d4WQ7ecAuVZO0J08xVvN8qGYN1ckYIfDc5pmfRYuLkvvoaZ/J/cdfsVGZN6oA==","signatures":[{"sig":"MEUCIQDcjyzeZ7tvnVHjH2UdkmDuqqNa+OoifwwfujoNhYutRAIgCitsLCQLVm0Vc9LXl7uAHbr22PfAuU5eQglfzVPthGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1327196},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f80ac92b0.0","@material/rtl":"15.0.0-canary.f80ac92b0.0","@material/base":"15.0.0-canary.f80ac92b0.0","@material/list":"15.0.0-canary.f80ac92b0.0","@material/shape":"15.0.0-canary.f80ac92b0.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/ripple":"15.0.0-canary.f80ac92b0.0","@material/animation":"15.0.0-canary.f80ac92b0.0","@material/elevation":"15.0.0-canary.f80ac92b0.0","@material/typography":"15.0.0-canary.f80ac92b0.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.f80ac92b0.0_1714652042455_0.36877704083339147","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/drawer","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.2f5b899bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75fb6ea72921d3c83b4ef9acd503c45699cab4b5","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.2f5b899bc.0.tgz","fileCount":47,"integrity":"sha512-ss0LpIwTZ/f5AHGvi5oTC9izIqNcEvvcmMe4t0iZX2XzpF1B5Ouu5gu3P+AtjenStv6gbAKimUhGe0amP3yETA==","signatures":[{"sig":"MEYCIQDXtOjNAoqfS0tOoiaIrkjHh6Pm08bWBryNSGv81cFjSQIhAI0RI70e+ptyM4WsopVaoI3NbA+nf192rKibxelJelLz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1327196},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f5b899bc.0","@material/rtl":"15.0.0-canary.2f5b899bc.0","@material/base":"15.0.0-canary.2f5b899bc.0","@material/list":"15.0.0-canary.2f5b899bc.0","@material/shape":"15.0.0-canary.2f5b899bc.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/ripple":"15.0.0-canary.2f5b899bc.0","@material/animation":"15.0.0-canary.2f5b899bc.0","@material/elevation":"15.0.0-canary.2f5b899bc.0","@material/typography":"15.0.0-canary.2f5b899bc.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.2f5b899bc.0_1716213463782_0.4855372710547641","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/drawer","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","navigation","drawer"],"license":"MIT","_id":"@material/drawer@15.0.0-canary.cfec83c74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70f59c23c3a835b3c4199e27743cb63ba4733a70","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.cfec83c74.0.tgz","fileCount":47,"integrity":"sha512-Mo7tiAUiVqhDKJak9zpXYTgiHwxIhcR56J8bP5g873vrbDUtGmEO3pUJWpVififS1mRujbtjRNgofqglTmvGqg==","signatures":[{"sig":"MEYCIQCeVfA6YavhRrhJNrl2+FCx2KFzht4XXnQmk7UNgdgWZgIhAPBOruZOCYvWDFVeisLECjEUbge/vx5NIQNa3Xz46m1g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1327196},"main":"dist/mdc.drawer.js","module":"index.js","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","gitHead":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web drawer component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfec83c74.0","@material/rtl":"15.0.0-canary.cfec83c74.0","@material/base":"15.0.0-canary.cfec83c74.0","@material/list":"15.0.0-canary.cfec83c74.0","@material/shape":"15.0.0-canary.cfec83c74.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/ripple":"15.0.0-canary.cfec83c74.0","@material/animation":"15.0.0-canary.cfec83c74.0","@material/elevation":"15.0.0-canary.cfec83c74.0","@material/typography":"15.0.0-canary.cfec83c74.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/drawer_15.0.0-canary.cfec83c74.0_1716231464436_0.875628104236251","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/drawer","version":"15.0.0-canary.423edc3dc.0","description":"The Material Components Web drawer component","license":"MIT","keywords":["material components","material design","navigation","drawer"],"main":"dist/mdc.drawer.js","module":"index.js","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-drawer"},"dependencies":{"@material/animation":"15.0.0-canary.423edc3dc.0","@material/base":"15.0.0-canary.423edc3dc.0","@material/dom":"15.0.0-canary.423edc3dc.0","@material/elevation":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/list":"15.0.0-canary.423edc3dc.0","@material/ripple":"15.0.0-canary.423edc3dc.0","@material/rtl":"15.0.0-canary.423edc3dc.0","@material/shape":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","@material/typography":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"\n\n# Navigation drawers\n\n[Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.\n\n![Hero navigation drawer image](images/drawer-hero.png)\n\n**Contents**\n\n* [Using navigation drawers](#using-navigation-drawers)\n* [Types](#types)\n* [Other variants](#other-variants)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using navigation drawers\n\nA navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.\n\nA navigation drawer is recommended for:\n\n* Apps with five or more top-level destinations\n* Apps with two or more levels of navigation hierarchy\n* Quick navigation between unrelated destinations\n\n### Important Changes\n\nDrawer is currently being updated to use the new List implementation. For now,\nplease continue to use the old implementation (`mdc-deprecated-list` and\nassociated DOM/classes) instead of the new one (`mdc-list`).\n\nSee the [List documentation](../mdc-list/README.md) for more information.\n\n### Installation\n\n```\nnpm install @material/drawer\n```\n\n### Styles\n\n```scss\n@use \"@material/drawer\";\n@use \"@material/list\";\n\n@include drawer.core-styles;\n@include drawer.dismissible-core-styles;\n@include drawer.modal-core-styles;\n@include list.deprecated-core-styles;\n```\n\n### JavaScript instantiation\n\nFor permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:\n\n```js\nimport {MDCList} from \"@material/list\";\nconst list = MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));\nlist.wrapFocus = true;\n```\n\nOther variants use the `MDCDrawer` component, which will instantiate `MDCList` automatically:\n\n```js\nimport {MDCDrawer} from \"@material/drawer\";\nconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\n```\n\n### Icons\n\nWe recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:\n\n```html\n\n \n\n```\n\nHowever, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.\n\n### Making navigation drawers accessible\n\n### Focus management\n\nIt is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)\n\n#### Dismissible drawer\n\nRestore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n mainContentEl.querySelector('input, button').focus();\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n#### Modal drawer\n\nClose the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.\n\n```js\nconst listEl = document.querySelector('.mdc-drawer .mdc-deprecated-list');\nconst mainContentEl = document.querySelector('.main-content');\n\nlistEl.addEventListener('click', (event) => {\n drawer.open = false;\n});\n\ndocument.body.addEventListener('MDCDrawer:closed', () => {\n mainContentEl.querySelector('input, button').focus();\n});\n```\n\n## Types\n\nThere are three types of navigation drawers: [standard (1)](#standard-navigation-drawers), [modal (2)](#modal-navigation-drawers), and [bottom (3)](#bottom-navigation-drawers).\n\n![Standard, modal, and bottom navigation drawers](images/drawer-composite.png)\n\n### Standard navigation drawers\n\n[Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.\n\n```html\n\n```\n\n### Modal navigation drawers\n\n[Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.\n\n\n```html\n\n \n\n
\n
Main Content
\n\n```\n\n**Note: The `mdc-drawer-scrim` next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.**\n\n### Bottom navigation drawers\n\n[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.\n\nMDC Web does not currently support bottom navigation drawers.\n\n## Other variants\n\n### Drawer with separate list groups\n\n```html\n\n```\n\n### Drawer with header\n\nDrawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.\n\n```html\n\n```\n\n### Dismissible drawer\n\nDismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.\n\n```html\n\n \n\n
\n App Content\n
\n\n```\n\n**Note: Apply the `mdc-drawer-app-content` class to the sibling element after the drawer for the open/close animations to work.**\n\n#### Usage with top app bar\n\n##### Dismissible drawer: full height drawer\n\nIn cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.\n\nIn the following example, the `mdc-drawer__content` and `main-content` elements should scroll independently of each other. The `mdc-drawer--dismissible` and `mdc-drawer-app-content` elements should then sit side-by-side. The markup looks something like this:\n\n```html\n\n \n\n
\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n\n
\n
\n App Content\n
\n
\n
\n\n```\n\n##### Dismissible drawer: below top app bar\n\nIn cases where the drawer appears below the top app bar you will want to follow the markup shown below. The `mdc-drawer__content` and `main-content` elements will also scroll independently of each other. The `mdc-top-app-bar`, `mdc-drawer` and `mdc-drawer-app-content` will be sibling to each other. The `mdc-top-app-bar--fixed-adjust` helper class will be applied to `mdc-drawer` and `mdc-drawer-app-content` elements to adjust the position with top app bar.\n\n```html\n\n
\n
\n
\n \n Dismissible Drawer\n
\n
\n
\n \n\n
\n
\n App Content\n
\n
\n\n```\n\nThe CSS to match either case looks like this:\n\n```scss\n// Note: These styles do not account for any paddings/margins that you may need.\n\nbody {\n display: flex;\n height: 100vh;\n}\n\n.mdc-drawer-app-content {\n flex: auto;\n overflow: auto;\n position: relative;\n}\n\n.main-content {\n overflow: auto;\n height: 100%;\n}\n\n.app-bar {\n position: absolute;\n}\n\n// Only apply this style if below top app bar.\n.mdc-top-app-bar {\n z-index: 7;\n}\n```\n\nThe JavaScript to toggle the drawer when the navigation button is clicked looks like this:\n\n```js\nimport {MDCTopAppBar} from \"@material/top-app-bar\";\nconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\ntopAppBar.setScrollTarget(document.getElementById('main-content'));\ntopAppBar.listen('MDCTopAppBar:nav', () => {\n drawer.open = !drawer.open;\n});\n```\n\n## API\n\n### CSS classes\n\nClass | Description\n--- | ---\n`mdc-drawer` | Mandatory.\n`mdc-drawer__header` | Non-scrollable element that exists at the top of the drawer.\n`mdc-drawer__content` | Scrollable content area of the drawer.\n`mdc-drawer__title` | Title text element of the drawer.\n`mdc-drawer__subtitle` | Subtitle text element of the drawer.\n`mdc-drawer--dismissible` | Dismissible drawer variant class.\n`mdc-drawer--modal` | Modal drawer variant class.\n`mdc-drawer--open` | If present, indicates that the dismissible drawer is in the open position.\n`mdc-drawer--opening` | Applied while the drawer is animating from the closed to the open position.\n`mdc-drawer--closing` | Applied while the drawer is animating from the open to the closed position.\n`mdc-drawer-app-content` | Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.\n`mdc-drawer-scrim` | Mandatory for modal variant only. Used for the overlay on the app content.\n\n### Sass mixins\n\nMixin | Description\n--- | ---\n`border-color($color)` | Sets border color of `mdc-drawer` surface.\n`divider-color($color)` | Sets divider color found between list groups.\n`fill-color-accessible($color)` | Sets the fill color to `$color`, and list item and icon ink colors to an accessible color relative to `$color`.\n`surface-fill-color($color)` | Sets the background color of `mdc-drawer`.\n`title-ink-color($color)` | Sets the ink color of `mdc-drawer__title`.\n`subtitle-ink-color` | Sets drawer subtitle and list subheader ink color.\n`item-icon-ink-color($color)` | Sets drawer list item graphic icon ink color.\n`item-text-ink-color($color)` | Sets drawer list item text ink color.\n`item-activated-icon-ink-color($color)` | Sets activated drawer list item icon ink color.\n`item-activated-text-ink-color($color)` | Sets activated drawer list item text ink color.\n`shape-radius($radius)` | Sets the rounded shape to drawer with given radius size. `$radius` can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.\n`item-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to drawer navigation item with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to true.\n`activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.\n`scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.\n`z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.\n`width($width)` | Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for `mdc-drawer-app-content`.\n\n### `MDCDrawer`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`emit(eventType: string, eventData: T, shouldBubble?: boolean) => void` | Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.\n`listen(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.\n`unlisten(eventType: K, handler: SpecificEventListener, options?: AddEventListenerOptions \\| boolean) => void` | Wrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.\n\n#### Properties\n\nName | Type | Description\n--- | --- | ---\nopen | `boolean` | Toggles the drawer open and closed.\n\n#### Events\n\n- `MDCDrawer:closed {}` Emits when the navigation drawer has closed.\n- `MDCDrawer:opened {}` Emits when the navigation drawer has opened.\n\n## Usage within web frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCDrawerAdapter`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`notifyOpen() => void` | Emits a custom event \"MDCDrawer:opened\" denoting the drawer has opened.\n`addClass(className: string) => void` | Adds a class to the root Element.\n`focusActiveNavigationItem() => void` | Focuses the active / selected navigation item.\n`hasClass(className: string) => boolean` | Returns true if the root Element contains the given class.\n`notifyClose() => void` | Emits a custom event \"MDCDrawer:closed\" denoting the drawer has closed.\n`elementHasClass(element: Element, className: string) => boolean` | Returns true if the element contains the given class.\n`releaseFocus() => void` | Releases focus trap from root element which was set by `trapFocus` and restores focus to where it was prior to calling `trapFocus`.\n`removeClass(className: string) => void` | Removes a class from the root Element.\n`restoreFocus() => void` | Restores focus to element previously saved with 'saveFocus'.\n`saveFocus() => void` | Saves the focus of currently active element.\n`trapFocus() => void` | Traps focus on root element and focuses the active navigation element.\n\n### `MDCDismissibleDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Extension point for when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Extension point for when drawer finishes open animation.\n\n### `MDCModalDrawerFoundation`\n\n#### Methods\n\nSignature | Description\n--- | ---\n`close() => void` | Closes the drawer from the open state.\n`handleKeydown(event: KeyboardEvent) => void` | Keydown handler to close drawer when key is escape.\n`handleScrimClick() => void` | Handles click event on scrim.\n`handleTransitionEnd(event: TransitionEvent) => void` | Handles the `transitionend` event when the drawer finishes opening/closing.\n`closed_() => void` | Called when drawer finishes close animation.\n`isClosing() => boolean` | Returns true if the drawer is animating closed.\n`isOpen() => boolean` | Returns true if the drawer is in the open position.\n`isOpening() => boolean` | Returns true if the drawer is animating open.\n`open() => void` | Opens the drawer from the closed state.\n`opened_() => void` | Called when drawer finishes open animation.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/drawer@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-0HCrxCPIPeBDxZqgiksRWngdVcNa2bXDM72zUs4RhgMhrWWA6ZKtLLV0GMymxBLhbI+Zv4+C9kYq0ZccuT2u0Q==","shasum":"817b65df294de7027969b7e877dedf54233b8fd7","tarball":"https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.423edc3dc.0.tgz","fileCount":47,"unpackedSize":1327196,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgRC5iXk1VT6Z2Zq+CYJgEyl68Krlh3ggkHmYpsiNJNAIhALalL77PjR2fXLQ+fIlSPI/3lK1gpomZ1d8n7/gRhHxi"}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/drawer_15.0.0-canary.423edc3dc.0_1719425537481_0.8036659004770845"},"_hasShrinkwrap":false}},"time":{"created":"2016-12-15T17:54:42.492Z","modified":"2024-06-26T18:12:18.055Z","0.1.0":"2016-12-15T17:54:42.492Z","0.1.1":"2017-01-09T15:57:16.960Z","0.1.2":"2017-01-23T16:49:34.621Z","0.1.3":"2017-02-06T19:04:44.383Z","0.1.4":"2017-02-21T17:27:33.905Z","0.2.0":"2017-04-03T15:28:02.594Z","0.3.0":"2017-04-17T15:43:06.563Z","0.3.1":"2017-04-18T14:51:17.214Z","0.4.0":"2017-05-01T15:43:05.162Z","0.4.1":"2017-05-15T16:26:02.941Z","0.4.2":"2017-05-17T14:28:21.219Z","0.4.3":"2017-05-30T19:04:34.602Z","0.5.0":"2017-06-12T15:53:18.704Z","0.5.1":"2017-06-26T16:10:52.464Z","0.5.2":"2017-07-10T15:58:50.970Z","0.5.3":"2017-07-24T15:49:15.226Z","0.5.4":"2017-08-07T20:48:26.306Z","0.5.5":"2017-08-21T17:27:50.087Z","0.5.6":"2017-08-24T14:46:44.058Z","0.5.7":"2017-09-05T20:16:07.609Z","0.5.8":"2017-09-18T18:35:39.333Z","0.5.9":"2017-10-02T21:11:43.168Z","0.24.0":"2017-10-30T19:11:21.547Z","0.25.0":"2017-11-13T20:02:24.612Z","0.26.0":"2017-11-27T22:26:26.646Z","0.27.0":"2017-12-11T19:35:32.998Z","0.28.0":"2018-01-08T18:55:11.280Z","0.29.0":"2018-01-22T18:30:56.104Z","0.30.0":"2018-02-05T22:02:47.172Z","0.33.0":"2018-03-19T16:39:59.390Z","0.34.0":"2018-04-02T21:51:53.981Z","0.35.0":"2018-04-23T22:40:11.091Z","0.36.0":"2018-06-04T15:37:43.864Z","0.36.1":"2018-06-18T15:40:28.436Z","0.37.1":"2018-07-16T21:19:10.925Z","0.38.0":"2018-07-30T17:06:57.634Z","0.39.0-0":"2018-08-16T15:15:56.969Z","0.39.0":"2018-08-27T17:41:07.722Z","0.39.1":"2018-08-31T21:36:54.118Z","0.39.2":"2018-09-11T16:55:29.689Z","0.39.3":"2018-09-11T17:19:25.995Z","0.40.0":"2018-09-24T20:02:13.185Z","0.40.1":"2018-10-08T21:07:14.826Z","0.41.0":"2018-10-29T20:22:26.413Z","0.41.1":"2018-11-14T19:29:32.759Z","0.42.0":"2018-12-04T22:55:11.077Z","0.43.0":"2019-01-07T19:49:34.830Z","0.44.0":"2019-02-04T18:24:30.207Z","0.44.1":"2019-02-19T23:03:13.941Z","1.0.0-0":"2019-02-28T00:00:04.934Z","1.0.0-1":"2019-03-04T23:33:50.708Z","1.0.0":"2019-03-06T21:08:41.256Z","1.0.1":"2019-03-11T22:07:55.360Z","1.1.0":"2019-03-26T19:26:25.057Z","1.1.1":"2019-04-08T20:14:17.802Z","2.0.0":"2019-04-29T17:40:27.273Z","2.1.1":"2019-05-10T17:25:40.331Z","2.3.0":"2019-05-28T21:24:14.443Z","3.0.0-alpha.0":"2019-06-12T04:07:17.391Z","3.0.0-alpha.1":"2019-06-12T19:02:34.276Z","3.0.0":"2019-06-25T22:28:03.968Z","3.1.0-alpha.0":"2019-07-16T13:29:29.738Z","3.1.0":"2019-07-22T22:02:57.568Z","4.0.0-alpha.0":"2019-08-07T21:09:59.717Z","3.1.1":"2019-08-14T00:52:44.090Z","4.0.0-canary.0":"2019-09-05T04:38:14.726Z","4.0.0-canary.1":"2019-09-09T20:21:07.690Z","3.2.0":"2019-09-12T21:53:56.530Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:54.308Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:43.662Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:34.054Z","4.0.0-canary.199534d61.0":"2019-09-27T18:58:20.968Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:37.120Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:59.011Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:58.088Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:05:16.272Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:09:20.254Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:56.394Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:11:32.500Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:46.110Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:44.586Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:57:35.761Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:59:33.566Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:02:17.317Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:55.879Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:02:13.156Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:11:34.328Z","4.0.0":"2019-11-02T18:12:07.644Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:34:26.390Z","5.0.0-canary.58500806e.0":"2019-11-08T15:36:26.809Z","5.0.0-canary.66299b646.0":"2019-11-08T20:34:21.522Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:53.152Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:57.455Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:43:00.386Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:38:26.214Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:59:30.857Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:31:32.312Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:06:54.486Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:33:32.848Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:49:15.377Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:20:06.237Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:10:38.031Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:11:19.970Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:11:42.873Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:55:59.352Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:17:28.492Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:08:14.059Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:54.372Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:20:45.183Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:21:12.315Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:45.941Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:23:27.834Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:50.925Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:56:46.093Z","5.0.0-canary.50f110a6c.0":"2019-12-10T17:00:33.704Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:17:15.936Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:48:03.082Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T19:00:02.354Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:10:56.394Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:37:51.575Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:10:54.950Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:34:17.770Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:41:20.841Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:17:45.488Z","5.0.0-canary.391674a26.0":"2019-12-18T19:18:10.612Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:35:53.679Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:21:07.935Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:25:01.102Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:50:56.940Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:25:55.147Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:15:17.024Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:27:54.584Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:24:56.746Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:10:43.592Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:27:52.782Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:48:34.264Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:50:55.779Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:55:23.773Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:46:24.186Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:04:00.196Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:50.729Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:43:02.111Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:10:43.208Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:23:09.447Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:37:45.882Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:27:15.136Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:56:17.275Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T15:00:40.780Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:17:30.543Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:11:16.232Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:40:14.347Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:16:00.188Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:26:51.366Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:40:35.070Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:18:01.390Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:20:04.406Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:21:37.066Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:57.252Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:57:47.954Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:28:42.136Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:42:22.338Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:11:17.426Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:11:39.087Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:23:04.278Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:43:22.557Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:59:07.125Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:17:12.130Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:51.052Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:41:05.303Z","5.0.0-canary.1eb032637.0":"2020-01-08T23:00:54.341Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:01:36.924Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:11:01.987Z","5.0.0-canary.aab102017.0":"2020-01-10T00:13:03.424Z","5.0.0-canary.426913342.0":"2020-01-10T01:45:03.787Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:26:09.482Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:57:38.590Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:28:06.566Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:19:36.021Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:33:22.546Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:14:31.383Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:16:05.013Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:54:07.670Z","5.0.0-canary.60354c577.0":"2020-01-14T22:46:57.953Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:39:36.087Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:43:52.165Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:11:07.472Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:48:54.150Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:49:12.104Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:18:15.245Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:24:51.438Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:47:47.720Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:08:03.190Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:37:31.924Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:01:08.919Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:18:11.380Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:21:38.666Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:36:54.477Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:31:41.613Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:40:55.455Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:12:28.194Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:50:46.699Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:38:07.144Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:47:10.082Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:47.444Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:23:28.920Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:56:31.581Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:58:41.380Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:17:56.437Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:10:16.521Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:13:29.144Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:56:07.252Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:55:55.253Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:48:24.044Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:22:02.407Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:46:46.425Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:33:18.630Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:56:54.636Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:25:02.672Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:30:12.124Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:44:08.172Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:49:44.080Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:10:39.833Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:56:36.800Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:17:47.348Z","5.0.0-canary.45985457b.0":"2020-01-29T23:34:03.036Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:38:10.007Z","5.0.0-canary.181486643.0":"2020-01-30T20:56:56.924Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:24:00.794Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:03:47.800Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:11:12.068Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:13:25.354Z","5.0.0-canary.535398572.0":"2020-02-03T18:12:55.823Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:04:37.094Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:01:44.870Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:05:03.800Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:34:09.627Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:30:40.721Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:21:58.875Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:56:17.865Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T23:00:16.152Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:49:40.415Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:26:04.153Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:12:21.977Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:44:10.938Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:43:58.711Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:50:20.769Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:52:20.618Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:44:46.221Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:07:03.208Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:24:27.533Z","5.0.0":"2020-02-14T00:09:39.171Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:49:00.825Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:44:31.277Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:23:21.158Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:16:53.365Z","6.0.0-canary.765caef18.0":"2020-02-21T17:33:50.299Z","6.0.0-canary.949562303.0":"2020-02-21T20:38:34.349Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:58:49.088Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:01:33.665Z","5.1.0":"2020-02-25T21:38:55.243Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:39:32.275Z","6.0.0-canary.781434a92.0":"2020-02-25T23:28:46.713Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:04:50.179Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:12:56.406Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:11:24.951Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:27:00.875Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:44:54.740Z","6.0.0-canary.98b843417.0":"2020-03-05T18:31:46.136Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:23:10.262Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:48:04.884Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:23:11.631Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:03:30.381Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:37:57.744Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:59:24.364Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:06:10.594Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:34:05.988Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:26:24.739Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:38:52.063Z","6.0.0-canary.bec065920.0":"2020-03-12T20:21:19.444Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:21:40.610Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:01:56.839Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:48:42.982Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:35:44.967Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:36:37.588Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:54:14.349Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:59:57.739Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:16:00.750Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:44:29.091Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:48:03.479Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:19:10.208Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:05:45.275Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:57:13.358Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:20:18.623Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:57:07.189Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:56:50.190Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:10:20.607Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:14:55.111Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:04:53.416Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:25:33.449Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:37:38.842Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:42:40.624Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:33:19.105Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:30:43.883Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:48:07.155Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:24:02.227Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:47:24.852Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:32:02.309Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:53:34.863Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:35:01.148Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:06:50.758Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:11:11.955Z","6.0.0-canary.c02642273.0":"2020-04-15T16:18:24.548Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:44:09.644Z","6.0.0-canary.490fbdc09.0":"2020-04-16T06:00:34.313Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:27:44.077Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:20:05.938Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:55:21.516Z","6.0.0-canary.ca61b656f.0":"2020-04-16T20:00:58.088Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:33:45.886Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:42:13.560Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:03:46.525Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:22:27.150Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:18:50.587Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:59:18.040Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:56:56.254Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:21:14.307Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:15:53.022Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:19:30.561Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:43:12.174Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:08:16.263Z","7.0.0-canary.8540808be.0":"2020-04-23T17:27:06.812Z","6.0.0":"2020-04-23T17:27:44.207Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:46:37.771Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:22:04.980Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:06:55.990Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:19:40.927Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:44:45.688Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:33:16.077Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:08:16.836Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:18:18.487Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:45:00.356Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:30:35.583Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:28:50.067Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:33:58.093Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:43:23.884Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:26:44.551Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:23:38.382Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:36:43.080Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:48:26.408Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:20:00.574Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:32:12.592Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:35:02.030Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T17:00:15.253Z","7.0.0-canary.09f591967.0":"2020-05-05T21:05:28.258Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:10:30.579Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:08:49.648Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:56:02.067Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:19:37.837Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:50:22.687Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:39:19.333Z","7.0.0-canary.119e21426.0":"2020-05-08T20:23:28.092Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:08:23.483Z","7.0.0-canary.e84444387.0":"2020-05-08T21:32:28.038Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:14:12.750Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:30:22.064Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:33:42.012Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:28:12.187Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:26:01.846Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:19:17.688Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:48:19.166Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:43:42.741Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:52:41.748Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:54:35.230Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:45:19.605Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:19:00.029Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:51:41.820Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:10:21.845Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:39:14.190Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:38:06.656Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:51:30.795Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:03:39.588Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:13:41.652Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:42:08.910Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:03:00.774Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:15:47.248Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:19:10.633Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:20:59.463Z","7.0.0-canary.740860e78.0":"2020-05-21T17:27:34.710Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:29:44.534Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:30:05.364Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:32:42.104Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:34:00.458Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:49:01.759Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:22:06.663Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T21:00:53.504Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:04:57.009Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:29:36.285Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:33:05.012Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:33:51.780Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:47:30.732Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:46:21.908Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:08:27.348Z","7.0.0-canary.01de07011.0":"2020-05-26T19:53:33.530Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:36:24.911Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:14:36.431Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:55:44.617Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T19:00:47.932Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:17:31.488Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:21:44.878Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:31:00.670Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:39:19.073Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:37:59.611Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:52:07.371Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:56:18.259Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:51:16.024Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:16:09.339Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:05:59.963Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:41:36.640Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:26:34.142Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:45:42.955Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:50:02.017Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:49:43.569Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:27:03.295Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:03:42.626Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:24:28.245Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:53:24.686Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:47:45.079Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:04:18.674Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:59:00.602Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:10:03.281Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:13:42.833Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:15:28.303Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:15:30.580Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:05:35.505Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:45:19.002Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:43:04.549Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:58:34.149Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:55:01.732Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:27:14.984Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:17:33.078Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:40:42.645Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:47:38.705Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:09:26.711Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:31:45.138Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:50:19.351Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:22:24.260Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:16:39.120Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:05:19.276Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:17:24.299Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:22:24.279Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:28:45.313Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:49:17.861Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:12:09.073Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:21:02.984Z","7.0.0-canary.10b505785.0":"2020-06-19T20:22:24.117Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:38:38.019Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:40:52.094Z","7.0.0-canary.c20727498.0":"2020-06-19T20:43:44.409Z","7.0.0-canary.4e360ae94.0":"2020-06-19T21:00:26.919Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:02:52.094Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:04:02.715Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:29:16.809Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:31:31.673Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:32:21.922Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:35:04.202Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:24:45.697Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:15:41.833Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:18:25.370Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:26:16.051Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:54:29.043Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:58:29.526Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:30:23.230Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:29:19.423Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:35:00.738Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:43:04.992Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:49:14.311Z","7.0.0-canary.080965f39.0":"2020-06-23T15:18:35.013Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T16:01:05.144Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:26:04.331Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:48:59.934Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:01:29.319Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:03:59.147Z","7.0.0":"2020-06-23T19:12:01.233Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:12:51.928Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:42:14.643Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:56:53.155Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:32:41.184Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:58:01.370Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:54:19.205Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:39:37.876Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:02:44.677Z","8.0.0-canary.38197b443.0":"2020-06-25T21:23:35.315Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:39:46.483Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:17:55.362Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:49:13.805Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:24:38.382Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:16:20.617Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:31:51.293Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:52:57.380Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:06:52.310Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:15:36.039Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:48:15.082Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:57:32.351Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:28:14.118Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:40:03.252Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:42:33.427Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:49:26.709Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:16:58.007Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:45:13.629Z","8.0.0-canary.d850de590.0":"2020-07-09T18:06:33.617Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:36:21.541Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:37:20.416Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:52:50.350Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:21:45.591Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:13:34.528Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:43:51.592Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:08:20.625Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:35:23.966Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:21:20.002Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:11:45.650Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:14:10.518Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:16:08.235Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:35:41.017Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:10:28.087Z","8.0.0-canary.01db89053.0":"2020-07-16T16:40:47.112Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:21:11.323Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:56:45.071Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:51:17.362Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:48:20.568Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:24:30.947Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:34:57.188Z","8.0.0-canary.12a109680.0":"2020-07-22T23:04:42.618Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:54:05.261Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:50:55.835Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:48:23.275Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:48:36.082Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:59:56.205Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T21:00:59.956Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:24:53.722Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:25:10.131Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:44:53.447Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:11:53.126Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:58:03.929Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:14:30.567Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:08:01.158Z","8.0.0-canary.75553837c.0":"2020-07-27T15:13:45.257Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:39:17.834Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:48:30.230Z","8.0.0-canary.81dc33377.0":"2020-07-27T16:00:29.173Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:33:47.901Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:09:42.827Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:52:21.201Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:59:22.167Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:59:41.822Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:55:15.384Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:51:43.662Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:40:33.137Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:54:00.741Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:17:12.902Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:37:38.155Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:50:30.120Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:22:03.782Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:36:21.227Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:40:04.486Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:16:20.392Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:26:45.808Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:02:41.692Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:12:01.557Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:16:32.024Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:28:52.967Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:11:26.778Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:22:39.786Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:47:30.738Z","8.0.0-canary.005e86a9b.0":"2020-07-30T18:01:22.867Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:09:54.843Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:21:38.688Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:32:46.782Z","8.0.0-canary.f041a48c9.0":"2020-07-30T23:01:03.543Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:51:40.449Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:24:14.136Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:52:03.998Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:55:20.990Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:55:53.997Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:56:13.706Z","8.0.0-canary.72258f898.0":"2020-08-04T01:18:40.321Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:49:55.720Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:25:31.437Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:50:13.900Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:55:27.928Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:21:22.624Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:40:36.908Z","8.0.0-canary.08090126b.0":"2020-08-06T19:33:56.436Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:51:18.127Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:28:05.019Z","8.0.0-canary.96a640534.0":"2020-08-06T22:42:46.990Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:52:36.991Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:22:22.776Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:49:58.957Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:53:58.750Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:32:07.894Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:03:19.718Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:09:31.795Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:05:27.948Z","8.0.0-canary.760873445.0":"2020-08-12T21:44:32.401Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:54:32.870Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:02:04.884Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:30:02.157Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:13:41.078Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:30:22.219Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:51:57.420Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:19:07.404Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:52:23.289Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:17:29.714Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:31:29.843Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:23:44.995Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:39:49.034Z","8.0.0-canary.000d64815.0":"2020-08-17T17:05:36.821Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:33:17.621Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:38:08.988Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:43:26.698Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:25:17.730Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:22:19.530Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:34:27.137Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:39:05.747Z","8.0.0-canary.546277d32.0":"2020-08-20T16:45:39.663Z","8.0.0-canary.da72839f4.0":"2020-08-20T18:01:27.694Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:19:50.387Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:16:32.745Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:58:59.879Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:07:46.664Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:54:02.715Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:30:08.104Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:13:09.921Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:01:43.212Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:42:10.779Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:05:07.419Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:57:43.609Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:50:43.301Z","8.0.0-canary.911014711.0":"2020-08-27T16:09:34.284Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:57:24.092Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:58:08.936Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:58:39.765Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:14:11.240Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:17:22.036Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:11:59.032Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:51:10.809Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:56:57.538Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:11:47.975Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:01:33.208Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:34:06.420Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:55:52.224Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:53:17.922Z","8.0.0-canary.a306aa488.0":"2020-09-17T01:00:18.758Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:27:19.649Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:44:38.611Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:11:52.731Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:19:13.397Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:44:30.336Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:15:38.818Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:47:46.400Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:33:51.690Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:37:26.641Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:52:51.294Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:26:12.878Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:55:49.070Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:11:40.363Z","8.0.0-canary.d71622574.0":"2020-10-09T16:33:21.566Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:55:27.886Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:48:08.214Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:58:11.699Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:17:11.399Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:19:06.134Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:05:48.875Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:09:54.995Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:53:08.718Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:33:22.580Z","8.0.0-canary.596e98424.0":"2020-10-28T16:05:23.780Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:13:55.876Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:46:44.158Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:14:22.919Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:42:43.683Z","8.0.0-canary.c61db90a5.0":"2020-10-28T19:01:43.635Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:34:14.282Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:01:46.199Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:06:31.881Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T23:01:09.005Z","8.0.0":"2020-11-02T23:01:33.298Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:22:56.378Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:29:44.634Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:38:42.360Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:10:50.192Z","9.0.0-canary.419e03572.0":"2020-11-04T01:34:36.093Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:47:21.380Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:06:54.234Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:58:04.255Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:17:31.976Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:46:23.637Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:22:18.755Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:51:32.825Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:47:19.437Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:18:45.940Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:26:34.390Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:29:04.772Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:59:43.379Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:45:40.667Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:36:19.524Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:27:40.870Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:53:54.388Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:56:47.121Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:19:57.689Z","9.0.0-canary.a41527604.0":"2020-11-19T20:02:39.742Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:57:34.152Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:49:09.975Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:10:29.516Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:17:04.377Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:32:33.625Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:35:57.019Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:41:55.399Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:52:47.079Z","9.0.0-canary.fd22355f7.0":"2020-11-30T23:01:11.431Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:58:33.253Z","9.0.0-canary.977585650.0":"2020-12-02T14:43:57.891Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:51:05.477Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:09:05.185Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:18:04.036Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:24:02.824Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:31:18.209Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:43:13.635Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T16:00:27.319Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:02:56.868Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:46:50.785Z","9.0.0-canary.832668d33.0":"2020-12-04T18:07:31.465Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:30:27.368Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:43:35.772Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:51:05.871Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:03:09.273Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:14:54.727Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:29:51.565Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:33:53.430Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:47:34.824Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:07:02.219Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:12:36.853Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:51:40.241Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:09:13.617Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:47:54.971Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:30:02.141Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:07:04.160Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:08:52.183Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:03:18.585Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:29:08.479Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:09:02.255Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:43:36.074Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:06:44.459Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:47:01.966Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:09:56.963Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:49:24.962Z","9.0.0":"2020-12-29T19:47:34.142Z","10.0.0-canary.776c18681.0":"2020-12-30T00:41:38.952Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:13:24.989Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:48:01.221Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:05:56.272Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:11:07.226Z","10.0.0-canary.365c69360.0":"2021-01-05T17:49:59.520Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:02:16.078Z","10.0.0-canary.766981c15.0":"2021-01-05T22:41:53.472Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:51:28.190Z","10.0.0-canary.968735356.0":"2021-01-06T15:52:31.240Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:45:44.462Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:28:12.556Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:35:45.078Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:21:21.795Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:53:12.326Z","10.0.0-canary.089de519c.0":"2021-01-08T22:22:09.160Z","10.0.0-canary.163119837.0":"2021-01-08T23:46:46.862Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:25:51.104Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:14:02.121Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:56:52.330Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:08:45.301Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:11:47.051Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:35:41.387Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:28:05.137Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:55:23.586Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:21:01.266Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:09:49.315Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:56:38.746Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:11:12.158Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:06:31.040Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:57:57.706Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:53:39.543Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:53:05.810Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:37:31.672Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:25:47.510Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:11:50.611Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:46:28.840Z","10.0.0-canary.623af861e.0":"2021-01-26T03:46:42.537Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:35:08.909Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:47:42.896Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:05:48.579Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:28:55.889Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:21:51.988Z","10.0.0-canary.994873795.0":"2021-01-27T14:52:47.517Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:03:56.818Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:34:19.377Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:05:32.648Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:05:17.083Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:16:20.792Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:22:06.769Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:51:01.251Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:44:47.889Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:20:06.053Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:35:44.965Z","10.0.0-canary.05f249666.0":"2021-02-04T17:51:58.127Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:44:57.017Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:36:32.029Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:02:08.997Z","10.0.0-canary.533092a90.0":"2021-02-05T03:48:18.597Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:19:24.460Z","10.0.0":"2021-02-05T16:20:42.878Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:43:51.897Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:33:15.685Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:06:43.508Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:05:27.437Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:36:25.472Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:19:07.824Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:02:19.439Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:42:57.686Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:54:27.481Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:18:41.568Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:08:34.586Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:43:27.624Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:32:32.813Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T16:01:09.368Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:32:33.398Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:13:38.424Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:17:50.451Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:11:43.169Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:26:40.612Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:59:45.491Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:46:25.964Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:36:41.848Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:07:16.584Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:39:55.140Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:25:08.958Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:44:37.739Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:29:08.117Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:38:34.174Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:14:39.731Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:38:14.496Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:47:27.984Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:02:20.168Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:51:10.019Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:47:24.913Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:32:14.647Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:15:51.686Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:34:51.338Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:36:12.435Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:36:51.428Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:52:12.513Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:17:19.374Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:49:52.851Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:24:10.514Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:38:44.651Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:09:46.878Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:40:39.908Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:54:49.952Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:22:40.196Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:33:45.622Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:25:40.680Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:43:37.456Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:02:41.981Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:41:38.260Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:51:05.975Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:47:14.287Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:41:30.971Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:45:40.591Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:29:04.100Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:53:56.796Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:59:01.863Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:26:41.109Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:51:24.891Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:04:42.348Z","11.0.0-canary.81911b707.0":"2021-03-11T18:24:54.254Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:38:20.532Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:03:03.173Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:10:42.606Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:34:57.898Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:42:01.255Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:45:50.218Z","11.0.0-canary.73a227194.0":"2021-03-12T00:25:39.737Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:04:39.354Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:36:33.967Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:21:43.054Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:49:27.897Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:13:55.752Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:41:09.685Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:42:53.768Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:03:19.382Z","11.0.0-canary.6072ed604.0":"2021-03-17T23:00:57.886Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:21:39.637Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:18:50.074Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:45:38.936Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:19:27.945Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:40:09.680Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:52:55.949Z","11.0.0-canary.cbc57c600.0":"2021-03-19T01:01:11.394Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:14:15.093Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:35:34.708Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:45:47.608Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:06:37.660Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:39:09.003Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:09:23.627Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:04:21.857Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:55:54.289Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:06:06.248Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:31:11.138Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:18:10.231Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:34:20.014Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:59:00.318Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:49:58.826Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:22:07.377Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:35:04.776Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:13:01.069Z","11.0.0-canary.24609b822.0":"2021-03-31T20:58:22.051Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:06:46.588Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:02:19.821Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:48:34.464Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:25:30.406Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:06:36.048Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:02:01.057Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:43:32.680Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:46:16.109Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:55:10.789Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:59:09.422Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:37:14.511Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:39:59.396Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:36:48.064Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:12:31.395Z","11.0.0-canary.24255c408.0":"2021-04-09T20:13:54.447Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:54:53.739Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:16:56.632Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:44:48.486Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:04:19.124Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:05:27.147Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:32:49.710Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:47:35.309Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:55:38.828Z","11.0.0":"2021-04-15T22:59:40.898Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:46:26.319Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:48:18.194Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:42:36.341Z","12.0.0-canary.b52196498.0":"2021-04-19T19:59:12.387Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:10:02.243Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:58:34.309Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:39:12.772Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:50:43.378Z","12.0.0-canary.cad489689.0":"2021-04-22T16:51:00.748Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:35:57.182Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:14:38.653Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:44:29.811Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:50:54.099Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:11:17.988Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:21:15.680Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:59:59.473Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:37:55.182Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:59:22.750Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:47:35.555Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:08:52.264Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:14:27.617Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:49:17.829Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:55:05.031Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:46:13.627Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:50:42.389Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:44:29.314Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:19:27.081Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:25:16.169Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:03:28.653Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:39:12.238Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:23:48.238Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:55:00.056Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:24:10.793Z","12.0.0-canary.33148231f.0":"2021-05-03T19:40:12.199Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:47:18.121Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:43:11.122Z","12.0.0-canary.de997644b.0":"2021-05-04T17:29:44.022Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:56:40.852Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:01:52.248Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:11:55.707Z","12.0.0-canary.718c90178.0":"2021-05-04T19:29:14.990Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:32:05.574Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:35:21.530Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:51:04.125Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:59:30.808Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:04:36.670Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:08:03.988Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:23:18.307Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:17:51.757Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:28:47.002Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T21:01:37.741Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:42:31.775Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:40:41.887Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:31:39.794Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:58:08.218Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:30:57.437Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:45:30.306Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:44:51.080Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:20:23.849Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:25:03.291Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:26.060Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:58:20.212Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:10:23.318Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:26:23.012Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T01:00:12.454Z","12.0.0-canary.cb162da37.0":"2021-05-11T02:00:09.121Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:18:57.531Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:24:00.766Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:21:32.256Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:24:52.287Z","12.0.0-canary.33a954852.0":"2021-05-13T15:09:28.134Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:32:38.994Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:09:35.769Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:15:16.250Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:42:08.683Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:55:27.086Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:14:38.666Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:29:51.500Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:58:17.934Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:52:40.510Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:20:40.608Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:07:23.712Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:15:58.026Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:36:58.705Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:06:22.602Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:47:05.902Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:55:56.069Z","12.0.0-canary.464a00286.0":"2021-06-03T14:47:49.510Z","12.0.0-canary.474de7878.0":"2021-06-03T15:15:45.346Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:47:47.996Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:15:39.629Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:43:08.260Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:49:56.232Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:23:43.802Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:42:19.028Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:07:59.155Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:08:54.486Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:37:20.199Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:37:12.433Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:07:19.109Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:47:48.970Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:40:50.319Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:19:36.439Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:23:32.194Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:31:40.293Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:05:07.767Z","12.0.0-canary.271fff902.0":"2021-06-15T22:52:35.210Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:53:30.196Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:07:56.378Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:06:56.607Z","12.0.0-canary.940550232.0":"2021-06-17T19:41:44.819Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:26:03.649Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:13:11.987Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:42:03.094Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:38:36.925Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:13:31.703Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:26:05.725Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:28:58.199Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:16:27.384Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:54:03.090Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:42:24.951Z","12.0.0-canary.796811db7.0":"2021-07-01T00:04:58.427Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:08:08.318Z","12.0.0-canary.435866d32.0":"2021-07-02T18:22:42.205Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-03T00:01:35.149Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:11:23.777Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:05:18.703Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:05:40.565Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:26:58.629Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:52:56.225Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:50:55.872Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:11:04.249Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:45:51.777Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:55:26.424Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:52:19.363Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:24:03.723Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:49:50.780Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:09:43.297Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:23:28.672Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:43:48.960Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:08:41.160Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:59:30.870Z","12.0.0-canary.7239684d4.0":"2021-07-16T16:00:37.192Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:15:29.468Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:44:41.243Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:43:37.083Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:10:44.385Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:58:19.864Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:07:04.612Z","12.0.0-canary.791311bba.0":"2021-07-20T22:09:05.040Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:37:33.066Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:51:25.429Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:07:57.316Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:39:53.099Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:13:46.802Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:33:44.294Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:57:16.885Z","12.0.0-canary.22f390c43.0":"2021-07-27T19:01:24.471Z","12.0.0":"2021-07-27T19:51:35.708Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:53:10.655Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:19:45.274Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:27:32.307Z","13.0.0-canary.28656298a.0":"2021-07-29T18:14:36.329Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:36:53.638Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:06:41.902Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:34:53.478Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:24:55.938Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:15:27.024Z","13.0.0-canary.a80c8b2c2.0":"2021-08-05T00:01:20.467Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:58:05.992Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:43:53.631Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:19:49.516Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:51:31.314Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:16:24.735Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:09:06.796Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:18:53.283Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:19:12.665Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:23:12.302Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:42:23.952Z","13.0.0-canary.f4241a42a.0":"2021-08-11T17:01:14.160Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:30:21.689Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:57:04.046Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:46:56.858Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:50:09.394Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:09:41.917Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:23:28.849Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:55:48.126Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:15:51.952Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:25:43.709Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:03:47.711Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:19:15.393Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:50:31.521Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:33:47.079Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:28:14.934Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:21:54.445Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:45:50.067Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:28:17.788Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:30:21.094Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:18:45.657Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:29:27.522Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:50:06.040Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:19:56.680Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:34:49.722Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:55:19.729Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T22:01:04.999Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:39:51.576Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:07:38.142Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:10:50.160Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:45:53.235Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:55:55.819Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:13:11.512Z","13.0.0-canary.611db508e.0":"2021-09-02T03:16:54.163Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:39:28.146Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:46:29.136Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:47:43.418Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:31:27.580Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:33:01.959Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:33:30.628Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:44:16.539Z","13.0.0-canary.72464476c.0":"2021-09-07T15:35:34.346Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:34:48.426Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:44:30.900Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:36:55.781Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:02:31.404Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:11:45.766Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:26:44.451Z","13.0.0-canary.864798678.0":"2021-09-09T18:38:11.863Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:23:09.501Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:05:00.559Z","13.0.0-canary.08398f880.0":"2021-09-13T23:35:35.663Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:51:37.711Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:13:38.812Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T22:00:22.767Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:18:41.541Z","13.0.0-canary.80a583365.0":"2021-09-17T20:36:41.943Z","13.0.0-canary.83900936a.0":"2021-09-17T23:25:10.263Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:36:47.875Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:48:24.102Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:38:31.748Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:12:51.849Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:58:41.797Z","13.0.0-canary.65084baff.0":"2021-09-23T21:26:18.416Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:42:44.761Z","13.0.0":"2021-09-24T19:46:43.309Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:47:26.410Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:11:51.154Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:30:08.101Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:43:50.869Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:57:44.779Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:32:09.198Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:29:22.369Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:47:47.157Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:22:58.779Z","14.0.0-canary.261f2db59.0":"2021-10-20T17:00:29.955Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:22:42.799Z","14.0.0-canary.348665978.0":"2021-10-21T14:51:38.236Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:13:13.821Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:53:41.564Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:02:20.952Z","14.0.0-canary.a986df922.0":"2021-10-29T21:35:51.402Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:06:42.593Z","14.0.0-canary.468392606.0":"2021-11-11T19:41:01.358Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:51:38.765Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:57:37.189Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:59:22.187Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:25:23.967Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:37:17.969Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:30:39.691Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:14:40.315Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:41:10.381Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:51:10.397Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:18:07.313Z","14.0.0-canary.554c71829.0":"2021-11-16T16:20:39.325Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:25:28.324Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T19:00:38.680Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:26:10.772Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:40:37.077Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:36:22.902Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:05:50.028Z","14.0.0-canary.93134d453.0":"2021-11-23T15:40:35.169Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:33:32.214Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:38:38.897Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:51:55.499Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:57:19.303Z","14.0.0-canary.17a072535.0":"2021-12-02T18:06:34.850Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:45:44.289Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:07:53.517Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:26:44.243Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:30:23.903Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:56:31.713Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:41:12.771Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:14:15.723Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:11:01.314Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:33:35.347Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:47:13.219Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:15:30.576Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:02:36.545Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:55:38.569Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:34:19.397Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:50:58.319Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:43:44.103Z","14.0.0-canary.390220e42.0":"2022-01-17T16:47:29.945Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:54:04.017Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:18:49.608Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:55:42.368Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:04:41.088Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:33:18.291Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:14:28.657Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:38:28.672Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:42:41.640Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:51:07.999Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:24:07.366Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:58:28.607Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:48:04.188Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:55:01.725Z","14.0.0-canary.96ea061c1.0":"2022-02-09T19:00:32.099Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:07:55.707Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:30:46.532Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:50:17.438Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:17:23.526Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:05:10.049Z","14.0.0-canary.868793776.0":"2022-02-22T19:37:25.044Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:47:07.094Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:34:10.573Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:28:21.870Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:01:49.325Z","14.0.0-canary.16c166154.0":"2022-03-08T23:23:19.131Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:29:36.316Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:30:37.053Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:51:00.421Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:04:32.903Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:18:48.652Z","14.0.0-canary.32b391398.0":"2022-03-17T18:00:18.989Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:40:12.617Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:53:06.142Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:45:04.018Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:51:44.199Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:19:30.948Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:40:55.289Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:05:32.177Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:35:56.357Z","14.0.0-canary.344d52823.0":"2022-03-29T18:44:15.478Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:33:55.248Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:15:15.215Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:25:11.103Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:24:24.484Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:06:43.404Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:48:44.345Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:12:18.481Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:02:54.121Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:46:25.035Z","14.0.0":"2022-04-28T16:57:01.715Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:58:02.019Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:15:42.935Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:32:32.644Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:57:02.442Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:59:19.963Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:25:56.316Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:41:21.810Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:19:32.634Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:45:17.165Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:27:58.562Z","15.0.0-canary.05930a453.0":"2022-05-13T18:48:30.563Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:02:01.952Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:33:41.938Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:03:46.936Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:22:49.155Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:58:51.071Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:41:12.577Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:22:20.251Z","15.0.0-canary.df47894db.0":"2022-06-13T17:10:15.685Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:31:21.709Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:58:53.755Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:24:05.202Z","15.0.0-canary.764de225d.0":"2022-06-29T16:28:33.857Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:29:53.510Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:56:33.610Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:56:09.643Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:52:35.938Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:32:32.182Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:04:19.768Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:32:58.791Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:40:09.548Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:40:50.809Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:38:43.486Z","15.0.0-canary.88db01990.0":"2022-07-12T11:41:44.746Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:30:28.460Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:36:29.770Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:06:53.402Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:09:42.986Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:50:57.297Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:44:47.079Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:02:43.843Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:06:47.879Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:25:50.786Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:48:21.997Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:21:35.663Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:31:19.923Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:23:26.075Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:41:46.042Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:58:40.423Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:10:51.672Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:06:19.369Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:47:25.399Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:15:11.851Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:42:29.993Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:22:29.060Z","15.0.0-canary.10196647d.0":"2022-08-03T21:55:23.365Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:44:30.083Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:22:32.697Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:47:31.075Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:02:53.580Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:07:26.723Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:22:35.631Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:19:54.687Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:21:28.189Z","15.0.0-canary.4299717da.0":"2022-09-07T16:17:22.634Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:20:41.834Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:05:30.488Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:40:47.171Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:56:26.031Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:19:15.043Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:22:04.386Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:37:51.537Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:26:13.322Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:49:38.418Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:09:58.481Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:58:05.715Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:59:11.236Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:46:24.289Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:32:46.584Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:59:02.436Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:57:37.968Z","15.0.0-canary.db414b864.0":"2022-09-28T14:54:18.312Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:08:47.764Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:57:22.232Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:32:50.824Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:15:19.041Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:22:37.045Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:19:52.455Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:21:09.497Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:05:18.483Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:16:25.454Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:52:26.306Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:39:12.308Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:57:06.538Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:07:24.048Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:09:21.553Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:39:55.644Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:50:43.247Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:03:57.086Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T17:00:08.443Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:22:50.783Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:43:23.627Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:52:46.855Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:15:30.429Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:53:10.705Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:19:42.524Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:57:52.416Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:24:15.406Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:58:37.306Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:42:01.256Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:43:56.403Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:24:59.449Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:44:20.744Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:14:56.104Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:18:41.905Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:38:44.866Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:13:29.366Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:58:15.253Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:07:20.177Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:20:42.182Z","15.0.0-canary.fc539db34.0":"2022-10-24T19:00:46.593Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:46:36.444Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:32:13.896Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:16:57.449Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:34:01.875Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:51:09.009Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:58:03.987Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:38:25.738Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:12:18.253Z","15.0.0-canary.909b48215.0":"2022-11-03T04:09:34.603Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:20:46.627Z","15.0.0-canary.da95e2a05.0":"2022-11-04T17:00:40.170Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:58:37.962Z","15.0.0-canary.215506426.0":"2022-11-05T01:07:37.379Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:05:40.662Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:26:06.390Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:14:57.814Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:29:30.455Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:58:06.314Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:19:45.150Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:37:06.984Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:54:50.049Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:04:29.034Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:07:44.555Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:37:28.641Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:38:13.061Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:13:27.542Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:46:48.529Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T16:00:13.762Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:28:41.097Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:30:04.237Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:03:49.728Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:31:49.716Z","15.0.0-canary.b01136063.0":"2022-11-16T00:17:34.897Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:15:00.041Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:17:18.936Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:19:29.410Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:57:40.637Z","15.0.0-canary.7c73f6134.0":"2022-11-16T20:01:57.628Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:07:04.664Z","15.0.0-canary.40b18d043.0":"2022-11-16T23:00:27.105Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:10:36.608Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:01:49.119Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:03:10.266Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:56:53.766Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:06:21.684Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:22:44.743Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:18:01.525Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:02:46.889Z","15.0.0-canary.d58410453.0":"2022-11-18T19:26:47.158Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:46:50.096Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:55:42.604Z","15.0.0-canary.96f472604.0":"2022-11-21T12:54:34.738Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:04:15.490Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:55:45.544Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:02:29.664Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:32:36.094Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:18:19.264Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:41:08.374Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:58:33.032Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:17:44.208Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:15:27.739Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:49:05.454Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:13:27.054Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:35:49.274Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:50:56.890Z","15.0.0-canary.65c411674.0":"2022-11-29T17:40:33.245Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:16:01.092Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:09:38.198Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:31:07.517Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:56:10.722Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:26:01.469Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:03:38.490Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:02:47.145Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:08:39.868Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:28:25.626Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:44:36.629Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:27:36.440Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:53:38.778Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:04:59.063Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:43:09.614Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:46:17.757Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:32:37.283Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:48:25.230Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:04:07.748Z","15.0.0-canary.817002c29.0":"2022-12-13T21:55:57.213Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:30:49.734Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:20:58.540Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:46:45.746Z","15.0.0-canary.34767110.0":"2022-12-14T17:20:29.720Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:27:27.730Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:10:28.000Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:29:03.320Z","15.0.0-canary.604264203.0":"2022-12-21T21:42:32.852Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:27:14.672Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:14:06.418Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:07:06.160Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:05:50.867Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:53:28.111Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:04:10.721Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:42:49.243Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:07:50.821Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:49:31.691Z","15.0.0-canary.af490a848.0":"2023-01-03T15:59:55.171Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:40:42.335Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:14:59.985Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:34:21.573Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:19:41.697Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:39:21.795Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:37:35.070Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:04:39.432Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:11:13.786Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:23:49.517Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:17:51.049Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:45:11.208Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:25:52.559Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:30:06.361Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:13:28.846Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:20:25.886Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:20:04.637Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:14:37.317Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:56:07.036Z","15.0.0-canary.202823f54.0":"2023-01-11T21:37:35.531Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:57:46.465Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:38:21.767Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:26:41.373Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:51:39.204Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:41:02.079Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:31:41.917Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:36:44.661Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:28:46.360Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:45:19.473Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:31:57.905Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:46:11.283Z","15.0.0-canary.15b221540.0":"2023-02-01T17:54:29.576Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T19:00:22.401Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:36:11.328Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:40:17.707Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:10:48.898Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:16:20.880Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:26:03.250Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:11:25.082Z","15.0.0-canary.de38de758.0":"2023-02-09T15:44:18.467Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:05:00.548Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:51:36.714Z","15.0.0-canary.066d9439b.0":"2023-02-15T20:00:02.017Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:36:08.718Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:21:50.943Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:43:21.979Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:37:41.947Z","15.0.0-canary.f32339937.0":"2023-03-06T15:17:36.286Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:29:16.838Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:43:39.613Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:44:41.346Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:28:09.015Z","15.0.0-canary.274610c77.0":"2023-03-09T15:00:44.196Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:54:26.512Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:46:48.019Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:49:05.982Z","15.0.0-canary.de5224633.0":"2023-03-09T23:57:36.082Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:09:41.393Z","15.0.0-canary.23073a303.0":"2023-03-10T14:16:49.363Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:49:21.157Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:49:48.673Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:26:43.926Z","15.0.0-canary.82554d770.0":"2023-03-11T01:39:00.050Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:40:53.580Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:46:00.011Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:49:26.034Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:04:47.707Z","15.0.0-canary.112715df5.0":"2023-03-13T18:41:06.877Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:33:28.970Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:40:58.869Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:45:13.512Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:54:31.563Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:18:11.156Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:49:07.503Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:18:44.764Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:21:55.882Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:25:51.502Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:28:36.454Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:29:17.676Z","15.0.0-canary.87809c710.0":"2023-03-14T18:45:15.011Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:49:33.154Z","15.0.0-canary.419b23cc6.0":"2023-03-14T19:00:36.511Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:15:21.008Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:13:04.225Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:43:27.324Z","15.0.0-canary.39e473690.0":"2023-03-21T17:53:20.551Z","15.0.0-canary.cedffb44c.0":"2023-03-21T18:00:16.702Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:51:59.315Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:36:37.776Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:50:49.456Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:42:49.766Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:09:35.430Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:55:30.048Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:57:27.014Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:32:01.973Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:06:31.818Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:44:13.617Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:40:25.967Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:41:55.095Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:02:48.124Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:52:39.997Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:23:22.122Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:23:24.440Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:33:07.565Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:35:35.306Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:43:34.199Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:11:22.988Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:58:28.311Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:28:05.639Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:41:03.626Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:25:01.897Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:32:15.456Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:01:45.086Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:55:55.740Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:27:43.591Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:44:50.758Z","15.0.0-canary.446734f27.0":"2023-05-30T21:49:56.744Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:20:15.538Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:15:46.968Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:20:21.189Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:07:53.075Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:40:01.742Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:05:36.282Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:59:08.332Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:18:33.836Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:25:38.389Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:15:38.572Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:27:42.975Z","15.0.0-canary.83355c322.0":"2023-07-10T15:07:39.432Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:23:22.876Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:50:19.911Z","15.0.0-canary.02702296e.0":"2023-08-25T12:07:03.732Z","15.0.0-canary.872b65832.0":"2023-08-30T12:15:30.241Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:08:46.457Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:41:34.751Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:07:15.796Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:47:14.863Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:20:36.897Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:13:44.570Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:48:06.607Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:17:09.970Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:08:47.332Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:24:59.377Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:46:06.153Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:38:31.409Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:02:23.972Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:54:03.523Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:11:16.357Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:59:27.232Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:13:51.557Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:19:26.117Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:09:57.692Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:20:14.128Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:08:58.004Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:18:23.655Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:15:55.855Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:14:26.819Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:07:23.010Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:42:12.282Z","15.0.0-canary.311f29a60.0":"2024-04-23T18:01:19.561Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:49:51.076Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:03:56.081Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:14:02.717Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:57:44.007Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:57:44.660Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:12:17.713Z"},"maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-drawer"},"keywords":["material components","material design","navigation","drawer"],"license":"MIT","homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"readme":"","readmeFilename":""}